@salt-ds/lab 1.0.0-alpha.10 → 1.0.0-alpha.101

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

@@ -1,25 +1,23 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
-import { clsx } from 'clsx';
-import { Overlay } from '../overlay/Overlay.js';
-import { useOverlay } from '../overlay/useOverlay.js';
-import { makePrefixer, Button } from '@salt-ds/core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makePrefixer, Button, Overlay, OverlayTrigger, OverlayPanel, OverlayPanelCloseButton, OverlayPanelContent } from '@salt-ds/core';
 import { RefreshIcon } from '@salt-ds/icons';
-import { isTransparent } from './color-utils.js';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { useState } from 'react';
+import css_248z from './ColorChooser.css.js';
 import { getHexValue, getColorNameByHexValue, hexValueWithoutAlpha, convertColorMapValueToHex } from './ColorHelpers.js';
+import { isTransparent } from './color-utils.js';
 import { saltColorMap } from './colorMap.js';
+import { createTabsMapping } from './createTabsMapping.js';
 import { DictTabs } from './DictTabs.js';
 import { getColorPalettes } from './GetColorPalettes.js';
-import { createTabsMapping } from './createTabsMapping.js';
-import { useWindow } from '@salt-ds/window';
-import { useComponentCssInjection } from '@salt-ds/styles';
-import css_248z from './ColorChooser.css.js';
 
 const withBaseName = makePrefixer("saltColorChooser");
 function getActiveTab(hexValue, tabs, saltColorOverrides) {
-  if (tabs["Swatches"] && tabs["Color Picker"]) {
+  if (tabs.Swatches && tabs["Color Picker"]) {
     const hexNoAlpha = hexValueWithoutAlpha(hexValue);
-    const colors = saltColorOverrides != null ? saltColorOverrides : saltColorMap;
+    const colors = saltColorOverrides ?? saltColorMap;
     if (hexNoAlpha && !Object.keys(colors).find(
       (key) => {
         var _a;
@@ -46,7 +44,7 @@ const ColorChooser = ({
   readOnly = false,
   displayHexOnly = false
 }) => {
-  var _a, _b, _c;
+  var _a;
   const targetWindow = useWindow();
   useComponentCssInjection({
     testId: "salt-color-chooser",
@@ -61,7 +59,7 @@ const ColorChooser = ({
     saltColorOverrides
   );
   const handleOpenChange = (open2) => setOpen(open2);
-  const alphaForTabs = isTransparent(color == null ? void 0 : color.hex) ? defaultAlpha : (_b = (_a = color == null ? void 0 : color.rgba) == null ? void 0 : _a.a) != null ? _b : defaultAlpha;
+  const alphaForTabs = isTransparent(color == null ? void 0 : color.hex) ? defaultAlpha : ((_a = color == null ? void 0 : color.rgba) == null ? void 0 : _a.a) ?? defaultAlpha;
   const tabsMapping = createTabsMapping({
     swatches: showSwatches,
     colorPicker: showColorPicker,
@@ -90,75 +88,71 @@ const ColorChooser = ({
   const onTabClick = (index) => {
     setActiveTab(index);
   };
-  const { getTriggerProps, getOverlayProps } = useOverlay({
-    placement: "bottom",
-    open,
-    onOpenChange: handleOpenChange
-  });
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [
-      /* @__PURE__ */ jsxs(Button, {
-        ...getTriggerProps({
-          className: clsx(withBaseName("overlayButton"), {
-            [withBaseName("overlayButtonHiddenLabel")]: hideLabel
-          }),
-          "data-testid": "color-chooser-overlay-button",
-          disabled: readOnly,
-          ...buttonProps
+  const overlayContent = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(withBaseName("overlayContent")),
+      "data-testid": "overlay-content",
+      children: [
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            "data-testid": "default-button",
+            variant: "secondary",
+            className: clsx(withBaseName("defaultButton")),
+            onClick: onDefaultSelected,
+            children: [
+              /* @__PURE__ */ jsx(RefreshIcon, { className: clsx(withBaseName("refreshIcon")) }),
+              "Default"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DictTabs,
+          {
+            tabs: tabsMapping,
+            hexValue: color == null ? void 0 : color.hex,
+            onTabClick,
+            activeTab
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs(Overlay, { placement: "bottom", "data-testid": "color-chooser-overlay", children: [
+    /* @__PURE__ */ jsx(OverlayTrigger, { children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        className: clsx(withBaseName("overlayButton"), {
+          [withBaseName("overlayButtonHiddenLabel")]: hideLabel
         }),
+        "data-testid": "color-chooser-overlay-button",
+        disabled: readOnly,
+        ...buttonProps,
         children: [
-          color && /* @__PURE__ */ jsx("div", {
-            className: clsx(withBaseName("overlayButtonSwatch"), {
-              [withBaseName("overlayButtonSwatchWithBorder")]: color == null ? void 0 : color.hex.startsWith("#ffffff"),
-              [withBaseName("overlayButtonSwatchTransparent")]: isTransparent(
-                color == null ? void 0 : color.hex
-              )
-            }),
-            style: {
-              backgroundColor: color == null ? void 0 : color.hex
+          color && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: clsx(withBaseName("overlayButtonSwatch"), {
+                [withBaseName("overlayButtonSwatchWithBorder")]: color == null ? void 0 : color.hex.startsWith("#ffffff"),
+                [withBaseName("overlayButtonSwatchTransparent")]: isTransparent(
+                  color == null ? void 0 : color.hex
+                )
+              }),
+              style: {
+                backgroundColor: color == null ? void 0 : color.hex
+              }
             }
-          }),
-          !hideLabel && /* @__PURE__ */ jsx("div", {
-            className: withBaseName("overlayButtonText"),
-            children: (_c = displayColorName != null ? displayColorName : placeholder) != null ? _c : "No color selected"
-          })
+          ),
+          !hideLabel && /* @__PURE__ */ jsx("div", { className: withBaseName("overlayButtonText"), children: displayColorName ?? placeholder ?? "No color selected" })
         ]
-      }),
-      /* @__PURE__ */ jsx(Overlay, {
-        ...getOverlayProps({
-          adaExceptions: {
-            showClose: false
-          },
-          "data-testid": "color-chooser-overlay",
-          className: clsx(withBaseName("overlayButtonClose"))
-        }),
-        children: /* @__PURE__ */ jsxs("div", {
-          className: clsx(withBaseName("overlayContent")),
-          "data-testid": "overlay-content",
-          children: [
-            /* @__PURE__ */ jsxs(Button, {
-              "data-testid": "default-button",
-              variant: "secondary",
-              className: clsx(withBaseName("defaultButton")),
-              onClick: onDefaultSelected,
-              children: [
-                /* @__PURE__ */ jsx(RefreshIcon, {
-                  className: clsx(withBaseName("refreshIcon"))
-                }),
-                "Default"
-              ]
-            }),
-            /* @__PURE__ */ jsx(DictTabs, {
-              tabs: tabsMapping,
-              hexValue: color == null ? void 0 : color.hex,
-              onTabClick,
-              activeTab
-            })
-          ]
-        })
-      })
-    ]
-  });
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(OverlayPanel, { children: [
+      /* @__PURE__ */ jsx(OverlayPanelCloseButton, {}),
+      /* @__PURE__ */ jsx(OverlayPanelContent, { children: overlayContent })
+    ] })
+  ] });
 };
 
 export { ColorChooser };

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

@@ -1 +1 @@
-{"version":3,"file":"ColorChooser.js","sources":["../src/color-chooser/ColorChooser.tsx"],"sourcesContent":["import { ChangeEvent, useState } from \"react\";\nimport { clsx } from \"clsx\";\nimport { Overlay, useOverlay } from \"../overlay\";\nimport { Button, ButtonProps, makePrefixer } from \"@salt-ds/core\";\nimport { RefreshIcon } from \"@salt-ds/icons\";\nimport { Color } from \"./Color\";\nimport { isTransparent } from \"./color-utils\";\n\nimport {\n  convertColorMapValueToHex,\n  getColorNameByHexValue,\n  getHexValue,\n  hexValueWithoutAlpha,\n} from \"./ColorHelpers\";\nimport { saltColorMap } from \"./colorMap\";\nimport { ColorChooserTabs, DictTabs } from \"./DictTabs\";\nimport { getColorPalettes } from \"./GetColorPalettes\";\nimport { createTabsMapping } from \"./createTabsMapping\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\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  const onTabClick = (index: number): void => {\n    setActiveTab(index);\n  };\n\n  const { getTriggerProps, getOverlayProps } = useOverlay({\n    placement: \"bottom\",\n    open,\n    onOpenChange: handleOpenChange,\n  });\n\n  return (\n    <>\n      <Button\n        {...getTriggerProps<typeof 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      >\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      <Overlay\n        {...getOverlayProps({\n          adaExceptions: {\n            showClose: false,\n          },\n          // @ts-ignore\n          \"data-testid\": \"color-chooser-overlay\",\n          className: clsx(withBaseName(\"overlayButtonClose\")),\n        })}\n      >\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      </Overlay>\n    </>\n  );\n};\n"],"names":["colorChooserCss","open"],"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          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":["colorChooserCss","open"],"mappings":"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"}

package/dist-es/color-chooser/ColorHelpers.js

@@ -1,12 +1,11 @@
-import { saltColorMap } from './colorMap.js';
 import { Color } from './Color.js';
 import { isTransparent } from './color-utils.js';
+import { saltColorMap } from './colorMap.js';
 
 function getColorNameByHexValue(hexValue, disableAlpha = false, saltColorOverrides, disableFallBackToHex = false) {
   const hexNoAlpha = hexValueWithoutAlpha(hexValue);
-  const saltColors = saltColorOverrides != null ? saltColorOverrides : saltColorMap;
-  if (isTransparent(hexValue))
-    return "Transparent";
+  const saltColors = saltColorOverrides ?? saltColorMap;
+  if (isTransparent(hexValue)) return "Transparent";
   let colorName = Object.keys(saltColors).find((key) => {
     if (saltColors[key]) {
       const rgbVals = saltColors[key].startsWith("rgba") ? saltColors[key].substring(5, saltColors[key].length - 1) : saltColors[key].substring(4, saltColors[key].length - 1);
@@ -25,21 +24,18 @@ function getColorNameByHexValue(hexValue, disableAlpha = false, saltColorOverrid
   return disableFallBackToHex ? void 0 : getHexValue(hexValue, disableAlpha);
 }
 function hexValueWithoutAlpha(hexValue) {
-  if (hexValue === void 0)
-    return void 0;
+  if (hexValue === void 0) return void 0;
   return isValidHex(hexValue) ? hexValue.substring(0, 7).toUpperCase() : void 0;
 }
 function getHexValue(hexValue, disableAlpha) {
-  if (hexValue === void 0)
-    return void 0;
+  if (hexValue === void 0) return void 0;
   return disableAlpha ? hexValueWithoutAlpha(hexValue) : hexValue;
 }
 const isValidHex = (hex) => {
   return hex ? /^#[0-9a-fA-F]{8}$/.test(hex) || /#[0-9a-fA-F]{6}$/.test(hex) : false;
 };
 const convertColorMapValueToHex = (color) => {
-  if (!color.startsWith("rgb"))
-    return color;
+  if (!color.startsWith("rgb")) return color;
   const rgbVals = color.startsWith("rgba") ? color.substring(5, color.length - 1) : color.substring(4, color.length - 1);
   const [r, g, b, a] = [...rgbVals.replace(" ", "").split(",")];
   return Color.makeColorFromRGB(

package/dist-es/color-chooser/ColorHelpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorHelpers.js","sources":["../src/color-chooser/ColorHelpers.ts"],"sourcesContent":["import { saltColorMap } from \"./colorMap\";\nimport { Color } from \"./Color\";\nimport { isTransparent } from \"./color-utils\";\n\nexport function getColorNameByHexValue(\n  hexValue: string | undefined,\n  disableAlpha = false,\n  saltColorOverrides?: Record<string, string>,\n  /** When disabled, color names not recognized will be undefined instead of hex values */\n  disableFallBackToHex = false\n): string | undefined {\n  const hexNoAlpha = hexValueWithoutAlpha(hexValue);\n  const saltColors = saltColorOverrides ?? saltColorMap;\n\n  // Special case\n  if (isTransparent(hexValue)) return \"Transparent\";\n\n  let colorName = Object.keys(saltColors).find((key: string) => {\n    if (saltColors[key]) {\n      const rgbVals = saltColors[key].startsWith(\"rgba\")\n        ? saltColors[key].substring(5, saltColors[key].length - 1)\n        : saltColors[key].substring(4, saltColors[key].length - 1);\n      const [r, g, b] = [...rgbVals.replace(\" \", \"\").split(\",\")];\n      return (\n        Color.makeColorFromRGB(Number(r), Number(g), Number(b)).hex ===\n        hexNoAlpha?.toLowerCase()\n      );\n    }\n    return 0;\n  });\n\n  if (colorName) {\n    colorName = colorName.slice(4);\n    return colorName.charAt(0).toUpperCase() + colorName.slice(1).toLowerCase();\n  }\n\n  if (hexValue === \"WHITE\" || hexValue === \"BLACK\") {\n    return hexValue.charAt(0) + hexValue.slice(1).toLowerCase();\n  }\n\n  return disableFallBackToHex ? undefined : getHexValue(hexValue, disableAlpha);\n}\n\nexport function hexValueWithoutAlpha(\n  hexValue: string | undefined\n): string | undefined {\n  if (hexValue === undefined) return undefined;\n  return isValidHex(hexValue)\n    ? hexValue.substring(0, 7).toUpperCase()\n    : undefined;\n}\n\nexport function getHexValue(\n  hexValue: string | undefined,\n  disableAlpha: boolean\n): string | undefined {\n  if (hexValue === undefined) return undefined;\n  return disableAlpha ? hexValueWithoutAlpha(hexValue) : hexValue;\n}\n\nexport const isValidHex = (hex: string | undefined): boolean => {\n  return hex\n    ? /^#[0-9a-fA-F]{8}$/.test(hex) || /#[0-9a-fA-F]{6}$/.test(hex)\n    : false;\n};\n\nexport const convertColorMapValueToHex = (color: string): string => {\n  if (!color.startsWith(\"rgb\")) return color;\n  const rgbVals = color.startsWith(\"rgba\")\n    ? color.substring(5, color.length - 1)\n    : color.substring(4, color.length - 1);\n  const [r, g, b, a] = [...rgbVals.replace(\" \", \"\").split(\",\")];\n  return Color.makeColorFromRGB(\n    Number(r),\n    Number(g),\n    Number(b),\n    a ? Number(a) : 1\n  ).hex;\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ColorHelpers.js","sources":["../src/color-chooser/ColorHelpers.ts"],"sourcesContent":["import { Color } from \"./Color\";\nimport { isTransparent } from \"./color-utils\";\nimport { saltColorMap } from \"./colorMap\";\n\nexport function getColorNameByHexValue(\n  hexValue: string | undefined,\n  disableAlpha = false,\n  saltColorOverrides?: Record<string, string>,\n  /** When disabled, color names not recognized will be undefined instead of hex values */\n  disableFallBackToHex = false,\n): string | undefined {\n  const hexNoAlpha = hexValueWithoutAlpha(hexValue);\n  const saltColors = saltColorOverrides ?? saltColorMap;\n\n  // Special case\n  if (isTransparent(hexValue)) return \"Transparent\";\n\n  let colorName = Object.keys(saltColors).find((key: string) => {\n    if (saltColors[key]) {\n      const rgbVals = saltColors[key].startsWith(\"rgba\")\n        ? saltColors[key].substring(5, saltColors[key].length - 1)\n        : saltColors[key].substring(4, saltColors[key].length - 1);\n      const [r, g, b] = [...rgbVals.replace(\" \", \"\").split(\",\")];\n      return (\n        Color.makeColorFromRGB(Number(r), Number(g), Number(b)).hex ===\n        hexNoAlpha?.toLowerCase()\n      );\n    }\n    return 0;\n  });\n\n  if (colorName) {\n    colorName = colorName.slice(4);\n    return colorName.charAt(0).toUpperCase() + colorName.slice(1).toLowerCase();\n  }\n\n  if (hexValue === \"WHITE\" || hexValue === \"BLACK\") {\n    return hexValue.charAt(0) + hexValue.slice(1).toLowerCase();\n  }\n\n  return disableFallBackToHex ? undefined : getHexValue(hexValue, disableAlpha);\n}\n\nexport function hexValueWithoutAlpha(\n  hexValue: string | undefined,\n): string | undefined {\n  if (hexValue === undefined) return undefined;\n  return isValidHex(hexValue)\n    ? hexValue.substring(0, 7).toUpperCase()\n    : undefined;\n}\n\nexport function getHexValue(\n  hexValue: string | undefined,\n  disableAlpha: boolean,\n): string | undefined {\n  if (hexValue === undefined) return undefined;\n  return disableAlpha ? hexValueWithoutAlpha(hexValue) : hexValue;\n}\n\nexport const isValidHex = (hex: string | undefined): boolean => {\n  return hex\n    ? /^#[0-9a-fA-F]{8}$/.test(hex) || /#[0-9a-fA-F]{6}$/.test(hex)\n    : false;\n};\n\nexport const convertColorMapValueToHex = (color: string): string => {\n  if (!color.startsWith(\"rgb\")) return color;\n  const rgbVals = color.startsWith(\"rgba\")\n    ? color.substring(5, color.length - 1)\n    : color.substring(4, color.length - 1);\n  const [r, g, b, a] = [...rgbVals.replace(\" \", \"\").split(\",\")];\n  return Color.makeColorFromRGB(\n    Number(r),\n    Number(g),\n    Number(b),\n    a ? Number(a) : 1,\n  ).hex;\n};\n"],"names":[],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-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-text-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.root,\n.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.root .flexbox-fix,\n.rootDisabledAlpha .flexbox-fix {\n  padding-top: 8px !important;\n}\n/* RGB Inputs provided by react-color */\n.rootDisabledAlpha .flexbox-fix ~ .flexbox-fix,\n.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.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-border) 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";
 
 export { css_248z as default };
 //# sourceMappingURL=ColorPicker.css.js.map

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

@@ -1,14 +1,14 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { SketchPicker } from 'react-color';
-import { clsx } from 'clsx';
 import { makePrefixer, Button } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { SketchPicker } from 'react-color';
 import { Color } from './Color.js';
 import { hexValueWithoutAlpha } from './ColorHelpers.js';
+import css_248z from './ColorPicker.css.js';
 import { HexInput } from './HexInput.js';
 import { RGBAInput } from './RGBAInput.js';
-import { useWindow } from '@salt-ds/window';
-import { useComponentCssInjection } from '@salt-ds/styles';
-import css_248z from './ColorPicker.css.js';
 
 const withBaseName = makePrefixer("saltColorChooserPicker");
 const ColorPicker = ({
@@ -18,14 +18,13 @@ const ColorPicker = ({
   onChange,
   onDialogClosed
 }) => {
-  var _a;
   const targetWindow = useWindow();
   useComponentCssInjection({
     testId: "salt-color-picker",
     css: css_248z,
     window: targetWindow
   });
-  const rgbaValue = (_a = color == null ? void 0 : color.rgba) != null ? _a : Color.makeColorFromRGB(0, 0, 0, alpha).rgba;
+  const rgbaValue = (color == null ? void 0 : color.rgba) ?? Color.makeColorFromRGB(0, 0, 0, alpha).rgba;
   const rgbaText = disableAlphaChooser ? "RGB" : "RGBA";
   const onSubmitHex = (hexValue, e) => {
     const newColor = Color.makeColorFromHex(hexValue);
@@ -45,12 +44,11 @@ const ColorPicker = ({
     onChange(newColor, false, e);
   };
   const onSketchPickerChange = (colorResult, e) => {
-    var _a2;
     const newColor = Color.makeColorFromRGB(
       colorResult.rgb.r,
       colorResult.rgb.g,
       colorResult.rgb.b,
-      (_a2 = colorResult.rgb.a) != null ? _a2 : alpha
+      colorResult.rgb.a ?? alpha
     );
     onChange(newColor, false, e);
   };
@@ -58,57 +56,45 @@ const ColorPicker = ({
     onChange(color, true);
     onDialogClosed();
   };
-  return /* @__PURE__ */ jsxs("div", {
-    "data-testid": "color-picker",
-    className: clsx(withBaseName()),
-    children: [
-      /* @__PURE__ */ jsx(SketchPicker, {
+  return /* @__PURE__ */ jsxs("div", { "data-testid": "color-picker", className: clsx(withBaseName()), children: [
+    /* @__PURE__ */ jsx(
+      SketchPicker,
+      {
         className: clsx(withBaseName("swatchPickerStyles"), {
-          ["rootDisabledAlpha"]: disableAlphaChooser,
-          ["root"]: !disableAlphaChooser
+          [withBaseName("rootDisabledAlpha")]: disableAlphaChooser,
+          [withBaseName("root")]: !disableAlphaChooser
         }),
         color: rgbaValue,
         onChange: onSketchPickerChange,
         presetColors: [],
         disableAlpha: disableAlphaChooser
-      }),
-      /* @__PURE__ */ jsxs("div", {
-        className: clsx(withBaseName("inputContainer")),
-        children: [
-          /* @__PURE__ */ jsxs("div", {
-            className: clsx(withBaseName("inputDivs")),
-            children: [
-              /* @__PURE__ */ jsx("span", {
-                className: clsx(withBaseName("textDivOverrides")),
-                children: "HEX"
-              }),
-              /* @__PURE__ */ jsx(HexInput, {
-                hexValue: disableAlphaChooser ? hexValueWithoutAlpha(color == null ? void 0 : color.hex) : color == null ? void 0 : color.hex,
-                disableAlphaChooser,
-                onSubmit: onSubmitHex
-              }),
-              /* @__PURE__ */ jsx(RGBAInput, {
-                disableAlphaChooser,
-                rgbaText,
-                rgbaValue,
-                onSubmitAlpha,
-                onSubmitRgb
-              })
-            ]
-          }),
-          /* @__PURE__ */ jsx("div", {
-            className: clsx(withBaseName("applyButtonDiv")),
-            children: /* @__PURE__ */ jsx(Button, {
-              "data-testid": "apply-button",
-              variant: "cta",
-              onClick: onApply,
-              children: "Apply"
-            })
-          })
-        ]
-      })
-    ]
-  });
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: clsx(withBaseName("inputContainer")), children: [
+      /* @__PURE__ */ jsxs("div", { className: clsx(withBaseName("inputDivs")), children: [
+        /* @__PURE__ */ jsx("span", { className: clsx(withBaseName("textDivOverrides")), children: "HEX" }),
+        /* @__PURE__ */ jsx(
+          HexInput,
+          {
+            hexValue: disableAlphaChooser ? hexValueWithoutAlpha(color == null ? void 0 : color.hex) : color == null ? void 0 : color.hex,
+            disableAlphaChooser,
+            onSubmit: onSubmitHex
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          RGBAInput,
+          {
+            disableAlphaChooser,
+            rgbaText,
+            rgbaValue,
+            onSubmitAlpha,
+            onSubmitRgb
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: clsx(withBaseName("applyButtonDiv")), children: /* @__PURE__ */ jsx(Button, { "data-testid": "apply-button", variant: "cta", onClick: onApply, children: "Apply" }) })
+    ] })
+  ] });
 };
 
 export { ColorPicker };

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

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

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

@@ -1,11 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from 'clsx';
 import { makePrefixer } from '@salt-ds/core';
-import '../tabs/TabActivationIndicator.js';
-import { Tabstrip } from '../tabs/Tabstrip.js';
+import { clsx } from 'clsx';
 import { Tab } from '../tabs/Tab.js';
+import '../tabs/TabActivationIndicator.js';
 import '../tabs/TabPanel.js';
 import '../tabs/Tabs.js';
+import { Tabstrip } from '../tabs/Tabstrip.js';
 
 const withBaseName = makePrefixer("saltColorChooserDictTabs");
 const DictTabs = ({
@@ -15,34 +15,37 @@ const DictTabs = ({
   activeTab,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs("div", {
-    children: [
-      /* @__PURE__ */ jsx(Tabstrip, {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      Tabstrip,
+      {
         ...props,
         "data-testid": "color-chooser-tabstrip",
         className: clsx(withBaseName("wrapper")),
         activeTabIndex: activeTab,
         onActiveChange: (tabIndex) => onTabClick(tabIndex),
-        children: [...Object.keys(tabs)].map((label, i) => /* @__PURE__ */ jsx(Tab, {
-          className: clsx(withBaseName("text")),
-          label
-        }, i))
-      }),
-      [...Object.values(tabs)].map((tab, idx) => {
-        if (!tab) {
-          return null;
-        }
-        const TabComponent = tab == null ? void 0 : tab.Component;
-        return /* @__PURE__ */ jsx("div", {
+        children: [...Object.keys(tabs)].map((label, i) => /* @__PURE__ */ jsx(Tab, { className: clsx(withBaseName("text")), label }, i))
+      }
+    ),
+    [...Object.values(tabs)].map((tab, idx) => {
+      if (!tab) {
+        return null;
+      }
+      const TabComponent = tab == null ? void 0 : tab.Component;
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
           "aria-hidden": activeTab !== idx,
           hidden: activeTab !== idx,
-          children: (tab == null ? void 0 : tab.props) ? /* @__PURE__ */ jsx(TabComponent, {
-            ...tab == null ? void 0 : tab.props
-          }) : null
-        }, idx);
-      })
-    ]
-  });
+          children: (tab == null ? void 0 : tab.props) ? (
+            // @ts-expect-error
+            /* @__PURE__ */ jsx(TabComponent, { ...tab == null ? void 0 : tab.props })
+          ) : null
+        },
+        idx
+      );
+    })
+  ] });
 };
 
 export { DictTabs };