feat: migrate menu surface and menu to typescript

Author: hperrin

packages/common/Events.d.ts

@@ -0,0 +1,6 @@
+export interface SMUIEventDetail {}
+
+export interface SMUIEvent<T extends SMUIEventDetail = SMUIEventDetail>
+  extends Event {
+  detail?: T;
+}

packages/common/dispatch.ts

@@ -1,9 +1,4 @@
-export interface SMUIEventDetail {}
-
-export interface SMUIEvent<T extends SMUIEventDetail = SMUIEventDetail>
-  extends Event {
-  detail?: T;
-}
+import type { SMUIEventDetail, SMUIEvent } from './Events.d';
 
 export function dispatch<T extends SMUIEventDetail = SMUIEventDetail>(
   element: Element | { getElement: () => Element },

packages/common/index.ts

@@ -5,3 +5,4 @@ export { Label, Icon };
 export * from './SMUIComponent.d';
 export * from './SMUIInputAccessors.d';
 export * from './LayoutListener.d';
+export * from './Events.d';

packages/form-field/FormField.svelte

@@ -24,7 +24,7 @@
 </script>
 
 <script lang="ts">
-  import type { SMUIGenericInputAccessor } from '@smui/common';
+  import type { SMUIEvent, SMUIGenericInputAccessor } from '@smui/common';
   import { MDCFormFieldFoundation } from '@material/form-field';
   import { onMount, setContext } from 'svelte';
   import { get_current_component } from 'svelte/internal';
@@ -35,7 +35,6 @@
     prefixFilter,
     useActions,
     ActionArray,
-    SMUIEvent,
   } from '@smui/common/internal';
 
   const forwardEvents = forwardEventsBuilder(get_current_component());

packages/list/Item.svelte

@@ -65,6 +65,7 @@
   import type {
     SMUICheckboxInputAccessor,
     SMUIComponent,
+    SMUIEvent,
     SMUIGenericInputAccessor,
     SMUIRadioInputAccessor,
   } from '@smui/common';
@@ -75,7 +76,6 @@
     classMap,
     dispatch,
     ActionArray,
-    SMUIEvent,
   } from '@smui/common/internal';
   import Ripple from '@smui/ripple';
   import A from '@smui/common/A.svelte';

packages/list/List.svelte

@@ -47,6 +47,7 @@
     AddLayoutListener,
     RemoveLayoutListener,
     SMUIComponent,
+    SMUIEvent,
   } from '@smui/common';
   import { MDCListFoundation } from '@material/list';
   import { ponyfill } from '@material/dom';
@@ -57,7 +58,6 @@
     classMap,
     dispatch,
     ActionArray,
-    SMUIEvent,
   } from '@smui/common/internal';
   import Ul from '@smui/common/Ul.svelte';
   import Nav from '@smui/common/Nav.svelte';

packages/menu-surface/Anchor.js renamed to packages/menu-surface/Anchor.ts

@@ -1,9 +1,14 @@
+export type AnchorProps = {
+  addClass?: (className: string) => void;
+  removeClass?: (className: string) => void;
+};
+
 export default function Anchor(
-  node,
+  node: HTMLElement,
   {
     addClass = (className) => node.classList.add(className),
     removeClass = (className) => node.classList.remove(className),
-  } = {}
+  }: AnchorProps = {}
 ) {
   addClass('mdc-menu-surface--anchor');
 

packages/menu-surface/MenuSurface.svelte

@@ -25,13 +25,7 @@
   <slot />
 </div>
 
-<script context="module">
-  import { Corner, CornerBit } from '@material/menu-surface';
-
-  export { Corner, CornerBit };
-</script>
-
-<script>
+<script lang="ts">
   import { MDCMenuSurfaceFoundation } from '@material/menu-surface';
   import { getCorrectPropertyName } from '@material/animation/util.js';
   import { onMount, onDestroy, setContext } from 'svelte';
@@ -41,11 +35,14 @@
     classMap,
     useActions,
     dispatch,
+    ActionArray,
   } from '@smui/common/internal';
 
+  import { Corner, SMUIMenuSurfaceAccessor } from './MenuSurface.types';
+
   const forwardEvents = forwardEventsBuilder(get_current_component());
 
-  export let use = [];
+  export let use: ActionArray = [];
   let className = '';
   export { className as class };
   export let style = '';
@@ -56,28 +53,28 @@
   export let open = isStatic;
   export let fullWidth = false;
   export let quickOpen = false;
-  export let anchorElement = null;
-  export let anchorCorner = null;
+  export let anchorElement: Element | undefined = undefined;
+  export let anchorCorner: Corner | keyof typeof Corner | undefined = undefined;
   export let anchorMargin = { top: 0, right: 0, bottom: 0, left: 0 };
   export let maxHeight = 0;
   export let horizontallyCenteredOnViewport = false;
 
