@salt-ds/lab 1.0.0-alpha.0 → 1.0.0-alpha.2

package/dist-es/packages/lab/src/color-chooser/ColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","sources":["../src/color-chooser/ColorPicker.tsx"],"sourcesContent":["import { ChangeEvent } from \"react\";\nimport { SketchPicker, ColorResult } from \"react-color\";\nimport cn from \"classnames\";\nimport { Button, makePrefixer } from \"@salt-ds/core\";\nimport { Color, RGBAValue } from \"./Color\";\nimport { hexValueWithoutAlpha } from \"./ColorHelpers\";\nimport { HexInput } from \"./HexInput\";\nimport { RGBAInput } from \"./RGBAInput\";\n\nimport \"./ColorPicker.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooserPicker\");\n\nexport interface ColorPickerProps {\n  disableAlphaChooser: boolean;\n  color?: Color;\n  alpha?: number;\n  onChange: (\n    color: Color | undefined,\n    finalSelection: boolean,\n    e?: ChangeEvent\n  ) => void;\n  onDialogClosed: () => void;\n}\n\nexport const ColorPicker = ({\n  alpha = 1,\n  disableAlphaChooser,\n  color,\n  onChange,\n  onDialogClosed,\n}: ColorPickerProps): JSX.Element => {\n  const rgbaValue: RGBAValue =\n    color?.rgba ?? Color.makeColorFromRGB(0, 0, 0, alpha).rgba;\n  const rgbaText = disableAlphaChooser ? \"RGB\" : \"RGBA\";\n\n  const onSubmitHex = (hexValue?: string, e?: ChangeEvent): void => {\n    const newColor = Color.makeColorFromHex(hexValue);\n    onChange(newColor, false, e);\n  };\n\n  const onSubmitRgb = (rgba: RGBAValue, e?: ChangeEvent): void => {\n    const newColor = Color.makeColorFromRGB(rgba.r, rgba.g, rgba.b, rgba.a);\n    onChange(newColor, false, e);\n  };\n\n  const onSubmitAlpha = (alpha: number, e?: ChangeEvent): void => {\n    const newColor = Color.makeColorFromRGB(\n      rgbaValue.r,\n      rgbaValue.g,\n      rgbaValue.b,\n      Math.max(0, Math.min(alpha, 1))\n    );\n    onChange(newColor, false, e);\n  };\n\n  const onSketchPickerChange = (\n    colorResult: ColorResult,\n    e: ChangeEvent\n  ): void => {\n    const newColor = Color.makeColorFromRGB(\n      colorResult.rgb.r,\n      colorResult.rgb.g,\n      colorResult.rgb.b,\n      colorResult.rgb.a ?? alpha\n    );\n    onChange(newColor, false, e);\n  };\n\n  const onApply = (): void => {\n    onChange(color, true);\n    onDialogClosed();\n  };\n\n  return (\n    <div data-testid=\"color-picker\" className={cn(withBaseName())}>\n      {/** @ts-ignore react-color has incorrect types **/}\n      <SketchPicker\n        className={cn(withBaseName(\"swatchPickerStyles\"), {\n          [\"rootDisabledAlpha\"]: disableAlphaChooser,\n          [\"root\"]: !disableAlphaChooser,\n        })}\n        color={rgbaValue}\n        onChange={onSketchPickerChange}\n        presetColors={[]}\n        disableAlpha={disableAlphaChooser}\n      />\n      <div className={cn(withBaseName(\"inputContainer\"))}>\n        <div className={cn(withBaseName(\"inputDivs\"))}>\n          <span className={cn(withBaseName(\"textDivOverrides\"))}>HEX</span>\n          <HexInput\n            hexValue={\n              disableAlphaChooser\n                ? hexValueWithoutAlpha(color?.hex)\n                : color?.hex\n            }\n            disableAlphaChooser={disableAlphaChooser}\n            onSubmit={onSubmitHex}\n          />\n          <RGBAInput\n            disableAlphaChooser={disableAlphaChooser}\n            rgbaText={rgbaText}\n            rgbaValue={rgbaValue}\n            onSubmitAlpha={onSubmitAlpha}\n            onSubmitRgb={onSubmitRgb}\n          />\n        </div>\n        <div className={cn(withBaseName(\"applyButtonDiv\"))}>\n          <Button data-testid=\"apply-button\" variant=\"cta\" onClick={onApply}>\n            Apply\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["alpha","_a","cn"],"mappings":"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"}
+{"version":3,"file":"ColorPicker.js","sources":["../src/color-chooser/ColorPicker.tsx"],"sourcesContent":["import { ChangeEvent } from \"react\";\nimport { SketchPicker, ColorResult } from \"react-color\";\nimport { clsx } from \"clsx\";\nimport { Button, makePrefixer } from \"@salt-ds/core\";\nimport { Color, RGBAValue } from \"./Color\";\nimport { hexValueWithoutAlpha } from \"./ColorHelpers\";\nimport { HexInput } from \"./HexInput\";\nimport { RGBAInput } from \"./RGBAInput\";\n\nimport \"./ColorPicker.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooserPicker\");\n\nexport interface ColorPickerProps {\n  disableAlphaChooser: boolean;\n  color?: Color;\n  alpha?: number;\n  onChange: (\n    color: Color | undefined,\n    finalSelection: boolean,\n    e?: ChangeEvent\n  ) => void;\n  onDialogClosed: () => void;\n}\n\nexport const ColorPicker = ({\n  alpha = 1,\n  disableAlphaChooser,\n  color,\n  onChange,\n  onDialogClosed,\n}: ColorPickerProps): JSX.Element => {\n  const rgbaValue: RGBAValue =\n    color?.rgba ?? Color.makeColorFromRGB(0, 0, 0, alpha).rgba;\n  const rgbaText = disableAlphaChooser ? \"RGB\" : \"RGBA\";\n\n  const onSubmitHex = (hexValue?: string, e?: ChangeEvent): void => {\n    const newColor = Color.makeColorFromHex(hexValue);\n    onChange(newColor, false, e);\n  };\n\n  const onSubmitRgb = (rgba: RGBAValue, e?: ChangeEvent): void => {\n    const newColor = Color.makeColorFromRGB(rgba.r, rgba.g, rgba.b, rgba.a);\n    onChange(newColor, false, e);\n  };\n\n  const onSubmitAlpha = (alpha: number, e?: ChangeEvent): void => {\n    const newColor = Color.makeColorFromRGB(\n      rgbaValue.r,\n      rgbaValue.g,\n      rgbaValue.b,\n      Math.max(0, Math.min(alpha, 1))\n    );\n    onChange(newColor, false, e);\n  };\n\n  const onSketchPickerChange = (\n    colorResult: ColorResult,\n    e: ChangeEvent\n  ): void => {\n    const newColor = Color.makeColorFromRGB(\n      colorResult.rgb.r,\n      colorResult.rgb.g,\n      colorResult.rgb.b,\n      colorResult.rgb.a ?? alpha\n    );\n    onChange(newColor, false, e);\n  };\n\n  const onApply = (): void => {\n    onChange(color, true);\n    onDialogClosed();\n  };\n\n  return (\n    <div data-testid=\"color-picker\" className={clsx(withBaseName())}>\n      {/** @ts-ignore react-color has incorrect types **/}\n      <SketchPicker\n        className={clsx(withBaseName(\"swatchPickerStyles\"), {\n          [\"rootDisabledAlpha\"]: disableAlphaChooser,\n          [\"root\"]: !disableAlphaChooser,\n        })}\n        color={rgbaValue}\n        onChange={onSketchPickerChange}\n        presetColors={[]}\n        disableAlpha={disableAlphaChooser}\n      />\n      <div className={clsx(withBaseName(\"inputContainer\"))}>\n        <div className={clsx(withBaseName(\"inputDivs\"))}>\n          <span className={clsx(withBaseName(\"textDivOverrides\"))}>HEX</span>\n          <HexInput\n            hexValue={\n              disableAlphaChooser\n                ? hexValueWithoutAlpha(color?.hex)\n                : color?.hex\n            }\n            disableAlphaChooser={disableAlphaChooser}\n            onSubmit={onSubmitHex}\n          />\n          <RGBAInput\n            disableAlphaChooser={disableAlphaChooser}\n            rgbaText={rgbaText}\n            rgbaValue={rgbaValue}\n            onSubmitAlpha={onSubmitAlpha}\n            onSubmitRgb={onSubmitRgb}\n          />\n        </div>\n        <div className={clsx(withBaseName(\"applyButtonDiv\"))}>\n          <Button data-testid=\"apply-button\" variant=\"cta\" onClick={onApply}>\n            Apply\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["alpha","_a"],"mappings":"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"}

package/dist-es/packages/lab/src/color-chooser/DictTabs.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { makePrefixer } from '@salt-ds/core';
 import '../tabs/TabActivationIndicator.js';
 import { Tabstrip } from '../tabs/Tabstrip.js';
@@ -20,11 +20,11 @@ const DictTabs = ({
       /* @__PURE__ */ jsx(Tabstrip, {
         ...props,
         "data-testid": "color-chooser-tabstrip",
-        className: cx(withBaseName("wrapper")),
+        className: clsx(withBaseName("wrapper")),
         activeTabIndex: activeTab,
         onActiveChange: (tabIndex) => onTabClick(tabIndex),
         children: [...Object.keys(tabs)].map((label, i) => /* @__PURE__ */ jsx(Tab, {
-          className: cx(withBaseName("text")),
+          className: clsx(withBaseName("text")),
           label
         }, i))
       }),

package/dist-es/packages/lab/src/color-chooser/DictTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"DictTabs.js","sources":["../src/color-chooser/DictTabs.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { Tabstrip, TabstripProps, Tab } from \"../tabs\";\nimport { ColorPicker, ColorPickerProps } from \"./ColorPicker\";\nimport { Swatches, SwatchesTabProps } from \"./Swatches\";\n\nconst withBaseName = makePrefixer(\"saltColorChooserDictTabs\");\n\nexport type ColorChooserTabs = {\n  Swatches?: {\n    Component: typeof Swatches;\n    props: SwatchesTabProps;\n  };\n  \"Color Picker\"?: {\n    Component: typeof ColorPicker;\n    props: ColorPickerProps;\n  };\n};\n\nexport interface DictTabsProps\n  extends Omit<TabstripProps, \"tabs\" | \"renderContent\" | \"classes\"> {\n  hexValue: string | undefined;\n  tabs: ColorChooserTabs;\n  onTabClick: (index: number) => void;\n  activeTab: number;\n}\n\nexport const DictTabs = ({\n  tabs,\n  hexValue,\n  onTabClick,\n  activeTab,\n  ...props\n}: DictTabsProps): JSX.Element => {\n  return (\n    <div>\n      <Tabstrip\n        {...props}\n        data-testid=\"color-chooser-tabstrip\"\n        className={cn(withBaseName(\"wrapper\"))}\n        activeTabIndex={activeTab}\n        onActiveChange={(tabIndex: number) => onTabClick(tabIndex)}\n      >\n        {[...Object.keys(tabs)].map((label, i) => (\n          <Tab className={cn(withBaseName(\"text\"))} label={label} key={i} />\n        ))}\n      </Tabstrip>\n      {[...Object.values(tabs)].map((tab, idx) => {\n        if (!tab) {\n          return null;\n        }\n        const TabComponent: typeof Swatches | typeof ColorPicker =\n          tab?.Component;\n\n        return (\n          <div\n            aria-hidden={activeTab !== idx}\n            hidden={activeTab !== idx}\n            key={idx}\n          >\n            {tab?.props ? (\n              // @ts-ignore\n              <TabComponent {...tab?.props} />\n            ) : null}\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"names":["cn"],"mappings":";;;;;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,0BAA0B,CAAA,CAAA;AAqBrD,MAAM,WAAW,CAAC;AAAA,EACvB,IAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,SAAA;AAAA,EACG,GAAA,KAAA;AACL,CAAkC,KAAA;AAChC,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACC,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,QAAA,EAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,aAAY,EAAA,wBAAA;AAAA,QACZ,SAAW,EAAAA,EAAA,CAAG,YAAa,CAAA,SAAS,CAAC,CAAA;AAAA,QACrC,cAAgB,EAAA,SAAA;AAAA,QAChB,cAAgB,EAAA,CAAC,QAAqB,KAAA,UAAA,CAAW,QAAQ,CAAA;AAAA,QAExD,QAAA,EAAA,CAAC,GAAG,MAAA,CAAO,IAAK,CAAA,IAAI,CAAC,CAAA,CAAE,GAAI,CAAA,CAAC,KAAO,EAAA,CAAA,qBACjC,GAAA,CAAA,GAAA,EAAA;AAAA,UAAI,SAAW,EAAAA,EAAA,CAAG,YAAa,CAAA,MAAM,CAAC,CAAA;AAAA,UAAG,KAAA;AAAA,SAAA,EAAmB,CAAG,CACjE,CAAA;AAAA,OACH,CAAA;AAAA,MACC,CAAC,GAAG,MAAA,CAAO,MAAO,CAAA,IAAI,CAAC,CAAE,CAAA,GAAA,CAAI,CAAC,GAAA,EAAK,GAAQ,KAAA;AAC1C,QAAA,IAAI,CAAC,GAAK,EAAA;AACR,UAAO,OAAA,IAAA,CAAA;AAAA,SACT;AACA,QAAA,MAAM,eACJ,GAAK,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,GAAA,CAAA,SAAA,CAAA;AAEP,QAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,UACC,eAAa,SAAc,KAAA,GAAA;AAAA,UAC3B,QAAQ,SAAc,KAAA,GAAA;AAAA,UAGrB,QAAA,EAAA,CAAA,GAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,GAAA,CAAK,yBAEH,GAAA,CAAA,YAAA,EAAA;AAAA,YAAc,GAAG,GAAK,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,GAAA,CAAA,KAAA;AAAA,WAAO,CAC5B,GAAA,IAAA;AAAA,SAAA,EALC,GAMP,CAAA,CAAA;AAAA,OAEH,CAAA;AAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"DictTabs.js","sources":["../src/color-chooser/DictTabs.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { Tabstrip, TabstripProps, Tab } from \"../tabs\";\nimport { ColorPicker, ColorPickerProps } from \"./ColorPicker\";\nimport { Swatches, SwatchesTabProps } from \"./Swatches\";\n\nconst withBaseName = makePrefixer(\"saltColorChooserDictTabs\");\n\nexport type ColorChooserTabs = {\n  Swatches?: {\n    Component: typeof Swatches;\n    props: SwatchesTabProps;\n  };\n  \"Color Picker\"?: {\n    Component: typeof ColorPicker;\n    props: ColorPickerProps;\n  };\n};\n\nexport interface DictTabsProps\n  extends Omit<TabstripProps, \"tabs\" | \"renderContent\" | \"classes\"> {\n  hexValue: string | undefined;\n  tabs: ColorChooserTabs;\n  onTabClick: (index: number) => void;\n  activeTab: number;\n}\n\nexport const DictTabs = ({\n  tabs,\n  hexValue,\n  onTabClick,\n  activeTab,\n  ...props\n}: DictTabsProps): JSX.Element => {\n  return (\n    <div>\n      <Tabstrip\n        {...props}\n        data-testid=\"color-chooser-tabstrip\"\n        className={clsx(withBaseName(\"wrapper\"))}\n        activeTabIndex={activeTab}\n        onActiveChange={(tabIndex: number) => onTabClick(tabIndex)}\n      >\n        {[...Object.keys(tabs)].map((label, i) => (\n          <Tab className={clsx(withBaseName(\"text\"))} label={label} key={i} />\n        ))}\n      </Tabstrip>\n      {[...Object.values(tabs)].map((tab, idx) => {\n        if (!tab) {\n          return null;\n        }\n        const TabComponent: typeof Swatches | typeof ColorPicker =\n          tab?.Component;\n\n        return (\n          <div\n            aria-hidden={activeTab !== idx}\n            hidden={activeTab !== idx}\n            key={idx}\n          >\n            {tab?.props ? (\n              // @ts-ignore\n              <TabComponent {...tab?.props} />\n            ) : null}\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,0BAA0B,CAAA,CAAA;AAqBrD,MAAM,WAAW,CAAC;AAAA,EACvB,IAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,SAAA;AAAA,EACG,GAAA,KAAA;AACL,CAAkC,KAAA;AAChC,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACC,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,QAAA,EAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,aAAY,EAAA,wBAAA;AAAA,QACZ,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,SAAS,CAAC,CAAA;AAAA,QACvC,cAAgB,EAAA,SAAA;AAAA,QAChB,cAAgB,EAAA,CAAC,QAAqB,KAAA,UAAA,CAAW,QAAQ,CAAA;AAAA,QAExD,QAAA,EAAA,CAAC,GAAG,MAAA,CAAO,IAAK,CAAA,IAAI,CAAC,CAAA,CAAE,GAAI,CAAA,CAAC,KAAO,EAAA,CAAA,qBACjC,GAAA,CAAA,GAAA,EAAA;AAAA,UAAI,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,MAAM,CAAC,CAAA;AAAA,UAAG,KAAA;AAAA,SAAA,EAAmB,CAAG,CACnE,CAAA;AAAA,OACH,CAAA;AAAA,MACC,CAAC,GAAG,MAAA,CAAO,MAAO,CAAA,IAAI,CAAC,CAAE,CAAA,GAAA,CAAI,CAAC,GAAA,EAAK,GAAQ,KAAA;AAC1C,QAAA,IAAI,CAAC,GAAK,EAAA;AACR,UAAO,OAAA,IAAA,CAAA;AAAA,SACT;AACA,QAAA,MAAM,eACJ,GAAK,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,GAAA,CAAA,SAAA,CAAA;AAEP,QAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,UACC,eAAa,SAAc,KAAA,GAAA;AAAA,UAC3B,QAAQ,SAAc,KAAA,GAAA;AAAA,UAGrB,QAAA,EAAA,CAAA,GAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,GAAA,CAAK,yBAEH,GAAA,CAAA,YAAA,EAAA;AAAA,YAAc,GAAG,GAAK,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,GAAA,CAAA,KAAA;AAAA,WAAO,CAC5B,GAAA,IAAA;AAAA,SAAA,EALC,GAMP,CAAA,CAAA;AAAA,OAEH,CAAA;AAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/packages/lab/src/color-chooser/HexInput.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { useState, useEffect } from 'react';
 import { makePrefixer } from '@salt-ds/core';
 import { isValidHex } from './ColorHelpers.js';
@@ -37,15 +37,15 @@ const HexInput = ({
     isValidHex(hexInputValue) && onSubmit(hexInputValue, e);
   };
   return /* @__PURE__ */ jsxs("div", {
-    className: cx(withBaseName()),
+    className: clsx(withBaseName()),
     children: [
       /* @__PURE__ */ jsx("span", {
-        className: cx(withBaseName("hashSign")),
+        className: clsx(withBaseName("hashSign")),
         children: "#"
       }),
       /* @__PURE__ */ jsx(Input, {
         "data-testid": "hex-input",
-        className: cx(withBaseName("input")),
+        className: clsx(withBaseName("input")),
         value: (_a = hexInputValue == null ? void 0 : hexInputValue.toString().replace("#", "").toUpperCase()) != null ? _a : "",
         onChange: handleHexInputChange,
         onKeyDown: handleKeyDownHex,

package/dist-es/packages/lab/src/color-chooser/HexInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"HexInput.js","sources":["../src/color-chooser/HexInput.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { useState, useEffect } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { isValidHex } from \"./ColorHelpers\";\nimport { Input } from \"../input\";\n\nimport \"./HexInput.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooserHexInput\");\n\ninterface HexInputProps {\n  hexValue: string | undefined;\n  disableAlphaChooser: boolean;\n  onSubmit: (hex: string | undefined, e?: React.ChangeEvent) => void;\n}\n\nexport const HexInput = ({\n  hexValue,\n  disableAlphaChooser,\n  onSubmit,\n}: HexInputProps): JSX.Element => {\n  const [hexInputValue, setHexInputValue] = useState<string | undefined>(\n    hexValue\n  );\n\n  useEffect(() => {\n    setHexInputValue(hexValue);\n  }, [hexValue]);\n\n  const handleHexInputChange = (\n    event: React.ChangeEvent<HTMLInputElement>,\n    value: string\n  ): void => {\n    if (disableAlphaChooser && value.length < 7) {\n      setHexInputValue(\"#\" + value);\n    }\n    if (!disableAlphaChooser) {\n      setHexInputValue(\"#\" + value);\n    }\n  };\n\n  const handleKeyDownHex = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (e.key === \"Enter\") {\n      isValidHex(hexInputValue) && onSubmit(hexInputValue);\n    }\n  };\n\n  const handleOnBlurHex = (e: React.FocusEvent<HTMLInputElement>): void => {\n    isValidHex(hexInputValue) && onSubmit(hexInputValue, e);\n  };\n\n  return (\n    <div className={cn(withBaseName())}>\n      <span className={cn(withBaseName(\"hashSign\"))}>#</span>\n      <Input\n        data-testid=\"hex-input\"\n        className={cn(withBaseName(\"input\"))}\n        value={hexInputValue?.toString().replace(\"#\", \"\").toUpperCase() ?? \"\"}\n        onChange={handleHexInputChange}\n        onKeyDown={handleKeyDownHex}\n        onBlur={handleOnBlurHex}\n      />\n    </div>\n  );\n};\n"],"names":["cn"],"mappings":";;;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,0BAA0B,CAAA,CAAA;AAQrD,MAAM,WAAW,CAAC;AAAA,EACvB,QAAA;AAAA,EACA,mBAAA;AAAA,EACA,QAAA;AACF,CAAkC,KAAA;AApBlC,EAAA,IAAA,EAAA,CAAA;AAqBE,EAAM,MAAA,CAAC,aAAe,EAAA,gBAAgB,CAAI,GAAA,QAAA;AAAA,IACxC,QAAA;AAAA,GACF,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,gBAAA,CAAiB,QAAQ,CAAA,CAAA;AAAA,GAC3B,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AAEb,EAAM,MAAA,oBAAA,GAAuB,CAC3B,KAAA,EACA,KACS,KAAA;AACT,IAAI,IAAA,mBAAA,IAAuB,KAAM,CAAA,MAAA,GAAS,CAAG,EAAA;AAC3C,MAAA,gBAAA,CAAiB,MAAM,KAAK,CAAA,CAAA;AAAA,KAC9B;AACA,IAAA,IAAI,CAAC,mBAAqB,EAAA;AACxB,MAAA,gBAAA,CAAiB,MAAM,KAAK,CAAA,CAAA;AAAA,KAC9B;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,gBAAA,GAAmB,CAAC,CAAmD,KAAA;AAC3E,IAAI,IAAA,CAAA,CAAE,QAAQ,OAAS,EAAA;AACrB,MAAW,UAAA,CAAA,aAAa,CAAK,IAAA,QAAA,CAAS,aAAa,CAAA,CAAA;AAAA,KACrD;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,eAAA,GAAkB,CAAC,CAAgD,KAAA;AACvE,IAAA,UAAA,CAAW,aAAa,CAAA,IAAK,QAAS,CAAA,aAAA,EAAe,CAAC,CAAA,CAAA;AAAA,GACxD,CAAA;AAEA,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAA,EAAWA,EAAG,CAAA,YAAA,EAAc,CAAA;AAAA,IAC/B,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAW,EAAAA,EAAA,CAAG,YAAa,CAAA,UAAU,CAAC,CAAA;AAAA,QAAG,QAAA,EAAA,GAAA;AAAA,OAAC,CAAA;AAAA,sBAC/C,GAAA,CAAA,KAAA,EAAA;AAAA,QACC,aAAY,EAAA,WAAA;AAAA,QACZ,SAAW,EAAAA,EAAA,CAAG,YAAa,CAAA,OAAO,CAAC,CAAA;AAAA,QACnC,QAAO,EAAe,GAAA,aAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,aAAA,CAAA,QAAA,EAAA,CAAW,QAAQ,GAAK,EAAA,EAAA,CAAA,CAAI,kBAA3C,IAA4D,GAAA,EAAA,GAAA,EAAA;AAAA,QACnE,QAAU,EAAA,oBAAA;AAAA,QACV,SAAW,EAAA,gBAAA;AAAA,QACX,MAAQ,EAAA,eAAA;AAAA,OACV,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"HexInput.js","sources":["../src/color-chooser/HexInput.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useState, useEffect } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { isValidHex } from \"./ColorHelpers\";\nimport { Input } from \"../input\";\n\nimport \"./HexInput.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooserHexInput\");\n\ninterface HexInputProps {\n  hexValue: string | undefined;\n  disableAlphaChooser: boolean;\n  onSubmit: (hex: string | undefined, e?: React.ChangeEvent) => void;\n}\n\nexport const HexInput = ({\n  hexValue,\n  disableAlphaChooser,\n  onSubmit,\n}: HexInputProps): JSX.Element => {\n  const [hexInputValue, setHexInputValue] = useState<string | undefined>(\n    hexValue\n  );\n\n  useEffect(() => {\n    setHexInputValue(hexValue);\n  }, [hexValue]);\n\n  const handleHexInputChange = (\n    event: React.ChangeEvent<HTMLInputElement>,\n    value: string\n  ): void => {\n    if (disableAlphaChooser && value.length < 7) {\n      setHexInputValue(\"#\" + value);\n    }\n    if (!disableAlphaChooser) {\n      setHexInputValue(\"#\" + value);\n    }\n  };\n\n  const handleKeyDownHex = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (e.key === \"Enter\") {\n      isValidHex(hexInputValue) && onSubmit(hexInputValue);\n    }\n  };\n\n  const handleOnBlurHex = (e: React.FocusEvent<HTMLInputElement>): void => {\n    isValidHex(hexInputValue) && onSubmit(hexInputValue, e);\n  };\n\n  return (\n    <div className={clsx(withBaseName())}>\n      <span className={clsx(withBaseName(\"hashSign\"))}>#</span>\n      <Input\n        data-testid=\"hex-input\"\n        className={clsx(withBaseName(\"input\"))}\n        value={hexInputValue?.toString().replace(\"#\", \"\").toUpperCase() ?? \"\"}\n        onChange={handleHexInputChange}\n        onKeyDown={handleKeyDownHex}\n        onBlur={handleOnBlurHex}\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,0BAA0B,CAAA,CAAA;AAQrD,MAAM,WAAW,CAAC;AAAA,EACvB,QAAA;AAAA,EACA,mBAAA;AAAA,EACA,QAAA;AACF,CAAkC,KAAA;AApBlC,EAAA,IAAA,EAAA,CAAA;AAqBE,EAAM,MAAA,CAAC,aAAe,EAAA,gBAAgB,CAAI,GAAA,QAAA;AAAA,IACxC,QAAA;AAAA,GACF,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,gBAAA,CAAiB,QAAQ,CAAA,CAAA;AAAA,GAC3B,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AAEb,EAAM,MAAA,oBAAA,GAAuB,CAC3B,KAAA,EACA,KACS,KAAA;AACT,IAAI,IAAA,mBAAA,IAAuB,KAAM,CAAA,MAAA,GAAS,CAAG,EAAA;AAC3C,MAAA,gBAAA,CAAiB,MAAM,KAAK,CAAA,CAAA;AAAA,KAC9B;AACA,IAAA,IAAI,CAAC,mBAAqB,EAAA;AACxB,MAAA,gBAAA,CAAiB,MAAM,KAAK,CAAA,CAAA;AAAA,KAC9B;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,gBAAA,GAAmB,CAAC,CAAmD,KAAA;AAC3E,IAAI,IAAA,CAAA,CAAE,QAAQ,OAAS,EAAA;AACrB,MAAW,UAAA,CAAA,aAAa,CAAK,IAAA,QAAA,CAAS,aAAa,CAAA,CAAA;AAAA,KACrD;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,eAAA,GAAkB,CAAC,CAAgD,KAAA;AACvE,IAAA,UAAA,CAAW,aAAa,CAAA,IAAK,QAAS,CAAA,aAAA,EAAe,CAAC,CAAA,CAAA;AAAA,GACxD,CAAA;AAEA,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAA,EAAW,IAAK,CAAA,YAAA,EAAc,CAAA;AAAA,IACjC,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,UAAU,CAAC,CAAA;AAAA,QAAG,QAAA,EAAA,GAAA;AAAA,OAAC,CAAA;AAAA,sBACjD,GAAA,CAAA,KAAA,EAAA;AAAA,QACC,aAAY,EAAA,WAAA;AAAA,QACZ,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,OAAO,CAAC,CAAA;AAAA,QACrC,QAAO,EAAe,GAAA,aAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,aAAA,CAAA,QAAA,EAAA,CAAW,QAAQ,GAAK,EAAA,EAAA,CAAA,CAAI,kBAA3C,IAA4D,GAAA,EAAA,GAAA,EAAA;AAAA,QACnE,QAAU,EAAA,oBAAA;AAAA,QACV,SAAW,EAAA,gBAAA;AAAA,QACX,MAAQ,EAAA,eAAA;AAAA,OACV,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/packages/lab/src/color-chooser/RGBAInput.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { makePrefixer } from '@salt-ds/core';
 import { AlphaInput } from './AlphaInputField.js';
 import { RGBInput } from './RGBAInputField.js';
@@ -16,7 +16,7 @@ const RGBAInput = ({
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [
       /* @__PURE__ */ jsx("span", {
-        className: cx(withBaseName("textDivOverrides")),
+        className: clsx(withBaseName("textDivOverrides")),
         children: rgbaText
       }),
       ["r", "g", "b"].map((value) => /* @__PURE__ */ jsxs("div", {
@@ -34,10 +34,10 @@ const RGBAInput = ({
         ]
       })),
       !disableAlphaChooser ? /* @__PURE__ */ jsxs("div", {
-        className: cx(withBaseName("rgbaInputDiv")),
+        className: clsx(withBaseName("rgbaInputDiv")),
         children: [
           /* @__PURE__ */ jsx("span", {
-            className: cx(withBaseName("rgbaText")),
+            className: clsx(withBaseName("rgbaText")),
             children: "A"
           }),
           /* @__PURE__ */ jsx(AlphaInput, {
@@ -46,7 +46,7 @@ const RGBAInput = ({
           })
         ]
       }) : /* @__PURE__ */ jsx("div", {
-        className: cx(withBaseName("alphaSpacerDiv"))
+        className: clsx(withBaseName("alphaSpacerDiv"))
       })
     ]
   });

package/dist-es/packages/lab/src/color-chooser/RGBAInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"RGBAInput.js","sources":["../src/color-chooser/RGBAInput.tsx"],"sourcesContent":["import { ChangeEvent } from \"react\";\nimport cn from \"classnames\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { AlphaInput } from \"./AlphaInputField\";\nimport { RGBAValue } from \"./Color\";\nimport { RGBInput } from \"./RGBAInputField\";\n\nimport \"./RGBAInput.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooser\");\n\ninterface RGBAInputProps {\n  disableAlphaChooser: boolean;\n  rgbaText: string;\n  rgbaValue: RGBAValue;\n  onSubmitRgb: (\n    rgbaValue: RGBAValue,\n    e?: ChangeEvent<Element> | undefined\n  ) => void;\n  onSubmitAlpha: (alpha: number, e?: ChangeEvent<Element> | undefined) => void;\n}\n\nexport const RGBAInput = ({\n  disableAlphaChooser,\n  rgbaText,\n  rgbaValue,\n  onSubmitAlpha,\n  onSubmitRgb,\n}: RGBAInputProps): JSX.Element => {\n  return (\n    <>\n      <span className={cn(withBaseName(\"textDivOverrides\"))}>{rgbaText}</span>\n      {[\"r\", \"g\", \"b\"].map((value) => (\n        <div className={withBaseName(\"rgbaInputDiv\")}>\n          <span className={withBaseName(\"rgbaText\")}>\n            {value.toUpperCase()}\n          </span>\n          <RGBInput\n            rgbaValue={rgbaValue}\n            value={value as \"r\" | \"g\" | \"b\"}\n            onSubmit={onSubmitRgb}\n          />\n        </div>\n      ))}\n      {!disableAlphaChooser ? (\n        <div className={cn(withBaseName(\"rgbaInputDiv\"))}>\n          <span className={cn(withBaseName(\"rgbaText\"))}>A</span>\n          <AlphaInput\n            alphaValue={parseFloat(rgbaValue.a.toFixed(2))}\n            onSubmit={onSubmitAlpha}\n          />\n        </div>\n      ) : (\n        <div className={cn(withBaseName(\"alphaSpacerDiv\"))}></div>\n      )}\n    </>\n  );\n};\n"],"names":["cn"],"mappings":";;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAa7C,MAAM,YAAY,CAAC;AAAA,EACxB,mBAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA;AAAA,EACA,WAAA;AACF,CAAmC,KAAA;AACjC,EACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,IACE,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAW,EAAAA,EAAA,CAAG,YAAa,CAAA,kBAAkB,CAAC,CAAA;AAAA,QAAI,QAAA,EAAA,QAAA;AAAA,OAAS,CAAA;AAAA,MAChE,CAAC,KAAK,GAAK,EAAA,GAAG,EAAE,GAAI,CAAA,CAAC,0BACnB,IAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,QACzC,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,YAAK,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,YACrC,gBAAM,WAAY,EAAA;AAAA,WACrB,CAAA;AAAA,0BACC,GAAA,CAAA,QAAA,EAAA;AAAA,YACC,SAAA;AAAA,YACA,KAAA;AAAA,YACA,QAAU,EAAA,WAAA;AAAA,WACZ,CAAA;AAAA,SAAA;AAAA,OACF,CACD,CAAA;AAAA,MACA,CAAC,sCACC,IAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAW,EAAAA,EAAA,CAAG,YAAa,CAAA,cAAc,CAAC,CAAA;AAAA,QAC7C,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,YAAK,SAAW,EAAAA,EAAA,CAAG,YAAa,CAAA,UAAU,CAAC,CAAA;AAAA,YAAG,QAAA,EAAA,GAAA;AAAA,WAAC,CAAA;AAAA,0BAC/C,GAAA,CAAA,UAAA,EAAA;AAAA,YACC,YAAY,UAAW,CAAA,SAAA,CAAU,CAAE,CAAA,OAAA,CAAQ,CAAC,CAAC,CAAA;AAAA,YAC7C,QAAU,EAAA,aAAA;AAAA,WACZ,CAAA;AAAA,SAAA;AAAA,OACF,oBAEC,GAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAW,EAAAA,EAAA,CAAG,YAAa,CAAA,gBAAgB,CAAC,CAAA;AAAA,OAAG,CAAA;AAAA,KAAA;AAAA,GAExD,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"RGBAInput.js","sources":["../src/color-chooser/RGBAInput.tsx"],"sourcesContent":["import { ChangeEvent } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { AlphaInput } from \"./AlphaInputField\";\nimport { RGBAValue } from \"./Color\";\nimport { RGBInput } from \"./RGBAInputField\";\n\nimport \"./RGBAInput.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooser\");\n\ninterface RGBAInputProps {\n  disableAlphaChooser: boolean;\n  rgbaText: string;\n  rgbaValue: RGBAValue;\n  onSubmitRgb: (\n    rgbaValue: RGBAValue,\n    e?: ChangeEvent<Element> | undefined\n  ) => void;\n  onSubmitAlpha: (alpha: number, e?: ChangeEvent<Element> | undefined) => void;\n}\n\nexport const RGBAInput = ({\n  disableAlphaChooser,\n  rgbaText,\n  rgbaValue,\n  onSubmitAlpha,\n  onSubmitRgb,\n}: RGBAInputProps): JSX.Element => {\n  return (\n    <>\n      <span className={clsx(withBaseName(\"textDivOverrides\"))}>{rgbaText}</span>\n      {[\"r\", \"g\", \"b\"].map((value) => (\n        <div className={withBaseName(\"rgbaInputDiv\")}>\n          <span className={withBaseName(\"rgbaText\")}>\n            {value.toUpperCase()}\n          </span>\n          <RGBInput\n            rgbaValue={rgbaValue}\n            value={value as \"r\" | \"g\" | \"b\"}\n            onSubmit={onSubmitRgb}\n          />\n        </div>\n      ))}\n      {!disableAlphaChooser ? (\n        <div className={clsx(withBaseName(\"rgbaInputDiv\"))}>\n          <span className={clsx(withBaseName(\"rgbaText\"))}>A</span>\n          <AlphaInput\n            alphaValue={parseFloat(rgbaValue.a.toFixed(2))}\n            onSubmit={onSubmitAlpha}\n          />\n        </div>\n      ) : (\n        <div className={clsx(withBaseName(\"alphaSpacerDiv\"))}></div>\n      )}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAa7C,MAAM,YAAY,CAAC;AAAA,EACxB,mBAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA;AAAA,EACA,WAAA;AACF,CAAmC,KAAA;AACjC,EACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,IACE,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,kBAAkB,CAAC,CAAA;AAAA,QAAI,QAAA,EAAA,QAAA;AAAA,OAAS,CAAA;AAAA,MAClE,CAAC,KAAK,GAAK,EAAA,GAAG,EAAE,GAAI,CAAA,CAAC,0BACnB,IAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,QACzC,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,YAAK,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,YACrC,gBAAM,WAAY,EAAA;AAAA,WACrB,CAAA;AAAA,0BACC,GAAA,CAAA,QAAA,EAAA;AAAA,YACC,SAAA;AAAA,YACA,KAAA;AAAA,YACA,QAAU,EAAA,WAAA;AAAA,WACZ,CAAA;AAAA,SAAA;AAAA,OACF,CACD,CAAA;AAAA,MACA,CAAC,sCACC,IAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,cAAc,CAAC,CAAA;AAAA,QAC/C,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,YAAK,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,UAAU,CAAC,CAAA;AAAA,YAAG,QAAA,EAAA,GAAA;AAAA,WAAC,CAAA;AAAA,0BACjD,GAAA,CAAA,UAAA,EAAA;AAAA,YACC,YAAY,UAAW,CAAA,SAAA,CAAU,CAAE,CAAA,OAAA,CAAQ,CAAC,CAAC,CAAA;AAAA,YAC7C,QAAU,EAAA,aAAA;AAAA,WACZ,CAAA;AAAA,SAAA;AAAA,OACF,oBAEC,GAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,gBAAgB,CAAC,CAAA;AAAA,OAAG,CAAA;AAAA,KAAA;AAAA,GAE1D,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/packages/lab/src/color-chooser/Swatch.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { makePrefixer } from '@salt-ds/core';
 import { Color } from './Color.js';
 import { isTransparent } from './color-utils.js';
@@ -38,7 +38,7 @@ const Swatch = ({
     style: {
       background: getBackgroundColor()
     },
-    className: cx({
+    className: clsx({
       [withBaseName("active")]: active,
       [withBaseName("transparent")]: transparent,
       [withBaseName("graySwatch")]: isBlackOrgray(color),

package/dist-es/packages/lab/src/color-chooser/Swatch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Swatch.js","sources":["../src/color-chooser/Swatch.tsx"],"sourcesContent":["import { ChangeEvent, KeyboardEvent } from \"react\";\nimport cn from \"classnames\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { Color } from \"./Color\";\nimport { isTransparent } from \"./color-utils\";\n\nconst withBaseName = makePrefixer(\"saltColorChooserSwatch\");\n\ninterface SwatchProps {\n  active: boolean;\n  alpha: number;\n  color: string;\n  onClick: (\n    color: Color | undefined,\n    finalSelection: boolean,\n    e?: ChangeEvent\n  ) => void;\n  onDialogClosed: () => void;\n  transparent?: boolean;\n}\n\nexport const Swatch = ({\n  color,\n  onClick,\n  active,\n  alpha,\n  onDialogClosed,\n  transparent = false,\n}: SwatchProps): JSX.Element => {\n  const handleClick = () => {\n    const newColor = Color.makeColorFromHex(color);\n    isTransparent(color) ? newColor?.setAlpha(0) : newColor?.setAlpha(alpha);\n\n    onClick(newColor, true);\n    onDialogClosed();\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>): void => {\n    const newColor = Color.makeColorFromHex(color)?.setAlpha(alpha);\n    e.key === \"ENTER\" && onClick(newColor, true);\n    onDialogClosed();\n  };\n\n  // If it's black/gray/white\n  const isBlackOrgray = (color: string): boolean => {\n    return (\n      color.toLowerCase() === \"black\" ||\n      color.toUpperCase().startsWith(\"#2F3136\") ||\n      color.toUpperCase().startsWith(\"#2A2C2F\") ||\n      color.toUpperCase().startsWith(\"#242526\") ||\n      color.toUpperCase().startsWith(\"#161616\")\n    );\n  };\n  const isWhite = (color: string): boolean => color === \"white\";\n\n  const getBackgroundColor = () => {\n    const backgroundColor = Color.makeColorFromHex(color);\n    return backgroundColor?.setAlpha(alpha).hex;\n  };\n\n  return (\n    <div\n      data-testid={`swatch-${color}`}\n      style={{\n        background: getBackgroundColor(),\n      }}\n      className={cn({\n        [withBaseName(\"active\")]: active,\n        [withBaseName(\"transparent\")]: transparent,\n        [withBaseName(\"graySwatch\")]: isBlackOrgray(color),\n        [withBaseName(\"whiteSwatch\")]: isWhite(color),\n        [withBaseName(\"swatch\")]: !isWhite(color) && !isBlackOrgray(color),\n      })}\n      onClick={handleClick}\n      tabIndex={0}\n      onKeyDown={handleKeyDown}\n    />\n  );\n};\n"],"names":["color","cn"],"mappings":";;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,wBAAwB,CAAA,CAAA;AAenD,MAAM,SAAS,CAAC;AAAA,EACrB,KAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAc,GAAA,KAAA;AAChB,CAAgC,KAAA;AAC9B,EAAA,MAAM,cAAc,MAAM;AACxB,IAAM,MAAA,QAAA,GAAW,KAAM,CAAA,gBAAA,CAAiB,KAAK,CAAA,CAAA;AAC7C,IAAA,aAAA,CAAc,KAAK,CAAI,GAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAU,QAAS,CAAA,CAAA,CAAA,GAAK,qCAAU,QAAS,CAAA,KAAA,CAAA,CAAA;AAElE,IAAA,OAAA,CAAQ,UAAU,IAAI,CAAA,CAAA;AACtB,IAAe,cAAA,EAAA,CAAA;AAAA,GACjB,CAAA;AAEA,EAAM,MAAA,aAAA,GAAgB,CAAC,CAA2C,KAAA;AArCpE,IAAA,IAAA,EAAA,CAAA;AAsCI,IAAA,MAAM,YAAW,EAAM,GAAA,KAAA,CAAA,gBAAA,CAAiB,KAAK,CAAA,KAA5B,mBAA+B,QAAS,CAAA,KAAA,CAAA,CAAA;AACzD,IAAA,CAAA,CAAE,GAAQ,KAAA,OAAA,IAAW,OAAQ,CAAA,QAAA,EAAU,IAAI,CAAA,CAAA;AAC3C,IAAe,cAAA,EAAA,CAAA;AAAA,GACjB,CAAA;AAGA,EAAM,MAAA,aAAA,GAAgB,CAACA,MAA2B,KAAA;AAChD,IACEA,OAAAA,MAAAA,CAAM,WAAY,EAAA,KAAM,OACxBA,IAAAA,MAAAA,CAAM,WAAY,EAAA,CAAE,UAAW,CAAA,SAAS,CACxCA,IAAAA,MAAAA,CAAM,WAAY,EAAA,CAAE,WAAW,SAAS,CAAA,IACxCA,MAAM,CAAA,WAAA,EAAc,CAAA,UAAA,CAAW,SAAS,CAAA,IACxCA,MAAM,CAAA,WAAA,EAAc,CAAA,UAAA,CAAW,SAAS,CAAA,CAAA;AAAA,GAE5C,CAAA;AACA,EAAM,MAAA,OAAA,GAAU,CAACA,MAAAA,KAA2BA,MAAU,KAAA,OAAA,CAAA;AAEtD,EAAA,MAAM,qBAAqB,MAAM;AAC/B,IAAM,MAAA,eAAA,GAAkB,KAAM,CAAA,gBAAA,CAAiB,KAAK,CAAA,CAAA;AACpD,IAAO,OAAA,eAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,eAAA,CAAiB,SAAS,KAAO,CAAA,CAAA,GAAA,CAAA;AAAA,GAC1C,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,eAAa,CAAU,OAAA,EAAA,KAAA,CAAA,CAAA;AAAA,IACvB,KAAO,EAAA;AAAA,MACL,YAAY,kBAAmB,EAAA;AAAA,KACjC;AAAA,IACA,WAAWC,EAAG,CAAA;AAAA,MACZ,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,MAC1B,CAAC,YAAa,CAAA,aAAa,CAAI,GAAA,WAAA;AAAA,MAC/B,CAAC,YAAA,CAAa,YAAY,CAAA,GAAI,cAAc,KAAK,CAAA;AAAA,MACjD,CAAC,YAAA,CAAa,aAAa,CAAA,GAAI,QAAQ,KAAK,CAAA;AAAA,MAC5C,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,CAAC,QAAQ,KAAK,CAAA,IAAK,CAAC,aAAA,CAAc,KAAK,CAAA;AAAA,KAClE,CAAA;AAAA,IACD,OAAS,EAAA,WAAA;AAAA,IACT,QAAU,EAAA,CAAA;AAAA,IACV,SAAW,EAAA,aAAA;AAAA,GACb,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Swatch.js","sources":["../src/color-chooser/Swatch.tsx"],"sourcesContent":["import { ChangeEvent, KeyboardEvent } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { Color } from \"./Color\";\nimport { isTransparent } from \"./color-utils\";\n\nconst withBaseName = makePrefixer(\"saltColorChooserSwatch\");\n\ninterface SwatchProps {\n  active: boolean;\n  alpha: number;\n  color: string;\n  onClick: (\n    color: Color | undefined,\n    finalSelection: boolean,\n    e?: ChangeEvent\n  ) => void;\n  onDialogClosed: () => void;\n  transparent?: boolean;\n}\n\nexport const Swatch = ({\n  color,\n  onClick,\n  active,\n  alpha,\n  onDialogClosed,\n  transparent = false,\n}: SwatchProps): JSX.Element => {\n  const handleClick = () => {\n    const newColor = Color.makeColorFromHex(color);\n    isTransparent(color) ? newColor?.setAlpha(0) : newColor?.setAlpha(alpha);\n\n    onClick(newColor, true);\n    onDialogClosed();\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>): void => {\n    const newColor = Color.makeColorFromHex(color)?.setAlpha(alpha);\n    e.key === \"ENTER\" && onClick(newColor, true);\n    onDialogClosed();\n  };\n\n  // If it's black/gray/white\n  const isBlackOrgray = (color: string): boolean => {\n    return (\n      color.toLowerCase() === \"black\" ||\n      color.toUpperCase().startsWith(\"#2F3136\") ||\n      color.toUpperCase().startsWith(\"#2A2C2F\") ||\n      color.toUpperCase().startsWith(\"#242526\") ||\n      color.toUpperCase().startsWith(\"#161616\")\n    );\n  };\n  const isWhite = (color: string): boolean => color === \"white\";\n\n  const getBackgroundColor = () => {\n    const backgroundColor = Color.makeColorFromHex(color);\n    return backgroundColor?.setAlpha(alpha).hex;\n  };\n\n  return (\n    <div\n      data-testid={`swatch-${color}`}\n      style={{\n        background: getBackgroundColor(),\n      }}\n      className={clsx({\n        [withBaseName(\"active\")]: active,\n        [withBaseName(\"transparent\")]: transparent,\n        [withBaseName(\"graySwatch\")]: isBlackOrgray(color),\n        [withBaseName(\"whiteSwatch\")]: isWhite(color),\n        [withBaseName(\"swatch\")]: !isWhite(color) && !isBlackOrgray(color),\n      })}\n      onClick={handleClick}\n      tabIndex={0}\n      onKeyDown={handleKeyDown}\n    />\n  );\n};\n"],"names":["color"],"mappings":";;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,wBAAwB,CAAA,CAAA;AAenD,MAAM,SAAS,CAAC;AAAA,EACrB,KAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAc,GAAA,KAAA;AAChB,CAAgC,KAAA;AAC9B,EAAA,MAAM,cAAc,MAAM;AACxB,IAAM,MAAA,QAAA,GAAW,KAAM,CAAA,gBAAA,CAAiB,KAAK,CAAA,CAAA;AAC7C,IAAA,aAAA,CAAc,KAAK,CAAI,GAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAU,QAAS,CAAA,CAAA,CAAA,GAAK,qCAAU,QAAS,CAAA,KAAA,CAAA,CAAA;AAElE,IAAA,OAAA,CAAQ,UAAU,IAAI,CAAA,CAAA;AACtB,IAAe,cAAA,EAAA,CAAA;AAAA,GACjB,CAAA;AAEA,EAAM,MAAA,aAAA,GAAgB,CAAC,CAA2C,KAAA;AArCpE,IAAA,IAAA,EAAA,CAAA;AAsCI,IAAA,MAAM,YAAW,EAAM,GAAA,KAAA,CAAA,gBAAA,CAAiB,KAAK,CAAA,KAA5B,mBAA+B,QAAS,CAAA,KAAA,CAAA,CAAA;AACzD,IAAA,CAAA,CAAE,GAAQ,KAAA,OAAA,IAAW,OAAQ,CAAA,QAAA,EAAU,IAAI,CAAA,CAAA;AAC3C,IAAe,cAAA,EAAA,CAAA;AAAA,GACjB,CAAA;AAGA,EAAM,MAAA,aAAA,GAAgB,CAACA,MAA2B,KAAA;AAChD,IACEA,OAAAA,MAAAA,CAAM,WAAY,EAAA,KAAM,OACxBA,IAAAA,MAAAA,CAAM,WAAY,EAAA,CAAE,UAAW,CAAA,SAAS,CACxCA,IAAAA,MAAAA,CAAM,WAAY,EAAA,CAAE,WAAW,SAAS,CAAA,IACxCA,MAAM,CAAA,WAAA,EAAc,CAAA,UAAA,CAAW,SAAS,CAAA,IACxCA,MAAM,CAAA,WAAA,EAAc,CAAA,UAAA,CAAW,SAAS,CAAA,CAAA;AAAA,GAE5C,CAAA;AACA,EAAM,MAAA,OAAA,GAAU,CAACA,MAAAA,KAA2BA,MAAU,KAAA,OAAA,CAAA;AAEtD,EAAA,MAAM,qBAAqB,MAAM;AAC/B,IAAM,MAAA,eAAA,GAAkB,KAAM,CAAA,gBAAA,CAAiB,KAAK,CAAA,CAAA;AACpD,IAAO,OAAA,eAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,eAAA,CAAiB,SAAS,KAAO,CAAA,CAAA,GAAA,CAAA;AAAA,GAC1C,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,eAAa,CAAU,OAAA,EAAA,KAAA,CAAA,CAAA;AAAA,IACvB,KAAO,EAAA;AAAA,MACL,YAAY,kBAAmB,EAAA;AAAA,KACjC;AAAA,IACA,WAAW,IAAK,CAAA;AAAA,MACd,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,MAC1B,CAAC,YAAa,CAAA,aAAa,CAAI,GAAA,WAAA;AAAA,MAC/B,CAAC,YAAA,CAAa,YAAY,CAAA,GAAI,cAAc,KAAK,CAAA;AAAA,MACjD,CAAC,YAAA,CAAa,aAAa,CAAA,GAAI,QAAQ,KAAK,CAAA;AAAA,MAC5C,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,CAAC,QAAQ,KAAK,CAAA,IAAK,CAAC,aAAA,CAAc,KAAK,CAAA;AAAA,KAClE,CAAA;AAAA,IACD,OAAS,EAAA,WAAA;AAAA,IACT,QAAU,EAAA,CAAA;AAAA,IACV,SAAW,EAAA,aAAA;AAAA,GACb,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/packages/lab/src/color-chooser/Swatches.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { makePrefixer } from '@salt-ds/core';
 import { AlphaInput } from './AlphaInputField.js';
 import { SwatchesPicker } from './SwatchesPicker.js';
@@ -16,7 +16,7 @@ const Swatches = ({
   onDialogClosed
 }) => /* @__PURE__ */ jsxs("div", {
   "data-testid": "swatches",
-  className: cx(withBaseName("pickerDiv")),
+  className: clsx(withBaseName("pickerDiv")),
   children: [
     /* @__PURE__ */ jsx(SwatchesPicker, {
       allColors,
@@ -26,16 +26,16 @@ const Swatches = ({
       onDialogClosed
     }),
     /* @__PURE__ */ jsxs("div", {
-      className: cx(withBaseName("textDiv")),
+      className: clsx(withBaseName("textDiv")),
       children: [
         /* @__PURE__ */ jsxs("div", {
           children: [
             /* @__PURE__ */ jsx("span", {
-              className: cx(withBaseName("colorTextDiv")),
+              className: clsx(withBaseName("colorTextDiv")),
               children: "Color:"
             }),
             /* @__PURE__ */ jsx("span", {
-              className: cx(withBaseName("colorNameTextDiv")),
+              className: clsx(withBaseName("colorNameTextDiv")),
               children: displayColorName != null ? displayColorName : placeholder
             })
           ]
@@ -43,7 +43,7 @@ const Swatches = ({
         /* @__PURE__ */ jsxs("div", {
           children: [
             /* @__PURE__ */ jsx("span", {
-              className: cx(withBaseName("alphaTextDiv")),
+              className: clsx(withBaseName("alphaTextDiv")),
               children: "Opacity:"
             }),
             /* @__PURE__ */ jsx(AlphaInput, {

package/dist-es/packages/lab/src/color-chooser/Swatches.js.map

@@ -1 +1 @@
-{"version":3,"file":"Swatches.js","sources":["../src/color-chooser/Swatches.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { AlphaInput } from \"./AlphaInputField\";\nimport { Color } from \"./Color\";\nimport { SwatchesPicker } from \"./SwatchesPicker\";\nimport \"./Swatches.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooserSwatches\");\n\nexport interface SwatchesTabProps {\n  allColors: string[][];\n  color: Color | undefined;\n  alpha: number;\n  handleColorChange: (\n    color: Color | undefined,\n    finalSelection: boolean,\n    e?: React.ChangeEvent\n  ) => void;\n  displayColorName: string | undefined;\n  placeholder: string | undefined;\n  onDialogClosed: () => void;\n}\n\nexport const Swatches = ({\n  allColors,\n  color,\n  alpha,\n  handleColorChange,\n  displayColorName,\n  placeholder,\n  onDialogClosed,\n}: SwatchesTabProps): JSX.Element => (\n  <div data-testid=\"swatches\" className={cn(withBaseName(\"pickerDiv\"))}>\n    <SwatchesPicker\n      allColors={allColors}\n      color={color}\n      onChange={handleColorChange}\n      alpha={alpha}\n      onDialogClosed={onDialogClosed}\n    />\n    <div className={cn(withBaseName(\"textDiv\"))}>\n      <div>\n        <span className={cn(withBaseName(\"colorTextDiv\"))}>Color:</span>\n        <span className={cn(withBaseName(\"colorNameTextDiv\"))}>\n          {displayColorName ?? placeholder}\n        </span>\n      </div>\n      <div>\n        <span className={cn(withBaseName(\"alphaTextDiv\"))}>Opacity:</span>\n        <AlphaInput\n          alphaValue={color?.rgba.a === 0 ? 0 : alpha}\n          showAsOpacity={true}\n          onSubmit={(alpha: number, e?: React.ChangeEvent): void => {\n            const newColor = color?.setAlpha(alpha);\n            handleColorChange(newColor, false, e);\n          }}\n        />\n      </div>\n    </div>\n  </div>\n);\n"],"names":["cn","alpha"],"mappings":";;;;;;;AAOA,MAAM,YAAA,GAAe,aAAa,0BAA0B,CAAA,CAAA;AAgBrD,MAAM,WAAW,CAAC;AAAA,EACvB,SAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,WAAA;AAAA,EACA,cAAA;AACF,CAAA,qBACG,IAAA,CAAA,KAAA,EAAA;AAAA,EAAI,aAAY,EAAA,UAAA;AAAA,EAAW,SAAW,EAAAA,EAAA,CAAG,YAAa,CAAA,WAAW,CAAC,CAAA;AAAA,EACjE,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,cAAA,EAAA;AAAA,MACC,SAAA;AAAA,MACA,KAAA;AAAA,MACA,QAAU,EAAA,iBAAA;AAAA,MACV,KAAA;AAAA,MACA,cAAA;AAAA,KACF,CAAA;AAAA,oBACC,IAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAAA,EAAA,CAAG,YAAa,CAAA,SAAS,CAAC,CAAA;AAAA,MACxC,QAAA,EAAA;AAAA,wBAAC,IAAA,CAAA,KAAA,EAAA;AAAA,UACC,QAAA,EAAA;AAAA,4BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,cAAK,SAAW,EAAAA,EAAA,CAAG,YAAa,CAAA,cAAc,CAAC,CAAA;AAAA,cAAG,QAAA,EAAA,QAAA;AAAA,aAAM,CAAA;AAAA,4BACxD,GAAA,CAAA,MAAA,EAAA;AAAA,cAAK,SAAW,EAAAA,EAAA,CAAG,YAAa,CAAA,kBAAkB,CAAC,CAAA;AAAA,cACjD,QAAoB,EAAA,gBAAA,IAAA,IAAA,GAAA,gBAAA,GAAA,WAAA;AAAA,aACvB,CAAA;AAAA,WAAA;AAAA,SACF,CAAA;AAAA,wBACC,IAAA,CAAA,KAAA,EAAA;AAAA,UACC,QAAA,EAAA;AAAA,4BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,cAAK,SAAW,EAAAA,EAAA,CAAG,YAAa,CAAA,cAAc,CAAC,CAAA;AAAA,cAAG,QAAA,EAAA,UAAA;AAAA,aAAQ,CAAA;AAAA,4BAC1D,GAAA,CAAA,UAAA,EAAA;AAAA,cACC,UAAY,EAAA,CAAA,KAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,CAAO,IAAK,CAAA,CAAA,MAAM,IAAI,CAAI,GAAA,KAAA;AAAA,cACtC,aAAe,EAAA,IAAA;AAAA,cACf,QAAA,EAAU,CAACC,MAAAA,EAAe,CAAgC,KAAA;AACxD,gBAAM,MAAA,QAAA,GAAW,+BAAO,QAASA,CAAAA,MAAAA,CAAAA,CAAAA;AACjC,gBAAkB,iBAAA,CAAA,QAAA,EAAU,OAAO,CAAC,CAAA,CAAA;AAAA,eACtC;AAAA,aACF,CAAA;AAAA,WAAA;AAAA,SACF,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAAA;AAAA,CACF;;;;"}
+{"version":3,"file":"Swatches.js","sources":["../src/color-chooser/Swatches.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { AlphaInput } from \"./AlphaInputField\";\nimport { Color } from \"./Color\";\nimport { SwatchesPicker } from \"./SwatchesPicker\";\nimport \"./Swatches.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooserSwatches\");\n\nexport interface SwatchesTabProps {\n  allColors: string[][];\n  color: Color | undefined;\n  alpha: number;\n  handleColorChange: (\n    color: Color | undefined,\n    finalSelection: boolean,\n    e?: React.ChangeEvent\n  ) => void;\n  displayColorName: string | undefined;\n  placeholder: string | undefined;\n  onDialogClosed: () => void;\n}\n\nexport const Swatches = ({\n  allColors,\n  color,\n  alpha,\n  handleColorChange,\n  displayColorName,\n  placeholder,\n  onDialogClosed,\n}: SwatchesTabProps): JSX.Element => (\n  <div data-testid=\"swatches\" className={clsx(withBaseName(\"pickerDiv\"))}>\n    <SwatchesPicker\n      allColors={allColors}\n      color={color}\n      onChange={handleColorChange}\n      alpha={alpha}\n      onDialogClosed={onDialogClosed}\n    />\n    <div className={clsx(withBaseName(\"textDiv\"))}>\n      <div>\n        <span className={clsx(withBaseName(\"colorTextDiv\"))}>Color:</span>\n        <span className={clsx(withBaseName(\"colorNameTextDiv\"))}>\n          {displayColorName ?? placeholder}\n        </span>\n      </div>\n      <div>\n        <span className={clsx(withBaseName(\"alphaTextDiv\"))}>Opacity:</span>\n        <AlphaInput\n          alphaValue={color?.rgba.a === 0 ? 0 : alpha}\n          showAsOpacity={true}\n          onSubmit={(alpha: number, e?: React.ChangeEvent): void => {\n            const newColor = color?.setAlpha(alpha);\n            handleColorChange(newColor, false, e);\n          }}\n        />\n      </div>\n    </div>\n  </div>\n);\n"],"names":["alpha"],"mappings":";;;;;;;AAOA,MAAM,YAAA,GAAe,aAAa,0BAA0B,CAAA,CAAA;AAgBrD,MAAM,WAAW,CAAC;AAAA,EACvB,SAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,WAAA;AAAA,EACA,cAAA;AACF,CAAA,qBACG,IAAA,CAAA,KAAA,EAAA;AAAA,EAAI,aAAY,EAAA,UAAA;AAAA,EAAW,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,WAAW,CAAC,CAAA;AAAA,EACnE,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,cAAA,EAAA;AAAA,MACC,SAAA;AAAA,MACA,KAAA;AAAA,MACA,QAAU,EAAA,iBAAA;AAAA,MACV,KAAA;AAAA,MACA,cAAA;AAAA,KACF,CAAA;AAAA,oBACC,IAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,SAAS,CAAC,CAAA;AAAA,MAC1C,QAAA,EAAA;AAAA,wBAAC,IAAA,CAAA,KAAA,EAAA;AAAA,UACC,QAAA,EAAA;AAAA,4BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,cAAK,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,cAAc,CAAC,CAAA;AAAA,cAAG,QAAA,EAAA,QAAA;AAAA,aAAM,CAAA;AAAA,4BAC1D,GAAA,CAAA,MAAA,EAAA;AAAA,cAAK,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,kBAAkB,CAAC,CAAA;AAAA,cACnD,QAAoB,EAAA,gBAAA,IAAA,IAAA,GAAA,gBAAA,GAAA,WAAA;AAAA,aACvB,CAAA;AAAA,WAAA;AAAA,SACF,CAAA;AAAA,wBACC,IAAA,CAAA,KAAA,EAAA;AAAA,UACC,QAAA,EAAA;AAAA,4BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,cAAK,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,cAAc,CAAC,CAAA;AAAA,cAAG,QAAA,EAAA,UAAA;AAAA,aAAQ,CAAA;AAAA,4BAC5D,GAAA,CAAA,UAAA,EAAA;AAAA,cACC,UAAY,EAAA,CAAA,KAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,CAAO,IAAK,CAAA,CAAA,MAAM,IAAI,CAAI,GAAA,KAAA;AAAA,cACtC,aAAe,EAAA,IAAA;AAAA,cACf,QAAA,EAAU,CAACA,MAAAA,EAAe,CAAgC,KAAA;AACxD,gBAAM,MAAA,QAAA,GAAW,+BAAO,QAASA,CAAAA,MAAAA,CAAAA,CAAAA;AACjC,gBAAkB,iBAAA,CAAA,QAAA,EAAU,OAAO,CAAC,CAAA,CAAA;AAAA,eACtC;AAAA,aACF,CAAA;AAAA,WAAA;AAAA,SACF,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAAA;AAAA,CACF;;;;"}

package/dist-es/packages/lab/src/combo-box/ComboBox.js

@@ -5,6 +5,7 @@ import { DropdownBase } from '../dropdown/DropdownBase.js';
 import '../dropdown/DropdownButton.js';
 import '../dropdown/Dropdown.js';
 import '../responsive/useResizeObserver.js';
+import '../utils/useFloatingUI.js';
 import '../form-field-context/FormFieldContext.js';
 import '../list/Highlighter.js';
 import '../list/ListItem.js';

package/dist-es/packages/lab/src/combo-box/ComboBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","sources":["../src/combo-box/ComboBox.tsx"],"sourcesContent":["import { useIdMemo as useId } from \"@salt-ds/core\";\nimport { ForwardedRef, forwardRef, ReactElement, useCallback } from \"react\";\n\nimport { DropdownBase, DropdownBaseProps } from \"../dropdown\";\nimport { List, ListProps } from \"../list\";\nimport { Input, InputProps } from \"../input\";\n\nimport {\n  CollectionItem,\n  CollectionProvider,\n  SelectionProps,\n  SelectionStrategy,\n  SingleSelectionStrategy,\n  useCollectionItems,\n} from \"../common-hooks\";\nimport { useCombobox } from \"./useCombobox\";\n\nexport interface ComboBoxProps<\n  Item = string,\n  Selection extends SelectionStrategy = \"default\"\n> extends Omit<\n      DropdownBaseProps,\n      \"triggerComponent\" | \"onBlur\" | \"onChange\" | \"onFocus\"\n    >,\n    Pick<InputProps, \"onBlur\" | \"onChange\" | \"onFocus\" | \"onSelect\">,\n    Pick<\n      ListProps<Item, Selection>,\n      \"ListItem\" | \"itemToString\" | \"source\" | \"width\"\n    >,\n    Pick<\n      SelectionProps<Item, Selection>,\n      \"onSelectionChange\" | \"selectionStrategy\"\n    > {\n  InputProps?: InputProps;\n  ListProps?: Omit<\n    ListProps<Item, Selection>,\n    \"ListItem\" | \"itemToString\" | \"source\"\n  >;\n  allowFreeText?: boolean;\n  defaultValue?: string;\n  getFilterRegex?: (inputValue: string) => RegExp;\n  stringToItem?: (value?: string) => Item | null | undefined;\n  value?: string;\n}\n\nexport const ComboBox = forwardRef(function Combobox<\n  Item = string,\n  Selection extends SelectionStrategy = \"default\"\n>(\n  {\n    InputProps,\n    ListProps,\n    ListItem,\n    \"aria-label\": ariaLabel,\n    allowFreeText,\n    children,\n    defaultIsOpen,\n    defaultValue,\n    disabled,\n    onBlur,\n    onFocus,\n    onChange,\n    onSelect,\n    getFilterRegex,\n    id: idProp,\n    isOpen: isOpenProp,\n    itemToString,\n    onOpenChange: onOpenChangeProp,\n    onSelectionChange,\n    selectionStrategy,\n    source,\n    stringToItem,\n    value: valueProp,\n    width = 180,\n    ...props\n  }: ComboBoxProps<Item, Selection>,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const id = useId(idProp);\n\n  const collectionHook = useCollectionItems<Item>({\n    id,\n    source,\n    children,\n    options: {\n      filterPattern: valueProp ?? defaultValue,\n      getFilterRegex,\n      itemToString,\n    },\n  });\n\n  const {\n    focusVisible,\n    highlightedIndex,\n    inputProps,\n    isOpen,\n    listHandlers,\n    listControlProps: controlProps,\n    onOpenChange,\n    selected,\n  } = useCombobox<Item, Selection>({\n    InputProps,\n    allowFreeText,\n    ariaLabel,\n    collectionHook,\n    defaultIsOpen,\n    defaultValue,\n    disabled,\n    onBlur,\n    onFocus,\n    onChange,\n    onSelect,\n    id,\n    isOpen: isOpenProp,\n    itemToString,\n    label: \"ComboBox\",\n    onOpenChange: onOpenChangeProp,\n    onSelectionChange,\n    selectionStrategy,\n    stringToItem,\n    value: valueProp,\n  });\n\n  const collectionItemsToItem = useCallback(\n    (\n      sel?: CollectionItem<Item> | null | CollectionItem<Item>[]\n    ):\n      | undefined\n      | (Selection extends SingleSelectionStrategy ? Item | null : Item[]) => {\n      type returnType = Selection extends SingleSelectionStrategy\n        ? Item | null\n        : Item[];\n      if (Array.isArray(sel)) {\n        return sel.map((i) => i.value) as returnType;\n      } else if (sel) {\n        return sel.value as returnType;\n      } else {\n        return sel as returnType;\n      }\n    },\n    []\n  );\n\n  return (\n    <CollectionProvider<Item> collectionHook={collectionHook}>\n      <DropdownBase\n        {...props}\n        fullWidth\n        id={id}\n        isOpen={isOpen}\n        onOpenChange={onOpenChange}\n        openOnFocus\n        ref={forwardedRef}\n        width={width}\n      >\n        <Input\n          {...inputProps}\n          disabled={disabled}\n          // ref={useForkRef(setInputRef, setHookInputRef)}\n          {...controlProps}\n        />\n\n        <List<Item, Selection>\n          {...ListProps}\n          ListItem={ListItem}\n          focusVisible={focusVisible}\n          highlightedIndex={highlightedIndex}\n          itemTextHighlightPattern={inputProps.value || undefined}\n          id={`${id}-list`}\n          listHandlers={listHandlers}\n          onSelectionChange={onSelectionChange}\n          selected={collectionItemsToItem(selected)}\n          selectionStrategy={selectionStrategy}\n        />\n      </DropdownBase>\n    </CollectionProvider>\n  );\n}) as <Item, Selection extends SelectionStrategy = \"default\">(\n  props: ComboBoxProps<Item, Selection> & {\n    ref?: ForwardedRef<HTMLDivElement>;\n  }\n) => ReactElement<ComboBoxProps<Item, Selection>>;\n"],"names":["InputProps","ListProps","useId"],"mappings":"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"}
+{"version":3,"file":"ComboBox.js","sources":["../src/combo-box/ComboBox.tsx"],"sourcesContent":["import { useIdMemo as useId } from \"@salt-ds/core\";\nimport { ForwardedRef, forwardRef, ReactElement, useCallback } from \"react\";\n\nimport { DropdownBase, DropdownBaseProps } from \"../dropdown\";\nimport { List, ListProps } from \"../list\";\nimport { Input, InputProps } from \"../input\";\n\nimport {\n  CollectionItem,\n  CollectionProvider,\n  SelectionProps,\n  SelectionStrategy,\n  SingleSelectionStrategy,\n  useCollectionItems,\n} from \"../common-hooks\";\nimport { useCombobox } from \"./useCombobox\";\n\nexport interface ComboBoxProps<\n  Item = string,\n  Selection extends SelectionStrategy = \"default\"\n> extends Omit<\n      DropdownBaseProps,\n      \"triggerComponent\" | \"onBlur\" | \"onChange\" | \"onFocus\"\n    >,\n    Pick<InputProps, \"onBlur\" | \"onChange\" | \"onFocus\" | \"onSelect\">,\n    Pick<\n      ListProps<Item, Selection>,\n      \"ListItem\" | \"itemToString\" | \"source\" | \"width\"\n    >,\n    Pick<\n      SelectionProps<Item, Selection>,\n      \"onSelectionChange\" | \"selectionStrategy\"\n    > {\n  InputProps?: InputProps;\n  ListProps?: Omit<\n    ListProps<Item, Selection>,\n    \"ListItem\" | \"itemToString\" | \"source\"\n  >;\n  allowFreeText?: boolean;\n  defaultValue?: string;\n  getFilterRegex?: (inputValue: string) => RegExp;\n  stringToItem?: (value?: string) => Item | null | undefined;\n  value?: string;\n}\n\nexport const ComboBox = forwardRef(function Combobox<\n  Item = string,\n  Selection extends SelectionStrategy = \"default\"\n>(\n  {\n    InputProps,\n    ListProps,\n    ListItem,\n    \"aria-label\": ariaLabel,\n    allowFreeText,\n    children,\n    defaultIsOpen,\n    defaultValue,\n    disabled,\n    onBlur,\n    onFocus,\n    onChange,\n    onSelect,\n    getFilterRegex,\n    id: idProp,\n    isOpen: isOpenProp,\n    itemToString,\n    onOpenChange: onOpenChangeProp,\n    onSelectionChange,\n    selectionStrategy,\n    source,\n    stringToItem,\n    value: valueProp,\n    width = 180,\n    ...props\n  }: ComboBoxProps<Item, Selection>,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const id = useId(idProp);\n\n  const collectionHook = useCollectionItems<Item>({\n    id,\n    source,\n    children,\n    options: {\n      filterPattern: valueProp ?? defaultValue,\n      getFilterRegex,\n      itemToString,\n    },\n  });\n\n  const {\n    focusVisible,\n    highlightedIndex,\n    inputProps,\n    isOpen,\n    listHandlers,\n    listControlProps: controlProps,\n    onOpenChange,\n    selected,\n  } = useCombobox<Item, Selection>({\n    InputProps,\n    allowFreeText,\n    ariaLabel,\n    collectionHook,\n    defaultIsOpen,\n    defaultValue,\n    disabled,\n    onBlur,\n    onFocus,\n    onChange,\n    onSelect,\n    id,\n    isOpen: isOpenProp,\n    itemToString,\n    label: \"ComboBox\",\n    onOpenChange: onOpenChangeProp,\n    onSelectionChange,\n    selectionStrategy,\n    stringToItem,\n    value: valueProp,\n  });\n\n  const collectionItemsToItem = useCallback(\n    (\n      sel?: CollectionItem<Item> | null | CollectionItem<Item>[]\n    ):\n      | undefined\n      | (Selection extends SingleSelectionStrategy ? Item | null : Item[]) => {\n      type returnType = Selection extends SingleSelectionStrategy\n        ? Item | null\n        : Item[];\n      if (Array.isArray(sel)) {\n        return sel.map((i) => i.value) as returnType;\n      } else if (sel) {\n        return sel.value as returnType;\n      } else {\n        return sel as returnType;\n      }\n    },\n    []\n  );\n\n  return (\n    <CollectionProvider<Item> collectionHook={collectionHook}>\n      <DropdownBase\n        {...props}\n        fullWidth\n        id={id}\n        isOpen={isOpen}\n        onOpenChange={onOpenChange}\n        openOnFocus\n        ref={forwardedRef}\n        width={width}\n      >\n        <Input\n          {...inputProps}\n          disabled={disabled}\n          // ref={useForkRef(setInputRef, setHookInputRef)}\n          {...controlProps}\n        />\n\n        <List<Item, Selection>\n          {...ListProps}\n          ListItem={ListItem}\n          focusVisible={focusVisible}\n          highlightedIndex={highlightedIndex}\n          itemTextHighlightPattern={inputProps.value || undefined}\n          id={`${id}-list`}\n          listHandlers={listHandlers}\n          onSelectionChange={onSelectionChange}\n          selected={collectionItemsToItem(selected)}\n          selectionStrategy={selectionStrategy}\n        />\n      </DropdownBase>\n    </CollectionProvider>\n  );\n}) as <Item, Selection extends SelectionStrategy = \"default\">(\n  props: ComboBoxProps<Item, Selection> & {\n    ref?: ForwardedRef<HTMLDivElement>;\n  }\n) => ReactElement<ComboBoxProps<Item, Selection>>;\n"],"names":["InputProps","ListProps","useId"],"mappings":"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"}

package/dist-es/packages/lab/src/combo-box/useCombobox.js

@@ -8,6 +8,7 @@ import '../list/VirtualizedList.js';
 import '../common-hooks/collectionProvider.js';
 import { itemToString } from '../common-hooks/itemToString.js';
 import '../common-hooks/keyUtils.js';
+import '../utils/useFloatingUI.js';
 import 'react/jsx-runtime';
 import '../responsive/useResizeObserver.js';
 

package/dist-es/packages/lab/src/combo-box/useCombobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCombobox.js","sources":["../src/combo-box/useCombobox.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport {\n  ChangeEvent,\n  FocusEvent,\n  KeyboardEvent,\n  MouseEvent,\n  SyntheticEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { ListHookProps, ListHookResult, useList } from \"../list\";\nimport { DropdownHookResult, DropdownHookProps } from \"../dropdown\";\nimport {\n  CollectionItem,\n  itemToString as defaultItemToString,\n  SelectionChangeHandler,\n  SelectionStrategy,\n  SingleSelectionStrategy,\n} from \"../common-hooks\";\nimport { InputProps } from \"../input\";\n\nconst NULL_REF = { current: null };\nconst EnterOnly = [\"Enter\"];\n\nexport interface ComboboxHookProps<Item, Strategy extends SelectionStrategy>\n  extends Partial<Omit<DropdownHookProps, \"id\" | \"onKeyDown\">>,\n    Pick<InputProps, \"onBlur\" | \"onChange\" | \"onFocus\" | \"onSelect\">,\n    Omit<\n      ListHookProps<Item, Strategy>,\n      \"containerRef\" | \"defaultSelected\" | \"selected\" | \"onSelect\"\n    > {\n  InputProps?: InputProps;\n  allowFreeText?: boolean;\n  ariaLabel?: string;\n  defaultValue?: string;\n  id: string;\n  itemToString?: (item: Item) => string;\n  stringToItem?: (value?: string) => Item | null | undefined;\n  value?: string;\n}\n\nexport interface ComboboxHookResult<Item, Selection extends SelectionStrategy>\n  extends Pick<\n      ListHookResult<Item, Selection>,\n      | \"focusVisible\"\n      | \"highlightedIndex\"\n      | \"listControlProps\"\n      | \"listHandlers\"\n      | \"selected\"\n    >,\n    Partial<DropdownHookResult> {\n  inputProps: InputProps;\n  onOpenChange: (isOpen: boolean) => void;\n}\n\nexport const useCombobox = <\n  Item,\n  Selection extends SelectionStrategy = \"default\"\n>({\n  allowFreeText,\n  ariaLabel,\n  collectionHook,\n  defaultIsOpen,\n  defaultValue,\n  disabled,\n  onBlur,\n  onFocus,\n  onChange,\n  onSelect,\n  id,\n  isOpen: isOpenProp,\n  itemToString = defaultItemToString as (item: Item) => string,\n  onOpenChange,\n  onSelectionChange,\n  selectionStrategy,\n  stringToItem,\n  value: valueProp,\n  InputProps: inputProps = {\n    onBlur,\n    onFocus,\n    onChange,\n    onSelect,\n  },\n}: ComboboxHookProps<Item, Selection>): ComboboxHookResult<Item, Selection> => {\n  type selectedCollectionType = Selection extends SingleSelectionStrategy\n    ? CollectionItem<Item> | null\n    : CollectionItem<Item>[];\n  const isMultiSelect =\n    selectionStrategy === \"multiple\" || selectionStrategy === \"extended\";\n\n  const selectedValue = collectionHook.stringToCollectionItem<Selection>(\n    valueProp ?? defaultValue ?? null\n  );\n\n  const {\n    data: indexPositions,\n    itemToCollectionItem,\n    setFilterPattern,\n    stringToCollectionItem,\n  } = collectionHook;\n  const setHighlightedIndexRef = useRef<null | ((i: number) => void)>(null);\n  const setSelectedRef = useRef<\n    null | ListHookResult<Item, Selection>[\"setSelected\"]\n  >(null);\n  // Input select events are used to identify user navigation within the input text.\n  // The initial select event fired on focus is an exception that we ignore.\n  const ignoreSelectOnFocus = useRef(true);\n  const selectedRef = useRef<selectedCollectionType>(selectedValue);\n\n  const [isOpen, setIsOpen] = useControlled<boolean>({\n    controlled: isOpenProp,\n    default: defaultIsOpen ?? false,\n    name: \"useDropdownList\",\n  });\n\n  const [value, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue ?? \"\",\n    name: \"ComboBox\",\n    state: \"value\",\n  });\n\n  // TODO repeated in ComboboxNext, move to utils\n  const collectionItemsToItem = useCallback(\n    (\n      sel: CollectionItem<Item> | null | CollectionItem<Item>[]\n    ): Selection extends SingleSelectionStrategy ? Item | null : Item[] => {\n      type returnType = Selection extends SingleSelectionStrategy\n        ? Item | null\n        : Item[];\n      if (Array.isArray(sel)) {\n        return sel.map((i) => i.value) as returnType;\n      } else if (sel) {\n        return sel.value as returnType;\n      } else {\n        return sel as returnType;\n      }\n    },\n    []\n  );\n\n  const [disableAriaActiveDescendant, setDisableAriaActiveDescendant] =\n    useState(true);\n  const [quickSelection, setQuickSelection] = useState(false);\n\n  const highlightSelectedItem = useCallback(\n    (selected: selectedCollectionType = selectedRef.current) => {\n      if (Array.isArray(selected)) {\n        console.log(\"TODO multi selection\");\n      } else if (selected == null) {\n        setHighlightedIndexRef.current?.(-1);\n      } else {\n        const indexOfSelectedItem = indexPositions.indexOf(selected);\n        setHighlightedIndexRef.current?.(indexOfSelectedItem);\n      }\n    },\n    [indexPositions]\n  );\n\n  const setTextValue = useCallback(\n    (value: string) => {\n      setValue(value);\n      setFilterPattern(value === \"\" ? undefined : value);\n    },\n    [setFilterPattern, setValue]\n  );\n\n  const reconcileInput = useCallback(\n    (selected: selectedCollectionType = selectedRef.current) => {\n      let value = \"\";\n      if (Array.isArray(selected)) {\n        console.log(\"TODO multi selection\");\n      } else if (selected != null && selected.value !== null) {\n        value = itemToString(selected.value);\n      }\n      setTextValue(value);\n      if (value === \"\") {\n        setHighlightedIndexRef.current?.(-1);\n      } else {\n        highlightSelectedItem(selected);\n      }\n    },\n    [highlightSelectedItem, itemToString, setTextValue]\n  );\n\n  const applySelection = useCallback(\n    (evt: any, selected: selectedCollectionType) => {\n      if (!isMultiSelect) {\n        setIsOpen(false);\n      }\n      selectedRef.current = selected;\n      reconcileInput(selected);\n      onSelectionChange?.(evt, collectionItemsToItem(selected ?? null));\n    },\n    [\n      collectionItemsToItem,\n      isMultiSelect,\n      onSelectionChange,\n      reconcileInput,\n      setIsOpen,\n    ]\n  );\n\n  const handleSelectionChange = useCallback<\n    SelectionChangeHandler<Item, Selection>\n  >(\n    (evt, selected) => {\n      if (!isMultiSelect) {\n        const selectedCollectionItem = itemToCollectionItem<\n          Selection,\n          typeof selected\n        >(selected);\n        applySelection(evt, selectedCollectionItem);\n      }\n    },\n    [applySelection, isMultiSelect, itemToCollectionItem]\n  );\n\n  const handleFirstItemSelection = useCallback(\n    (evt: KeyboardEvent | ChangeEvent) => {\n      if (\n        !allowFreeText &&\n        (evt as KeyboardEvent).key === \"Enter\" &&\n        quickSelection\n      ) {\n        const [firstItem] = indexPositions;\n        applySelection(evt, firstItem as selectedCollectionType);\n      }\n    },\n    [allowFreeText, applySelection, indexPositions, quickSelection]\n  );\n\n  const handleInputKeyDown = useCallback(\n    (evt: KeyboardEvent) => {\n      if (\"Escape\" === evt.key) {\n        if (allowFreeText) {\n          setTextValue(\"\");\n        } else {\n          reconcileInput();\n        }\n      } else if (\"Tab\" === evt.key) {\n        if (!allowFreeText) {\n          reconcileInput();\n        }\n      }\n\n      handleFirstItemSelection(evt);\n\n      // if (inputProps.onKeyDown) {\n      //   inputProps.onKeyDown(event as KeyboardEvent<HTMLInputElement>);\n      // }\n    },\n    [allowFreeText, handleFirstItemSelection, reconcileInput, setTextValue]\n  );\n\n  const handleKeyboardNavigation = useCallback(() => {\n    setDisableAriaActiveDescendant(false);\n  }, []);\n\n  const {\n    focusVisible,\n    setHighlightedIndex,\n    highlightedIndex,\n    listControlProps,\n    listHandlers: listHookListHandlers,\n    selected,\n    setSelected,\n  } = useList<Item, Selection>({\n    collectionHook,\n    defaultHighlightedIndex: -1,\n    disableAriaActiveDescendant,\n    disableHighlightOnFocus: true,\n    disableTypeToSelect: true,\n    onKeyboardNavigation: handleKeyboardNavigation,\n    onKeyDown: handleInputKeyDown,\n    onSelectionChange: handleSelectionChange,\n    containerRef: NULL_REF,\n    // we are controlling selection from a ref value - is this right ?\n    selected: selectedRef.current,\n    selectionKeys: EnterOnly,\n    selectionStrategy,\n    tabToSelect: !isMultiSelect,\n  });\n\n  setHighlightedIndexRef.current = setHighlightedIndex;\n  setSelectedRef.current = setSelected;\n  // selectedRef.current = selected;\n\n  const handleOpenChange = useCallback(\n    (open: boolean) => {\n      setIsOpen(open);\n      if (!open) {\n        setQuickSelection(false);\n      }\n      onOpenChange?.(open);\n    },\n    [onOpenChange, setIsOpen]\n  );\n\n  const { onClick: listHandlersOnClick } = listHookListHandlers;\n  const handleListClick = useCallback(\n    (evt: MouseEvent) => {\n      //TODO use ref\n      document.getElementById(`${id}-input`)?.focus();\n      // const inputEl = inputRef.current;\n      console.log(\"handle list click\");\n      listHandlersOnClick?.(evt);\n      // if (inputEl != null) {\n      //   inputEl.focus();\n      // }\n\n      // if (restListProps.onClick) {\n      //   restListProps.onClick(event as MouseEvent<HTMLDivElement>);\n      // }\n\n      // notifyPopper(event);\n    },\n    [id, listHandlersOnClick]\n  );\n\n  const handleInputChange = useCallback(\n    (evt: ChangeEvent<HTMLInputElement>) => {\n      const newValue = evt.target.value;\n      setValue(newValue);\n\n      if (newValue && newValue.trim().length) {\n        setFilterPattern(newValue);\n      } else {\n        setFilterPattern(undefined);\n        selectedRef.current = null as selectedCollectionType;\n        onSelectionChange?.(\n          evt,\n          null as Selection extends SingleSelectionStrategy\n            ? Item | null\n            : Item[]\n        );\n      }\n\n      setIsOpen(true);\n\n      setQuickSelection(newValue.length > 0 && !allowFreeText);\n\n      // if (inputProps.onChange) {\n      //   inputProps.onChange(event, \"\");\n      // }\n    },\n    [allowFreeText, onSelectionChange, setFilterPattern, setIsOpen, setValue]\n  );\n\n  const { onFocus: inputOnFocus } = inputProps;\n  const { onFocus: listOnFocus } = listControlProps;\n  const handleInputFocus = useCallback(\n    (evt: FocusEvent<HTMLInputElement>) => {\n      setDisableAriaActiveDescendant(false);\n      listOnFocus?.(evt);\n      inputOnFocus?.(evt);\n    },\n    [inputOnFocus, listOnFocus]\n  );\n\n  const listFocused = useCallback(\n    (evt: FocusEvent) => {\n      const element = evt.relatedTarget as HTMLElement;\n      return element?.id === `${id}-list`;\n      return true;\n    },\n    [id]\n  );\n\n  // When focus leaves a free text combo, check to see if the entered text is\n  // a valid selection, if so fire a change event\n  const selectInputValue = useCallback(\n    (evt: ChangeEvent) => {\n      const text = value.trim();\n      if (text) {\n        const selectedCollectionItem = stringToCollectionItem<\"default\">(\n          text\n        ) as selectedCollectionType;\n        if (selectedCollectionItem) {\n          if (Array.isArray(selectedCollectionItem)) {\n            // TODO multi select\n          } else if (selectedCollectionItem !== selected) {\n            setSelectedRef.current?.(selectedCollectionItem);\n            onSelectionChange?.(\n              evt,\n              selectedCollectionItem.value as Selection extends SingleSelectionStrategy\n                ? Item | null\n                : Item[]\n            );\n          }\n        } else if (stringToItem) {\n          const item = stringToItem(text);\n          if (item) {\n            console.log(\"we have a new item\");\n          }\n        }\n        // Hoiw do we check if string is Item\n      }\n    },\n    [onSelectionChange, selected, stringToItem, stringToCollectionItem, value]\n  );\n\n  const { onBlur: inputOnBlur } = inputProps;\n  const { onBlur: listOnBlur } = listControlProps;\n  const handleInputBlur = useCallback(\n    (evt: FocusEvent<HTMLInputElement>) => {\n      if (listFocused(evt)) {\n        // nothing doing\n      } else {\n        listOnBlur?.(evt);\n        inputOnBlur?.(evt);\n        if (allowFreeText) {\n          selectInputValue(evt as ChangeEvent);\n        } else {\n          reconcileInput();\n        }\n        setDisableAriaActiveDescendant(true);\n        ignoreSelectOnFocus.current = true;\n      }\n    },\n    [\n      allowFreeText,\n      listFocused,\n      inputOnBlur,\n      listOnBlur,\n      reconcileInput,\n      selectInputValue,\n    ]\n  );\n\n  const { onSelect: inputOnSelect } = inputProps;\n  const handleInputSelect = useCallback(\n    (event: SyntheticEvent<HTMLDivElement>) => {\n      if (ignoreSelectOnFocus.current) {\n        ignoreSelectOnFocus.current = false;\n      } else {\n        setDisableAriaActiveDescendant(true);\n      }\n      inputOnSelect?.(event);\n    },\n    [inputOnSelect]\n  );\n\n  // If we have selected item(s) and we filter down the list by typing,\n  // the position of selected items within the list may be changing.\n  // Relocate highlighted index to the selection whenever this happens,\n  // so if we resume keyboard navigation, navigation begins from the selected\n  // item.\n  useEffect(() => {\n    highlightSelectedItem();\n    // TODO may need to scrollIntoView\n    if (indexPositions.length === 0) {\n      setIsOpen(false);\n    }\n  }, [highlightSelectedItem, indexPositions.length, setIsOpen]);\n\n  // const activeDescendant: string | undefined = selectionChanged\n  //   ? \"\"\n  //   : undefined;\n\n  const mergedInputProps = {\n    ...inputProps.inputProps,\n    // \"aria-owns\": listId,\n    \"aria-label\": ariaLabel,\n  };\n\n  return {\n    focusVisible,\n    highlightedIndex,\n    isOpen,\n    onOpenChange: handleOpenChange,\n    inputProps: {\n      ...inputProps,\n      // \"aria-activedescendant\": activeDescendant,\n      id: `${id}-input`,\n      inputProps: mergedInputProps,\n      onChange: handleInputChange,\n      onSelect: handleInputSelect,\n      role: \"combobox\",\n      value,\n    },\n    // listControlProps,\n    listControlProps: {\n      ...listControlProps,\n      onBlur: handleInputBlur,\n      onFocus: handleInputFocus,\n    },\n    listHandlers: {\n      ...listHookListHandlers,\n      onClick: handleListClick,\n    },\n    selected,\n  };\n};\n"],"names":["itemToString","defaultItemToString","selected","_a","value"],"mappings":"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"}
+{"version":3,"file":"useCombobox.js","sources":["../src/combo-box/useCombobox.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport {\n  ChangeEvent,\n  FocusEvent,\n  KeyboardEvent,\n  MouseEvent,\n  SyntheticEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { ListHookProps, ListHookResult, useList } from \"../list\";\nimport { DropdownHookResult, DropdownHookProps } from \"../dropdown\";\nimport {\n  CollectionItem,\n  itemToString as defaultItemToString,\n  SelectionChangeHandler,\n  SelectionStrategy,\n  SingleSelectionStrategy,\n} from \"../common-hooks\";\nimport { InputProps } from \"../input\";\n\nconst NULL_REF = { current: null };\nconst EnterOnly = [\"Enter\"];\n\nexport interface ComboboxHookProps<Item, Strategy extends SelectionStrategy>\n  extends Partial<Omit<DropdownHookProps, \"id\" | \"onKeyDown\">>,\n    Pick<InputProps, \"onBlur\" | \"onChange\" | \"onFocus\" | \"onSelect\">,\n    Omit<\n      ListHookProps<Item, Strategy>,\n      \"containerRef\" | \"defaultSelected\" | \"selected\" | \"onSelect\"\n    > {\n  InputProps?: InputProps;\n  allowFreeText?: boolean;\n  ariaLabel?: string;\n  defaultValue?: string;\n  id: string;\n  itemToString?: (item: Item) => string;\n  stringToItem?: (value?: string) => Item | null | undefined;\n  value?: string;\n}\n\nexport interface ComboboxHookResult<Item, Selection extends SelectionStrategy>\n  extends Pick<\n      ListHookResult<Item, Selection>,\n      | \"focusVisible\"\n      | \"highlightedIndex\"\n      | \"listControlProps\"\n      | \"listHandlers\"\n      | \"selected\"\n    >,\n    Partial<DropdownHookResult> {\n  inputProps: InputProps;\n  onOpenChange: (isOpen: boolean) => void;\n}\n\nexport const useCombobox = <\n  Item,\n  Selection extends SelectionStrategy = \"default\"\n>({\n  allowFreeText,\n  ariaLabel,\n  collectionHook,\n  defaultIsOpen,\n  defaultValue,\n  disabled,\n  onBlur,\n  onFocus,\n  onChange,\n  onSelect,\n  id,\n  isOpen: isOpenProp,\n  itemToString = defaultItemToString as (item: Item) => string,\n  onOpenChange,\n  onSelectionChange,\n  selectionStrategy,\n  stringToItem,\n  value: valueProp,\n  InputProps: inputProps = {\n    onBlur,\n    onFocus,\n    onChange,\n    onSelect,\n  },\n}: ComboboxHookProps<Item, Selection>): ComboboxHookResult<Item, Selection> => {\n  type selectedCollectionType = Selection extends SingleSelectionStrategy\n    ? CollectionItem<Item> | null\n    : CollectionItem<Item>[];\n  const isMultiSelect =\n    selectionStrategy === \"multiple\" || selectionStrategy === \"extended\";\n\n  const selectedValue = collectionHook.stringToCollectionItem<Selection>(\n    valueProp ?? defaultValue ?? null\n  );\n\n  const {\n    data: indexPositions,\n    itemToCollectionItem,\n    setFilterPattern,\n    stringToCollectionItem,\n  } = collectionHook;\n  const setHighlightedIndexRef = useRef<null | ((i: number) => void)>(null);\n  const setSelectedRef = useRef<\n    null | ListHookResult<Item, Selection>[\"setSelected\"]\n  >(null);\n  // Input select events are used to identify user navigation within the input text.\n  // The initial select event fired on focus is an exception that we ignore.\n  const ignoreSelectOnFocus = useRef(true);\n  const selectedRef = useRef<selectedCollectionType>(selectedValue);\n\n  const [isOpen, setIsOpen] = useControlled<boolean>({\n    controlled: isOpenProp,\n    default: defaultIsOpen ?? false,\n    name: \"useDropdownList\",\n  });\n\n  const [value, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue ?? \"\",\n    name: \"ComboBox\",\n    state: \"value\",\n  });\n\n  // TODO repeated in ComboboxNext, move to utils\n  const collectionItemsToItem = useCallback(\n    (\n      sel: CollectionItem<Item> | null | CollectionItem<Item>[]\n    ): Selection extends SingleSelectionStrategy ? Item | null : Item[] => {\n      type returnType = Selection extends SingleSelectionStrategy\n        ? Item | null\n        : Item[];\n      if (Array.isArray(sel)) {\n        return sel.map((i) => i.value) as returnType;\n      } else if (sel) {\n        return sel.value as returnType;\n      } else {\n        return sel as returnType;\n      }\n    },\n    []\n  );\n\n  const [disableAriaActiveDescendant, setDisableAriaActiveDescendant] =\n    useState(true);\n  const [quickSelection, setQuickSelection] = useState(false);\n\n  const highlightSelectedItem = useCallback(\n    (selected: selectedCollectionType = selectedRef.current) => {\n      if (Array.isArray(selected)) {\n        console.log(\"TODO multi selection\");\n      } else if (selected == null) {\n        setHighlightedIndexRef.current?.(-1);\n      } else {\n        const indexOfSelectedItem = indexPositions.indexOf(selected);\n        setHighlightedIndexRef.current?.(indexOfSelectedItem);\n      }\n    },\n    [indexPositions]\n  );\n\n  const setTextValue = useCallback(\n    (value: string) => {\n      setValue(value);\n      setFilterPattern(value === \"\" ? undefined : value);\n    },\n    [setFilterPattern, setValue]\n  );\n\n  const reconcileInput = useCallback(\n    (selected: selectedCollectionType = selectedRef.current) => {\n      let value = \"\";\n      if (Array.isArray(selected)) {\n        console.log(\"TODO multi selection\");\n      } else if (selected != null && selected.value !== null) {\n        value = itemToString(selected.value);\n      }\n      setTextValue(value);\n      if (value === \"\") {\n        setHighlightedIndexRef.current?.(-1);\n      } else {\n        highlightSelectedItem(selected);\n      }\n    },\n    [highlightSelectedItem, itemToString, setTextValue]\n  );\n\n  const applySelection = useCallback(\n    (evt: any, selected: selectedCollectionType) => {\n      if (!isMultiSelect) {\n        setIsOpen(false);\n      }\n      selectedRef.current = selected;\n      reconcileInput(selected);\n      onSelectionChange?.(evt, collectionItemsToItem(selected ?? null));\n    },\n    [\n      collectionItemsToItem,\n      isMultiSelect,\n      onSelectionChange,\n      reconcileInput,\n      setIsOpen,\n    ]\n  );\n\n  const handleSelectionChange = useCallback<\n    SelectionChangeHandler<Item, Selection>\n  >(\n    (evt, selected) => {\n      if (!isMultiSelect) {\n        const selectedCollectionItem = itemToCollectionItem<\n          Selection,\n          typeof selected\n        >(selected);\n        applySelection(evt, selectedCollectionItem);\n      }\n    },\n    [applySelection, isMultiSelect, itemToCollectionItem]\n  );\n\n  const handleFirstItemSelection = useCallback(\n    (evt: KeyboardEvent | ChangeEvent) => {\n      if (\n        !allowFreeText &&\n        (evt as KeyboardEvent).key === \"Enter\" &&\n        quickSelection\n      ) {\n        const [firstItem] = indexPositions;\n        applySelection(evt, firstItem as selectedCollectionType);\n      }\n    },\n    [allowFreeText, applySelection, indexPositions, quickSelection]\n  );\n\n  const handleInputKeyDown = useCallback(\n    (evt: KeyboardEvent) => {\n      if (\"Escape\" === evt.key) {\n        if (allowFreeText) {\n          setTextValue(\"\");\n        } else {\n          reconcileInput();\n        }\n      } else if (\"Tab\" === evt.key) {\n        if (!allowFreeText) {\n          reconcileInput();\n        }\n      }\n\n      handleFirstItemSelection(evt);\n\n      // if (inputProps.onKeyDown) {\n      //   inputProps.onKeyDown(event as KeyboardEvent<HTMLInputElement>);\n      // }\n    },\n    [allowFreeText, handleFirstItemSelection, reconcileInput, setTextValue]\n  );\n\n  const handleKeyboardNavigation = useCallback(() => {\n    setDisableAriaActiveDescendant(false);\n  }, []);\n\n  const {\n    focusVisible,\n    setHighlightedIndex,\n    highlightedIndex,\n    listControlProps,\n    listHandlers: listHookListHandlers,\n    selected,\n    setSelected,\n  } = useList<Item, Selection>({\n    collectionHook,\n    defaultHighlightedIndex: -1,\n    disableAriaActiveDescendant,\n    disableHighlightOnFocus: true,\n    disableTypeToSelect: true,\n    onKeyboardNavigation: handleKeyboardNavigation,\n    onKeyDown: handleInputKeyDown,\n    onSelectionChange: handleSelectionChange,\n    containerRef: NULL_REF,\n    // we are controlling selection from a ref value - is this right ?\n    selected: selectedRef.current,\n    selectionKeys: EnterOnly,\n    selectionStrategy,\n    tabToSelect: !isMultiSelect,\n  });\n\n  setHighlightedIndexRef.current = setHighlightedIndex;\n  setSelectedRef.current = setSelected;\n  // selectedRef.current = selected;\n\n  const handleOpenChange = useCallback(\n    (open: boolean) => {\n      setIsOpen(open);\n      if (!open) {\n        setQuickSelection(false);\n      }\n      onOpenChange?.(open);\n    },\n    [onOpenChange, setIsOpen]\n  );\n\n  const { onClick: listHandlersOnClick } = listHookListHandlers;\n  const handleListClick = useCallback(\n    (evt: MouseEvent) => {\n      //TODO use ref\n      document.getElementById(`${id}-input`)?.focus();\n      // const inputEl = inputRef.current;\n      console.log(\"handle list click\");\n      listHandlersOnClick?.(evt);\n      // if (inputEl != null) {\n      //   inputEl.focus();\n      // }\n\n      // if (restListProps.onClick) {\n      //   restListProps.onClick(event as MouseEvent<HTMLDivElement>);\n      // }\n\n      // notifyPopper(event);\n    },\n    [id, listHandlersOnClick]\n  );\n\n  const handleInputChange = useCallback(\n    (evt: ChangeEvent<HTMLInputElement>) => {\n      const newValue = evt.target.value;\n      setValue(newValue);\n\n      if (newValue && newValue.trim().length) {\n        setFilterPattern(newValue);\n      } else {\n        setFilterPattern(undefined);\n        selectedRef.current = null as selectedCollectionType;\n        onSelectionChange?.(\n          evt,\n          null as Selection extends SingleSelectionStrategy\n            ? Item | null\n            : Item[]\n        );\n      }\n\n      setIsOpen(true);\n\n      setQuickSelection(newValue.length > 0 && !allowFreeText);\n\n      // if (inputProps.onChange) {\n      //   inputProps.onChange(event, \"\");\n      // }\n    },\n    [allowFreeText, onSelectionChange, setFilterPattern, setIsOpen, setValue]\n  );\n\n  const { onFocus: inputOnFocus } = inputProps;\n  const { onFocus: listOnFocus } = listControlProps;\n  const handleInputFocus = useCallback(\n    (evt: FocusEvent<HTMLInputElement>) => {\n      setDisableAriaActiveDescendant(false);\n      listOnFocus?.(evt);\n      inputOnFocus?.(evt);\n    },\n    [inputOnFocus, listOnFocus]\n  );\n\n  const listFocused = useCallback(\n    (evt: FocusEvent) => {\n      const element = evt.relatedTarget as HTMLElement;\n      return element?.id === `${id}-list`;\n      return true;\n    },\n    [id]\n  );\n\n  // When focus leaves a free text combo, check to see if the entered text is\n  // a valid selection, if so fire a change event\n  const selectInputValue = useCallback(\n    (evt: ChangeEvent) => {\n      const text = value.trim();\n      if (text) {\n        const selectedCollectionItem = stringToCollectionItem<\"default\">(\n          text\n        ) as selectedCollectionType;\n        if (selectedCollectionItem) {\n          if (Array.isArray(selectedCollectionItem)) {\n            // TODO multi select\n          } else if (selectedCollectionItem !== selected) {\n            setSelectedRef.current?.(selectedCollectionItem);\n            onSelectionChange?.(\n              evt,\n              selectedCollectionItem.value as Selection extends SingleSelectionStrategy\n                ? Item | null\n                : Item[]\n            );\n          }\n        } else if (stringToItem) {\n          const item = stringToItem(text);\n          if (item) {\n            console.log(\"we have a new item\");\n          }\n        }\n        // Hoiw do we check if string is Item\n      }\n    },\n    [onSelectionChange, selected, stringToItem, stringToCollectionItem, value]\n  );\n\n  const { onBlur: inputOnBlur } = inputProps;\n  const { onBlur: listOnBlur } = listControlProps;\n  const handleInputBlur = useCallback(\n    (evt: FocusEvent<HTMLInputElement>) => {\n      if (listFocused(evt)) {\n        // nothing doing\n      } else {\n        listOnBlur?.(evt);\n        inputOnBlur?.(evt);\n        if (allowFreeText) {\n          selectInputValue(evt as ChangeEvent);\n        } else {\n          reconcileInput();\n        }\n        setDisableAriaActiveDescendant(true);\n        ignoreSelectOnFocus.current = true;\n      }\n    },\n    [\n      allowFreeText,\n      listFocused,\n      inputOnBlur,\n      listOnBlur,\n      reconcileInput,\n      selectInputValue,\n    ]\n  );\n\n  const { onSelect: inputOnSelect } = inputProps;\n  const handleInputSelect = useCallback(\n    (event: SyntheticEvent<HTMLDivElement>) => {\n      if (ignoreSelectOnFocus.current) {\n        ignoreSelectOnFocus.current = false;\n      } else {\n        setDisableAriaActiveDescendant(true);\n      }\n      inputOnSelect?.(event);\n    },\n    [inputOnSelect]\n  );\n\n  // If we have selected item(s) and we filter down the list by typing,\n  // the position of selected items within the list may be changing.\n  // Relocate highlighted index to the selection whenever this happens,\n  // so if we resume keyboard navigation, navigation begins from the selected\n  // item.\n  useEffect(() => {\n    highlightSelectedItem();\n    // TODO may need to scrollIntoView\n    if (indexPositions.length === 0) {\n      setIsOpen(false);\n    }\n  }, [highlightSelectedItem, indexPositions.length, setIsOpen]);\n\n  // const activeDescendant: string | undefined = selectionChanged\n  //   ? \"\"\n  //   : undefined;\n\n  const mergedInputProps = {\n    ...inputProps.inputProps,\n    // \"aria-owns\": listId,\n    \"aria-label\": ariaLabel,\n  };\n\n  return {\n    focusVisible,\n    highlightedIndex,\n    isOpen,\n    onOpenChange: handleOpenChange,\n    inputProps: {\n      ...inputProps,\n      // \"aria-activedescendant\": activeDescendant,\n      id: `${id}-input`,\n      inputProps: mergedInputProps,\n      onChange: handleInputChange,\n      onSelect: handleInputSelect,\n      role: \"combobox\",\n      value,\n    },\n    // listControlProps,\n    listControlProps: {\n      ...listControlProps,\n      onBlur: handleInputBlur,\n      onFocus: handleInputFocus,\n    },\n    listHandlers: {\n      ...listHookListHandlers,\n      onClick: handleListClick,\n    },\n    selected,\n  };\n};\n"],"names":["itemToString","defaultItemToString","selected","_a","value"],"mappings":"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"}

package/dist-es/packages/lab/src/combo-box-deprecated/ComboBoxDeprecated.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { makePrefixer, useId, useForkRef } from '@salt-ds/core';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef, useRef } from 'react';
 import { DefaultComboBox } from './internal/DefaultComboBox.js';
 import { MultiSelectComboBox } from './internal/MultiSelectComboBox.js';
@@ -59,7 +59,7 @@ const ComboBoxDeprecated = forwardRef(function ComboBox(props, ref) {
   );
   const ComboBoxComponent = isMultiSelect ? MultiSelectComboBox : DefaultComboBox;
   return /* @__PURE__ */ jsx("div", {
-    className: cx(
+    className: clsx(
       withBaseName(),
       {
         [withBaseName("disabled")]: disabled,
@@ -83,7 +83,7 @@ const ComboBoxDeprecated = forwardRef(function ComboBox(props, ref) {
         listWidth,
         initialSelectedItem,
         selectedItem,
-        "aria-label": cx(ariaLabel),
+        "aria-label": clsx(ariaLabel),
         "aria-labelledby": ariaLabelledBy,
         "aria-required": ariaRequired
       }

package/dist-es/packages/lab/src/combo-box-deprecated/ComboBoxDeprecated.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBoxDeprecated.js","sources":["../src/combo-box-deprecated/ComboBoxDeprecated.tsx"],"sourcesContent":["import { makePrefixer, useForkRef, useId } from \"@salt-ds/core\";\nimport classnames from \"classnames\";\nimport { ComponentType, forwardRef, Ref, useRef } from \"react\";\n\nimport {\n  DefaultComboBox,\n  DefaultComboBoxProps,\n} from \"./internal/DefaultComboBox\";\nimport {\n  MultiSelectComboBox,\n  MultiSelectComboBoxProps,\n} from \"./internal/MultiSelectComboBox\";\nimport { useWidth } from \"../list-deprecated/internal/useWidth\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport \"./ComboBox.css\";\n\nconst withBaseName = makePrefixer(\"saltComboBox\");\n\nfunction getMultiSelect<Item>({\n  multiSelect,\n  initialSelectedItem,\n  selectedItem,\n}: {\n  multiSelect?: boolean;\n  initialSelectedItem?: Item | Item[];\n  selectedItem?: Item | Item[];\n}) {\n  return (\n    multiSelect ||\n    Array.isArray(initialSelectedItem) ||\n    Array.isArray(selectedItem)\n  );\n}\n\nconst validateProps = ({\n  isMultiSelect,\n  delimiter,\n}: {\n  isMultiSelect: boolean;\n  delimiter?: string | string[];\n}) => {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!isMultiSelect && delimiter) {\n      console.warn(\"Delimiter can only be used for a multi-select combo-box.\");\n    }\n  }\n};\n\nexport type ComboBoxDeprecatedProps = Omit<\n  DefaultComboBoxProps<any> | MultiSelectComboBoxProps<any>,\n  \"rootRef\"\n> & {\n  rootRef?: Ref<HTMLElement>;\n  delimiter?: string | string[];\n};\n\nexport const ComboBoxDeprecated = forwardRef<\n  HTMLDivElement,\n  ComboBoxDeprecatedProps\n>(function ComboBox(props, ref) {\n  const {\n    inFormField,\n    a11yProps: {\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-required\": ariaRequired,\n      disabled: formFieldDisabled,\n    } = {},\n  } = useFormFieldProps();\n\n  const { current: isMultiSelect } = useRef(getMultiSelect(props));\n  validateProps({ isMultiSelect, ...props });\n\n  const {\n    inputRef,\n    listRef,\n    className,\n    disabled = formFieldDisabled,\n    source = [],\n    multiSelect,\n    initialSelectedItem,\n    selectedItem,\n    width,\n    listWidth,\n    id: idProp,\n    \"aria-label\": ariaLabel,\n    ...restProps\n  } = props;\n\n  const id = useId(idProp);\n  const [rootRef, rootWidth] = useWidth<HTMLDivElement>(\n    width == null && listWidth == null\n  );\n\n  const ComboBoxComponent = (\n    isMultiSelect ? MultiSelectComboBox : DefaultComboBox\n  ) as ComponentType<ComboBoxDeprecatedProps>;\n\n  return (\n    <div\n      className={classnames(\n        withBaseName(),\n        {\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(`field`)]: inFormField,\n        },\n        className\n      )}\n      id={id}\n      ref={useForkRef(ref, rootRef)}\n      style={{ width }}\n    >\n      <ComboBoxComponent\n        {...{\n          ...restProps,\n          id,\n          source,\n          disabled,\n          rootRef,\n          rootWidth,\n          inputRef,\n          listRef,\n          listWidth,\n          initialSelectedItem,\n          selectedItem,\n          \"aria-label\": classnames(ariaLabel),\n          \"aria-labelledby\": ariaLabelledBy,\n          \"aria-required\": ariaRequired,\n        }}\n      />\n    </div>\n  );\n});\n"],"names":["classnames"],"mappings":"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"}
+{"version":3,"file":"ComboBoxDeprecated.js","sources":["../src/combo-box-deprecated/ComboBoxDeprecated.tsx"],"sourcesContent":["import { makePrefixer, useForkRef, useId } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { ComponentType, forwardRef, Ref, useRef } from \"react\";\n\nimport {\n  DefaultComboBox,\n  DefaultComboBoxProps,\n} from \"./internal/DefaultComboBox\";\nimport {\n  MultiSelectComboBox,\n  MultiSelectComboBoxProps,\n} from \"./internal/MultiSelectComboBox\";\nimport { useWidth } from \"../list-deprecated/internal/useWidth\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport \"./ComboBox.css\";\n\nconst withBaseName = makePrefixer(\"saltComboBox\");\n\nfunction getMultiSelect<Item>({\n  multiSelect,\n  initialSelectedItem,\n  selectedItem,\n}: {\n  multiSelect?: boolean;\n  initialSelectedItem?: Item | Item[];\n  selectedItem?: Item | Item[];\n}) {\n  return (\n    multiSelect ||\n    Array.isArray(initialSelectedItem) ||\n    Array.isArray(selectedItem)\n  );\n}\n\nconst validateProps = ({\n  isMultiSelect,\n  delimiter,\n}: {\n  isMultiSelect: boolean;\n  delimiter?: string | string[];\n}) => {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!isMultiSelect && delimiter) {\n      console.warn(\"Delimiter can only be used for a multi-select combo-box.\");\n    }\n  }\n};\n\nexport type ComboBoxDeprecatedProps = Omit<\n  DefaultComboBoxProps<any> | MultiSelectComboBoxProps<any>,\n  \"rootRef\"\n> & {\n  rootRef?: Ref<HTMLElement>;\n  delimiter?: string | string[];\n};\n\nexport const ComboBoxDeprecated = forwardRef<\n  HTMLDivElement,\n  ComboBoxDeprecatedProps\n>(function ComboBox(props, ref) {\n  const {\n    inFormField,\n    a11yProps: {\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-required\": ariaRequired,\n      disabled: formFieldDisabled,\n    } = {},\n  } = useFormFieldProps();\n\n  const { current: isMultiSelect } = useRef(getMultiSelect(props));\n  validateProps({ isMultiSelect, ...props });\n\n  const {\n    inputRef,\n    listRef,\n    className,\n    disabled = formFieldDisabled,\n    source = [],\n    multiSelect,\n    initialSelectedItem,\n    selectedItem,\n    width,\n    listWidth,\n    id: idProp,\n    \"aria-label\": ariaLabel,\n    ...restProps\n  } = props;\n\n  const id = useId(idProp);\n  const [rootRef, rootWidth] = useWidth<HTMLDivElement>(\n    width == null && listWidth == null\n  );\n\n  const ComboBoxComponent = (\n    isMultiSelect ? MultiSelectComboBox : DefaultComboBox\n  ) as ComponentType<ComboBoxDeprecatedProps>;\n\n  return (\n    <div\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(`field`)]: inFormField,\n        },\n        className\n      )}\n      id={id}\n      ref={useForkRef(ref, rootRef)}\n      style={{ width }}\n    >\n      <ComboBoxComponent\n        {...{\n          ...restProps,\n          id,\n          source,\n          disabled,\n          rootRef,\n          rootWidth,\n          inputRef,\n          listRef,\n          listWidth,\n          initialSelectedItem,\n          selectedItem,\n          \"aria-label\": clsx(ariaLabel),\n          \"aria-labelledby\": ariaLabelledBy,\n          \"aria-required\": ariaRequired,\n        }}\n      />\n    </div>\n  );\n});\n"],"names":[],"mappings":"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"}

package/dist-es/packages/lab/src/combo-box-deprecated/filterHelpers.js

@@ -1,6 +1,7 @@
 import { escapeRegExp } from '../utils/escapeRegExp.js';
 import 'react';
 import '@salt-ds/core';
+import '../utils/useFloatingUI.js';
 
 const leftTrim = (value) => value ? value.replace(/^\s+/g, "") : value;
 const getDefaultFilterRegex = (value) => new RegExp(`(${escapeRegExp(leftTrim(value))})`, "gi");

package/dist-es/packages/lab/src/combo-box-deprecated/filterHelpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"filterHelpers.js","sources":["../src/combo-box-deprecated/filterHelpers.ts"],"sourcesContent":["import { escapeRegExp } from \"../utils\";\n\nexport type GetFilterRegex = (inputValue: string) => RegExp;\n\nconst leftTrim = (value: string) =>\n  value ? value.replace(/^\\s+/g, \"\") : value;\n\nexport const getDefaultFilterRegex: GetFilterRegex = (value) =>\n  new RegExp(`(${escapeRegExp(leftTrim(value))})`, \"gi\");\n\nexport const getDefaultFilter =\n  (inputValue = \"\", getFilterRegex: GetFilterRegex = getDefaultFilterRegex) =>\n  (itemValue = \"\"): boolean =>\n    Boolean(itemValue.length) &&\n    Boolean(inputValue.length) &&\n    itemValue.match(getFilterRegex(inputValue)) !== null;\n"],"names":[],"mappings":";;;;AAIA,MAAM,QAAA,GAAW,CAAC,KAChB,KAAA,KAAA,GAAQ,MAAM,OAAQ,CAAA,OAAA,EAAS,EAAE,CAAI,GAAA,KAAA,CAAA;AAE1B,MAAA,qBAAA,GAAwC,CAAC,KAAA,KACpD,IAAI,MAAA,CAAO,CAAI,CAAA,EAAA,YAAA,CAAa,QAAS,CAAA,KAAK,CAAC,CAAA,CAAA,CAAA,CAAA,EAAM,IAAI,EAAA;AAE1C,MAAA,gBAAA,GACX,CAAC,UAAa,GAAA,EAAA,EAAI,iBAAiC,qBACnD,KAAA,CAAC,SAAY,GAAA,EAAA,KACX,OAAQ,CAAA,SAAA,CAAU,MAAM,CACxB,IAAA,OAAA,CAAQ,WAAW,MAAM,CAAA,IACzB,UAAU,KAAM,CAAA,cAAA,CAAe,UAAU,CAAC,CAAM,KAAA;;;;"}
+{"version":3,"file":"filterHelpers.js","sources":["../src/combo-box-deprecated/filterHelpers.ts"],"sourcesContent":["import { escapeRegExp } from \"../utils\";\n\nexport type GetFilterRegex = (inputValue: string) => RegExp;\n\nconst leftTrim = (value: string) =>\n  value ? value.replace(/^\\s+/g, \"\") : value;\n\nexport const getDefaultFilterRegex: GetFilterRegex = (value) =>\n  new RegExp(`(${escapeRegExp(leftTrim(value))})`, \"gi\");\n\nexport const getDefaultFilter =\n  (inputValue = \"\", getFilterRegex: GetFilterRegex = getDefaultFilterRegex) =>\n  (itemValue = \"\"): boolean =>\n    Boolean(itemValue.length) &&\n    Boolean(inputValue.length) &&\n    itemValue.match(getFilterRegex(inputValue)) !== null;\n"],"names":[],"mappings":";;;;;AAIA,MAAM,QAAA,GAAW,CAAC,KAChB,KAAA,KAAA,GAAQ,MAAM,OAAQ,CAAA,OAAA,EAAS,EAAE,CAAI,GAAA,KAAA,CAAA;AAE1B,MAAA,qBAAA,GAAwC,CAAC,KAAA,KACpD,IAAI,MAAA,CAAO,CAAI,CAAA,EAAA,YAAA,CAAa,QAAS,CAAA,KAAK,CAAC,CAAA,CAAA,CAAA,CAAA,EAAM,IAAI,EAAA;AAE1C,MAAA,gBAAA,GACX,CAAC,UAAa,GAAA,EAAA,EAAI,iBAAiC,qBACnD,KAAA,CAAC,SAAY,GAAA,EAAA,KACX,OAAQ,CAAA,SAAA,CAAU,MAAM,CACxB,IAAA,OAAA,CAAQ,WAAW,MAAM,CAAA,IACzB,UAAU,KAAM,CAAA,cAAA,CAAe,UAAU,CAAC,CAAM,KAAA;;;;"}