APP-3126: clean up various interfaces for searchable select fixes (vi…

…amrobotics#458)

.vscode/settings.json

@@ -22,5 +22,12 @@
   ],
   "[svelte]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
-  }
+  },
+  "cSpell.words": [
+    "activedescendant",
+    "combobox",
+    "listbox",
+    "radiobox",
+    "viamrobotics"
+  ]
 }

packages/core/.eslintrc.cjs

@@ -22,6 +22,8 @@ module.exports = {
   rules: {
     // TODO(mc, 2023-12-15): remove overrides, fix issues
     '@typescript-eslint/no-non-null-assertion': 'warn',
+    // TODO(mc, 2024-01-03): move to base config?
+    'multiline-comment-style': 'off',
   },
   overrides: [
     {
@@ -37,5 +39,12 @@ module.exports = {
         '@typescript-eslint/no-unsafe-assignment': 'off',
       },
     },
+    // TODO(mc, 2024-01-03): remove when no-non-null-assertion errors fixed
+    {
+      files: ['**/__tests__/**'],
+      rules: {
+        '@typescript-eslint/no-non-null-assertion': 'off',
+      },
+    },
   ],
 };

packages/core/src/lib/floating/floating-style.ts

@@ -6,6 +6,7 @@ import {
   flip as flipMiddleware,
   shift as shiftMiddleware,
   arrow as arrowMiddleware,
+  size as sizeMiddleware,
   type Placement,
   type Side,
   type ComputePositionConfig,
@@ -46,6 +47,7 @@ export interface State {
   offset?: number;
   flip?: boolean;
   shift?: number;
+  matchWidth?: boolean;
   auto?: boolean;
 }
 
@@ -109,7 +111,7 @@ const calculateStyle = async (state: State): Promise<FloatingStyle> => {
 };
 
 const getConfig = (state: State): ComputePositionConfig => {
-  const { arrowElement, placement, offset, flip, shift } = state;
+  const { arrowElement, placement, offset, flip, shift, matchWidth } = state;
 
   return {
     placement: placement ?? 'top',
@@ -122,6 +124,14 @@ const getConfig = (state: State): ComputePositionConfig => {
         }),
       shift !== undefined && shiftMiddleware({ padding: shift }),
       arrowElement && arrowMiddleware({ element: arrowElement }),
+      matchWidth &&
+        sizeMiddleware({
+          apply({ rects, elements }) {
+            Object.assign(elements.floating.style, {
+              width: `${rects.reference.width}px`,
+            });
+          },
+        }),
     ],
   };
 };

packages/core/src/lib/floating/floating.svelte

@@ -7,18 +7,26 @@ import {
   type FloatingPlacement,
 } from './floating-style';
 
-export { className as cx };
-export let referenceElement: FloatingReferenceElement;
+export let referenceElement: FloatingReferenceElement | undefined;
 export let placement: FloatingPlacement = 'bottom-start';
 export let offset = 0;
+export let matchWidth = false;
 export let onClickOutside: ((target: Element) => unknown) | undefined =
   undefined;
 
+let className: cx.Argument = undefined;
+export { className as cx };
+
 const style = floatingStyle();
 let floatingElement: HTMLElement | undefined;
-let className: cx.Argument = undefined;
 
-$: style.register({ referenceElement, floatingElement, placement, offset });
+$: style.register({
+  referenceElement,
+  floatingElement,
+  placement,
+  offset,
+  matchWidth,
+});
 </script>
 
 <div

packages/core/src/lib/icon/index.ts

@@ -0,0 +1,2 @@
+export { default as Icon } from './icon.svelte';
+export type { IconName } from './icons';

packages/core/src/lib/index.ts

@@ -23,8 +23,7 @@ export {
   type FloatingStyle,
 } from './floating';
 
