@hitachivantara/uikit-react-core 5.30.1 → 5.32.0

package/dist/cjs/components/CheckBox/CheckBox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CheckBox.cjs","sources":["../../../../src/components/CheckBox/CheckBox.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { setId } from \"@core/utils/setId\";\nimport {\n  HvBaseCheckBox,\n  HvBaseCheckBoxProps,\n} from \"@core/components/BaseCheckBox\";\nimport {\n  HvLabelProps,\n  HvFormStatus,\n  HvWarningText,\n  isInvalid,\n  HvFormElement,\n  HvLabel,\n} from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./CheckBox.styles\";\n\nexport { staticClasses as checkBoxClasses };\n\nexport type HvCheckBoxClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCheckBoxProps extends Omit<HvBaseCheckBoxProps, \"classes\"> {\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 inputted via inputProps.\n   */\n  label?: React.ReactNode;\n  /**\n   * Properties passed on to the label element.\n   */\n  labelProps?: HvLabelProps;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * A Jss Object used to override or extend the styles applied to the checkbox.\n   */\n  classes?: HvCheckBoxClasses;\n}\n\n/**\n * A Checkbox is a mechanism that allows the user to select one or more options.\n *\n * Usually used in a Checkbox Group to present the user with a range of options from\n * which the user <b>may select any number of options</b> to complete their task.\n *\n * It can also be used individually to represent the toggle of a single option, when\n * the Toggle Switch and Toggle Button aren't more appropriate.\n */\nexport const HvCheckBox = (props: HvCheckBoxProps) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    name,\n    checked,\n    status,\n    indeterminate,\n    statusMessage,\n    label,\n    labelProps,\n    inputProps,\n    value = \"on\",\n    required = false,\n    readOnly = false,\n    disabled = false,\n    semantic = false,\n    defaultChecked = false,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-errormessage\": ariaErrorMessage,\n    onChange,\n    onFocusVisible,\n    onBlur,\n    ...others\n  } = useDefaultProps(\"HvCheckBox\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id, \"hvcheckbox\");\n\n  const [focusVisible, setFocusVisible] = useState<boolean>(false);\n\n  const [validationState, setValidationState] = useControlled(\n    status,\n    \"standBy\"\n  );\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n  const [isChecked, setIsChecked] = useControlled(\n    checked,\n    Boolean(defaultChecked)\n  );\n\n  const [isIndeterminate, setIsIndeterminate] = useControlled(\n    checked !== undefined ? indeterminate : undefined,\n    Boolean(indeterminate)\n  );\n\n  const isStateInvalid = isInvalid(validationState);\n\n  const onChangeCallback = useCallback<\n    NonNullable<HvBaseCheckBoxProps[\"onChange\"]>\n  >(\n    (event, newChecked) => {\n      setIsChecked(() => {\n        // This will only run if uncontrolled\n        setIsIndeterminate(false);\n\n        if (required && !newChecked) {\n          setValidationState(\"invalid\");\n        } else {\n          setValidationState(\"valid\");\n        }\n\n        return newChecked;\n      });\n\n      onChange?.(event, newChecked, value);\n    },\n    [\n      onChange,\n      required,\n      setIsChecked,\n      setIsIndeterminate,\n      setValidationState,\n      value,\n    ]\n  );\n\n  const onFocusVisibleCallback: HvBaseCheckBoxProps[\"onBlur\"] = (event) => {\n    setFocusVisible(true);\n    onFocusVisible?.(event);\n  };\n\n  const onBlurCallback: HvBaseCheckBoxProps[\"onBlur\"] = (event) => {\n    setFocusVisible(false);\n    onBlur?.(event);\n  };\n\n  // The error message area will only be created if:\n  //   - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const hasLabel = label != null;\n\n  let errorMessageId;\n  if (isStateInvalid) {\n    errorMessageId = canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage;\n  }\n\n  const checkbox = (\n    <HvBaseCheckBox\n      id={hasLabel ? setId(elementId, \"input\") : setId(id, \"input\")}\n      name={name}\n      className={cx(classes.checkbox, {\n        [classes.invalidCheckbox]: isStateInvalid,\n      })}\n      disabled={disabled}\n      readOnly={readOnly}\n      required={required}\n      onChange={onChangeCallback}\n      value={value}\n      checked={isChecked}\n      indeterminate={isIndeterminate}\n      semantic={semantic}\n      inputProps={{\n        \"aria-invalid\": isStateInvalid ? true : undefined,\n        \"aria-errormessage\": errorMessageId,\n        \"aria-label\": ariaLabel,\n        \"aria-labelledby\": ariaLabelledBy,\n        \"aria-describedby\": ariaDescribedBy,\n        ...inputProps,\n      }}\n      onFocusVisible={onFocusVisibleCallback}\n      onBlur={onBlurCallback}\n      {...others}\n    />\n  );\n\n  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      status={validationState}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      className={cx(\n        classes.root,\n        { [classes.focusVisible]: !!(focusVisible && label) },\n        className\n      )}\n    >\n      {hasLabel ? (\n        <div\n          className={cx(classes.container, {\n            [classes.disabled]: disabled,\n            [classes.invalidContainer]: isStateInvalid,\n          })}\n        >\n          {checkbox}\n          <HvLabel\n            id={setId(elementId, \"label\")}\n            htmlFor={setId(elementId, \"input\")}\n            label={label}\n            className={classes.label}\n            {...labelProps}\n          />\n        </div>\n      ) : (\n        checkbox\n      )}\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableAdornment={!hasLabel}\n          hideText={!hasLabel}\n          disableBorder\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n};\n"],"names":["HvCheckBox","props","id","classes","classesProp","className","name","checked","status","indeterminate","statusMessage","label","labelProps","inputProps","value","required","readOnly","disabled","semantic","defaultChecked","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaErrorMessage","onChange","onFocusVisible","onBlur","others","useDefaultProps","cx","useClasses","elementId","useUniqueId","focusVisible","setFocusVisible","useState","validationState","setValidationState","useControlled","validationMessage","isChecked","setIsChecked","Boolean","isIndeterminate","setIsIndeterminate","undefined","isStateInvalid","isInvalid","onChangeCallback","useCallback","event","newChecked","onFocusVisibleCallback","onBlurCallback","canShowError","hasLabel","errorMessageId","setId","checkbox","jsx","HvBaseCheckBox","invalidCheckbox","jsxs","HvFormElement","root","container","invalidContainer","HvLabel","HvWarningText"],"mappings":"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"}
+{"version":3,"file":"CheckBox.cjs","sources":["../../../../src/components/CheckBox/CheckBox.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { setId } from \"@core/utils/setId\";\nimport {\n  HvBaseCheckBox,\n  HvBaseCheckBoxProps,\n} from \"@core/components/BaseCheckBox\";\nimport {\n  HvLabelProps,\n  HvFormStatus,\n  HvWarningText,\n  isInvalid,\n  HvFormElement,\n  HvLabel,\n} from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./CheckBox.styles\";\n\nexport { staticClasses as checkBoxClasses };\n\nexport type HvCheckBoxClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCheckBoxProps extends Omit<HvBaseCheckBoxProps, \"classes\"> {\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 inputted via inputProps.\n   */\n  label?: React.ReactNode;\n  /**\n   * Properties passed on to the label element.\n   */\n  labelProps?: HvLabelProps;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * A Jss Object used to override or extend the styles applied to the checkbox.\n   */\n  classes?: HvCheckBoxClasses;\n}\n\n/**\n * A Checkbox is a mechanism that allows the user to select one or more options.\n *\n * Usually used in a Checkbox Group to present the user with a range of options from\n * which the user <b>may select any number of options</b> to complete their task.\n *\n * It can also be used individually to represent the toggle of a single option, when\n * the Toggle Switch and Toggle Button aren't more appropriate.\n */\nexport const HvCheckBox = forwardRef<HTMLButtonElement, HvCheckBoxProps>(\n  (props, ref) => {\n    const {\n      id,\n      classes: classesProp,\n      className,\n      name,\n      checked,\n      status,\n      indeterminate,\n      statusMessage,\n      label,\n      labelProps,\n      inputProps,\n      value = \"on\",\n      required = false,\n      readOnly = false,\n      disabled = false,\n      semantic = false,\n      defaultChecked = false,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-errormessage\": ariaErrorMessage,\n      onChange,\n      onFocusVisible,\n      onBlur,\n      ...others\n    } = useDefaultProps(\"HvCheckBox\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const elementId = useUniqueId(id, \"hvcheckbox\");\n\n    const [focusVisible, setFocusVisible] = useState<boolean>(false);\n\n    const [validationState, setValidationState] = useControlled(\n      status,\n      \"standBy\"\n    );\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const [isChecked, setIsChecked] = useControlled(\n      checked,\n      Boolean(defaultChecked)\n    );\n\n    const [isIndeterminate, setIsIndeterminate] = useControlled(\n      checked !== undefined ? indeterminate : undefined,\n      Boolean(indeterminate)\n    );\n\n    const isStateInvalid = isInvalid(validationState);\n\n    const onChangeCallback = useCallback<\n      NonNullable<HvBaseCheckBoxProps[\"onChange\"]>\n    >(\n      (event, newChecked) => {\n        setIsChecked(() => {\n          // This will only run if uncontrolled\n          setIsIndeterminate(false);\n\n          if (required && !newChecked) {\n            setValidationState(\"invalid\");\n          } else {\n            setValidationState(\"valid\");\n          }\n\n          return newChecked;\n        });\n\n        onChange?.(event, newChecked, value);\n      },\n      [\n        onChange,\n        required,\n        setIsChecked,\n        setIsIndeterminate,\n        setValidationState,\n        value,\n      ]\n    );\n\n    const onFocusVisibleCallback: HvBaseCheckBoxProps[\"onBlur\"] = (event) => {\n      setFocusVisible(true);\n      onFocusVisible?.(event);\n    };\n\n    const onBlurCallback: HvBaseCheckBoxProps[\"onBlur\"] = (event) => {\n      setFocusVisible(false);\n      onBlur?.(event);\n    };\n\n    // The error message area will only be created if:\n    //   - an external element that provides an error message isn't identified via aria-errormessage AND\n    //   - both status and statusMessage properties are being controlled OR\n    //   - status is uncontrolled and required is true\n    const canShowError =\n      ariaErrorMessage == null &&\n      ((status !== undefined && statusMessage !== undefined) ||\n        (status === undefined && required));\n\n    const hasLabel = label != null;\n\n    let errorMessageId;\n    if (isStateInvalid) {\n      errorMessageId = canShowError\n        ? setId(elementId, \"error\")\n        : ariaErrorMessage;\n    }\n\n    const checkbox = (\n      <HvBaseCheckBox\n        ref={ref}\n        id={hasLabel ? setId(elementId, \"input\") : setId(id, \"input\")}\n        name={name}\n        className={cx(classes.checkbox, {\n          [classes.invalidCheckbox]: isStateInvalid,\n        })}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        onChange={onChangeCallback}\n        value={value}\n        checked={isChecked}\n        indeterminate={isIndeterminate}\n        semantic={semantic}\n        inputProps={{\n          \"aria-invalid\": isStateInvalid ? true : undefined,\n          \"aria-errormessage\": errorMessageId,\n          \"aria-label\": ariaLabel,\n          \"aria-labelledby\": ariaLabelledBy,\n          \"aria-describedby\": ariaDescribedBy,\n          ...inputProps,\n        }}\n        onFocusVisible={onFocusVisibleCallback}\n        onBlur={onBlurCallback}\n        {...others}\n      />\n    );\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        status={validationState}\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        className={cx(\n          classes.root,\n          { [classes.focusVisible]: !!(focusVisible && label) },\n          className\n        )}\n      >\n        {hasLabel ? (\n          <div\n            className={cx(classes.container, {\n              [classes.disabled]: disabled,\n              [classes.invalidContainer]: isStateInvalid,\n            })}\n          >\n            {checkbox}\n            <HvLabel\n              id={setId(elementId, \"label\")}\n              htmlFor={setId(elementId, \"input\")}\n              label={label}\n              className={classes.label}\n              {...labelProps}\n            />\n          </div>\n        ) : (\n          checkbox\n        )}\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            disableAdornment={!hasLabel}\n            hideText={!hasLabel}\n            disableBorder\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  }\n);\n"],"names":["HvCheckBox","forwardRef","props","ref","id","classes","classesProp","className","name","checked","status","indeterminate","statusMessage","label","labelProps","inputProps","value","required","readOnly","disabled","semantic","defaultChecked","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaErrorMessage","onChange","onFocusVisible","onBlur","others","useDefaultProps","cx","useClasses","elementId","useUniqueId","focusVisible","setFocusVisible","useState","validationState","setValidationState","useControlled","validationMessage","isChecked","setIsChecked","Boolean","isIndeterminate","setIsIndeterminate","undefined","isStateInvalid","isInvalid","onChangeCallback","useCallback","event","newChecked","onFocusVisibleCallback","onBlurCallback","canShowError","hasLabel","errorMessageId","setId","checkbox","jsx","HvBaseCheckBox","invalidCheckbox","jsxs","HvFormElement","root","container","invalidContainer","HvLabel","HvWarningText"],"mappings":"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"}

