@hitachivantara/uikit-react-core 5.6.0 → 5.7.0

package/dist/cjs/components/ColorPicker/ColorPicker.cjs

@@ -0,0 +1,186 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("@emotion/react");
+const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const ColorPicker_styles = require("./ColorPicker.styles.cjs");
+const colorPickerClasses = require("./colorPickerClasses.cjs");
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const useUniqueId = require("../../hooks/useUniqueId.cjs");
+const PresetColors = require("./PresetColors/PresetColors.cjs");
+const Picker = require("./Picker/Picker.cjs");
+const SavedColors = require("./SavedColors/SavedColors.cjs");
+const useTheme = require("../../hooks/useTheme.cjs");
+const useLabels = require("../../hooks/useLabels.cjs");
+const useControlled = require("../../hooks/useControlled.cjs");
+const FormElement = require("../Forms/FormElement/FormElement.cjs");
+const Label = require("../Forms/Label/Label.cjs");
+const setId = require("../../utils/setId.cjs");
+const InfoMessage = require("../Forms/InfoMessage/InfoMessage.cjs");
+const BaseDropdown = require("../BaseDropdown/BaseDropdown.cjs");
+const Typography = require("../Typography/Typography.cjs");
+const Panel = require("../Panel/Panel.cjs");
+const DEFAULT_LABELS = {
+  recommendedColorsLabel: "Recommended colors:",
+  customColorsLabel: "Custom colors:"
+};
+const HvColorPicker = ({
+  id,
+  name,
+  required = false,
+  disabled = false,
+  label,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  description,
+  "aria-describedby": ariaDescribedBy,
+  className,
+  classes,
+  value,
+  onChange,
+  defaultValue = "",
+  expanded,
+  defaultExpanded = false,
+  recommendedColorsPosition = "top",
+  recommendedColors = ["#95AFE8", "#E89E5D", "#83B8A6", "#70759C", "#C57E7E", "#FADA95", "#ADBFE8", "#E3B386", "#9AC6B7", "#8B90AF", "#CF9797", "#FAE1AA"],
+  showLabels = true,
+  labels: labelsProp,
+  dropdownIcon = "colorPicker",
+  placeholder = "Select color...",
+  iconOnly = false,
+  showSavedColors = true,
+  showCustomColors = true,
+  savedColorsValue,
+  defaultSavedColorsValue = [],
+  onSavedColorAdded,
+  onSavedColorRemoved,
+  deleteSavedColorButtonArialLabel = "Delete saved color"
+}) => {
+  const {
+    activeTheme
+  } = useTheme.useTheme();
+  const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProp);
+  const [isOpen, setIsOpen] = useControlled.useControlled(expanded, Boolean(defaultExpanded));
+  const [color, setColor] = useControlled.useControlled(value, defaultValue);
+  const [savedColors, setSavedColors] = useControlled.useControlled(savedColorsValue, defaultSavedColorsValue);
+  const elementId = useUniqueId.default(id, "hvdropdown");
+  const hasLabel = label != null;
+  const hasDescription = description != null;
+  const handleToggle = (_, open) => {
+    setIsOpen(open);
+  };
+  const handleSelect = (val) => {
+    onChange == null ? void 0 : onChange(val.hex);
+    setColor(val.hex);
+  };
+  const handleAddColor = () => {
+    const colorToAdd = color || "#000000";
+    onSavedColorAdded == null ? void 0 : onSavedColorAdded(colorToAdd);
+    setSavedColors([...savedColors, colorToAdd]);
+  };
+  const handleRemoveColor = (val, position) => {
+    if (savedColors[position] === val) {
+      const sColors = [...savedColors];
+      sColors.splice(position, 1);
+      onSavedColorRemoved == null ? void 0 : onSavedColorRemoved(val);
+      setSavedColors(sColors);
+    }
+  };
+  const setFocusToContent = (containerRef) => {
+    const inputs = containerRef == null ? void 0 : containerRef.getElementsByTagName("input");
+    if (inputs && inputs.length > 0) {
+      inputs[0].focus();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
+    children: ({
+      css,
+      cx
+    }) => /* @__PURE__ */ jsxRuntime.jsxs(FormElement.HvFormElement, {
+      id,
+      name,
+      disabled,
+      required,
+      className: cx(colorPickerClasses.default.root, className, classes == null ? void 0 : classes.root),
+      children: [(hasLabel || hasDescription) && /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        className: cx(colorPickerClasses.default.labelContainer, css(ColorPicker_styles.styles.labelContainer), classes == null ? void 0 : classes.labelContainer),
+        children: [hasLabel && /* @__PURE__ */ jsxRuntime.jsx(Label.HvLabel, {
+          id: setId.setId(elementId, "label"),
+          label,
+          className: cx(colorPickerClasses.default.label, css(ColorPicker_styles.styles.label), classes == null ? void 0 : classes.label)
+        }), hasDescription && /* @__PURE__ */ jsxRuntime.jsx(InfoMessage.HvInfoMessage, {
+          id: setId.setId(elementId, "description"),
+          className: cx(colorPickerClasses.default.description, classes == null ? void 0 : classes.description),
+          children: description
+        })]
+      }), /* @__PURE__ */ jsxRuntime.jsx(BaseDropdown.HvBaseDropdown, {
+        className,
+        expanded: isOpen,
+        onToggle: handleToggle,
+        onContainerCreation: setFocusToContent,
+        classes: {
+          root: iconOnly ? cx(colorPickerClasses.default.dropdownRootIconOnly, css(ColorPicker_styles.styles.dropdownRootIconOnly), classes == null ? void 0 : classes.dropdownRootIconOnly) : void 0
+        },
+        adornment: iconOnly && color ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Checkbox, {
+          className: cx(colorPickerClasses.default.headerColorIconOnly, css(ColorPicker_styles.styles.headerColorIconOnly), css({
+            "& svg:last-child": {
+              fill: color
+            }
+          }), classes == null ? void 0 : classes.headerColorIconOnly),
+          color: [color]
+        }) : dropdownIcon === "colorPicker" ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.ColorPicker, {
+          className: cx(colorPickerClasses.default.colorPickerIcon, css(ColorPicker_styles.styles.colorPickerIcon), classes == null ? void 0 : classes.colorPickerIcon)
+        }) : void 0,
+        placeholder: iconOnly ? void 0 : color ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [/* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Checkbox, {
+            className: cx(colorPickerClasses.default.headerColorIcon, css(ColorPicker_styles.styles.headerColorIcon), css({
+              "& svg:last-child": {
+                fill: color
+              }
+            }), classes == null ? void 0 : classes.headerColorIcon),
+            color: [color]
+          }), /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
+            className: cx(colorPickerClasses.default.headerColorValue, css(ColorPicker_styles.styles.headerColorValue), classes == null ? void 0 : classes.headerColorValue),
+            variant: activeTheme == null ? void 0 : activeTheme.colorPicker.inputValueVariant,
+            children: color
+          })]
+        }) : placeholder,
+        "aria-label": ariaLabel,
+        "aria-labelledby": [label && setId.setId(elementId, "label"), ariaLabelledBy].join(" ").trim() || void 0,
+        "aria-describedby": [description && setId.setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Panel.HvPanel, {
+          className: cx(colorPickerClasses.default.panel, css(ColorPicker_styles.styles.panel), classes == null ? void 0 : classes.panel),
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+            className: cx(colorPickerClasses.default.colorPicker, css(ColorPicker_styles.styles.colorPicker), classes == null ? void 0 : classes.colorPicker),
+            children: [recommendedColorsPosition === "top" && /* @__PURE__ */ jsxRuntime.jsx(PresetColors.PresetColors, {
+              className: cx(colorPickerClasses.default.recommendedColorsRoot, (showCustomColors || showSavedColors) && css({
+                paddingBottom: activeTheme == null ? void 0 : activeTheme.colorPicker.recommendedColorsBottomPadding
+              }), classes == null ? void 0 : classes.recommendedColorsRoot),
+              colors: recommendedColors,
+              onClick: handleSelect,
+              title: showLabels ? labels == null ? void 0 : labels.recommendedColorsLabel : void 0
+            }), showCustomColors && /* @__PURE__ */ jsxRuntime.jsx(Picker.default, {
+              classes: {
+                fields: recommendedColorsPosition === "bottom" || showSavedColors ? cx(colorPickerClasses.default.pickerFields, css(ColorPicker_styles.styles.pickerFields), classes == null ? void 0 : classes.pickerFields) : void 0
+              },
+              title: showLabels ? labels == null ? void 0 : labels.customColorsLabel : void 0,
+              color,
+              onChange: handleSelect
+            }), showSavedColors && /* @__PURE__ */ jsxRuntime.jsx(SavedColors.SavedColors, {
+              colors: savedColors,
+              onAddColor: handleAddColor,
+              onClickColor: handleSelect,
+              onRemoveColor: handleRemoveColor,
+              deleteButtonArialLabel: deleteSavedColorButtonArialLabel
+            }), recommendedColorsPosition === "bottom" && /* @__PURE__ */ jsxRuntime.jsx(PresetColors.PresetColors, {
+              colors: recommendedColors,
+              onClick: handleSelect,
+              title: showLabels ? labels == null ? void 0 : labels.recommendedColorsLabel : void 0
+            })]
+          })
+        })
+      })]
+    })
+  });
+};
+exports.HvColorPicker = HvColorPicker;
+//# sourceMappingURL=ColorPicker.cjs.map

