@hitachivantara/uikit-react-core 5.41.0 → 5.42.0

package/dist/esm/DotPagination/DotPagination.mjs

@@ -0,0 +1,69 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { cloneElement } from "react";
+import { OtherStep, CurrentStep } from "@hitachivantara/uikit-react-icons";
+import { useDefaultProps } from "../hooks/useDefaultProps.mjs";
+import { useClasses } from "./DotPagination.styles.mjs";
+import { staticClasses } from "./DotPagination.styles.mjs";
+import { HvRadioGroup } from "../RadioGroup/RadioGroup.mjs";
+import { HvRadio } from "../Radio/Radio.mjs";
+const getSelectorIcons = (radioIcon, radioCheckedIcon, classes) => {
+  return {
+    radio: cloneElement(radioIcon || /* @__PURE__ */ jsx(OtherStep, { width: 8, height: 8 }), {
+      className: classes?.icon
+    }),
+    radioChecked: cloneElement(
+      radioCheckedIcon || /* @__PURE__ */ jsx(CurrentStep, { width: 8, height: 8 }),
+      {
+        className: classes?.icon
+      }
+    )
+  };
+};
+const range = (n) => Array.from(Array(n), (_, i) => i);
+const HvDotPagination = (props) => {
+  const {
+    className,
+    classes: classesProp,
+    unselectedIcon,
+    selectedIcon,
+    pages = 1,
+    page = 0,
+    onPageChange,
+    getItemAriaLabel,
+    ...others
+  } = useDefaultProps("HvDotPagination", props);
+  const { classes, cx } = useClasses(classesProp);
+  const icons = getSelectorIcons(unselectedIcon, selectedIcon, classes);
+  return /* @__PURE__ */ jsx(
+    HvRadioGroup,
+    {
+      className: cx(classes.root, className),
+      classes: {
+        horizontal: classes.horizontal
+      },
+      orientation: "horizontal",
+      ...others,
+      children: range(pages).map((i) => /* @__PURE__ */ jsx(
+        HvRadio,
+        {
+          classes: {
+            radio: classes.radio,
+            root: classes.radioRoot
+          },
+          value: i,
+          checked: page === i,
+          onChange: (event) => onPageChange?.(event, i),
+          icon: icons.radio,
+          checkedIcon: icons.radioChecked,
+          "aria-label": getItemAriaLabel?.(i)
+        },
+        i
+      ))
+    }
+  );
+};
+export {
+  HvDotPagination,
+  staticClasses as dotPaginationClasses
+};
+//# sourceMappingURL=DotPagination.mjs.map