-export { default as Icon } from './icon/icon.svelte';
-export type { IconName } from './icon/icons';
+export * from './icon';
 
 export {
   Input,
@@ -33,6 +32,7 @@ export {
   RestrictedTextInput,
   SliderInput,
   TextInput,
+  InputStates,
   type InputState,
   type NumericInputTypes,
   type TextInputTypes,
@@ -60,15 +60,7 @@ export { persisted } from './persisted';
 export { default as Pill } from './pill.svelte';
 export { preventHandler, preventKeyboardHandler } from './prevent-handler';
 
-export { selectControls } from './select/controls';
-export { createSearchableSelectDispatcher } from './select/dispatcher';
-export { default as Multiselect } from './select/multiselect.svelte';
-export { getSearchResults } from './select/search';
-export { default as Select, type SelectState } from './select/select.svelte';
-export { default as SearchableSelect } from './select/searchable-select.svelte';
-export { default as SelectInput } from './select/select-input.svelte';
-export { default as SelectMenu } from './select/select-menu.svelte';
-export { type SortOptions } from './select/search';
+export * from './select';
 
 export { default as Switch } from './switch.svelte';
 export { default as Radio } from './radio.svelte';

packages/core/src/lib/input/index.ts

@@ -1,4 +1,5 @@
-export { default as Input, type InputState } from './input.svelte';
+export { InputStates, type InputState } from './input-state';
+export { default as Input } from './input.svelte';
 export { default as NumericInput } from './numeric-input.svelte';
 export { default as SliderInput } from './slider-input.svelte';
 export { type NumericInputTypes } from './utils';

packages/core/src/lib/input/input-state.ts

@@ -0,0 +1,8 @@
+export const InputStates = {
+  INFO: 'info',
+  WARN: 'warn',
+  ERROR: 'error',
+  NONE: 'none',
+};
+
+export type InputState = (typeof InputStates)[keyof typeof InputStates];

packages/core/src/lib/input/input.svelte

@@ -13,18 +13,11 @@ NumberInput or DateInput are preferable.
 -->
 <svelte:options immutable />
 
-<script
-  lang="ts"
-  context="module"
->
-export type InputState = 'info' | 'warn' | 'error' | 'none';
-</script>
-
 <script lang="ts">
-import Icon from '$lib/icon/icon.svelte';
-import type { IconName } from '$lib/icon/icons';
-import { preventHandler, preventKeyboardHandler } from '$lib/prevent-handler';
 import cx from 'classnames';
+import { Icon, type IconName } from '$lib/icon';
+import { preventHandler, preventKeyboardHandler } from '$lib/prevent-handler';
+import { InputStates, type InputState } from './input-state';
 
 export let value: string | number | undefined = '';
 
@@ -35,7 +28,7 @@ export let readonly = false;
 export let disabled = false;
 
 /** The state of the input (info, warn, error, success), if any. */
-export let state: InputState | undefined = 'none';
+export let state: InputState | undefined = InputStates.NONE;
 
 /** The HTML input element. */
 export let input: HTMLInputElement | undefined = undefined;
@@ -44,30 +37,22 @@ export let input: HTMLInputElement | undefined = undefined;
 let extraClasses: cx.Argument = '';
 export { extraClasses as cx };
 
-$: isInfo = state === 'info';
-$: isWarn = state === 'warn';
-$: isError = state === 'error';
+$: isInfo = state === InputStates.INFO;
+$: isWarn = state === InputStates.WARN;
+$: isError = state === InputStates.ERROR;
 $: isInputReadOnly = disabled || readonly;
 $: handleDisabled = preventHandler(isInputReadOnly);
 $: handleDisabledKeydown = preventKeyboardHandler(isInputReadOnly);
 
-let icon: IconName | null;
-$: icon = (() => {
-  switch (state) {
-    case 'info': {
-      return 'information';
-    }
-    case 'warn': {
-      return 'alert';
-    }
-    case 'error': {
-      return 'alert-circle';
-    }
-    default: {
-      return null;
-    }
-  }
-})();
+$: icon = state
+  ? (
+      {
+        [InputStates.INFO]: 'information',
+        [InputStates.WARN]: 'alert',
+        [InputStates.ERROR]: 'alert-circle',
+      } as Record<InputState, IconName>
+    )[state]
+  : undefined;
 
 $: defaultClasses =
   !disabled &&
@@ -109,6 +94,7 @@ $: errorClasses =
     on:change|capture={handleDisabled}
     on:keydown
     on:keydown|capture={handleDisabledKeydown}
+    on:focus
     on:blur
   />
 

packages/core/src/lib/input/text-input.svelte

@@ -1,6 +1,6 @@
 <!--
 @component
-  
+
 For text-based user inputs.
 
 ```svelte
@@ -42,5 +42,6 @@ export { extraClasses as cx };
   bind:input
   on:input
   on:keydown
+  on:focus
   on:blur
 />

packages/core/src/lib/radio.svelte

@@ -15,10 +15,9 @@ For users to choose only one of a predefined set of mutually exclusive options.
 
 <script lang="ts">
 import cx from 'classnames';
-import Label from './label.svelte';
-import Icon from './icon/icon.svelte';
-import { preventHandler, preventKeyboardHandler } from './prevent-handler';
-import type { IconName } from './icon/icons';
+import Label from '$lib/label.svelte';
+import { Icon, type IconName } from '$lib/icon';
+import { preventHandler, preventKeyboardHandler } from '$lib/prevent-handler';
 
 /** The set of options that is available in the radio button. */
 export let options: string[];

packages/core/src/lib/select/__tests__/multiselect.spec.ts

@@ -49,7 +49,7 @@ describe('Multiselect', () => {
     const select = screen.getByPlaceholderText('Select an option');
 
     expect(select).toHaveClass(
-      'border-warning-bright group-focus:outline-warning-bright group-focus:outline-[1.5px] group-focus:-outline-offset-1'
+      'border-warning-bright focus:outline-warning-bright focus:outline-[1.5px] focus:-outline-offset-1'
     );
   });
 
@@ -62,7 +62,7 @@ describe('Multiselect', () => {
     const select = screen.getByPlaceholderText('Select an option');
 
     expect(select).toHaveClass(
-      'border-danger-dark group-focus:outline-danger-dark group-focus:outline-[1.5px] group-focus:-outline-offset-1'
+      'border-danger-dark focus:outline-danger-dark focus:outline-[1.5px] focus:-outline-offset-1'
     );
   });