package/dist/cjs/components/ColorPicker/ColorPicker.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.cjs","sources":["../../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import {\n  HvBaseDropdown,\n  HvFormElement,\n  HvInfoMessage,\n  HvLabel,\n  HvPanel,\n  HvTypography,\n} from \"@core/components\";\nimport { ClassNames } from \"@emotion/react\";\nimport { Checkbox, ColorPicker } from \"@hitachivantara/uikit-react-icons\";\nimport { Picker } from \"./Picker\";\nimport { styles } from \"./ColorPicker.styles\";\nimport colorPickerClasses, { HvColorPickerClasses } from \"./colorPickerClasses\";\nimport { ColorState } from \"react-color\";\nimport { PresetColors } from \"./PresetColors\";\nimport { SavedColors } from \"./SavedColors\";\nimport { useControlled, useLabels, useTheme, useUniqueId } from \"@core/hooks\";\nimport { setId } from \"@core/utils\";\n\nexport interface HvColorPickerProps {\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n  /** Class names to be applied. */\n  className?: string;\n  /** Id to be applied to the form element root node. */\n  id?: string;\n  /** The form element name. */\n  name?: string;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /** The value color, in HEX format. */\n  value?: string;\n  /** The default value color, in HEX format. */\n  defaultValue?: string;\n  /** If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled. */\n  disabled?: boolean;\n  /** If `true` the dropdown starts opened if `false` it starts closed. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /** A function to be executed whenever the color changes. */\n  onChange?: (color: string) => void;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvColorPickerClasses;\n  /** The placeholder value when nothing is selected. */\n  placeholder?: string;\n  /** Recommended colors. The colors are HEX values. */\n  recommendedColors?: string[];\n  /** Recommended colors position. */\n  recommendedColorsPosition?: \"top\" | \"bottom\";\n  /** If `true`, the labels are shown. If `false`, they are not shown. */\n  showLabels?: boolean;\n  /** An object containing all the labels. */\n  labels?: {\n    recommendedColorsLabel?: string;\n    customColorsLabel?: string;\n  };\n  /** Icon type for the input's end adornment. */\n  dropdownIcon?: \"arrow\" | \"colorPicker\";\n  /** If `true`, the input only shows an icon. If `false`, the input shows text and icons. */\n  iconOnly?: boolean;\n  /** If `true`, the saved colors area is shown. If `false`, it is not shown. */\n  showSavedColors?: boolean;\n  /** If `true`, the custom colors area is shown. If `false`, it is not shown. */\n  showCustomColors?: boolean;\n  /** The saved colors. The colors are HEX values. */\n  savedColorsValue?: string[];\n  /** The default saved colors. The colors are HEX values. */\n  defaultSavedColorsValue?: string[];\n  /** Callback fired when a new saved color is added. */\n  onSavedColorAdded?: (color?: string) => void;\n  /** Callback fired when a new saved color is removed. */\n  onSavedColorRemoved?: (color?: string) => void;\n  /** Aria label to apply to delete saved color button. */\n  deleteSavedColorButtonArialLabel?: string;\n}\n\nconst DEFAULT_LABELS: HvColorPickerProps[\"labels\"] = {\n  recommendedColorsLabel: \"Recommended colors:\",\n  customColorsLabel: \"Custom colors:\",\n};\n\n/**\n * A color picker component which allows the user to select a color from a list of pre-defined colors or freely select one color via the Hue and Saturation.\n * It receives a color string in HEX format and outputs an HEX formatted color.\n */\nexport const HvColorPicker = ({\n  id,\n  name,\n  required = false,\n  disabled = false,\n  label,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  description,\n  \"aria-describedby\": ariaDescribedBy,\n  className,\n  classes,\n  value,\n  onChange,\n  defaultValue = \"\",\n  expanded,\n  defaultExpanded = false,\n  recommendedColorsPosition = \"top\",\n  recommendedColors = [\n    \"#95AFE8\",\n    \"#E89E5D\",\n    \"#83B8A6\",\n    \"#70759C\",\n    \"#C57E7E\",\n    \"#FADA95\",\n    \"#ADBFE8\",\n    \"#E3B386\",\n    \"#9AC6B7\",\n    \"#8B90AF\",\n    \"#CF9797\",\n    \"#FAE1AA\",\n  ],\n  showLabels = true,\n  labels: labelsProp,\n  dropdownIcon = \"colorPicker\",\n  placeholder = \"Select color...\",\n  iconOnly = false,\n  showSavedColors = true,\n  showCustomColors = true,\n  savedColorsValue,\n  defaultSavedColorsValue = [],\n  onSavedColorAdded,\n  onSavedColorRemoved,\n  deleteSavedColorButtonArialLabel = \"Delete saved color\",\n}: HvColorPickerProps) => {\n  const { activeTheme } = useTheme();\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const [color, setColor] = useControlled(value, defaultValue);\n  const [savedColors, setSavedColors] = useControlled(\n    savedColorsValue,\n    defaultSavedColorsValue\n  );\n  const elementId = useUniqueId(id, \"hvdropdown\");\n  const hasLabel = label != null;\n  const hasDescription = description != null;\n\n  const handleToggle = (_, open: boolean) => {\n    setIsOpen(open);\n  };\n\n  const handleSelect = (val: ColorState | { hex: string; source: string }) => {\n    onChange?.(val.hex);\n    setColor(val.hex);\n  };\n\n  const handleAddColor = () => {\n    // When no color is provided, react-color sets the picker to #000000.\n    // This is the color that should be added in this case.\n    const colorToAdd = color || \"#000000\";\n\n    onSavedColorAdded?.(colorToAdd);\n    setSavedColors([...savedColors, colorToAdd]);\n  };\n\n  const handleRemoveColor = (val: string, position: number) => {\n    if (savedColors[position] === val) {\n      const sColors = [...savedColors];\n      sColors.splice(position, 1);\n      onSavedColorRemoved?.(val);\n      setSavedColors(sColors);\n    }\n  };\n\n  const setFocusToContent = (containerRef: HTMLElement | null) => {\n    const inputs = containerRef?.getElementsByTagName(\"input\");\n    if (inputs && inputs.length > 0) {\n      inputs[0].focus();\n    }\n  };\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <HvFormElement\n          id={id}\n          name={name}\n          disabled={disabled}\n          required={required}\n          className={cx(colorPickerClasses.root, className, classes?.root)}\n        >\n          {(hasLabel || hasDescription) && (\n            <div\n              className={cx(\n                colorPickerClasses.labelContainer,\n                css(styles.labelContainer),\n                classes?.labelContainer\n              )}\n            >\n              {hasLabel && (\n                <HvLabel\n                  id={setId(elementId, \"label\")}\n                  label={label}\n                  className={cx(\n                    colorPickerClasses.label,\n                    css(styles.label),\n                    classes?.label\n                  )}\n                />\n              )}\n\n              {hasDescription && (\n                <HvInfoMessage\n                  id={setId(elementId, \"description\")}\n                  className={cx(\n                    colorPickerClasses.description,\n                    classes?.description\n                  )}\n                >\n                  {description}\n                </HvInfoMessage>\n              )}\n            </div>\n          )}\n          <HvBaseDropdown\n            className={className}\n            expanded={isOpen}\n            onToggle={handleToggle}\n            onContainerCreation={setFocusToContent}\n            classes={{\n              root: iconOnly\n                ? cx(\n                    colorPickerClasses.dropdownRootIconOnly,\n                    css(styles.dropdownRootIconOnly),\n                    classes?.dropdownRootIconOnly\n                  )\n                : undefined,\n            }}\n            adornment={\n              iconOnly && color ? (\n                <Checkbox\n                  className={cx(\n                    colorPickerClasses.headerColorIconOnly,\n                    css(styles.headerColorIconOnly),\n                    css({\n                      \"& svg:last-child\": {\n                        fill: color,\n                      },\n                    }),\n                    classes?.headerColorIconOnly\n                  )}\n                  color={[color]}\n                />\n              ) : dropdownIcon === \"colorPicker\" ? (\n                <ColorPicker\n                  className={cx(\n                    colorPickerClasses.colorPickerIcon,\n                    css(styles.colorPickerIcon),\n                    classes?.colorPickerIcon\n                  )}\n                />\n              ) : undefined\n            }\n            placeholder={\n              iconOnly ? undefined : color ? (\n                <>\n                  <Checkbox\n                    className={cx(\n                      colorPickerClasses.headerColorIcon,\n                      css(styles.headerColorIcon),\n                      css({\n                        \"& svg:last-child\": {\n                          fill: color,\n                        },\n                      }),\n                      classes?.headerColorIcon\n                    )}\n                    color={[color]}\n                  />\n                  <HvTypography\n                    className={cx(\n                      colorPickerClasses.headerColorValue,\n                      css(styles.headerColorValue),\n                      classes?.headerColorValue\n                    )}\n                    variant={activeTheme?.colorPicker.inputValueVariant}\n                  >\n                    {color}\n                  </HvTypography>\n                </>\n              ) : (\n                placeholder\n              )\n            }\n            aria-label={ariaLabel}\n            aria-labelledby={\n              [label && setId(elementId, \"label\"), ariaLabelledBy]\n                .join(\" \")\n                .trim() || undefined\n            }\n            aria-describedby={\n              [description && setId(elementId, \"description\"), ariaDescribedBy]\n                .join(\" \")\n                .trim() || undefined\n            }\n          >\n            <HvPanel\n              className={cx(\n                colorPickerClasses.panel,\n                css(styles.panel),\n                classes?.panel\n              )}\n            >\n              <div\n                className={cx(\n                  colorPickerClasses.colorPicker,\n                  css(styles.colorPicker),\n                  classes?.colorPicker\n                )}\n              >\n                {recommendedColorsPosition === \"top\" && (\n                  <PresetColors\n                    className={cx(\n                      colorPickerClasses.recommendedColorsRoot,\n                      (showCustomColors || showSavedColors) &&\n                        css({\n                          paddingBottom:\n                            activeTheme?.colorPicker\n                              .recommendedColorsBottomPadding,\n                        }),\n                      classes?.recommendedColorsRoot\n                    )}\n                    colors={recommendedColors}\n                    onClick={handleSelect}\n                    title={\n                      showLabels ? labels?.recommendedColorsLabel : undefined\n                    }\n                  />\n                )}\n                {showCustomColors && (\n                  <Picker\n                    classes={{\n                      fields:\n                        recommendedColorsPosition === \"bottom\" ||\n                        showSavedColors\n                          ? cx(\n                              colorPickerClasses.pickerFields,\n                              css(styles.pickerFields),\n                              classes?.pickerFields\n                            )\n                          : undefined,\n                    }}\n                    title={showLabels ? labels?.customColorsLabel : undefined}\n                    color={color}\n                    onChange={handleSelect}\n                  />\n                )}\n                {showSavedColors && (\n                  <SavedColors\n                    colors={savedColors}\n                    onAddColor={handleAddColor}\n                    onClickColor={handleSelect}\n                    onRemoveColor={handleRemoveColor}\n                    deleteButtonArialLabel={deleteSavedColorButtonArialLabel}\n                  />\n                )}\n                {recommendedColorsPosition === \"bottom\" && (\n                  <PresetColors\n                    colors={recommendedColors}\n                    onClick={handleSelect}\n                    title={\n                      showLabels ? labels?.recommendedColorsLabel : undefined\n                    }\n                  />\n                )}\n              </div>\n            </HvPanel>\n          </HvBaseDropdown>\n        </HvFormElement>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["DEFAULT_LABELS","recommendedColorsLabel","customColorsLabel","HvColorPicker","id","name","required","disabled","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","className","classes","value","onChange","defaultValue","expanded","defaultExpanded","recommendedColorsPosition","recommendedColors","showLabels","labels","labelsProp","dropdownIcon","placeholder","iconOnly","showSavedColors","showCustomColors","savedColorsValue","defaultSavedColorsValue","onSavedColorAdded","onSavedColorRemoved","deleteSavedColorButtonArialLabel","activeTheme","useTheme","useLabels","isOpen","setIsOpen","useControlled","Boolean","color","setColor","savedColors","setSavedColors","elementId","useUniqueId","hasLabel","hasDescription","handleToggle","_","open","handleSelect","val","hex","handleAddColor","colorToAdd","handleRemoveColor","position","sColors","splice","setFocusToContent","containerRef","inputs","getElementsByTagName","length","focus","ClassNames","children","css","cx","HvFormElement","colorPickerClasses","root","labelContainer","styles","_jsx","HvLabel","setId","HvInfoMessage","HvBaseDropdown","onToggle","onContainerCreation","dropdownRootIconOnly","undefined","adornment","Checkbox","headerColorIconOnly","fill","ColorPicker","colorPickerIcon","_Fragment","headerColorIcon","HvTypography","headerColorValue","variant","colorPicker","inputValueVariant","join","trim","HvPanel","panel","PresetColors","recommendedColorsRoot","paddingBottom","recommendedColorsBottomPadding","colors","onClick","title","Picker","fields","pickerFields","SavedColors","onAddColor","onClickColor","onRemoveColor","deleteButtonArialLabel"],"mappings":"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"}

