npm - @salt-ds/lab - Versions diffs - 1.0.0-alpha.48 → 1.0.0-alpha.49 - Mend

@salt-ds/lab 1.0.0-alpha.48 → 1.0.0-alpha.49

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1219) hide show

package/dist-es/color-chooser/ColorPicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPicker.js","sources":["../src/color-chooser/ColorPicker.tsx"],"sourcesContent":["import { ~~ChangeEvent~~ } from \"~~react~~\";\nimport { ~~ColorResult,~~ ~~SketchPicker~~ } 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 { ~~useWindow~~ } from \"@salt-ds/~~window~~\";\nimport { ~~useComponentCssInjection~~ } from \"@salt-ds/~~styles~~\";\n\nimport colorPickerCss from \"./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 targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-color-picker\",\n css: colorPickerCss,\n window: targetWindow,\n });\n\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 [withBaseName(\"rootDisabledAlpha\")]: disableAlphaChooser,\n [withBaseName(\"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":["colorPickerCss","alpha","_a"],"mappings":"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"}
1	+ {"version":3,"file":"ColorPicker.js","sources":["../src/color-chooser/ColorPicker.tsx"],"sourcesContent":["import { Button, makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport type { ChangeEvent } from \"react\";\nimport { type ColorResult, SketchPicker } from \"react-color\";\nimport { Color, type RGBAValue } from \"./Color\";\nimport { hexValueWithoutAlpha } from \"./ColorHelpers\";\nimport { HexInput } from \"./HexInput\";\nimport { RGBAInput } from \"./RGBAInput\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport colorPickerCss from \"./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 targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-color-picker\",\n css: colorPickerCss,\n window: targetWindow,\n });\n\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 [withBaseName(\"rootDisabledAlpha\")]: disableAlphaChooser,\n [withBaseName(\"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":["colorPickerCss","alpha","_a"],"mappings":";;;;;;;;;;;;AAcA,MAAM,YAAA,GAAe,aAAa,wBAAwB,CAAA,CAAA;AAcnD,MAAM,cAAc,CAAC;AAAA,EAC1B,KAAQ,GAAA,CAAA;AAAA,EACR,mBAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,cAAA;AACF,CAAqC,KAAA;AAlCrC,EAAA,IAAA,EAAA,CAAA;AAmCE,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,SAAA,GAAA,CACJ,EAAO,GAAA,KAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,CAAA,IAAA,KAAP,IAAe,GAAA,EAAA,GAAA,KAAA,CAAM,iBAAiB,CAAG,EAAA,CAAA,EAAG,CAAG,EAAA,KAAK,CAAE,CAAA,IAAA,CAAA;AACxD,EAAM,MAAA,QAAA,GAAW,sBAAsB,KAAQ,GAAA,MAAA,CAAA;AAE/C,EAAM,MAAA,WAAA,GAAc,CAAC,QAAA,EAAmB,CAA0B,KAAA;AAChE,IAAM,MAAA,QAAA,GAAW,KAAM,CAAA,gBAAA,CAAiB,QAAQ,CAAA,CAAA;AAChD,IAAS,QAAA,CAAA,QAAA,EAAU,OAAO,CAAC,CAAA,CAAA;AAAA,GAC7B,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,IAAA,EAAiB,CAA0B,KAAA;AAC9D,IAAM,MAAA,QAAA,GAAW,KAAM,CAAA,gBAAA,CAAiB,IAAK,CAAA,CAAA,EAAG,KAAK,CAAG,EAAA,IAAA,CAAK,CAAG,EAAA,IAAA,CAAK,CAAC,CAAA,CAAA;AACtE,IAAS,QAAA,CAAA,QAAA,EAAU,OAAO,CAAC,CAAA,CAAA;AAAA,GAC7B,CAAA;AAEA,EAAM,MAAA,aAAA,GAAgB,CAACC,MAAAA,EAAe,CAA0B,KAAA;AAC9D,IAAA,MAAM,WAAW,KAAM,CAAA,gBAAA;AAAA,MACrB,SAAU,CAAA,CAAA;AAAA,MACV,SAAU,CAAA,CAAA;AAAA,MACV,SAAU,CAAA,CAAA;AAAA,MACV,KAAK,GAAI,CAAA,CAAA,EAAG,KAAK,GAAIA,CAAAA,MAAAA,EAAO,CAAC,CAAC,CAAA;AAAA,KAChC,CAAA;AACA,IAAS,QAAA,CAAA,QAAA,EAAU,OAAO,CAAC,CAAA,CAAA;AAAA,GAC7B,CAAA;AAEA,EAAM,MAAA,oBAAA,GAAuB,CAC3B,WAAA,EACA,CACS,KAAA;AArEb,IAAAC,IAAAA,GAAAA,CAAAA;AAsEI,IAAA,MAAM,WAAW,KAAM,CAAA,gBAAA;AAAA,MACrB,YAAY,GAAI,CAAA,CAAA;AAAA,MAChB,YAAY,GAAI,CAAA,CAAA;AAAA,MAChB,YAAY,GAAI,CAAA,CAAA;AAAA,MAAA,CAChBA,GAAA,GAAA,WAAA,CAAY,GAAI,CAAA,CAAA,KAAhB,OAAAA,GAAqB,GAAA,KAAA;AAAA,KACvB,CAAA;AACA,IAAS,QAAA,CAAA,QAAA,EAAU,OAAO,CAAC,CAAA,CAAA;AAAA,GAC7B,CAAA;AAEA,EAAA,MAAM,UAAU,MAAY;AAC1B,IAAA,QAAA,CAAS,OAAO,IAAI,CAAA,CAAA;AACpB,IAAe,cAAA,EAAA,CAAA;AAAA,GACjB,CAAA;AAEA,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IAAI,aAAY,EAAA,cAAA;AAAA,IAAe,SAAA,EAAW,IAAK,CAAA,YAAA,EAAc,CAAA;AAAA,IAE5D,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,YAAA,EAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,oBAAoB,CAAG,EAAA;AAAA,UAClD,CAAC,YAAa,CAAA,mBAAmB,CAAI,GAAA,mBAAA;AAAA,UACrC,CAAC,YAAA,CAAa,MAAM,CAAA,GAAI,CAAC,mBAAA;AAAA,SAC1B,CAAA;AAAA,QACD,KAAO,EAAA,SAAA;AAAA,QACP,QAAU,EAAA,oBAAA;AAAA,QACV,cAAc,EAAC;AAAA,QACf,YAAc,EAAA,mBAAA;AAAA,OAChB,CAAA;AAAA,sBACC,IAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,gBAAgB,CAAC,CAAA;AAAA,QACjD,QAAA,EAAA;AAAA,0BAAC,IAAA,CAAA,KAAA,EAAA;AAAA,YAAI,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,WAAW,CAAC,CAAA;AAAA,YAC5C,QAAA,EAAA;AAAA,8BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,gBAAK,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,kBAAkB,CAAC,CAAA;AAAA,gBAAG,QAAA,EAAA,KAAA;AAAA,eAAG,CAAA;AAAA,8BAC3D,GAAA,CAAA,QAAA,EAAA;AAAA,gBACC,UACE,mBACI,GAAA,oBAAA,CAAqB,KAAO,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAG,IAC/B,KAAO,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA;AAAA,gBAEb,mBAAA;AAAA,gBACA,QAAU,EAAA,WAAA;AAAA,eACZ,CAAA;AAAA,8BACC,GAAA,CAAA,SAAA,EAAA;AAAA,gBACC,mBAAA;AAAA,gBACA,QAAA;AAAA,gBACA,SAAA;AAAA,gBACA,aAAA;AAAA,gBACA,WAAA;AAAA,eACF,CAAA;AAAA,aAAA;AAAA,WACF,CAAA;AAAA,0BACC,GAAA,CAAA,KAAA,EAAA;AAAA,YAAI,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,gBAAgB,CAAC,CAAA;AAAA,YACjD,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,cAAO,aAAY,EAAA,cAAA;AAAA,cAAe,OAAQ,EAAA,KAAA;AAAA,cAAM,OAAS,EAAA,OAAA;AAAA,cAAS,QAAA,EAAA,OAAA;AAAA,aAEnE,CAAA;AAAA,WACF,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/color-chooser/DictTabs.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from 'clsx';
 import { makePrefixer } from '@salt-ds/core';
+import { clsx } from 'clsx';
 import '../tabs/TabActivationIndicator.js';
 import { Tabstrip } from '../tabs/Tabstrip.js';
 import { Tab } from '../tabs/Tab.js';

package/dist-es/color-chooser/DictTabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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;;;;"}
1	+ {"version":3,"file":"DictTabs.js","sources":["../src/color-chooser/DictTabs.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { Tab, Tabstrip, type TabstripProps } from \"../tabs\";\nimport type { ColorPicker, ColorPickerProps } from \"./ColorPicker\";\nimport type { 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/color-chooser/GetColorPalettes.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GetColorPalettes.js","sources":["../src/color-chooser/GetColorPalettes.ts"],"sourcesContent":["import { saltColorMap } from \"./colorMap\";\n\nexport function makePalette(\n colorScheme: string,\n saltColorOverrides?: Record<string, string>\n): string[] {\n //Doesn't matter which theme you use here as the color names are the same\n const colorNames = Array.from(\n Object.keys(saltColorOverrides ?? saltColorMap)\n );\n\n const colorArray: string[] = [];\n for (const colorName of colorNames) {\n if (colorName.includes(colorScheme) && !(colorName === colorScheme)) {\n colorArray.push(\n saltColorOverrides\n ? saltColorOverrides[colorName]\n : saltColorMap[colorName]\n );\n }\n }\n return colorArray;\n}\n\nconst bluePalette = (saltColorOverrides?: Record<string, string>) =>\n makePalette(\"blue\", saltColorOverrides);\nconst greenPalette = (saltColorOverrides?: Record<string, string>) =>\n makePalette(\"green\", saltColorOverrides);\nconst redPalette = (saltColorOverrides?: Record<string, string>) =>\n makePalette(\"red\", saltColorOverrides);\nconst orangePalette = (saltColorOverrides?: Record<string, string>) =>\n makePalette(\"orange\", saltColorOverrides);\nconst tealPalette = (saltColorOverrides?: Record<string, string>) =>\n makePalette(\"teal\", saltColorOverrides);\nconst purplePalette = (saltColorOverrides?: Record<string, string>) =>\n makePalette(\"purple\", saltColorOverrides);\nconst grayPalette = (saltColorOverrides?: Record<string, string>) =>\n makePalette(\"gray\", saltColorOverrides);\n\nexport function getColorPalettes(\n saltColorOverrides?: Record<string, string>\n): string[][] {\n return [\n bluePalette(saltColorOverrides).slice(0, 7),\n bluePalette(saltColorOverrides).slice(7, 14),\n greenPalette(saltColorOverrides).slice(0, 7),\n greenPalette(saltColorOverrides).slice(7, 14),\n tealPalette(saltColorOverrides).slice(0, 7),\n tealPalette(saltColorOverrides).slice(7, 14),\n orangePalette(saltColorOverrides).slice(0, 7),\n orangePalette(saltColorOverrides).slice(7, 14),\n redPalette(saltColorOverrides).slice(0, 7),\n redPalette(saltColorOverrides).slice(7, 14),\n purplePalette(saltColorOverrides).slice(0, 7),\n purplePalette(saltColorOverrides).slice(7, 14),\n grayPalette(saltColorOverrides).slice(0, 7),\n grayPalette(saltColorOverrides).slice(7, 14),\n [\n saltColorOverrides\n ? saltColorOverrides.saltwhite\n ? saltColorOverrides.saltwhite\n : \"rgb(255, 255, 255)\"\n : saltColorMap.saltwhite,\n ...grayPalette(saltColorOverrides).slice(14, 18),\n saltColorOverrides\n ? saltColorOverrides.saltblack\n ? saltColorOverrides.saltblack\n : \"rgb(0, 0, 0)\"\n : saltColorMap.saltblack,\n \"rgba(0, 0, 0, 0)\",\n ],\n ];\n}\n"],"names":[],"mappings":";;AAEgB,SAAA,WAAA,CACd,aACA,kBACU,EAAA;AAEV,EAAA,MAAM,aAAa,KAAM,CAAA,IAAA;AAAA,IACvB,MAAA,CAAO,IAAK,CAAA,kBAAA,IAAA,IAAA,GAAA,kBAAA,GAAsB,YAAY,CAAA;AAAA,GAChD,CAAA;AAEA,EAAA,MAAM,aAAuB,EAAC,CAAA;AAC9B,EAAA,KAAA,MAAW,aAAa,UAAY,EAAA;AAClC,IAAA,IAAI,UAAU,QAAS,CAAA,WAAW,CAAK,IAAA,EAAE,cAAc,WAAc,CAAA,EAAA;AACnE,MAAW,UAAA,CAAA,IAAA;AAAA,QACT,kBAAA,GACI,kBAAmB,CAAA,SAAA,CAAA,GACnB,YAAa,CAAA,SAAA,CAAA;AAAA,OACnB,CAAA;AAAA,KACF;AAAA,GACF;AACA,EAAO,OAAA,UAAA,CAAA;AACT,CAAA;AAEA,MAAM,WAAc,GAAA,CAAC,kBACnB,KAAA,WAAA,CAAY,QAAQ,kBAAkB,CAAA,CAAA;AACxC,MAAM,YAAe,GAAA,CAAC,kBACpB,KAAA,WAAA,CAAY,SAAS,kBAAkB,CAAA,CAAA;AACzC,MAAM,UAAa,GAAA,CAAC,kBAClB,KAAA,WAAA,CAAY,OAAO,kBAAkB,CAAA,CAAA;AACvC,MAAM,aAAgB,GAAA,CAAC,kBACrB,KAAA,WAAA,CAAY,UAAU,kBAAkB,CAAA,CAAA;AAC1C,MAAM,WAAc,GAAA,CAAC,kBACnB,KAAA,WAAA,CAAY,QAAQ,kBAAkB,CAAA,CAAA;AACxC,MAAM,aAAgB,GAAA,CAAC,kBACrB,KAAA,WAAA,CAAY,UAAU,kBAAkB,CAAA,CAAA;AAC1C,MAAM,WAAc,GAAA,CAAC,kBACnB,KAAA,WAAA,CAAY,QAAQ,kBAAkB,CAAA,CAAA;AAEjC,SAAS,iBACd,kBACY,EAAA;AACZ,EAAO,OAAA;AAAA,IACL,WAAY,CAAA,kBAAkB,CAAE,CAAA,KAAA,CAAM,GAAG,CAAC,CAAA;AAAA,IAC1C,WAAY,CAAA,kBAAkB,CAAE,CAAA,KAAA,CAAM,GAAG,EAAE,CAAA;AAAA,IAC3C,YAAa,CAAA,kBAAkB,CAAE,CAAA,KAAA,CAAM,GAAG,CAAC,CAAA;AAAA,IAC3C,YAAa,CAAA,kBAAkB,CAAE,CAAA,KAAA,CAAM,GAAG,EAAE,CAAA;AAAA,IAC5C,WAAY,CAAA,kBAAkB,CAAE,CAAA,KAAA,CAAM,GAAG,CAAC,CAAA;AAAA,IAC1C,WAAY,CAAA,kBAAkB,CAAE,CAAA,KAAA,CAAM,GAAG,EAAE,CAAA;AAAA,IAC3C,aAAc,CAAA,kBAAkB,CAAE,CAAA,KAAA,CAAM,GAAG,CAAC,CAAA;AAAA,IAC5C,aAAc,CAAA,kBAAkB,CAAE,CAAA,KAAA,CAAM,GAAG,EAAE,CAAA;AAAA,IAC7C,UAAW,CAAA,kBAAkB,CAAE,CAAA,KAAA,CAAM,GAAG,CAAC,CAAA;AAAA,IACzC,UAAW,CAAA,kBAAkB,CAAE,CAAA,KAAA,CAAM,GAAG,EAAE,CAAA;AAAA,IAC1C,aAAc,CAAA,kBAAkB,CAAE,CAAA,KAAA,CAAM,GAAG,CAAC,CAAA;AAAA,IAC5C,aAAc,CAAA,kBAAkB,CAAE,CAAA,KAAA,CAAM,GAAG,EAAE,CAAA;AAAA,IAC7C,WAAY,CAAA,kBAAkB,CAAE,CAAA,KAAA,CAAM,GAAG,CAAC,CAAA;AAAA,IAC1C,WAAY,CAAA,kBAAkB,CAAE,CAAA,KAAA,CAAM,GAAG,EAAE,CAAA;AAAA,IAC3C;AAAA,MACE,qBACI,kBAAmB,CAAA,SAAA,GACjB,kBAAmB,CAAA,SAAA,GACnB,uBACF,YAAa,CAAA,SAAA;AAAA,MACjB,GAAG,WAAY,CAAA,kBAAkB,CAAE,CAAA,KAAA,CAAM,IAAI,EAAE,CAAA;AAAA,MAC/C,qBACI,kBAAmB,CAAA,SAAA,GACjB,kBAAmB,CAAA,SAAA,GACnB,iBACF,YAAa,CAAA,SAAA;AAAA,MACjB,kBAAA;AAAA,KACF;AAAA,GACF,CAAA;AACF;;;;"}
1	+ {"version":3,"file":"GetColorPalettes.js","sources":["../src/color-chooser/GetColorPalettes.ts"],"sourcesContent":["import { saltColorMap } from \"./colorMap\";\n\nexport function makePalette(\n colorScheme: string,\n saltColorOverrides?: Record<string, string>,\n): string[] {\n //Doesn't matter which theme you use here as the color names are the same\n const colorNames = Array.from(\n Object.keys(saltColorOverrides ?? saltColorMap),\n );\n\n const colorArray: string[] = [];\n for (const colorName of colorNames) {\n if (colorName.includes(colorScheme) && !(colorName === colorScheme)) {\n colorArray.push(\n saltColorOverrides\n ? saltColorOverrides[colorName]\n : saltColorMap[colorName],\n );\n }\n }\n return colorArray;\n}\n\nconst bluePalette = (saltColorOverrides?: Record<string, string>) =>\n makePalette(\"blue\", saltColorOverrides);\nconst greenPalette = (saltColorOverrides?: Record<string, string>) =>\n makePalette(\"green\", saltColorOverrides);\nconst redPalette = (saltColorOverrides?: Record<string, string>) =>\n makePalette(\"red\", saltColorOverrides);\nconst orangePalette = (saltColorOverrides?: Record<string, string>) =>\n makePalette(\"orange\", saltColorOverrides);\nconst tealPalette = (saltColorOverrides?: Record<string, string>) =>\n makePalette(\"teal\", saltColorOverrides);\nconst purplePalette = (saltColorOverrides?: Record<string, string>) =>\n makePalette(\"purple\", saltColorOverrides);\nconst grayPalette = (saltColorOverrides?: Record<string, string>) =>\n makePalette(\"gray\", saltColorOverrides);\n\nexport function getColorPalettes(\n saltColorOverrides?: Record<string, string>,\n): string[][] {\n return [\n bluePalette(saltColorOverrides).slice(0, 7),\n bluePalette(saltColorOverrides).slice(7, 14),\n greenPalette(saltColorOverrides).slice(0, 7),\n greenPalette(saltColorOverrides).slice(7, 14),\n tealPalette(saltColorOverrides).slice(0, 7),\n tealPalette(saltColorOverrides).slice(7, 14),\n orangePalette(saltColorOverrides).slice(0, 7),\n orangePalette(saltColorOverrides).slice(7, 14),\n redPalette(saltColorOverrides).slice(0, 7),\n redPalette(saltColorOverrides).slice(7, 14),\n purplePalette(saltColorOverrides).slice(0, 7),\n purplePalette(saltColorOverrides).slice(7, 14),\n grayPalette(saltColorOverrides).slice(0, 7),\n grayPalette(saltColorOverrides).slice(7, 14),\n [\n saltColorOverrides\n ? saltColorOverrides.saltwhite\n ? saltColorOverrides.saltwhite\n : \"rgb(255, 255, 255)\"\n : saltColorMap.saltwhite,\n ...grayPalette(saltColorOverrides).slice(14, 18),\n saltColorOverrides\n ? saltColorOverrides.saltblack\n ? saltColorOverrides.saltblack\n : \"rgb(0, 0, 0)\"\n : saltColorMap.saltblack,\n \"rgba(0, 0, 0, 0)\",\n ],\n ];\n}\n"],"names":[],"mappings":"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"}

package/dist-es/color-chooser/HexInput.js CHANGED Viewed

@@ -1,12 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { makePrefixer } from '@salt-ds/core';
 import { clsx } from 'clsx';
 import { useState, useEffect } from 'react';
-import { makePrefixer } from '@salt-ds/core';
-import { isValidHex } from './ColorHelpers.js';
 import { InputLegacy } from '../input-legacy/InputLegacy.js';
 import '../input-legacy/StaticInputAdornment.js';
-import { useWindow } from '@salt-ds/window';
+import { isValidHex } from './ColorHelpers.js';
 import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import css_248z from './HexInput.css.js';
 const withBaseName = makePrefixer("saltColorChooserHexInput");
@@ -30,10 +30,10 @@ const HexInput = ({
   }, [hexValue]);
   const handleHexInputChange = (event, value) => {
     if (disableAlphaChooser && value.length < 7) {
-      setHexInputValue("#" + value);
+      setHexInputValue(`#${value}`);
     }
     if (!disableAlphaChooser) {
-      setHexInputValue("#" + value);
+      setHexInputValue(`#${value}`);
     }
   };
   const handleKeyDownHex = (e) => {

package/dist-es/color-chooser/HexInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HexInput.js","sources":["../src/color-chooser/HexInput.tsx"],"sourcesContent":["import { ~~clsx~~ } from \"~~clsx~~\";\nimport { ~~useEffect,~~ ~~useState~~ } from \"~~react~~\";\nimport { ~~makePrefixer~~ } from \"~~@salt-ds/core~~\";\nimport { ~~isValidHex~~ } from \"~~./ColorHelpers~~\";\nimport { ~~InputLegacy~~ ~~as Input~~ } from \"~~../input-legacy~~\";\n\nimport { ~~useWindow~~ } from \"@salt-ds/~~window~~\";\nimport { ~~useComponentCssInjection~~ } from \"@salt-ds/~~styles~~\";\n\nimport hexInputCss from \"./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 targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-hex-input\",\n css: hexInputCss,\n window: targetWindow,\n });\n\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":["hexInputCss","Input"],"mappings":";;;;;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,0BAA0B,CAAA,CAAA;AAQrD,MAAM,WAAW,CAAC;AAAA,EACvB,QAAA;AAAA,EACA,mBAAA;AAAA,EACA,QAAA;AACF,CAAkC,KAAA;AAvBlC,EAAA,IAAA,EAAA,CAAA;AAwBE,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,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,CAAAC,WAAA,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;;;;"}
1	+ {"version":3,"file":"HexInput.js","sources":["../src/color-chooser/HexInput.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { useEffect, useState } from \"react\";\nimport { InputLegacy as Input } from \"../input-legacy\";\nimport { isValidHex } from \"./ColorHelpers\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport hexInputCss from \"./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 targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-hex-input\",\n css: hexInputCss,\n window: targetWindow,\n });\n\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":["hexInputCss","Input"],"mappings":";;;;;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,0BAA0B,CAAA,CAAA;AAQrD,MAAM,WAAW,CAAC;AAAA,EACvB,QAAA;AAAA,EACA,mBAAA;AAAA,EACA,QAAA;AACF,CAAkC,KAAA;AAvBlC,EAAA,IAAA,EAAA,CAAA;AAwBE,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,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,IAAI,KAAO,CAAA,CAAA,CAAA,CAAA;AAAA,KAC9B;AACA,IAAA,IAAI,CAAC,mBAAqB,EAAA;AACxB,MAAA,gBAAA,CAAiB,IAAI,KAAO,CAAA,CAAA,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,CAAAC,WAAA,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/color-chooser/RGBAInput.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { clsx } from 'clsx';
 import { makePrefixer } from '@salt-ds/core';
+import { clsx } from 'clsx';
 import { AlphaInput } from './AlphaInputField.js';
 import { RGBInput } from './RGBAInputField.js';
 import { useComponentCssInjection } from '@salt-ds/styles';
@@ -40,7 +40,7 @@ const RGBAInput = ({
             onSubmit: onSubmitRgb
           })
         ]
-      })),
+      }, value)),
       !disableAlphaChooser ? /* @__PURE__ */ jsxs("div", {
         className: clsx(withBaseName("rgbaInputDiv")),
         children: [
@@ -49,7 +49,7 @@ const RGBAInput = ({
             children: "A"
           }),
           /* @__PURE__ */ jsx(AlphaInput, {
-            alphaValue: parseFloat(rgbaValue.a.toFixed(2)),
+            alphaValue: Number.parseFloat(rgbaValue.a.toFixed(2)),
             onSubmit: onSubmitAlpha
           })
         ]

package/dist-es/color-chooser/RGBAInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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 { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { useWindow } from \"@salt-ds/window\";\n\nimport rgbaInputCss from \"./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 const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-rgba-input\",\n css: rgbaInputCss,\n window: targetWindow,\n });\n\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":["rgbaInputCss"],"mappings":";;;;;;;;;AAaA,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,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,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;;;;"}
1	+ {"version":3,"file":"RGBAInput.js","sources":["../src/color-chooser/RGBAInput.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport type { ChangeEvent } from \"react\";\nimport { AlphaInput } from \"./AlphaInputField\";\nimport type { RGBAValue } from \"./Color\";\nimport { RGBInput } from \"./RGBAInputField\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { useWindow } from \"@salt-ds/window\";\n\nimport rgbaInputCss from \"./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 const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-rgba-input\",\n css: rgbaInputCss,\n window: targetWindow,\n });\n\n return (\n <>\n <span className={clsx(withBaseName(\"textDivOverrides\"))}>{rgbaText}</span>\n {[\"r\", \"g\", \"b\"].map((value) => (\n <div className={withBaseName(\"rgbaInputDiv\")} key={value}>\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={Number.parseFloat(rgbaValue.a.toFixed(2))}\n onSubmit={onSubmitAlpha}\n />\n </div>\n ) : (\n <div className={clsx(withBaseName(\"alphaSpacerDiv\"))} />\n )}\n </>\n );\n};\n"],"names":["rgbaInputCss"],"mappings":";;;;;;;;;AAaA,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,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,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,OAAA,EARiD,KASnD,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,MAAO,CAAA,UAAA,CAAW,UAAU,CAAE,CAAA,OAAA,CAAQ,CAAC,CAAC,CAAA;AAAA,YACpD,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/color-chooser/RGBAInputField.js CHANGED Viewed

@@ -1,11 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
 import { makePrefixer } from '@salt-ds/core';
+import { useState, useEffect } from 'react';
 import { InputLegacy } from '../input-legacy/InputLegacy.js';
 import '../input-legacy/StaticInputAdornment.js';
-import css_248z from './RGBAInput.css.js';
-import { useWindow } from '@salt-ds/window';
 import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import css_248z from './RGBAInput.css.js';
 const withBaseName = makePrefixer("saltColorChooser");
 const RGBInput = ({
@@ -27,7 +27,7 @@ const RGBInput = ({
   }, [rgbaValue, value]);
   const handleRGBInputChange = (e, value2) => {
     let rgb;
-    rgb = parseInt(value2);
+    rgb = Number.parseInt(value2);
     if (value2.trim() === "" || Number.isNaN(rgb)) {
       rgb = "";
     }

package/dist-es/color-chooser/RGBAInputField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RGBAInputField.js","sources":["../src/color-chooser/RGBAInputField.tsx"],"sourcesContent":["import { ~~useEffect, useState } from \"react\";\nimport {~~ makePrefixer } from \"@salt-ds/core\";\nimport { ~~RGBAValue~~ } from \"~~./Color~~\";\nimport { InputLegacy as Input } from \"../input-legacy\";\n\nimport ~~rgbaInputCss~~ from \"./~~RGBAInput.css~~\";\nimport { ~~useWindow~~ } from \"@salt-ds/~~window~~\";\nimport { ~~useComponentCssInjection~~ } from \"@salt-ds/~~styles~~\";\n\nconst withBaseName = makePrefixer(\"saltColorChooser\");\ninterface RGBInputProps {\n rgbaValue: RGBAValue;\n value: \"r\" \| \"g\" \| \"b\";\n onSubmit: (rgb: RGBAValue, e?: React.ChangeEvent) => void;\n}\n\nexport const RGBInput = ({\n rgbaValue,\n value,\n onSubmit,\n}: RGBInputProps): JSX.Element => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-rgba-input\",\n css: rgbaInputCss,\n window: targetWindow,\n });\n\n const [rgbaInputValue, setRgbaInputValue] = useState<number \| string>(\n rgbaValue ? rgbaValue[value] : \"\"\n );\n\n useEffect(() => {\n setRgbaInputValue(rgbaValue ? rgbaValue[value] : \"\");\n }, [rgbaValue, value]);\n\n const handleRGBInputChange = (\n e: React.ChangeEvent<HTMLInputElement>,\n value: string\n ): void => {\n let rgb: string \| number;\n\n rgb = parseInt(value);\n\n if (value.trim() === \"\" \|\| Number.isNaN(rgb)) {\n rgb = \"\";\n }\n\n setRgbaInputValue(rgb);\n };\n\n const handleKeyDownRGB = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n if (e.key === \"Enter\") {\n const newRgb = { ...rgbaValue, [value]: e.currentTarget.value };\n const validatedRgb = {\n r: Math.max(0, Math.min(newRgb.r, 255)),\n g: Math.max(0, Math.min(newRgb.g, 255)),\n b: Math.max(0, Math.min(newRgb.b, 255)),\n a: newRgb.a,\n };\n\n onSubmit(validatedRgb);\n }\n };\n\n const handleOnBlurRGB = (e: React.FocusEvent<HTMLInputElement>): void => {\n const newRgb = { ...rgbaValue, [value]: e.target.value };\n const validatedRgb = {\n r: Math.max(0, Math.min(newRgb.r, 255)),\n g: Math.max(0, Math.min(newRgb.g, 255)),\n b: Math.max(0, Math.min(newRgb.b, 255)),\n a: newRgb.a,\n };\n\n onSubmit(validatedRgb, e);\n };\n\n return (\n <Input\n inputProps={{\n // @ts-ignore\n \"data-testid\": `${value}-input`,\n }}\n className={withBaseName(\"rgbaInput\")}\n value={rgbaInputValue.toString()}\n onChange={handleRGBInputChange}\n onBlur={handleOnBlurRGB}\n onKeyDown={handleKeyDownRGB}\n />\n );\n};\n"],"names":["rgbaInputCss","value","Input"],"mappings":";;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAO7C,MAAM,WAAW,CAAC;AAAA,EACvB,SAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AACF,CAAkC,KAAA;AAChC,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,CAAC,cAAgB,EAAA,iBAAiB,CAAI,GAAA,QAAA;AAAA,IAC1C,SAAA,GAAY,UAAU,KAAS,CAAA,GAAA,EAAA;AAAA,GACjC,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAkB,iBAAA,CAAA,SAAA,GAAY,SAAU,CAAA,KAAA,CAAA,GAAS,EAAE,CAAA,CAAA;AAAA,GAClD,EAAA,CAAC,SAAW,EAAA,KAAK,CAAC,CAAA,CAAA;AAErB,EAAM,MAAA,oBAAA,GAAuB,CAC3B,CAAA,EACAC,MACS,KAAA;AACT,IAAI,IAAA,GAAA,CAAA;AAEJ,~~IAAA~~,GAAA,~~GAAM~~,SAASA,MAAK,CAAA,CAAA;~~AAEpB~~,IAAA,IAAIA,OAAM,IAAK,EAAA,KAAM,MAAM,MAAO,CAAA,KAAA,CAAM,GAAG,CAAG,EAAA;AAC5C,MAAM,GAAA,GAAA,EAAA,CAAA;AAAA,KACR;AAEA,IAAA,iBAAA,CAAkB,GAAG,CAAA,CAAA;AAAA,GACvB,CAAA;AAEA,EAAM,MAAA,gBAAA,GAAmB,CAAC,CAAmD,KAAA;AAC3E,IAAI,IAAA,CAAA,CAAE,QAAQ,OAAS,EAAA;AACrB,MAAM,MAAA,MAAA,GAAS,EAAE,GAAG,SAAA,EAAW,CAAC,KAAQ,GAAA,CAAA,CAAE,cAAc,KAAM,EAAA,CAAA;AAC9D,MAAA,MAAM,YAAe,GAAA;AAAA,QACnB,CAAA,EAAG,KAAK,GAAI,CAAA,CAAA,EAAG,KAAK,GAAI,CAAA,MAAA,CAAO,CAAG,EAAA,GAAG,CAAC,CAAA;AAAA,QACtC,CAAA,EAAG,KAAK,GAAI,CAAA,CAAA,EAAG,KAAK,GAAI,CAAA,MAAA,CAAO,CAAG,EAAA,GAAG,CAAC,CAAA;AAAA,QACtC,CAAA,EAAG,KAAK,GAAI,CAAA,CAAA,EAAG,KAAK,GAAI,CAAA,MAAA,CAAO,CAAG,EAAA,GAAG,CAAC,CAAA;AAAA,QACtC,GAAG,MAAO,CAAA,CAAA;AAAA,OACZ,CAAA;AAEA,MAAA,QAAA,CAAS,YAAY,CAAA,CAAA;AAAA,KACvB;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,eAAA,GAAkB,CAAC,CAAgD,KAAA;AACvE,IAAM,MAAA,MAAA,GAAS,EAAE,GAAG,SAAA,EAAW,CAAC,KAAQ,GAAA,CAAA,CAAE,OAAO,KAAM,EAAA,CAAA;AACvD,IAAA,MAAM,YAAe,GAAA;AAAA,MACnB,CAAA,EAAG,KAAK,GAAI,CAAA,CAAA,EAAG,KAAK,GAAI,CAAA,MAAA,CAAO,CAAG,EAAA,GAAG,CAAC,CAAA;AAAA,MACtC,CAAA,EAAG,KAAK,GAAI,CAAA,CAAA,EAAG,KAAK,GAAI,CAAA,MAAA,CAAO,CAAG,EAAA,GAAG,CAAC,CAAA;AAAA,MACtC,CAAA,EAAG,KAAK,GAAI,CAAA,CAAA,EAAG,KAAK,GAAI,CAAA,MAAA,CAAO,CAAG,EAAA,GAAG,CAAC,CAAA;AAAA,MACtC,GAAG,MAAO,CAAA,CAAA;AAAA,KACZ,CAAA;AAEA,IAAA,QAAA,CAAS,cAAc,CAAC,CAAA,CAAA;AAAA,GAC1B,CAAA;AAEA,EAAA,uBACG,GAAA,CAAAC,WAAA,EAAA;AAAA,IACC,UAAY,EAAA;AAAA,MAEV,eAAe,CAAG,EAAA,KAAA,CAAA,MAAA,CAAA;AAAA,KACpB;AAAA,IACA,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,IACnC,KAAA,EAAO,eAAe,QAAS,EAAA;AAAA,IAC/B,QAAU,EAAA,oBAAA;AAAA,IACV,MAAQ,EAAA,eAAA;AAAA,IACR,SAAW,EAAA,gBAAA;AAAA,GACb,CAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"RGBAInputField.js","sources":["../src/color-chooser/RGBAInputField.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useEffect, useState } from \"react\";\nimport { InputLegacy as Input } from \"../input-legacy\";\nimport type { RGBAValue } from \"./Color\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport rgbaInputCss from \"./RGBAInput.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooser\");\ninterface RGBInputProps {\n rgbaValue: RGBAValue;\n value: \"r\" \| \"g\" \| \"b\";\n onSubmit: (rgb: RGBAValue, e?: React.ChangeEvent) => void;\n}\n\nexport const RGBInput = ({\n rgbaValue,\n value,\n onSubmit,\n}: RGBInputProps): JSX.Element => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-rgba-input\",\n css: rgbaInputCss,\n window: targetWindow,\n });\n\n const [rgbaInputValue, setRgbaInputValue] = useState<number \| string>(\n rgbaValue ? rgbaValue[value] : \"\",\n );\n\n useEffect(() => {\n setRgbaInputValue(rgbaValue ? rgbaValue[value] : \"\");\n }, [rgbaValue, value]);\n\n const handleRGBInputChange = (\n e: React.ChangeEvent<HTMLInputElement>,\n value: string,\n ): void => {\n let rgb: string \| number;\n\n rgb = Number.parseInt(value);\n\n if (value.trim() === \"\" \|\| Number.isNaN(rgb)) {\n rgb = \"\";\n }\n\n setRgbaInputValue(rgb);\n };\n\n const handleKeyDownRGB = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n if (e.key === \"Enter\") {\n const newRgb = { ...rgbaValue, [value]: e.currentTarget.value };\n const validatedRgb = {\n r: Math.max(0, Math.min(newRgb.r, 255)),\n g: Math.max(0, Math.min(newRgb.g, 255)),\n b: Math.max(0, Math.min(newRgb.b, 255)),\n a: newRgb.a,\n };\n\n onSubmit(validatedRgb);\n }\n };\n\n const handleOnBlurRGB = (e: React.FocusEvent<HTMLInputElement>): void => {\n const newRgb = { ...rgbaValue, [value]: e.target.value };\n const validatedRgb = {\n r: Math.max(0, Math.min(newRgb.r, 255)),\n g: Math.max(0, Math.min(newRgb.g, 255)),\n b: Math.max(0, Math.min(newRgb.b, 255)),\n a: newRgb.a,\n };\n\n onSubmit(validatedRgb, e);\n };\n\n return (\n <Input\n inputProps={{\n // @ts-ignore\n \"data-testid\": `${value}-input`,\n }}\n className={withBaseName(\"rgbaInput\")}\n value={rgbaInputValue.toString()}\n onChange={handleRGBInputChange}\n onBlur={handleOnBlurRGB}\n onKeyDown={handleKeyDownRGB}\n />\n );\n};\n"],"names":["rgbaInputCss","value","Input"],"mappings":"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"}

package/dist-es/color-chooser/Swatch.css.js CHANGED Viewed

@@ -1,4 +1,4 @@
-var css_248z = "/*TODO: New component; needs complete restyling to use characteristics properly */\n.saltColorChooserSwatch-swatch,\n.saltColorChooserSwatch-graySwatch {\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: pointer;\n}\n\n.salt-density-touch,\n.salt-density-low,\n.salt-density-medium,\n.salt-density-high {\n  --colorChooser-swatch-density-high-size: calc(5 * var(--salt-size-unit));\n  --colorChooser-swatch-density-medium-size: calc(3 * var(--salt-size-unit));\n  --colorChooser-swatch-density-low-size: calc(3 * var(--salt-size-unit));\n  --colorChooser-swatch-density-touch-size: calc(2 * var(--salt-size-unit));\n}\n\n.salt-density-touch {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-touch-size);\n}\n.salt-density-low {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-low-size);\n}\n.salt-density-medium {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-medium-size);\n}\n.salt-density-high {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-high-size);\n}\n\n.saltColorChooserSwatch-swatch,\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-graySwatch {\n  width: var(--colorChooser-swatch-size-unit);\n  height: var(--colorChooser-swatch-size-unit);\n}\n\n.saltColorChooserSwatch-whiteSwatch {\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: pointer;\n}\n\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-whiteSwatch {\n  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n}\n\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-whiteSwatch,\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-graySwatch {\n  width: calc(var(--colorChooser-swatch-size-unit) - 2);\n  height: calc(var(--colorChooser-swatch-size-unit) - 2);\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-whiteSwatch,\n.saltColorChooserSwatch-graySwatch {\n  border: 0px;\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-whiteSwatch {\n  width: calc(var(--colorChooser-swatch-size-unit) - 2);\n  height: calc(var(--colorChooser-swatch-size-unit) - 2);\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-graySwatch {\n  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n}\n\n.saltColorChooserSwatch-active {\n  outline: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n  border: var(--salt-focused-outlineWidth) var(--salt-container-borderStyle) var(--salt-actionable-cta-foreground-active) !important;\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: pointer;\n}\n\n.saltColorChooserSwatch-transparent {\n  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-status-negative-foreground) !important;\n  width: calc(var(--colorChooser-swatch-size-unit) - 2px) !important;\n  height: calc(var(--colorChooser-swatch-size-unit) - 2px) !important;\n  margin-bottom: 1px;\n  margin-left: 1px;\n  background: linear-gradient(\n    to top left,\n    rgba(166, 21, 11, 0) 0%,\n    rgba(166, 21, 11, 0) calc(50% - 0.8px),\n    rgba(166, 21, 11, 1) 50%,\n    rgba(166, 21, 11, 0) calc(50% + 0.8px),\n    rgba(166, 21, 11, 0) 100%\n  ) !important;\n}\n";
+var css_248z = "/*TODO: New component; needs complete restyling to use characteristics properly */\n.saltColorChooserSwatch-swatch,\n.saltColorChooserSwatch-graySwatch {\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: pointer;\n}\n\n.salt-density-touch,\n.salt-density-low,\n.salt-density-medium,\n.salt-density-high {\n  --colorChooser-swatch-density-high-size: calc(5 * var(--salt-size-unit));\n  --colorChooser-swatch-density-medium-size: calc(3 * var(--salt-size-unit));\n  --colorChooser-swatch-density-low-size: calc(3 * var(--salt-size-unit));\n  --colorChooser-swatch-density-touch-size: calc(2 * var(--salt-size-unit));\n}\n\n.salt-density-touch {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-touch-size);\n}\n.salt-density-low {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-low-size);\n}\n.salt-density-medium {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-medium-size);\n}\n.salt-density-high {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-high-size);\n}\n\n.saltColorChooserSwatch-swatch,\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-graySwatch {\n  width: var(--colorChooser-swatch-size-unit);\n  height: var(--colorChooser-swatch-size-unit);\n}\n\n.saltColorChooserSwatch-whiteSwatch {\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: pointer;\n}\n\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-whiteSwatch {\n  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n}\n\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-whiteSwatch,\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-graySwatch {\n  width: calc(var(--colorChooser-swatch-size-unit) - 2);\n  height: calc(var(--colorChooser-swatch-size-unit) - 2);\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-whiteSwatch,\n.saltColorChooserSwatch-graySwatch {\n  border: 0px;\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-whiteSwatch {\n  width: calc(var(--colorChooser-swatch-size-unit) - 2);\n  height: calc(var(--colorChooser-swatch-size-unit) - 2);\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-graySwatch {\n  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n}\n\n.saltColorChooserSwatch-active {\n  outline: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n  border: var(--salt-focused-outlineWidth) var(--salt-container-borderStyle) var(--salt-actionable-cta-foreground-active) !important;\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: pointer;\n}\n\n.saltColorChooserSwatch-transparent {\n  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-status-negative-foreground) !important;\n  width: calc(var(--colorChooser-swatch-size-unit) - 2px) !important;\n  height: calc(var(--colorChooser-swatch-size-unit) - 2px) !important;\n  margin-bottom: 1px;\n  margin-left: 1px;\n  background: linear-gradient(to top left, rgba(166, 21, 11, 0) 0%, rgba(166, 21, 11, 0) calc(50% - 0.8px), rgba(166, 21, 11, 1) 50%, rgba(166, 21, 11, 0) calc(50% + 0.8px), rgba(166, 21, 11, 0) 100%) !important;\n}\n";
 export { css_248z as default };
 //# sourceMappingURL=Swatch.css.js.map

package/dist-es/color-chooser/Swatch.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
-import { clsx } from 'clsx';
 import { makePrefixer } from '@salt-ds/core';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
 import { Color } from './Color.js';
 import { isTransparent } from './color-utils.js';
 import css_248z from './Swatch.css.js';

package/dist-es/color-chooser/Swatch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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 { ~~useComponentCssInjection~~ } from \"~~@salt-ds/styles~~\";\nimport { ~~useWindow~~ } from \"~~@salt-ds/window~~\";\n\nimport { Color } from \"./Color\";\nimport { isTransparent } from \"./color-utils\";\n\nimport swatchCss from \"./Swatch.css\";\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 targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-swatch\",\n css: swatchCss,\n window: targetWindow,\n });\n\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":["swatchCss","color"],"mappings":"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"}
1	+ {"version":3,"file":"Swatch.js","sources":["../src/color-chooser/Swatch.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { ChangeEvent, KeyboardEvent } from \"react\";\n\nimport { Color } from \"./Color\";\nimport { isTransparent } from \"./color-utils\";\n\nimport swatchCss from \"./Swatch.css\";\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 targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-swatch\",\n css: swatchCss,\n window: targetWindow,\n });\n\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":["swatchCss","color"],"mappings":"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"}

package/dist-es/color-chooser/Swatches.js CHANGED Viewed

@@ -1,10 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from 'clsx';
 import { makePrefixer } from '@salt-ds/core';
+import { clsx } from 'clsx';
 import { AlphaInput } from './AlphaInputField.js';
 import { SwatchesPicker } from './SwatchesPicker.js';
-import { useWindow } from '@salt-ds/window';
 import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import css_248z from './Swatches.css.js';
 const withBaseName = makePrefixer("saltColorChooserSwatches");

package/dist-es/color-chooser/Swatches.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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\";\n\nimport { ~~useWindow~~ } from \"@salt-ds/~~window~~\";\nimport { ~~useComponentCssInjection~~ } from \"@salt-ds/~~styles~~\";\n\nimport swatchesCss from \"./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 const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-swatches\",\n css: swatchesCss,\n window: targetWindow,\n });\n return (\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};\n"],"names":["swatchesCss","alpha"],"mappings":";;;;;;;;;AAWA,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,CAAqC,KAAA;AACnC,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,eAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IAAI,aAAY,EAAA,UAAA;AAAA,IAAW,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,WAAW,CAAC,CAAA;AAAA,IACnE,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,cAAA,EAAA;AAAA,QACC,SAAA;AAAA,QACA,KAAA;AAAA,QACA,QAAU,EAAA,iBAAA;AAAA,QACV,KAAA;AAAA,QACA,cAAA;AAAA,OACF,CAAA;AAAA,sBACC,IAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,SAAS,CAAC,CAAA;AAAA,QAC1C,QAAA,EAAA;AAAA,0BAAC,IAAA,CAAA,KAAA,EAAA;AAAA,YACC,QAAA,EAAA;AAAA,8BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,gBAAK,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,cAAc,CAAC,CAAA;AAAA,gBAAG,QAAA,EAAA,QAAA;AAAA,eAAM,CAAA;AAAA,8BAC1D,GAAA,CAAA,MAAA,EAAA;AAAA,gBAAK,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,kBAAkB,CAAC,CAAA;AAAA,gBACnD,QAAoB,EAAA,gBAAA,IAAA,IAAA,GAAA,gBAAA,GAAA,WAAA;AAAA,eACvB,CAAA;AAAA,aAAA;AAAA,WACF,CAAA;AAAA,0BACC,IAAA,CAAA,KAAA,EAAA;AAAA,YACC,QAAA,EAAA;AAAA,8BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,gBAAK,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,cAAc,CAAC,CAAA;AAAA,gBAAG,QAAA,EAAA,UAAA;AAAA,eAAQ,CAAA;AAAA,8BAC5D,GAAA,CAAA,UAAA,EAAA;AAAA,gBACC,UAAY,EAAA,CAAA,KAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,CAAO,IAAK,CAAA,CAAA,MAAM,IAAI,CAAI,GAAA,KAAA;AAAA,gBACtC,aAAe,EAAA,IAAA;AAAA,gBACf,QAAA,EAAU,CAACC,MAAAA,EAAe,CAAgC,KAAA;AACxD,kBAAM,MAAA,QAAA,GAAW,+BAAO,QAASA,CAAAA,MAAAA,CAAAA,CAAAA;AACjC,kBAAkB,iBAAA,CAAA,QAAA,EAAU,OAAO,CAAC,CAAA,CAAA;AAAA,iBACtC;AAAA,eACF,CAAA;AAAA,aAAA;AAAA,WACF,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"Swatches.js","sources":["../src/color-chooser/Swatches.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { AlphaInput } from \"./AlphaInputField\";\nimport type { Color } from \"./Color\";\nimport { SwatchesPicker } from \"./SwatchesPicker\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport swatchesCss from \"./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 const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-swatches\",\n css: swatchesCss,\n window: targetWindow,\n });\n return (\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};\n"],"names":["swatchesCss","alpha"],"mappings":";;;;;;;;;AAWA,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,CAAqC,KAAA;AACnC,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,eAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IAAI,aAAY,EAAA,UAAA;AAAA,IAAW,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,WAAW,CAAC,CAAA;AAAA,IACnE,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,cAAA,EAAA;AAAA,QACC,SAAA;AAAA,QACA,KAAA;AAAA,QACA,QAAU,EAAA,iBAAA;AAAA,QACV,KAAA;AAAA,QACA,cAAA;AAAA,OACF,CAAA;AAAA,sBACC,IAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,SAAS,CAAC,CAAA;AAAA,QAC1C,QAAA,EAAA;AAAA,0BAAC,IAAA,CAAA,KAAA,EAAA;AAAA,YACC,QAAA,EAAA;AAAA,8BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,gBAAK,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,cAAc,CAAC,CAAA;AAAA,gBAAG,QAAA,EAAA,QAAA;AAAA,eAAM,CAAA;AAAA,8BAC1D,GAAA,CAAA,MAAA,EAAA;AAAA,gBAAK,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,kBAAkB,CAAC,CAAA;AAAA,gBACnD,QAAoB,EAAA,gBAAA,IAAA,IAAA,GAAA,gBAAA,GAAA,WAAA;AAAA,eACvB,CAAA;AAAA,aAAA;AAAA,WACF,CAAA;AAAA,0BACC,IAAA,CAAA,KAAA,EAAA;AAAA,YACC,QAAA,EAAA;AAAA,8BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,gBAAK,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,cAAc,CAAC,CAAA;AAAA,gBAAG,QAAA,EAAA,UAAA;AAAA,eAAQ,CAAA;AAAA,8BAC5D,GAAA,CAAA,UAAA,EAAA;AAAA,gBACC,UAAY,EAAA,CAAA,KAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,CAAO,IAAK,CAAA,CAAA,MAAM,IAAI,CAAI,GAAA,KAAA;AAAA,gBACtC,aAAe,EAAA,IAAA;AAAA,gBACf,QAAA,EAAU,CAACC,MAAAA,EAAe,CAAgC,KAAA;AACxD,kBAAM,MAAA,QAAA,GAAW,+BAAO,QAASA,CAAAA,MAAAA,CAAAA,CAAAA;AACjC,kBAAkB,iBAAA,CAAA,QAAA,EAAU,OAAO,CAAC,CAAA,CAAA;AAAA,iBACtC;AAAA,eACF,CAAA;AAAA,aAAA;AAAA,WACF,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/color-chooser/SwatchesPicker.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
-import { Swatch } from './Swatch.js';
 import { convertColorMapValueToHex } from './ColorHelpers.js';
