@hitachivantara/uikit-react-core 5.39.3 → 5.39.4

package/dist/esm/components/ColorPicker/ColorPicker.js

@@ -1,244 +0,0 @@
-import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
-import { forwardRef } from "react";
-import { Checkbox, ColorPicker } from "@hitachivantara/uikit-react-icons";
-import { useDefaultProps } from "../../hooks/useDefaultProps.js";
-import { useControlled } from "../../hooks/useControlled.js";
-import { useUniqueId } from "../../hooks/useUniqueId.js";
-import { useLabels } from "../../hooks/useLabels.js";
-import { setId } from "../../utils/setId.js";
-import { useClasses } from "./ColorPicker.styles.js";
-import { staticClasses } from "./ColorPicker.styles.js";
-import { PresetColors } from "./PresetColors/PresetColors.js";
-import { Picker } from "./Picker/Picker.js";
-import { SavedColors } from "./SavedColors/SavedColors.js";
-import { HvFormElement } from "../Forms/FormElement/FormElement.js";
-import { HvLabel } from "../Forms/Label/Label.js";
-import { HvInfoMessage } from "../Forms/InfoMessage/InfoMessage.js";
-import { HvBaseDropdown } from "../BaseDropdown/BaseDropdown.js";
-import { HvTypography } from "../Typography/Typography.js";
-import { HvPanel } from "../Panel/Panel.js";
-const DEFAULT_LABELS = {
-  recommendedColorsLabel: "Recommended colors:",
-  customColorsLabel: "Custom colors:"
-};
-const HvColorPicker = forwardRef(
-  (props, ref) => {
-    const {
-      id,
-      name,
-      required = false,
-      disabled = false,
-      label,
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledBy,
-      description,
-      "aria-describedby": ariaDescribedBy,
-      className,
-      classes: classesProp,
-      value,
-      onChange,
-      onChangeComplete,
-      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",
-      addSavedColorButtonAriaLabel = "Add current color to saved colors"
-    } = useDefaultProps("HvColorPicker", props);
-    const { classes, css, cx } = useClasses(classesProp);
-    const labels = useLabels(DEFAULT_LABELS, labelsProp);
-    const [isOpen, setIsOpen] = useControlled(
-      expanded,
-      Boolean(defaultExpanded)
-    );
-    const [color, setColor] = useControlled(value, defaultValue);
-    const [savedColors, setSavedColors] = useControlled(
-      savedColorsValue,
-      defaultSavedColorsValue
-    );
-    const elementId = useUniqueId(id, "hvdropdown");
-    const hasLabel = label != null;
-    const hasDescription = description != null;
-    const handleToggle = (_, open) => {
-      setIsOpen(open);
-    };
-    const handleSelect = (val) => {
-      onChange?.(val.hex);
-      onChangeComplete?.(val.hex);
-      setColor(val.hex);
-    };
-    const handleOnChange = (val) => {
-      onChange?.(val.hex);
-      setColor(val.hex);
-    };
-    const handleOnChangeComplete = (val) => {
-      onChangeComplete?.(val.hex);
-      setColor(val.hex);
-    };
-    const handleAddColor = () => {
-      const colorToAdd = color || "#000000";
-      onSavedColorAdded?.(colorToAdd);
-      setSavedColors([...savedColors, colorToAdd]);
-    };
-    const handleRemoveColor = (val, position) => {
-      if (savedColors[position] === val) {
-        const sColors = [...savedColors];
-        sColors.splice(position, 1);
-        onSavedColorRemoved?.(val);
-        setSavedColors(sColors);
-      }
-    };
-    const setFocusToContent = (containerRef) => {
-      const inputs = containerRef?.getElementsByTagName("input");
-      if (inputs && inputs.length > 0) {
-        inputs[0].focus();
-      }
-    };
-    return /* @__PURE__ */ jsxs(
-      HvFormElement,
-      {
-        id,
-        name,
-        disabled,
-        required,
-        className: cx(classes.root, className),
-        children: [
-          (hasLabel || hasDescription) && /* @__PURE__ */ jsxs("div", { className: classes.labelContainer, children: [
-            hasLabel && /* @__PURE__ */ jsx(
-              HvLabel,
-              {
-                id: setId(elementId, "label"),
-                label,
-                className: classes.label
-              }
-            ),
-            hasDescription && /* @__PURE__ */ jsx(
-              HvInfoMessage,
-              {
-                id: setId(elementId, "description"),
-                className: classes.description,
-                children: description
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(
-            HvBaseDropdown,
-            {
-              ref,
-              variableWidth: true,
-              className,
-              expanded: isOpen,
-              onToggle: handleToggle,
-              onContainerCreation: setFocusToContent,
-              classes: {
-                root: cx({ [classes.dropdownRootIconOnly]: iconOnly }),
-                selection: cx(iconOnly && css({ padding: 0 }))
-              },
-              adornment: iconOnly && color ? /* @__PURE__ */ jsx(
-                Checkbox,
-                {
-                  className: classes.headerColorIconOnly,
-                  color: [color, "transparent"]
-                }
-              ) : dropdownIcon === "colorPicker" ? /* @__PURE__ */ jsx(ColorPicker, { className: classes.colorPickerIcon }) : void 0,
-              placeholder: iconOnly ? void 0 : color ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(
-                  Checkbox,
-                  {
-                    className: classes.headerColorIcon,
-                    color: [color, "transparent"]
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  HvTypography,
-                  {
-                    className: classes.headerColorValue,
-                    variant: "label",
-                    children: color
-                  }
-                )
-              ] }) : placeholder,
-              "aria-label": ariaLabel,
-              "aria-labelledby": [label && setId(elementId, "label"), ariaLabelledBy].join(" ").trim() || void 0,
-              "aria-describedby": [description && setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0,
-              children: /* @__PURE__ */ jsx(HvPanel, { className: classes.panel, children: /* @__PURE__ */ jsxs("div", { className: classes.colorPicker, children: [
-                recommendedColorsPosition === "top" && /* @__PURE__ */ jsx(
-                  PresetColors,
-                  {
-                    className: classes.recommendedColorsRoot,
-                    colors: recommendedColors,
-                    onClick: handleSelect,
-                    title: showLabels ? labels?.recommendedColorsLabel : void 0
-                  }
-                ),
-                showCustomColors && /* @__PURE__ */ jsx(
-                  Picker,
-                  {
-                    classes: {
-                      fields: cx({
-                        [classes.pickerFields]: recommendedColorsPosition === "bottom" || showSavedColors
-                      })
-                    },
-                    title: showLabels ? labels?.customColorsLabel : void 0,
-                    color,
-                    onChange: handleOnChange,
-                    onChangeComplete: handleOnChangeComplete
-                  }
-                ),
-                showSavedColors && /* @__PURE__ */ jsx(
-                  SavedColors,
-                  {
-                    colors: savedColors,
-                    onAddColor: handleAddColor,
-                    onClickColor: handleSelect,
-                    onRemoveColor: handleRemoveColor,
-                    deleteButtonAriaLabel: deleteSavedColorButtonArialLabel,
-                    addButtonAriaLabel: addSavedColorButtonAriaLabel
-                  }
-                ),
-                recommendedColorsPosition === "bottom" && /* @__PURE__ */ jsx(
-                  PresetColors,
-                  {
-                    colors: recommendedColors,
-                    onClick: handleSelect,
-                    title: showLabels ? labels?.recommendedColorsLabel : void 0
-                  }
-                )
-              ] }) })
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-export {
-  HvColorPicker,
-  staticClasses as colorPickerClasses
-};
-//# sourceMappingURL=ColorPicker.js.map

package/dist/esm/components/ColorPicker/ColorPicker.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ColorPicker.js","sources":["../../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { ColorState } from \"react-color\";\n\nimport { Checkbox, ColorPicker } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useLabels } from \"@core/hooks/useLabels\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvPanel } from \"@core/components/Panel\";\nimport { HvFormElement, HvInfoMessage, HvLabel } from \"@core/components/Forms\";\nimport { HvBaseDropdown } from \"@core/components/BaseDropdown\";\nimport { HvDropdownProps } from \"@core/components/Dropdown\";\n\nimport { Picker } from \"./Picker\";\nimport { staticClasses, useClasses } from \"./ColorPicker.styles\";\nimport { PresetColors } from \"./PresetColors\";\nimport { SavedColors } from \"./SavedColors\";\n\nexport { staticClasses as colorPickerClasses };\n\nexport type HvColorPickerClasses = ExtractNames<typeof useClasses>;\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 function to be executed whenever the color change is complete. */\n  onChangeComplete?: (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; // TODO: fix typo \"ArialLabel\" in next version\n  /** Aria label to apply to add saved color button. */\n  addSavedColorButtonAriaLabel?: 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 = forwardRef<HTMLDivElement, HvColorPickerProps>(\n  (props, ref) => {\n    const {\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: classesProp,\n      value,\n      onChange,\n      onChangeComplete,\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      addSavedColorButtonAriaLabel = \"Add current color to saved colors\",\n    } = useDefaultProps(\"HvColorPicker\", props);\n\n    const { classes, css, cx } = useClasses(classesProp);\n\n    const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n    const [isOpen, setIsOpen] = useControlled(\n      expanded,\n      Boolean(defaultExpanded)\n    );\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: HvDropdownProps[\"onToggle\"] = (_, open) => {\n      setIsOpen(open);\n    };\n\n    const handleSelect = (\n      val: ColorState | { hex: string; source: string }\n    ) => {\n      onChange?.(val.hex);\n      onChangeComplete?.(val.hex);\n      setColor(val.hex);\n    };\n\n    const handleOnChange = (\n      val: ColorState | { hex: string; source: string }\n    ) => {\n      onChange?.(val.hex);\n      setColor(val.hex);\n    };\n\n    const handleOnChangeComplete = (\n      val: ColorState | { hex: string; source: string }\n    ) => {\n      onChangeComplete?.(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      <HvFormElement\n        id={id}\n        name={name}\n        disabled={disabled}\n        required={required}\n        className={cx(classes.root, className)}\n      >\n        {(hasLabel || hasDescription) && (\n          <div className={classes.labelContainer}>\n            {hasLabel && (\n              <HvLabel\n                id={setId(elementId, \"label\")}\n                label={label}\n                className={classes.label}\n              />\n            )}\n\n            {hasDescription && (\n              <HvInfoMessage\n                id={setId(elementId, \"description\")}\n                className={classes.description}\n              >\n                {description}\n              </HvInfoMessage>\n            )}\n          </div>\n        )}\n        <HvBaseDropdown\n          ref={ref}\n          variableWidth\n          className={className}\n          expanded={isOpen}\n          onToggle={handleToggle}\n          onContainerCreation={setFocusToContent}\n          classes={{\n            root: cx({ [classes.dropdownRootIconOnly]: iconOnly }),\n            selection: cx(iconOnly && css({ padding: 0 })),\n          }}\n          adornment={\n            iconOnly && color ? (\n              <Checkbox\n                className={classes.headerColorIconOnly}\n                color={[color, \"transparent\"]}\n              />\n            ) : dropdownIcon === \"colorPicker\" ? (\n              <ColorPicker className={classes.colorPickerIcon} />\n            ) : undefined\n          }\n          placeholder={\n            iconOnly ? undefined : color ? (\n              <>\n                <Checkbox\n                  className={classes.headerColorIcon}\n                  color={[color, \"transparent\"]}\n                />\n                <HvTypography\n                  className={classes.headerColorValue}\n                  variant=\"label\"\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 className={classes.panel}>\n            <div className={classes.colorPicker}>\n              {recommendedColorsPosition === \"top\" && (\n                <PresetColors\n                  className={classes.recommendedColorsRoot}\n                  colors={recommendedColors}\n                  onClick={handleSelect}\n                  title={\n                    showLabels ? labels?.recommendedColorsLabel : undefined\n                  }\n                />\n              )}\n              {showCustomColors && (\n                <Picker\n                  classes={{\n                    fields: cx({\n                      [classes.pickerFields]:\n                        recommendedColorsPosition === \"bottom\" ||\n                        showSavedColors,\n                    }),\n                  }}\n                  title={showLabels ? labels?.customColorsLabel : undefined}\n                  color={color}\n                  onChange={handleOnChange}\n                  onChangeComplete={handleOnChangeComplete}\n                />\n              )}\n              {showSavedColors && (\n                <SavedColors\n                  colors={savedColors}\n                  onAddColor={handleAddColor}\n                  onClickColor={handleSelect}\n                  onRemoveColor={handleRemoveColor}\n                  deleteButtonAriaLabel={deleteSavedColorButtonArialLabel}\n                  addButtonAriaLabel={addSavedColorButtonAriaLabel}\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  }\n);\n"],"names":[],"mappings":"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"}

package/dist/esm/components/ColorPicker/ColorPicker.styles.js

@@ -1,50 +0,0 @@
-import { createClasses } from "../../utils/classes.js";
-const { staticClasses, useClasses } = createClasses("HvColorPicker", {
-  root: {},
-  labelContainer: {
-    display: "flex",
-    alignItems: "flex-start"
-  },
-  label: {
-    paddingBottom: "6px",
-    display: "block",
-    cursor: "pointer"
-  },
-  description: {},
-  headerColorValue: {
-    textTransform: "uppercase"
-  },
-  headerColorIcon: {
-    width: 24,
-    "& svg": {
-      marginLeft: 0
-    }
-  },
-  panel: {
-    width: "100%",
-    minWidth: "266px",
-    display: "flex",
-    justifyContent: "center",
-    padding: "16px"
-  },
-  colorPicker: {
-    width: "232px"
-  },
-  colorPickerIcon: {},
-  recommendedColorsRoot: {
-    ":not(:only-child)": {
-      paddingBottom: "24px"
-    }
-  },
-  dropdownRootIconOnly: {
-    width: 32,
-    height: 32
-  },
-  headerColorIconOnly: {},
-  pickerFields: { paddingBottom: 20 }
-});
-export {
-  staticClasses,
-  useClasses
-};
-//# sourceMappingURL=ColorPicker.styles.js.map

package/dist/esm/components/ColorPicker/ColorPicker.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ColorPicker.styles.js","sources":["../../../../src/components/ColorPicker/ColorPicker.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvColorPicker\", {\n  root: {},\n  labelContainer: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n  },\n  label: {\n    paddingBottom: \"6px\",\n    display: \"block\",\n    cursor: \"pointer\",\n  },\n  description: {},\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: \"266px\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    padding: \"16px\",\n  },\n  colorPicker: {\n    width: \"232px\",\n  },\n  colorPickerIcon: {},\n  recommendedColorsRoot: {\n    \":not(:only-child)\": {\n      paddingBottom: \"24px\",\n    },\n  },\n  dropdownRootIconOnly: {\n    width: 32,\n    height: 32,\n  },\n  headerColorIconOnly: {},\n  pickerFields: { paddingBottom: 20 },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM,CAAC;AAAA,EACP,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AAAA,EACA,OAAO;AAAA,IACL,eAAe;AAAA,IACf,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EACA,aAAa,CAAC;AAAA,EACd,kBAAkB;AAAA,IAChB,eAAe;AAAA,EACjB;AAAA,EACA,iBAAiB;AAAA,IACf,OAAO;AAAA,IACP,SAAS;AAAA,MACP,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACA,OAAO;AAAA,IACL,OAAO;AAAA,IACP,UAAU;AAAA,IACV,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,SAAS;AAAA,EACX;AAAA,EACA,aAAa;AAAA,IACX,OAAO;AAAA,EACT;AAAA,EACA,iBAAiB,CAAC;AAAA,EAClB,uBAAuB;AAAA,IACrB,qBAAqB;AAAA,MACnB,eAAe;AAAA,IACjB;AAAA,EACF;AAAA,EACA,sBAAsB;AAAA,IACpB,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,qBAAqB,CAAC;AAAA,EACtB,cAAc,EAAE,eAAe,GAAG;AACpC,CAAC;"}

package/dist/esm/components/ColorPicker/Fields/Fields.js

@@ -1,137 +0,0 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
-import { useState, useRef, useEffect } from "react";
-import * as color from "react-color/lib/helpers/color";
-import { useClasses } from "./Fields.styles.js";
-import { staticClasses } from "./Fields.styles.js";
-import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
-import { HvInput } from "../../Input/Input.js";
-const Fields = (props) => {
-  const {
-    className,
-    onChange,
-    rgb,
-    hex,
-    classes: classesProp
-  } = useDefaultProps("HvColorPickerFields", props);
-  const { classes, cx } = useClasses(classesProp);
-  const [internalHex, setInternalHex] = useState(hex);
-  const [internalRed, setInternalRed] = useState(rgb?.r);
-  const [internalGreen, setInternalGreen] = useState(rgb?.g);
-  const [internalBlue, setInternalBlue] = useState(rgb?.b);
-  const hexInputRef = useRef(null);
-  const redInputRef = useRef(null);
-  const greenInputRef = useRef(null);
-  const blueInputRef = useRef(null);
-  useEffect(() => {
-    if (document.activeElement !== hexInputRef.current) {
-      setInternalHex(hex);
-    }
-  }, [hex]);
-  useEffect(() => {
-    if (document.activeElement !== redInputRef.current) {
-      setInternalRed(rgb?.r);
-    }
-    if (document.activeElement !== greenInputRef.current) {
-      setInternalGreen(rgb?.g);
-    }
-    if (document.activeElement !== blueInputRef.current) {
-      setInternalBlue(rgb?.b);
-    }
-  }, [rgb]);
-  const handleChange = (data, event) => {
-    if (data.hex && color.isValidHex(data.hex)) {
-      onChange(
-        {
-          hex: data.hex,
-          source: "hex"
-        },
-        event
-      );
-    } else if (data.r || data.g || data.b) {
-      onChange(
-        {
-          r: data.r || rgb?.r,
-          g: data.g || rgb?.g,
-          b: data.b || 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?.r,
-        g: colorPart === "g" ? Number(value) : rgb?.g,
-        b: colorPart === "b" ? Number(value) : rgb?.b
-      },
-      event
-    );
-  };
-  return /* @__PURE__ */ jsxs("div", { className: cx(classes.fields, className), children: [
-    /* @__PURE__ */ jsx(
-      HvInput,
-      {
-        ref: hexInputRef,
-        className: classes.double,
-        label: "HEX",
-        value: internalHex?.replace("#", ""),
-        onChange: onChangeHex,
-        onBlur: () => setInternalHex(hex),
-        disableClear: true
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      HvInput,
-      {
-        ref: redInputRef,
-        className: classes.single,
-        label: "R",
-        value: `${internalRed}`,
-        onChange: (event, value) => onChangeRbg(event, value, "r"),
-        onBlur: () => setInternalRed(rgb?.r),
-        disableClear: true
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      HvInput,
-      {
-        ref: greenInputRef,
-        className: classes.single,
-        label: "G",
-        value: `${internalGreen}`,
-        onChange: (event, value) => onChangeRbg(event, value, "g"),
-        onBlur: () => setInternalGreen(rgb?.g),
-        disableClear: true
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      HvInput,
-      {
-        ref: blueInputRef,
-        className: classes.single,
-        label: "B",
-        value: `${internalBlue}`,
-        onChange: (event, value) => onChangeRbg(event, value, "b"),
-        onBlur: () => setInternalBlue(rgb?.b),
-        disableClear: true
-      }
-    )
-  ] });
-};
-export {
-  Fields,
-  staticClasses as colorPickerFieldsClasses
-};
-//# sourceMappingURL=Fields.js.map

package/dist/esm/components/ColorPicker/Fields/Fields.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Fields.js","sources":["../../../../../src/components/ColorPicker/Fields/Fields.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { HSLColor, HSVColor, RGBColor } from \"react-color\";\n\nimport * as color from \"react-color/lib/helpers/color\";\n\nimport { HvInput } from \"@core/components/Input\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useDefaultProps } from \"@core/hooks\";\n\nimport { staticClasses, useClasses } from \"./Fields.styles\";\n\nexport { staticClasses as colorPickerFieldsClasses };\n\nexport type HvColorPickerFieldsClasses = ExtractNames<typeof useClasses>;\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 = (props: FieldsProps) => {\n  const {\n    className,\n    onChange,\n    rgb,\n    hex,\n    classes: classesProp,\n  } = useDefaultProps(\"HvColorPickerFields\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const [internalHex, setInternalHex] = useState(hex);\n  const [internalRed, setInternalRed] = useState(rgb?.r);\n  const [internalGreen, setInternalGreen] = useState(rgb?.g);\n  const [internalBlue, setInternalBlue] = useState(rgb?.b);\n\n  const hexInputRef = useRef<HTMLInputElement>(null);\n  const redInputRef = useRef<HTMLInputElement>(null);\n  const greenInputRef = useRef<HTMLInputElement>(null);\n  const blueInputRef = useRef<HTMLInputElement>(null);\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 = (event: React.ChangeEvent<any>, value: string) => {\n    setInternalHex(value);\n    handleChange({ hex: value }, event);\n  };\n\n  const onChangeRbg = (\n    event: React.ChangeEvent<any>,\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    <div className={cx(classes.fields, className)}>\n      <HvInput\n        ref={hexInputRef}\n        className={classes.double}\n        label=\"HEX\"\n        value={internalHex?.replace(\"#\", \"\")}\n        onChange={onChangeHex}\n        onBlur={() => setInternalHex(hex)}\n        disableClear\n      />\n      <HvInput\n        ref={redInputRef}\n        className={classes.single}\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        ref={greenInputRef}\n        className={classes.single}\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        ref={blueInputRef}\n        className={classes.single}\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};\n"],"names":[],"mappings":"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"}

package/dist/esm/components/ColorPicker/Fields/Fields.styles.js

@@ -1,38 +0,0 @@
-import { createClasses } from "../../../utils/classes.js";
-const name = "HvColorPicker-Fields";
-const { staticClasses, useClasses } = createClasses(name, {
-  fields: {
-    width: "100%",
-    display: "flex",
-    paddingTop: "18px",
-    marginRight: "0px"
-  },
-  single: {
-    maxWidth: "50px",
-    paddingLeft: "4px",
-    "& input": {
-      marginLeft: 5,
-      marginRight: 5
-    },
-    "& label": {
-      paddingLeft: 5
-    }
-  },
-  double: {
-    maxWidth: "82px",
-    paddingRight: "4px",
-    "& input": {
-      textTransform: "uppercase",
-      marginLeft: 5,
-      marginRight: 5
-    },
-    "& label": {
-      paddingLeft: 5
-    }
-  }
-});
-export {
-  staticClasses,
-  useClasses
-};
-//# sourceMappingURL=Fields.styles.js.map

package/dist/esm/components/ColorPicker/Fields/Fields.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Fields.styles.js","sources":["../../../../../src/components/ColorPicker/Fields/Fields.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\n\nconst name = \"HvColorPicker-Fields\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  fields: {\n    width: \"100%\",\n    display: \"flex\",\n    paddingTop: \"18px\",\n    marginRight: \"0px\",\n  },\n  single: {\n    maxWidth: \"50px\",\n    paddingLeft: \"4px\",\n    \"& input\": {\n      marginLeft: 5,\n      marginRight: 5,\n    },\n    \"& label\": {\n      paddingLeft: 5,\n    },\n  },\n  double: {\n    maxWidth: \"82px\",\n    paddingRight: \"4px\",\n    \"& input\": {\n      textTransform: \"uppercase\",\n      marginLeft: 5,\n      marginRight: 5,\n    },\n    \"& label\": {\n      paddingLeft: 5,\n    },\n  },\n});\n"],"names":[],"mappings":";AAEA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAe,cAAc,MAAM;AAAA,EAC/D,QAAQ;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,aAAa;AAAA,EACf;AAAA,EACA,QAAQ;AAAA,IACN,UAAU;AAAA,IACV,aAAa;AAAA,IACb,WAAW;AAAA,MACT,YAAY;AAAA,MACZ,aAAa;AAAA,IACf;AAAA,IACA,WAAW;AAAA,MACT,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,QAAQ;AAAA,IACN,UAAU;AAAA,IACV,cAAc;AAAA,IACd,WAAW;AAAA,MACT,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,aAAa;AAAA,IACf;AAAA,IACA,WAAW;AAAA,MACT,aAAa;AAAA,IACf;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/components/ColorPicker/Picker/Picker.js

@@ -1,69 +0,0 @@
-import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
-import { useCallback } from "react";
-import { Saturation, Hue } from "react-color/lib/components/common";
-import { CustomPicker } from "react-color";
-import { useTheme } from "../../../hooks/useTheme.js";
-import { useClasses } from "./Picker.styles.js";
-import { staticClasses } from "./Picker.styles.js";
-import { Fields } from "../Fields/Fields.js";
-import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
-import { HvTypography } from "../../Typography/Typography.js";
-const Component = (props) => {
-  const {
-    onChange,
-    rgb,
-    hsl,
-    hsv,
-    hex,
-    title,
-    classes: classesProp
-  } = useDefaultProps("HvColorPickerPicker", props);
-  const { activeTheme } = useTheme();
-  const { classes } = useClasses(classesProp);
-  const SaturationPointer = useCallback(
-    () => /* @__PURE__ */ jsx("div", { className: classes?.saturationPointer }),
-    [classes?.saturationPointer]
-  );
-  const HueSlider = useCallback(
-    () => /* @__PURE__ */ jsx("div", { className: classes?.hueSlider }),
-    [classes?.hueSlider]
-  );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    title && /* @__PURE__ */ jsx(HvTypography, { className: classes.title, variant: "caption1", children: title }),
-    /* @__PURE__ */ jsxs("div", { className: classes.pickers, children: [
-      /* @__PURE__ */ jsx("div", { className: classes.saturation, children: /* @__PURE__ */ jsx(
-        Saturation,
-        {
-          hsl,
-          hsv,
-          onChange,
-          pointer: SaturationPointer
-        }
-      ) }),
-      /* @__PURE__ */ jsx("div", { className: classes.hue, children: /* @__PURE__ */ jsx(
-        Hue,
-        {
-          direction: activeTheme?.colorPicker.hueDirection,
-          hsl,
-          onChange,
-          pointer: HueSlider
-        }
-      ) })
-    ] }),
-    /* @__PURE__ */ jsx(
-      Fields,
-      {
-        className: classes.fields,
-        rgb,
-        hex,
-        onChange
-      }
-    )
-  ] });
-};
-const Picker = CustomPicker(Component);
-export {
-  Picker,
-  staticClasses as colorPickerPickerClasses
-};
-//# sourceMappingURL=Picker.js.map

package/dist/esm/components/ColorPicker/Picker/Picker.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Picker.js","sources":["../../../../../src/components/ColorPicker/Picker/Picker.tsx"],"sourcesContent":["import { useCallback } from \"react\";\n\nimport { Saturation, Hue } from \"react-color/lib/components/common\";\nimport {\n  CustomPicker,\n  CustomPickerInjectedProps,\n  HSLColor,\n  HSVColor,\n  RGBColor,\n} from \"react-color\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useDefaultProps } from \"@core/hooks\";\n\nimport { staticClasses, useClasses } from \"./Picker.styles\";\nimport { Fields } from \"../Fields\";\n\nexport { staticClasses as colorPickerPickerClasses };\n\nexport type HvColorPickerPickerClasses = ExtractNames<typeof useClasses>;\n\ninterface PickerProps\n  extends CustomPickerInjectedProps<\n    | HSLColor\n    | HSVColor\n    | RGBColor\n    | {\n        source?: string;\n        hex?: string;\n      }\n  > {\n  classes?: HvColorPickerPickerClasses;\n  title?: string;\n}\n\nconst Component = (props: PickerProps) => {\n  const {\n    onChange,\n    rgb,\n    hsl,\n    hsv,\n    hex,\n    title,\n    classes: classesProp,\n  } = useDefaultProps(\"HvColorPickerPicker\", props);\n  const { activeTheme } = useTheme();\n  const { classes } = useClasses(classesProp);\n\n  const SaturationPointer = useCallback(\n    () => <div className={classes?.saturationPointer} />,\n    [classes?.saturationPointer]\n  );\n\n  const HueSlider = useCallback(\n    () => <div className={classes?.hueSlider} />,\n    [classes?.hueSlider]\n  );\n\n  return (\n    <>\n      {title && (\n        <HvTypography className={classes.title} variant=\"caption1\">\n          {title}\n        </HvTypography>\n      )}\n      <div className={classes.pickers}>\n        <div className={classes.saturation}>\n          <Saturation\n            hsl={hsl}\n            hsv={hsv}\n            onChange={onChange}\n            pointer={SaturationPointer}\n          />\n        </div>\n        <div className={classes.hue}>\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={classes.fields}\n        rgb={rgb}\n        hex={hex}\n        onChange={onChange}\n      />\n    </>\n  );\n};\n\nexport const Picker = CustomPicker(Component);\n"],"names":[],"mappings":";;;;;;;;;;AAsCA,MAAM,YAAY,CAAC,UAAuB;AAClC,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,IACP,gBAAgB,uBAAuB,KAAK;AAC1C,QAAA,EAAE,gBAAgB;AACxB,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,QAAM,oBAAoB;AAAA,IACxB,MAAM,oBAAC,OAAI,EAAA,WAAW,SAAS,kBAAmB,CAAA;AAAA,IAClD,CAAC,SAAS,iBAAiB;AAAA,EAAA;AAG7B,QAAM,YAAY;AAAA,IAChB,MAAM,oBAAC,OAAI,EAAA,WAAW,SAAS,UAAW,CAAA;AAAA,IAC1C,CAAC,SAAS,SAAS;AAAA,EAAA;AAGrB,SAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,6BACE,cAAa,EAAA,WAAW,QAAQ,OAAO,SAAQ,YAC7C,UACH,MAAA,CAAA;AAAA,IAED,qBAAA,OAAA,EAAI,WAAW,QAAQ,SACtB,UAAA;AAAA,MAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,YACtB,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA,SAAS;AAAA,QAAA;AAAA,MAAA,GAEb;AAAA,MACC,oBAAA,OAAA,EAAI,WAAW,QAAQ,KACtB,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,aAAa,YAAY;AAAA,UACpC;AAAA,UACA;AAAA,UACA,SAAS;AAAA,QAAA;AAAA,MAAA,GAEb;AAAA,IAAA,GACF;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ;AAEa,MAAA,SAAS,aAAa,SAAS;"}