chore: prettier.

package.json

@@ -38,6 +38,7 @@
     "arrowParens": "avoid",
     "printWidth": 90,
     "semi": false,
-    "singleQuote": true
+    "singleQuote": true,
+    "trailingComma": "none"
   }
 }

packages/components/.storybook/main.ts

@@ -13,19 +13,19 @@ const config: StorybookConfig = {
    * @see https://github.com/storybookjs/storybook/issues/21414#issuecomment-1694357674
    */
   features: {
-    storyStoreV7: false,
+    storyStoreV7: false
   },
   core: {
     builder: {
       name: '@storybook/builder-vite',
       options: {
-        viteConfigPath: '../ui/vite.config.ts',
-      },
-    },
+        viteConfigPath: '../ui/vite.config.ts'
+      }
+    }
   },
   async viteFinal(config) {
     return config
-  },
+  }
 }
 
 export default config

packages/components/package.json

@@ -15,6 +15,10 @@
         "default": "./dist/cjs/index.cjs"
       }
     },
+    "./*": {
+      "import": "./dist/*.js",
+      "require": "./dist/cjs/*.js"
+    },
     "./package.json": "./package.json"
   },
   "types": "./dist/index.d.ts",

packages/components/src/autoSuggest/mod.tsx

@@ -8,17 +8,13 @@
 import { focusedStyles, sizing } from '../styles.js'
 import { Input } from '../input/mod.js'
 import { PB40T, SLB30T } from '../colors.js'
-import { ChevronDown } from '../chevronDown/mod.js'
+import { ChevronDown } from '../icons/chevronDown/mod.js'
 
 import type { ChangeEvent, FC, ReactNode } from 'react'
 import type { UseComboboxStateChange, UseComboboxStateChangeTypes } from 'downshift'
 import type { Size } from '../types.js'
 
