@salt-ds/lab 1.0.0-alpha.71 → 1.0.0-alpha.73

package/dist-cjs/color-chooser/ColorChooser.js

@@ -3,17 +3,17 @@
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
 var icons = require('@salt-ds/icons');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var clsx = require('clsx');
 var react = require('react');
-var colorUtils = require('./color-utils.js');
+var ColorChooser$1 = require('./ColorChooser.css.js');
 var ColorHelpers = require('./ColorHelpers.js');
-var DictTabs = require('./DictTabs.js');
-var GetColorPalettes = require('./GetColorPalettes.js');
+var colorUtils = require('./color-utils.js');
 var colorMap = require('./colorMap.js');
 var createTabsMapping = require('./createTabsMapping.js');
-var styles = require('@salt-ds/styles');
-var window = require('@salt-ds/window');
-var ColorChooser$1 = require('./ColorChooser.css.js');
+var DictTabs = require('./DictTabs.js');
+var GetColorPalettes = require('./GetColorPalettes.js');
 
 const withBaseName = core.makePrefixer("saltColorChooser");
 function getActiveTab(hexValue, tabs, saltColorOverrides) {
@@ -90,39 +90,37 @@ const ColorChooser = ({
   const onTabClick = (index) => {
     setActiveTab(index);
   };
-  const OverlayContent = () => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: clsx.clsx(withBaseName("overlayContent")),
-        "data-testid": "overlay-content",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            core.Button,
-            {
-              "data-testid": "default-button",
-              variant: "secondary",
-              className: clsx.clsx(withBaseName("defaultButton")),
-              onClick: onDefaultSelected,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(icons.RefreshIcon, { className: clsx.clsx(withBaseName("refreshIcon")) }),
-                "Default"
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            DictTabs.DictTabs,
-            {
-              tabs: tabsMapping,
-              hexValue: color == null ? void 0 : color.hex,
-              onTabClick,
-              activeTab
-            }
-          )
-        ]
-      }
-    );
-  };
+  const overlayContent = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: clsx.clsx(withBaseName("overlayContent")),
+      "data-testid": "overlay-content",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          core.Button,
+          {
+            "data-testid": "default-button",
+            variant: "secondary",
+            className: clsx.clsx(withBaseName("defaultButton")),
+            onClick: onDefaultSelected,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(icons.RefreshIcon, { className: clsx.clsx(withBaseName("refreshIcon")) }),
+              "Default"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DictTabs.DictTabs,
+          {
+            tabs: tabsMapping,
+            hexValue: color == null ? void 0 : color.hex,
+            onTabClick,
+            activeTab
+          }
+        )
+      ]
+    }
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs(core.Overlay, { placement: "bottom", "data-testid": "color-chooser-overlay", children: [
     /* @__PURE__ */ jsxRuntime.jsx(core.OverlayTrigger, { children: /* @__PURE__ */ jsxRuntime.jsxs(
       core.Button,
@@ -154,7 +152,7 @@ const ColorChooser = ({
     ) }),
     /* @__PURE__ */ jsxRuntime.jsxs(core.OverlayPanel, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(core.OverlayPanelCloseButton, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(core.OverlayPanelContent, { children: /* @__PURE__ */ jsxRuntime.jsx(OverlayContent, {}) })
+      /* @__PURE__ */ jsxRuntime.jsx(core.OverlayPanelContent, { children: overlayContent })
     ] })
   ] });
 };

