@hitachivantara/uikit-react-core 5.39.0 → 5.39.2

package/dist/cjs/components/Drawer/Drawer.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.styles.cjs","sources":["../../../../src/components/Drawer/Drawer.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDrawer\", {\n  root: {},\n  paper: {\n    backgroundColor: theme.colors.atmo1,\n    padding: 0,\n    overflow: \"auto\",\n    boxShadow: theme.colors.shadow,\n  },\n  background: {},\n  closeButton: {\n    position: \"absolute\",\n    top: theme.spacing(\"sm\"),\n    right: theme.spacing(\"sm\"),\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","paper","backgroundColor","theme","colors","atmo1","padding","overflow","boxShadow","shadow","background","closeButton","position","top","spacing","right"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,YAAY;AAAA,EACrEC,MAAM,CAAC;AAAA,EACPC,OAAO;AAAA,IACLC,iBAAiBC,YAAAA,MAAMC,OAAOC;AAAAA,IAC9BC,SAAS;AAAA,IACTC,UAAU;AAAA,IACVC,WAAWL,YAAAA,MAAMC,OAAOK;AAAAA,EAC1B;AAAA,EACAC,YAAY,CAAC;AAAA,EACbC,aAAa;AAAA,IACXC,UAAU;AAAA,IACVC,KAAKV,YAAAA,MAAMW,QAAQ,IAAI;AAAA,IACvBC,OAAOZ,YAAAA,MAAMW,QAAQ,IAAI;AAAA,EAC3B;AACF,CAAC;;;"}
+{"version":3,"file":"Drawer.styles.cjs","sources":["../../../../src/components/Drawer/Drawer.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDrawer\", {\n  root: {},\n  paper: {\n    backgroundColor: theme.colors.atmo1,\n    padding: 0,\n    overflow: \"auto\",\n    boxShadow: theme.colors.shadow,\n  },\n  background: {\n    background: theme.alpha(\"atmo4\", 0.8),\n  },\n  closeButton: {\n    position: \"absolute\",\n    top: theme.spacing(\"sm\"),\n    right: theme.spacing(\"sm\"),\n  },\n});\n"],"names":["createClasses","theme"],"mappings":";;;;AAIO,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,YAAY;AAAA,EACrE,MAAM,CAAC;AAAA,EACP,OAAO;AAAA,IACL,iBAAiBC,YAAAA,MAAM,OAAO;AAAA,IAC9B,SAAS;AAAA,IACT,UAAU;AAAA,IACV,WAAWA,YAAAA,MAAM,OAAO;AAAA,EAC1B;AAAA,EACA,YAAY;AAAA,IACV,YAAYA,YAAA,MAAM,MAAM,SAAS,GAAG;AAAA,EACtC;AAAA,EACA,aAAa;AAAA,IACX,UAAU;AAAA,IACV,KAAKA,YAAAA,MAAM,QAAQ,IAAI;AAAA,IACvB,OAAOA,YAAAA,MAAM,QAAQ,IAAI;AAAA,EAC3B;AACF,CAAC;;;"}

package/dist/cjs/components/DropDownMenu/DropDownMenu.cjs

@@ -33,10 +33,7 @@ const HvDropDownMenu = (props) => {
     category = "secondaryGhost",
     ...others
   } = useDefaultProps.useDefaultProps("HvDropDownMenu", props);
-  const {
-    classes,
-    cx
-  } = DropDownMenu_styles.useClasses(classesProp);
+  const { classes, cx } = DropDownMenu_styles.useClasses(classesProp);
   const [open, setOpen] = useControlled.useControlled(expanded, Boolean(defaultExpanded));
   const id = useUniqueId.useUniqueId(idProp, "dropdown-menu");
   const focusNodes = focusableElementFinder.getPrevNextFocus(setId.setId(id, "icon-button"));