package/dist/cjs/components/CheckBoxGroup/CheckBoxGroup.cjs

@@ -31,7 +31,7 @@ const getValueFromSelectedChildren = (children) => {
   }).filter((v) => v !== void 0);
   return selectedValues;
 };
-const HvCheckBoxGroup = (props) => {
+const HvCheckBoxGroup = React.forwardRef((props, ref) => {
   const {
     id,
     classes: classesProp,
@@ -146,7 +146,7 @@ const HvCheckBoxGroup = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(FormElement.HvFormElement, { id, name, status: validationState, disabled, required, readOnly, className: cx(classes.root, className), children: [
     label && /* @__PURE__ */ jsxRuntime.jsx(Label.HvLabel, { id: setId.setId(elementId, "label"), label, className: classes.label }),
     description && /* @__PURE__ */ jsxRuntime.jsx(InfoMessage.HvInfoMessage, { id: setId.setId(elementId, "description"), children: description }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { 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, {
+    /* @__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"
@@ -156,7 +156,7 @@ const HvCheckBoxGroup = (props) => {
     ] }),
     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;
 //# sourceMappingURL=CheckBoxGroup.cjs.map

package/dist/cjs/components/CheckBoxGroup/CheckBoxGroup.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CheckBoxGroup.cjs","sources":["../../../../src/components/CheckBoxGroup/CheckBoxGroup.tsx"],"sourcesContent":["import { Children, cloneElement, useCallback, useMemo, useRef } from \"react\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { setId } from \"@core/utils/setId\";\nimport { multiSelectionEventHandler } from \"@core/utils/multiSelectionEventHandler\";\nimport { HvCheckBox } from \"@core/components/CheckBox\";\nimport {\n  HvFormElement,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./CheckBoxGroup.styles\";\n\nconst computeSelectAllState = (selected: number, total: number) => {\n  if (selected === 0) {\n    return \"none\";\n  }\n\n  if (selected === total) {\n    return \"all\";\n  }\n\n  return \"some\";\n};\n\nconst getValueFromSelectedChildren = (children: React.ReactNode) => {\n  const selectedValues = Children.toArray(children)\n    .map((child: any) => {\n      const childIsControlled = child?.props?.checked !== undefined;\n      const childIsSelected = childIsControlled\n        ? child?.props?.checked\n        : child?.props?.defaultChecked;\n\n      return childIsSelected ? child?.props?.value : undefined;\n    })\n    .filter((v) => v !== undefined);\n\n  return selectedValues;\n};\n\nexport { staticClasses as checkBoxGroupClasses };\n\nexport type HvCheckBoxGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCheckBoxGroupProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * The form element name.\n   *\n   * It is propagated to the children checkboxes, unless they already have one.\n   */\n  name?: string;\n  /**\n   * The value of the form element. An array of values represented in the child checkboxes.\n   *\n   * When defined the checkbox group state becomes controlled.\n   */\n  value?: any[];\n  /**\n   * When uncontrolled, defines the initial value.\n   */\n  defaultValue?: any[];\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  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: React.ReactNode;\n  /**\n   * Indicates that the form element is disabled.\n   * If `true` the state is propagated to the children checkboxes.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is not editable.\n   * If `true` the state is propagated to the children checkboxes.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: any[]) => void;\n  /**\n   * Indicates whether the checkbox group's orientation is horizontal or vertical.\n   *\n   * Defaults to vertical.\n   */\n  orientation?: \"vertical\" | \"horizontal\";\n  /**\n   * Indicates if an additional select all checkbox should be shown.\n   */\n  showSelectAll?: boolean;\n  /**\n   * The label of the select all checkbox. Defaults to \"All\".\n   */\n  selectAllLabel?: string;\n  /**\n   * Custom label for select all checkbox conjunction\n   */\n  selectAllConjunctionLabel?: string;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvCheckBoxGroupClasses;\n}\n\n/**\n * A checkbox group is a type of selection list that allows the user to select multiple options through the use of checkboxes.\n */\nexport const HvCheckBoxGroup = (props: HvCheckBoxGroupProps) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    children,\n    name,\n    label,\n    description,\n    status,\n    statusMessage,\n    defaultValue,\n    value: valueProp,\n    required = false,\n    readOnly = false,\n    disabled = false,\n    showSelectAll = false,\n    orientation = \"vertical\",\n    selectAllLabel = \"All\",\n    selectAllConjunctionLabel = \"/\",\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-errormessage\": ariaErrorMessage,\n    onChange,\n    ...others\n  } = useDefaultProps(\"HvCheckBoxGroup\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [value, setValue] = useControlled(\n    valueProp,\n    defaultValue !== undefined\n      ? defaultValue\n      : // When uncontrolled and no default value is given,\n        // extract the initial selected values from the children own state\n        () => getValueFromSelectedChildren(children)\n  );\n\n  const [validationState, setValidationState] = useControlled(\n    status,\n    \"standBy\"\n  );\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n  const elementId = useUniqueId(id, \"hvcheckboxgroup\");\n\n  const selectionAnchor = useRef(undefined);\n\n  const [allValues, selectedState, selectedCount] = useMemo(() => {\n    const childValues: any[] = [];\n    const childSelectedState: boolean[] = [];\n    let childSelectedCounter = 0;\n\n    Children.toArray(children).forEach((child: any, i: number) => {\n      const childValue = child?.props?.value;\n      const childIsSelected = value.indexOf(childValue) !== -1;\n\n      childValues[i] = childValue;\n      childSelectedState[i] = childIsSelected;\n\n      if (childIsSelected) {\n        childSelectedCounter += 1;\n      }\n    });\n\n    return [childValues, childSelectedState, childSelectedCounter];\n  }, [children, value]);\n\n  const selectAllState = computeSelectAllState(\n    value.length,\n    selectedState.length\n  );\n\n  const onChildChangeInterceptor = useCallback(\n    (\n      index: number,\n      childOnChange: (\n        event: React.ChangeEvent<HTMLInputElement>,\n        isChecked: boolean\n      ) => void,\n      event: React.ChangeEvent<HTMLInputElement>,\n      isChecked: boolean\n    ) => {\n      const newValue = multiSelectionEventHandler(\n        event,\n        index,\n        selectionAnchor,\n        allValues,\n        selectedState,\n        isChecked\n      );\n\n      childOnChange?.(event, isChecked);\n\n      onChange?.(event, newValue);\n\n      setValue(() => {\n        // This will only run if uncontrolled\n\n        if (required && newValue.length === 0) {\n          setValidationState(\"invalid\");\n        } else {\n          setValidationState(\"valid\");\n        }\n\n        return newValue;\n      });\n    },\n    [allValues, onChange, required, selectedState, setValidationState, setValue]\n  );\n\n  const modifiedChildren = useMemo(() => {\n    return Children.map(children, (child: any, i: number) => {\n      const childIsSelected = selectedState[i];\n\n      return cloneElement(child, {\n        checked: childIsSelected,\n        name: child?.props?.name || name,\n        onChange: (\n          event: React.ChangeEvent<HTMLInputElement>,\n          isChecked: boolean\n        ) =>\n          onChildChangeInterceptor(i, child?.props?.onChange, event, isChecked),\n        disabled: disabled || child?.props?.disabled,\n        readOnly: readOnly || child?.props?.readOnly,\n      });\n    });\n  }, [\n    children,\n    disabled,\n    name,\n    onChildChangeInterceptor,\n    readOnly,\n    selectedState,\n  ]);\n\n  const handleSelectAll = (\n    event: React.ChangeEvent<HTMLInputElement>,\n    selectAllChecked: boolean\n  ) => {\n    let newValue: any[];\n    if (selectAllChecked) {\n      newValue = [...allValues];\n    } else {\n      newValue = [];\n    }\n\n    onChange?.(event, newValue);\n\n    setValue(() => {\n      // This will only run if uncontrolled\n      if (required && newValue.length === 0) {\n        setValidationState(\"invalid\");\n      } else {\n        setValidationState(\"valid\");\n      }\n\n      return newValue;\n    });\n  };\n\n  const selectAllLabelComponent =\n    selectedCount === 0 ? (\n      <>\n        <b>{selectAllLabel}</b>\n        {` (${Children.toArray(children).length})`}\n      </>\n    ) : (\n      <>\n        <b>{selectedCount}</b>\n        {` ${selectAllConjunctionLabel} ${Children.toArray(children).length}`}\n      </>\n    );\n\n  // The error message area will only be created if:\n  //   - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const errorMessageId = canShowError\n    ? setId(elementId, \"error\")\n    : ariaErrorMessage;\n\n  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      status={validationState}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      className={cx(classes.root, className)}\n    >\n      {label && (\n        <HvLabel\n          id={setId(elementId, \"label\")}\n          label={label}\n          className={classes.label}\n        />\n      )}\n\n      {description && (\n        <HvInfoMessage id={setId(elementId, \"description\")}>\n          {description}\n        </HvInfoMessage>\n      )}\n\n      <div\n        role=\"group\"\n        aria-label={ariaLabel}\n        aria-labelledby={\n          ariaLabelledBy || (label && setId(elementId, \"label\")) || undefined\n        }\n        aria-disabled={disabled ? true : undefined}\n        aria-invalid={validationState === \"invalid\" ? true : undefined}\n        aria-errormessage={\n          validationState === \"invalid\" ? errorMessageId : undefined\n        }\n        aria-describedby={\n          [description && setId(elementId, \"description\"), ariaDescribedBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        className={cx(classes.group, {\n          [classes.vertical]: orientation === \"vertical\",\n          [classes.horizontal]: orientation === \"horizontal\",\n          [classes.invalid]: validationState === \"invalid\",\n        })}\n        {...others}\n      >\n        {showSelectAll && (\n          <HvCheckBox\n            checked={selectAllState === \"all\"}\n            indeterminate={selectAllState === \"some\"}\n            label={selectAllLabelComponent}\n            disabled={disabled}\n            readOnly={readOnly}\n            className={classes.selectAll}\n            onChange={handleSelectAll}\n          />\n        )}\n        {modifiedChildren}\n      </div>\n\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={classes.error}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n};\n"],"names":["computeSelectAllState","selected","total","getValueFromSelectedChildren","children","selectedValues","Children","toArray","map","child","childIsControlled","props","checked","undefined","childIsSelected","defaultChecked","value","filter","v","HvCheckBoxGroup","id","classes","classesProp","className","name","label","description","status","statusMessage","defaultValue","valueProp","required","readOnly","disabled","showSelectAll","orientation","selectAllLabel","selectAllConjunctionLabel","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaErrorMessage","onChange","others","useDefaultProps","cx","useClasses","setValue","useControlled","validationState","setValidationState","validationMessage","elementId","useUniqueId","selectionAnchor","useRef","allValues","selectedState","selectedCount","useMemo","childValues","childSelectedState","childSelectedCounter","forEach","i","childValue","indexOf","selectAllState","length","onChildChangeInterceptor","useCallback","index","childOnChange","event","isChecked","newValue","multiSelectionEventHandler","modifiedChildren","cloneElement","handleSelectAll","selectAllChecked","selectAllLabelComponent","jsxs","Fragment","jsx","canShowError","errorMessageId","setId","HvFormElement","root","HvLabel","HvInfoMessage","join","trim","group","vertical","horizontal","invalid","HvCheckBox","selectAll","HvWarningText","error"],"mappings":"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"}
+{"version":3,"file":"CheckBoxGroup.cjs","sources":["../../../../src/components/CheckBoxGroup/CheckBoxGroup.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { setId } from \"@core/utils/setId\";\nimport { multiSelectionEventHandler } from \"@core/utils/multiSelectionEventHandler\";\nimport { HvCheckBox } from \"@core/components/CheckBox\";\nimport {\n  HvFormElement,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./CheckBoxGroup.styles\";\n\nconst computeSelectAllState = (selected: number, total: number) => {\n  if (selected === 0) {\n    return \"none\";\n  }\n\n  if (selected === total) {\n    return \"all\";\n  }\n\n  return \"some\";\n};\n\nconst getValueFromSelectedChildren = (children: React.ReactNode) => {\n  const selectedValues = Children.toArray(children)\n    .map((child: any) => {\n      const childIsControlled = child?.props?.checked !== undefined;\n      const childIsSelected = childIsControlled\n        ? child?.props?.checked\n        : child?.props?.defaultChecked;\n\n      return childIsSelected ? child?.props?.value : undefined;\n    })\n    .filter((v) => v !== undefined);\n\n  return selectedValues;\n};\n\nexport { staticClasses as checkBoxGroupClasses };\n\nexport type HvCheckBoxGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCheckBoxGroupProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * The form element name.\n   *\n   * It is propagated to the children checkboxes, unless they already have one.\n   */\n  name?: string;\n  /**\n   * The value of the form element. An array of values represented in the child checkboxes.\n   *\n   * When defined the checkbox group state becomes controlled.\n   */\n  value?: any[];\n  /**\n   * When uncontrolled, defines the initial value.\n   */\n  defaultValue?: any[];\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  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: React.ReactNode;\n  /**\n   * Indicates that the form element is disabled.\n   * If `true` the state is propagated to the children checkboxes.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is not editable.\n   * If `true` the state is propagated to the children checkboxes.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: any[]) => void;\n  /**\n   * Indicates whether the checkbox group's orientation is horizontal or vertical.\n   *\n   * Defaults to vertical.\n   */\n  orientation?: \"vertical\" | \"horizontal\";\n  /**\n   * Indicates if an additional select all checkbox should be shown.\n   */\n  showSelectAll?: boolean;\n  /**\n   * The label of the select all checkbox. Defaults to \"All\".\n   */\n  selectAllLabel?: string;\n  /**\n   * Custom label for select all checkbox conjunction\n   */\n  selectAllConjunctionLabel?: string;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvCheckBoxGroupClasses;\n}\n\n/**\n * A checkbox group is a type of selection list that allows the user to select multiple options through the use of checkboxes.\n */\nexport const HvCheckBoxGroup = forwardRef<HTMLDivElement, HvCheckBoxGroupProps>(\n  (props, ref) => {\n    const {\n      id,\n      classes: classesProp,\n      className,\n      children,\n      name,\n      label,\n      description,\n      status,\n      statusMessage,\n      defaultValue,\n      value: valueProp,\n      required = false,\n      readOnly = false,\n      disabled = false,\n      showSelectAll = false,\n      orientation = \"vertical\",\n      selectAllLabel = \"All\",\n      selectAllConjunctionLabel = \"/\",\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-errormessage\": ariaErrorMessage,\n      onChange,\n      ...others\n    } = useDefaultProps(\"HvCheckBoxGroup\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const [value, setValue] = useControlled(\n      valueProp,\n      defaultValue !== undefined\n        ? defaultValue\n        : // When uncontrolled and no default value is given,\n          // extract the initial selected values from the children own state\n          () => getValueFromSelectedChildren(children)\n    );\n\n    const [validationState, setValidationState] = useControlled(\n      status,\n      \"standBy\"\n    );\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const elementId = useUniqueId(id, \"hvcheckboxgroup\");\n\n    const selectionAnchor = useRef(undefined);\n\n    const [allValues, selectedState, selectedCount] = useMemo(() => {\n      const childValues: any[] = [];\n      const childSelectedState: boolean[] = [];\n      let childSelectedCounter = 0;\n\n      Children.toArray(children).forEach((child: any, i: number) => {\n        const childValue = child?.props?.value;\n        const childIsSelected = value.indexOf(childValue) !== -1;\n\n        childValues[i] = childValue;\n        childSelectedState[i] = childIsSelected;\n\n        if (childIsSelected) {\n          childSelectedCounter += 1;\n        }\n      });\n\n      return [childValues, childSelectedState, childSelectedCounter];\n    }, [children, value]);\n\n    const selectAllState = computeSelectAllState(\n      value.length,\n      selectedState.length\n    );\n\n    const onChildChangeInterceptor = useCallback(\n      (\n        index: number,\n        childOnChange: (\n          event: React.ChangeEvent<HTMLInputElement>,\n          isChecked: boolean\n        ) => void,\n        event: React.ChangeEvent<HTMLInputElement>,\n        isChecked: boolean\n      ) => {\n        const newValue = multiSelectionEventHandler(\n          event,\n          index,\n          selectionAnchor,\n          allValues,\n          selectedState,\n          isChecked\n        );\n\n        childOnChange?.(event, isChecked);\n\n        onChange?.(event, newValue);\n\n        setValue(() => {\n          // This will only run if uncontrolled\n\n          if (required && newValue.length === 0) {\n            setValidationState(\"invalid\");\n          } else {\n            setValidationState(\"valid\");\n          }\n\n          return newValue;\n        });\n      },\n      [\n        allValues,\n        onChange,\n        required,\n        selectedState,\n        setValidationState,\n        setValue,\n      ]\n    );\n\n    const modifiedChildren = useMemo(() => {\n      return Children.map(children, (child: any, i: number) => {\n        const childIsSelected = selectedState[i];\n\n        return cloneElement(child, {\n          checked: childIsSelected,\n          name: child?.props?.name || name,\n          onChange: (\n            event: React.ChangeEvent<HTMLInputElement>,\n            isChecked: boolean\n          ) =>\n            onChildChangeInterceptor(\n              i,\n              child?.props?.onChange,\n              event,\n              isChecked\n            ),\n          disabled: disabled || child?.props?.disabled,\n          readOnly: readOnly || child?.props?.readOnly,\n        });\n      });\n    }, [\n      children,\n      disabled,\n      name,\n      onChildChangeInterceptor,\n      readOnly,\n      selectedState,\n    ]);\n\n    const handleSelectAll = (\n      event: React.ChangeEvent<HTMLInputElement>,\n      selectAllChecked: boolean\n    ) => {\n      let newValue: any[];\n      if (selectAllChecked) {\n        newValue = [...allValues];\n      } else {\n        newValue = [];\n      }\n\n      onChange?.(event, newValue);\n\n      setValue(() => {\n        // This will only run if uncontrolled\n        if (required && newValue.length === 0) {\n          setValidationState(\"invalid\");\n        } else {\n          setValidationState(\"valid\");\n        }\n\n        return newValue;\n      });\n    };\n\n    const selectAllLabelComponent =\n      selectedCount === 0 ? (\n        <>\n          <b>{selectAllLabel}</b>\n          {` (${Children.toArray(children).length})`}\n        </>\n      ) : (\n        <>\n          <b>{selectedCount}</b>\n          {` ${selectAllConjunctionLabel} ${Children.toArray(children).length}`}\n        </>\n      );\n\n    // The error message area will only be created if:\n    //   - an external element that provides an error message isn't identified via aria-errormessage AND\n    //   - both status and statusMessage properties are being controlled OR\n    //   - status is uncontrolled and required is true\n    const canShowError =\n      ariaErrorMessage == null &&\n      ((status !== undefined && statusMessage !== undefined) ||\n        (status === undefined && required));\n\n    const errorMessageId = canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage;\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        status={validationState}\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        className={cx(classes.root, className)}\n      >\n        {label && (\n          <HvLabel\n            id={setId(elementId, \"label\")}\n            label={label}\n            className={classes.label}\n          />\n        )}\n\n        {description && (\n          <HvInfoMessage id={setId(elementId, \"description\")}>\n            {description}\n          </HvInfoMessage>\n        )}\n\n        <div\n          ref={ref}\n          role=\"group\"\n          aria-label={ariaLabel}\n          aria-labelledby={\n            ariaLabelledBy || (label && setId(elementId, \"label\")) || undefined\n          }\n          aria-disabled={disabled ? true : undefined}\n          aria-invalid={validationState === \"invalid\" ? true : undefined}\n          aria-errormessage={\n            validationState === \"invalid\" ? errorMessageId : undefined\n          }\n          aria-describedby={\n            [description && setId(elementId, \"description\"), ariaDescribedBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n          className={cx(classes.group, {\n            [classes.vertical]: orientation === \"vertical\",\n            [classes.horizontal]: orientation === \"horizontal\",\n            [classes.invalid]: validationState === \"invalid\",\n          })}\n          {...others}\n        >\n          {showSelectAll && (\n            <HvCheckBox\n              checked={selectAllState === \"all\"}\n              indeterminate={selectAllState === \"some\"}\n              label={selectAllLabelComponent}\n              disabled={disabled}\n              readOnly={readOnly}\n              className={classes.selectAll}\n              onChange={handleSelectAll}\n            />\n          )}\n          {modifiedChildren}\n        </div>\n\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            disableBorder\n            className={classes.error}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  }\n);\n"],"names":["computeSelectAllState","selected","total","getValueFromSelectedChildren","children","selectedValues","Children","toArray","map","child","childIsControlled","props","checked","undefined","childIsSelected","defaultChecked","value","filter","v","HvCheckBoxGroup","forwardRef","ref","id","classes","classesProp","className","name","label","description","status","statusMessage","defaultValue","valueProp","required","readOnly","disabled","showSelectAll","orientation","selectAllLabel","selectAllConjunctionLabel","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaErrorMessage","onChange","others","useDefaultProps","cx","useClasses","setValue","useControlled","validationState","setValidationState","validationMessage","elementId","useUniqueId","selectionAnchor","useRef","allValues","selectedState","selectedCount","useMemo","childValues","childSelectedState","childSelectedCounter","forEach","i","childValue","indexOf","selectAllState","length","onChildChangeInterceptor","useCallback","index","childOnChange","event","isChecked","newValue","multiSelectionEventHandler","modifiedChildren","cloneElement","handleSelectAll","selectAllChecked","selectAllLabelComponent","jsxs","Fragment","jsx","canShowError","errorMessageId","setId","HvFormElement","root","HvLabel","HvInfoMessage","join","trim","group","vertical","horizontal","invalid","HvCheckBox","selectAll","HvWarningText","error"],"mappings":"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"}

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
+const React = require("react");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const useControlled = require("../../hooks/useControlled.cjs");
@@ -21,7 +22,7 @@ const DEFAULT_LABELS = {
   recommendedColorsLabel: "Recommended colors:",
   customColorsLabel: "Custom colors:"
 };
-const HvColorPicker = (props) => {
+const HvColorPicker = React.forwardRef((props, ref) => {
   const {
     id,
     name,
@@ -108,7 +109,7 @@ const HvColorPicker = (props) => {
       hasLabel && /* @__PURE__ */ jsxRuntime.jsx(Label.HvLabel, { id: setId.setId(elementId, "label"), label, className: classes.label }),
       hasDescription && /* @__PURE__ */ jsxRuntime.jsx(InfoMessage.HvInfoMessage, { id: setId.setId(elementId, "description"), className: classes.description, children: description })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(BaseDropdown.HvBaseDropdown, { variableWidth: true, className, expanded: isOpen, onToggle: handleToggle, onContainerCreation: setFocusToContent, classes: {
+    /* @__PURE__ */ jsxRuntime.jsx(BaseDropdown.HvBaseDropdown, { ref, variableWidth: true, className, expanded: isOpen, onToggle: handleToggle, onContainerCreation: setFocusToContent, classes: {
       root: cx({
         [classes.dropdownRootIconOnly]: iconOnly
       }),
@@ -129,7 +130,7 @@ const HvColorPicker = (props) => {
       recommendedColorsPosition === "bottom" && /* @__PURE__ */ jsxRuntime.jsx(PresetColors.PresetColors, { colors: recommendedColors, onClick: handleSelect, title: showLabels ? labels == null ? void 0 : labels.recommendedColorsLabel : void 0 })
     ] }) }) })
   ] });
-};
+});
 exports.colorPickerClasses = ColorPicker_styles.staticClasses;
 exports.HvColorPicker = HvColorPicker;
 //# sourceMappingURL=ColorPicker.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.cjs","sources":["../../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { Checkbox, ColorPicker } from \"@hitachivantara/uikit-react-icons\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { ColorState } from \"react-color\";\n\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 = (props: HvColorPickerProps) => {\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(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: HvDropdownProps[\"onToggle\"] = (_, open) => {\n    setIsOpen(open);\n  };\n\n  const handleSelect = (val: ColorState | { hex: string; source: string }) => {\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        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={showLabels ? labels?.recommendedColorsLabel : undefined}\n              />\n            )}\n            {showCustomColors && (\n              <Picker\n                classes={{\n                  fields: cx({\n                    [classes.pickerFields]:\n                      recommendedColorsPosition === \"bottom\" || 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={showLabels ? labels?.recommendedColorsLabel : undefined}\n              />\n            )}\n          </div>\n        </HvPanel>\n      </HvBaseDropdown>\n    </HvFormElement>\n  );\n};\n"],"names":["DEFAULT_LABELS","recommendedColorsLabel","customColorsLabel","HvColorPicker","props","id","name","required","disabled","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","className","classes","classesProp","value","onChange","onChangeComplete","defaultValue","expanded","defaultExpanded","recommendedColorsPosition","recommendedColors","showLabels","labels","labelsProp","dropdownIcon","placeholder","iconOnly","showSavedColors","showCustomColors","savedColorsValue","defaultSavedColorsValue","onSavedColorAdded","onSavedColorRemoved","deleteSavedColorButtonArialLabel","addSavedColorButtonAriaLabel","useDefaultProps","css","cx","useClasses","useLabels","isOpen","setIsOpen","useControlled","Boolean","color","setColor","savedColors","setSavedColors","elementId","useUniqueId","hasLabel","hasDescription","handleToggle","_","open","handleSelect","val","hex","handleOnChange","handleOnChangeComplete","handleAddColor","colorToAdd","handleRemoveColor","position","sColors","splice","setFocusToContent","containerRef","inputs","getElementsByTagName","length","focus","jsxs","HvFormElement","root","labelContainer","jsx","HvLabel","setId","HvInfoMessage","HvBaseDropdown","dropdownRootIconOnly","selection","padding","Checkbox","headerColorIconOnly","ColorPicker","colorPickerIcon","undefined","Fragment","headerColorIcon","HvTypography","headerColorValue","join","trim","HvPanel","panel","colorPicker","PresetColors","recommendedColorsRoot","Picker","fields","pickerFields","SavedColors"],"mappings":"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"}
+{"version":3,"file":"ColorPicker.cjs","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":["DEFAULT_LABELS","recommendedColorsLabel","customColorsLabel","HvColorPicker","forwardRef","props","ref","id","name","required","disabled","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","className","classes","classesProp","value","onChange","onChangeComplete","defaultValue","expanded","defaultExpanded","recommendedColorsPosition","recommendedColors","showLabels","labels","labelsProp","dropdownIcon","placeholder","iconOnly","showSavedColors","showCustomColors","savedColorsValue","defaultSavedColorsValue","onSavedColorAdded","onSavedColorRemoved","deleteSavedColorButtonArialLabel","addSavedColorButtonAriaLabel","useDefaultProps","css","cx","useClasses","useLabels","isOpen","setIsOpen","useControlled","Boolean","color","setColor","savedColors","setSavedColors","elementId","useUniqueId","hasLabel","hasDescription","handleToggle","_","open","handleSelect","val","hex","handleOnChange","handleOnChangeComplete","handleAddColor","colorToAdd","handleRemoveColor","position","sColors","splice","setFocusToContent","containerRef","inputs","getElementsByTagName","length","focus","jsxs","HvFormElement","root","labelContainer","jsx","HvLabel","setId","HvInfoMessage","HvBaseDropdown","dropdownRootIconOnly","selection","padding","Checkbox","headerColorIconOnly","ColorPicker","colorPickerIcon","undefined","Fragment","headerColorIcon","HvTypography","headerColorValue","join","trim","HvPanel","panel","colorPicker","PresetColors","recommendedColorsRoot","Picker","fields","pickerFields","SavedColors"],"mappings":"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"}

package/dist/cjs/components/DatePicker/DatePicker.cjs

@@ -2,8 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
-const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
+const material = require("@mui/material");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const useControlled = require("../../hooks/useControlled.cjs");
 const useUniqueId = require("../../hooks/useUniqueId.cjs");
 const useLabels = require("../../hooks/useLabels.cjs");
@@ -29,7 +30,7 @@ const DEFAULT_LABELS = {
   clearLabel: "Clear",
   invalidLabel: "Invalid date"
 };
-const HvDatePicker = (props) => {
+const HvDatePicker = React.forwardRef((props, ref) => {
   const {
     classes: classesProp,
     className,
@@ -65,7 +66,7 @@ const HvDatePicker = (props) => {
     showClear = false,
     disablePortal = true,
     escapeWithReference = true,
-    dropdownProps,
+    dropdownProps = {},
     calendarProps,
     ...others
   } = useDefaultProps.useDefaultProps("HvDatePicker", props);
@@ -83,6 +84,11 @@ const HvDatePicker = (props) => {
   const [endDate, setEndDate, rollbackEndDate] = useSavedState.useSavedState(endValue);
   const [visibleDate, dispatchAction] = useVisibleDate.default(startDate, endDate);
   const focusTarget = React.useRef(null);
+  const {
+    ref: refProp,
+    ...otherDropdownProps
+  } = dropdownProps;
+  const dropdownForkedRef = material.useForkRef(ref, refProp);
   React.useEffect(() => {
     setStartDate(rangeMode ? startValue : value, true);
     setEndDate(endValue, true);
@@ -227,7 +233,7 @@ const HvDatePicker = (props) => {
       hasLabel && /* @__PURE__ */ jsxRuntime.jsx(Label.HvLabel, { id: setId.setId(elementId, "label"), label, className: classes.label }),
       hasDescription && /* @__PURE__ */ jsxRuntime.jsx(InfoMessage.HvInfoMessage, { id: setId.setId(elementId, "description"), className: classes.description, children: description })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(BaseDropdown.HvBaseDropdown, { role: "combobox", classes: {
+    /* @__PURE__ */ jsxRuntime.jsxs(BaseDropdown.HvBaseDropdown, { ref: dropdownForkedRef, role: "combobox", classes: {
       root: classes.dropdown,
       panel: classes.panel,
       header: cx({
@@ -239,7 +245,7 @@ const HvDatePicker = (props) => {
         name: "preventOverflow",
         enabled: escapeWithReference
       }]
-    }, "aria-haspopup": "dialog", "aria-label": ariaLabel, "aria-labelledby": [label && setId.setId(elementId, "label"), ariaLabelledBy].join(" ").trim() || void 0, "aria-invalid": isStateInvalid ? true : void 0, "aria-errormessage": errorMessageId, "aria-describedby": [description && setId.setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0, ...dropdownProps, children: [
+    }, "aria-haspopup": "dialog", "aria-label": ariaLabel, "aria-labelledby": [label && setId.setId(elementId, "label"), ariaLabelledBy].join(" ").trim() || void 0, "aria-invalid": isStateInvalid ? true : void 0, "aria-errormessage": errorMessageId, "aria-describedby": [description && setId.setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0, ...otherDropdownProps, children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { ref: focusTarget, tabIndex: -1 }),
       /* @__PURE__ */ jsxRuntime.jsx(Calendar.HvCalendar, { id: setId.setId(id, "calendar"), startAdornment, onChange: handleDateChange, onInputChange: handleInputDateChange, onVisibleDateChange: (_event, type, month, target) => {
         dispatchAction({
@@ -252,7 +258,7 @@ const HvDatePicker = (props) => {
     ] }),
     canShowError && /* @__PURE__ */ jsxRuntime.jsx(WarningText.HvWarningText, { id: setId.setId(elementId, "error"), disableBorder: true, className: cx(classes.error), children: validationMessage })
   ] });
-};
+});
 exports.datePickerClasses = DatePicker_styles.staticClasses;
 exports.HvDatePicker = HvDatePicker;
 //# sourceMappingURL=DatePicker.cjs.map

package/dist/cjs/components/DatePicker/DatePicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.cjs","sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { Calendar } from \"@hitachivantara/uikit-react-icons\";\n\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 { useSavedState } from \"@core/utils/useSavedState\";\nimport {\n  isInvalid,\n  HvLabel,\n  HvFormStatus,\n  HvWarningText,\n  HvFormElement,\n  HvInfoMessage,\n  HvFormElementProps,\n} from \"@core/components/Forms\";\nimport { isDate } from \"@core/components/Calendar/utils\";\nimport { HvCalendar, HvCalendarProps } from \"@core/components/Calendar\";\nimport {\n  HvBaseDropdown,\n  HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvActionBar } from \"@core/components/ActionBar\";\nimport { HvButton } from \"@core/components/Button\";\n\nimport { getDateLabel } from \"./utils\";\nimport useVisibleDate from \"./useVisibleDate\";\nimport { staticClasses, useClasses } from \"./DatePicker.styles\";\n\nexport { staticClasses as datePickerClasses };\n\nexport type HvDatePickerClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n  applyLabel: \"Apply\",\n  cancelLabel: \"Cancel\",\n  clearLabel: \"Clear\",\n  invalidLabel: \"Invalid date\",\n};\n\n/** @deprecated use `HvFormStatus` instead */\nexport type HvDatePickerStatus = HvFormStatus;\n\nexport interface HvDatePickerProps\n  extends Omit<HvFormElementProps, \"onChange\">,\n    Pick<\n      HvBaseDropdownProps,\n      \"disablePortal\" | \"expanded\" | \"defaultExpanded\" | \"onToggle\"\n    > {\n  /**\n   * Identifies the element that provides an error message for the date picker.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (date?: Date, endDate?: Date) => void;\n  /**\n   * The callback fired when user clicks on cancel.\n   */\n  onCancel?: () => void;\n  /**\n   * The callback fired when user clicks on clear.\n   */\n  onClear?: () => void;\n  /**\n   * An object containing all the labels for the datepicker.\n   */\n  labels?: {\n    /**\n     * Apply button label.\n     */\n    applyLabel?: string;\n    /**\n     * Cancel button label.\n     */\n    cancelLabel?: string;\n    /**\n     * Clear button label.\n     */\n    clearLabel?: string;\n    /**\n     * Invalid Date label.\n     */\n    invalidDateLabel?: string;\n  };\n  /**\n   * The initial value of the input when in single calendar mode.\n   */\n  value?: Date;\n  /**\n   * The initial value for the start date when in range mode.\n   */\n  startValue?: Date;\n  /**\n   * The initial value for the end date when in range mode.\n   */\n  endValue?: Date;\n  /**\n   * Flag informing if the the component should be in range mode or in single mode.\n   */\n  // TODO: remove this in favour of discriminated union\n  rangeMode?: boolean;\n  /**\n   * The placement where the calendar should be placed according to the input. Options are `left` or `right`.\n   * Note this prop only affects the calendar when in `rangeMode`.\n   */\n  horizontalPlacement?: \"left\" | \"right\";\n  /**\n   * The calendar locale. If undefined, it uses calendar default\n   */\n  locale?: string;\n  /**\n   * Controls if actions buttons are visible at the calendar.\n   */\n  showActions?: boolean;\n  /**\n   * Controls if clear button is visible at the calendar,\n   * only works if showing actions or in range mode.\n   */\n  showClear?: boolean;\n  /**\n   * Sets if the calendar container should follow the date picker input out of the screen or stay visible.\n   */\n  escapeWithReference?: boolean;\n  /**\n   * An element placed before the Calendar\n   */\n  startAdornment?: React.ReactNode;\n  /**\n   * An object containing props to be passed onto the baseDropdown.\n   */\n  dropdownProps?: Partial<HvBaseDropdownProps>;\n  /**\n   * Additional props passed to the HvCalendar component.\n   */\n  calendarProps?: Partial<HvCalendarProps>;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvDatePickerClasses;\n}\n\n/**\n * A date picker, popup calendar or date range picker is a graphical user\n * interface widget which allows the user to select a date from a calendar.\n */\nexport const HvDatePicker = (props: HvDatePickerProps) => {\n  const {\n    classes: classesProp,\n    className,\n\n    id,\n    name,\n\n    required = false,\n    disabled = false,\n    readOnly,\n\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n\n    onChange,\n    onCancel,\n    onClear,\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n\n    placeholder,\n\n    labels: labelsProp,\n\n    value,\n    startValue,\n    endValue,\n\n    expanded,\n    defaultExpanded,\n    onToggle,\n    rangeMode = false,\n    startAdornment,\n    horizontalPlacement = \"right\",\n    locale: localeProp,\n    showActions = false,\n    showClear = false,\n    disablePortal = true,\n    escapeWithReference = true,\n    dropdownProps,\n    calendarProps,\n    ...others\n  } = useDefaultProps(\"HvDatePicker\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const elementId = useUniqueId(id, \"hvdatepicker\");\n\n  const [validationState, setValidationState] = useControlled(\n    status,\n    \"standBy\"\n  );\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n  const locale = localeProp || \"en-US\";\n\n  const [calendarOpen, setCalendarOpen] = useControlled(\n    expanded,\n    Boolean(defaultExpanded)\n  );\n\n  const [startDate, setStartDate, rollbackStartDate] = useSavedState(\n    rangeMode ? startValue : value\n  );\n  const [endDate, setEndDate, rollbackEndDate] = useSavedState(endValue);\n\n  const [visibleDate, dispatchAction] = useVisibleDate(startDate, endDate);\n\n  const focusTarget = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    setStartDate(rangeMode ? startValue : value, true);\n    setEndDate(endValue, true);\n  }, [value, startValue, endValue, rangeMode, setStartDate, setEndDate]);\n\n  const endDateIsSet = useRef(false);\n  endDateIsSet.current = endDate != null;\n\n  useEffect(() => {\n    if (startDate != null) {\n      dispatchAction({\n        type: \"month_year\",\n        target: endDateIsSet.current ? \"left\" : \"best\",\n        year: startDate.getFullYear(),\n        month: startDate.getMonth() + 1,\n      });\n    }\n  }, [dispatchAction, startDate]);\n\n  useEffect(() => {\n    if (endDate != null) {\n      dispatchAction({\n        type: \"month_year\",\n        target: \"right\",\n        year: endDate.getFullYear(),\n        month: endDate.getMonth() + 1,\n      });\n    }\n  }, [dispatchAction, endDate]);\n\n  /**\n   * Handles the `Apply` action. Both single and ranged modes are handled here.\n   */\n  const handleApply = () => {\n    setStartDate(startDate, true);\n    setEndDate(endDate ?? startDate, true);\n\n    onChange?.(startDate, endDate);\n\n    setValidationState(() => {\n      // this will only run if status is uncontrolled\n      if (required && (!isDate(startDate) || (rangeMode && !isDate(endDate)))) {\n        return \"invalid\";\n      }\n\n      return \"valid\";\n    });\n\n    setCalendarOpen(false);\n  };\n\n  /**\n   * Handles the `Cancel` action. Both single and ranged modes are handled here.\n   */\n  const handleCancel = () => {\n    rollbackStartDate();\n    rollbackEndDate();\n\n    onCancel?.();\n\n    setCalendarOpen(false);\n  };\n\n  /**\n   * Handles the `Cancel` action. Both single and ranged modes are handled here.\n   */\n  const handleClear = () => {\n    setStartDate(undefined, false);\n    setEndDate(undefined, false);\n    onClear?.();\n  };\n\n  const handleCalendarClose = () => {\n    const shouldSave = !(rangeMode || showActions);\n    if (shouldSave) {\n      handleApply();\n    } else {\n      handleCancel();\n    }\n  };\n\n  const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (evt, open) => {\n    /* \n     If evt is null this toggle wasn't triggered by the user.\n     instead it was triggered by the baseDropdown useEffect after\n     the datepicker changed the expanded value this baseDropdown behavior needs a review\n    */\n    if (evt === null) return;\n    onToggle?.(evt, open);\n    setCalendarOpen(open);\n    if (!open) handleCalendarClose();\n  };\n\n  const focusOnContainer = () => {\n    focusTarget.current?.focus();\n  };\n\n  const handleDateChange: HvCalendarProps[\"onChange\"] = (event, newDate) => {\n    if (!isDate(newDate)) return;\n\n    const autoSave = !showActions && !rangeMode;\n\n    if (rangeMode) {\n      if (!startDate || (startDate && endDate) || newDate < startDate) {\n        setStartDate(newDate);\n        setEndDate(undefined);\n      } else {\n        setEndDate(newDate);\n      }\n    } else {\n      setStartDate(newDate, autoSave);\n    }\n\n    if (autoSave) {\n      onChange?.(newDate);\n\n      setValidationState(() => {\n        // this will only run if status is uncontrolled\n        if (required && !isDate(newDate)) {\n          return \"invalid\";\n        }\n\n        return \"valid\";\n      });\n\n      setCalendarOpen(false);\n    }\n  };\n\n  const handleInputDateChange: HvCalendarProps[\"onInputChange\"] = (\n    event,\n    newDate,\n    position\n  ) => {\n    if (!isDate(newDate)) return;\n\n    if (!rangeMode) {\n      handleDateChange(event as any, newDate);\n      return;\n    }\n\n    if (position === \"left\") {\n      if (endDate) setStartDate(newDate > endDate ? endDate : newDate);\n    } else if (position === \"right\") {\n      if (!startDate) {\n        if (endDate) setStartDate(newDate > endDate ? endDate : newDate);\n        return;\n      }\n      setEndDate(newDate < startDate ? startDate : newDate);\n    }\n  };\n\n  /**\n   * Renders the container for the action elements.\n   */\n  const renderActions = () => (\n    <HvActionBar className={cx({ [classes.actionContainer]: showClear })}>\n      {showClear && (\n        <div className={classes.leftContainer}>\n          <HvButton\n            id={setId(id, \"action\", \"clear\")}\n            className={classes.action}\n            variant=\"primaryGhost\"\n            onClick={handleClear}\n          >\n            {labels?.clearLabel}\n          </HvButton>\n        </div>\n      )}\n      <div className={classes.rightContainer}>\n        <HvButton\n          id={setId(id, \"action\", \"apply\")}\n          className={classes.action}\n          variant=\"primaryGhost\"\n          onClick={handleApply}\n        >\n          {labels?.applyLabel}\n        </HvButton>\n        <HvButton\n          id={setId(id, \"action\", \"cancel\")}\n          className={classes.action}\n          variant=\"primaryGhost\"\n          onClick={handleCancel}\n        >\n          {labels?.cancelLabel}\n        </HvButton>\n      </div>\n    </HvActionBar>\n  );\n\n  const renderInput = (dateString: string) => {\n    return (\n      <HvTypography\n        className={cx(classes.inputText, { [classes.dateText]: dateString })}\n        variant=\"label\"\n      >\n        {dateString || placeholder || \"\"}\n      </HvTypography>\n    );\n  };\n  const dateValue = rangeMode ? { startDate, endDate } : startDate;\n\n  const hasLabel = label != null;\n  const hasDescription = description != null;\n\n  // the error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const isStateInvalid = isInvalid(validationState);\n\n  let errorMessageId;\n  if (isStateInvalid) {\n    errorMessageId = canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage;\n  }\n\n  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      value={dateValue}\n      status={validationState}\n      disabled={disabled}\n      required={required}\n      className={cx(classes.root, className)}\n      readOnly={readOnly}\n      {...others}\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        role=\"combobox\"\n        classes={{\n          root: classes.dropdown,\n          panel: classes.panel,\n          header: cx({ [classes.dropdownHeaderInvalid]: isStateInvalid }),\n          headerOpen: classes.dropdownHeaderOpen,\n        }}\n        readOnly={readOnly}\n        disabled={disabled}\n        disablePortal={disablePortal}\n        variableWidth\n        placement={horizontalPlacement}\n        expanded={calendarOpen}\n        onToggle={handleToggle}\n        onClickOutside={handleCalendarClose}\n        onContainerCreation={focusOnContainer}\n        placeholder={renderInput(getDateLabel(dateValue, rangeMode, locale))}\n        adornment={\n          <Calendar\n            className={classes.icon}\n            color={disabled ? \"secondary_80\" : undefined}\n          />\n        }\n        popperProps={{\n          modifiers: [\n            { name: \"preventOverflow\", enabled: escapeWithReference },\n          ],\n        }}\n        aria-haspopup=\"dialog\"\n        aria-label={ariaLabel}\n        aria-labelledby={\n          [label && setId(elementId, \"label\"), ariaLabelledBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        aria-invalid={isStateInvalid ? true : undefined}\n        aria-errormessage={errorMessageId}\n        aria-describedby={\n          [description && setId(elementId, \"description\"), ariaDescribedBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        {...dropdownProps}\n      >\n        <div ref={focusTarget} tabIndex={-1} />\n        <HvCalendar\n          id={setId(id, \"calendar\")}\n          startAdornment={startAdornment}\n          onChange={handleDateChange}\n          onInputChange={handleInputDateChange}\n          onVisibleDateChange={(_event, type, month, target) => {\n            dispatchAction({ type, target, month });\n          }}\n          locale={locale}\n          {...visibleDate}\n          {...calendarProps}\n          invalidDateLabel={labels?.invalidDateLabel}\n        />\n        {(rangeMode || showActions) && renderActions()}\n      </HvBaseDropdown>\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={cx(classes.error)}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n};\n"],"names":["DEFAULT_LABELS","applyLabel","cancelLabel","clearLabel","invalidLabel","HvDatePicker","props","classes","classesProp","className","id","name","required","disabled","readOnly","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","onCancel","onClear","status","statusMessage","ariaErrorMessage","placeholder","labels","labelsProp","value","startValue","endValue","expanded","defaultExpanded","onToggle","rangeMode","startAdornment","horizontalPlacement","locale","localeProp","showActions","showClear","disablePortal","escapeWithReference","dropdownProps","calendarProps","others","useDefaultProps","cx","useClasses","useLabels","elementId","useUniqueId","validationState","setValidationState","useControlled","validationMessage","calendarOpen","setCalendarOpen","Boolean","startDate","setStartDate","rollbackStartDate","useSavedState","endDate","setEndDate","rollbackEndDate","visibleDate","dispatchAction","useVisibleDate","focusTarget","useRef","useEffect","endDateIsSet","current","type","target","year","getFullYear","month","getMonth","handleApply","isDate","handleCancel","handleClear","undefined","handleCalendarClose","shouldSave","handleToggle","evt","open","focusOnContainer","focus","handleDateChange","event","newDate","autoSave","handleInputDateChange","position","renderActions","jsxs","HvActionBar","actionContainer","jsx","leftContainer","HvButton","setId","action","rightContainer","renderInput","dateString","HvTypography","inputText","dateText","dateValue","hasLabel","hasDescription","canShowError","isStateInvalid","isInvalid","errorMessageId","HvFormElement","root","labelContainer","HvLabel","HvInfoMessage","HvBaseDropdown","dropdown","panel","header","dropdownHeaderInvalid","headerOpen","dropdownHeaderOpen","getDateLabel","Calendar","icon","modifiers","enabled","join","trim","HvCalendar","_event","invalidDateLabel","HvWarningText","error"],"mappings":"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"}
+{"version":3,"file":"DatePicker.cjs","sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef } from \"react\";\n\nimport { useForkRef } from \"@mui/material\";\n\nimport { Calendar } 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 { useSavedState } from \"@core/utils/useSavedState\";\nimport {\n  isInvalid,\n  HvLabel,\n  HvFormStatus,\n  HvWarningText,\n  HvFormElement,\n  HvInfoMessage,\n  HvFormElementProps,\n} from \"@core/components/Forms\";\nimport { isDate } from \"@core/components/Calendar/utils\";\nimport { HvCalendar, HvCalendarProps } from \"@core/components/Calendar\";\nimport {\n  HvBaseDropdown,\n  HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvActionBar } from \"@core/components/ActionBar\";\nimport { HvButton } from \"@core/components/Button\";\n\nimport { getDateLabel } from \"./utils\";\nimport useVisibleDate from \"./useVisibleDate\";\nimport { staticClasses, useClasses } from \"./DatePicker.styles\";\n\nexport { staticClasses as datePickerClasses };\n\nexport type HvDatePickerClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n  applyLabel: \"Apply\",\n  cancelLabel: \"Cancel\",\n  clearLabel: \"Clear\",\n  invalidLabel: \"Invalid date\",\n};\n\n/** @deprecated use `HvFormStatus` instead */\nexport type HvDatePickerStatus = HvFormStatus;\n\nexport interface HvDatePickerProps\n  extends Omit<HvFormElementProps, \"onChange\">,\n    Pick<\n      HvBaseDropdownProps,\n      \"disablePortal\" | \"expanded\" | \"defaultExpanded\" | \"onToggle\"\n    > {\n  /**\n   * Identifies the element that provides an error message for the date picker.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (date?: Date, endDate?: Date) => void;\n  /**\n   * The callback fired when user clicks on cancel.\n   */\n  onCancel?: () => void;\n  /**\n   * The callback fired when user clicks on clear.\n   */\n  onClear?: () => void;\n  /**\n   * An object containing all the labels for the datepicker.\n   */\n  labels?: {\n    /**\n     * Apply button label.\n     */\n    applyLabel?: string;\n    /**\n     * Cancel button label.\n     */\n    cancelLabel?: string;\n    /**\n     * Clear button label.\n     */\n    clearLabel?: string;\n    /**\n     * Invalid Date label.\n     */\n    invalidDateLabel?: string;\n  };\n  /**\n   * The initial value of the input when in single calendar mode.\n   */\n  value?: Date;\n  /**\n   * The initial value for the start date when in range mode.\n   */\n  startValue?: Date;\n  /**\n   * The initial value for the end date when in range mode.\n   */\n  endValue?: Date;\n  /**\n   * Flag informing if the the component should be in range mode or in single mode.\n   */\n  // TODO: remove this in favour of discriminated union\n  rangeMode?: boolean;\n  /**\n   * The placement where the calendar should be placed according to the input. Options are `left` or `right`.\n   * Note this prop only affects the calendar when in `rangeMode`.\n   */\n  horizontalPlacement?: \"left\" | \"right\";\n  /**\n   * The calendar locale. If undefined, it uses calendar default\n   */\n  locale?: string;\n  /**\n   * Controls if actions buttons are visible at the calendar.\n   */\n  showActions?: boolean;\n  /**\n   * Controls if clear button is visible at the calendar,\n   * only works if showing actions or in range mode.\n   */\n  showClear?: boolean;\n  /**\n   * Sets if the calendar container should follow the date picker input out of the screen or stay visible.\n   */\n  escapeWithReference?: boolean;\n  /**\n   * An element placed before the Calendar\n   */\n  startAdornment?: React.ReactNode;\n  /**\n   * An object containing props to be passed onto the baseDropdown.\n   */\n  dropdownProps?: Partial<HvBaseDropdownProps>;\n  /**\n   * Additional props passed to the HvCalendar component.\n   */\n  calendarProps?: Partial<HvCalendarProps>;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvDatePickerClasses;\n}\n\n/**\n * A date picker, popup calendar or date range picker is a graphical user\n * interface widget which allows the user to select a date from a calendar.\n */\nexport const HvDatePicker = forwardRef<HTMLDivElement, HvDatePickerProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n\n      id,\n      name,\n\n      required = false,\n      disabled = false,\n      readOnly,\n\n      label,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n\n      onChange,\n      onCancel,\n      onClear,\n      status,\n      statusMessage,\n      \"aria-errormessage\": ariaErrorMessage,\n\n      placeholder,\n\n      labels: labelsProp,\n\n      value,\n      startValue,\n      endValue,\n\n      expanded,\n      defaultExpanded,\n      onToggle,\n      rangeMode = false,\n      startAdornment,\n      horizontalPlacement = \"right\",\n      locale: localeProp,\n      showActions = false,\n      showClear = false,\n      disablePortal = true,\n      escapeWithReference = true,\n      dropdownProps = {},\n      calendarProps,\n      ...others\n    } = useDefaultProps(\"HvDatePicker\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n    const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n    const elementId = useUniqueId(id, \"hvdatepicker\");\n\n    const [validationState, setValidationState] = useControlled(\n      status,\n      \"standBy\"\n    );\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const locale = localeProp || \"en-US\";\n\n    const [calendarOpen, setCalendarOpen] = useControlled(\n      expanded,\n      Boolean(defaultExpanded)\n    );\n\n    const [startDate, setStartDate, rollbackStartDate] = useSavedState(\n      rangeMode ? startValue : value\n    );\n    const [endDate, setEndDate, rollbackEndDate] = useSavedState(endValue);\n\n    const [visibleDate, dispatchAction] = useVisibleDate(startDate, endDate);\n\n    const focusTarget = useRef<HTMLDivElement>(null);\n\n    const { ref: refProp, ...otherDropdownProps } = dropdownProps;\n    const dropdownForkedRef = useForkRef(ref, refProp);\n\n    useEffect(() => {\n      setStartDate(rangeMode ? startValue : value, true);\n      setEndDate(endValue, true);\n    }, [value, startValue, endValue, rangeMode, setStartDate, setEndDate]);\n\n    const endDateIsSet = useRef(false);\n    endDateIsSet.current = endDate != null;\n\n    useEffect(() => {\n      if (startDate != null) {\n        dispatchAction({\n          type: \"month_year\",\n          target: endDateIsSet.current ? \"left\" : \"best\",\n          year: startDate.getFullYear(),\n          month: startDate.getMonth() + 1,\n        });\n      }\n    }, [dispatchAction, startDate]);\n\n    useEffect(() => {\n      if (endDate != null) {\n        dispatchAction({\n          type: \"month_year\",\n          target: \"right\",\n          year: endDate.getFullYear(),\n          month: endDate.getMonth() + 1,\n        });\n      }\n    }, [dispatchAction, endDate]);\n\n    /**\n     * Handles the `Apply` action. Both single and ranged modes are handled here.\n     */\n    const handleApply = () => {\n      setStartDate(startDate, true);\n      setEndDate(endDate ?? startDate, true);\n\n      onChange?.(startDate, endDate);\n\n      setValidationState(() => {\n        // this will only run if status is uncontrolled\n        if (\n          required &&\n          (!isDate(startDate) || (rangeMode && !isDate(endDate)))\n        ) {\n          return \"invalid\";\n        }\n\n        return \"valid\";\n      });\n\n      setCalendarOpen(false);\n    };\n\n    /**\n     * Handles the `Cancel` action. Both single and ranged modes are handled here.\n     */\n    const handleCancel = () => {\n      rollbackStartDate();\n      rollbackEndDate();\n\n      onCancel?.();\n\n      setCalendarOpen(false);\n    };\n\n    /**\n     * Handles the `Cancel` action. Both single and ranged modes are handled here.\n     */\n    const handleClear = () => {\n      setStartDate(undefined, false);\n      setEndDate(undefined, false);\n      onClear?.();\n    };\n\n    const handleCalendarClose = () => {\n      const shouldSave = !(rangeMode || showActions);\n      if (shouldSave) {\n        handleApply();\n      } else {\n        handleCancel();\n      }\n    };\n\n    const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (evt, open) => {\n      /* \n     If evt is null this toggle wasn't triggered by the user.\n     instead it was triggered by the baseDropdown useEffect after\n     the datepicker changed the expanded value this baseDropdown behavior needs a review\n    */\n      if (evt === null) return;\n      onToggle?.(evt, open);\n      setCalendarOpen(open);\n      if (!open) handleCalendarClose();\n    };\n\n    const focusOnContainer = () => {\n      focusTarget.current?.focus();\n    };\n\n    const handleDateChange: HvCalendarProps[\"onChange\"] = (event, newDate) => {\n      if (!isDate(newDate)) return;\n\n      const autoSave = !showActions && !rangeMode;\n\n      if (rangeMode) {\n        if (!startDate || (startDate && endDate) || newDate < startDate) {\n          setStartDate(newDate);\n          setEndDate(undefined);\n        } else {\n          setEndDate(newDate);\n        }\n      } else {\n        setStartDate(newDate, autoSave);\n      }\n\n      if (autoSave) {\n        onChange?.(newDate);\n\n        setValidationState(() => {\n          // this will only run if status is uncontrolled\n          if (required && !isDate(newDate)) {\n            return \"invalid\";\n          }\n\n          return \"valid\";\n        });\n\n        setCalendarOpen(false);\n      }\n    };\n\n    const handleInputDateChange: HvCalendarProps[\"onInputChange\"] = (\n      event,\n      newDate,\n      position\n    ) => {\n      if (!isDate(newDate)) return;\n\n      if (!rangeMode) {\n        handleDateChange(event as any, newDate);\n        return;\n      }\n\n      if (position === \"left\") {\n        if (endDate) setStartDate(newDate > endDate ? endDate : newDate);\n      } else if (position === \"right\") {\n        if (!startDate) {\n          if (endDate) setStartDate(newDate > endDate ? endDate : newDate);\n          return;\n        }\n        setEndDate(newDate < startDate ? startDate : newDate);\n      }\n    };\n\n    /**\n     * Renders the container for the action elements.\n     */\n    const renderActions = () => (\n      <HvActionBar className={cx({ [classes.actionContainer]: showClear })}>\n        {showClear && (\n          <div className={classes.leftContainer}>\n            <HvButton\n              id={setId(id, \"action\", \"clear\")}\n              className={classes.action}\n              variant=\"primaryGhost\"\n              onClick={handleClear}\n            >\n              {labels?.clearLabel}\n            </HvButton>\n          </div>\n        )}\n        <div className={classes.rightContainer}>\n          <HvButton\n            id={setId(id, \"action\", \"apply\")}\n            className={classes.action}\n            variant=\"primaryGhost\"\n            onClick={handleApply}\n          >\n            {labels?.applyLabel}\n          </HvButton>\n          <HvButton\n            id={setId(id, \"action\", \"cancel\")}\n            className={classes.action}\n            variant=\"primaryGhost\"\n            onClick={handleCancel}\n          >\n            {labels?.cancelLabel}\n          </HvButton>\n        </div>\n      </HvActionBar>\n    );\n\n    const renderInput = (dateString: string) => {\n      return (\n        <HvTypography\n          className={cx(classes.inputText, { [classes.dateText]: dateString })}\n          variant=\"label\"\n        >\n          {dateString || placeholder || \"\"}\n        </HvTypography>\n      );\n    };\n    const dateValue = rangeMode ? { startDate, endDate } : startDate;\n\n    const hasLabel = label != null;\n    const hasDescription = description != null;\n\n    // the error message area will only be created if:\n    // - an external element that provides an error message isn't identified via aria-errormessage AND\n    //   - both status and statusMessage properties are being controlled OR\n    //   - status is uncontrolled and required is true\n    const canShowError =\n      ariaErrorMessage == null &&\n      ((status !== undefined && statusMessage !== undefined) ||\n        (status === undefined && required));\n\n    const isStateInvalid = isInvalid(validationState);\n\n    let errorMessageId;\n    if (isStateInvalid) {\n      errorMessageId = canShowError\n        ? setId(elementId, \"error\")\n        : ariaErrorMessage;\n    }\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        value={dateValue}\n        status={validationState}\n        disabled={disabled}\n        required={required}\n        className={cx(classes.root, className)}\n        readOnly={readOnly}\n        {...others}\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={dropdownForkedRef}\n          role=\"combobox\"\n          classes={{\n            root: classes.dropdown,\n            panel: classes.panel,\n            header: cx({ [classes.dropdownHeaderInvalid]: isStateInvalid }),\n            headerOpen: classes.dropdownHeaderOpen,\n          }}\n          readOnly={readOnly}\n          disabled={disabled}\n          disablePortal={disablePortal}\n          variableWidth\n          placement={horizontalPlacement}\n          expanded={calendarOpen}\n          onToggle={handleToggle}\n          onClickOutside={handleCalendarClose}\n          onContainerCreation={focusOnContainer}\n          placeholder={renderInput(getDateLabel(dateValue, rangeMode, locale))}\n          adornment={\n            <Calendar\n              className={classes.icon}\n              color={disabled ? \"secondary_80\" : undefined}\n            />\n          }\n          popperProps={{\n            modifiers: [\n              { name: \"preventOverflow\", enabled: escapeWithReference },\n            ],\n          }}\n          aria-haspopup=\"dialog\"\n          aria-label={ariaLabel}\n          aria-labelledby={\n            [label && setId(elementId, \"label\"), ariaLabelledBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n          aria-invalid={isStateInvalid ? true : undefined}\n          aria-errormessage={errorMessageId}\n          aria-describedby={\n            [description && setId(elementId, \"description\"), ariaDescribedBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n          {...otherDropdownProps}\n        >\n          <div ref={focusTarget} tabIndex={-1} />\n          <HvCalendar\n            id={setId(id, \"calendar\")}\n            startAdornment={startAdornment}\n            onChange={handleDateChange}\n            onInputChange={handleInputDateChange}\n            onVisibleDateChange={(_event, type, month, target) => {\n              dispatchAction({ type, target, month });\n            }}\n            locale={locale}\n            {...visibleDate}\n            {...calendarProps}\n            invalidDateLabel={labels?.invalidDateLabel}\n          />\n          {(rangeMode || showActions) && renderActions()}\n        </HvBaseDropdown>\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            disableBorder\n            className={cx(classes.error)}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  }\n);\n"],"names":["DEFAULT_LABELS","applyLabel","cancelLabel","clearLabel","invalidLabel","HvDatePicker","forwardRef","props","ref","classes","classesProp","className","id","name","required","disabled","readOnly","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","onCancel","onClear","status","statusMessage","ariaErrorMessage","placeholder","labels","labelsProp","value","startValue","endValue","expanded","defaultExpanded","onToggle","rangeMode","startAdornment","horizontalPlacement","locale","localeProp","showActions","showClear","disablePortal","escapeWithReference","dropdownProps","calendarProps","others","useDefaultProps","cx","useClasses","useLabels","elementId","useUniqueId","validationState","setValidationState","useControlled","validationMessage","calendarOpen","setCalendarOpen","Boolean","startDate","setStartDate","rollbackStartDate","useSavedState","endDate","setEndDate","rollbackEndDate","visibleDate","dispatchAction","useVisibleDate","focusTarget","useRef","refProp","otherDropdownProps","dropdownForkedRef","useForkRef","useEffect","endDateIsSet","current","type","target","year","getFullYear","month","getMonth","handleApply","isDate","handleCancel","handleClear","undefined","handleCalendarClose","shouldSave","handleToggle","evt","open","focusOnContainer","focus","handleDateChange","event","newDate","autoSave","handleInputDateChange","position","renderActions","jsxs","HvActionBar","actionContainer","jsx","leftContainer","HvButton","setId","action","rightContainer","renderInput","dateString","HvTypography","inputText","dateText","dateValue","hasLabel","hasDescription","canShowError","isStateInvalid","isInvalid","errorMessageId","HvFormElement","root","labelContainer","HvLabel","HvInfoMessage","HvBaseDropdown","dropdown","panel","header","dropdownHeaderInvalid","headerOpen","dropdownHeaderOpen","getDateLabel","Calendar","icon","modifiers","enabled","join","trim","HvCalendar","_event","invalidDateLabel","HvWarningText","error"],"mappings":"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"}

package/dist/cjs/components/Dropdown/Dropdown.cjs

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
+const material = require("@mui/material");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const setId = require("../../utils/setId.cjs");
 const utils = require("./utils.cjs");
@@ -25,7 +26,7 @@ const DEFAULT_LABELS = {
   searchPlaceholder: "Search",
   multiSelectionConjunction: "/"
 };
-const HvDropdown = (props) => {
+const HvDropdown = React.forwardRef((props, ref) => {
   const {
     classes: classesProp,
     className,
@@ -90,6 +91,13 @@ const HvDropdown = (props) => {
     console.error("Dropdown/List in virtualized mode requires a height. Please define it.");
   }
   const dropdownHeaderRef = React.useRef();
+  const {
+    ref: refProp,
+    dropdownHeaderRef: dropdownHeaderRefProp,
+    ...otherBaseDropdownProps
+  } = baseDropdownProps;
+  const headerForkedRef = material.useForkRef(dropdownHeaderRefProp, dropdownHeaderRef);
+  const dropdownForkedRef = material.useForkRef(ref, refProp);
   const handleToggle = (event, open) => {
     onToggle == null ? void 0 : onToggle(event, open);
     setIsOpen(open);
@@ -181,7 +189,7 @@ const HvDropdown = (props) => {
       hasLabel && /* @__PURE__ */ jsxRuntime.jsx(Label.HvLabel, { id: setId.setId(elementId, "label"), label, className: classes.label }),
       hasDescription && /* @__PURE__ */ jsxRuntime.jsx(InfoMessage.HvInfoMessage, { id: setId.setId(elementId, "description"), className: classes.description, children: description })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(BaseDropdown.HvBaseDropdown, { id: setId.setId(id, "dropdown"), classes: {
+    /* @__PURE__ */ jsxRuntime.jsx(BaseDropdown.HvBaseDropdown, { ref: dropdownForkedRef, id: setId.setId(id, "dropdown"), classes: {
       root: cx(classes.dropdown, {
         [classes.readOnly]: readOnly
       }),
@@ -190,13 +198,13 @@ const HvDropdown = (props) => {
         [classes.dropdownHeaderInvalid]: isStateInvalid
       }),
       headerOpen: classes.dropdownHeaderOpen
-    }, expanded: isOpen, disabled, readOnly, required, disablePortal, placement, popperProps, placeholder: buildHeaderLabel(), onToggle: handleToggle, onClickOutside: handleClickOutside, onContainerCreation: setFocusToContent, role: "combobox", variableWidth, "aria-label": ariaLabel, "aria-labelledby": [label && setId.setId(elementId, "label"), ariaLabelledBy].join(" ").trim() || void 0, "aria-invalid": isStateInvalid ? true : void 0, "aria-errormessage": errorMessageId, "aria-describedby": [description && setId.setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0, onFocus, onBlur, dropdownHeaderRef, ...baseDropdownProps, children: /* @__PURE__ */ jsxRuntime.jsx(List.HvDropdownList, { id: setId.setId(elementId, "values"), classes: {
+    }, expanded: isOpen, disabled, readOnly, required, disablePortal, placement, popperProps, placeholder: buildHeaderLabel(), onToggle: handleToggle, onClickOutside: handleClickOutside, onContainerCreation: setFocusToContent, role: "combobox", variableWidth, "aria-label": ariaLabel, "aria-labelledby": [label && setId.setId(elementId, "label"), ariaLabelledBy].join(" ").trim() || void 0, "aria-invalid": isStateInvalid ? true : void 0, "aria-errormessage": errorMessageId, "aria-describedby": [description && setId.setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0, onFocus, onBlur, dropdownHeaderRef: headerForkedRef, ...otherBaseDropdownProps, children: /* @__PURE__ */ jsxRuntime.jsx(List.HvDropdownList, { id: setId.setId(elementId, "values"), classes: {
       rootList: classes.rootList,
       dropdownListContainer: classes.dropdownListContainer
     }, values: internalValues, multiSelect, showSearch, onChange: handleSelection, onCancel: handleCancel, labels, notifyChangesOnFirstRender, hasTooltips, singleSelectionToggle, "aria-label": ariaLabel, "aria-labelledby": hasLabel ? setId.setId(elementId, "label") : void 0, height, maxHeight, virtualized, ...listProps }) }),
     canShowError && /* @__PURE__ */ jsxRuntime.jsx(WarningText.HvWarningText, { id: setId.setId(elementId, "error"), disableBorder: true, className: classes.error, children: validationMessage })
   ] });
-};
+});
 exports.dropdownClasses = Dropdown_styles.staticClasses;
 exports.HvDropdown = HvDropdown;
 //# sourceMappingURL=Dropdown.cjs.map