package/dist-cjs/color-chooser/ColorChooser.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorChooser.js","sources":["../src/color-chooser/ColorChooser.tsx"],"sourcesContent":["import {\n  Button,\n  type ButtonProps,\n  Overlay,\n  OverlayPanel,\n  OverlayPanelCloseButton,\n  OverlayPanelContent,\n  OverlayTrigger,\n  makePrefixer,\n} from \"@salt-ds/core\";\nimport { RefreshIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { type ChangeEvent, useState } from \"react\";\nimport type { Color } from \"./Color\";\nimport { isTransparent } from \"./color-utils\";\n\nimport {\n  convertColorMapValueToHex,\n  getColorNameByHexValue,\n  getHexValue,\n  hexValueWithoutAlpha,\n} from \"./ColorHelpers\";\nimport { type ColorChooserTabs, DictTabs } from \"./DictTabs\";\nimport { getColorPalettes } from \"./GetColorPalettes\";\nimport { saltColorMap } from \"./colorMap\";\nimport { createTabsMapping } from \"./createTabsMapping\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport colorChooserCss from \"./ColorChooser.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooser\");\n\nfunction getActiveTab(\n  hexValue: string | undefined,\n  tabs: ColorChooserTabs,\n  saltColorOverrides: Record<string, string> | undefined,\n): number {\n  if (tabs.Swatches && tabs[\"Color Picker\"]) {\n    const hexNoAlpha: string | undefined = hexValueWithoutAlpha(hexValue);\n    const colors = saltColorOverrides ?? saltColorMap;\n    // if hexNoAlpha is a Salt color or null/undefined then set the active tab as Swatches\n    if (\n      hexNoAlpha &&\n      !Object.keys(colors).find(\n        (key: string) =>\n          convertColorMapValueToHex(colors[key])?.toLowerCase() ===\n          hexNoAlpha?.toLowerCase(),\n      )\n    ) {\n      return 1;\n    }\n  }\n  return 0;\n}\n\nexport interface ColorChooserProps {\n  color: Color | undefined;\n  defaultAlpha?: number;\n  disableAlphaChooser?: boolean;\n  displayHexOnly?: boolean;\n  hideLabel?: boolean;\n  onClear: () => void; // called when user clicks \"default\" button\n  onSelect: (\n    color: Color | undefined,\n    finalSelection: boolean,\n    event?: ChangeEvent,\n  ) => void;\n  placeholder?: string;\n  buttonProps?: Partial<ButtonProps>;\n  saltColorOverrides?: Record<string, string>;\n  showSwatches?: boolean;\n  showColorPicker?: boolean;\n  readOnly?: boolean;\n}\n\nexport const ColorChooser = ({\n  onClear,\n  onSelect,\n  color,\n  showSwatches = true,\n  showColorPicker = true,\n  defaultAlpha = 1,\n  disableAlphaChooser = false,\n  hideLabel = false,\n  placeholder,\n  buttonProps,\n  saltColorOverrides,\n  readOnly = false,\n  displayHexOnly = false,\n}: ColorChooserProps): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-color-chooser\",\n    css: colorChooserCss,\n    window: targetWindow,\n  });\n\n  const [open, setOpen] = useState(false);\n\n  const allColors: string[][] = saltColorOverrides\n    ? getColorPalettes(saltColorOverrides)\n    : getColorPalettes();\n  const displayColorName = displayHexOnly\n    ? getHexValue(color?.hex, disableAlphaChooser)\n    : getColorNameByHexValue(\n        color?.hex,\n        disableAlphaChooser,\n        saltColorOverrides,\n      );\n\n  const handleOpenChange = (open: boolean) => setOpen(open);\n\n  const alphaForTabs = isTransparent(color?.hex)\n    ? defaultAlpha\n    : (color?.rgba?.a ?? defaultAlpha);\n\n  const tabsMapping = createTabsMapping({\n    swatches: showSwatches,\n    colorPicker: showColorPicker,\n    disableAlphaChooser,\n    allColors,\n    color,\n    alpha: alphaForTabs,\n    handleColorChange: onSelect,\n    displayColorName,\n    placeholder,\n    onDialogClosed: () => {\n      setOpen(false);\n    },\n  });\n\n  const [activeTab, setActiveTab] = useState<number>(\n    getActiveTab(color?.hex, tabsMapping, saltColorOverrides),\n  );\n  const onDefaultSelected = (): void => {\n    if (activeTab === 0 && showSwatches) {\n      onClear();\n      handleOpenChange(false);\n    } else {\n      onClear();\n    }\n  };\n\n  const onTabClick = (index: number): void => {\n    setActiveTab(index);\n  };\n\n  const OverlayContent = () => {\n    return (\n      <div\n        className={clsx(withBaseName(\"overlayContent\"))}\n        data-testid=\"overlay-content\"\n      >\n        <Button\n          data-testid=\"default-button\"\n          variant=\"secondary\"\n          className={clsx(withBaseName(\"defaultButton\"))}\n          onClick={onDefaultSelected}\n        >\n          <RefreshIcon className={clsx(withBaseName(\"refreshIcon\"))} />\n          Default\n        </Button>\n        <DictTabs\n          tabs={tabsMapping}\n          hexValue={color?.hex}\n          onTabClick={onTabClick}\n          activeTab={activeTab}\n        />\n      </div>\n    );\n  };\n\n  return (\n    <Overlay placement=\"bottom\" data-testid=\"color-chooser-overlay\">\n      <OverlayTrigger>\n        <Button\n          className={clsx(withBaseName(\"overlayButton\"), {\n            [withBaseName(\"overlayButtonHiddenLabel\")]: hideLabel,\n          })}\n          // @ts-ignore\n          data-testid=\"color-chooser-overlay-button\"\n          disabled={readOnly}\n          {...buttonProps}\n        >\n          {color && (\n            <div\n              className={clsx(withBaseName(\"overlayButtonSwatch\"), {\n                [withBaseName(\"overlayButtonSwatchWithBorder\")]:\n                  color?.hex.startsWith(\"#ffffff\"),\n                [withBaseName(\"overlayButtonSwatchTransparent\")]: isTransparent(\n                  color?.hex,\n                ),\n              })}\n              style={{\n                backgroundColor: color?.hex,\n              }}\n            />\n          )}\n          {!hideLabel && (\n            <div className={withBaseName(\"overlayButtonText\")}>\n              {displayColorName ?? placeholder ?? \"No color selected\"}\n            </div>\n          )}\n        </Button>\n      </OverlayTrigger>\n      <OverlayPanel>\n        <OverlayPanelCloseButton />\n        <OverlayPanelContent>\n          <OverlayContent />\n        </OverlayPanelContent>\n      </OverlayPanel>\n    </Overlay>\n  );\n};\n"],"names":["makePrefixer","hexValueWithoutAlpha","saltColorMap","convertColorMapValueToHex","useWindow","useComponentCssInjection","colorChooserCss","useState","getColorPalettes","getHexValue","getColorNameByHexValue","open","isTransparent","createTabsMapping","jsxs","clsx","Button","jsx","RefreshIcon","DictTabs","Overlay","OverlayTrigger","OverlayPanel","OverlayPanelCloseButton","OverlayPanelContent"],"mappings":"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"}
+{"version":3,"file":"ColorChooser.js","sources":["../src/color-chooser/ColorChooser.tsx"],"sourcesContent":["import {\n  Button,\n  type ButtonProps,\n  makePrefixer,\n  Overlay,\n  OverlayPanel,\n  OverlayPanelCloseButton,\n  OverlayPanelContent,\n  OverlayTrigger,\n} from \"@salt-ds/core\";\nimport { RefreshIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ChangeEvent, useState } from \"react\";\nimport type { Color } from \"./Color\";\nimport colorChooserCss from \"./ColorChooser.css\";\nimport {\n  convertColorMapValueToHex,\n  getColorNameByHexValue,\n  getHexValue,\n  hexValueWithoutAlpha,\n} from \"./ColorHelpers\";\nimport { isTransparent } from \"./color-utils\";\nimport { saltColorMap } from \"./colorMap\";\nimport { createTabsMapping } from \"./createTabsMapping\";\nimport { type ColorChooserTabs, DictTabs } from \"./DictTabs\";\nimport { getColorPalettes } from \"./GetColorPalettes\";\n\nconst withBaseName = makePrefixer(\"saltColorChooser\");\n\nfunction getActiveTab(\n  hexValue: string | undefined,\n  tabs: ColorChooserTabs,\n  saltColorOverrides: Record<string, string> | undefined,\n): number {\n  if (tabs.Swatches && tabs[\"Color Picker\"]) {\n    const hexNoAlpha: string | undefined = hexValueWithoutAlpha(hexValue);\n    const colors = saltColorOverrides ?? saltColorMap;\n    // if hexNoAlpha is a Salt color or null/undefined then set the active tab as Swatches\n    if (\n      hexNoAlpha &&\n      !Object.keys(colors).find(\n        (key: string) =>\n          convertColorMapValueToHex(colors[key])?.toLowerCase() ===\n          hexNoAlpha?.toLowerCase(),\n      )\n    ) {\n      return 1;\n    }\n  }\n  return 0;\n}\n\nexport interface ColorChooserProps {\n  color: Color | undefined;\n  defaultAlpha?: number;\n  disableAlphaChooser?: boolean;\n  displayHexOnly?: boolean;\n  hideLabel?: boolean;\n  onClear: () => void; // called when user clicks \"default\" button\n  onSelect: (\n    color: Color | undefined,\n    finalSelection: boolean,\n    event?: ChangeEvent,\n  ) => void;\n  placeholder?: string;\n  buttonProps?: Partial<ButtonProps>;\n  saltColorOverrides?: Record<string, string>;\n  showSwatches?: boolean;\n  showColorPicker?: boolean;\n  readOnly?: boolean;\n}\n\nexport const ColorChooser = ({\n  onClear,\n  onSelect,\n  color,\n  showSwatches = true,\n  showColorPicker = true,\n  defaultAlpha = 1,\n  disableAlphaChooser = false,\n  hideLabel = false,\n  placeholder,\n  buttonProps,\n  saltColorOverrides,\n  readOnly = false,\n  displayHexOnly = false,\n}: ColorChooserProps): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-color-chooser\",\n    css: colorChooserCss,\n    window: targetWindow,\n  });\n\n  const [open, setOpen] = useState(false);\n\n  const allColors: string[][] = saltColorOverrides\n    ? getColorPalettes(saltColorOverrides)\n    : getColorPalettes();\n  const displayColorName = displayHexOnly\n    ? getHexValue(color?.hex, disableAlphaChooser)\n    : getColorNameByHexValue(\n        color?.hex,\n        disableAlphaChooser,\n        saltColorOverrides,\n      );\n\n  const handleOpenChange = (open: boolean) => setOpen(open);\n\n  const alphaForTabs = isTransparent(color?.hex)\n    ? defaultAlpha\n    : (color?.rgba?.a ?? defaultAlpha);\n\n  const tabsMapping = createTabsMapping({\n    swatches: showSwatches,\n    colorPicker: showColorPicker,\n    disableAlphaChooser,\n    allColors,\n    color,\n    alpha: alphaForTabs,\n    handleColorChange: onSelect,\n    displayColorName,\n    placeholder,\n    onDialogClosed: () => {\n      setOpen(false);\n    },\n  });\n\n  const [activeTab, setActiveTab] = useState<number>(\n    getActiveTab(color?.hex, tabsMapping, saltColorOverrides),\n  );\n  const onDefaultSelected = (): void => {\n    if (activeTab === 0 && showSwatches) {\n      onClear();\n      handleOpenChange(false);\n    } else {\n      onClear();\n    }\n  };\n\n  const onTabClick = (index: number): void => {\n    setActiveTab(index);\n  };\n\n  const overlayContent = (\n    <div\n      className={clsx(withBaseName(\"overlayContent\"))}\n      data-testid=\"overlay-content\"\n    >\n      <Button\n        data-testid=\"default-button\"\n        variant=\"secondary\"\n        className={clsx(withBaseName(\"defaultButton\"))}\n        onClick={onDefaultSelected}\n      >\n        <RefreshIcon className={clsx(withBaseName(\"refreshIcon\"))} />\n        Default\n      </Button>\n      <DictTabs\n        tabs={tabsMapping}\n        hexValue={color?.hex}\n        onTabClick={onTabClick}\n        activeTab={activeTab}\n      />\n    </div>\n  );\n\n  return (\n    <Overlay placement=\"bottom\" data-testid=\"color-chooser-overlay\">\n      <OverlayTrigger>\n        <Button\n          className={clsx(withBaseName(\"overlayButton\"), {\n            [withBaseName(\"overlayButtonHiddenLabel\")]: hideLabel,\n          })}\n          // @ts-ignore\n          data-testid=\"color-chooser-overlay-button\"\n          disabled={readOnly}\n          {...buttonProps}\n        >\n          {color && (\n            <div\n              className={clsx(withBaseName(\"overlayButtonSwatch\"), {\n                [withBaseName(\"overlayButtonSwatchWithBorder\")]:\n                  color?.hex.startsWith(\"#ffffff\"),\n                [withBaseName(\"overlayButtonSwatchTransparent\")]: isTransparent(\n                  color?.hex,\n                ),\n              })}\n              style={{\n                backgroundColor: color?.hex,\n              }}\n            />\n          )}\n          {!hideLabel && (\n            <div className={withBaseName(\"overlayButtonText\")}>\n              {displayColorName ?? placeholder ?? \"No color selected\"}\n            </div>\n          )}\n        </Button>\n      </OverlayTrigger>\n      <OverlayPanel>\n        <OverlayPanelCloseButton />\n        <OverlayPanelContent>{overlayContent}</OverlayPanelContent>\n      </OverlayPanel>\n    </Overlay>\n  );\n};\n"],"names":["makePrefixer","hexValueWithoutAlpha","saltColorMap","convertColorMapValueToHex","useWindow","useComponentCssInjection","colorChooserCss","useState","getColorPalettes","getHexValue","getColorNameByHexValue","open","isTransparent","createTabsMapping","jsxs","clsx","Button","jsx","RefreshIcon","DictTabs","Overlay","OverlayTrigger","OverlayPanel","OverlayPanelCloseButton","OverlayPanelContent"],"mappings":"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"}