package/dist/cjs/components/ColorPicker/ColorPicker.styles.cjs

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const styles = {
+  labelContainer: {
+    display: "flex",
+    alignItems: "flex-start"
+  },
+  label: {
+    paddingBottom: "6px",
+    display: "block"
+  },
+  headerColorValue: {
+    textTransform: "uppercase"
+  },
+  headerColorIcon: {
+    width: 24,
+    "& svg": {
+      marginLeft: 0
+    }
+  },
+  panel: {
+    width: "100%",
+    minWidth: uikitStyles.theme.colorPicker.panelMinWidth,
+    display: "flex",
+    justifyContent: "center",
+    padding: uikitStyles.theme.colorPicker.panelPadding,
+    border: uikitStyles.theme.colorPicker.panelBorder,
+    borderRadius: uikitStyles.theme.colorPicker.panelBorderRadius
+  },
+  colorPicker: {
+    width: uikitStyles.theme.colorPicker.colorPickerWidth
+  },
+  colorPickerIcon: {
+    position: "absolute",
+    pointerEvents: "none",
+    top: -1,
+    right: -1
+  },
+  dropdownRootIconOnly: {
+    width: 32,
+    height: 32
+  },
+  headerColorIconOnly: {
+    position: "absolute",
+    pointerEvents: "none",
+    top: -1,
+    right: -1,
+    width: 32,
+    height: 32
+  },
+  pickerFields: {
+    paddingBottom: 20
+  }
+};
+exports.styles = styles;
+//# sourceMappingURL=ColorPicker.styles.cjs.map

