@hitachivantara/uikit-react-core 5.104.0 → 5.104.1

package/dist/cjs/CheckBoxGroup/CheckBoxGroup.cjs

@@ -0,0 +1,249 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const LabelContainer = require("../FormElement/LabelContainer.cjs");
+const useControlled = require("../hooks/useControlled.cjs");
+const useUniqueId = require("../hooks/useUniqueId.cjs");
+const CounterLabel = require("../utils/CounterLabel.cjs");
+const multiSelectionEventHandler = require("../utils/multiSelectionEventHandler.cjs");
+const setId = require("../utils/setId.cjs");
+const CheckBoxGroup_styles = require("./CheckBoxGroup.styles.cjs");
+const FormElement = require("../FormElement/FormElement.cjs");
+const CheckBox = require("../CheckBox/CheckBox.cjs");
+const WarningText = require("../FormElement/WarningText/WarningText.cjs");
+const computeSelectAllState = (selected, total) => {
+  if (selected === 0) {
+    return "none";
+  }
+  if (selected === total) {
+    return "all";
+  }
+  return "some";
+};
+const getValueFromSelectedChildren = (children) => {
+  const selectedValues = React.Children.toArray(children).map((child) => {
+    const childIsControlled = child?.props?.checked !== void 0;
+    const childIsSelected = childIsControlled ? child?.props?.checked : child?.props?.defaultChecked;
+    return childIsSelected ? child?.props?.value : void 0;
+  }).filter((v) => v !== void 0);
+  return selectedValues;
+};
+const HvCheckBoxGroup = React.forwardRef(
+  function HvCheckBoxGroup2(props, ref) {
+    const {
+      id,
+      classes: classesProp,
+      className,
+      children,
+      name,
+      label,
+      description,
+      status,
+      statusMessage,
+      defaultValue,
+      value: valueProp,
+      required,
+      readOnly,
+      disabled,
+      showSelectAll,
+      orientation = "vertical",
+      selectAllConjunctionLabel = "/",
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      "aria-errormessage": ariaErrorMessage,
+      onChange,
+      ...others
+    } = uikitReactUtils.useDefaultProps("HvCheckBoxGroup", props);
+    const { classes, cx } = CheckBoxGroup_styles.useClasses(classesProp);
+    const [value, setValue] = useControlled.useControlled(
+      valueProp,
+      defaultValue !== void 0 ? defaultValue : (
+        // When uncontrolled and no default value is given,
+        // extract the initial selected values from the children own state
+        () => getValueFromSelectedChildren(children)
+      )
+    );
+    const [validationState, setValidationState] = useControlled.useControlled(
+      status,
+      "standBy"
+    );
+    const [validationMessage] = useControlled.useControlled(statusMessage, "Required");
+    const elementId = useUniqueId.useUniqueId(id);
+    const selectionAnchor = React.useRef(void 0);
+    const [allValues, selectedState, selectedCount] = React.useMemo(() => {
+      const childValues = [];
+      const childSelectedState = [];
+      let childSelectedCounter = 0;
+      React.Children.toArray(children).forEach((child, i) => {
+        const childValue = child?.props?.value;
+        const childIsSelected = value.indexOf(childValue) !== -1;
+        childValues[i] = childValue;
+        childSelectedState[i] = childIsSelected;
+        if (childIsSelected) {
+          childSelectedCounter += 1;
+        }
+      });
+      return [childValues, childSelectedState, childSelectedCounter];
+    }, [children, value]);
+    const selectAllState = computeSelectAllState(
+      value.length,
+      selectedState.length
+    );
+    const onChildChangeInterceptor = React.useCallback(
+      (index, childOnChange, event, isChecked) => {
+        const newValue = multiSelectionEventHandler.multiSelectionEventHandler(
+          event,
+          index,
+          selectionAnchor,
+          allValues,
+          selectedState,
+          isChecked
+        );
+        childOnChange?.(event, isChecked);
+        onChange?.(event, newValue);
+        setValue(() => {
+          if (required && newValue.length === 0) {
+            setValidationState("invalid");
+          } else {
+            setValidationState("valid");
+          }
+          return newValue;
+        });
+      },
+      [
+        allValues,
+        onChange,
+        required,
+        selectedState,
+        setValidationState,
+        setValue
+      ]
+    );
+    const modifiedChildren = React.useMemo(() => {
+      return React.Children.map(children, (child, i) => {
+        const childIsSelected = selectedState[i];
+        return React.cloneElement(child, {
+          checked: childIsSelected,
+          name: child?.props?.name || name,
+          onChange: (event, isChecked) => onChildChangeInterceptor(
+            i,
+            child?.props?.onChange,
+            event,
+            isChecked
+          ),
+          disabled: disabled || child?.props?.disabled,
+          readOnly: readOnly || child?.props?.readOnly
+        });
+      });
+    }, [
+      children,
+      disabled,
+      name,
+      onChildChangeInterceptor,
+      readOnly,
+      selectedState
+    ]);
+    const handleSelectAll = (event, selectAllChecked) => {
+      let newValue;
+      if (selectAllState === "some") {
+        newValue = [];
+      } else if (selectAllChecked) {
+        newValue = [...allValues];
+      } else {
+        newValue = [];
+      }
+      onChange?.(event, newValue);
+      setValue(() => {
+        if (required && newValue.length === 0) {
+          setValidationState("invalid");
+        } else {
+          setValidationState("valid");
+        }
+        return newValue;
+      });
+    };
+    const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
+    const errorMessageId = canShowError ? setId.setId(elementId, "error") : ariaErrorMessage;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      FormElement.HvFormElement,
+      {
+        id,
+        name,
+        status: validationState,
+        disabled,
+        required,
+        readOnly,
+        className: cx(classes.root, className),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            LabelContainer.HvLabelContainer,
+            {
+              label,
+              description,
+              labelId: setId.setId(elementId, "label"),
+              descriptionId: setId.setId(elementId, "description"),
+              classes: {
+                label: classes.label
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              ref,
+              role: "group",
+              "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledBy || label && setId.setId(elementId, "label") || void 0,
+              "aria-disabled": disabled ? true : void 0,
+              "aria-invalid": validationState === "invalid" ? true : void 0,
+              "aria-errormessage": validationState === "invalid" ? errorMessageId : void 0,
+              "aria-describedby": [description && setId.setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0,
+              className: cx(classes.group, {
+                [classes.vertical]: orientation === "vertical",
+                [classes.horizontal]: orientation === "horizontal",
+                [classes.invalid]: validationState === "invalid"
+              }),
+              ...others,
+              children: [
+                showSelectAll && /* @__PURE__ */ jsxRuntime.jsx(
+                  CheckBox.HvCheckBox,
+                  {
+                    checked: selectAllState === "all",
+                    indeterminate: selectAllState === "some",
+                    label: /* @__PURE__ */ jsxRuntime.jsx(
+                      CounterLabel.CounterLabel,
+                      {
+                        selected: selectedCount,
+                        total: React.Children.count(children),
+                        conjunctionLabel: selectAllConjunctionLabel
+                      }
+                    ),
+                    disabled,
+                    readOnly,
+                    className: classes.selectAll,
+                    onChange: handleSelectAll
+                  }
+                ),
+                modifiedChildren
+              ]
+            }
+          ),
+          canShowError && /* @__PURE__ */ jsxRuntime.jsx(
+            WarningText.HvWarningText,
+            {
+              id: setId.setId(elementId, "error"),
+              disableBorder: true,
+              className: classes.error,
+              children: validationMessage
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+exports.checkBoxGroupClasses = CheckBoxGroup_styles.staticClasses;
+exports.HvCheckBoxGroup = HvCheckBoxGroup;

package/dist/cjs/ColorPicker/ColorPicker.cjs

@@ -0,0 +1,234 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const LabelContainer = require("../FormElement/LabelContainer.cjs");
+const useControlled = require("../hooks/useControlled.cjs");
+const useLabels = require("../hooks/useLabels.cjs");
+const useUniqueId = require("../hooks/useUniqueId.cjs");
+const icons = require("../icons.cjs");
+const setId = require("../utils/setId.cjs");
+const ColorPicker_styles = require("./ColorPicker.styles.cjs");
+const PresetColors = require("./PresetColors/PresetColors.cjs");
+const Picker = require("./Picker/Picker.cjs");
+const SavedColors = require("./SavedColors/SavedColors.cjs");
+const FormElement = require("../FormElement/FormElement.cjs");
+const BaseDropdown = require("../BaseDropdown/BaseDropdown.cjs");
+const Panel = require("../Panel/Panel.cjs");
+const Typography = require("../Typography/Typography.cjs");
+const DEFAULT_LABELS = {
+  recommendedColorsLabel: "Recommended colors:",
+  customColorsLabel: "Custom colors:"
+};
+const HvColorPicker = React.forwardRef(
+  function HvColorPicker2(props, ref) {
+    const {
+      id,
+      name,
+      required,
+      disabled,
+      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"
+    } = uikitReactUtils.useDefaultProps("HvColorPicker", props);
+    const { classes, cx } = ColorPicker_styles.useClasses(classesProp);
+    const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProp);
+    const [isOpen, setIsOpen] = useControlled.useControlled(expanded, defaultExpanded);
+    const [color, setColor] = useControlled.useControlled(value, defaultValue);
+    const [savedColors, setSavedColors] = useControlled.useControlled(
+      savedColorsValue,
+      defaultSavedColorsValue
+    );
+    const elementId = useUniqueId.useUniqueId(id);
+    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__ */ jsxRuntime.jsxs(
+      FormElement.HvFormElement,
+      {
+        id,
+        name,
+        disabled,
+        required,
+        className: cx(classes.root, className),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            LabelContainer.HvLabelContainer,
+            {
+              label,
+              description,
+              labelId: setId.setId(elementId, "label"),
+              descriptionId: setId.setId(elementId, "description"),
+              classes: {
+                root: classes.labelContainer,
+                label: classes.label,
+                description: classes.description
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            BaseDropdown.HvBaseDropdown,
+            {
+              ref,
+              variableWidth: true,
+              className,
+              expanded: isOpen,
+              onToggle: handleToggle,
+              onContainerCreation: setFocusToContent,
+              classes: {
+                root: cx({ [classes.dropdownRootIconOnly]: iconOnly })
+              },
+              adornment: iconOnly && color ? /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  style: { backgroundColor: color },
+                  className: cx(
+                    classes.headerColorIcon,
+                    classes.headerColorIconOnly
+                  )
+                }
+              ) : dropdownIcon === "colorPicker" ? /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "ColorPicker", className: classes.colorPickerIcon }) : void 0,
+              placeholder: iconOnly ? void 0 : color ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    style: { backgroundColor: color },
+                    className: classes.headerColorIcon
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Typography.HvTypography,
+                  {
+                    className: classes.headerColorValue,
+                    variant: "label",
+                    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: classes.panel, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.colorPicker, children: [
+                recommendedColorsPosition === "top" && /* @__PURE__ */ jsxRuntime.jsx(
+                  PresetColors.PresetColors,
+                  {
+                    className: classes.recommendedColorsRoot,
+                    colors: recommendedColors,
+                    onClick: handleSelect,
+                    title: showLabels ? labels.recommendedColorsLabel : void 0
+                  }
+                ),
+                showCustomColors && /* @__PURE__ */ jsxRuntime.jsx(
+                  Picker.Picker,
+                  {
+                    classes: {
+                      fields: cx({
+                        [classes.pickerFields]: recommendedColorsPosition === "bottom" || showSavedColors
+                      })
+                    },
+                    title: showLabels ? labels.customColorsLabel : void 0,
+                    color,
+                    onChange: handleOnChange,
+                    onChangeComplete: handleOnChangeComplete
+                  }
+                ),
+                showSavedColors && /* @__PURE__ */ jsxRuntime.jsx(
+                  SavedColors.SavedColors,
+                  {
+                    colors: savedColors,
+                    onAddColor: handleAddColor,
+                    onClickColor: handleSelect,
+                    onRemoveColor: handleRemoveColor,
+                    deleteButtonAriaLabel: deleteSavedColorButtonArialLabel,
+                    addButtonAriaLabel: addSavedColorButtonAriaLabel
+                  }
+                ),
+                recommendedColorsPosition === "bottom" && /* @__PURE__ */ jsxRuntime.jsx(
+                  PresetColors.PresetColors,
+                  {
+                    colors: recommendedColors,
+                    onClick: handleSelect,
+                    title: showLabels ? labels.recommendedColorsLabel : void 0
+                  }
+                )
+              ] }) })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+exports.colorPickerClasses = ColorPicker_styles.staticClasses;
+exports.HvColorPicker = HvColorPicker;

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

@@ -0,0 +1,152 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const color = require("react-color/lib/helpers/color");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const Fields_styles = require("./Fields.styles.cjs");
+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 = (props) => {
+  const {
+    className,
+    onChange,
+    rgb,
+    hex,
+    classes: classesProp
+  } = uikitReactUtils.useDefaultProps("HvColorPickerFields", props);
+  const { classes, cx } = Fields_styles.useClasses(classesProp);
+  const [internalHex, setInternalHex] = React.useState(hex);
+  const [internalRed, setInternalRed] = React.useState(rgb?.r);
+  const [internalGreen, setInternalGreen] = React.useState(rgb?.g);
+  const [internalBlue, setInternalBlue] = React.useState(rgb?.b);
+  const hexInputRef = React.useRef(null);
+  const redInputRef = React.useRef(null);
+  const greenInputRef = React.useRef(null);
+  const blueInputRef = React.useRef(null);
+  React.useEffect(() => {
+    if (document.activeElement !== hexInputRef.current) {
+      setInternalHex(hex);
+    }
+  }, [hex]);
+  React.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__namespace.isValidHex(data.hex)) {
+      onChange(
+        {
+          hex: data.hex,
+          source: "hex"
+        },
+        event
+      );
+    } else if (data.r !== void 0 || data.g !== void 0 || data.b !== void 0) {
+      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__ */ jsxRuntime.jsxs("div", { className: cx(classes.fields, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Input.HvInput,
+      {
+        ref: hexInputRef,
+        className: classes.double,
+        label: "HEX",
+        value: internalHex?.replace("#", ""),
+        onChange: onChangeHex,
+        onBlur: () => setInternalHex(hex),
+        disableClear: true
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Input.HvInput,
+      {
+        ref: redInputRef,
+        className: classes.single,
+        label: "R",
+        value: internalRed,
+        onChange: (event, value) => onChangeRbg(event, value, "r"),
+        onBlur: () => setInternalRed(rgb?.r),
+        inputProps: { type: "number", min: 0, max: 255 },
+        disableClear: true
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Input.HvInput,
+      {
+        ref: greenInputRef,
+        className: classes.single,
+        label: "G",
+        value: internalGreen,
+        onChange: (event, value) => onChangeRbg(event, value, "g"),
+        onBlur: () => setInternalGreen(rgb?.g),
+        inputProps: { type: "number", min: 0, max: 255 },
+        disableClear: true
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Input.HvInput,
+      {
+        ref: blueInputRef,
+        className: classes.single,
+        label: "B",
+        value: internalBlue,
+        onChange: (event, value) => onChangeRbg(event, value, "b"),
+        onBlur: () => setInternalBlue(rgb?.b),
+        inputProps: { type: "number", min: 0, max: 255 },
+        disableClear: true
+      }
+    )
+  ] });
+};
+exports.Fields = Fields;