+import { Swatch } from './Swatch.js';
 import { isTransparent } from './color-utils.js';
-import { useWindow } from '@salt-ds/window';
 import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import css_248z from './Swatch.css.js';
 const SwatchesGroup = ({

package/dist-es/color-chooser/SwatchesPicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SwatchesPicker.js","sources":["../src/color-chooser/SwatchesPicker.tsx"],"sourcesContent":["import { Color } from \"./Color\";\nimport { ~~Swatch~~ } from \"./~~Swatch~~\";\nimport { ~~convertColorMapValueToHex~~ } from \"./~~ColorHelpers~~\";\nimport { isTransparent } from \"./color-utils\";\n\nimport { ~~useWindow~~ } from \"@salt-ds/~~window~~\";\nimport { ~~useComponentCssInjection~~ } from \"@salt-ds/~~styles~~\";\n\nimport swatchCSS from \"./Swatch.css\";\n\ninterface SwatchesPickerProps {\n allColors: string[][];\n color: Color \| undefined;\n alpha?: number;\n onChange: (\n color: Color \| undefined,\n finalSelection: boolean,\n e?: React.ChangeEvent\n ) => void;\n onDialogClosed: () => void;\n}\n\ninterface SwatchesGroupProps {\n swatchGroup: string[];\n selectedColor: string \| undefined;\n alpha: number;\n onClick: (\n color: Color \| undefined,\n finalSelection: boolean,\n e?: React.ChangeEvent\n ) => void;\n onDialogClosed: () => void;\n}\n\nconst SwatchesGroup = ({\n swatchGroup,\n onClick,\n onDialogClosed,\n selectedColor,\n alpha,\n}: SwatchesGroupProps): JSX.Element => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-swatches\",\n css: swatchCSS,\n window: targetWindow,\n });\n\n const isBlackOrWhite = (color: string): boolean => {\n return (\n ((selectedColor ? selectedColor.startsWith(\"#000000\") : false) &&\n color.toLowerCase() === \"black\") \|\|\n ((selectedColor\n ? selectedColor.toLowerCase().startsWith(\"#ffffff\")\n : false) &&\n color.toLowerCase() === \"white\")\n );\n };\n const isActive = (color: string): boolean => {\n return (\n color.toLowerCase() ===\n selectedColor?.substring(0, 7).toString().toLowerCase() \|\|\n isBlackOrWhite(color)\n );\n };\n\n return (\n <div style={{ display: \"flex\", flexDirection: \"column\" }}>\n {swatchGroup\n ?.map((color) => {\n return convertColorMapValueToHex(color);\n })\n ?.map((color) => (\n <Swatch\n key={color.toString()}\n active={isActive(color)}\n color={color}\n onClick={onClick}\n onDialogClosed={onDialogClosed}\n alpha={alpha}\n transparent={isTransparent(color)}\n />\n ))}\n </div>\n );\n};\n\nexport const SwatchesPicker = ({\n allColors,\n color,\n alpha = 1,\n onChange,\n onDialogClosed,\n}: SwatchesPickerProps): JSX.Element => {\n return (\n <div\n data-testid=\"swatches-picker\"\n style={{ display: \"flex\", flexDirection: \"row\" }}\n >\n {allColors?.map((swatchGroup: string[]) => (\n <SwatchesGroup\n swatchGroup={swatchGroup}\n key={swatchGroup.toString()}\n selectedColor={color?.hex}\n onClick={onChange}\n onDialogClosed={onDialogClosed}\n alpha={alpha}\n />\n ))}\n </div>\n );\n};\n"],"names":["swatchCSS"],"mappings":";;;;;;;;AAkCA,MAAM,gBAAgB,CAAC;AAAA,EACrB,WAAA;AAAA,EACA,OAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,KAAA;AACF,CAAuC,KAAA;AAxCvC,EAAA,IAAA,EAAA,CAAA;AAyCE,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,eAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,cAAA,GAAiB,CAAC,KAA2B,KAAA;AACjD,IACI,OAAA,CAAA,aAAA,GAAgB,cAAc,UAAW,CAAA,SAAS,IAAI,KACtD,KAAA,KAAA,CAAM,aAAkB,KAAA,OAAA,IAAA,CACxB,gBACE,aAAc,CAAA,WAAA,GAAc,UAAW,CAAA,SAAS,IAChD,KACF,KAAA,KAAA,CAAM,aAAkB,KAAA,OAAA,CAAA;AAAA,GAE9B,CAAA;AACA,EAAM,MAAA,QAAA,GAAW,CAAC,KAA2B,KAAA;AAC3C,IACE,OAAA,KAAA,CAAM,WAAY,EAAA,MAChB,aAAe,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,aAAA,CAAA,SAAA,CAAU,GAAG,CAAG,CAAA,CAAA,QAAA,EAAA,CAAW,WAC5C,EAAA,CAAA,IAAA,cAAA,CAAe,KAAK,CAAA,CAAA;AAAA,GAExB,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,KAAO,EAAA,EAAE,OAAS,EAAA,MAAA,EAAQ,eAAe,QAAS,EAAA;AAAA,IACpD,QAAA,EAAA,CAAA,EAAA,GAAA,WAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CACG,GAAI,CAAA,CAAC,KAAU,KAAA;AACf,MAAA,OAAO,0BAA0B,KAAK,CAAA,CAAA;AAAA,KAFzC,CAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAIG,GAAI,CAAA,CAAC,0BACJ,GAAA,CAAA,MAAA,EAAA;AAAA,MAEC,MAAA,EAAQ,SAAS,KAAK,CAAA;AAAA,MACtB,KAAA;AAAA,MACA,OAAA;AAAA,MACA,cAAA;AAAA,MACA,KAAA;AAAA,MACA,WAAA,EAAa,cAAc,KAAK,CAAA;AAAA,KAN3B,EAAA,KAAA,CAAM,UAOb,CAAA,CAAA;AAAA,GAEN,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,SAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAQ,GAAA,CAAA;AAAA,EACR,QAAA;AAAA,EACA,cAAA;AACF,CAAwC,KAAA;AACtC,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,aAAY,EAAA,iBAAA;AAAA,IACZ,KAAO,EAAA,EAAE,OAAS,EAAA,MAAA,EAAQ,eAAe,KAAM,EAAA;AAAA,IAE9C,QAAW,EAAA,SAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,GAAA,CAAI,CAAC,WAAA,qBACd,GAAA,CAAA,aAAA,EAAA;AAAA,MACC,WAAA;AAAA,MAEA,eAAe,KAAO,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA;AAAA,MACtB,OAAS,EAAA,QAAA;AAAA,MACT,cAAA;AAAA,MACA,KAAA;AAAA,KAJK,EAAA,WAAA,CAAY,UAKnB,CAAA,CAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"SwatchesPicker.js","sources":["../src/color-chooser/SwatchesPicker.tsx"],"sourcesContent":["import type { Color } from \"./Color\";\nimport { convertColorMapValueToHex } from \"./ColorHelpers\";\nimport { Swatch } from \"./Swatch\";\nimport { isTransparent } from \"./color-utils\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport swatchCSS from \"./Swatch.css\";\n\ninterface SwatchesPickerProps {\n allColors: string[][];\n color: Color \| undefined;\n alpha?: number;\n onChange: (\n color: Color \| undefined,\n finalSelection: boolean,\n e?: React.ChangeEvent,\n ) => void;\n onDialogClosed: () => void;\n}\n\ninterface SwatchesGroupProps {\n swatchGroup: string[];\n selectedColor: string \| undefined;\n alpha: number;\n onClick: (\n color: Color \| undefined,\n finalSelection: boolean,\n e?: React.ChangeEvent,\n ) => void;\n onDialogClosed: () => void;\n}\n\nconst SwatchesGroup = ({\n swatchGroup,\n onClick,\n onDialogClosed,\n selectedColor,\n alpha,\n}: SwatchesGroupProps): JSX.Element => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-swatches\",\n css: swatchCSS,\n window: targetWindow,\n });\n\n const isBlackOrWhite = (color: string): boolean => {\n return (\n ((selectedColor ? selectedColor.startsWith(\"#000000\") : false) &&\n color.toLowerCase() === \"black\") \|\|\n ((selectedColor\n ? selectedColor.toLowerCase().startsWith(\"#ffffff\")\n : false) &&\n color.toLowerCase() === \"white\")\n );\n };\n const isActive = (color: string): boolean => {\n return (\n color.toLowerCase() ===\n selectedColor?.substring(0, 7).toString().toLowerCase() \|\|\n isBlackOrWhite(color)\n );\n };\n\n return (\n <div style={{ display: \"flex\", flexDirection: \"column\" }}>\n {swatchGroup\n ?.map((color) => {\n return convertColorMapValueToHex(color);\n })\n ?.map((color) => (\n <Swatch\n key={color.toString()}\n active={isActive(color)}\n color={color}\n onClick={onClick}\n onDialogClosed={onDialogClosed}\n alpha={alpha}\n transparent={isTransparent(color)}\n />\n ))}\n </div>\n );\n};\n\nexport const SwatchesPicker = ({\n allColors,\n color,\n alpha = 1,\n onChange,\n onDialogClosed,\n}: SwatchesPickerProps): JSX.Element => {\n return (\n <div\n data-testid=\"swatches-picker\"\n style={{ display: \"flex\", flexDirection: \"row\" }}\n >\n {allColors?.map((swatchGroup: string[]) => (\n <SwatchesGroup\n swatchGroup={swatchGroup}\n key={swatchGroup.toString()}\n selectedColor={color?.hex}\n onClick={onChange}\n onDialogClosed={onDialogClosed}\n alpha={alpha}\n />\n ))}\n </div>\n );\n};\n"],"names":["swatchCSS"],"mappings":";;;;;;;;AAkCA,MAAM,gBAAgB,CAAC;AAAA,EACrB,WAAA;AAAA,EACA,OAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,KAAA;AACF,CAAuC,KAAA;AAxCvC,EAAA,IAAA,EAAA,CAAA;AAyCE,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,eAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,cAAA,GAAiB,CAAC,KAA2B,KAAA;AACjD,IACI,OAAA,CAAA,aAAA,GAAgB,cAAc,UAAW,CAAA,SAAS,IAAI,KACtD,KAAA,KAAA,CAAM,aAAkB,KAAA,OAAA,IAAA,CACxB,gBACE,aAAc,CAAA,WAAA,GAAc,UAAW,CAAA,SAAS,IAChD,KACF,KAAA,KAAA,CAAM,aAAkB,KAAA,OAAA,CAAA;AAAA,GAE9B,CAAA;AACA,EAAM,MAAA,QAAA,GAAW,CAAC,KAA2B,KAAA;AAC3C,IACE,OAAA,KAAA,CAAM,WAAY,EAAA,MAChB,aAAe,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,aAAA,CAAA,SAAA,CAAU,GAAG,CAAG,CAAA,CAAA,QAAA,EAAA,CAAW,WAC5C,EAAA,CAAA,IAAA,cAAA,CAAe,KAAK,CAAA,CAAA;AAAA,GAExB,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,KAAO,EAAA,EAAE,OAAS,EAAA,MAAA,EAAQ,eAAe,QAAS,EAAA;AAAA,IACpD,QAAA,EAAA,CAAA,EAAA,GAAA,WAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CACG,GAAI,CAAA,CAAC,KAAU,KAAA;AACf,MAAA,OAAO,0BAA0B,KAAK,CAAA,CAAA;AAAA,KAFzC,CAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAIG,GAAI,CAAA,CAAC,0BACJ,GAAA,CAAA,MAAA,EAAA;AAAA,MAEC,MAAA,EAAQ,SAAS,KAAK,CAAA;AAAA,MACtB,KAAA;AAAA,MACA,OAAA;AAAA,MACA,cAAA;AAAA,MACA,KAAA;AAAA,MACA,WAAA,EAAa,cAAc,KAAK,CAAA;AAAA,KAN3B,EAAA,KAAA,CAAM,UAOb,CAAA,CAAA;AAAA,GAEN,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,SAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAQ,GAAA,CAAA;AAAA,EACR,QAAA;AAAA,EACA,cAAA;AACF,CAAwC,KAAA;AACtC,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,aAAY,EAAA,iBAAA;AAAA,IACZ,KAAO,EAAA,EAAE,OAAS,EAAA,MAAA,EAAQ,eAAe,KAAM,EAAA;AAAA,IAE9C,QAAW,EAAA,SAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,GAAA,CAAI,CAAC,WAAA,qBACd,GAAA,CAAA,aAAA,EAAA;AAAA,MACC,WAAA;AAAA,MAEA,eAAe,KAAO,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA;AAAA,MACtB,OAAS,EAAA,QAAA;AAAA,MACT,cAAA;AAAA,MACA,KAAA;AAAA,KAJK,EAAA,WAAA,CAAY,UAKnB,CAAA,CAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/color-chooser/createTabsMapping.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"createTabsMapping.js","sources":["../src/color-chooser/createTabsMapping.ts"],"sourcesContent":["import { ChangeEvent } from \"react\";\nimport { Color } from \"./Color\";\nimport { ColorPicker } from \"./ColorPicker\";\nimport { DictTabsProps } from \"./DictTabs\";\nimport { Swatches } from \"./Swatches\";\n\ninterface TabsMappingProps {\n swatches: boolean;\n colorPicker: boolean;\n disableAlphaChooser: boolean;\n allColors: string[][];\n color: Color \| undefined;\n alpha: number;\n handleColorChange: (\n color: Color \| undefined,\n finalSelection: boolean,\n e?: ChangeEvent\n ) => void;\n displayColorName: string \| undefined;\n placeholder: string \| undefined;\n onDialogClosed: () => void;\n}\n\nexport const createTabsMapping = ({\n swatches,\n colorPicker,\n disableAlphaChooser,\n allColors,\n color,\n alpha,\n handleColorChange,\n displayColorName,\n placeholder,\n onDialogClosed,\n}: TabsMappingProps): DictTabsProps[\"tabs\"] => {\n if (!swatches && !colorPicker) {\n throw new Error(\"You cannot select no color chooser tabs\");\n }\n\n return {\n ...(swatches && {\n Swatches: {\n Component: Swatches,\n props: {\n allColors,\n color,\n alpha,\n handleColorChange,\n displayColorName,\n placeholder,\n onDialogClosed,\n },\n },\n }),\n ...(colorPicker && {\n \"Color Picker\": {\n Component: ColorPicker,\n props: {\n disableAlphaChooser,\n color,\n alpha,\n onChange: handleColorChange,\n onDialogClosed,\n },\n },\n }),\n };\n};\n"],"names":[],"mappings":";;;AAuBO,MAAM,oBAAoB,CAAC;AAAA,EAChC,QAAA;AAAA,EACA,WAAA;AAAA,EACA,mBAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,WAAA;AAAA,EACA,cAAA;AACF,CAA+C,KAAA;AAC7C,EAAI,IAAA,CAAC,QAAY,IAAA,CAAC,WAAa,EAAA;AAC7B,IAAM,MAAA,IAAI,MAAM,yCAAyC,CAAA,CAAA;AAAA,GAC3D;AAEA,EAAO,OAAA;AAAA,IACL,GAAI,QAAY,IAAA;AAAA,MACd,QAAU,EAAA;AAAA,QACR,SAAW,EAAA,QAAA;AAAA,QACX,KAAO,EAAA;AAAA,UACL,SAAA;AAAA,UACA,KAAA;AAAA,UACA,KAAA;AAAA,UACA,iBAAA;AAAA,UACA,gBAAA;AAAA,UACA,WAAA;AAAA,UACA,cAAA;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,IACA,GAAI,WAAe,IAAA;AAAA,MACjB,cAAgB,EAAA;AAAA,QACd,SAAW,EAAA,WAAA;AAAA,QACX,KAAO,EAAA;AAAA,UACL,mBAAA;AAAA,UACA,KAAA;AAAA,UACA,KAAA;AAAA,UACA,QAAU,EAAA,iBAAA;AAAA,UACV,cAAA;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,GACF,CAAA;AACF;;;;"}
1	+ {"version":3,"file":"createTabsMapping.js","sources":["../src/color-chooser/createTabsMapping.ts"],"sourcesContent":["import type { ChangeEvent } from \"react\";\nimport type { Color } from \"./Color\";\nimport { ColorPicker } from \"./ColorPicker\";\nimport type { DictTabsProps } from \"./DictTabs\";\nimport { Swatches } from \"./Swatches\";\n\ninterface TabsMappingProps {\n swatches: boolean;\n colorPicker: boolean;\n disableAlphaChooser: boolean;\n allColors: string[][];\n color: Color \| undefined;\n alpha: number;\n handleColorChange: (\n color: Color \| undefined,\n finalSelection: boolean,\n e?: ChangeEvent,\n ) => void;\n displayColorName: string \| undefined;\n placeholder: string \| undefined;\n onDialogClosed: () => void;\n}\n\nexport const createTabsMapping = ({\n swatches,\n colorPicker,\n disableAlphaChooser,\n allColors,\n color,\n alpha,\n handleColorChange,\n displayColorName,\n placeholder,\n onDialogClosed,\n}: TabsMappingProps): DictTabsProps[\"tabs\"] => {\n if (!swatches && !colorPicker) {\n throw new Error(\"You cannot select no color chooser tabs\");\n }\n\n return {\n ...(swatches && {\n Swatches: {\n Component: Swatches,\n props: {\n allColors,\n color,\n alpha,\n handleColorChange,\n displayColorName,\n placeholder,\n onDialogClosed,\n },\n },\n }),\n ...(colorPicker && {\n \"Color Picker\": {\n Component: ColorPicker,\n props: {\n disableAlphaChooser,\n color,\n alpha,\n onChange: handleColorChange,\n onDialogClosed,\n },\n },\n }),\n };\n};\n"],"names":[],"mappings":";;;AAuBO,MAAM,oBAAoB,CAAC;AAAA,EAChC,QAAA;AAAA,EACA,WAAA;AAAA,EACA,mBAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,WAAA;AAAA,EACA,cAAA;AACF,CAA+C,KAAA;AAC7C,EAAI,IAAA,CAAC,QAAY,IAAA,CAAC,WAAa,EAAA;AAC7B,IAAM,MAAA,IAAI,MAAM,yCAAyC,CAAA,CAAA;AAAA,GAC3D;AAEA,EAAO,OAAA;AAAA,IACL,GAAI,QAAY,IAAA;AAAA,MACd,QAAU,EAAA;AAAA,QACR,SAAW,EAAA,QAAA;AAAA,QACX,KAAO,EAAA;AAAA,UACL,SAAA;AAAA,UACA,KAAA;AAAA,UACA,KAAA;AAAA,UACA,iBAAA;AAAA,UACA,gBAAA;AAAA,UACA,WAAA;AAAA,UACA,cAAA;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,IACA,GAAI,WAAe,IAAA;AAAA,MACjB,cAAgB,EAAA;AAAA,QACd,SAAW,EAAA,WAAA;AAAA,QACX,KAAO,EAAA;AAAA,UACL,mBAAA;AAAA,UACA,KAAA;AAAA,UACA,KAAA;AAAA,UACA,QAAU,EAAA,iBAAA;AAAA,UACV,cAAA;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,GACF,CAAA;AACF;;;;"}