package/dist/cjs/components/ColorPicker/ColorPicker.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.styles.cjs","sources":["../../../../src/components/ColorPicker/ColorPicker.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvColorPickerClasses } from \"./colorPickerClasses\";\n\nexport const styles: Partial<\n  Record<keyof HvColorPickerClasses, CSSInterpolation>\n> = {\n  labelContainer: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n  },\n  label: {\n    paddingBottom: \"6px\",\n    display: \"block\",\n  },\n  headerColorValue: {\n    textTransform: \"uppercase\",\n  },\n  headerColorIcon: {\n    width: 24,\n    \"& svg\": {\n      marginLeft: 0,\n    },\n  },\n  panel: {\n    width: \"100%\",\n    minWidth: theme.colorPicker.panelMinWidth,\n    display: \"flex\",\n    justifyContent: \"center\",\n    padding: theme.colorPicker.panelPadding,\n    border: theme.colorPicker.panelBorder,\n    borderRadius: theme.colorPicker.panelBorderRadius,\n  },\n  colorPicker: {\n    width: theme.colorPicker.colorPickerWidth,\n  },\n  colorPickerIcon: {\n    position: \"absolute\",\n    pointerEvents: \"none\",\n    top: -1,\n    right: -1,\n  },\n  dropdownRootIconOnly: {\n    width: 32,\n    height: 32,\n  },\n  headerColorIconOnly: {\n    position: \"absolute\",\n    pointerEvents: \"none\",\n    top: -1,\n    right: -1,\n    width: 32,\n    height: 32,\n  },\n  pickerFields: { paddingBottom: 20 },\n};\n"],"names":["styles","labelContainer","display","alignItems","label","paddingBottom","headerColorValue","textTransform","headerColorIcon","width","marginLeft","panel","minWidth","theme","colorPicker","panelMinWidth","justifyContent","padding","panelPadding","border","panelBorder","borderRadius","panelBorderRadius","colorPickerWidth","colorPickerIcon","position","pointerEvents","top","right","dropdownRootIconOnly","height","headerColorIconOnly","pickerFields"],"mappings":";;;AAIO,MAAMA,SAET;AAAA,EACFC,gBAAgB;AAAA,IACdC,SAAS;AAAA,IACTC,YAAY;AAAA,EACd;AAAA,EACAC,OAAO;AAAA,IACLC,eAAe;AAAA,IACfH,SAAS;AAAA,EACX;AAAA,EACAI,kBAAkB;AAAA,IAChBC,eAAe;AAAA,EACjB;AAAA,EACAC,iBAAiB;AAAA,IACfC,OAAO;AAAA,IACP,SAAS;AAAA,MACPC,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACAC,OAAO;AAAA,IACLF,OAAO;AAAA,IACPG,UAAUC,YAAAA,MAAMC,YAAYC;AAAAA,IAC5Bb,SAAS;AAAA,IACTc,gBAAgB;AAAA,IAChBC,SAASJ,YAAAA,MAAMC,YAAYI;AAAAA,IAC3BC,QAAQN,YAAAA,MAAMC,YAAYM;AAAAA,IAC1BC,cAAcR,YAAAA,MAAMC,YAAYQ;AAAAA,EAClC;AAAA,EACAR,aAAa;AAAA,IACXL,OAAOI,YAAAA,MAAMC,YAAYS;AAAAA,EAC3B;AAAA,EACAC,iBAAiB;AAAA,IACfC,UAAU;AAAA,IACVC,eAAe;AAAA,IACfC,KAAK;AAAA,IACLC,OAAO;AAAA,EACT;AAAA,EACAC,sBAAsB;AAAA,IACpBpB,OAAO;AAAA,IACPqB,QAAQ;AAAA,EACV;AAAA,EACAC,qBAAqB;AAAA,IACnBN,UAAU;AAAA,IACVC,eAAe;AAAA,IACfC,KAAK;AAAA,IACLC,OAAO;AAAA,IACPnB,OAAO;AAAA,IACPqB,QAAQ;AAAA,EACV;AAAA,EACAE,cAAc;AAAA,IAAE3B,eAAe;AAAA,EAAG;AACpC;;"}