-interface Item {
-  value: string
-  label: string
-}
-type AnItem = Item | string
+type AnItem = { value: string; label: string } | string
 type Items = AnItem[]
 interface AutoSuggestProps {
   items: Items
@@ -29,10 +25,11 @@
   onClear?: boolean | (() => void)
   onChange: (
     evt: ChangeEvent<HTMLInputElement>,
-    type?: UseComboboxStateChangeTypes,
+    type?: UseComboboxStateChangeTypes
   ) => void
+  onSelect?: (selected: AnItem) => void
   onBlur?: () => void
-  renderItem?: (item: Item | string) => ReactNode
+  renderItem?: (item: AnItem) => ReactNode
   isDisabled?: boolean
   width?: string
   color?: string
@@ -124,17 +121,17 @@
 `
 const matchSorterOptions = {
   keys: [(item: AnItem) => itemToString(item)],
-  threshold: matchSorter.rankings.CONTAINS,
+  threshold: matchSorter.rankings.CONTAINS
 }
 const getChangeEvt = (value?: AnItem | null): ChangeEvent<HTMLInputElement> => {
   const evt = new Event('change', {
     bubbles: true,
-    cancelable: false,
+    cancelable: false
   })
 
   Object.defineProperty(evt, 'target', {
     writable: false,
-    value: { value },
+    value: { value }
   })
 
   return evt as unknown as ChangeEvent<HTMLInputElement>
@@ -146,6 +143,7 @@
   onBlur,
   onClear,
   onChange,
+  onSelect,
   preload,
   loadItems,
   labelledBy,
@@ -155,7 +153,7 @@
   size = 'medium',
   placeholder = '',
   isDisabled = false,
-  inputBoundByItems = false,
+  inputBoundByItems = false
 }) => {
   const initialLoadedItems = useRef<Items>([])
   const [inputText, setInputText] = useState(itemToString(value))
@@ -176,7 +174,7 @@
           setInputItems(newItems)
         },
         250,
-        { leading: true },
+        { leading: true }
       )
     }
 
@@ -188,7 +186,7 @@
     if (preload && typeof loadItems === 'function') {
       return async () => {
         initialLoadedItems.current = await loadItems(
-          typeof preload === 'string' ? preload : '',
+          typeof preload === 'string' ? preload : ''
         )
 
         setInputItems(initialLoadedItems.current)
@@ -223,7 +221,7 @@
     getMenuProps,
     getInputProps,
     highlightedIndex,
-    getItemProps,
+    getItemProps
   } = useCombobox({
     itemToString,
     items: inputItems,
@@ -236,8 +234,12 @@
         if (onChange) {
           onChange(getChangeEvt(changes.selectedItem), changes.type)
         }
+
+        if (onSelect) {
+          onSelect(changes.selectedItem ?? '')
+        }
       },
-      [onChange],
+      [onChange]
     ),
     onStateChange: useCallback(
       (changes: UseComboboxStateChange<AnItem>): void => {
@@ -254,6 +256,10 @@
               if (onChange) {
                 onChange(getChangeEvt(inputValue), type)
               }
+
+              if (onSelect && inputItems.includes(inputValue)) {
+                onSelect(inputValue)
+              }
             } else if (inputBoundByItems) {
               const nextItems = matchSorter(items, inputValue, matchSorterOptions)
 
@@ -264,6 +270,10 @@
                 if (onChange) {
                   onChange(getChangeEvt(inputValue), type)
                 }
+
+                if (onSelect && inputItems.includes(inputValue)) {
+                  onSelect(inputValue)
+                }
               }
             }
 
@@ -278,15 +288,8 @@
           }
         }
       },
-      [
-        loadItems,
-        inputBoundByItems,
-        items,
-        inputText,
-        handleOnInputValueChange,
-        onChange,
-      ],
-    ),
+      [loadItems, inputBoundByItems, items, inputText, handleOnInputValueChange, onChange]
+    )
   })
 
   useEffect(() => {
@@ -306,7 +309,7 @@
               if (!isOpen) {
                 openMenu()
               }
-            },
+            }
           })}
           id={id}
           color={color}
@@ -346,4 +349,4 @@
 }
 
 export { AutoSuggest }
-export type { AutoSuggestProps }
+export type { AutoSuggestProps, AnItem }

packages/components/src/autoSuggest/story.tsx

@@ -3,8 +3,9 @@ import styled from 'styled-components'
 
 import { AutoSuggest } from './mod.js'
 
+import type { AnItem } from './mod.js'
 import type { StoryFn } from '@storybook/react'
-import type { ChangeEvent, FC } from 'react'
+import type { FC } from 'react'
 
 type Story = StoryFn<typeof AutoSuggest>
 
@@ -22,51 +23,75 @@ const Dl = styled.dl`
     margin: 0;
   }
 `
-const Selection: FC<{ selection: string }> = ({ selection }) => {
+const Selection: FC<{ selection: AnItem }> = ({ selection }) => {
   return (
     <Dl>
       <dt>Selected</dt>
-      <dd>{selection || 'None'}</dd>
+      <dd>{typeof selection === 'string' ? selection : selection.value}</dd>
     </Dl>
   )
 }
 const useSelection = () => {
-  const [selected, setSelected] = useState('')
-  const onChange = useCallback((evt: ChangeEvent<HTMLInputElement>) => {
-    setSelected(evt.target.value)
+  const [selected, setSelected] = useState<AnItem>('')
+  const onSelect = useCallback((selection: AnItem) => {
+    setSelected(selection)
   }, [])
 
-  return { selected, onChange }
+  return { selected, onSelect }
 }
 const Primary: Story = args => {
-  const { selected, onChange } = useSelection()
+  const { selected, onSelect } = useSelection()
 
   return (
     <>
       <Selection selection={selected} />
-      <AutoSuggest {...args} onChange={onChange} />
+      <AutoSuggest {...args} onSelect={onSelect} />
+    </>
+  )
+}
+const ItemsAsObject: Story = args => {
+  const { selected, onSelect } = useSelection()
+  const items = [
+    {
+      label: 'One',
+      value: '1'
+    },
+    {
+      label: 'Two',
+      value: '2'
+    },
+    {
+      label: 'Three',
+      value: '3'
+    }
+  ]
+
+  return (
+    <>
+      <Selection selection={selected} />
+      <AutoSuggest {...args} items={items} onSelect={onSelect} inputBoundByItems />
     </>
   )
 }
 const InputBoundByItems: Story = args => {
-  const { selected, onChange } = useSelection()
+  const { selected, onSelect } = useSelection()
 
   return (
     <>
       <Selection selection={selected} />
       <AutoSuggest
         {...args}
         items={['one', 'two', 'three', 'thrice', 'thence', 'throw']}
-        onChange={onChange}
+        onSelect={onSelect}
         inputBoundByItems
       />
     </>
   )
 }
 InputBoundByItems.argTypes = {
   inputBoundByItems: {
-    control: false,
-  },
+    control: false
+  }
 }
 export default {
   title: 'AutoSuggest',
@@ -77,37 +102,37 @@ export default {
     inputBoundByItems: false,
     isDisabled: false,
     color: '#000000',
-    placeholder: 'type to search...',
+    placeholder: 'type to search...'
   },
   argTypes: {
     items: {
-      control: false,
+      control: false
     },
     value: {
-      control: false,
+      control: false
     },
     placeholder: {
-      control: 'text',
+      control: 'text'
     },
     onChange: {
-      action: 'onChange',
+      action: 'onChange'
     },
     isDisabled: {
-      control: 'boolean',
+      control: 'boolean'
     },
     color: {
-      control: 'color',
+      control: 'color'
     },
     size: {
       control: 'select',
-      options: ['small', 'medium', 'large'],
+      options: ['small', 'medium', 'large']
     },
     preload: {
-      control: false,
+      control: false
     },
     loadItems: {
-      control: false,
-    },
-  },
+      control: false
+    }
+  }
 }
-export { Primary, InputBoundByItems }
+export { Primary, InputBoundByItems, ItemsAsObject }