From 943795f5ca75f543cb0b201dc05ba27ba9ecae81 Mon Sep 17 00:00:00 2001
From: Hunter Perrin <hperrin@gmail.com>
Date: Mon, 15 Nov 2021 14:22:26 -0800
Subject: [PATCH] feat: migrate switch to new mdc-web version

---
 MIGRATING.md                                  |  10 +-
 packages/ripple/Ripple.ts                     |   7 +-
 ...aryColor.svelte => _SecondaryColor.svelte} |   4 +-
 .../site/src/routes/demo/switch/index.svelte  |   6 +-
 packages/switch/Switch.svelte                 | 218 +++++++++---------
 packages/switch/Switch.types.ts               |  23 +-
 packages/switch/_mixins.scss                  |  50 ++--
 packages/switch/package.json                  |   3 +-
 8 files changed, 176 insertions(+), 145 deletions(-)
 rename packages/site/src/routes/demo/switch/{_PrimaryColor.svelte => _SecondaryColor.svelte} (80%)

diff --git a/MIGRATING.md b/MIGRATING.md
index f56153e63..60db7f05a 100644
--- a/MIGRATING.md
+++ b/MIGRATING.md
@@ -7,6 +7,14 @@ This doc contains information that will help you migrate your code from an older
 SMUI 6 migrated to upstream MDC 13.0 from 11.0:
 https://github.com/material-components/material-components-web/blob/master/CHANGELOG.md#1300-2021-09-24
 
+## Changes
+
+### Components
+
+- Switch
+  - No longer needs `valueKey` prop.
+  - Default color is now "primary".
+
 # SMUI 4 -> SMUI 5
 
 ## Breaking Changes
@@ -45,7 +53,7 @@ You should update your MDC dependencies to 11.0 as well.
 
 ## New Features
 
-### Compoennts
+### Components
 
 - Banner
   - Add focus trap on the banner.