package/dist/cjs/components/ColorPicker/Fields/Fields.cjs

@@ -0,0 +1,137 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("@emotion/react");
+const React = require("react");
+const color = require("react-color/lib/helpers/color");
+const Fields_styles = require("./Fields.styles.cjs");
+const fieldsClasses = require("./fieldsClasses.cjs");
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const Input = require("../../Input/Input.cjs");
+function _interopNamespace(e) {
+  if (e && e.__esModule)
+    return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const color__namespace = /* @__PURE__ */ _interopNamespace(color);
+const Fields = ({
+  className,
+  onChange,
+  rgb,
+  hex,
+  classes
+}) => {
+  const [internalHex, setInternalHex] = React.useState(hex);
+  const [internalRed, setInternalRed] = React.useState(rgb == null ? void 0 : rgb.r);
+  const [internalGreen, setInternalGreen] = React.useState(rgb == null ? void 0 : rgb.g);
+  const [internalBlue, setInternalBlue] = React.useState(rgb == null ? void 0 : rgb.b);
+  const hexInputRef = React.useRef();
+  const redInputRef = React.useRef();
+  const greenInputRef = React.useRef();
+  const blueInputRef = React.useRef();
+  React.useEffect(() => {
+    if (document.activeElement !== hexInputRef.current) {
+      setInternalHex(hex);
+    }
+  }, [hex]);
+  React.useEffect(() => {
+    if (document.activeElement !== redInputRef.current) {
+      setInternalRed(rgb == null ? void 0 : rgb.r);
+    }
+    if (document.activeElement !== greenInputRef.current) {
+      setInternalGreen(rgb == null ? void 0 : rgb.g);
+    }
+    if (document.activeElement !== blueInputRef.current) {
+      setInternalBlue(rgb == null ? void 0 : rgb.b);
+    }
+  }, [rgb]);
+  const handleChange = (data, event) => {
+    if (data.hex && color__namespace.isValidHex(data.hex)) {
+      onChange({
+        hex: data.hex,
+        source: "hex"
+      }, event);
+    } else if (data.r || data.g || data.b) {
+      onChange({
+        r: data.r || (rgb == null ? void 0 : rgb.r),
+        g: data.g || (rgb == null ? void 0 : rgb.g),
+        b: data.b || (rgb == null ? void 0 : rgb.b),
+        source: "rgb"
+      }, event);
+    }
+  };
+  const onChangeHex = (event, value) => {
+    setInternalHex(value);
+    handleChange({
+      hex: value
+    }, event);
+  };
+  const onChangeRbg = (event, value, colorPart) => {
+    if (colorPart === "r")
+      setInternalRed(Number(value));
+    if (colorPart === "g")
+      setInternalGreen(Number(value));
+    if (colorPart === "b")
+      setInternalBlue(Number(value));
+    handleChange({
+      r: colorPart === "r" ? Number(value) : rgb == null ? void 0 : rgb.r,
+      g: colorPart === "g" ? Number(value) : rgb == null ? void 0 : rgb.g,
+      b: colorPart === "b" ? Number(value) : rgb == null ? void 0 : rgb.b
+    }, event);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
+    children: ({
+      css,
+      cx
+    }) => /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      className: cx(fieldsClasses.default.fields, css(Fields_styles.styles.fields), className, classes == null ? void 0 : classes.fields),
+      children: [/* @__PURE__ */ jsxRuntime.jsx(Input.HvInput, {
+        inputRef: hexInputRef,
+        className: cx(fieldsClasses.default.double, css(Fields_styles.styles.double), classes == null ? void 0 : classes.double),
+        label: "HEX",
+        value: internalHex == null ? void 0 : internalHex.replace("#", ""),
+        onChange: onChangeHex,
+        onBlur: () => setInternalHex(hex),
+        disableClear: true
+      }), /* @__PURE__ */ jsxRuntime.jsx(Input.HvInput, {
+        inputRef: redInputRef,
+        className: cx(fieldsClasses.default.single, css(Fields_styles.styles.single), classes == null ? void 0 : classes.single),
+        label: "R",
+        value: `${internalRed}`,
+        onChange: (event, value) => onChangeRbg(event, value, "r"),
+        onBlur: () => setInternalRed(rgb == null ? void 0 : rgb.r),
+        disableClear: true
+      }), /* @__PURE__ */ jsxRuntime.jsx(Input.HvInput, {
+        inputRef: greenInputRef,
+        className: cx(fieldsClasses.default.single, css(Fields_styles.styles.single), classes == null ? void 0 : classes.single),
+        label: "G",
+        value: `${internalGreen}`,
+        onChange: (event, value) => onChangeRbg(event, value, "g"),
+        onBlur: () => setInternalGreen(rgb == null ? void 0 : rgb.g),
+        disableClear: true
+      }), /* @__PURE__ */ jsxRuntime.jsx(Input.HvInput, {
+        inputRef: blueInputRef,
+        className: cx(fieldsClasses.default.single, css(Fields_styles.styles.single), classes == null ? void 0 : classes.single),
+        label: "B",
+        value: `${internalBlue}`,
+        onChange: (event, value) => onChangeRbg(event, value, "b"),
+        onBlur: () => setInternalBlue(rgb == null ? void 0 : rgb.b),
+        disableClear: true
+      })]
+    })
+  });
+};
+exports.Fields = Fields;
+//# sourceMappingURL=Fields.cjs.map

