@hitachivantara/uikit-react-core 5.39.0 → 5.39.2

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

@@ -26,183 +26,299 @@ const DEFAULT_LABELS = {
   searchPlaceholder: "Search",
   multiSelectionConjunction: "/"
 };
-const HvDropdown = React.forwardRef((props, ref) => {
-  const {
-    classes: classesProp,
-    className,
-    id,
-    name,
-    required = false,
-    disabled = false,
-    readOnly = false,
-    label,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    description,
-    "aria-describedby": ariaDescribedBy,
-    placeholder = "Select...",
-    onChange,
-    status,
-    statusMessage,
-    "aria-errormessage": ariaErrorMessage,
-    onCancel,
-    onToggle,
-    onClickOutside,
-    onFocus,
-    onBlur,
-    values,
-    multiSelect = false,
-    showSearch = false,
-    expanded,
-    defaultExpanded = false,
-    notifyChangesOnFirstRender = false,
-    labels: labelsProp,
-    hasTooltips = false,
-    disablePortal = false,
-    singleSelectionToggle = true,
-    placement,
-    variableWidth = false,
-    popperProps = {},
-    height,
-    maxHeight,
-    virtualized = false,
-    baseDropdownProps = {},
-    listProps = {},
-    ...others
-  } = useDefaultProps.useDefaultProps("HvDropdown", props);
-  const {
-    classes,
-    cx
-  } = Dropdown_styles.useClasses(classesProp);
-  const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProp);
-  const elementId = useUniqueId.useUniqueId(id, "hvdropdown");
-  const [validationState, setValidationState] = useControlled.useControlled(status, "standBy");
-  const [validationMessage] = useControlled.useControlled(statusMessage, "Required");
-  const [isOpen, setIsOpen] = useControlled.useControlled(expanded, Boolean(defaultExpanded));
-  const [selectionLabel, setSelectionLabel] = React.useState(utils.getSelectionLabel(labels, placeholder, multiSelect, values));
-  const [internalValues, setInternalValues] = React.useState(values);
-  const internalValuesRef = React.useRef(values);
-  React.useEffect(() => {
-    setInternalValues(values);
-    internalValuesRef.current = values;
-  }, [values]);
-  React.useEffect(() => {
-    setSelectionLabel(utils.getSelectionLabel(labels, placeholder, multiSelect, values));
-  }, [labels, multiSelect, placeholder, values]);
-  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?.(event, open);
-    setIsOpen(open);
-    if (!open) {
-      setValidationState(() => {
-        if (required) {
-          const hasSelection = utils.getSelected(internalValuesRef.current).length > 0;
-          if (!hasSelection) {
+const HvDropdown = React.forwardRef(
+  (props, ref) => {
+    const {
+      classes: classesProp,
+      className,
+      id,
+      name,
+      required = false,
+      disabled = false,
+      readOnly = false,
+      label,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      description,
+      "aria-describedby": ariaDescribedBy,
+      placeholder = "Select...",
+      onChange,
+      status,
+      statusMessage,
+      "aria-errormessage": ariaErrorMessage,
+      onCancel,
+      onToggle,
+      onClickOutside,
+      onFocus,
+      onBlur,
+      values,
+      multiSelect = false,
+      showSearch = false,
+      expanded,
+      defaultExpanded = false,
+      notifyChangesOnFirstRender = false,
+      labels: labelsProp,
+      hasTooltips = false,
+      disablePortal = false,
+      singleSelectionToggle = true,
+      placement,
+      variableWidth = false,
+      popperProps = {},
+      height,
+      maxHeight,
+      virtualized = false,
+      baseDropdownProps = {},
+      listProps = {},
+      ...others
+    } = useDefaultProps.useDefaultProps("HvDropdown", props);
+    const { classes, cx } = Dropdown_styles.useClasses(classesProp);
+    const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProp);
+    const elementId = useUniqueId.useUniqueId(id, "hvdropdown");
+    const [validationState, setValidationState] = useControlled.useControlled(
+      status,
+      "standBy"
+    );
+    const [validationMessage] = useControlled.useControlled(statusMessage, "Required");
+    const [isOpen, setIsOpen] = useControlled.useControlled(
+      expanded,
+      Boolean(defaultExpanded)
+    );
+    const [selectionLabel, setSelectionLabel] = React.useState(
+      utils.getSelectionLabel(labels, placeholder, multiSelect, values)
+    );
+    const [internalValues, setInternalValues] = React.useState(values);
+    const internalValuesRef = React.useRef(values);
+    React.useEffect(() => {
+      setInternalValues(values);
+      internalValuesRef.current = values;
+    }, [values]);
+    React.useEffect(() => {
+      setSelectionLabel(
+        utils.getSelectionLabel(labels, placeholder, multiSelect, values)
+      );
+    }, [labels, multiSelect, placeholder, values]);
+    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?.(event, open);
+      setIsOpen(open);
+      if (!open) {
+        setValidationState(() => {
+          if (required) {
+            const hasSelection = utils.getSelected(internalValuesRef.current).length > 0;
+            if (!hasSelection) {
+              return "invalid";
+            }
+          }
+          return "valid";
+        });
+      }
+    };
+    const handleSelection = (listValues, commitChanges, toggle, notifyChanges = true) => {
+      const selected = utils.getSelected(listValues);
+      if (commitChanges) {
+        setInternalValues(listValues);
+        internalValuesRef.current = listValues;
+        setSelectionLabel(
+          utils.getSelectionLabel(labels, placeholder, multiSelect, listValues)
+        );
+        setValidationState(() => {
+          if (required && selected.length === 0) {
             return "invalid";
           }
+          return "valid";
+        });
+      }
+      if (notifyChanges)
+        onChange?.(multiSelect ? selected : selected[0]);
+      if (toggle) {
+        handleToggle(void 0, false);
+        dropdownHeaderRef.current?.focus({ preventScroll: true });
+      }
+    };
+    const handleCancel = (evt) => {
+      onCancel?.(evt);
+      handleToggle(evt, false);
+      dropdownHeaderRef.current?.focus({ preventScroll: true });
+    };
+    const handleClickOutside = (evt) => {
+      onClickOutside?.(evt);
+      onCancel?.(evt);
+    };
+    const setFocusToContent = (containerRef) => {
+      const inputs = containerRef?.getElementsByTagName("input");
+      if (inputs && inputs.length > 0) {
+        inputs[0].focus();
+        return;
+      }
+      const listItems = containerRef != null ? [...containerRef.getElementsByTagName("li")] : [];
+      listItems.every((listItem) => {
+        if (listItem.tabIndex >= 0) {
+          listItem.focus();
+          return false;
         }
-        return "valid";
+        return true;
       });
-    }
-  };
-  const handleSelection = (listValues, commitChanges, toggle, notifyChanges = true) => {
-    const selected = utils.getSelected(listValues);
-    if (commitChanges) {
-      setInternalValues(listValues);
-      internalValuesRef.current = listValues;
-      setSelectionLabel(utils.getSelectionLabel(labels, placeholder, multiSelect, listValues));
-      setValidationState(() => {
-        if (required && selected.length === 0) {
-          return "invalid";
+    };
+    const buildHeaderLabel = () => {
+      const hasSelection = utils.getSelected(internalValues).length > 0;
+      return labels?.select || !multiSelect ? /* @__PURE__ */ jsxRuntime.jsx(
+        Typography.HvTypography,
+        {
+          component: "div",
+          variant: "body",
+          className: cx(classes.placeholder, {
+            [classes.selectionDisabled]: disabled,
+            [classes.placeholderClosed]: !(isOpen || hasSelection)
+          }),
+          children: selectionLabel.selected
         }
-        return "valid";
-      });
-    }
-    if (notifyChanges)
-      onChange?.(multiSelect ? selected : selected[0]);
-    if (toggle) {
-      handleToggle(void 0, false);
-      dropdownHeaderRef.current?.focus({
-        preventScroll: true
-      });
-    }
-  };
-  const handleCancel = (evt) => {
-    onCancel?.(evt);
-    handleToggle(evt, false);
-    dropdownHeaderRef.current?.focus({
-      preventScroll: true
-    });
-  };
-  const handleClickOutside = (evt) => {
-    onClickOutside?.(evt);
-    onCancel?.(evt);
-  };
-  const setFocusToContent = (containerRef) => {
-    const inputs = containerRef?.getElementsByTagName("input");
-    if (inputs && inputs.length > 0) {
-      inputs[0].focus();
-      return;
+      ) : /* @__PURE__ */ jsxRuntime.jsxs(
+        Typography.HvTypography,
+        {
+          component: "div",
+          className: cx(classes.placeholder, {
+            [classes.selectionDisabled]: disabled
+          }),
+          variant: "body",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("b", { children: selectionLabel.selected }),
+            ` ${labels?.multiSelectionConjunction} ${selectionLabel.total}`
+          ]
+        }
+      );
+    };
+    const hasLabel = label != null;
+    const hasDescription = description != null;
+    const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
+    const isStateInvalid = validationStates.isInvalid(validationState);
+    let errorMessageId;
+    if (isStateInvalid) {
+      errorMessageId = canShowError ? setId.setId(elementId, "error") : ariaErrorMessage;
     }
-    const listItems = containerRef != null ? [...containerRef.getElementsByTagName("li")] : [];
-    listItems.every((listItem) => {
-      if (listItem.tabIndex >= 0) {
-        listItem.focus();
-        return false;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      FormElement.HvFormElement,
+      {
+        id,
+        name,
+        status: validationState,
+        disabled,
+        readOnly,
+        required,
+        className: cx(
+          classes.root,
+          {
+            [classes.disabled]: disabled
+          },
+          className
+        ),
+        ...others,
+        children: [
+          (hasLabel || hasDescription) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.labelContainer, children: [
+            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,
+            {
+              ref: dropdownForkedRef,
+              id: setId.setId(id, "dropdown"),
+              classes: {
+                root: cx(classes.dropdown, {
+                  [classes.readOnly]: readOnly
+                }),
+                arrow: classes.arrow,
+                header: cx(classes.dropdownHeader, {
+                  [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: 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
+            }
+          )
+        ]
       }
-      return true;
-    });
-  };
-  const buildHeaderLabel = () => {
-    const hasSelection = utils.getSelected(internalValues).length > 0;
-    return labels?.select || !multiSelect ? /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { component: "div", variant: "body", className: cx(classes.placeholder, {
-      [classes.selectionDisabled]: disabled,
-      [classes.placeholderClosed]: !(isOpen || hasSelection)
-    }), children: selectionLabel.selected }) : /* @__PURE__ */ jsxRuntime.jsxs(Typography.HvTypography, { component: "div", className: cx(classes.placeholder, {
-      [classes.selectionDisabled]: disabled
-    }), variant: "body", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("b", { children: selectionLabel.selected }),
-      ` ${labels?.multiSelectionConjunction} ${selectionLabel.total}`
-    ] });
-  };
-  const hasLabel = label != null;
-  const hasDescription = description != null;
-  const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
-  const isStateInvalid = validationStates.isInvalid(validationState);
-  let errorMessageId;
-  if (isStateInvalid) {
-    errorMessageId = canShowError ? setId.setId(elementId, "error") : ariaErrorMessage;
+    );
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(FormElement.HvFormElement, { id, name, status: validationState, disabled, readOnly, required, className: cx(classes.root, {
-    [classes.disabled]: disabled
-  }, className), ...others, children: [
-    (hasLabel || hasDescription) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.labelContainer, children: [
-      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, { ref: dropdownForkedRef, id: setId.setId(id, "dropdown"), classes: {
-      root: cx(classes.dropdown, {
-        [classes.readOnly]: readOnly
-      }),
-      arrow: classes.arrow,
-      header: cx(classes.dropdownHeader, {
-        [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: 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

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.cjs","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from \"react\";\n\nimport { PopperProps, useForkRef } from \"@mui/material\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { setId } from \"@core/utils/setId\";\nimport { useLabels, useUniqueId, useControlled } from \"@core/hooks\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport {\n  HvBaseDropdown,\n  HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport { HvListValue } from \"@core/components/List\";\nimport {\n  isInvalid,\n  HvInfoMessage,\n  HvWarningText,\n  HvFormElement,\n  HvLabel,\n} from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { getSelected, getSelectionLabel } from \"./utils\";\nimport { HvDropdownList, HvDropdownListProps } from \"./List\";\nimport { staticClasses, useClasses } from \"./Dropdown.styles\";\nimport { HvDropdownLabelsProps, HvDropdownStatus } from \"./types\";\n\nexport { staticClasses as dropdownClasses };\n\nexport type HvDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropdownProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvDropdownClasses;\n  /**\n   * The form element name.\n   */\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?: any;\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: any;\n  /**\n   * The placeholder value when nothing is selected.\n   */\n  placeholder?: string;\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is in read only mode.\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?: HvDropdownStatus;\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?: any;\n  /**\n   * Identifies the element that provides an error message for the dropdown.\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?: (selected: HvListValue | HvListValue[] | undefined) => void;\n  /**\n   * The list to be rendered by the dropdown.\n   */\n  values?: HvListValue[];\n  /**\n   * If `true` the dropdown is multiSelect, if `false` the dropdown is single select.\n   */\n  multiSelect?: boolean;\n  /**\n   * If `true` the dropdown is rendered with a search bar, if `false` there won't be a search bar.\n   */\n  showSearch?: boolean;\n  /**\n   * If `true` the dropdown starts opened if `false` it starts closed.\n   */\n  expanded?: boolean;\n  /**\n   * When uncontrolled, defines the initial expanded state.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * If 'true' the dropdown will notify on the first render.\n   */\n  notifyChangesOnFirstRender?: boolean;\n  /**\n   * An object containing all the labels for the dropdown.\n   */\n  labels?: HvDropdownLabelsProps;\n  /**\n   * If `true` the dropdown will show tooltips when user mouseenter text in list\n   */\n  hasTooltips?: boolean;\n  /**\n   * Disable the portal behavior.\n   * The children stay within it's parent DOM hierarchy.\n   */\n  disablePortal?: boolean;\n  /**\n   * If `true` the dropdown width depends size of content if `false` the width depends on the header size.\n   * Defaults to `false`.\n   */\n  variableWidth?: boolean;\n  /**\n   * If `true`, selection can be toggled when single selection.\n   */\n  singleSelectionToggle?: boolean;\n  /**\n   * Placement of the dropdown.\n   */\n  placement?: \"left\" | \"right\";\n  /**\n   * An object containing props to be wired to the popper component.\n   */\n  popperProps?: Partial<PopperProps>;\n  /**\n   * Callback called when the user cancels the changes.\n   *\n   * Called when the cancel button is used and when the user clicks outside the open container.\n   *\n   * @param {object} event The event source of the callback.\n   */\n  onCancel?: (event: Event) => void;\n  /**\n   * Callback called when dropdown changes the expanded state.\n   *\n   * @param {object} event The event source of the callback.\n   * @param {boolean} open If the dropdown new state is open (`true`) or closed (`false`).\n   */\n  onToggle?: (event: Event, open: boolean) => void;\n  /**\n   * Callback called when the user clicks outside the open container.\n   *\n   * @param {object} event The event source of the callback.\n   */\n  onClickOutside?: (event: Event) => void;\n  /**\n   * @ignore\n   */\n  onFocus?: React.FocusEventHandler<any>;\n  /**\n   * @ignore\n   */\n  onBlur?: React.FocusEventHandler<any>;\n  /**\n   * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n   */\n  height?: number;\n  /**\n   * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n   */\n  maxHeight?: number;\n  /**\n   * Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options.\n   */\n  virtualized?: boolean;\n  /**\n   * Extra props passed to the dropdown.\n   */\n  baseDropdownProps?: Partial<HvBaseDropdownProps>;\n  /**\n   * Extra props passed to the list.\n   */\n  listProps?: HvDropdownListProps;\n}\n\nconst DEFAULT_LABELS: HvDropdownLabelsProps = {\n  select: undefined,\n  selectAll: \"All\",\n  cancelLabel: \"Cancel\",\n  applyLabel: \"Apply\",\n  searchPlaceholder: \"Search\",\n  multiSelectionConjunction: \"/\",\n};\n\n/**\n * A dropdown list is a graphical control element, similar to a list box, that allows the user to choose one value from a list.\n */\nexport const HvDropdown = forwardRef<HTMLDivElement, HvDropdownProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n\n      id,\n      name,\n\n      required = false,\n      disabled = false,\n      readOnly = false,\n\n      label,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n\n      placeholder = \"Select...\",\n\n      onChange,\n\n      status,\n      statusMessage,\n      \"aria-errormessage\": ariaErrorMessage,\n\n      onCancel,\n      onToggle,\n      onClickOutside,\n\n      onFocus,\n      onBlur,\n\n      values,\n      multiSelect = false,\n      showSearch = false,\n      expanded,\n      defaultExpanded = false,\n      notifyChangesOnFirstRender = false,\n      labels: labelsProp,\n      hasTooltips = false,\n      disablePortal = false,\n      singleSelectionToggle = true,\n      placement,\n      variableWidth = false,\n      popperProps = {},\n      height,\n      maxHeight,\n      virtualized = false,\n      baseDropdownProps = {},\n      listProps = {},\n      ...others\n    } = useDefaultProps(\"HvDropdown\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n    const elementId = useUniqueId(id, \"hvdropdown\");\n\n    const [validationState, setValidationState] = useControlled(\n      status,\n      \"standBy\"\n    );\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const [isOpen, setIsOpen] = useControlled(\n      expanded,\n      Boolean(defaultExpanded)\n    );\n    const [selectionLabel, setSelectionLabel] = useState(\n      getSelectionLabel(labels, placeholder, multiSelect, values)\n    );\n\n    const [internalValues, setInternalValues] = useState(values);\n\n    // Hack - Keeping track of internal values for validation purposes since useState is async\n    const internalValuesRef = useRef(values);\n\n    useEffect(() => {\n      setInternalValues(values);\n      internalValuesRef.current = values;\n    }, [values]);\n\n    useEffect(() => {\n      setSelectionLabel(\n        getSelectionLabel(labels, placeholder, multiSelect, values)\n      );\n    }, [labels, multiSelect, placeholder, values]);\n\n    if (import.meta.env.DEV && virtualized && !height) {\n      // eslint-disable-next-line no-console\n      console.error(\n        \"Dropdown/List in virtualized mode requires a height. Please define it.\"\n      );\n    }\n\n    const dropdownHeaderRef = useRef<HTMLDivElement>();\n\n    const {\n      ref: refProp,\n      dropdownHeaderRef: dropdownHeaderRefProp,\n      ...otherBaseDropdownProps\n    } = baseDropdownProps;\n    const headerForkedRef = useForkRef(\n      dropdownHeaderRefProp,\n      dropdownHeaderRef\n    );\n\n    const dropdownForkedRef = useForkRef(ref, refProp);\n\n    const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (event, open) => {\n      onToggle?.(event, open);\n\n      setIsOpen(open);\n\n      if (!open) {\n        // also run built-in validation when closing without changes\n        // as the user \"touched\" the input\n        setValidationState(() => {\n          // this will only run if status is uncontrolled\n          if (required) {\n            const hasSelection =\n              getSelected(internalValuesRef.current).length > 0;\n\n            if (!hasSelection) {\n              return \"invalid\";\n            }\n          }\n\n          return \"valid\";\n        });\n      }\n    };\n\n    /** Applies the selected values to the state */\n    const handleSelection: HvDropdownListProps[\"onChange\"] = (\n      listValues,\n      commitChanges,\n      toggle,\n      notifyChanges = true\n    ) => {\n      const selected = getSelected(listValues);\n\n      if (commitChanges) {\n        setInternalValues(listValues);\n        internalValuesRef.current = listValues;\n\n        setSelectionLabel(\n          getSelectionLabel(labels, placeholder, multiSelect, listValues)\n        );\n\n        setValidationState(() => {\n          // this will only run if status is uncontrolled\n          if (required && selected.length === 0) {\n            return \"invalid\";\n          }\n\n          return \"valid\";\n        });\n      }\n      if (notifyChanges) onChange?.(multiSelect ? selected : selected[0]);\n      if (toggle) {\n        handleToggle(undefined as any, false);\n\n        // focus-ring won't be visible even if using the keyboard:\n        // https://github.com/WICG/focus-visible/issues/88\n        dropdownHeaderRef.current?.focus({ preventScroll: true });\n      }\n    };\n\n    /**\n     * Handles the `Cancel` action. Both single and ranged modes are handled here.\n     */\n    const handleCancel: HvDropdownListProps[\"onCancel\"] = (evt) => {\n      onCancel?.(evt as any);\n\n      handleToggle(evt as any, false);\n\n      // focus-ring won't be visible even if using the keyboard:\n      // https://github.com/WICG/focus-visible/issues/88\n      dropdownHeaderRef.current?.focus({ preventScroll: true });\n    };\n\n    const handleClickOutside: HvBaseDropdownProps[\"onClickOutside\"] = (evt) => {\n      onClickOutside?.(evt);\n      onCancel?.(evt);\n    };\n\n    const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n      containerRef\n    ) => {\n      const inputs = containerRef?.getElementsByTagName(\"input\");\n      if (inputs && inputs.length > 0) {\n        inputs[0].focus();\n        return;\n      }\n      const listItems =\n        containerRef != null\n          ? [...containerRef.getElementsByTagName(\"li\")]\n          : [];\n      listItems.every((listItem) => {\n        if (listItem.tabIndex >= 0) {\n          listItem.focus();\n          return false;\n        }\n        return true;\n      });\n    };\n\n    const buildHeaderLabel = () => {\n      const hasSelection = getSelected(internalValues).length > 0;\n      return labels?.select || !multiSelect ? (\n        <HvTypography\n          component=\"div\"\n          variant=\"body\"\n          className={cx(classes.placeholder, {\n            [classes.selectionDisabled]: disabled,\n            [classes.placeholderClosed]: !(isOpen || hasSelection),\n          })}\n        >\n          {selectionLabel.selected}\n        </HvTypography>\n      ) : (\n        <HvTypography\n          component=\"div\"\n          className={cx(classes.placeholder, {\n            [classes.selectionDisabled]: disabled,\n          })}\n          variant=\"body\"\n        >\n          <b>{selectionLabel.selected}</b>\n          {` ${labels?.multiSelectionConjunction} ${selectionLabel.total}`}\n        </HvTypography>\n      );\n    };\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        status={validationState}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        className={cx(\n          classes.root,\n          {\n            [classes.disabled]: disabled,\n          },\n          className\n        )}\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          id={setId(id, \"dropdown\")}\n          classes={{\n            root: cx(classes.dropdown, {\n              [classes.readOnly]: readOnly,\n            }),\n            arrow: classes.arrow,\n            header: cx(classes.dropdownHeader, {\n              [classes.dropdownHeaderInvalid]: isStateInvalid,\n            }),\n            headerOpen: classes.dropdownHeaderOpen,\n          }}\n          expanded={isOpen}\n          disabled={disabled}\n          readOnly={readOnly}\n          required={required}\n          disablePortal={disablePortal}\n          placement={placement}\n          popperProps={popperProps}\n          placeholder={buildHeaderLabel()}\n          onToggle={handleToggle}\n          onClickOutside={handleClickOutside}\n          onContainerCreation={setFocusToContent}\n          role=\"combobox\"\n          variableWidth={variableWidth}\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          onFocus={onFocus}\n          onBlur={onBlur}\n          dropdownHeaderRef={headerForkedRef}\n          {...otherBaseDropdownProps}\n        >\n          <HvDropdownList\n            id={setId(elementId, \"values\")}\n            classes={{\n              rootList: classes.rootList,\n              dropdownListContainer: classes.dropdownListContainer,\n            }}\n            values={internalValues}\n            multiSelect={multiSelect}\n            showSearch={showSearch}\n            onChange={handleSelection}\n            onCancel={handleCancel}\n            labels={labels}\n            notifyChangesOnFirstRender={notifyChangesOnFirstRender}\n            hasTooltips={hasTooltips}\n            singleSelectionToggle={singleSelectionToggle}\n            aria-label={ariaLabel}\n            aria-labelledby={hasLabel ? setId(elementId, \"label\") : undefined}\n            height={height}\n            maxHeight={maxHeight}\n            virtualized={virtualized}\n            {...listProps}\n          />\n        </HvBaseDropdown>\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":["DEFAULT_LABELS","select","undefined","selectAll","cancelLabel","applyLabel","searchPlaceholder","multiSelectionConjunction","HvDropdown","forwardRef","props","ref","classes","classesProp","className","id","name","required","disabled","readOnly","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","placeholder","onChange","status","statusMessage","ariaErrorMessage","onCancel","onToggle","onClickOutside","onFocus","onBlur","values","multiSelect","showSearch","expanded","defaultExpanded","notifyChangesOnFirstRender","labels","labelsProp","hasTooltips","disablePortal","singleSelectionToggle","placement","variableWidth","popperProps","height","maxHeight","virtualized","baseDropdownProps","listProps","others","useDefaultProps","cx","useClasses","useLabels","elementId","useUniqueId","validationState","setValidationState","useControlled","validationMessage","isOpen","setIsOpen","Boolean","selectionLabel","setSelectionLabel","useState","getSelectionLabel","internalValues","setInternalValues","internalValuesRef","useRef","useEffect","current","dropdownHeaderRef","refProp","dropdownHeaderRefProp","otherBaseDropdownProps","headerForkedRef","useForkRef","dropdownForkedRef","handleToggle","event","open","hasSelection","getSelected","length","handleSelection","listValues","commitChanges","toggle","notifyChanges","selected","focus","preventScroll","handleCancel","evt","handleClickOutside","setFocusToContent","containerRef","inputs","getElementsByTagName","listItems","every","listItem","tabIndex","buildHeaderLabel","jsx","HvTypography","selectionDisabled","placeholderClosed","jsxs","total","hasLabel","hasDescription","canShowError","isStateInvalid","isInvalid","errorMessageId","setId","HvFormElement","root","labelContainer","HvLabel","HvInfoMessage","HvBaseDropdown","dropdown","arrow","header","dropdownHeader","dropdownHeaderInvalid","headerOpen","dropdownHeaderOpen","join","trim","HvDropdownList","rootList","dropdownListContainer","HvWarningText","error"],"mappings":"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"}
+{"version":3,"file":"Dropdown.cjs","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from \"react\";\n\nimport { PopperProps, useForkRef } from \"@mui/material\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { setId } from \"@core/utils/setId\";\nimport { useLabels, useUniqueId, useControlled } from \"@core/hooks\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport {\n  HvBaseDropdown,\n  HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport { HvListValue } from \"@core/components/List\";\nimport {\n  isInvalid,\n  HvInfoMessage,\n  HvWarningText,\n  HvFormElement,\n  HvLabel,\n} from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { getSelected, getSelectionLabel } from \"./utils\";\nimport { HvDropdownList, HvDropdownListProps } from \"./List\";\nimport { staticClasses, useClasses } from \"./Dropdown.styles\";\nimport { HvDropdownLabelsProps, HvDropdownStatus } from \"./types\";\n\nexport { staticClasses as dropdownClasses };\n\nexport type HvDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropdownProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvDropdownClasses;\n  /**\n   * The form element name.\n   */\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?: any;\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: any;\n  /**\n   * The placeholder value when nothing is selected.\n   */\n  placeholder?: string;\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is in read only mode.\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?: HvDropdownStatus;\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?: any;\n  /**\n   * Identifies the element that provides an error message for the dropdown.\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?: (selected: HvListValue | HvListValue[] | undefined) => void;\n  /**\n   * The list to be rendered by the dropdown.\n   */\n  values?: HvListValue[];\n  /**\n   * If `true` the dropdown is multiSelect, if `false` the dropdown is single select.\n   */\n  multiSelect?: boolean;\n  /**\n   * If `true` the dropdown is rendered with a search bar, if `false` there won't be a search bar.\n   */\n  showSearch?: boolean;\n  /**\n   * If `true` the dropdown starts opened if `false` it starts closed.\n   */\n  expanded?: boolean;\n  /**\n   * When uncontrolled, defines the initial expanded state.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * If 'true' the dropdown will notify on the first render.\n   */\n  notifyChangesOnFirstRender?: boolean;\n  /**\n   * An object containing all the labels for the dropdown.\n   */\n  labels?: HvDropdownLabelsProps;\n  /**\n   * If `true` the dropdown will show tooltips when user mouseenter text in list\n   */\n  hasTooltips?: boolean;\n  /**\n   * Disable the portal behavior.\n   * The children stay within it's parent DOM hierarchy.\n   */\n  disablePortal?: boolean;\n  /**\n   * If `true` the dropdown width depends size of content if `false` the width depends on the header size.\n   * Defaults to `false`.\n   */\n  variableWidth?: boolean;\n  /**\n   * If `true`, selection can be toggled when single selection.\n   */\n  singleSelectionToggle?: boolean;\n  /**\n   * Placement of the dropdown.\n   */\n  placement?: \"left\" | \"right\";\n  /**\n   * An object containing props to be wired to the popper component.\n   */\n  popperProps?: Partial<PopperProps>;\n  /**\n   * Callback called when the user cancels the changes.\n   *\n   * Called when the cancel button is used and when the user clicks outside the open container.\n   *\n   * @param {object} event The event source of the callback.\n   */\n  onCancel?: (event: Event) => void;\n  /**\n   * Callback called when dropdown changes the expanded state.\n   *\n   * @param {object} event The event source of the callback.\n   * @param {boolean} open If the dropdown new state is open (`true`) or closed (`false`).\n   */\n  onToggle?: (event: Event, open: boolean) => void;\n  /**\n   * Callback called when the user clicks outside the open container.\n   *\n   * @param {object} event The event source of the callback.\n   */\n  onClickOutside?: (event: Event) => void;\n  /**\n   * @ignore\n   */\n  onFocus?: React.FocusEventHandler<any>;\n  /**\n   * @ignore\n   */\n  onBlur?: React.FocusEventHandler<any>;\n  /**\n   * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n   */\n  height?: number;\n  /**\n   * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n   */\n  maxHeight?: number;\n  /**\n   * Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options.\n   */\n  virtualized?: boolean;\n  /**\n   * Extra props passed to the dropdown.\n   */\n  baseDropdownProps?: Partial<HvBaseDropdownProps>;\n  /**\n   * Extra props passed to the list.\n   */\n  listProps?: HvDropdownListProps;\n}\n\nconst DEFAULT_LABELS: HvDropdownLabelsProps = {\n  select: undefined,\n  selectAll: \"All\",\n  cancelLabel: \"Cancel\",\n  applyLabel: \"Apply\",\n  searchPlaceholder: \"Search\",\n  multiSelectionConjunction: \"/\",\n};\n\n/**\n * A dropdown list is a graphical control element, similar to a list box, that allows the user to choose one value from a list.\n */\nexport const HvDropdown = forwardRef<HTMLDivElement, HvDropdownProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n\n      id,\n      name,\n\n      required = false,\n      disabled = false,\n      readOnly = false,\n\n      label,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n\n      placeholder = \"Select...\",\n\n      onChange,\n\n      status,\n      statusMessage,\n      \"aria-errormessage\": ariaErrorMessage,\n\n      onCancel,\n      onToggle,\n      onClickOutside,\n\n      onFocus,\n      onBlur,\n\n      values,\n      multiSelect = false,\n      showSearch = false,\n      expanded,\n      defaultExpanded = false,\n      notifyChangesOnFirstRender = false,\n      labels: labelsProp,\n      hasTooltips = false,\n      disablePortal = false,\n      singleSelectionToggle = true,\n      placement,\n      variableWidth = false,\n      popperProps = {},\n      height,\n      maxHeight,\n      virtualized = false,\n      baseDropdownProps = {},\n      listProps = {},\n      ...others\n    } = useDefaultProps(\"HvDropdown\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n    const elementId = useUniqueId(id, \"hvdropdown\");\n\n    const [validationState, setValidationState] = useControlled(\n      status,\n      \"standBy\"\n    );\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const [isOpen, setIsOpen] = useControlled(\n      expanded,\n      Boolean(defaultExpanded)\n    );\n    const [selectionLabel, setSelectionLabel] = useState(\n      getSelectionLabel(labels, placeholder, multiSelect, values)\n    );\n\n    const [internalValues, setInternalValues] = useState(values);\n\n    // Hack - Keeping track of internal values for validation purposes since useState is async\n    const internalValuesRef = useRef(values);\n\n    useEffect(() => {\n      setInternalValues(values);\n      internalValuesRef.current = values;\n    }, [values]);\n\n    useEffect(() => {\n      setSelectionLabel(\n        getSelectionLabel(labels, placeholder, multiSelect, values)\n      );\n    }, [labels, multiSelect, placeholder, values]);\n\n    if (import.meta.env.DEV && virtualized && !height) {\n      // eslint-disable-next-line no-console\n      console.error(\n        \"Dropdown/List in virtualized mode requires a height. Please define it.\"\n      );\n    }\n\n    const dropdownHeaderRef = useRef<HTMLDivElement>();\n\n    const {\n      ref: refProp,\n      dropdownHeaderRef: dropdownHeaderRefProp,\n      ...otherBaseDropdownProps\n    } = baseDropdownProps;\n    const headerForkedRef = useForkRef(\n      dropdownHeaderRefProp,\n      dropdownHeaderRef\n    );\n\n    const dropdownForkedRef = useForkRef(ref, refProp);\n\n    const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (event, open) => {\n      onToggle?.(event, open);\n\n      setIsOpen(open);\n\n      if (!open) {\n        // also run built-in validation when closing without changes\n        // as the user \"touched\" the input\n        setValidationState(() => {\n          // this will only run if status is uncontrolled\n          if (required) {\n            const hasSelection =\n              getSelected(internalValuesRef.current).length > 0;\n\n            if (!hasSelection) {\n              return \"invalid\";\n            }\n          }\n\n          return \"valid\";\n        });\n      }\n    };\n\n    /** Applies the selected values to the state */\n    const handleSelection: HvDropdownListProps[\"onChange\"] = (\n      listValues,\n      commitChanges,\n      toggle,\n      notifyChanges = true\n    ) => {\n      const selected = getSelected(listValues);\n\n      if (commitChanges) {\n        setInternalValues(listValues);\n        internalValuesRef.current = listValues;\n\n        setSelectionLabel(\n          getSelectionLabel(labels, placeholder, multiSelect, listValues)\n        );\n\n        setValidationState(() => {\n          // this will only run if status is uncontrolled\n          if (required && selected.length === 0) {\n            return \"invalid\";\n          }\n\n          return \"valid\";\n        });\n      }\n      if (notifyChanges) onChange?.(multiSelect ? selected : selected[0]);\n      if (toggle) {\n        handleToggle(undefined as any, false);\n\n        // focus-ring won't be visible even if using the keyboard:\n        // https://github.com/WICG/focus-visible/issues/88\n        dropdownHeaderRef.current?.focus({ preventScroll: true });\n      }\n    };\n\n    /**\n     * Handles the `Cancel` action. Both single and ranged modes are handled here.\n     */\n    const handleCancel: HvDropdownListProps[\"onCancel\"] = (evt) => {\n      onCancel?.(evt as any);\n\n      handleToggle(evt as any, false);\n\n      // focus-ring won't be visible even if using the keyboard:\n      // https://github.com/WICG/focus-visible/issues/88\n      dropdownHeaderRef.current?.focus({ preventScroll: true });\n    };\n\n    const handleClickOutside: HvBaseDropdownProps[\"onClickOutside\"] = (evt) => {\n      onClickOutside?.(evt);\n      onCancel?.(evt);\n    };\n\n    const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n      containerRef\n    ) => {\n      const inputs = containerRef?.getElementsByTagName(\"input\");\n      if (inputs && inputs.length > 0) {\n        inputs[0].focus();\n        return;\n      }\n      const listItems =\n        containerRef != null\n          ? [...containerRef.getElementsByTagName(\"li\")]\n          : [];\n      listItems.every((listItem) => {\n        if (listItem.tabIndex >= 0) {\n          listItem.focus();\n          return false;\n        }\n        return true;\n      });\n    };\n\n    const buildHeaderLabel = () => {\n      const hasSelection = getSelected(internalValues).length > 0;\n      return labels?.select || !multiSelect ? (\n        <HvTypography\n          component=\"div\"\n          variant=\"body\"\n          className={cx(classes.placeholder, {\n            [classes.selectionDisabled]: disabled,\n            [classes.placeholderClosed]: !(isOpen || hasSelection),\n          })}\n        >\n          {selectionLabel.selected}\n        </HvTypography>\n      ) : (\n        <HvTypography\n          component=\"div\"\n          className={cx(classes.placeholder, {\n            [classes.selectionDisabled]: disabled,\n          })}\n          variant=\"body\"\n        >\n          <b>{selectionLabel.selected}</b>\n          {` ${labels?.multiSelectionConjunction} ${selectionLabel.total}`}\n        </HvTypography>\n      );\n    };\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        status={validationState}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        className={cx(\n          classes.root,\n          {\n            [classes.disabled]: disabled,\n          },\n          className\n        )}\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          id={setId(id, \"dropdown\")}\n          classes={{\n            root: cx(classes.dropdown, {\n              [classes.readOnly]: readOnly,\n            }),\n            arrow: classes.arrow,\n            header: cx(classes.dropdownHeader, {\n              [classes.dropdownHeaderInvalid]: isStateInvalid,\n            }),\n            headerOpen: classes.dropdownHeaderOpen,\n          }}\n          expanded={isOpen}\n          disabled={disabled}\n          readOnly={readOnly}\n          required={required}\n          disablePortal={disablePortal}\n          placement={placement}\n          popperProps={popperProps}\n          placeholder={buildHeaderLabel()}\n          onToggle={handleToggle}\n          onClickOutside={handleClickOutside}\n          onContainerCreation={setFocusToContent}\n          role=\"combobox\"\n          variableWidth={variableWidth}\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          onFocus={onFocus}\n          onBlur={onBlur}\n          dropdownHeaderRef={headerForkedRef}\n          {...otherBaseDropdownProps}\n        >\n          <HvDropdownList\n            id={setId(elementId, \"values\")}\n            classes={{\n              rootList: classes.rootList,\n              dropdownListContainer: classes.dropdownListContainer,\n            }}\n            values={internalValues}\n            multiSelect={multiSelect}\n            showSearch={showSearch}\n            onChange={handleSelection}\n            onCancel={handleCancel}\n            labels={labels}\n            notifyChangesOnFirstRender={notifyChangesOnFirstRender}\n            hasTooltips={hasTooltips}\n            singleSelectionToggle={singleSelectionToggle}\n            aria-label={ariaLabel}\n            aria-labelledby={hasLabel ? setId(elementId, \"label\") : undefined}\n            height={height}\n            maxHeight={maxHeight}\n            virtualized={virtualized}\n            {...listProps}\n          />\n        </HvBaseDropdown>\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":["forwardRef","useDefaultProps","useClasses","useLabels","useUniqueId","useControlled","useState","getSelectionLabel","useRef","useEffect","useForkRef","getSelected","jsx","HvTypography","jsxs","isInvalid","setId","HvFormElement","HvLabel","HvInfoMessage","HvBaseDropdown","HvDropdownList","HvWarningText"],"mappings":"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"}

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

@@ -2,23 +2,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const classes = require("../../utils/classes.cjs");
-const {
-  staticClasses,
-  useClasses
-} = classes.createClasses("HvDropdown", {
+const { staticClasses, useClasses } = classes.createClasses("HvDropdown", {
   root: {
     width: "100%",
     position: "relative",
     display: "inline-block"
   },
-  labelContainer: {
-    display: "flex",
-    alignItems: "flex-start"
-  },
-  label: {
-    paddingBottom: "6px",
-    display: "block"
-  },
+  labelContainer: { display: "flex", alignItems: "flex-start" },
+  label: { paddingBottom: "6px", display: "block" },
   description: {},
   error: {},
   placeholder: {