@hitachivantara/uikit-react-core 5.39.0 → 5.39.2

package/dist/esm/components/DropDownMenu/DropDownMenu.js

@@ -32,10 +32,7 @@ const HvDropDownMenu = (props) => {
     category = "secondaryGhost",
     ...others
   } = useDefaultProps("HvDropDownMenu", props);
-  const {
-    classes,
-    cx
-  } = useClasses(classesProp);
+  const { classes, cx } = useClasses(classesProp);
   const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));
   const id = useUniqueId(idProp, "dropdown-menu");
   const focusNodes = getPrevNextFocus(setId(id, "icon-button"));
@@ -64,21 +61,67 @@ const HvDropDownMenu = (props) => {
       position: "relative"
     }
   };
-  return /* @__PURE__ */ jsx(HvBaseDropdown, { id, className: cx(classes.container, className), classes: {
-    root: classes.root,
-    container: classes.baseContainer
-  }, expanded: open && !disabled, component: /* @__PURE__ */ jsx(HvButton, { icon: true, variant: category, id: setId(id, "icon-button"), className: cx(classes.icon, {
-    [classes.iconSelected]: open
-  }), "aria-expanded": open, disabled, "aria-label": "Dropdown menu", "aria-haspopup": "menu", children: icon || /* @__PURE__ */ jsx(MoreOptionsVertical, { "aria-hidden": true, color: disabled ? "secondary_60" : void 0 }) }), placement, variableWidth: true, disablePortal, onToggle: (e, s) => {
-    setOpen(s);
-    onToggle?.(e, s);
-  }, disabled, onContainerCreation: setFocusToContent, popperProps: popperStyle, ...others, children: /* @__PURE__ */ jsx(HvPanel, { className: classes.menuListRoot, children: /* @__PURE__ */ jsx(HvList, { id: listId, values: dataList, selectable: false, condensed, onClick: (event, item) => {
-    if (!keepOpened)
-      handleClose(event);
-    onClick?.(event, item);
-  }, onKeyDown: handleKeyDown, classes: {
-    root: classes.menuList
-  } }) }) });
+  return /* @__PURE__ */ jsx(
+    HvBaseDropdown,
+    {
+      id,
+      className: cx(classes.container, className),
+      classes: {
+        root: classes.root,
+        container: classes.baseContainer
+      },
+      expanded: open && !disabled,
+      component: /* @__PURE__ */ jsx(
+        HvButton,
+        {
+          icon: true,
+          variant: category,
+          id: setId(id, "icon-button"),
+          className: cx(classes.icon, { [classes.iconSelected]: open }),
+          "aria-expanded": open,
+          disabled,
+          "aria-label": "Dropdown menu",
+          "aria-haspopup": "menu",
+          children: icon || /* @__PURE__ */ jsx(
+            MoreOptionsVertical,
+            {
+              "aria-hidden": true,
+              color: disabled ? "secondary_60" : void 0
+            }
+          )
+        }
+      ),
+      placement,
+      variableWidth: true,
+      disablePortal,
+      onToggle: (e, s) => {
+        setOpen(s);
+        onToggle?.(e, s);
+      },
+      disabled,
+      onContainerCreation: setFocusToContent,
+      popperProps: popperStyle,
+      ...others,
+      children: /* @__PURE__ */ jsx(HvPanel, { className: classes.menuListRoot, children: /* @__PURE__ */ jsx(
+        HvList,
+        {
+          id: listId,
+          values: dataList,
+          selectable: false,
+          condensed,
+          onClick: (event, item) => {
+            if (!keepOpened)
+              handleClose(event);
+            onClick?.(event, item);
+          },
+          onKeyDown: handleKeyDown,
+          classes: {
+            root: classes.menuList
+          }
+        }
+      ) })
+    }
+  );
 };
 export {
   HvDropDownMenu,

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

@@ -1 +1 @@
-{"version":3,"file":"DropDownMenu.js","sources":["../../../../src/components/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { ChangeEvent, useMemo } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { getPrevNextFocus } from \"@core/utils/focusableElementFinder\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport {\n  HvBaseDropdown,\n  HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport { HvButton, HvButtonVariant } from \"@core/components/Button\";\nimport { HvList, HvListProps, HvListValue } from \"@core/components/List\";\nimport { HvPanel } from \"@core/components/Panel\";\n\nimport { staticClasses, useClasses } from \"./DropDownMenu.styles\";\n\nexport { staticClasses as dropDownMenuClasses };\n\nexport type HvDropDownMenuClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropDownMenuProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  /** Icon. */\n  icon?: React.ReactElement;\n  /**\n   * A list containing the elements to be rendered.\n   *\n   * - label: The label of the element to be rendered.\n   * - selected: The selection state of the element.\n   * - disabled: The disabled state of the element.\n   * - icon: The icon node to be rendered on the left.\n   * - showNavIcon: If true renders the navigation icon on the right.\n   */\n  dataList: HvListValue[];\n  /** Placement of the dropdown. */\n  placement?: \"left\" | \"right\";\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Function executed on toggle of the dropdown. Should receive the open status. */\n  onToggle?: (event: Event, open: boolean) => void;\n  /** Function executed in each onClick. Should received the clicked element. */\n  onClick?: (\n    event: React.ChangeEvent<HTMLLIElement>,\n    value: HvListValue\n  ) => void;\n  /** Keep the Dropdown Menu opened after clicking one option */\n  keepOpened?: boolean;\n  /** Defines if the component is disabled. */\n  disabled?: boolean;\n  /** If true it should be displayed open. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /** The variant to be used in the header. */\n  category?: HvButtonVariant;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDropDownMenuClasses;\n}\n\n/**\n * A drop-down menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.\n */\nexport const HvDropDownMenu = (props: HvDropDownMenuProps) => {\n  const {\n    id: idProp,\n    classes: classesProp,\n    className,\n    icon,\n    placement = \"right\",\n    dataList,\n    disablePortal = false,\n    onToggle,\n    onClick,\n    keepOpened = true,\n    disabled = false,\n    expanded,\n    defaultExpanded = false,\n    category = \"secondaryGhost\",\n    ...others\n  } = useDefaultProps(\"HvDropDownMenu\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const id = useUniqueId(idProp, \"dropdown-menu\");\n  const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n\n  const listId = setId(id, \"list\");\n\n  const handleClose = (event: ChangeEvent) => {\n    // this will only run if uncontrolled\n    setOpen(false);\n    onToggle?.(event as any, false);\n  };\n\n  // If the ESCAPE key is pressed inside the list, the close handler must be called.\n  const handleKeyDown: HvListProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Tab\")) {\n      const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n      if (node) setTimeout(() => node.focus(), 0);\n      handleClose(event as any);\n    }\n    event.preventDefault();\n  };\n\n  const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n    containerRef\n  ) => {\n    containerRef?.getElementsByTagName(\"li\")[0]?.focus();\n  };\n\n  const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n  const popperStyle: HvBaseDropdownProps[\"popperProps\"] = {\n    style: {\n      zIndex: theme.zIndices.tooltip,\n      width: \"auto\",\n      position: \"relative\",\n    },\n  };\n\n  return (\n    <HvBaseDropdown\n      id={id}\n      className={cx(classes.container, className)}\n      classes={{\n        root: classes.root,\n        container: classes.baseContainer,\n      }}\n      expanded={open && !disabled}\n      component={\n        <HvButton\n          icon\n          variant={category}\n          id={setId(id, \"icon-button\")}\n          className={cx(classes.icon, { [classes.iconSelected]: open })}\n          aria-expanded={open}\n          disabled={disabled}\n          aria-label=\"Dropdown menu\"\n          aria-haspopup=\"menu\"\n        >\n          {icon || (\n            <MoreOptionsVertical\n              aria-hidden\n              color={disabled ? \"secondary_60\" : undefined}\n            />\n          )}\n        </HvButton>\n      }\n      placement={placement}\n      variableWidth\n      disablePortal={disablePortal}\n      onToggle={(e, s) => {\n        // this will only run if uncontrolled\n        setOpen(s);\n        onToggle?.(e, s);\n      }}\n      disabled={disabled}\n      onContainerCreation={setFocusToContent}\n      popperProps={popperStyle}\n      {...others}\n    >\n      <HvPanel className={classes.menuListRoot}>\n        <HvList\n          id={listId}\n          values={dataList}\n          selectable={false}\n          condensed={condensed}\n          onClick={(event, item) => {\n            if (!keepOpened) handleClose(event);\n            onClick?.(event, item);\n          }}\n          onKeyDown={handleKeyDown}\n          classes={{\n            root: classes.menuList,\n          }}\n        />\n      </HvPanel>\n    </HvBaseDropdown>\n  );\n};\n"],"names":["HvDropDownMenu","props","id","idProp","classes","classesProp","className","icon","placement","dataList","disablePortal","onToggle","onClick","keepOpened","disabled","expanded","defaultExpanded","category","others","useDefaultProps","cx","useClasses","open","setOpen","useControlled","Boolean","useUniqueId","focusNodes","getPrevNextFocus","setId","listId","handleClose","event","handleKeyDown","isKey","node","shiftKey","prevFocus","nextFocus","setTimeout","focus","preventDefault","setFocusToContent","containerRef","getElementsByTagName","condensed","useMemo","every","el","popperStyle","style","zIndex","theme","zIndices","tooltip","width","position","container","root","baseContainer","iconSelected","undefined","e","s","menuListRoot","item","menuList"],"mappings":"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"}
+{"version":3,"file":"DropDownMenu.js","sources":["../../../../src/components/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { ChangeEvent, useMemo } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { getPrevNextFocus } from \"@core/utils/focusableElementFinder\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport {\n  HvBaseDropdown,\n  HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport { HvButton, HvButtonVariant } from \"@core/components/Button\";\nimport { HvList, HvListProps, HvListValue } from \"@core/components/List\";\nimport { HvPanel } from \"@core/components/Panel\";\n\nimport { staticClasses, useClasses } from \"./DropDownMenu.styles\";\n\nexport { staticClasses as dropDownMenuClasses };\n\nexport type HvDropDownMenuClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropDownMenuProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  /** Icon. */\n  icon?: React.ReactElement;\n  /**\n   * A list containing the elements to be rendered.\n   *\n   * - label: The label of the element to be rendered.\n   * - selected: The selection state of the element.\n   * - disabled: The disabled state of the element.\n   * - icon: The icon node to be rendered on the left.\n   * - showNavIcon: If true renders the navigation icon on the right.\n   */\n  dataList: HvListValue[];\n  /** Placement of the dropdown. */\n  placement?: \"left\" | \"right\";\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Function executed on toggle of the dropdown. Should receive the open status. */\n  onToggle?: (event: Event, open: boolean) => void;\n  /** Function executed in each onClick. Should received the clicked element. */\n  onClick?: (\n    event: React.ChangeEvent<HTMLLIElement>,\n    value: HvListValue\n  ) => void;\n  /** Keep the Dropdown Menu opened after clicking one option */\n  keepOpened?: boolean;\n  /** Defines if the component is disabled. */\n  disabled?: boolean;\n  /** If true it should be displayed open. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /** The variant to be used in the header. */\n  category?: HvButtonVariant;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDropDownMenuClasses;\n}\n\n/**\n * A drop-down menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.\n */\nexport const HvDropDownMenu = (props: HvDropDownMenuProps) => {\n  const {\n    id: idProp,\n    classes: classesProp,\n    className,\n    icon,\n    placement = \"right\",\n    dataList,\n    disablePortal = false,\n    onToggle,\n    onClick,\n    keepOpened = true,\n    disabled = false,\n    expanded,\n    defaultExpanded = false,\n    category = \"secondaryGhost\",\n    ...others\n  } = useDefaultProps(\"HvDropDownMenu\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const id = useUniqueId(idProp, \"dropdown-menu\");\n  const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n\n  const listId = setId(id, \"list\");\n\n  const handleClose = (event: ChangeEvent) => {\n    // this will only run if uncontrolled\n    setOpen(false);\n    onToggle?.(event as any, false);\n  };\n\n  // If the ESCAPE key is pressed inside the list, the close handler must be called.\n  const handleKeyDown: HvListProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Tab\")) {\n      const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n      if (node) setTimeout(() => node.focus(), 0);\n      handleClose(event as any);\n    }\n    event.preventDefault();\n  };\n\n  const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n    containerRef\n  ) => {\n    containerRef?.getElementsByTagName(\"li\")[0]?.focus();\n  };\n\n  const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n  const popperStyle: HvBaseDropdownProps[\"popperProps\"] = {\n    style: {\n      zIndex: theme.zIndices.tooltip,\n      width: \"auto\",\n      position: \"relative\",\n    },\n  };\n\n  return (\n    <HvBaseDropdown\n      id={id}\n      className={cx(classes.container, className)}\n      classes={{\n        root: classes.root,\n        container: classes.baseContainer,\n      }}\n      expanded={open && !disabled}\n      component={\n        <HvButton\n          icon\n          variant={category}\n          id={setId(id, \"icon-button\")}\n          className={cx(classes.icon, { [classes.iconSelected]: open })}\n          aria-expanded={open}\n          disabled={disabled}\n          aria-label=\"Dropdown menu\"\n          aria-haspopup=\"menu\"\n        >\n          {icon || (\n            <MoreOptionsVertical\n              aria-hidden\n              color={disabled ? \"secondary_60\" : undefined}\n            />\n          )}\n        </HvButton>\n      }\n      placement={placement}\n      variableWidth\n      disablePortal={disablePortal}\n      onToggle={(e, s) => {\n        // this will only run if uncontrolled\n        setOpen(s);\n        onToggle?.(e, s);\n      }}\n      disabled={disabled}\n      onContainerCreation={setFocusToContent}\n      popperProps={popperStyle}\n      {...others}\n    >\n      <HvPanel className={classes.menuListRoot}>\n        <HvList\n          id={listId}\n          values={dataList}\n          selectable={false}\n          condensed={condensed}\n          onClick={(event, item) => {\n            if (!keepOpened) handleClose(event);\n            onClick?.(event, item);\n          }}\n          onKeyDown={handleKeyDown}\n          classes={{\n            root: classes.menuList,\n          }}\n        />\n      </HvPanel>\n    </HvBaseDropdown>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -1,10 +1,7 @@
 import { theme } from "@hitachivantara/uikit-styles";
 import { outlineStyles } from "../../utils/focusUtils.js";
 import { createClasses } from "../../utils/classes.js";
-const {
-  staticClasses,
-  useClasses
-} = createClasses("HvDropDownMenu", {
+const { staticClasses, useClasses } = createClasses("HvDropDownMenu", {
   /** Styles applied to the container. */
   container: {
     width: 32

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

@@ -1 +1 @@
-{"version":3,"file":"DropDownMenu.styles.js","sources":["../../../../src/components/DropDownMenu/DropDownMenu.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropDownMenu\", {\n  /** Styles applied to the container. */\n  container: {\n    width: 32,\n  },\n  /** Styles applied to the BaseDropdown container. */\n  baseContainer: {},\n  /** Styles applied to the root. */\n  root: {\n    display: \"inline-block\",\n    width: \"auto\",\n    \"&:focus-visible $icon\": {\n      ...outlineStyles,\n    },\n  },\n  /** Styles applied to the icon. */\n  icon: {\n    position: \"relative\",\n    width: 32,\n    height: 32,\n    boxSizing: \"border-box\",\n    padding: 0,\n    borderRadius: theme.radii.base,\n    border: \"1px solid transparent\",\n  },\n  /** Styles applied to the icon when selected. */\n  iconSelected: {\n    backgroundColor: theme.colors.atmo1,\n    boxShadow: theme.colors.shadow,\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.atmo1,\n    },\n\n    \"& svg .color0\": {\n      fill: theme.colors.secondary,\n    },\n\n    borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,\n    border: `1px solid ${theme.colors.secondary}`,\n  },\n  /** Styles applied to the list root. */\n  menuListRoot: {},\n  /** Styles applied to the list. */\n  menuList: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","container","width","baseContainer","root","display","outlineStyles","icon","position","height","boxSizing","padding","borderRadius","theme","radii","base","border","iconSelected","backgroundColor","colors","atmo1","boxShadow","shadow","fill","secondary","menuListRoot","menuList"],"mappings":";;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,kBAAkB;AAAA;AAAA,EAE3EC,WAAW;AAAA,IACTC,OAAO;AAAA,EACT;AAAA;AAAA,EAEAC,eAAe,CAAC;AAAA;AAAA,EAEhBC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTH,OAAO;AAAA,IACP,yBAAyB;AAAA,MACvB,GAAGI;AAAAA,IACL;AAAA,EACF;AAAA;AAAA,EAEAC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVN,OAAO;AAAA,IACPO,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,SAAS;AAAA,IACTC,cAAcC,MAAMC,MAAMC;AAAAA,IAC1BC,QAAQ;AAAA,EACV;AAAA;AAAA,EAEAC,cAAc;AAAA,IACZC,iBAAiBL,MAAMM,OAAOC;AAAAA,IAC9BC,WAAWR,MAAMM,OAAOG;AAAAA,IAExB,WAAW;AAAA,MACTJ,iBAAiBL,MAAMM,OAAOC;AAAAA,IAChC;AAAA,IAEA,iBAAiB;AAAA,MACfG,MAAMV,MAAMM,OAAOK;AAAAA,IACrB;AAAA,IAEAZ,cAAe,GAAEC,MAAMC,MAAMC,IAAK,IAAGF,MAAMC,MAAMC,IAAK;AAAA,IACtDC,QAAS,aAAYH,MAAMM,OAAOK,SAAU;AAAA,EAC9C;AAAA;AAAA,EAEAC,cAAc,CAAC;AAAA;AAAA,EAEfC,UAAU,CAAC;AACb,CAAC;"}
+{"version":3,"file":"DropDownMenu.styles.js","sources":["../../../../src/components/DropDownMenu/DropDownMenu.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropDownMenu\", {\n  /** Styles applied to the container. */\n  container: {\n    width: 32,\n  },\n  /** Styles applied to the BaseDropdown container. */\n  baseContainer: {},\n  /** Styles applied to the root. */\n  root: {\n    display: \"inline-block\",\n    width: \"auto\",\n    \"&:focus-visible $icon\": {\n      ...outlineStyles,\n    },\n  },\n  /** Styles applied to the icon. */\n  icon: {\n    position: \"relative\",\n    width: 32,\n    height: 32,\n    boxSizing: \"border-box\",\n    padding: 0,\n    borderRadius: theme.radii.base,\n    border: \"1px solid transparent\",\n  },\n  /** Styles applied to the icon when selected. */\n  iconSelected: {\n    backgroundColor: theme.colors.atmo1,\n    boxShadow: theme.colors.shadow,\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.atmo1,\n    },\n\n    \"& svg .color0\": {\n      fill: theme.colors.secondary,\n    },\n\n    borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,\n    border: `1px solid ${theme.colors.secondary}`,\n  },\n  /** Styles applied to the list root. */\n  menuListRoot: {},\n  /** Styles applied to the list. */\n  menuList: {},\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA;AAAA,EAE3E,WAAW;AAAA,IACT,OAAO;AAAA,EACT;AAAA;AAAA,EAEA,eAAe,CAAC;AAAA;AAAA,EAEhB,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,yBAAyB;AAAA,MACvB,GAAG;AAAA,IACL;AAAA,EACF;AAAA;AAAA,EAEA,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,SAAS;AAAA,IACT,cAAc,MAAM,MAAM;AAAA,IAC1B,QAAQ;AAAA,EACV;AAAA;AAAA,EAEA,cAAc;AAAA,IACZ,iBAAiB,MAAM,OAAO;AAAA,IAC9B,WAAW,MAAM,OAAO;AAAA,IAExB,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IAEA,iBAAiB;AAAA,MACf,MAAM,MAAM,OAAO;AAAA,IACrB;AAAA,IAEA,cAAc,GAAG,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,IACrD,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,EAC7C;AAAA;AAAA,EAEA,cAAc,CAAC;AAAA;AAAA,EAEf,UAAU,CAAC;AACb,CAAC;"}

package/dist/esm/components/Dropdown/Dropdown.js

@@ -25,183 +25,299 @@ const DEFAULT_LABELS = {
   searchPlaceholder: "Search",
   multiSelectionConjunction: "/"
 };
-const HvDropdown = 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("HvDropdown", props);
-  const {
-    classes,
-    cx
-  } = useClasses(classesProp);
-  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(labels, placeholder, multiSelect, values));
-  const [internalValues, setInternalValues] = useState(values);
-  const internalValuesRef = useRef(values);
-  useEffect(() => {
-    setInternalValues(values);
-    internalValuesRef.current = values;
-  }, [values]);
-  useEffect(() => {
-    setSelectionLabel(getSelectionLabel(labels, placeholder, multiSelect, values));
-  }, [labels, multiSelect, placeholder, values]);
-  const dropdownHeaderRef = useRef();
-  const {
-    ref: refProp,
-    dropdownHeaderRef: dropdownHeaderRefProp,
-    ...otherBaseDropdownProps
-  } = baseDropdownProps;
-  const headerForkedRef = useForkRef(dropdownHeaderRefProp, dropdownHeaderRef);
-  const dropdownForkedRef = useForkRef(ref, refProp);
-  const handleToggle = (event, open) => {
-    onToggle?.(event, open);
-    setIsOpen(open);
-    if (!open) {
-      setValidationState(() => {
-        if (required) {
-          const hasSelection = getSelected(internalValuesRef.current).length > 0;
-          if (!hasSelection) {
+const HvDropdown = 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("HvDropdown", props);
+    const { classes, cx } = useClasses(classesProp);
+    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(labels, placeholder, multiSelect, values)
+    );
+    const [internalValues, setInternalValues] = useState(values);
+    const internalValuesRef = useRef(values);
+    useEffect(() => {
+      setInternalValues(values);
+      internalValuesRef.current = values;
+    }, [values]);
+    useEffect(() => {
+      setSelectionLabel(
+        getSelectionLabel(labels, placeholder, multiSelect, values)
+      );
+    }, [labels, multiSelect, placeholder, values]);
+    const dropdownHeaderRef = useRef();
+    const {
+      ref: refProp,
+      dropdownHeaderRef: dropdownHeaderRefProp,
+      ...otherBaseDropdownProps
+    } = baseDropdownProps;
+    const headerForkedRef = useForkRef(
+      dropdownHeaderRefProp,
+      dropdownHeaderRef
+    );
+    const dropdownForkedRef = useForkRef(ref, refProp);
+    const handleToggle = (event, open) => {
+      onToggle?.(event, open);
+      setIsOpen(open);
+      if (!open) {
+        setValidationState(() => {
+          if (required) {
+            const hasSelection = getSelected(internalValuesRef.current).length > 0;
+            if (!hasSelection) {
+              return "invalid";
+            }
+          }
+          return "valid";
+        });
+      }
+    };
+    const handleSelection = (listValues, commitChanges, toggle, notifyChanges = true) => {
+      const selected = getSelected(listValues);
+      if (commitChanges) {
+        setInternalValues(listValues);
+        internalValuesRef.current = listValues;
+        setSelectionLabel(
+          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 = getSelected(listValues);
-    if (commitChanges) {
-      setInternalValues(listValues);
-      internalValuesRef.current = listValues;
-      setSelectionLabel(getSelectionLabel(labels, placeholder, multiSelect, listValues));
-      setValidationState(() => {
-        if (required && selected.length === 0) {
-          return "invalid";
+    };
+    const buildHeaderLabel = () => {
+      const hasSelection = getSelected(internalValues).length > 0;
+      return labels?.select || !multiSelect ? /* @__PURE__ */ jsx(
+        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__ */ jsxs(
+        HvTypography,
+        {
+          component: "div",
+          className: cx(classes.placeholder, {
+            [classes.selectionDisabled]: disabled
+          }),
+          variant: "body",
+          children: [
+            /* @__PURE__ */ 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 = isInvalid(validationState);
+    let errorMessageId;
+    if (isStateInvalid) {
+      errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;
     }
-    const listItems = containerRef != null ? [...containerRef.getElementsByTagName("li")] : [];
-    listItems.every((listItem) => {
-      if (listItem.tabIndex >= 0) {
-        listItem.focus();
-        return false;
+    return /* @__PURE__ */ jsxs(
+      HvFormElement,
+      {
+        id,
+        name,
+        status: validationState,
+        disabled,
+        readOnly,
+        required,
+        className: cx(
+          classes.root,
+          {
+            [classes.disabled]: disabled
+          },
+          className
+        ),
+        ...others,
+        children: [
+          (hasLabel || hasDescription) && /* @__PURE__ */ jsxs("div", { className: classes.labelContainer, children: [
+            hasLabel && /* @__PURE__ */ jsx(
+              HvLabel,
+              {
+                id: setId(elementId, "label"),
+                label,
+                className: classes.label
+              }
+            ),
+            hasDescription && /* @__PURE__ */ jsx(
+              HvInfoMessage,
+              {
+                id: setId(elementId, "description"),
+                className: classes.description,
+                children: description
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            HvBaseDropdown,
+            {
+              ref: dropdownForkedRef,
+              id: 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(elementId, "label"), ariaLabelledBy].join(" ").trim() || void 0,
+              "aria-invalid": isStateInvalid ? true : void 0,
+              "aria-errormessage": errorMessageId,
+              "aria-describedby": [description && setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0,
+              onFocus,
+              onBlur,
+              dropdownHeaderRef: headerForkedRef,
+              ...otherBaseDropdownProps,
+              children: /* @__PURE__ */ jsx(
+                HvDropdownList,
+                {
+                  id: 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(elementId, "label") : void 0,
+                  height,
+                  maxHeight,
+                  virtualized,
+                  ...listProps
+                }
+              )
+            }
+          ),
+          canShowError && /* @__PURE__ */ jsx(
+            HvWarningText,
+            {
+              id: setId(elementId, "error"),
+              disableBorder: true,
+              className: classes.error,
+              children: validationMessage
+            }
+          )
+        ]
       }
-      return true;
-    });
-  };
-  const buildHeaderLabel = () => {
-    const hasSelection = getSelected(internalValues).length > 0;
-    return labels?.select || !multiSelect ? /* @__PURE__ */ jsx(HvTypography, { component: "div", variant: "body", className: cx(classes.placeholder, {
-      [classes.selectionDisabled]: disabled,
-      [classes.placeholderClosed]: !(isOpen || hasSelection)
-    }), children: selectionLabel.selected }) : /* @__PURE__ */ jsxs(HvTypography, { component: "div", className: cx(classes.placeholder, {
-      [classes.selectionDisabled]: disabled
-    }), variant: "body", children: [
-      /* @__PURE__ */ 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 = isInvalid(validationState);
-  let errorMessageId;
-  if (isStateInvalid) {
-    errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;
+    );
   }
-  return /* @__PURE__ */ jsxs(HvFormElement, { id, name, status: validationState, disabled, readOnly, required, className: cx(classes.root, {
-    [classes.disabled]: disabled
-  }, className), ...others, children: [
-    (hasLabel || hasDescription) && /* @__PURE__ */ jsxs("div", { className: classes.labelContainer, children: [
-      hasLabel && /* @__PURE__ */ jsx(HvLabel, { id: setId(elementId, "label"), label, className: classes.label }),
-      hasDescription && /* @__PURE__ */ jsx(HvInfoMessage, { id: setId(elementId, "description"), className: classes.description, children: description })
-    ] }),
-    /* @__PURE__ */ jsx(HvBaseDropdown, { ref: dropdownForkedRef, id: 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(elementId, "label"), ariaLabelledBy].join(" ").trim() || void 0, "aria-invalid": isStateInvalid ? true : void 0, "aria-errormessage": errorMessageId, "aria-describedby": [description && setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0, onFocus, onBlur, dropdownHeaderRef: headerForkedRef, ...otherBaseDropdownProps, children: /* @__PURE__ */ jsx(HvDropdownList, { id: 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(elementId, "label") : void 0, height, maxHeight, virtualized, ...listProps }) }),
-    canShowError && /* @__PURE__ */ jsx(HvWarningText, { id: setId(elementId, "error"), disableBorder: true, className: classes.error, children: validationMessage })
-  ] });
-});
+);
 export {
   HvDropdown,
   staticClasses as dropdownClasses