package/dist/cjs/components/ColorPicker/Fields/Fields.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fields.cjs","sources":["../../../../../src/components/ColorPicker/Fields/Fields.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { HvInput } from \"@core/components\";\nimport { HSLColor, HSVColor, RGBColor } from \"react-color\";\nimport * as color from \"react-color/lib/helpers/color\";\nimport { styles } from \"./Fields.styles\";\nimport colorPickerFieldsClasses, {\n  HvColorPickerFieldsClasses,\n} from \"./fieldsClasses\";\n\ninterface FieldsProps {\n  className?: string;\n  rgb?: RGBColor;\n  hex?: string;\n  onChange: (\n    data:\n      | HSLColor\n      | HSVColor\n      | RGBColor\n      | {\n          source?: string;\n          hex?: string;\n        },\n    event: React.ChangeEvent<HTMLInputElement>\n  ) => void;\n  classes?: HvColorPickerFieldsClasses;\n}\n\nexport const Fields = ({\n  className,\n  onChange,\n  rgb,\n  hex,\n  classes,\n}: FieldsProps) => {\n  const [internalHex, setInternalHex] = useState<string | undefined>(hex);\n  const [internalRed, setInternalRed] = useState<number | undefined>(rgb?.r);\n  const [internalGreen, setInternalGreen] = useState<number | undefined>(\n    rgb?.g\n  );\n  const [internalBlue, setInternalBlue] = useState<number | undefined>(rgb?.b);\n\n  const hexInputRef = useRef();\n  const redInputRef = useRef();\n  const greenInputRef = useRef();\n  const blueInputRef = useRef();\n\n  useEffect(() => {\n    if (document.activeElement !== hexInputRef.current) {\n      setInternalHex(hex);\n    }\n  }, [hex]);\n\n  useEffect(() => {\n    if (document.activeElement !== redInputRef.current) {\n      setInternalRed(rgb?.r);\n    }\n\n    if (document.activeElement !== greenInputRef.current) {\n      setInternalGreen(rgb?.g);\n    }\n\n    if (document.activeElement !== blueInputRef.current) {\n      setInternalBlue(rgb?.b);\n    }\n  }, [rgb]);\n\n  const handleChange = (\n    data: {\n      hex?: string;\n      r?: number;\n      g?: number;\n      b?: number;\n    },\n    event: React.ChangeEvent<HTMLInputElement>\n  ) => {\n    if (data.hex && color.isValidHex(data.hex)) {\n      onChange(\n        {\n          hex: data.hex,\n          source: \"hex\",\n        },\n        event\n      );\n    } else if (data.r || data.g || data.b) {\n      onChange(\n        {\n          r: data.r || rgb?.r,\n          g: data.g || rgb?.g,\n          b: data.b || rgb?.b,\n          source: \"rgb\",\n        },\n        event\n      );\n    }\n  };\n\n  const onChangeHex = (\n    event: React.ChangeEvent<HTMLInputElement>,\n    value: string\n  ) => {\n    setInternalHex(value);\n    handleChange({ hex: value }, event);\n  };\n\n  const onChangeRbg = (\n    event: React.ChangeEvent<HTMLInputElement>,\n    value: string,\n    colorPart: \"r\" | \"g\" | \"b\"\n  ) => {\n    if (colorPart === \"r\") setInternalRed(Number(value));\n    if (colorPart === \"g\") setInternalGreen(Number(value));\n    if (colorPart === \"b\") setInternalBlue(Number(value));\n\n    handleChange(\n      {\n        r: colorPart === \"r\" ? Number(value) : rgb?.r,\n        g: colorPart === \"g\" ? Number(value) : rgb?.g,\n        b: colorPart === \"b\" ? Number(value) : rgb?.b,\n      },\n      event\n    );\n  };\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <div\n          className={cx(\n            colorPickerFieldsClasses.fields,\n            css(styles.fields),\n            className,\n            classes?.fields\n          )}\n        >\n          <HvInput\n            inputRef={hexInputRef}\n            className={cx(\n              colorPickerFieldsClasses.double,\n              css(styles.double),\n              classes?.double\n            )}\n            label=\"HEX\"\n            value={internalHex?.replace(\"#\", \"\")}\n            onChange={onChangeHex}\n            onBlur={() => setInternalHex(hex)}\n            disableClear\n          />\n          <HvInput\n            inputRef={redInputRef}\n            className={cx(\n              colorPickerFieldsClasses.single,\n              css(styles.single),\n              classes?.single\n            )}\n            label=\"R\"\n            value={`${internalRed}`}\n            onChange={(event, value) => onChangeRbg(event, value, \"r\")}\n            onBlur={() => setInternalRed(rgb?.r)}\n            disableClear\n          />\n          <HvInput\n            inputRef={greenInputRef}\n            className={cx(\n              colorPickerFieldsClasses.single,\n              css(styles.single),\n              classes?.single\n            )}\n            label=\"G\"\n            value={`${internalGreen}`}\n            onChange={(event, value) => onChangeRbg(event, value, \"g\")}\n            onBlur={() => setInternalGreen(rgb?.g)}\n            disableClear\n          />\n          <HvInput\n            inputRef={blueInputRef}\n            className={cx(\n              colorPickerFieldsClasses.single,\n              css(styles.single),\n              classes?.single\n            )}\n            label=\"B\"\n            value={`${internalBlue}`}\n            onChange={(event, value) => onChangeRbg(event, value, \"b\")}\n            onBlur={() => setInternalBlue(rgb?.b)}\n            disableClear\n          />\n        </div>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["Fields","className","onChange","rgb","hex","classes","internalHex","setInternalHex","useState","internalRed","setInternalRed","r","internalGreen","setInternalGreen","g","internalBlue","setInternalBlue","b","hexInputRef","useRef","redInputRef","greenInputRef","blueInputRef","useEffect","document","activeElement","current","handleChange","data","event","color","isValidHex","source","onChangeHex","value","onChangeRbg","colorPart","Number","ClassNames","children","css","cx","colorPickerFieldsClasses","fields","styles","_jsx","HvInput","inputRef","double","label","replace","onBlur","disableClear","single"],"mappings":"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"}

package/dist/cjs/components/ColorPicker/Fields/Fields.styles.cjs

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const styles = {
+  fields: {
+    width: "100%",
+    display: "flex",
+    paddingTop: uikitStyles.theme.colorPicker.fieldsPaddingTop,
+    marginRight: uikitStyles.theme.colorPicker.fieldsMarginRight
+  },
+  single: {
+    maxWidth: uikitStyles.theme.colorPicker.fieldsRgbWidth,
+    paddingLeft: uikitStyles.theme.colorPicker.fieldsRgbPaddingLeft,
+    "& input": {
+      marginLeft: 5,
+      marginRight: 5
+    },
+    "& label": {
+      paddingLeft: 5
+    }
+  },
+  double: {
+    maxWidth: uikitStyles.theme.colorPicker.fieldsHexWidth,
+    paddingRight: uikitStyles.theme.colorPicker.fieldsHexPaddingRight,
+    "& input": {
+      textTransform: "uppercase",
+      marginLeft: 5,
+      marginRight: 5
+    },
+    "& label": {
+      paddingLeft: 5
+    }
+  }
+};
+exports.styles = styles;
+//# sourceMappingURL=Fields.styles.cjs.map