package/dist-cjs/color-chooser/ColorPicker.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltColorChooserPicker {\n  display: flex;\n  flex-direction: row;\n}\n\n.saltColorChooserPicker-inputContainer {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  border-left: 1px solid var(--salt-separable-secondary-borderColor);\n}\n\n.saltColorChooserPicker-applyButtonDiv {\n  padding: var(--salt-size-unit) calc(2 * var(--salt-size-unit)) 0px calc(1.5 * var(--salt-size-unit));\n  align-self: center;\n}\n\n.saltColorChooserPicker-textDivOverrides {\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-fontWeight-strong);\n  color: var(--salt-content-primary-foreground);\n  padding: 0px !important;\n}\n\n.saltColorChooserPicker-inputDivs {\n  display: flex;\n  flex-direction: column;\n  align-content: stretch;\n  padding: var(--salt-size-unit) 0px 0px var(--salt-size-unit);\n}\n\n/**\n Warning: Below are a lot of overridden styles from react-color\n **/\n\n/* Entire container for react-color component */\n.saltColorChooserPicker-root,\n.saltColorChooserPicker-rootDisabledAlpha {\n  box-shadow: none !important;\n  padding: 8px 8px 0px 0px !important;\n  background: transparent !important;\n  width: calc(9 * var(--salt-size-stackable)) !important;\n}\n/* Color sliders container */\n.saltColorChooserPicker-root .flexbox-fix,\n.saltColorChooserPicker-rootDisabledAlpha .flexbox-fix {\n  padding-top: 8px !important;\n}\n/* RGB Inputs provided by react-color */\n.saltColorChooserPicker-rootDisabledAlpha .flexbox-fix ~ .flexbox-fix,\n.saltColorChooserPicker-root .flexbox-fix ~ .flexbox-fix {\n  display: none !important;\n}\n/* Height of hue and saturation boxes */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div {\n  height: calc(var(--salt-size-stackable) / 2) !important;\n}\n/* Height of saturation slider container */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div {\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Height of saturation slider */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div > div {\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Width of color preview box */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div {\n  width: calc(var(--salt-size-stackable) / 2) !important;\n}\n/* Height of hue slider container */\n.saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div {\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Height of hue slider */\n.saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div > div {\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n\n.saltColorChooserPicker-swatchPickerStyles .saturation-white > div > div {\n  width: calc(var(--salt-size-base) / 4) !important;\n  height: calc(var(--salt-size-base) / 4) !important;\n}\n/* Cursor on hue slider */\n.saltColorChooserPicker-rootDisabledAlpha .hue-horizontal > div > div {\n  position: relative;\n  margin-top: 0px !important;\n  width: 4px !important;\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n  background: var(--salt-container-primary-background) !important;\n  border-bottom: var(--salt-size-fixed-100) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n}\n";
+var css_248z = ".saltColorChooserPicker {\n  display: flex;\n  flex-direction: row;\n}\n\n.saltColorChooserPicker-inputContainer {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  border-left: 1px solid var(--salt-separable-secondary-borderColor);\n}\n\n.saltColorChooserPicker-applyButtonDiv {\n  padding: var(--salt-size-unit) calc(2 * var(--salt-size-unit)) 0px calc(1.5 * var(--salt-size-unit));\n  align-self: center;\n}\n\n.saltColorChooserPicker-textDivOverrides {\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-fontWeight-strong);\n  color: var(--salt-content-primary-foreground);\n  padding: 0px !important;\n}\n\n.saltColorChooserPicker-inputDivs {\n  display: flex;\n  flex-direction: column;\n  align-content: stretch;\n  padding: var(--salt-size-unit) 0px 0px var(--salt-size-unit);\n}\n\n/**\n Warning: Below are a lot of overridden styles from react-color\n **/\n\n/* Entire container for react-color component */\n.saltColorChooserPicker-root,\n.saltColorChooserPicker-rootDisabledAlpha {\n  box-shadow: none !important;\n  padding: 8px 8px 0px 0px !important;\n  background: transparent !important;\n  width: calc(9 * var(--salt-size-stackable)) !important;\n}\n/* Color sliders container */\n.saltColorChooserPicker-root .flexbox-fix,\n.saltColorChooserPicker-rootDisabledAlpha .flexbox-fix {\n  padding-top: 8px !important;\n}\n/* RGB Inputs provided by react-color */\n.saltColorChooserPicker-rootDisabledAlpha .flexbox-fix ~ .flexbox-fix,\n.saltColorChooserPicker-root .flexbox-fix ~ .flexbox-fix {\n  display: none !important;\n}\n/* Height of hue and saturation boxes */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div {\n  height: calc(var(--salt-size-stackable) / 2) !important;\n}\n/* Height of saturation slider container */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div {\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Height of saturation slider */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div > div {\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Width of color preview box */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div {\n  width: calc(var(--salt-size-stackable) / 2) !important;\n}\n/* Height of hue slider container */\n.saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div {\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Height of hue slider */\n.saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div > div {\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n\n.saltColorChooserPicker-swatchPickerStyles .saturation-white > div > div {\n  width: calc(var(--salt-size-base) / 4) !important;\n  height: calc(var(--salt-size-base) / 4) !important;\n}\n/* Cursor on hue slider */\n.saltColorChooserPicker-rootDisabledAlpha .hue-horizontal > div > div {\n  position: relative;\n  margin-top: 0px !important;\n  width: 4px !important;\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n  background: var(--salt-container-primary-background) !important;\n  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-editable-borderColor);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=ColorPicker.css.js.map

package/dist-cjs/color-chooser/ColorPicker.js

@@ -2,15 +2,15 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var clsx = require('clsx');
 var reactColor = require('react-color');
 var Color = require('./Color.js');
 var ColorHelpers = require('./ColorHelpers.js');
+var ColorPicker$1 = require('./ColorPicker.css.js');
 var HexInput = require('./HexInput.js');
 var RGBAInput = require('./RGBAInput.js');
-var styles = require('@salt-ds/styles');
-var window = require('@salt-ds/window');
-var ColorPicker$1 = require('./ColorPicker.css.js');
 
 const withBaseName = core.makePrefixer("saltColorChooserPicker");
 const ColorPicker = ({

package/dist-cjs/color-chooser/ColorPicker.js.map

@@ -1 +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":["makePrefixer","useWindow","useComponentCssInjection","colorPickerCss","Color","alpha","jsxs","clsx","jsx","SketchPicker","HexInput","hexValueWithoutAlpha","RGBAInput","Button"],"mappings":"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"}
+{"version":3,"file":"ColorPicker.js","sources":["../src/color-chooser/ColorPicker.tsx"],"sourcesContent":["import { Button, makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\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 colorPickerCss from \"./ColorPicker.css\";\nimport { HexInput } from \"./HexInput\";\nimport { RGBAInput } from \"./RGBAInput\";\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":["makePrefixer","useWindow","useComponentCssInjection","colorPickerCss","Color","alpha","jsxs","clsx","jsx","SketchPicker","HexInput","hexValueWithoutAlpha","RGBAInput","Button"],"mappings":"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"}

package/dist-cjs/color-chooser/DictTabs.js

@@ -3,11 +3,11 @@
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
 var clsx = require('clsx');
-require('../tabs/TabActivationIndicator.js');
-var Tabstrip = require('../tabs/Tabstrip.js');
 var Tab = require('../tabs/Tab.js');
+require('../tabs/TabActivationIndicator.js');
 require('../tabs/TabPanel.js');
 require('../tabs/Tabs.js');
+var Tabstrip = require('../tabs/Tabstrip.js');
 
 const withBaseName = core.makePrefixer("saltColorChooserDictTabs");
 const DictTabs = ({

package/dist-cjs/color-chooser/HexInput.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltColorChooserHexInput {\n  display: flex;\n  flex-direction: row;\n  padding: 0px 0px var(--salt-size-container-spacing) 0px;\n}\n\n.saltColorChooserHexInput-hashSign {\n  margin-top: 5px;\n  font-size: var(--salt-text-label-fontSize);\n  padding-right: 6px;\n  color: var(--salt-content-secondary-foreground);\n  padding-left: 6px;\n}\n\n.saltColorChooserHexInput-input {\n  width: var(--salt-size-unit);\n  border-bottom: var(--salt-size-fixed-100) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n}\n";
+var css_248z = ".saltColorChooserHexInput {\n  display: flex;\n  flex-direction: row;\n  padding: 0px 0px var(--salt-size-container-spacing) 0px;\n}\n\n.saltColorChooserHexInput-hashSign {\n  margin-top: 5px;\n  font-size: var(--salt-text-label-fontSize);\n  padding-right: 6px;\n  color: var(--salt-content-secondary-foreground);\n  padding-left: 6px;\n}\n\n.saltColorChooserHexInput-input {\n  width: var(--salt-size-unit);\n  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-editable-borderColor);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=HexInput.css.js.map

package/dist-cjs/color-chooser/HexInput.js

@@ -2,13 +2,13 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var clsx = require('clsx');
 var react = require('react');
 var InputLegacy = require('../input-legacy/InputLegacy.js');
 require('../input-legacy/StaticInputAdornment.js');
 var ColorHelpers = require('./ColorHelpers.js');
-var styles = require('@salt-ds/styles');
-var window = require('@salt-ds/window');
 var HexInput$1 = require('./HexInput.css.js');
 
 const withBaseName = core.makePrefixer("saltColorChooserHexInput");

package/dist-cjs/color-chooser/HexInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"HexInput.js","sources":["../src/color-chooser/HexInput.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport type { ChangeEvent, FocusEvent, KeyboardEvent } from \"react\";\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?: 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: 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: KeyboardEvent<HTMLInputElement>): void => {\n    if (e.key === \"Enter\") {\n      isValidHex(hexInputValue) && onSubmit(hexInputValue);\n    }\n  };\n\n  const handleOnBlurHex = (e: 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":["makePrefixer","useWindow","useComponentCssInjection","hexInputCss","useState","useEffect","isValidHex","clsx","jsx","Input"],"mappings":";;;;;;;;;;;;;AAYA,MAAM,YAAA,GAAeA,kBAAa,0BAA0B,CAAA;AAQrD,MAAM,WAAW,CAAC;AAAA,EACvB,QAAA;AAAA,EACA,mBAAA;AAAA,EACA;AACF,CAAkC,KAAA;AAChC,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,UAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,CAAC,aAAe,EAAA,gBAAgB,CAAI,GAAAC,cAAA;AAAA,IACxC;AAAA,GACF;AAEA,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,gBAAA,CAAiB,QAAQ,CAAA;AAAA,GAC3B,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAM,MAAA,oBAAA,GAAuB,CAC3B,KAAA,EACA,KACS,KAAA;AACT,IAAI,IAAA,mBAAA,IAAuB,KAAM,CAAA,MAAA,GAAS,CAAG,EAAA;AAC3C,MAAiB,gBAAA,CAAA,CAAA,CAAA,EAAI,KAAK,CAAE,CAAA,CAAA;AAAA;AAE9B,IAAA,IAAI,CAAC,mBAAqB,EAAA;AACxB,MAAiB,gBAAA,CAAA,CAAA,CAAA,EAAI,KAAK,CAAE,CAAA,CAAA;AAAA;AAC9B,GACF;AAEA,EAAM,MAAA,gBAAA,GAAmB,CAAC,CAA6C,KAAA;AACrE,IAAI,IAAA,CAAA,CAAE,QAAQ,OAAS,EAAA;AACrB,MAAWC,uBAAA,CAAA,aAAa,CAAK,IAAA,QAAA,CAAS,aAAa,CAAA;AAAA;AACrD,GACF;AAEA,EAAM,MAAA,eAAA,GAAkB,CAAC,CAA0C,KAAA;AACjE,IAAAA,uBAAA,CAAW,aAAa,CAAA,IAAK,QAAS,CAAA,aAAA,EAAe,CAAC,CAAA;AAAA,GACxD;AAEA,EAAA,uCACG,KAAI,EAAA,EAAA,SAAA,EAAWC,SAAK,CAAA,YAAA,EAAc,CACjC,EAAA,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAAC,UAAK,SAAW,EAAAD,SAAA,CAAK,aAAa,UAAU,CAAC,GAAG,QAAC,EAAA,GAAA,EAAA,CAAA;AAAA,oBAClDC,cAAA;AAAA,MAACC,uBAAA;AAAA,MAAA;AAAA,QACC,aAAY,EAAA,WAAA;AAAA,QACZ,SAAW,EAAAF,SAAA,CAAK,YAAa,CAAA,OAAO,CAAC,CAAA;AAAA,QACrC,QAAO,aAAe,IAAA,IAAA,GAAA,MAAA,GAAA,aAAA,CAAA,QAAA,EAAA,CAAW,OAAQ,CAAA,GAAA,EAAK,IAAI,WAAiB,EAAA,KAAA,EAAA;AAAA,QACnE,QAAU,EAAA,oBAAA;AAAA,QACV,SAAW,EAAA,gBAAA;AAAA,QACX,MAAQ,EAAA;AAAA;AAAA;AACV,GACF,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"HexInput.js","sources":["../src/color-chooser/HexInput.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, FocusEvent, KeyboardEvent } from \"react\";\nimport { useEffect, useState } from \"react\";\nimport { InputLegacy as Input } from \"../input-legacy\";\nimport { isValidHex } from \"./ColorHelpers\";\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?: 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: 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: KeyboardEvent<HTMLInputElement>): void => {\n    if (e.key === \"Enter\") {\n      isValidHex(hexInputValue) && onSubmit(hexInputValue);\n    }\n  };\n\n  const handleOnBlurHex = (e: 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":["makePrefixer","useWindow","useComponentCssInjection","hexInputCss","useState","useEffect","isValidHex","clsx","jsx","Input"],"mappings":";;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,kBAAa,0BAA0B,CAAA;AAQrD,MAAM,WAAW,CAAC;AAAA,EACvB,QAAA;AAAA,EACA,mBAAA;AAAA,EACA;AACF,CAAkC,KAAA;AAChC,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,UAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,CAAC,aAAe,EAAA,gBAAgB,CAAI,GAAAC,cAAA;AAAA,IACxC;AAAA,GACF;AAEA,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,gBAAA,CAAiB,QAAQ,CAAA;AAAA,GAC3B,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAM,MAAA,oBAAA,GAAuB,CAC3B,KAAA,EACA,KACS,KAAA;AACT,IAAI,IAAA,mBAAA,IAAuB,KAAM,CAAA,MAAA,GAAS,CAAG,EAAA;AAC3C,MAAiB,gBAAA,CAAA,CAAA,CAAA,EAAI,KAAK,CAAE,CAAA,CAAA;AAAA;AAE9B,IAAA,IAAI,CAAC,mBAAqB,EAAA;AACxB,MAAiB,gBAAA,CAAA,CAAA,CAAA,EAAI,KAAK,CAAE,CAAA,CAAA;AAAA;AAC9B,GACF;AAEA,EAAM,MAAA,gBAAA,GAAmB,CAAC,CAA6C,KAAA;AACrE,IAAI,IAAA,CAAA,CAAE,QAAQ,OAAS,EAAA;AACrB,MAAWC,uBAAA,CAAA,aAAa,CAAK,IAAA,QAAA,CAAS,aAAa,CAAA;AAAA;AACrD,GACF;AAEA,EAAM,MAAA,eAAA,GAAkB,CAAC,CAA0C,KAAA;AACjE,IAAAA,uBAAA,CAAW,aAAa,CAAA,IAAK,QAAS,CAAA,aAAA,EAAe,CAAC,CAAA;AAAA,GACxD;AAEA,EAAA,uCACG,KAAI,EAAA,EAAA,SAAA,EAAWC,SAAK,CAAA,YAAA,EAAc,CACjC,EAAA,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAAC,UAAK,SAAW,EAAAD,SAAA,CAAK,aAAa,UAAU,CAAC,GAAG,QAAC,EAAA,GAAA,EAAA,CAAA;AAAA,oBAClDC,cAAA;AAAA,MAACC,uBAAA;AAAA,MAAA;AAAA,QACC,aAAY,EAAA,WAAA;AAAA,QACZ,SAAW,EAAAF,SAAA,CAAK,YAAa,CAAA,OAAO,CAAC,CAAA;AAAA,QACrC,QAAO,aAAe,IAAA,IAAA,GAAA,MAAA,GAAA,aAAA,CAAA,QAAA,EAAA,CAAW,OAAQ,CAAA,GAAA,EAAK,IAAI,WAAiB,EAAA,KAAA,EAAA;AAAA,QACnE,QAAU,EAAA,oBAAA;AAAA,QACV,SAAW,EAAA,gBAAA;AAAA,QACX,MAAQ,EAAA;AAAA;AAAA;AACV,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/color-chooser/RGBAInput.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltColorChooser-rgbaInput {\n  width: var(--salt-size-unit);\n  border-bottom: var(--salt-size-fixed-100) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n  padding-top: var(--salt-size-unit);\n}\n\n.saltColorChooser-opacityInput {\n  min-width: 40px !important;\n  width: 40px !important;\n  min-height: unset !important;\n  border-bottom: var(--salt-size-fixed-100) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n}\n\n.saltColorChooser-rgbaText {\n  margin-top: 5px;\n  font-size: var(--salt-text-label-fontSize);\n  color: var(--salt-content-secondary-foreground);\n  padding-top: 4px;\n  padding-right: 6px;\n  padding-left: 6px;\n}\n\n.saltColorChooser-rgbaInputDiv {\n  display: flex;\n  flex-direction: row;\n  padding: 0px 0px var(--salt-size-unit) 0px;\n}\n\n.saltColorChooser-overrideInput {\n  min-width: 0em;\n  background: transparent !important;\n  color: var(--salt-content-primary-foreground);\n  border-bottom: 1px solid var(--salt-content-primary-foreground);\n}\n\n.saltColorChooser-alphaSpacerDiv {\n  height: 24px;\n}\n\n.saltColorChooser-textDivOverrides {\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-fontWeight-strong);\n  color: var(--salt-content-primary-foreground);\n  padding: 0px !important;\n}\n";
+var css_248z = ".saltColorChooser-rgbaInput {\n  width: var(--salt-size-unit);\n  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-editable-borderColor);\n  padding-top: var(--salt-size-unit);\n}\n\n.saltColorChooser-opacityInput {\n  min-width: 40px !important;\n  width: 40px !important;\n  min-height: unset !important;\n  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-editable-borderColor);\n}\n\n.saltColorChooser-rgbaText {\n  margin-top: 5px;\n  font-size: var(--salt-text-label-fontSize);\n  color: var(--salt-content-secondary-foreground);\n  padding-top: 4px;\n  padding-right: 6px;\n  padding-left: 6px;\n}\n\n.saltColorChooser-rgbaInputDiv {\n  display: flex;\n  flex-direction: row;\n  padding: 0px 0px var(--salt-size-unit) 0px;\n}\n\n.saltColorChooser-overrideInput {\n  min-width: 0em;\n  background: transparent !important;\n  color: var(--salt-content-primary-foreground);\n  border-bottom: 1px solid var(--salt-content-primary-foreground);\n}\n\n.saltColorChooser-alphaSpacerDiv {\n  height: 24px;\n}\n\n.saltColorChooser-textDivOverrides {\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-fontWeight-strong);\n  color: var(--salt-content-primary-foreground);\n  padding: 0px !important;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=RGBAInput.css.js.map

package/dist-cjs/color-chooser/RGBAInput.js

@@ -2,12 +2,12 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
-var clsx = require('clsx');
-var AlphaInputField = require('./AlphaInputField.js');
-var RGBAInputField = require('./RGBAInputField.js');
 var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var AlphaInputField = require('./AlphaInputField.js');
 var RGBAInput$1 = require('./RGBAInput.css.js');
+var RGBAInputField = require('./RGBAInputField.js');
 
 const withBaseName = core.makePrefixer("saltColorChooser");
 const RGBAInput = ({

package/dist-cjs/color-chooser/RGBAInput.js.map

@@ -1 +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":["makePrefixer","useWindow","useComponentCssInjection","rgbaInputCss","jsxs","Fragment","jsx","clsx","RGBInput","AlphaInput"],"mappings":";;;;;;;;;;;AAaA,MAAM,YAAA,GAAeA,kBAAa,kBAAkB,CAAA;AAa7C,MAAM,YAAY,CAAC;AAAA,EACxB,mBAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA;AAAA,EACA;AACF,CAAmC,KAAA;AACjC,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAC,WAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,uBAEIC,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAAC,UAAK,SAAW,EAAAC,SAAA,CAAK,aAAa,kBAAkB,CAAC,GAAI,QAAS,EAAA,QAAA,EAAA,CAAA;AAAA,IAClE,CAAC,GAAA,EAAK,GAAK,EAAA,GAAG,CAAE,CAAA,GAAA,CAAI,CAAC,KAAA,qBACnBH,eAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,YAAA,CAAa,cAAc,CACzC,EAAA,QAAA,EAAA;AAAA,sBAAAE,cAAA,CAAC,UAAK,SAAW,EAAA,YAAA,CAAa,UAAU,CACrC,EAAA,QAAA,EAAA,KAAA,CAAM,aACT,EAAA,CAAA;AAAA,sBACAA,cAAA;AAAA,QAACE,uBAAA;AAAA,QAAA;AAAA,UACC,SAAA;AAAA,UACA,KAAA;AAAA,UACA,QAAU,EAAA;AAAA;AAAA;AACZ,KAAA,EAAA,EARiD,KASnD,CACD,CAAA;AAAA,IACA,CAAC,sCACCJ,eAAA,CAAA,KAAA,EAAA,EAAI,WAAWG,SAAK,CAAA,YAAA,CAAa,cAAc,CAAC,CAC/C,EAAA,QAAA,EAAA;AAAA,sBAAAD,cAAA,CAAC,UAAK,SAAW,EAAAC,SAAA,CAAK,aAAa,UAAU,CAAC,GAAG,QAAC,EAAA,GAAA,EAAA,CAAA;AAAA,sBAClDD,cAAA;AAAA,QAACG,0BAAA;AAAA,QAAA;AAAA,UACC,YAAY,MAAO,CAAA,UAAA,CAAW,UAAU,CAAE,CAAA,OAAA,CAAQ,CAAC,CAAC,CAAA;AAAA,UACpD,QAAU,EAAA;AAAA;AAAA;AACZ,KACF,EAAA,CAAA,kCAEC,KAAI,EAAA,EAAA,SAAA,EAAWF,UAAK,YAAa,CAAA,gBAAgB,CAAC,CAAG,EAAA;AAAA,GAE1D,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"RGBAInput.js","sources":["../src/color-chooser/RGBAInput.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 } from \"react\";\nimport { AlphaInput } from \"./AlphaInputField\";\nimport type { RGBAValue } from \"./Color\";\nimport rgbaInputCss from \"./RGBAInput.css\";\nimport { RGBInput } from \"./RGBAInputField\";\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":["makePrefixer","useWindow","useComponentCssInjection","rgbaInputCss","jsxs","Fragment","jsx","clsx","RGBInput","AlphaInput"],"mappings":";;;;;;;;;;;AAUA,MAAM,YAAA,GAAeA,kBAAa,kBAAkB,CAAA;AAa7C,MAAM,YAAY,CAAC;AAAA,EACxB,mBAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA;AAAA,EACA;AACF,CAAmC,KAAA;AACjC,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAC,WAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,uBAEIC,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAAC,UAAK,SAAW,EAAAC,SAAA,CAAK,aAAa,kBAAkB,CAAC,GAAI,QAAS,EAAA,QAAA,EAAA,CAAA;AAAA,IAClE,CAAC,GAAA,EAAK,GAAK,EAAA,GAAG,CAAE,CAAA,GAAA,CAAI,CAAC,KAAA,qBACnBH,eAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,YAAA,CAAa,cAAc,CACzC,EAAA,QAAA,EAAA;AAAA,sBAAAE,cAAA,CAAC,UAAK,SAAW,EAAA,YAAA,CAAa,UAAU,CACrC,EAAA,QAAA,EAAA,KAAA,CAAM,aACT,EAAA,CAAA;AAAA,sBACAA,cAAA;AAAA,QAACE,uBAAA;AAAA,QAAA;AAAA,UACC,SAAA;AAAA,UACA,KAAA;AAAA,UACA,QAAU,EAAA;AAAA;AAAA;AACZ,KAAA,EAAA,EARiD,KASnD,CACD,CAAA;AAAA,IACA,CAAC,sCACCJ,eAAA,CAAA,KAAA,EAAA,EAAI,WAAWG,SAAK,CAAA,YAAA,CAAa,cAAc,CAAC,CAC/C,EAAA,QAAA,EAAA;AAAA,sBAAAD,cAAA,CAAC,UAAK,SAAW,EAAAC,SAAA,CAAK,aAAa,UAAU,CAAC,GAAG,QAAC,EAAA,GAAA,EAAA,CAAA;AAAA,sBAClDD,cAAA;AAAA,QAACG,0BAAA;AAAA,QAAA;AAAA,UACC,YAAY,MAAO,CAAA,UAAA,CAAW,UAAU,CAAE,CAAA,OAAA,CAAQ,CAAC,CAAC,CAAA;AAAA,UACpD,QAAU,EAAA;AAAA;AAAA;AACZ,KACF,EAAA,CAAA,kCAEC,KAAI,EAAA,EAAA,SAAA,EAAWF,UAAK,YAAa,CAAA,gBAAgB,CAAC,CAAG,EAAA;AAAA,GAE1D,EAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/color-chooser/RGBAInputField.js

@@ -2,11 +2,11 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var react = require('react');
 var InputLegacy = require('../input-legacy/InputLegacy.js');
 require('../input-legacy/StaticInputAdornment.js');
-var styles = require('@salt-ds/styles');
-var window = require('@salt-ds/window');
 var RGBAInput = require('./RGBAInput.css.js');
 
 const withBaseName = core.makePrefixer("saltColorChooser");

package/dist-cjs/color-chooser/RGBAInputField.js.map

@@ -1 +1 @@
-{"version":3,"file":"RGBAInputField.js","sources":["../src/color-chooser/RGBAInputField.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport {\n  type ChangeEvent,\n  type FocusEvent,\n  type KeyboardEvent,\n  useEffect,\n  useState,\n} 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?: 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: 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: 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: 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":["makePrefixer","useWindow","useComponentCssInjection","rgbaInputCss","useState","useEffect","value","jsx","Input"],"mappings":"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"}
+{"version":3,"file":"RGBAInputField.js","sources":["../src/color-chooser/RGBAInputField.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  type ChangeEvent,\n  type FocusEvent,\n  type KeyboardEvent,\n  useEffect,\n  useState,\n} from \"react\";\nimport { InputLegacy as Input } from \"../input-legacy\";\nimport type { RGBAValue } from \"./Color\";\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?: 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: 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: 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: 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":["makePrefixer","useWindow","useComponentCssInjection","rgbaInputCss","useState","useEffect","value","jsx","Input"],"mappings":"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"}

package/dist-cjs/color-chooser/Swatch.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-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: var(--salt-cursor-hover);\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: var(--salt-cursor-hover);\n}\n\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-whiteSwatch {\n  border: var(--salt-size-fixed-100) 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-fixed-100) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n}\n\n.saltColorChooserSwatch-active {\n  outline: var(--salt-size-fixed-100) 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: var(--salt-cursor-active);\n}\n\n.saltColorChooserSwatch-transparent {\n  border: var(--salt-size-fixed-100) 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";
+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: var(--salt-cursor-hover);\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: var(--salt-cursor-hover);\n}\n\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-whiteSwatch {\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) 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-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);\n}\n\n.saltColorChooserSwatch-active {\n  outline: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);\n  border: var(--salt-focused-outlineWidth) var(--salt-borderStyle-solid) var(--salt-actionable-cta-foreground-active) !important;\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: var(--salt-cursor-active);\n}\n\n.saltColorChooserSwatch-transparent {\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-sentiment-negative-foreground-decorative) !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";
 
 module.exports = css_248z;
 //# sourceMappingURL=Swatch.css.js.map

package/dist-cjs/color-chooser/Swatches.js

@@ -2,12 +2,12 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
-var clsx = require('clsx');
-var AlphaInputField = require('./AlphaInputField.js');
-var SwatchesPicker = require('./SwatchesPicker.js');
 var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var AlphaInputField = require('./AlphaInputField.js');
 var Swatches$1 = require('./Swatches.css.js');
+var SwatchesPicker = require('./SwatchesPicker.js');
 
 const withBaseName = core.makePrefixer("saltColorChooserSwatches");
 const Swatches = ({

package/dist-cjs/color-chooser/Swatches.js.map

@@ -1 +1 @@
-{"version":3,"file":"Swatches.js","sources":["../src/color-chooser/Swatches.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport type { ChangeEvent } from \"react\";\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?: 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?: 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":["makePrefixer","useWindow","useComponentCssInjection","swatchesCss","jsxs","clsx","jsx","SwatchesPicker","AlphaInput","alpha"],"mappings":";;;;;;;;;;;AAYA,MAAM,YAAA,GAAeA,kBAAa,0BAA0B,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;AACF,CAAqC,KAAA;AACnC,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,eAAA;AAAA,IACR,GAAK,EAAAC,UAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AACD,EACE,uBAAAC,eAAA,CAAC,SAAI,aAAY,EAAA,UAAA,EAAW,WAAWC,SAAK,CAAA,YAAA,CAAa,WAAW,CAAC,CACnE,EAAA,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAACC,6BAAA;AAAA,MAAA;AAAA,QACC,SAAA;AAAA,QACA,KAAA;AAAA,QACA,QAAU,EAAA,iBAAA;AAAA,QACV,KAAA;AAAA,QACA;AAAA;AAAA,KACF;AAAA,oCACC,KAAI,EAAA,EAAA,SAAA,EAAWF,UAAK,YAAa,CAAA,SAAS,CAAC,CAC1C,EAAA,QAAA,EAAA;AAAA,sBAAAD,eAAA,CAAC,KACC,EAAA,EAAA,QAAA,EAAA;AAAA,wBAAAE,cAAA,CAAC,UAAK,SAAW,EAAAD,SAAA,CAAK,aAAa,cAAc,CAAC,GAAG,QAAM,EAAA,QAAA,EAAA,CAAA;AAAA,wBAC3DC,cAAA,CAAC,UAAK,SAAW,EAAAD,SAAA,CAAK,aAAa,kBAAkB,CAAC,CACnD,EAAA,QAAA,EAAA,gBAAA,IAAoB,WACvB,EAAA;AAAA,OACF,EAAA,CAAA;AAAA,sCACC,KACC,EAAA,EAAA,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,UAAK,SAAW,EAAAD,SAAA,CAAK,aAAa,cAAc,CAAC,GAAG,QAAQ,EAAA,UAAA,EAAA,CAAA;AAAA,wBAC7DC,cAAA;AAAA,UAACE,0BAAA;AAAA,UAAA;AAAA,YACC,UAAY,EAAA,CAAA,KAAA,IAAA,IAAA,GAAA,MAAA,GAAA,KAAA,CAAO,IAAK,CAAA,CAAA,MAAM,IAAI,CAAI,GAAA,KAAA;AAAA,YACtC,aAAe,EAAA,IAAA;AAAA,YACf,QAAA,EAAU,CAACC,MAAAA,EAAe,CAA0B,KAAA;AAClD,cAAM,MAAA,QAAA,GAAW,+BAAO,QAASA,CAAAA,MAAAA,CAAAA;AACjC,cAAkB,iBAAA,CAAA,QAAA,EAAU,OAAO,CAAC,CAAA;AAAA;AACtC;AAAA;AACF,OACF,EAAA;AAAA,KACF,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Swatches.js","sources":["../src/color-chooser/Swatches.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 } from \"react\";\nimport { AlphaInput } from \"./AlphaInputField\";\nimport type { Color } from \"./Color\";\nimport swatchesCss from \"./Swatches.css\";\nimport { SwatchesPicker } from \"./SwatchesPicker\";\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?: 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?: 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":["makePrefixer","useWindow","useComponentCssInjection","swatchesCss","jsxs","clsx","jsx","SwatchesPicker","AlphaInput","alpha"],"mappings":";;;;;;;;;;;AAUA,MAAM,YAAA,GAAeA,kBAAa,0BAA0B,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;AACF,CAAqC,KAAA;AACnC,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,eAAA;AAAA,IACR,GAAK,EAAAC,UAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AACD,EACE,uBAAAC,eAAA,CAAC,SAAI,aAAY,EAAA,UAAA,EAAW,WAAWC,SAAK,CAAA,YAAA,CAAa,WAAW,CAAC,CACnE,EAAA,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAACC,6BAAA;AAAA,MAAA;AAAA,QACC,SAAA;AAAA,QACA,KAAA;AAAA,QACA,QAAU,EAAA,iBAAA;AAAA,QACV,KAAA;AAAA,QACA;AAAA;AAAA,KACF;AAAA,oCACC,KAAI,EAAA,EAAA,SAAA,EAAWF,UAAK,YAAa,CAAA,SAAS,CAAC,CAC1C,EAAA,QAAA,EAAA;AAAA,sBAAAD,eAAA,CAAC,KACC,EAAA,EAAA,QAAA,EAAA;AAAA,wBAAAE,cAAA,CAAC,UAAK,SAAW,EAAAD,SAAA,CAAK,aAAa,cAAc,CAAC,GAAG,QAAM,EAAA,QAAA,EAAA,CAAA;AAAA,wBAC3DC,cAAA,CAAC,UAAK,SAAW,EAAAD,SAAA,CAAK,aAAa,kBAAkB,CAAC,CACnD,EAAA,QAAA,EAAA,gBAAA,IAAoB,WACvB,EAAA;AAAA,OACF,EAAA,CAAA;AAAA,sCACC,KACC,EAAA,EAAA,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,UAAK,SAAW,EAAAD,SAAA,CAAK,aAAa,cAAc,CAAC,GAAG,QAAQ,EAAA,UAAA,EAAA,CAAA;AAAA,wBAC7DC,cAAA;AAAA,UAACE,0BAAA;AAAA,UAAA;AAAA,YACC,UAAY,EAAA,CAAA,KAAA,IAAA,IAAA,GAAA,MAAA,GAAA,KAAA,CAAO,IAAK,CAAA,CAAA,MAAM,IAAI,CAAI,GAAA,KAAA;AAAA,YACtC,aAAe,EAAA,IAAA;AAAA,YACf,QAAA,EAAU,CAACC,MAAAA,EAAe,CAA0B,KAAA;AAClD,cAAM,MAAA,QAAA,GAAW,+BAAO,QAASA,CAAAA,MAAAA,CAAAA;AACjC,cAAkB,iBAAA,CAAA,QAAA,EAAU,OAAO,CAAC,CAAA;AAAA;AACtC;AAAA;AACF,OACF,EAAA;AAAA,KACF,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/color-chooser/SwatchesPicker.js

@@ -1,11 +1,11 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var ColorHelpers = require('./ColorHelpers.js');
-var Swatch$1 = require('./Swatch.js');
-var colorUtils = require('./color-utils.js');
 var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
+var ColorHelpers = require('./ColorHelpers.js');
+var colorUtils = require('./color-utils.js');
+var Swatch$1 = require('./Swatch.js');
 var Swatch = require('./Swatch.css.js');
 
 const SwatchesGroup = ({

package/dist-cjs/color-chooser/SwatchesPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwatchesPicker.js","sources":["../src/color-chooser/SwatchesPicker.tsx"],"sourcesContent":["import type { ChangeEvent } from \"react\";\nimport 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?: 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?: 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":["useWindow","useComponentCssInjection","swatchCSS","jsx","convertColorMapValueToHex","Swatch","isTransparent"],"mappings":";;;;;;;;;;AAmCA,MAAM,gBAAgB,CAAC;AAAA,EACrB,WAAA;AAAA,EACA,OAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA;AACF,CAAuC,KAAA;AAzCvC,EAAA,IAAA,EAAA;AA0CE,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,eAAA;AAAA,IACR,GAAK,EAAAC,MAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,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;AAAA,GAE9B;AACA,EAAM,MAAA,QAAA,GAAW,CAAC,KAA2B,KAAA;AAC3C,IACE,OAAA,KAAA,CAAM,WAAY,EAAA,MAChB,aAAe,IAAA,IAAA,GAAA,MAAA,GAAA,aAAA,CAAA,SAAA,CAAU,GAAG,CAAG,CAAA,CAAA,QAAA,EAAA,CAAW,WAC5C,EAAA,CAAA,IAAA,cAAA,CAAe,KAAK,CAAA;AAAA,GAExB;AAEA,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA,EAAI,KAAO,EAAA,EAAE,OAAS,EAAA,MAAA,EAAQ,aAAe,EAAA,QAAA,EAC3C,EAAA,QAAA,EAAA,CAAA,EAAA,GAAA,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CACG,GAAI,CAAA,CAAC,KAAU,KAAA;AACf,IAAA,OAAOC,uCAA0B,KAAK,CAAA;AAAA,GAFzC,CAAA,KAAA,IAAA,GAAA,MAAA,GAAA,EAAA,CAIG,GAAI,CAAA,CAAC,KACL,qBAAAD,cAAA;AAAA,IAACE,eAAA;AAAA,IAAA;AAAA,MAEC,MAAA,EAAQ,SAAS,KAAK,CAAA;AAAA,MACtB,KAAA;AAAA,MACA,OAAA;AAAA,MACA,cAAA;AAAA,MACA,KAAA;AAAA,MACA,WAAA,EAAaC,yBAAc,KAAK;AAAA,KAAA;AAAA,IAN3B,MAAM,QAAS;AAAA,GAS5B,CAAA,EAAA,CAAA;AAEJ,CAAA;AAEO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,SAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAQ,GAAA,CAAA;AAAA,EACR,QAAA;AAAA,EACA;AACF,CAAwC,KAAA;AACtC,EACE,uBAAAH,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAY,EAAA,iBAAA;AAAA,MACZ,KAAO,EAAA,EAAE,OAAS,EAAA,MAAA,EAAQ,eAAe,KAAM,EAAA;AAAA,MAE9C,QAAA,EAAA,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAW,GAAI,CAAA,CAAC,WACf,qBAAAA,cAAA;AAAA,QAAC,aAAA;AAAA,QAAA;AAAA,UACC,WAAA;AAAA,UAEA,eAAe,KAAO,IAAA,IAAA,GAAA,MAAA,GAAA,KAAA,CAAA,GAAA;AAAA,UACtB,OAAS,EAAA,QAAA;AAAA,UACT,cAAA;AAAA,UACA;AAAA,SAAA;AAAA,QAJK,YAAY,QAAS;AAAA,OAK5B;AAAA;AAAA,GAEJ;AAEJ;;;;"}
+{"version":3,"file":"SwatchesPicker.js","sources":["../src/color-chooser/SwatchesPicker.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport type { ChangeEvent } from \"react\";\nimport type { Color } from \"./Color\";\nimport { convertColorMapValueToHex } from \"./ColorHelpers\";\nimport { isTransparent } from \"./color-utils\";\nimport { Swatch } from \"./Swatch\";\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?: 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?: 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":["useWindow","useComponentCssInjection","swatchCSS","jsx","convertColorMapValueToHex","Swatch","isTransparent"],"mappings":";;;;;;;;;;AAkCA,MAAM,gBAAgB,CAAC;AAAA,EACrB,WAAA;AAAA,EACA,OAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA;AACF,CAAuC,KAAA;AAxCvC,EAAA,IAAA,EAAA;AAyCE,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,eAAA;AAAA,IACR,GAAK,EAAAC,MAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,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;AAAA,GAE9B;AACA,EAAM,MAAA,QAAA,GAAW,CAAC,KAA2B,KAAA;AAC3C,IACE,OAAA,KAAA,CAAM,WAAY,EAAA,MAChB,aAAe,IAAA,IAAA,GAAA,MAAA,GAAA,aAAA,CAAA,SAAA,CAAU,GAAG,CAAG,CAAA,CAAA,QAAA,EAAA,CAAW,WAC5C,EAAA,CAAA,IAAA,cAAA,CAAe,KAAK,CAAA;AAAA,GAExB;AAEA,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA,EAAI,KAAO,EAAA,EAAE,OAAS,EAAA,MAAA,EAAQ,aAAe,EAAA,QAAA,EAC3C,EAAA,QAAA,EAAA,CAAA,EAAA,GAAA,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CACG,GAAI,CAAA,CAAC,KAAU,KAAA;AACf,IAAA,OAAOC,uCAA0B,KAAK,CAAA;AAAA,GAFzC,CAAA,KAAA,IAAA,GAAA,MAAA,GAAA,EAAA,CAIG,GAAI,CAAA,CAAC,KACL,qBAAAD,cAAA;AAAA,IAACE,eAAA;AAAA,IAAA;AAAA,MAEC,MAAA,EAAQ,SAAS,KAAK,CAAA;AAAA,MACtB,KAAA;AAAA,MACA,OAAA;AAAA,MACA,cAAA;AAAA,MACA,KAAA;AAAA,MACA,WAAA,EAAaC,yBAAc,KAAK;AAAA,KAAA;AAAA,IAN3B,MAAM,QAAS;AAAA,GAS5B,CAAA,EAAA,CAAA;AAEJ,CAAA;AAEO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,SAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAQ,GAAA,CAAA;AAAA,EACR,QAAA;AAAA,EACA;AACF,CAAwC,KAAA;AACtC,EACE,uBAAAH,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAY,EAAA,iBAAA;AAAA,MACZ,KAAO,EAAA,EAAE,OAAS,EAAA,MAAA,EAAQ,eAAe,KAAM,EAAA;AAAA,MAE9C,QAAA,EAAA,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAW,GAAI,CAAA,CAAC,WACf,qBAAAA,cAAA;AAAA,QAAC,aAAA;AAAA,QAAA;AAAA,UACC,WAAA;AAAA,UAEA,eAAe,KAAO,IAAA,IAAA,GAAA,MAAA,GAAA,KAAA,CAAA,GAAA;AAAA,UACtB,OAAS,EAAA,QAAA;AAAA,UACT,cAAA;AAAA,UACA;AAAA,SAAA;AAAA,QAJK,YAAY,QAAS;AAAA,OAK5B;AAAA;AAAA,GAEJ;AAEJ;;;;"}

package/dist-cjs/combo-box/ComboBox.js

@@ -3,19 +3,19 @@
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
 var react = require('react');
+var collectionProvider = require('../common-hooks/collectionProvider.js');
+require('../common-hooks/keyUtils.js');
+var useCollectionItems = require('../common-hooks/useCollectionItems.js');
+require('../responsive/useResizeObserver.js');
+require('../dropdown/Dropdown.js');
 var DropdownBase = require('../dropdown/DropdownBase.js');
 require('../dropdown/DropdownButton.js');
-require('../dropdown/Dropdown.js');
 require('../form-field-context-legacy/FormFieldLegacyContext.js');
-require('../responsive/useResizeObserver.js');
 var InputLegacy = require('../input-legacy/InputLegacy.js');
 require('../input-legacy/StaticInputAdornment.js');
 require('../list/Highlighter.js');
-require('../list/ListItem.js');
 var List = require('../list/List.js');
-var collectionProvider = require('../common-hooks/collectionProvider.js');
-require('../common-hooks/keyUtils.js');
-var useCollectionItems = require('../common-hooks/useCollectionItems.js');
+require('../list/ListItem.js');
 require('../list/VirtualizedList.js');
 var useCombobox = require('./useCombobox.js');
 

package/dist-cjs/combo-box/ComboBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","sources":["../src/combo-box/ComboBox.tsx"],"sourcesContent":["import { useIdMemo as useId } from \"@salt-ds/core\";\nimport {\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":["forwardRef","useId","useCollectionItems","useCombobox","useCallback","jsx","CollectionProvider","jsxs","DropdownBase","Input","List"],"mappings":"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"}
+{"version":3,"file":"ComboBox.js","sources":["../src/combo-box/ComboBox.tsx"],"sourcesContent":["import { useIdMemo as useId } from \"@salt-ds/core\";\nimport {\n  type ForwardedRef,\n  forwardRef,\n  type ReactElement,\n  useCallback,\n} from \"react\";\nimport {\n  type CollectionItem,\n  CollectionProvider,\n  type SelectionProps,\n  type SelectionStrategy,\n  type SingleSelectionStrategy,\n  useCollectionItems,\n} from \"../common-hooks\";\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\";\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":["forwardRef","useId","useCollectionItems","useCombobox","useCallback","jsx","CollectionProvider","jsxs","DropdownBase","Input","List"],"mappings":"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"}

package/dist-cjs/combo-box/useCombobox.js

@@ -8,8 +8,8 @@ require('../common-hooks/keyUtils.js');
 require('react/jsx-runtime');
 require('../responsive/useResizeObserver.js');
 require('../list/Highlighter.js');
-require('../list/ListItem.js');
 require('../list/List.js');
+require('../list/ListItem.js');
 var useList = require('../list/useList.js');
 require('../list/VirtualizedList.js');