@@ -65,21 +62,67 @@ const HvDropDownMenu = (props) => {
       position: "relative"
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(BaseDropdown.HvBaseDropdown, { id, className: cx(classes.container, className), classes: {
-    root: classes.root,
-    container: classes.baseContainer
-  }, expanded: open && !disabled, component: /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { icon: true, variant: category, id: setId.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__ */ jsxRuntime.jsx(uikitReactIcons.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__ */ jsxRuntime.jsx(Panel.HvPanel, { className: classes.menuListRoot, children: /* @__PURE__ */ jsxRuntime.jsx(List.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__ */ jsxRuntime.jsx(
+    BaseDropdown.HvBaseDropdown,
+    {
+      id,
+      className: cx(classes.container, className),
+      classes: {
+        root: classes.root,
+        container: classes.baseContainer
+      },
+      expanded: open && !disabled,
+      component: /* @__PURE__ */ jsxRuntime.jsx(
+        Button.HvButton,
+        {
+          icon: true,
+          variant: category,
+          id: setId.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__ */ jsxRuntime.jsx(
+            uikitReactIcons.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__ */ jsxRuntime.jsx(Panel.HvPanel, { className: classes.menuListRoot, children: /* @__PURE__ */ jsxRuntime.jsx(
+        List.HvList,
+        {
+          id: listId,
+          values: dataList,
+          selectable: false,
+          condensed,
+          onClick: (event, item) => {
+            if (!keepOpened)
+              handleClose(event);
+            onClick?.(event, item);
+          },
+          onKeyDown: handleKeyDown,
+          classes: {
+            root: classes.menuList
+          }
+        }
+      ) })
+    }
+  );
 };
 exports.dropDownMenuClasses = DropDownMenu_styles.staticClasses;
 exports.HvDropDownMenu = HvDropDownMenu;

package/dist/cjs/components/DropDownMenu/DropDownMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropDownMenu.cjs","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","jsx","HvBaseDropdown","container","root","baseContainer","HvButton","iconSelected","MoreOptionsVertical","undefined","e","s","HvPanel","menuListRoot","HvList","item","menuList"],"mappings":";;;;;;;;;;;;;;;;;AAqEaA,MAAAA,iBAAiBA,CAACC,UAA+B;AACtD,QAAA;AAAA,IACJC,IAAIC;AAAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC,YAAY;AAAA,IACZC;AAAAA,IACAC,gBAAgB;AAAA,IAChBC;AAAAA,IACAC;AAAAA,IACAC,aAAa;AAAA,IACbC,WAAW;AAAA,IACXC;AAAAA,IACAC,kBAAkB;AAAA,IAClBC,WAAW;AAAA,IACX,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,kBAAkBlB,KAAK;AAErC,QAAA;AAAA,IAAEG;AAAAA,IAASgB;AAAAA,EAAAA,IAAOC,oBAAAA,WAAWhB,WAAW;AACxC,QAAA,CAACiB,MAAMC,OAAO,IAAIC,cAAAA,cAAcT,UAAUU,QAAQT,eAAe,CAAC;AAClEd,QAAAA,KAAKwB,YAAAA,YAAYvB,QAAQ,eAAe;AAC9C,QAAMwB,aAAaC,uBAAAA,iBAAiBC,MAAAA,MAAM3B,IAAI,aAAa,CAAC;AAEtD4B,QAAAA,SAASD,MAAAA,MAAM3B,IAAI,MAAM;AAEzB6B,QAAAA,cAAcA,CAACC,UAAuB;AAE1CT,YAAQ,KAAK;AACbZ,eAAWqB,OAAc,KAAK;AAAA,EAAA;AAIhC,QAAMC,gBAA2CD,CAAU,UAAA;AACrDE,QAAAA,cAAAA,MAAMF,OAAO,KAAK,GAAG;AACvB,YAAMG,OAAOH,MAAMI,WAAWT,WAAWU,YAAYV,WAAWW;AAC5DH,UAAAA;AAAMI,mBAAW,MAAMJ,KAAKK,MAAM,GAAG,CAAC;AAC1CT,kBAAYC,KAAa;AAAA,IAC3B;AACAA,UAAMS,eAAe;AAAA,EAAA;AAGvB,QAAMC,oBACJC,CACG,iBAAA;AACHA,kBAAcC,qBAAqB,IAAI,EAAE,CAAC,GAAGJ,MAAM;AAAA,EAAA;AAGrD,QAAMK,YAAYC,MAAAA,QAAQ,MAAMrC,SAASsC,MAAOC,CAAAA,OAAO,CAACA,GAAGzC,IAAI,GAAG,CAACE,QAAQ,CAAC;AAC5E,QAAMwC,cAAkD;AAAA,IACtDC,OAAO;AAAA,MACLC,QAAQC,YAAAA,MAAMC,SAASC;AAAAA,MACvBC,OAAO;AAAA,MACPC,UAAU;AAAA,IACZ;AAAA,EAAA;AAIA,SAAAC,+BAACC,aAAAA,kBACC,IACA,WAAWtC,GAAGhB,QAAQuD,WAAWrD,SAAS,GAC1C,SAAS;AAAA,IACPsD,MAAMxD,QAAQwD;AAAAA,IACdD,WAAWvD,QAAQyD;AAAAA,EAAAA,GAErB,UAAUvC,QAAQ,CAACR,UACnB,WACE2C,+BAACK,OAAAA,YACC,MAAI,MACJ,SAAS7C,UACT,IAAIY,YAAM3B,IAAI,aAAa,GAC3B,WAAWkB,GAAGhB,QAAQG,MAAM;AAAA,IAAE,CAACH,QAAQ2D,YAAY,GAAGzC;AAAAA,EAAM,CAAA,GAC5D,iBAAeA,MACf,UACA,cAAW,iBACX,iBAAc,QAEbf,UACC,QAAAkD,2BAAA,IAACO,gBACC,qBAAA,EAAA,eAAW,MACX,OAAOlD,WAAW,iBAAiBmD,OAEtC,CAAA,EACH,CAAA,GAEF,WACA,eAAa,MACb,eACA,UAAU,CAACC,GAAGC,MAAM;AAElB5C,YAAQ4C,CAAC;AACTxD,eAAWuD,GAAGC,CAAC;AAAA,EACjB,GACA,UACA,qBAAqBzB,mBACrB,aAAaO,aACT/B,GAAAA,QAEJ,UAACuC,2BAAAA,IAAAW,MAAAA,SAAA,EAAQ,WAAWhE,QAAQiE,cAC1B,UAACZ,2BAAAA,IAAAa,KAAAA,QAAA,EACC,IAAIxC,QACJ,QAAQrB,UACR,YAAY,OACZ,WACA,SAAS,CAACuB,OAAOuC,SAAS;AACxB,QAAI,CAAC1D;AAAYkB,kBAAYC,KAAK;AAClCpB,cAAUoB,OAAOuC,IAAI;AAAA,EAAA,GAEvB,WAAWtC,eACX,SAAS;AAAA,IACP2B,MAAMxD,QAAQoE;AAAAA,EAAAA,GACd,GAEN,EACF,CAAA;AAEJ;;;"}
+{"version":3,"file":"DropDownMenu.cjs","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":["useDefaultProps","useClasses","useControlled","useUniqueId","getPrevNextFocus","setId","isKey","useMemo","theme","jsx","HvBaseDropdown","HvButton","MoreOptionsVertical","HvPanel","HvList"],"mappings":";;;;;;;;;;;;;;;;;AAqEa,MAAA,iBAAiB,CAAC,UAA+B;AACtD,QAAA;AAAA,IACJ,IAAI;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,WAAW;AAAA,IACX;AAAA,IACA,kBAAkB;AAAA,IAClB,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,IACDA,gBAAgB,gBAAA,kBAAkB,KAAK;AAE3C,QAAM,EAAE,SAAS,GAAG,IAAIC,+BAAW,WAAW;AACxC,QAAA,CAAC,MAAM,OAAO,IAAIC,cAAAA,cAAc,UAAU,QAAQ,eAAe,CAAC;AAClE,QAAA,KAAKC,YAAAA,YAAY,QAAQ,eAAe;AAC9C,QAAM,aAAaC,uBAAAA,iBAAiBC,MAAAA,MAAM,IAAI,aAAa,CAAC;AAEtD,QAAA,SAASA,MAAAA,MAAM,IAAI,MAAM;AAEzB,QAAA,cAAc,CAAC,UAAuB;AAE1C,YAAQ,KAAK;AACb,eAAW,OAAc,KAAK;AAAA,EAAA;AAI1B,QAAA,gBAA0C,CAAC,UAAU;AACrD,QAAAC,cAAA,MAAM,OAAO,KAAK,GAAG;AACvB,YAAM,OAAO,MAAM,WAAW,WAAW,YAAY,WAAW;AAC5D,UAAA;AAAM,mBAAW,MAAM,KAAK,MAAM,GAAG,CAAC;AAC1C,kBAAY,KAAY;AAAA,IAC1B;AACA,UAAM,eAAe;AAAA,EAAA;AAGjB,QAAA,oBAAgE,CACpE,iBACG;AACH,kBAAc,qBAAqB,IAAI,EAAE,CAAC,GAAG,MAAM;AAAA,EAAA;AAGrD,QAAM,YAAYC,MAAAA,QAAQ,MAAM,SAAS,MAAM,CAAC,OAAO,CAAC,GAAG,IAAI,GAAG,CAAC,QAAQ,CAAC;AAC5E,QAAM,cAAkD;AAAA,IACtD,OAAO;AAAA,MACL,QAAQC,YAAAA,MAAM,SAAS;AAAA,MACvB,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,EAAA;AAIA,SAAAC,2BAAA;AAAA,IAACC,aAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,QAAQ,WAAW,SAAS;AAAA,MAC1C,SAAS;AAAA,QACP,MAAM,QAAQ;AAAA,QACd,WAAW,QAAQ;AAAA,MACrB;AAAA,MACA,UAAU,QAAQ,CAAC;AAAA,MACnB,WACED,2BAAA;AAAA,QAACE,OAAA;AAAA,QAAA;AAAA,UACC,MAAI;AAAA,UACJ,SAAS;AAAA,UACT,IAAIN,MAAAA,MAAM,IAAI,aAAa;AAAA,UAC3B,WAAW,GAAG,QAAQ,MAAM,EAAE,CAAC,QAAQ,YAAY,GAAG,MAAM;AAAA,UAC5D,iBAAe;AAAA,UACf;AAAA,UACA,cAAW;AAAA,UACX,iBAAc;AAAA,UAEb,UACC,QAAAI,2BAAA;AAAA,YAACG,gBAAA;AAAA,YAAA;AAAA,cACC,eAAW;AAAA,cACX,OAAO,WAAW,iBAAiB;AAAA,YAAA;AAAA,UACrC;AAAA,QAAA;AAAA,MAEJ;AAAA,MAEF;AAAA,MACA,eAAa;AAAA,MACb;AAAA,MACA,UAAU,CAAC,GAAG,MAAM;AAElB,gBAAQ,CAAC;AACT,mBAAW,GAAG,CAAC;AAAA,MACjB;AAAA,MACA;AAAA,MACA,qBAAqB;AAAA,MACrB,aAAa;AAAA,MACZ,GAAG;AAAA,MAEJ,UAACH,2BAAA,IAAAI,eAAA,EAAQ,WAAW,QAAQ,cAC1B,UAAAJ,2BAAA;AAAA,QAACK,KAAA;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,UACJ,QAAQ;AAAA,UACR,YAAY;AAAA,UACZ;AAAA,UACA,SAAS,CAAC,OAAO,SAAS;AACxB,gBAAI,CAAC;AAAY,0BAAY,KAAK;AAClC,sBAAU,OAAO,IAAI;AAAA,UACvB;AAAA,UACA,WAAW;AAAA,UACX,SAAS;AAAA,YACP,MAAM,QAAQ;AAAA,UAChB;AAAA,QAAA;AAAA,MAAA,GAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;;;"}

package/dist/cjs/components/DropDownMenu/DropDownMenu.styles.cjs

@@ -3,10 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const focusUtils = require("../../utils/focusUtils.cjs");
 const classes = require("../../utils/classes.cjs");
-const {
-  staticClasses,
-  useClasses
-} = classes.createClasses("HvDropDownMenu", {
+const { staticClasses, useClasses } = classes.createClasses("HvDropDownMenu", {
   /** Styles applied to the container. */
   container: {
     width: 32

package/dist/cjs/components/DropDownMenu/DropDownMenu.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropDownMenu.styles.cjs","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,QAAAA,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,WAAAA;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,YAAAA,MAAMC,MAAMC;AAAAA,IAC1BC,QAAQ;AAAA,EACV;AAAA;AAAA,EAEAC,cAAc;AAAA,IACZC,iBAAiBL,YAAAA,MAAMM,OAAOC;AAAAA,IAC9BC,WAAWR,YAAAA,MAAMM,OAAOG;AAAAA,IAExB,WAAW;AAAA,MACTJ,iBAAiBL,YAAAA,MAAMM,OAAOC;AAAAA,IAChC;AAAA,IAEA,iBAAiB;AAAA,MACfG,MAAMV,YAAAA,MAAMM,OAAOK;AAAAA,IACrB;AAAA,IAEAZ,cAAe,GAAEC,YAAMC,MAAAA,MAAMC,IAAK,IAAGF,kBAAMC,MAAMC,IAAK;AAAA,IACtDC,QAAS,aAAYH,YAAMM,MAAAA,OAAOK,SAAU;AAAA,EAC9C;AAAA;AAAA,EAEAC,cAAc,CAAC;AAAA;AAAA,EAEfC,UAAU,CAAC;AACb,CAAC;;;"}
+{"version":3,"file":"DropDownMenu.styles.cjs","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":["createClasses","outlineStyles","theme"],"mappings":";;;;;AAKO,MAAM,EAAE,eAAe,eAAeA,QAAAA,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,GAAGC,WAAA;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,cAAcC,YAAAA,MAAM,MAAM;AAAA,IAC1B,QAAQ;AAAA,EACV;AAAA;AAAA,EAEA,cAAc;AAAA,IACZ,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,IAC9B,WAAWA,YAAAA,MAAM,OAAO;AAAA,IAExB,WAAW;AAAA,MACT,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,IAChC;AAAA,IAEA,iBAAiB;AAAA,MACf,MAAMA,YAAAA,MAAM,OAAO;AAAA,IACrB;AAAA,IAEA,cAAc,GAAGA,YAAM,MAAA,MAAM,IAAI,IAAIA,kBAAM,MAAM,IAAI;AAAA,IACrD,QAAQ,aAAaA,YAAM,MAAA,OAAO,SAAS;AAAA,EAC7C;AAAA;AAAA,EAEA,cAAc,CAAC;AAAA;AAAA,EAEf,UAAU,CAAC;AACb,CAAC;;;"}