@hitachivantara/uikit-react-core 3.52.5

package/dist/modern/Dropdown/Dropdown.js

@@ -0,0 +1,590 @@
+import "core-js/modules/web.dom-collections.iterator.js";
+import React, { useEffect, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+import { withStyles } from "@material-ui/core";
+import { setId, useLabels } from "../utils";
+import { HvBaseDropdown, HvFormElement, HvLabel, HvInfoMessage, HvWarningText, HvTypography, useUniqueId, useControlled } from "..";
+import { isInvalid } from "../Forms/FormElement/validationStates";
+import List from "./List";
+import { getSelected, getSelectionLabel } from "./utils";
+import styles from "./styles";
+const DEFAULT_LABELS = {
+  select: undefined,
+  selectAll: "All",
+  cancelLabel: "Cancel",
+  applyLabel: "Apply",
+  searchPlaceholder: "Search",
+  multiSelectionConjunction: "/"
+};
+/**
+ * A dropdown list is a graphical control element, similar to a list box, that allows the user to choose one value from a list.
+ */
+
+const HvDropdown = props => {
+  const {
+    classes,
+    className,
+    id,
+    name,
+    required = false,
+    disabled = 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,
+    virtualized = false
+  } = props;
+  const labels = useLabels(DEFAULT_LABELS, labelsProp);
+  const elementId = useUniqueId(id, "hvdropdown");
+  const [validationState, setValidationState] = useControlled(status, "standBy");
+  const [validationMessage] = useControlled(statusMessage, "Required");
+  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));
+  const [selectionLabel, setSelectionLabel] = useState(getSelectionLabel(values, labels, placeholder, multiSelect));
+  const [internalValues, setInternalValues] = useState(values);
+  useEffect(() => {
+    setInternalValues(values);
+  }, [values]);
+  useEffect(() => {
+    setSelectionLabel(getSelectionLabel(values, labels, placeholder, multiSelect));
+  }, [labels, multiSelect, placeholder, values]);
+
+  if (virtualized && !height && process.env.NODE_ENV !== "production") {
+    // eslint-disable-next-line no-console
+    console.error("Dropdown/List in virtualized mode requires a height. Please define it.");
+  }
+
+  const dropdownHeaderRef = useRef();
+
+  const handleToggle = (_e, open) => {
+    onToggle === null || onToggle === void 0 ? void 0 : onToggle(_e, open);
+    setIsOpen(open);
+
+    if (!open) {
+      // also run built-in validation when closing without changes
+      // as the user "touched" the input
+      setValidationState(() => {
+        // this will only run if status is uncontrolled
+        if (required) {
+          const hasSelection = getSelected(internalValues).length > 0;
+
+          if (!hasSelection) {
+            return "invalid";
+          }
+        }
+
+        return "valid";
+      });
+    }
+  };
+  /**
+   * Applies the selected values to the state
+   *
+   * @param {Array} listValues - An array containing the selected values.
+   * @param {Boolean} commitChanges - If `true` the selection if finally committed the dropdown header text should reflect the new selection
+   * @param {Boolean} toggle -If `true` the dropdown should toggle it's current state
+   * @param {Boolean} notifyChanges -If `true` the dropdown will call onChange.
+   */
+
+
+  const handleSelection = (listValues, commitChanges, toggle, notifyChanges = true) => {
+    const selected = getSelected(listValues);
+
+    if (commitChanges) {
+      setInternalValues(listValues);
+      setSelectionLabel(getSelectionLabel(listValues, labels, placeholder, multiSelect));
+      setValidationState(() => {
+        // this will only run if status is uncontrolled
+        if (required && selected.length === 0) {
+          return "invalid";
+        }
+
+        return "valid";
+      });
+    }
+
+    if (notifyChanges) onChange === null || onChange === void 0 ? void 0 : onChange(multiSelect ? selected : selected[0]);
+
+    if (toggle) {
+      var _dropdownHeaderRef$cu;
+
+      handleToggle(undefined, false); // focus-ring won't be visible even if using the keyboard:
+      // https://github.com/WICG/focus-visible/issues/88
+
+      (_dropdownHeaderRef$cu = dropdownHeaderRef.current) === null || _dropdownHeaderRef$cu === void 0 ? void 0 : _dropdownHeaderRef$cu.focus({
+        preventScroll: true
+      });
+    }
+  };
+  /**
+   * Handles the `Cancel` action. Both single and ranged modes are handled here.
+   */
+
+
+  const handleCancel = evt => {
+    var _dropdownHeaderRef$cu2;
+
+    onCancel === null || onCancel === void 0 ? void 0 : onCancel(evt);
+    handleToggle(evt, false); // focus-ring won't be visible even if using the keyboard:
+    // https://github.com/WICG/focus-visible/issues/88
+
+    (_dropdownHeaderRef$cu2 = dropdownHeaderRef.current) === null || _dropdownHeaderRef$cu2 === void 0 ? void 0 : _dropdownHeaderRef$cu2.focus({
+      preventScroll: true
+    });
+  };
+
+  const handleClickOutside = evt => {
+    onClickOutside === null || onClickOutside === void 0 ? void 0 : onClickOutside(evt);
+    onCancel === null || onCancel === void 0 ? void 0 : onCancel(evt);
+  };
+
+  const setFocusToContent = containerRef => {
+    const inputs = containerRef === null || containerRef === void 0 ? void 0 : containerRef.getElementsByTagName("input");
+
+    if ((inputs === null || inputs === void 0 ? void 0 : 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 true;
+    });
+  };
+
+  const buildHeaderLabel = () => {
+    const hasSelection = getSelected(internalValues).length > 0;
+    return labels.select || !multiSelect ? /*#__PURE__*/React.createElement(HvTypography, {
+      component: "div",
+      noWrap: true,
+      variant: isOpen || hasSelection ? "normalText" : "placeholderText",
+      className: clsx(classes.placeholder, disabled && classes.selectionDisabled)
+    }, selectionLabel.selected) : /*#__PURE__*/React.createElement(HvTypography, {
+      component: "div",
+      noWrap: true,
+      className: clsx(classes.placeholder, disabled && classes.selectionDisabled),
+      variant: "normalText"
+    }, /*#__PURE__*/React.createElement("b", null, selectionLabel.selected), ` ${labels.multiSelectionConjunction} ${selectionLabel.total}`);
+  };
+
+  const hasLabel = label != null;
+  const hasDescription = description != null; // the error message area will only be created if:
+  // - an external element that provides an error message isn't identified via aria-errormessage AND
+  //   - both status and statusMessage properties are being controlled OR
+  //   - status is uncontrolled and required is true
+
+  const canShowError = ariaErrorMessage == null && (status !== undefined && statusMessage !== undefined || status === undefined && required);
+  const isStateInvalid = isInvalid(validationState);
+  let errorMessageId;
+
+  if (isStateInvalid) {
+    errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;
+  }
+
+  return /*#__PURE__*/React.createElement(HvFormElement, {
+    id: id,
+    name: name,
+    status: validationState,
+    disabled: disabled,
+    required: required,
+    className: clsx(className, classes.root)
+  }, (hasLabel || hasDescription) && /*#__PURE__*/React.createElement("div", {
+    className: classes.labelContainer
+  }, hasLabel && /*#__PURE__*/React.createElement(HvLabel, {
+    id: setId(elementId, "label"),
+    label: label,
+    className: classes.label
+  }), hasDescription && /*#__PURE__*/React.createElement(HvInfoMessage, {
+    id: setId(elementId, "description"),
+    className: classes.description
+  }, description)), /*#__PURE__*/React.createElement(HvBaseDropdown, {
+    id: setId(id, "dropdown"),
+    classes: {
+      root: classes.dropdown,
+      arrow: classes.arrow,
+      header: clsx(classes.dropdownHeader, isStateInvalid && classes.dropdownHeaderInvalid),
+      headerOpen: classes.dropdownHeaderOpen
+    },
+    expanded: isOpen,
+    disabled: disabled,
+    disablePortal: disablePortal,
+    placement: placement,
+    popperProps: popperProps,
+    placeholder: buildHeaderLabel(),
+    onToggle: handleToggle,
+    onClickOutside: handleClickOutside,
+    onContainerCreation: setFocusToContent,
+    role: "combobox",
+    variableWidth: variableWidth,
+    "aria-label": ariaLabel,
+    "aria-labelledby": [label && setId(elementId, "label"), ariaLabelledBy].join(" ").trim() || undefined,
+    "aria-invalid": isStateInvalid ? true : undefined,
+    "aria-errormessage": errorMessageId,
+    "aria-describedby": [description && setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || undefined,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    dropdownHeaderRef: dropdownHeaderRef
+  }, /*#__PURE__*/React.createElement(List, {
+    id: setId(elementId, "values"),
+    classes: {
+      rootList: classes.rootList,
+      dropdownListContainer: classes.dropdownListContainer
+    },
+    values: internalValues,
+    multiSelect: multiSelect,
+    showSearch: showSearch,
+    onChange: handleSelection,
+    onCancel: handleCancel,
+    labels: labels,
+    notifyChangesOnFirstRender: notifyChangesOnFirstRender,
+    hasTooltips: hasTooltips,
+    singleSelectionToggle: singleSelectionToggle,
+    "aria-labelledby": hasLabel ? setId(elementId, "label") : undefined,
+    height: height,
+    virtualized: virtualized
+  })), canShowError && /*#__PURE__*/React.createElement(HvWarningText, {
+    id: setId(elementId, "error"),
+    disableBorder: true,
+    className: classes.error
+  }, validationMessage));
+};
+
+HvDropdown.propTypes = {
+  /**
+   * Class names to be applied.
+   */
+  className: PropTypes.string,
+
+  /**
+   * A Jss Object used to override or extend the component styles applied.
+   */
+  classes: PropTypes.shape({
+    /**
+     * Styles applied to the component root class.
+     */
+    root: PropTypes.string,
+
+    /**
+     * Styles applied to the container of the labels elements.
+     */
+    labelContainer: PropTypes.string,
+
+    /**
+     * Styles applied to the label element.
+     */
+    label: PropTypes.string,
+
+    /**
+     * Styles applied to the icon information text.
+     */
+    description: PropTypes.string,
+
+    /**
+     * Styles applied to the error area.
+     */
+    error: PropTypes.string,
+
+    /**
+     * Styles applied to the dropdown.
+     */
+    dropdown: PropTypes.string,
+
+    /**
+     * Styles applied to the arrow
+     */
+    arrow: PropTypes.string,
+
+    /**
+     * Styles applied for truncating the list elements.
+     */
+    placeholder: PropTypes.string,
+
+    /**
+     * Styles applied when the selection is disabled.
+     */
+    selectionDisabled: PropTypes.string,
+
+    /**
+     * Styles applied to the list.
+     */
+    rootList: PropTypes.string,
+
+    /**
+     * Styles applied to the dropdown header.
+     */
+    dropdownHeader: PropTypes.string,
+
+    /**
+     * Styles applied to the dropdown is invalid.
+     */
+    dropdownHeaderInvalid: PropTypes.string,
+
+    /**
+     * Styles applied to the dropdown is opened.
+     */
+    dropdownHeaderOpen: PropTypes.string,
+
+    /**
+     * Styles applied to the dropdown list.
+     */
+    dropdownListContainer: PropTypes.string
+  }).isRequired,
+
+  /**
+   * Id to be applied to the form element root node.
+   */
+  id: PropTypes.string,
+
+  /**
+   * The form element name.
+   */
+  name: PropTypes.string,
+
+  /**
+   * The label of the form element.
+   *
+   * The form element must be labeled for accessibility reasons.
+   * If not provided, an aria-label or aria-labelledby must be provided instead.
+   */
+  label: PropTypes.node,
+
+  /**
+   * @ignore
+   */
+  "aria-label": PropTypes.string,
+
+  /**
+   * @ignore
+   */
+  "aria-labelledby": PropTypes.string,
+
+  /**
+   * Provide additional descriptive text for the form element.
+   */
+  description: PropTypes.node,
+
+  /**
+   * @ignore
+   */
+  "aria-describedby": PropTypes.string,
+
+  /**
+   * The placeholder value when nothing is selected.
+   */
+  placeholder: PropTypes.string,
+
+  /**
+   * Indicates that the form element is disabled.
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Indicates that user input is required on the form element.
+   */
+  required: PropTypes.bool,
+
+  /**
+   * The status of the form element.
+   *
+   * Valid is correct, invalid is incorrect and standBy means no validations have run.
+   *
+   * When uncontrolled and unspecified it will default to "standBy" and change to either "valid"
+   * or "invalid" after any change to the state.
+   */
+  status: PropTypes.oneOf(["standBy", "valid", "invalid"]),
+
+  /**
+   * The error message to show when the validation status is "invalid".
+   *
+   * Defaults to "Required" when the status is uncontrolled and no `aria-errormessage` is provided.
+   */
+  statusMessage: PropTypes.node,
+
+  /**
+   * Identifies the element that provides an error message for the dropdown.
+   *
+   * Will only be used when the validation status is invalid.
+   */
+  "aria-errormessage": PropTypes.string,
+
+  /**
+   * The callback fired when the value changes.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * The list to be rendered by the dropdown.
+   */
+  values: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    label: PropTypes.node.isRequired,
+    searchValue: PropTypes.string,
+    value: PropTypes.any,
+    selected: PropTypes.bool
+  })),
+
+  /**
+   * If `true` the dropdown is multiSelect, if `false` the dropdown is single select.
+   */
+  multiSelect: PropTypes.bool,
+
+  /**
+   * If `true` the dropdown is rendered with a search bar, if `false` there won't be a search bar.
+   */
+  showSearch: PropTypes.bool,
+
+  /**
+   * If `true` the dropdown starts opened if `false` it starts closed.
+   */
+  expanded: PropTypes.bool,
+
+  /**
+   * When uncontrolled, defines the initial expanded state.
+   */
+  defaultExpanded: PropTypes.bool,
+
+  /**
+   * If 'true' the dropdown will notify on the first render.
+   */
+  notifyChangesOnFirstRender: PropTypes.bool,
+
+  /**
+   * An object containing all the labels for the dropdown.
+   */
+  labels: PropTypes.shape({
+    /**
+     * Label for overwrite the default header behaviour.
+     */
+    select: PropTypes.string,
+
+    /**
+     * Label used for the All checkbox action.
+     */
+    selectAll: PropTypes.string,
+
+    /**
+     * Cancel button label.
+     */
+    cancelLabel: PropTypes.string,
+
+    /**
+     * Apply button label.
+     */
+    applyLabel: PropTypes.string,
+
+    /**
+     * The label used in the middle of the multiSelection count.
+     */
+    multiSelectionConjunction: PropTypes.string
+  }),
+
+  /**
+   * If `true` the dropdown will show tooltips when user mouseenter text in list
+   */
+  hasTooltips: PropTypes.bool,
+
+  /**
+   * Disable the portal behavior.
+   * The children stay within it's parent DOM hierarchy.
+   */
+  disablePortal: PropTypes.bool,
+
+  /**
+   * If `true` the dropdown width depends size of content if `false` the width depends on the header size.
+   * Defaults to `false`.
+   */
+  variableWidth: PropTypes.bool,
+
+  /**
+   * If `true`, selection can be toggled when single selection.
+   */
+  singleSelectionToggle: PropTypes.bool,
+
+  /**
+   * Placement of the dropdown.
+   */
+  placement: PropTypes.oneOf(["left", "right"]),
+
+  /**
+   * An object containing props to be wired to the popper component.
+   */
+  popperProps: PropTypes.shape(),
+
+  /**
+   * Callback called when the user cancels the changes.
+   *
+   * Called when the cancel button is used and when the user clicks outside the open container.
+   *
+   * @param {object} event The event source of the callback.
+   */
+  onCancel: PropTypes.func,
+
+  /**
+   * Callback called when dropdown changes the expanded state.
+   *
+   * @param {object} event The event source of the callback.
+   * @param {boolean} open If the dropdown new state is open (`true`) or closed (`false`).
+   */
+  onToggle: PropTypes.func,
+
+  /**
+   * Callback called when the user clicks outside the open container.
+   *
+   * @param {object} event The event source of the callback.
+   */
+  onClickOutside: PropTypes.func,
+
+  /**
+   * @ignore
+   */
+  onFocus: PropTypes.func,
+
+  /**
+   * @ignore
+   */
+  onBlur: PropTypes.func,
+
+  /**
+   * 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
+   */
+  height: PropTypes.number,
+
+  /**
+   * Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options.
+   */
+  virtualized: PropTypes.bool
+};
+export default withStyles(styles, {
+  name: "HvDropdown"
+})(HvDropdown);
+//# sourceMappingURL=Dropdown.js.map