package/dist/esm/DotPagination/DotPagination.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DotPagination.mjs","sources":["../../../src/DotPagination/DotPagination.tsx"],"sourcesContent":["import { cloneElement } from \"react\";\nimport { CurrentStep, OtherStep } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvRadio } from \"../Radio\";\nimport { HvRadioGroup, HvRadioGroupProps } from \"../RadioGroup\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { staticClasses, useClasses } from \"./DotPagination.styles\";\n\nexport { staticClasses as dotPaginationClasses };\n\nexport type HvDotPaginationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDotPaginationProps\n  extends Omit<HvRadioGroupProps, \"classes\"> {\n  /**\n   * Icon to override the default one used for the unselected state.\n   *\n   * The default icon is `OtherStep`.\n   */\n  unselectedIcon?: React.ReactElement;\n  /**\n   * Icon to override the default one used for the selected state.\n   *\n   * The default icon is `CurrentStep`.\n   */\n  selectedIcon?: React.ReactElement;\n  /**\n   *  The number of pages the component has.\n   */\n  pages?: number;\n  /**\n   * The currently selected page.\n   */\n  page?: number;\n  /**\n   * The callback fired when the page value changes.\n   */\n  onPageChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    page: number\n  ) => void;\n  /**\n   * The callback fired to get the page aria label.\n   */\n  getItemAriaLabel?: (page: number) => string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvDotPaginationClasses;\n}\n\nconst getSelectorIcons = (\n  radioIcon?: React.ReactElement,\n  radioCheckedIcon?: React.ReactElement,\n  classes?: HvDotPaginationClasses\n) => {\n  return {\n    radio: cloneElement(radioIcon || <OtherStep width={8} height={8} />, {\n      className: classes?.icon,\n    }),\n    radioChecked: cloneElement(\n      radioCheckedIcon || <CurrentStep width={8} height={8} />,\n      {\n        className: classes?.icon,\n      }\n    ),\n  };\n};\n\nconst range = (n: number) => Array.from(Array(n), (_, i) => i);\n\n/**\n * Pagination is the process of dividing a document into discrete pages. It relates to how users interact with structured content on a website or application.\n * This component uses Radio Buttons to represent each page.\n */\nexport const HvDotPagination = (props: HvDotPaginationProps) => {\n  const {\n    className,\n    classes: classesProp,\n    unselectedIcon,\n    selectedIcon,\n    pages = 1,\n    page = 0,\n    onPageChange,\n    getItemAriaLabel,\n    ...others\n  } = useDefaultProps(\"HvDotPagination\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const icons = getSelectorIcons(unselectedIcon, selectedIcon, classes);\n\n  return (\n    <HvRadioGroup\n      className={cx(classes.root, className)}\n      classes={{\n        horizontal: classes.horizontal,\n      }}\n      orientation=\"horizontal\"\n      {...others}\n    >\n      {range(pages).map((i) => (\n        <HvRadio\n          classes={{\n            radio: classes.radio,\n            root: classes.radioRoot,\n          }}\n          key={i}\n          value={i}\n          checked={page === i}\n          onChange={(event) => onPageChange?.(event, i)}\n          icon={icons.radio}\n          checkedIcon={icons.radioChecked}\n          aria-label={getItemAriaLabel?.(i)}\n        />\n      ))}\n    </HvRadioGroup>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAsDA,MAAM,mBAAmB,CACvB,WACA,kBACA,YACG;AACI,SAAA;AAAA,IACL,OAAO,aAAa,aAAa,oBAAC,aAAU,OAAO,GAAG,QAAQ,EAAA,CAAG,GAAI;AAAA,MACnE,WAAW,SAAS;AAAA,IAAA,CACrB;AAAA,IACD,cAAc;AAAA,MACZ,oBAAqB,oBAAA,aAAA,EAAY,OAAO,GAAG,QAAQ,GAAG;AAAA,MACtD;AAAA,QACE,WAAW,SAAS;AAAA,MACtB;AAAA,IACF;AAAA,EAAA;AAEJ;AAEA,MAAM,QAAQ,CAAC,MAAc,MAAM,KAAK,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC;AAMhD,MAAA,kBAAkB,CAAC,UAAgC;AACxD,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,mBAAmB,KAAK;AAE5C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,QAAQ,iBAAiB,gBAAgB,cAAc,OAAO;AAGlE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC,SAAS;AAAA,QACP,YAAY,QAAQ;AAAA,MACtB;AAAA,MACA,aAAY;AAAA,MACX,GAAG;AAAA,MAEH,UAAM,MAAA,KAAK,EAAE,IAAI,CAAC,MACjB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,YACP,OAAO,QAAQ;AAAA,YACf,MAAM,QAAQ;AAAA,UAChB;AAAA,UAEA,OAAO;AAAA,UACP,SAAS,SAAS;AAAA,UAClB,UAAU,CAAC,UAAU,eAAe,OAAO,CAAC;AAAA,UAC5C,MAAM,MAAM;AAAA,UACZ,aAAa,MAAM;AAAA,UACnB,cAAY,mBAAmB,CAAC;AAAA,QAAA;AAAA,QAN3B;AAAA,MAAA,CAQR;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/esm/DotPagination/DotPagination.styles.mjs