package/dist/cjs/components/ColorPicker/Fields/Fields.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fields.styles.cjs","sources":["../../../../../src/components/ColorPicker/Fields/Fields.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvColorPickerFieldsClasses } from \"./fieldsClasses\";\n\nexport const styles: Partial<\n  Record<keyof HvColorPickerFieldsClasses, CSSInterpolation>\n> = {\n  fields: {\n    width: \"100%\",\n    display: \"flex\",\n    paddingTop: theme.colorPicker.fieldsPaddingTop,\n    marginRight: theme.colorPicker.fieldsMarginRight,\n  },\n  single: {\n    maxWidth: theme.colorPicker.fieldsRgbWidth,\n    paddingLeft: theme.colorPicker.fieldsRgbPaddingLeft,\n    \"& input\": {\n      marginLeft: 5,\n      marginRight: 5,\n    },\n    \"& label\": {\n      paddingLeft: 5,\n    },\n  },\n  double: {\n    maxWidth: theme.colorPicker.fieldsHexWidth,\n    paddingRight: theme.colorPicker.fieldsHexPaddingRight,\n    \"& input\": {\n      textTransform: \"uppercase\",\n      marginLeft: 5,\n      marginRight: 5,\n    },\n    \"& label\": {\n      paddingLeft: 5,\n    },\n  },\n};\n"],"names":["styles","fields","width","display","paddingTop","theme","colorPicker","fieldsPaddingTop","marginRight","fieldsMarginRight","single","maxWidth","fieldsRgbWidth","paddingLeft","fieldsRgbPaddingLeft","marginLeft","double","fieldsHexWidth","paddingRight","fieldsHexPaddingRight","textTransform"],"mappings":";;;AAIO,MAAMA,SAET;AAAA,EACFC,QAAQ;AAAA,IACNC,OAAO;AAAA,IACPC,SAAS;AAAA,IACTC,YAAYC,YAAAA,MAAMC,YAAYC;AAAAA,IAC9BC,aAAaH,YAAAA,MAAMC,YAAYG;AAAAA,EACjC;AAAA,EACAC,QAAQ;AAAA,IACNC,UAAUN,YAAAA,MAAMC,YAAYM;AAAAA,IAC5BC,aAAaR,YAAAA,MAAMC,YAAYQ;AAAAA,IAC/B,WAAW;AAAA,MACTC,YAAY;AAAA,MACZP,aAAa;AAAA,IACf;AAAA,IACA,WAAW;AAAA,MACTK,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACAG,QAAQ;AAAA,IACNL,UAAUN,YAAAA,MAAMC,YAAYW;AAAAA,IAC5BC,cAAcb,YAAAA,MAAMC,YAAYa;AAAAA,IAChC,WAAW;AAAA,MACTC,eAAe;AAAA,MACfL,YAAY;AAAA,MACZP,aAAa;AAAA,IACf;AAAA,IACA,WAAW;AAAA,MACTK,aAAa;AAAA,IACf;AAAA,EACF;AACF;;"}

package/dist/cjs/components/ColorPicker/Fields/fieldsClasses.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const classes = require("../../../utils/classes.cjs");
+const classKeys = ["double", "fields", "single"];
+const colorPickerFieldsClasses = classes.getClasses(classKeys, "HvColorPicker-Fields");
+const colorPickerFieldsClasses$1 = colorPickerFieldsClasses;
+exports.default = colorPickerFieldsClasses$1;
+//# sourceMappingURL=fieldsClasses.cjs.map

package/dist/cjs/components/ColorPicker/Fields/fieldsClasses.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"fieldsClasses.cjs","sources":["../../../../../src/components/ColorPicker/Fields/fieldsClasses.ts"],"sourcesContent":["import { getClasses } from \"@core/utils\";\n\nexport interface HvColorPickerFieldsClasses {\n  fields?: string;\n  double?: string;\n  single?: string;\n}\n\nconst classKeys: (keyof HvColorPickerFieldsClasses)[] = [\n  \"double\",\n  \"fields\",\n  \"single\",\n];\n\nconst colorPickerFieldsClasses = getClasses(classKeys, \"HvColorPicker-Fields\");\n\nexport default colorPickerFieldsClasses;\n"],"names":["classKeys","colorPickerFieldsClasses","getClasses"],"mappings":";;;AAQA,MAAMA,YAAkD,CACtD,UACA,UACA,QAAQ;AAGV,MAAMC,2BAA2BC,QAAWF,WAAAA,WAAW,sBAAsB;AAE7E,MAAA,6BAAeC;;"}

package/dist/cjs/components/ColorPicker/Picker/Picker.cjs

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const react = require("@emotion/react");
+const React = require("react");
+const common = require("react-color/lib/components/common");
+const reactColor = require("react-color");
+const Picker_styles = require("./Picker.styles.cjs");
+const pickerClasses = require("./pickerClasses.cjs");
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const Fields = require("../Fields/Fields.cjs");
+const useTheme = require("../../../hooks/useTheme.cjs");
+const Typography = require("../../Typography/Typography.cjs");
+const Picker = ({
+  onChange,
+  rgb,
+  hsl,
+  hsv,
+  hex,
+  title,
+  classes
+}) => {
+  const {
+    activeTheme
+  } = useTheme.useTheme();
+  const SaturationPointer = React.useCallback(() => /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
+    children: ({
+      css,
+      cx
+    }) => /* @__PURE__ */ jsxRuntime.jsx("div", {
+      className: cx(pickerClasses.default.saturationPointer, css(Picker_styles.styles.saturationPointer), classes == null ? void 0 : classes.saturationPointer)
+    })
+  }), []);
+  const HueSlider = React.useCallback(() => /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
+    children: ({
+      css,
+      cx
+    }) => /* @__PURE__ */ jsxRuntime.jsx("div", {
+      className: cx(pickerClasses.default.hueSlider, css(Picker_styles.styles.hueSlider), classes == null ? void 0 : classes.hueSlider)
+    })
+  }), []);
+  return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
+    children: ({
+      css,
+      cx
+    }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [title && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
+        className: cx(pickerClasses.default.title, css(Picker_styles.styles.title), classes == null ? void 0 : classes.title),
+        variant: "caption1",
+        children: title
+      }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        className: cx(pickerClasses.default.pickers, css(Picker_styles.styles.pickers), classes == null ? void 0 : classes.pickers),
+        children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
+          className: cx(pickerClasses.default.saturation, css(Picker_styles.styles.saturation), classes == null ? void 0 : classes.saturation),
+          children: /* @__PURE__ */ jsxRuntime.jsx(common.Saturation, {
+            hsl,
+            hsv,
+            onChange,
+            pointer: SaturationPointer
+          })
+        }), /* @__PURE__ */ jsxRuntime.jsx("div", {
+          className: cx(pickerClasses.default.hue, css(Picker_styles.styles.hue), classes == null ? void 0 : classes.hue),
+          children: /* @__PURE__ */ jsxRuntime.jsx(common.Hue, {
+            direction: activeTheme == null ? void 0 : activeTheme.colorPicker.hueDirection,
+            hsl,
+            onChange,
+            pointer: HueSlider
+          })
+        })]
+      }), /* @__PURE__ */ jsxRuntime.jsx(Fields.Fields, {
+        className: cx(pickerClasses.default.fields, classes == null ? void 0 : classes.fields),
+        rgb,
+        hex,
+        onChange
+      })]
+    })
+  });
+};
+const Picker$1 = reactColor.CustomPicker(Picker);
+exports.Picker = Picker;
+exports.default = Picker$1;
+//# sourceMappingURL=Picker.cjs.map