package/dist/modern/Dropdown/Dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Dropdown/Dropdown.js"],"names":["React","useEffect","useRef","useState","PropTypes","clsx","withStyles","setId","useLabels","HvBaseDropdown","HvFormElement","HvLabel","HvInfoMessage","HvWarningText","HvTypography","useUniqueId","useControlled","isInvalid","List","getSelected","getSelectionLabel","styles","DEFAULT_LABELS","select","undefined","selectAll","cancelLabel","applyLabel","searchPlaceholder","multiSelectionConjunction","HvDropdown","props","classes","className","id","name","required","disabled","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","virtualized","elementId","validationState","setValidationState","validationMessage","isOpen","setIsOpen","Boolean","selectionLabel","setSelectionLabel","internalValues","setInternalValues","process","env","NODE_ENV","console","error","dropdownHeaderRef","handleToggle","_e","open","hasSelection","length","handleSelection","listValues","commitChanges","toggle","notifyChanges","selected","current","focus","preventScroll","handleCancel","evt","handleClickOutside","setFocusToContent","containerRef","inputs","getElementsByTagName","listItems","every","listItem","tabIndex","buildHeaderLabel","selectionDisabled","total","hasLabel","hasDescription","canShowError","isStateInvalid","errorMessageId","root","labelContainer","dropdown","arrow","header","dropdownHeader","dropdownHeaderInvalid","headerOpen","dropdownHeaderOpen","join","trim","rootList","dropdownListContainer","propTypes","string","shape","isRequired","node","bool","oneOf","func","arrayOf","searchValue","value","any","number"],"mappings":"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","sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { withStyles } from \"@material-ui/core\";\nimport { setId, useLabels } from \"../utils\";\nimport {\n  HvBaseDropdown,\n  HvFormElement,\n  HvLabel,\n  HvInfoMessage,\n  HvWarningText,\n  HvTypography,\n  useUniqueId,\n  useControlled,\n} from \"..\";\nimport { isInvalid } from \"../Forms/FormElement/validationStates\";\nimport List from \"./List\";\nimport { getSelected, getSelectionLabel } from \"./utils\";\nimport styles from \"./styles\";\n\nconst DEFAULT_LABELS = {\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 */\nconst HvDropdown = (props) => {\n  const {\n    classes,\n    className,\n\n    id,\n    name,\n\n    required = false,\n    disabled = 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    virtualized = false,\n  } = props;\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const elementId = useUniqueId(id, \"hvdropdown\");\n\n  const [validationState, setValidationState] = useControlled(status, \"standBy\");\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const [selectionLabel, setSelectionLabel] = useState(\n    getSelectionLabel(values, labels, placeholder, multiSelect)\n  );\n  const [internalValues, setInternalValues] = useState(values);\n\n  useEffect(() => {\n    setInternalValues(values);\n  }, [values]);\n\n  useEffect(() => {\n    setSelectionLabel(getSelectionLabel(values, labels, placeholder, multiSelect));\n  }, [labels, multiSelect, placeholder, values]);\n\n  if (virtualized && !height && process.env.NODE_ENV !== \"production\") {\n    // eslint-disable-next-line no-console\n    console.error(\"Dropdown/List in virtualized mode requires a height. Please define it.\");\n  }\n\n  const dropdownHeaderRef = useRef();\n\n  const handleToggle = (_e, open) => {\n    onToggle?.(_e, 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 = getSelected(internalValues).length > 0;\n\n          if (!hasSelection) {\n            return \"invalid\";\n          }\n        }\n\n        return \"valid\";\n      });\n    }\n  };\n\n  /**\n   * Applies the selected values to the state\n   *\n   * @param {Array} listValues - An array containing the selected values.\n   * @param {Boolean} commitChanges - If `true` the selection if finally committed the dropdown header text should reflect the new selection\n   * @param {Boolean} toggle -If `true` the dropdown should toggle it's current state\n   * @param {Boolean} notifyChanges -If `true` the dropdown will call onChange.\n   */\n  const handleSelection = (listValues, commitChanges, toggle, notifyChanges = true) => {\n    const selected = getSelected(listValues);\n    if (commitChanges) {\n      setInternalValues(listValues);\n      setSelectionLabel(getSelectionLabel(listValues, labels, placeholder, multiSelect));\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, 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 = (evt) => {\n    onCancel?.(evt);\n\n    handleToggle(evt, 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 = (evt) => {\n    onClickOutside?.(evt);\n    onCancel?.(evt);\n  };\n\n  const setFocusToContent = (containerRef) => {\n    const inputs = containerRef?.getElementsByTagName(\"input\");\n    if (inputs?.length > 0) {\n      inputs[0].focus();\n      return;\n    }\n    const listItems = containerRef != null ? [...containerRef.getElementsByTagName(\"li\")] : [];\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        noWrap\n        variant={isOpen || hasSelection ? \"normalText\" : \"placeholderText\"}\n        className={clsx(classes.placeholder, {\n          [classes.selectionDisabled]: disabled,\n        })}\n      >\n        {selectionLabel.selected}\n      </HvTypography>\n    ) : (\n      <HvTypography\n        component=\"div\"\n        noWrap\n        className={clsx(classes.placeholder, {\n          [classes.selectionDisabled]: disabled,\n        })}\n        variant=\"normalText\"\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) || (status === undefined && required));\n\n  const isStateInvalid = isInvalid(validationState);\n\n  let errorMessageId;\n  if (isStateInvalid) {\n    errorMessageId = canShowError ? setId(elementId, \"error\") : ariaErrorMessage;\n  }\n\n  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      status={validationState}\n      disabled={disabled}\n      required={required}\n      className={clsx(className, classes.root)}\n    >\n      {(hasLabel || hasDescription) && (\n        <div className={classes.labelContainer}>\n          {hasLabel && (\n            <HvLabel id={setId(elementId, \"label\")} label={label} className={classes.label} />\n          )}\n\n          {hasDescription && (\n            <HvInfoMessage id={setId(elementId, \"description\")} className={classes.description}>\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n      <HvBaseDropdown\n        id={setId(id, \"dropdown\")}\n        classes={{\n          root: classes.dropdown,\n          arrow: classes.arrow,\n          header: clsx(\n            classes.dropdownHeader,\n            isStateInvalid ? classes.dropdownHeaderInvalid : undefined\n          ),\n          headerOpen: classes.dropdownHeaderOpen,\n        }}\n        expanded={isOpen}\n        disabled={disabled}\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].join(\" \").trim() || undefined\n        }\n        aria-invalid={isStateInvalid ? true : undefined}\n        aria-errormessage={errorMessageId}\n        aria-describedby={\n          [description && setId(elementId, \"description\"), ariaDescribedBy].join(\" \").trim() ||\n          undefined\n        }\n        onFocus={onFocus}\n        onBlur={onBlur}\n        dropdownHeaderRef={dropdownHeaderRef}\n      >\n        <List\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-labelledby={hasLabel ? setId(elementId, \"label\") : undefined}\n          height={height}\n          virtualized={virtualized}\n        />\n      </HvBaseDropdown>\n      {canShowError && (\n        <HvWarningText id={setId(elementId, \"error\")} disableBorder className={classes.error}>\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n};\n\nHvDropdown.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n\n    /**\n     * Styles applied to the container of the labels elements.\n     */\n    labelContainer: PropTypes.string,\n    /**\n     * Styles applied to the label element.\n     */\n    label: PropTypes.string,\n    /**\n     * Styles applied to the icon information text.\n     */\n    description: PropTypes.string,\n\n    /**\n     * Styles applied to the error area.\n     */\n    error: PropTypes.string,\n\n    /**\n     * Styles applied to the dropdown.\n     */\n    dropdown: PropTypes.string,\n\n    /**\n     * Styles applied to the arrow\n     */\n    arrow: PropTypes.string,\n    /**\n     * Styles applied for truncating the list elements.\n     */\n    placeholder: PropTypes.string,\n    /**\n     * Styles applied when the selection is disabled.\n     */\n    selectionDisabled: PropTypes.string,\n    /**\n     * Styles applied to the list.\n     */\n    rootList: PropTypes.string,\n    /**\n     * Styles applied to the dropdown header.\n     */\n    dropdownHeader: PropTypes.string,\n    /**\n     * Styles applied to the dropdown is invalid.\n     */\n    dropdownHeaderInvalid: PropTypes.string,\n    /**\n     * Styles applied to the dropdown is opened.\n     */\n    dropdownHeaderOpen: PropTypes.string,\n    /**\n     * Styles applied to the dropdown list.\n     */\n    dropdownListContainer: PropTypes.string,\n  }).isRequired,\n\n  /**\n   * Id to be applied to the form element root node.\n   */\n  id: PropTypes.string,\n\n  /**\n   * The form element name.\n   */\n  name: PropTypes.string,\n\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: PropTypes.node,\n  /**\n   * @ignore\n   */\n  \"aria-label\": PropTypes.string,\n  /**\n   * @ignore\n   */\n  \"aria-labelledby\": PropTypes.string,\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description: PropTypes.node,\n  /**\n   * @ignore\n   */\n  \"aria-describedby\": PropTypes.string,\n\n  /**\n   * The placeholder value when nothing is selected.\n   */\n  placeholder: PropTypes.string,\n\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled: PropTypes.bool,\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required: PropTypes.bool,\n\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: PropTypes.oneOf([\"standBy\", \"valid\", \"invalid\"]),\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: PropTypes.node,\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\": PropTypes.string,\n\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange: PropTypes.func,\n\n  /**\n   * The list to be rendered by the dropdown.\n   */\n  values: PropTypes.arrayOf(\n    PropTypes.shape({\n      id: PropTypes.string,\n      label: PropTypes.node.isRequired,\n      searchValue: PropTypes.string,\n      value: PropTypes.any,\n      selected: PropTypes.bool,\n    })\n  ),\n  /**\n   * If `true` the dropdown is multiSelect, if `false` the dropdown is single select.\n   */\n  multiSelect: PropTypes.bool,\n  /**\n   * If `true` the dropdown is rendered with a search bar, if `false` there won't be a search bar.\n   */\n  showSearch: PropTypes.bool,\n  /**\n   * If `true` the dropdown starts opened if `false` it starts closed.\n   */\n  expanded: PropTypes.bool,\n  /**\n   * When uncontrolled, defines the initial expanded state.\n   */\n  defaultExpanded: PropTypes.bool,\n  /**\n   * If 'true' the dropdown will notify on the first render.\n   */\n  notifyChangesOnFirstRender: PropTypes.bool,\n  /**\n   * An object containing all the labels for the dropdown.\n   */\n  labels: PropTypes.shape({\n    /**\n     * Label for overwrite the default header behaviour.\n     */\n    select: PropTypes.string,\n    /**\n     * Label used for the All checkbox action.\n     */\n    selectAll: PropTypes.string,\n    /**\n     * Cancel button label.\n     */\n    cancelLabel: PropTypes.string,\n    /**\n     * Apply button label.\n     */\n    applyLabel: PropTypes.string,\n    /**\n     * The label used in the middle of the multiSelection count.\n     */\n    multiSelectionConjunction: PropTypes.string,\n  }),\n  /**\n   * If `true` the dropdown will show tooltips when user mouseenter text in list\n   */\n  hasTooltips: PropTypes.bool,\n  /**\n   * Disable the portal behavior.\n   * The children stay within it's parent DOM hierarchy.\n   */\n  disablePortal: PropTypes.bool,\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: PropTypes.bool,\n  /**\n   * If `true`, selection can be toggled when single selection.\n   */\n  singleSelectionToggle: PropTypes.bool,\n  /**\n   * Placement of the dropdown.\n   */\n  placement: PropTypes.oneOf([\"left\", \"right\"]),\n  /**\n   * An object containing props to be wired to the popper component.\n   */\n  popperProps: PropTypes.shape(),\n\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: PropTypes.func,\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: PropTypes.func,\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: PropTypes.func,\n\n  /**\n   * @ignore\n   */\n  onFocus: PropTypes.func,\n  /**\n   * @ignore\n   */\n  onBlur: PropTypes.func,\n\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: PropTypes.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: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvDropdown\" })(HvDropdown);\n"],"file":"Dropdown.js"}