@@ -0,0 +1,31 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../utils/classes.mjs";
+const { useClasses, staticClasses } = createClasses("HvDotPagination", {
+  root: {
+    display: "flex",
+    justifyContent: "center"
+  },
+  horizontal: {
+    marginLeft: 0,
+    width: "auto"
+  },
+  radioRoot: {
+    marginLeft: theme.space.xs
+  },
+  radio: {
+    height: "16px",
+    "&:hover": {
+      backgroundColor: theme.colors.neutral_20,
+      borderRadius: "100%"
+    }
+  },
+  icon: {
+    width: "16px",
+    height: "16px"
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=DotPagination.styles.mjs.map

package/dist/esm/DotPagination/DotPagination.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DotPagination.styles.mjs","sources":["../../../src/DotPagination/DotPagination.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvDotPagination\", {\n  root: {\n    display: \"flex\",\n    justifyContent: \"center\",\n  },\n\n  horizontal: {\n    marginLeft: 0,\n    width: \"auto\",\n  },\n\n  radioRoot: {\n    marginLeft: theme.space.xs,\n  },\n\n  radio: {\n    height: \"16px\",\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.neutral_20,\n      borderRadius: \"100%\",\n    },\n  },\n\n  icon: {\n    width: \"16px\",\n    height: \"16px\",\n  },\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,YAAY,kBAAkB,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,gBAAgB;AAAA,EAClB;AAAA,EAEA,YAAY;AAAA,IACV,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AAAA,EAEA,WAAW;AAAA,IACT,YAAY,MAAM,MAAM;AAAA,EAC1B;AAAA,EAEA,OAAO;AAAA,IACL,QAAQ;AAAA,IAER,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,MAC9B,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EAEA,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AACF,CAAC;"}

package/dist/esm/Drawer/Drawer.mjs

@@ -0,0 +1,81 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import MuiDrawer from "@mui/material/Drawer";
+import { Close } from "@hitachivantara/uikit-react-icons";
+import { useDefaultProps } from "../hooks/useDefaultProps.mjs";
+import { IconButton } from "../utils/IconButton.mjs";
+import { setId } from "../utils/setId.mjs";
+import { useClasses } from "./Drawer.styles.mjs";
+import { staticClasses } from "./Drawer.styles.mjs";
+const HvDrawer = (props) => {
+  const {
+    className,
+    classes: classesProp,
+    id,
+    children,
+    open,
+    onClose,
+    anchor = "right",
+    buttonTitle = "Close",
+    showBackdrop = true,
+    hideBackdrop,
+    disableBackdropClick = false,
+    ...others
+  } = useDefaultProps("HvDrawer", props);
+  const { classes, cx } = useClasses(classesProp);
+  const handleOnClose = (event, reason) => {
+    if (reason === "backdropClick" && disableBackdropClick)
+      return;
+    onClose?.(event, reason);
+  };
+  const shouldHideBackdrop = hideBackdrop ?? !showBackdrop;
+  return /* @__PURE__ */ jsxs(
+    MuiDrawer,
+    {
+      className: cx(classes.root, className),
+      id,
+      anchor,
+      open,
+      PaperProps: {
+        classes: {
+          root: classes.paper
+        }
+      },
+      hideBackdrop: shouldHideBackdrop,
+      ...!shouldHideBackdrop && {
+        slotProps: {
+          backdrop: {
+            classes: {
+              root: classes.background
+            },
+            onClick: (event) => {
+              if (disableBackdropClick)
+                return;
+              onClose?.(event, "backdropClick");
+            }
+          }
+        }
+      },
+      onClose: handleOnClose,
+      ...others,
+      children: [
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            id: setId(id, "close"),
+            className: classes.closeButton,
+            variant: "secondaryGhost",
+            onClick: onClose,
+            title: buttonTitle,
+            children: /* @__PURE__ */ jsx(Close, { role: "none" })
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
+export {
+  HvDrawer,
+  staticClasses as drawerClasses
+};
+//# sourceMappingURL=Drawer.mjs.map

package/dist/esm/Drawer/Drawer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.mjs","sources":["../../../src/Drawer/Drawer.tsx"],"sourcesContent":["import MuiDrawer, { DrawerProps as MuiDrawerProps } from \"@mui/material/Drawer\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { IconButton } from \"../utils/IconButton\";\nimport { setId } from \"../utils/setId\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Drawer.styles\";\n\nexport { staticClasses as drawerClasses };\n\nexport type HvDrawerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDrawerProps extends Omit<MuiDrawerProps, \"classes\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvDrawerClasses;\n  /**\n   * Components of the Drawer.\n   */\n  children?: React.ReactNode;\n  /**\n   * Current state of the Drawer.\n   */\n  open?: boolean;\n  /**\n   * Function executed on close.\n   * Extended from Modal from material-ui\n   *\n   */\n  onClose?: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => void;\n  /**\n   * The side the drawer opens from.\n   */\n  anchor?: \"left\" | \"top\" | \"right\" | \"bottom\";\n  /**\n   * Title for the button close.\n   */\n  buttonTitle?: string;\n  /**\n   * Show backdrop when drawer is open.\n   * @deprecated Use `hideBackdrop` instead.\n   */\n  showBackdrop?: boolean;\n  /**\n   * Prevent closing the dialog when clicking on the backdrop.\n   */\n  disableBackdropClick?: boolean;\n  /** @ignore */\n  ref?: MuiDrawerProps[\"ref\"];\n  /** @ignore */\n  component?: MuiDrawerProps[\"component\"];\n}\n\n/**\n * The Drawer component provides a foundation to create a sliding pane.\n * It only provides the pane with a close button, the rest of the\n * content can be customized.\n */\nexport const HvDrawer = (props: HvDrawerProps) => {\n  const {\n    className,\n    classes: classesProp,\n    id,\n    children,\n    open,\n    onClose,\n    anchor = \"right\",\n    buttonTitle = \"Close\",\n    showBackdrop = true,\n    hideBackdrop,\n    disableBackdropClick = false,\n    ...others\n  } = useDefaultProps(\"HvDrawer\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const handleOnClose: MuiDrawerProps[\"onClose\"] = (\n    event: React.SyntheticEvent,\n    reason\n  ) => {\n    if (reason === \"backdropClick\" && disableBackdropClick) return;\n\n    onClose?.(event, reason);\n  };\n\n  const shouldHideBackdrop = hideBackdrop ?? !showBackdrop;\n\n  return (\n    <MuiDrawer\n      className={cx(classes.root, className)}\n      id={id}\n      anchor={anchor}\n      open={open}\n      PaperProps={{\n        classes: {\n          root: classes.paper,\n        },\n      }}\n      hideBackdrop={shouldHideBackdrop}\n      {...(!shouldHideBackdrop && {\n        slotProps: {\n          backdrop: {\n            classes: {\n              root: classes.background,\n            },\n            onClick: (event) => {\n              if (disableBackdropClick) return;\n              onClose?.(event, \"backdropClick\");\n            },\n          },\n        },\n      })}\n      onClose={handleOnClose}\n      {...others}\n    >\n      <IconButton\n        id={setId(id, \"close\")}\n        className={classes.closeButton}\n        variant=\"secondaryGhost\"\n        onClick={onClose}\n        title={buttonTitle}\n      >\n        <Close role=\"none\" />\n      </IconButton>\n      {children}\n    </MuiDrawer>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAwEa,MAAA,WAAW,CAAC,UAAyB;AAC1C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,cAAc;AAAA,IACd,eAAe;AAAA,IACf;AAAA,IACA,uBAAuB;AAAA,IACvB,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AAErC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,gBAA2C,CAC/C,OACA,WACG;AACH,QAAI,WAAW,mBAAmB;AAAsB;AAExD,cAAU,OAAO,MAAM;AAAA,EAAA;AAGnB,QAAA,qBAAqB,gBAAgB,CAAC;AAG1C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY;AAAA,QACV,SAAS;AAAA,UACP,MAAM,QAAQ;AAAA,QAChB;AAAA,MACF;AAAA,MACA,cAAc;AAAA,MACb,GAAI,CAAC,sBAAsB;AAAA,QAC1B,WAAW;AAAA,UACT,UAAU;AAAA,YACR,SAAS;AAAA,cACP,MAAM,QAAQ;AAAA,YAChB;AAAA,YACA,SAAS,CAAC,UAAU;AACd,kBAAA;AAAsB;AAC1B,wBAAU,OAAO,eAAe;AAAA,YAClC;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MACA,SAAS;AAAA,MACR,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI,MAAM,IAAI,OAAO;AAAA,YACrB,WAAW,QAAQ;AAAA,YACnB,SAAQ;AAAA,YACR,SAAS;AAAA,YACT,OAAO;AAAA,YAEP,UAAA,oBAAC,OAAM,EAAA,MAAK,OAAO,CAAA;AAAA,UAAA;AAAA,QACrB;AAAA,QACC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/esm/Drawer/Drawer.styles.mjs

@@ -0,0 +1,24 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../utils/classes.mjs";
+const { staticClasses, useClasses } = createClasses("HvDrawer", {
+  root: {},
+  paper: {
+    backgroundColor: theme.colors.atmo1,
+    padding: 0,
+    overflow: "auto",
+    boxShadow: theme.colors.shadow
+  },
+  background: {
+    background: theme.alpha("atmo4", 0.8)
+  },
+  closeButton: {
+    position: "absolute",
+    top: theme.spacing("sm"),
+    right: theme.spacing("sm")
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Drawer.styles.mjs.map

package/dist/esm/Drawer/Drawer.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.styles.mjs","sources":["../../../src/Drawer/Drawer.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../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":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,YAAY;AAAA,EACrE,MAAM,CAAC;AAAA,EACP,OAAO;AAAA,IACL,iBAAiB,MAAM,OAAO;AAAA,IAC9B,SAAS;AAAA,IACT,UAAU;AAAA,IACV,WAAW,MAAM,OAAO;AAAA,EAC1B;AAAA,EACA,YAAY;AAAA,IACV,YAAY,MAAM,MAAM,SAAS,GAAG;AAAA,EACtC;AAAA,EACA,aAAa;AAAA,IACX,UAAU;AAAA,IACV,KAAK,MAAM,QAAQ,IAAI;AAAA,IACvB,OAAO,MAAM,QAAQ,IAAI;AAAA,EAC3B;AACF,CAAC;"}

package/dist/esm/DropDownMenu/DropDownMenu.mjs

@@ -0,0 +1,130 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useMemo } from "react";
+import { theme } from "@hitachivantara/uikit-styles";
+import { MoreOptionsVertical } from "@hitachivantara/uikit-react-icons";
+import { useDefaultProps } from "../hooks/useDefaultProps.mjs";
+import { useUniqueId } from "../hooks/useUniqueId.mjs";
+import { useControlled } from "../hooks/useControlled.mjs";
+import { isKey } from "../utils/keyboardUtils.mjs";
+import { setId } from "../utils/setId.mjs";
+import { getPrevNextFocus } from "../utils/focusableElementFinder.mjs";
+import { useClasses } from "./DropDownMenu.styles.mjs";
+import { staticClasses } from "./DropDownMenu.styles.mjs";
+import { HvBaseDropdown } from "../BaseDropdown/BaseDropdown.mjs";
+import { HvButton } from "../Button/Button.mjs";
+import { HvPanel } from "../Panel/Panel.mjs";
+import { HvList } from "../List/List.mjs";
+const HvDropDownMenu = (props) => {
+  const {
+    id: idProp,
+    classes: classesProp,
+    className,
+    icon,
+    placement = "right",
+    dataList,
+    disablePortal = false,
+    onToggle,
+    onClick,
+    keepOpened = true,
+    disabled = false,
+    expanded,
+    defaultExpanded = false,
+    category = "secondaryGhost",
+    ...others
+  } = useDefaultProps("HvDropDownMenu", props);
+  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"));
+  const listId = setId(id, "list");
+  const handleClose = (event) => {
+    setOpen(false);
+    onToggle?.(event, false);
+  };
+  const handleKeyDown = (event) => {
+    if (isKey(event, "Tab")) {
+      const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;
+      if (node)
+        setTimeout(() => node.focus(), 0);
+      handleClose(event);
+    }
+    event.preventDefault();
+  };
+  const setFocusToContent = (containerRef) => {
+    containerRef?.getElementsByTagName("li")[0]?.focus();
+  };
+  const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);
+  const popperStyle = {
+    style: {
+      zIndex: theme.zIndices.tooltip,
+      width: "auto",
+      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
+          }
+        }
+      ) })
+    }
+  );
+};
+export {
+  HvDropDownMenu,
+  staticClasses as dropDownMenuClasses
+};
+//# sourceMappingURL=DropDownMenu.mjs.map

package/dist/esm/DropDownMenu/DropDownMenu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropDownMenu.mjs","sources":["../../../src/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 \"../hooks/useDefaultProps\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { getPrevNextFocus } from \"../utils/focusableElementFinder\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { HvButton, HvButtonVariant } from \"../Button\";\nimport { HvList, HvListProps, HvListValue } from \"../List\";\nimport { HvPanel } from \"../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/DropDownMenu/DropDownMenu.styles.mjs

@@ -0,0 +1,51 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { outlineStyles } from "../utils/focusUtils.mjs";
+import { createClasses } from "../utils/classes.mjs";
+const { staticClasses, useClasses } = createClasses("HvDropDownMenu", {
+  /** Styles applied to the container. */
+  container: {
+    width: 32
+  },
+  /** Styles applied to the BaseDropdown container. */
+  baseContainer: {},
+  /** Styles applied to the root. */
+  root: {
+    display: "inline-block",
+    width: "auto",
+    "&:focus-visible $icon": {
+      ...outlineStyles
+    }
+  },
+  /** Styles applied to the icon. */
+  icon: {
+    position: "relative",
+    width: 32,
+    height: 32,
+    boxSizing: "border-box",
+    padding: 0,
+    borderRadius: theme.radii.base,
+    border: "1px solid transparent"
+  },
+  /** Styles applied to the icon when selected. */
+  iconSelected: {
+    backgroundColor: theme.colors.atmo1,
+    boxShadow: theme.colors.shadow,
+    "&:hover": {
+      backgroundColor: theme.colors.atmo1
+    },
+    "& svg .color0": {
+      fill: theme.colors.secondary
+    },
+    borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,
+    border: `1px solid ${theme.colors.secondary}`
+  },
+  /** Styles applied to the list root. */
+  menuListRoot: {},
+  /** Styles applied to the list. */
+  menuList: {}
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=DropDownMenu.styles.mjs.map

package/dist/esm/DropDownMenu/DropDownMenu.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropDownMenu.styles.mjs","sources":["../../../src/DropDownMenu/DropDownMenu.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport { createClasses } from \"../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;"}