package/dist/cjs/components/ColorPicker/Picker/Picker.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Picker.cjs","sources":["../../../../../src/components/ColorPicker/Picker/Picker.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport { useCallback } from \"react\";\nimport { Saturation, Hue } from \"react-color/lib/components/common\";\nimport {\n  CustomPicker,\n  CustomPickerInjectedProps,\n  HSLColor,\n  HSVColor,\n  RGBColor,\n} from \"react-color\";\nimport { styles } from \"./Picker.styles\";\nimport { Fields } from \"../Fields\";\nimport { HvTypography } from \"@core/components\";\nimport { useTheme } from \"@core/hooks\";\nimport colorPickerPickerClasses, {\n  HvColorPickerPickerClasses,\n} from \"./pickerClasses\";\n\nexport const Picker = ({\n  onChange,\n  rgb,\n  hsl,\n  hsv,\n  hex,\n  title,\n  classes,\n}: {\n  classes?: HvColorPickerPickerClasses;\n  title?: string;\n} & CustomPickerInjectedProps<\n  | HSLColor\n  | HSVColor\n  | RGBColor\n  | {\n      source?: string;\n      hex?: string;\n    }\n>) => {\n  const { activeTheme } = useTheme();\n\n  const SaturationPointer = useCallback(\n    () => (\n      <ClassNames>\n        {({ css, cx }) => (\n          <div\n            className={cx(\n              colorPickerPickerClasses.saturationPointer,\n              css(styles.saturationPointer),\n              classes?.saturationPointer\n            )}\n          />\n        )}\n      </ClassNames>\n    ),\n    []\n  );\n\n  const HueSlider = useCallback(\n    () => (\n      <ClassNames>\n        {({ css, cx }) => (\n          <div\n            className={cx(\n              colorPickerPickerClasses.hueSlider,\n              css(styles.hueSlider),\n              classes?.hueSlider\n            )}\n          />\n        )}\n      </ClassNames>\n    ),\n    []\n  );\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <>\n          {title && (\n            <HvTypography\n              className={cx(\n                colorPickerPickerClasses.title,\n                css(styles.title),\n                classes?.title\n              )}\n              variant=\"caption1\"\n            >\n              {title}\n            </HvTypography>\n          )}\n          <div\n            className={cx(\n              colorPickerPickerClasses.pickers,\n              css(styles.pickers),\n              classes?.pickers\n            )}\n          >\n            <div\n              className={cx(\n                colorPickerPickerClasses.saturation,\n                css(styles.saturation),\n                classes?.saturation\n              )}\n            >\n              <Saturation\n                hsl={hsl}\n                hsv={hsv}\n                onChange={onChange}\n                pointer={SaturationPointer}\n              />\n            </div>\n            <div\n              className={cx(\n                colorPickerPickerClasses.hue,\n                css(styles.hue),\n                classes?.hue\n              )}\n            >\n              <Hue\n                direction={activeTheme?.colorPicker.hueDirection}\n                hsl={hsl}\n                onChange={onChange}\n                pointer={HueSlider}\n              />\n            </div>\n          </div>\n          <Fields\n            className={cx(colorPickerPickerClasses.fields, classes?.fields)}\n            rgb={rgb}\n            hex={hex}\n            onChange={onChange}\n          />\n        </>\n      )}\n    </ClassNames>\n  );\n};\n\nexport default CustomPicker(Picker);\n"],"names":["Picker","onChange","rgb","hsl","hsv","hex","title","classes","activeTheme","useTheme","SaturationPointer","useCallback","_jsx","ClassNames","children","css","cx","className","colorPickerPickerClasses","saturationPointer","styles","HueSlider","hueSlider","_Fragment","HvTypography","variant","_jsxs","pickers","saturation","Saturation","pointer","hue","Hue","direction","colorPicker","hueDirection","Fields","fields","CustomPicker"],"mappings":";;;;;;;;;;;;AAkBO,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAYF,MAAM;AACE,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAU,SAAA;AAElC,QAAMC,oBAAoBC,MAAAA,YACxB,MACEC,2BAAAA,IAACC,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,qCACP,OAAA;AAAA,MACEC,WAAWD,GACTE,cAAyBC,QAAAA,mBACzBJ,IAAIK,cAAAA,OAAOD,iBAAiB,GAC5BZ,mCAASY,iBAAiB;AAAA,IAAA,CAC1B;AAAA,EAAA,CAIT,GACD,CAAE,CAAA;AAGJ,QAAME,YAAYV,MAAAA,YAChB,MACEC,2BAAAA,IAACC,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,qCACP,OAAA;AAAA,MACEC,WAAWD,GACTE,cAAyBI,QAAAA,WACzBP,IAAIK,cAAAA,OAAOE,SAAS,GACpBf,mCAASe,SAAS;AAAA,IAAA,CAClB;AAAA,EAAA,CAIT,GACD,CAAE,CAAA;AAGJ,wCACGT,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,sCACPO,WAAAA,UAAA;AAAA,MAAAT,UACGR,CAAAA,SACCM,2BAAAA,IAACY,yBAAY;AAAA,QACXP,WAAWD,GACTE,cAAyBZ,QAAAA,OACzBS,IAAIK,cAAAA,OAAOd,KAAK,GAChBC,mCAASD,KAAK;AAAA,QAEhBmB,SAAQ;AAAA,QAAUX,UAEjBR;AAAAA,MAAAA,CAAK,GAGVoB,2BAAAA,KAAA,OAAA;AAAA,QACET,WAAWD,GACTE,cAAyBS,QAAAA,SACzBZ,IAAIK,cAAAA,OAAOO,OAAO,GAClBpB,mCAASoB,OAAO;AAAA,QAChBb,WAEFF,2BAAAA,IAAA,OAAA;AAAA,UACEK,WAAWD,GACTE,cAAyBU,QAAAA,YACzBb,IAAIK,cAAAA,OAAOQ,UAAU,GACrBrB,mCAASqB,UAAU;AAAA,UACnBd,yCAEDe,mBAAU;AAAA,YACT1B;AAAAA,YACAC;AAAAA,YACAH;AAAAA,YACA6B,SAASpB;AAAAA,UAAAA,CAAkB;AAAA,QAAA,CAC3B,GAEJE,2BAAAA,IAAA,OAAA;AAAA,UACEK,WAAWD,GACTE,cAAyBa,QAAAA,KACzBhB,IAAIK,cAAAA,OAAOW,GAAG,GACdxB,mCAASwB,GAAG;AAAA,UACZjB,yCAEDkB,YAAG;AAAA,YACFC,WAAWzB,2CAAa0B,YAAYC;AAAAA,YACpChC;AAAAA,YACAF;AAAAA,YACA6B,SAAST;AAAAA,UAAAA,CAAU;AAAA,QAAA,CAEjB,CAAA;AAAA,MAAA,CACF,GACNT,2BAAAA,IAACwB,eAAM;AAAA,QACLnB,WAAWD,GAAGE,cAAAA,QAAyBmB,QAAQ9B,mCAAS8B,MAAM;AAAA,QAC9DnC;AAAAA,QACAG;AAAAA,QACAJ;AAAAA,MAAAA,CACA,CAAA;AAAA,IAAA,CAAA;AAAA,EAAA,CAGK;AAEjB;AAEA,MAAeqC,WAAAA,WAAAA,aAAatC,MAAM;;;"}