diff --git a/packages/ripple/Ripple.ts b/packages/ripple/Ripple.ts
index e79f593d3..cb228b8ec 100644
--- a/packages/ripple/Ripple.ts
+++ b/packages/ripple/Ripple.ts
@@ -13,6 +13,7 @@ export type RippleProps = {
   color?: 'primary' | 'secondary';
   /** Whether the ripple is active. Leave null to determine automatically. */
   active?: boolean;
+  rippleElement?: HTMLElement;
   eventTarget?: HTMLElement;
   activeTarget?: HTMLElement;
   addClass?: (className: string) => void;
@@ -30,6 +31,7 @@ export default function Ripple(
     disabled = false,
     color,
     active,
+    rippleElement,
     eventTarget,
     activeTarget,
     addClass = (className) => node.classList.add(className),
@@ -77,7 +79,8 @@ export default function Ripple(
       instance = new MDCRippleFoundation({
         addClass,
         browserSupportsCssVars: () => util.supportsCssVariables(window),
-        computeBoundingRect: () => node.getBoundingClientRect(),
+        computeBoundingRect: () =>
+          (rippleElement || node).getBoundingClientRect(),
         containsEventTarget: (target) => node.contains(target as Node),
         deregisterDocumentInteractionHandler: (evtType, handler) =>
           document.documentElement.removeEventListener(
@@ -177,6 +180,7 @@ export default function Ripple(
         disabled,
         color,
         active,
+        rippleElement,
         eventTarget,
         activeTarget,
         addClass,
@@ -190,6 +194,7 @@ export default function Ripple(
         disabled: false,
         color: undefined,
         active: undefined,
+        rippleElement: undefined,
         eventTarget: undefined,
         activeTarget: undefined,
         addClass: (className) => node.classList.add(className),
diff --git a/packages/site/src/routes/demo/switch/_PrimaryColor.svelte b/packages/site/src/routes/demo/switch/_SecondaryColor.svelte
similarity index 80%
rename from packages/site/src/routes/demo/switch/_PrimaryColor.svelte
rename to packages/site/src/routes/demo/switch/_SecondaryColor.svelte
index 379b5e7b8..a1ff3faba 100644
--- a/packages/site/src/routes/demo/switch/_PrimaryColor.svelte
+++ b/packages/site/src/routes/demo/switch/_SecondaryColor.svelte
@@ -1,6 +1,6 @@
 <div>
   <FormField>
-    <Switch color="primary" bind:checked={checked1} />
+    <Switch color="secondary" bind:checked={checked1} />
     <span slot="label">Fields of grain.</span>
   </FormField>
 </div>
@@ -9,7 +9,7 @@
 
 <div style="margin-top: 1em;">
   <FormField align="end">
-    <Switch color="primary" bind:checked={checked2} />
+    <Switch color="secondary" bind:checked={checked2} />
     <span slot="label">Fields of grain.</span>
   </FormField>
 </div>
diff --git a/packages/site/src/routes/demo/switch/index.svelte b/packages/site/src/routes/demo/switch/index.svelte
index 06ec24bd9..ccb0df561 100644
--- a/packages/site/src/routes/demo/switch/index.svelte
+++ b/packages/site/src/routes/demo/switch/index.svelte
@@ -9,8 +9,8 @@
 
   <Demo component={Simple} file="switch/_Simple.svelte" />
 
-  <Demo component={PrimaryColor} file="switch/_PrimaryColor.svelte">
-    Primary color
+  <Demo component={SecondaryColor} file="switch/_SecondaryColor.svelte">
+    Secondary color
   </Demo>
 
   <Demo component={Group} file="switch/_Group.svelte">Group switch</Demo>
@@ -20,6 +20,6 @@
   import Demo from '$lib/Demo.svelte';
 
   import Simple from './_Simple.svelte';
-  import PrimaryColor from './_PrimaryColor.svelte';
+  import SecondaryColor from './_SecondaryColor.svelte';
   import Group from './_Group.svelte';
 </script>
diff --git a/packages/switch/Switch.svelte b/packages/switch/Switch.svelte
index c71487539..6e8b56c30 100644
--- a/packages/switch/Switch.svelte
+++ b/packages/switch/Switch.svelte
@@ -1,59 +1,69 @@
-<div
+<button
   bind:this={element}
   use:useActions={use}
   use:forwardEvents
+  use:Ripple={{
+    unbounded: true,
+    color,
+    active: rippleActive,
+    rippleElement,
+    disabled,
+    addClass,
+    removeClass,
+    // Don't need addStyle, since we don't set style prop.
+  }}
   class={classMap({
     [className]: true,
     'mdc-switch': true,
-    'mdc-switch--disabled': disabled,
-    'mdc-switch--checked': nativeChecked,
-    'smui-switch--color-primary': color === 'primary',
+    'mdc-switch--unselected': !selected,
+    'mdc-switch--selected': selected,
+    'mdc-switch--processing': processing,
+    'smui-switch--color-secondary': color === 'secondary',
     ...internalClasses,
   })}
-  {...exclude($$restProps, ['input$'])}
+  type="button"
+  role="switch"
+  aria-checked={selected ? 'true' : 'false'}
+  {disabled}
+  on:click={() => instance && instance.handleClick()}
+  {...inputProps}
+  {...exclude($$restProps, ['icons$'])}
 >
   <div class="mdc-switch__track" />
-  <div
-    use:Ripple={{
-      unbounded: true,
-      color,
-      active: rippleActive,
-      addClass: addThumbUnderlayClass,
-      removeClass: removeThumbUnderlayClass,
-      // Don't need addStyle, since we don't set style prop.
-      eventTarget: checkbox,
-    }}
-    class={classMap({
-      'mdc-switch__thumb-underlay': true,
-      ...thumbUnderlayClasses,
-    })}
-  >
-    <div class="mdc-switch__thumb" />
-    <input
-      bind:this={checkbox}
-      use:useActions={input$use}
-      class={classMap({
-        [input$class]: true,
-        'mdc-switch__native-control': true,
-      })}
-      type="checkbox"
-      role="switch"
-      {...inputProps}
-      {disabled}
-      bind:checked={nativeChecked}
-      aria-checked={nativeChecked ? 'true' : 'false'}
-      value={isUninitializedValue(valueKey) ? value : valueKey}
-      on:blur
-      on:focus
-      {...nativeControlAttrs}
-      {...prefixFilter($$restProps, 'input$')}
-    />
+  <div class="mdc-switch__handle-track">
+    <div class="mdc-switch__handle">
+      <div class="mdc-switch__shadow">
+        <div class="mdc-elevation-overlay" />
+      </div>
+      <div class="mdc-switch__ripple" bind:this={rippleElement} />
+      <div
+        use:useActions={icons$use}
+        class={classMap({
+          [icons$class]: true,
+          'mdc-switch__icons': true,
+        })}
+        {...prefixFilter($$restProps, 'icons$')}
+      >
+        <svg class="mdc-switch__icon mdc-switch__icon--on" viewBox="0 0 24 24">
+          <path
+            d="M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z"
+          />
+        </svg>
+        <svg class="mdc-switch__icon mdc-switch__icon--off" viewBox="0 0 24 24">
+          <path d="M20 13H4v-2h16v2z" />
+        </svg>
+      </div>
+    </div>
   </div>
-</div>
+</button>
 
 <script lang="ts">
   import type { SMUISwitchInputAccessor } from '@smui/common';
-  import { MDCSwitchFoundation } from '@material/switch';
+  import {
+    MDCSwitchRenderFoundation,
+    MDCSwitchRenderAdapter,
+    MDCSwitchState,
+  } from '@material/switch';
   import { onMount, getContext } from 'svelte';
   import { get_current_component } from 'svelte/internal';
   import {
@@ -79,53 +89,70 @@
   let className = '';
   export { className as class };
   export let disabled = false;
-  export let color: 'primary' | 'secondary' = 'secondary';
+  export let color: 'primary' | 'secondary' = 'primary';
   export let group: UninitializedValue | any[] = uninitializedValue;
   export let checked: UninitializedValue | boolean = uninitializedValue;
   export let value: any = null;
-  export let valueKey: UninitializedValue | string = uninitializedValue;
-  export let input$use: ActionArray = [];
-  export let input$class = '';
+  /** This currently does nothing. */
+  export let processing = false;
+  export let icons$use: ActionArray = [];
+  export let icons$class = '';
 
-  let element: HTMLDivElement;
-  let instance: MDCSwitchFoundation;
-  let checkbox: HTMLInputElement;
+  let element: HTMLButtonElement;
+  let instance: MDCSwitchRenderFoundation;
   let internalClasses: { [k: string]: boolean } = {};
-  let thumbUnderlayClasses: { [k: string]: boolean } = {};
-  let nativeControlAttrs: { [k: string]: string | undefined } = {};
+  let rippleElement: HTMLDivElement;
   let rippleActive = false;
   let inputProps =
     getContext<{ id?: string } | undefined>('SMUI:generic:input:props') ?? {};
-  let nativeChecked = isUninitializedValue(group)
+  let selected = isUninitializedValue(group)
     ? isUninitializedValue(checked)
       ? false
       : checked
     : group.indexOf(value) !== -1;
+  let state = {
+    get disabled() {
+      return disabled;
+    },
+    set disabled(value: boolean) {
+      disabled = value;
+    },
+    get processing() {
+      return processing;
+    },
+    set processing(value: boolean) {
+      processing = value;
+    },
+    get selected() {
+      return selected;
+    },
+    set selected(value: boolean) {
+      selected = value;
+    },
+  } as MDCSwitchState;
 
   let previousChecked = checked;
   let previousGroup = isUninitializedValue(group) ? [] : [...group];
-  let previousNativeChecked = nativeChecked;
+  let previousSelected = selected;
   $: {
     // This is a substitute for an on:change listener that is
     // smarter about when it calls the instance's handler. I do
     // this so that a group of changes will only trigger one
     // handler call, since the handler will reset currently
     // running animations.
-    let callHandleChange = false;
 
     // First check for group state.
     if (!isUninitializedValue(group)) {
-      if (previousNativeChecked !== nativeChecked) {
+      if (previousSelected !== selected) {
         // The change needs to flow up.
         const idx = group.indexOf(value);
-        if (nativeChecked && idx === -1) {
+        if (selected && idx === -1) {
           group.push(value);
           group = group;
-        } else if (!nativeChecked && idx !== -1) {
+        } else if (!selected && idx !== -1) {
           group.splice(idx, 1);
           group = group;
         }
-        callHandleChange = true;
       } else {
         // Potential changes need to flow down.
         const idxPrev = previousGroup.indexOf(value);
@@ -133,66 +160,61 @@
 
         if (idxPrev > -1 && idx === -1) {
           // The checkbox was removed from the group.
-          nativeChecked = false;
-          callHandleChange = true;
+          state.selected = false;
         } else if (idx > -1 && idxPrev === -1) {
           // The checkbox was added to the group.
-          nativeChecked = true;
-          callHandleChange = true;
+          state.selected = true;
         }
       }
     }
 
     // Now check individual state.
     if (isUninitializedValue(checked)) {
-      if (previousNativeChecked !== nativeChecked) {
+      if (previousSelected !== selected) {
         // The checkbox was clicked by the user.
-        callHandleChange = true;
       }
-    } else if (checked !== nativeChecked) {
+    } else if (checked !== selected) {
       if (checked === previousChecked) {
         // The checkbox was clicked by the user
         // and the change needs to flow up.
-        checked = nativeChecked;
+        checked = selected;
       } else {
         // The checkbox was changed programmatically
         // and the change needs to flow down.
-        nativeChecked = checked;
+        state.selected = checked;
       }
-      callHandleChange = true;
     }
 
     previousChecked = checked;
     previousGroup = isUninitializedValue(group) ? [] : [...group];
-    previousNativeChecked = nativeChecked;
-    if (callHandleChange && instance) {
-      instance.handleChange({
-        target: ({
-          checked: nativeChecked,
-        } as any) as EventTarget,
-      } as Event);
-    }
+    previousSelected = selected;
   }
 
   onMount(() => {
-    instance = new MDCSwitchFoundation({
+    instance = new MDCSwitchRenderFoundation({
       addClass,
+      hasClass,
+      isDisabled: () => disabled,
       removeClass,
-      setNativeControlChecked: (checked) => (nativeChecked = checked),
-      setNativeControlDisabled: (disabledValue) => (disabled = disabledValue),
-      setNativeControlAttr: addNativeControlAttr,
-    });
+      setAriaChecked: () => {
+        // Handled automatically.
+      },
+      setDisabled: (value: boolean) => {
+        disabled = value;
+      },
+      state,
+    } as MDCSwitchRenderAdapter);
 
     const accessor: SMUISwitchInputAccessor = {
       get element() {
         return getElement();
       },
       get checked() {
-        return nativeChecked;
+        return selected;
       },
       set checked(value) {
-        if (nativeChecked !== value) {
-          nativeChecked = value;
+        if (selected !== value) {
+          state.selected = value;
         }
       },
       activateRipple() {
@@ -208,6 +230,7 @@
     dispatch(element, 'SMUIGenericInput:mount', accessor);
 
     instance.init();
+    instance.initFromDOM();
 
     return () => {
       dispatch(element, 'SMUIGenericInput:unmount', accessor);
@@ -216,6 +239,12 @@
     };
   });
 
+  function hasClass(className: string) {
+    return className in internalClasses
+      ? internalClasses[className]
+      : getElement().classList.contains(className);
+  }
+
   function addClass(className: string) {
     if (!internalClasses[className]) {
       internalClasses[className] = true;
@@ -228,27 +257,6 @@
     }
   }
 
-  function addThumbUnderlayClass(className: string) {
-    if (!thumbUnderlayClasses[className]) {
-      thumbUnderlayClasses[className] = true;
-    }
-  }
-
-  function removeThumbUnderlayClass(className: string) {
-    if (
-      !(className in thumbUnderlayClasses) ||
-      thumbUnderlayClasses[className]
-    ) {
-      thumbUnderlayClasses[className] = false;
-    }
-  }
-
-  function addNativeControlAttr(name: string, value: string) {
-    if (nativeControlAttrs[name] !== value) {
-      nativeControlAttrs[name] = value;
-    }
-  }
-
   export function getId() {
     return inputProps && inputProps.id;
   }
diff --git a/packages/switch/Switch.types.ts b/packages/switch/Switch.types.ts
index a39ac89c8..fbe50a00c 100644
--- a/packages/switch/Switch.types.ts
+++ b/packages/switch/Switch.types.ts
@@ -8,7 +8,7 @@ export declare class SwitchComponentDev extends Component {
    * ### DO NOT USE!
    */
   $$prop_def: Omit<
-    Partial<svelte.JSX.HTMLAttributes<HTMLDivElement>>,
+    Partial<svelte.JSX.HTMLAttributes<HTMLButtonElement>>,
     | 'use'
     | 'class'
     | 'disabled'
@@ -16,19 +16,10 @@ export declare class SwitchComponentDev extends Component {
     | 'group'
     | 'checked'
     | 'value'
-    | 'valueKey'
-  > &
-    {
-      [k in keyof Partial<
-        svelte.JSX.HTMLAttributes<HTMLInputElement>
-      > as `input\$${k}`]?: Partial<
-        svelte.JSX.HTMLAttributes<HTMLInputElement>
-      >[k];
-    } & {
-      input$type?: never;
-      input$disabled?: never;
-      input$value?: never;
-      input$checked?: never;
-      input$group?: never;
-    } & Component['$$prop_def'];
+    | 'processing'
+  > & {
+    [k in keyof Partial<
+      svelte.JSX.HTMLAttributes<HTMLDivElement>
+    > as `icons\$${k}`]?: Partial<svelte.JSX.HTMLAttributes<HTMLDivElement>>[k];
+  } & Component['$$prop_def'];
 }
diff --git a/packages/switch/_mixins.scss b/packages/switch/_mixins.scss
index 8229a0f31..e23a876bd 100644
--- a/packages/switch/_mixins.scss
+++ b/packages/switch/_mixins.scss
@@ -1,21 +1,39 @@
+@use 'sass:color';
 @use '@material/feature-targeting/index' as feature-targeting;
-@use '@material/ripple/ripple-theme';
-@use '@material/switch/deprecated/index' as switch;
+@use '@material/theme/theme-color';
+@use '@material/theme/index' as theme;
+@use '@material/switch/index' as switch;
 
-@mixin core-styles($query: feature-targeting.all()) {
-  @include without-ripple($query);
-  @include ripple($query);
-}
-
-@mixin without-ripple($query: feature-targeting.all()) {
-  .mdc-switch.smui-switch--color-primary {
-    @include switch.toggled-on-track-color(primary, $query);
-    @include switch.toggled-on-thumb-color(primary, $query);
-  }
-}
+$_inverse-secondary: color.scale(
+  theme-color.prop-value(secondary),
+  $lightness: 75%
+);
+$_secondary-state-content: color.scale(
+  theme-color.prop-value(secondary),
+  $blackness: 50%
+);
 
-@mixin ripple($query: feature-targeting.all()) {
-  .smui-switch--color-primary .mdc-switch__thumb-underlay {
-    @include ripple-theme.states(primary, false, $query);
+@mixin core-styles($query: feature-targeting.all()) {
+  .mdc-switch.smui-switch--color-secondary {
+    // See: https://github.com/material-components/material-components-web/blob/v13.0.0/packages/mdc-switch/_switch-theme.scss#L76
+    @include switch.theme(
+      (
+        disabled-selected-icon-color: on-secondary,
+        disabled-unselected-icon-color: on-secondary,
+        selected-focus-handle-color: $_secondary-state-content,
+        selected-focus-state-layer-color: secondary,
+        selected-focus-track-color: $_inverse-secondary,
+        selected-handle-color: secondary,
+        selected-hover-handle-color: $_secondary-state-content,
+        selected-hover-state-layer-color: secondary,
+        selected-hover-track-color: $_inverse-secondary,
+        selected-icon-color: on-secondary,
+        selected-pressed-handle-color: $_secondary-state-content,
+        selected-pressed-state-layer-color: secondary,
+        selected-pressed-track-color: $_inverse-secondary,
+        selected-track-color: $_inverse-secondary,
+        unselected-icon-color: on-secondary,
+      )
+    );
   }
 }
diff --git a/packages/switch/package.json b/packages/switch/package.json
index 5720852b3..4dfbedd7a 100644
--- a/packages/switch/package.json
+++ b/packages/switch/package.json
@@ -35,8 +35,9 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@material/density": "^13.0.0",
+    "@material/feature-targeting": "^13.0.0",
     "@material/switch": "^13.0.0",
+    "@material/theme": "^13.0.0",
     "@smui/common": "^5.0.0",
     "@smui/ripple": "^5.0.0",
     "svelte2tsx": "^0.4.8"