-  let element;
-  let instance;
-  let internalClasses = {};
-  let internalStyles = {};
-  let previousFocus;
+  let element: HTMLDivElement;
+  let instance: MDCMenuSurfaceFoundation;
+  let internalClasses: { [k: string]: boolean } = {};
+  let internalStyles: { [k: string]: string } = {};
+  let previousFocus: Element | undefined = undefined;
 
   setContext('SMUI:list:role', 'menu');
   setContext('SMUI:list:item:role', 'menuitem');
 
   $: if (
     element &&
     anchor &&
-    !element.parentNode.classList.contains('mdc-menu-surface--anchor')
+    !element.parentElement?.classList.contains('mdc-menu-surface--anchor')
   ) {
-    element.parentNode.classList.add('mdc-menu-surface--anchor');
-    anchorElement = element.parentNode;
+    element.parentElement?.classList.add('mdc-menu-surface--anchor');
+    anchorElement = element.parentElement ?? undefined;
   }
 
   $: if (instance && instance.isOpen() !== open) {
@@ -107,12 +104,9 @@
   }
 
   const iCorner = Corner;
-  const iCornerBit = CornerBit;
   $: if (instance && anchorCorner != null) {
-    if (iCorner.hasOwnProperty(anchorCorner)) {
+    if (typeof anchorCorner === 'string') {
       instance.setAnchorCorner(iCorner[anchorCorner]);
-    } else if (iCornerBit.hasOwnProperty(anchorCorner)) {
-      instance.setAnchorCorner(iCornerBit[anchorCorner]);
     } else {
       instance.setAnchorCorner(anchorCorner);
     }
@@ -157,15 +151,15 @@
 
       isFocused: () => document.activeElement === element,
       saveFocus: () => {
-        previousFocus = document.activeElement;
+        previousFocus = document.activeElement ?? undefined;
       },
       restoreFocus: () => {
         if (
           element.contains(document.activeElement) &&
           previousFocus &&
-          previousFocus.focus
+          'focus' in previousFocus
         ) {
-          previousFocus.focus();
+          (previousFocus as HTMLInputElement).focus();
         }
       },
 
@@ -201,53 +195,55 @@
       },
     });
 
-    dispatch(element, 'SMUI:menu-surface:mount', {
+    const accessor: SMUIMenuSurfaceAccessor = {
       get open() {
         return open;
       },
       set open(value) {
         open = value;
       },
       closeProgrammatic,
-    });
+    };
+
+    dispatch(element, 'SMUI:menu-surface:mount', accessor);
 
     instance.init();
 
     return () => {
-      const isHoisted = instance.isHoistedElement;
+      const isHoisted = (instance as any).isHoistedElement;
       instance.destroy();
       if (isHoisted) {
-        element.parentNode.removeChild(element);
+        element.parentNode?.removeChild(element);
       }
     };
   });
 
   onDestroy(() => {
     if (anchor) {
       element &&
-        element.parentNode.classList.remove('mdc-menu-surface--anchor');
+        element.parentElement?.classList.remove('mdc-menu-surface--anchor');
     }
   });
 
-  function hasClass(className) {
+  function hasClass(className: string) {
     return className in internalClasses
       ? internalClasses[className]
       : getElement().classList.contains(className);
   }
 
-  function addClass(className) {
+  function addClass(className: string) {
     if (!internalClasses[className]) {
       internalClasses[className] = true;
     }
   }
 
-  function removeClass(className) {
+  function removeClass(className: string) {
     if (!(className in internalClasses) || internalClasses[className]) {
       internalClasses[className] = false;
     }
   }
 
-  function closeProgrammatic(skipRestoreFocus) {
+  function closeProgrammatic(skipRestoreFocus?: boolean) {
     instance.close(skipRestoreFocus);
     open = false;
   }
@@ -256,16 +252,16 @@
     return open;
   }
 
-  export function setOpen(value) {
+  export function setOpen(value: boolean) {
     open = value;
   }
 
-  export function setAbsolutePosition(...args) {
-    return instance.setAbsolutePosition(...args);
+  export function setAbsolutePosition(x: number, y: number) {
+    return instance.setAbsolutePosition(x, y);
   }
 
-  export function setIsHoisted(...args) {
-    return instance.setIsHoisted(...args);
+  export function setIsHoisted(isHoisted: boolean) {
+    return instance.setIsHoisted(isHoisted);
   }
 
   export function getElement() {

packages/menu-surface/MenuSurface.types.ts

@@ -0,0 +1,8 @@
+import { Corner } from '@material/menu-surface';
+
+export { Corner };
+
+export interface SMUIMenuSurfaceAccessor {
+  open: boolean;
+  closeProgrammatic(skipRestoreFocus?: boolean): void;
+}

packages/menu-surface/bare.js

@@ -0,0 +1,2 @@
+export * from './index';
+export { default } from './index';

packages/menu-surface/bare.ts

@@ -0,0 +1,9 @@
+import MenuSurface from './MenuSurface.svelte';
+export * from './MenuSurface.types';
+
+import Anchor from './Anchor';
+export * from './Anchor';
+
+export default MenuSurface;
+
+export { Anchor };