package/dist-es/combo-box/ComboBox.js CHANGED Viewed

@@ -4,8 +4,10 @@ import { forwardRef, useCallback } from 'react';
 import { DropdownBase } from '../dropdown/DropdownBase.js';
 import '../dropdown/DropdownButton.js';
 import '../dropdown/Dropdown.js';
-import '../responsive/useResizeObserver.js';
 import '../form-field-context-legacy/FormFieldLegacyContext.js';
+import '../responsive/useResizeObserver.js';
+import { InputLegacy } from '../input-legacy/InputLegacy.js';
+import '../input-legacy/StaticInputAdornment.js';
 import '../list/Highlighter.js';
 import '../list/ListItem.js';
 import { List } from '../list/List.js';
@@ -13,13 +15,11 @@ import { CollectionProvider } from '../common-hooks/collectionProvider.js';
 import '../common-hooks/keyUtils.js';
 import { useCollectionItems } from '../common-hooks/useCollectionItems.js';
 import '../list/VirtualizedList.js';
-import { InputLegacy } from '../input-legacy/InputLegacy.js';
-import '../input-legacy/StaticInputAdornment.js';
 import { useCombobox } from './useCombobox.js';
 const ComboBox = forwardRef(function Combobox({
-  InputProps: InputProps2,
-  ListProps: ListProps2,
+  InputProps,
+  ListProps,
   ListItem,
   "aria-label": ariaLabel,
   allowFreeText,
@@ -65,7 +65,7 @@ const ComboBox = forwardRef(function Combobox({
     onOpenChange,
     selected
   } = useCombobox({
-    InputProps: InputProps2,
+    InputProps,
     allowFreeText,
     ariaLabel,
     collectionHook,
@@ -90,11 +90,11 @@ const ComboBox = forwardRef(function Combobox({
     (sel) => {
       if (Array.isArray(sel)) {
         return sel.map((i) => i.value);
-      } else if (sel) {
+      }
+      if (sel) {
         return sel.value;
-      } else {
-        return sel;
       }
+      return sel;
     },
     []
   );
@@ -116,7 +116,7 @@ const ComboBox = forwardRef(function Combobox({
           ...controlProps
         }),
         /* @__PURE__ */ jsx(List, {
-          ...ListProps2,
+          ...ListProps,
           ListItem,
           focusVisible,
           highlightedIndex,

package/dist-es/combo-box/ComboBox.js.map CHANGED Viewed

	@@ -1 +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 {\~~n InputLegacy as Input,\n InputLegacyProps as InputProps,\n} from \"../input-legacy\";\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","Input"],"mappings":";;;;;;;;;;;;;;;;;;;~~AAgDa~~,MAAA,QAAA,GAAW,UAAW,CAAA,SAAS,QAI1C,CAAA;AAAA,EACE,~~UAAAA,EAAAA,WAAAA~~;AAAA,EACA,~~SAAAC,EAAAA,UAAAA~~;AAAA,EACA,QAAA;AAAA,EACA,YAAc,EAAA,SAAA;AAAA,EACd,aAAA;AAAA,EACA,QAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,cAAA;AAAA,EACA,EAAI,EAAA,MAAA;AAAA,EACJ,MAAQ,EAAA,UAAA;AAAA,EACR,YAAA;AAAA,EACA,YAAc,EAAA,gBAAA;AAAA,EACd,iBAAA;AAAA,EACA,iBAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,EACA,KAAO,EAAA,SAAA;AAAA,EACP,KAAQ,GAAA,GAAA;AAAA,EACL,GAAA,KAAA;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAM,MAAA,EAAA,~~GAAKC~~,UAAM,MAAM,CAAA,CAAA;AAEvB,EAAA,MAAM,iBAAiB,kBAAyB,CAAA;AAAA,IAC9C,EAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAS,EAAA;AAAA,MACP,eAAe,SAAa,IAAA,IAAA,GAAA,SAAA,GAAA,YAAA;AAAA,MAC5B,cAAA;AAAA,MACA,YAAA;AAAA,KACF;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,YAAA;AAAA,IACA,gBAAA;AAAA,IACA,UAAA;AAAA,IACA,MAAA;AAAA,IACA,YAAA;AAAA,IACA,gBAAkB,EAAA,YAAA;AAAA,IAClB,YAAA;AAAA,IACA,QAAA;AAAA,MACE,WAA6B,CAAA;AAAA,IAC/B,~~UAAAF,EAAAA,WAAAA~~;AAAA,IACA,aAAA;AAAA,IACA,SAAA;AAAA,IACA,cAAA;AAAA,IACA,aAAA;AAAA,IACA,YAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,EAAA;AAAA,IACA,MAAQ,EAAA,UAAA;AAAA,IACR,YAAA;AAAA,IACA,KAAO,EAAA,UAAA;AAAA,IACP,YAAc,EAAA,gBAAA;AAAA,IACd,iBAAA;AAAA,IACA,iBAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAO,EAAA,SAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAA,MAAM,qBAAwB,GAAA,WAAA;AAAA,IAC5B,CACE,GAGwE,KAAA;AAIxE,MAAI,IAAA,KAAA,CAAM,OAAQ,CAAA,GAAG,CAAG,EAAA;AACtB,QAAA,OAAO,GAAI,CAAA,GAAA,CAAI,CAAC,CAAA,KAAM,EAAE,KAAK,CAAA,CAAA;AAAA,~~iBACpB~~,GAAK,EAAA;~~AACd~~,QAAA,OAAO,GAAI,CAAA,KAAA,CAAA;AAAA,~~OACN,MAAA~~;~~AACL~~,~~QAAO~~,OAAA,GAAA,CAAA;AAAA,~~OACT~~;AAAA,~~KACF;AAAA,~~IACA,EAAC;AAAA,GACH,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,kBAAA,EAAA;AAAA,IAAyB,cAAA;AAAA,IACxB,QAAC,kBAAA,IAAA,CAAA,YAAA,EAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAS,EAAA,IAAA;AAAA,MACT,EAAA;AAAA,MACA,MAAA;AAAA,MACA,YAAA;AAAA,MACA,WAAW,EAAA,IAAA;AAAA,MACX,GAAK,EAAA,YAAA;AAAA,MACL,KAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAC,GAAA,~~CAAAG~~,WAAA,EAAA;AAAA,UACE,GAAG,UAAA;AAAA,UACJ,QAAA;AAAA,UAEC,GAAG,YAAA;AAAA,SACN,CAAA;AAAA,wBAEC,GAAA,CAAA,IAAA,EAAA;AAAA,UACE,~~GAAGF~~,~~UAAAA~~;AAAA,UACJ,QAAA;AAAA,UACA,YAAA;AAAA,UACA,gBAAA;AAAA,UACA,wBAAA,EAA0B,WAAW,KAAS,IAAA,KAAA,CAAA;AAAA,UAC9C,IAAI,CAAG,EAAA,EAAA,CAAA,KAAA,CAAA;AAAA,UACP,YAAA;AAAA,UACA,iBAAA;AAAA,UACA,QAAA,EAAU,sBAAsB,QAAQ,CAAA;AAAA,UACxC,iBAAA;AAAA,SACF,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
1	+ {"version":3,"file":"ComboBox.js","sources":["../src/combo-box/ComboBox.tsx"],"sourcesContent":["import { useIdMemo as useId } from \"@salt-ds/core\";\nimport {\n type ForwardedRef,\n type ReactElement,\n forwardRef,\n useCallback,\n} from \"react\";\n\nimport { DropdownBase, type DropdownBaseProps } from \"../dropdown\";\nimport {\n InputLegacy as Input,\n type InputLegacyProps as InputProps,\n} from \"../input-legacy\";\nimport { List, type ListProps } from \"../list\";\n\nimport {\n type CollectionItem,\n CollectionProvider,\n type SelectionProps,\n type SelectionStrategy,\n type 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 }\n if (sel) {\n return sel.value as returnType;\n }\n return sel as returnType;\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":["useId","Input"],"mappings":"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"}

package/dist-es/combo-box/useCombobox.js CHANGED Viewed

@@ -1,15 +1,15 @@
 import { useControlled } from '@salt-ds/core';
 import { useRef, useCallback, useState, useEffect } from 'react';
-import '../list/Highlighter.js';
-import '../list/ListItem.js';
-import '../list/List.js';
-import { useList } from '../list/useList.js';
-import '../list/VirtualizedList.js';
 import '../common-hooks/collectionProvider.js';
 import { itemToString } from '../common-hooks/itemToString.js';
 import '../common-hooks/keyUtils.js';
 import 'react/jsx-runtime';
 import '../responsive/useResizeObserver.js';
+import '../list/Highlighter.js';
+import '../list/ListItem.js';
+import '../list/List.js';
+import { useList } from '../list/useList.js';
+import '../list/VirtualizedList.js';
 const NULL_REF = { current: null };
 const EnterOnly = ["Enter"];
@@ -19,7 +19,6 @@ const useCombobox = ({
   collectionHook,
   defaultIsOpen,
   defaultValue,
-  disabled,
   onBlur,
   onFocus,
   onChange,
@@ -69,11 +68,11 @@ const useCombobox = ({
     (sel) => {
       if (Array.isArray(sel)) {
         return sel.map((i) => i.value);
-      } else if (sel) {
+      }
+      if (sel) {
         return sel.value;
-      } else {
-        return sel;
       }
+      return sel;
     },
     []
   );
@@ -98,7 +97,7 @@ const useCombobox = ({
       setValue(value2);
       setFilterPattern(value2 === "" ? void 0 : value2);
     },
-    [setFilterPattern, setValue]
+    [setFilterPattern]
   );
   const reconcileInput = useCallback(
     (selected2 = selectedRef.current) => {
@@ -127,13 +126,7 @@ const useCombobox = ({
       reconcileInput(selected2);
       onSelectionChange == null ? void 0 : onSelectionChange(evt, collectionItemsToItem(selected2 != null ? selected2 : null));
     },
-    [
-      collectionItemsToItem,
-      isMultiSelect,
-      onSelectionChange,
-      reconcileInput,
-      setIsOpen
-    ]
+    [collectionItemsToItem, isMultiSelect, onSelectionChange, reconcileInput]
   );
   const handleSelectionChange = useCallback(
     (evt, selected2) => {
@@ -220,7 +213,7 @@ const useCombobox = ({
       }
       onOpenChange == null ? void 0 : onOpenChange(open);
     },
-    [onOpenChange, setIsOpen]
+    [onOpenChange]
   );
   const { onClick: listHandlersOnClick } = listHookListHandlers;
   const handleListClick = useCallback(
@@ -252,7 +245,7 @@ const useCombobox = ({
       setQuickSelection(newValue.length > 0 && !allowFreeText);
       inputOnChange == null ? void 0 : inputOnChange(evt, newValue);
     },
-    [allowFreeText, inputOnChange, setFilterPattern, setIsOpen, setValue]
+    [allowFreeText, inputOnChange, setFilterPattern, onSelectionChange]
   );
   const { onFocus: listOnFocus } = listControlProps;
   const handleInputFocus = useCallback(
@@ -336,7 +329,7 @@ const useCombobox = ({
     if (indexPositions.length === 0) {
       setIsOpen(false);
     }
-  }, [highlightSelectedItem, indexPositions.length, setIsOpen]);
+  }, [highlightSelectedItem, indexPositions.length]);
   const mergedInputProps = {
     ...inputProps.inputProps,
     "aria-label": ariaLabel