@hitachivantara/uikit-react-core 6.8.1 → 6.9.0

package/dist/Drawer/Drawer.styles.js

@@ -1,23 +1,20 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvDrawer", {
-  root: {},
-  paper: {
-    backgroundColor: theme.colors.bgContainer,
-    padding: 0,
-    overflow: "auto",
-    boxShadow: theme.colors.shadow
-  },
-  background: {
-    backgroundColor: theme.colors.bgOverlay
-  },
-  closeButton: {
-    position: "absolute",
-    top: theme.space.sm,
-    right: theme.space.sm
-  }
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/Drawer/Drawer.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvDrawer", {
+	root: {},
+	paper: {
+		backgroundColor: theme.colors.bgContainer,
+		padding: 0,
+		overflow: "auto",
+		boxShadow: theme.colors.shadow
+	},
+	background: { backgroundColor: theme.colors.bgOverlay },
+	closeButton: {
+		position: "absolute",
+		top: theme.space.sm,
+		right: theme.space.sm
+	}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/DropDownMenu/DropDownMenu.js

@@ -1,129 +1,93 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef, useState, useMemo } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { useControlled } from "../hooks/useControlled.js";
-import { useLabels } from "../hooks/useLabels.js";
+import { isKey } from "../utils/keyboardUtils.js";
 import { useUniqueId } from "../hooks/useUniqueId.js";
 import { HvIcon } from "../icons.js";
-import { getPrevNextFocus } from "../utils/focusableElementFinder.js";
-import { isKey } from "../utils/keyboardUtils.js";
-import { useClasses } from "./DropDownMenu.styles.js";
-import { staticClasses } from "./DropDownMenu.styles.js";
+import { useControlled } from "../hooks/useControlled.js";
+import getPrevNextFocus from "../utils/focusableElementFinder.js";
 import { HvBaseDropdown } from "../BaseDropdown/BaseDropdown.js";
-import { HvList } from "../List/List.js";
 import { HvDropdownButton } from "../DropdownButton/DropdownButton.js";
-const DEFAULT_LABELS = {
-  dropdownMenu: "Dropdown menu"
-};
-const HeaderComponent = forwardRef(
-  function HeaderComponent2(props, ref) {
-    const { open, icon, disabled, ...others } = props;
-    return /* @__PURE__ */ jsx(
-      HvDropdownButton,
-      {
-        icon: true,
-        ref,
-        open,
-        disabled,
-        "aria-expanded": open,
-        "aria-haspopup": "menu",
-        ...others,
-        children: icon || /* @__PURE__ */ jsx(HvIcon, { name: "DotsVertical" })
-      }
-    );
-  }
-);
-const HvDropDownMenu = forwardRef(function HvDropDownMenu2(props, ref) {
-  const {
-    id: idProp,
-    classes: classesProp,
-    className,
-    icon,
-    placement = "right",
-    dataList,
-    disablePortal = false,
-    onToggle,
-    onClick,
-    keepOpened = true,
-    disabled = false,
-    expanded,
-    defaultExpanded = false,
-    variant = "secondaryGhost",
-    size = "md",
-    labels: labelsProp,
-    ...others
-  } = useDefaultProps("HvDropDownMenu", props);
-  const { classes, cx } = useClasses(classesProp);
-  const labels = useLabels(DEFAULT_LABELS, labelsProp);
-  const [computedPlacement, setComputedPlacement] = useState();
-  const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));
-  const id = useUniqueId(idProp);
-  const handleClose = (event) => {
-    setOpen(false);
-    onToggle?.(event, false);
-  };
-  const handleKeyDown = (event) => {
-    if (isKey(event, "Tab")) {
-      const focusNodes = getPrevNextFocus();
-      const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;
-      if (node) setTimeout(() => node.focus(), 0);
-      handleClose(event);
-    }
-    event.preventDefault();
-  };
-  const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);
-  return /* @__PURE__ */ jsx(
-    HvBaseDropdown,
-    {
-      ref,
-      id,
-      className: cx(classes.root, className, {
-        [classes.open]: open
-      }),
-      classes: {
-        panel: classes.menuListRoot
-      },
-      expanded: open && !disabled,
-      headerComponent: HeaderComponent,
-      "data-popper-placement": computedPlacement,
-      size,
-      variant,
-      open,
-      "aria-label": labels.dropdownMenu,
-      icon,
-      placement,
-      variableWidth: true,
-      disablePortal,
-      onToggle: (e, s) => {
-        setOpen(s);
-        onToggle?.(e, s);
-      },
-      disabled,
-      onContainerCreation: (containerEl, state) => {
-        setComputedPlacement(state.placement);
-        containerEl?.getElementsByTagName("li")[0]?.focus();
-      },
-      ...others,
-      children: /* @__PURE__ */ jsx(
-        HvList,
-        {
-          values: dataList,
-          selectable: false,
-          condensed,
-          onClick: (event, item) => {
-            if (!keepOpened) handleClose(event);
-            onClick?.(event, item);
-          },
-          onKeyDown: handleKeyDown,
-          classes: {
-            root: classes.menuList
-          }
-        }
-      )
-    }
-  );
+import { useLabels } from "../hooks/useLabels.js";
+import { HvList } from "../List/List.js";
+import { useClasses } from "./DropDownMenu.styles.js";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { forwardRef, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/DropDownMenu/DropDownMenu.tsx
+var DEFAULT_LABELS = { dropdownMenu: "Dropdown menu" };
+var HeaderComponent = forwardRef(function HeaderComponent(props, ref) {
+	const { open, icon, disabled, ...others } = props;
+	return /* @__PURE__ */ jsx(HvDropdownButton, {
+		icon: true,
+		ref,
+		open,
+		disabled,
+		"aria-expanded": open,
+		"aria-haspopup": "menu",
+		...others,
+		children: icon || /* @__PURE__ */ jsx(HvIcon, { name: "DotsVertical" })
+	});
+});
+/**
+* A dropdown menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.
+*/
+var HvDropDownMenu = forwardRef(function HvDropDownMenu(props, ref) {
+	const { id: idProp, classes: classesProp, className, icon, placement = "right", dataList, disablePortal = false, onToggle, onClick, keepOpened = true, disabled = false, expanded, defaultExpanded = false, variant = "secondaryGhost", size = "md", labels: labelsProp, ...others } = useDefaultProps("HvDropDownMenu", props);
+	const { classes, cx } = useClasses(classesProp);
+	const labels = useLabels(DEFAULT_LABELS, labelsProp);
+	const [computedPlacement, setComputedPlacement] = useState();
+	const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));
+	const id = useUniqueId(idProp);
+	const handleClose = (event) => {
+		setOpen(false);
+		onToggle?.(event, false);
+	};
+	const handleKeyDown = (event) => {
+		if (isKey(event, "Tab")) {
+			const focusNodes = getPrevNextFocus();
+			const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;
+			if (node) setTimeout(() => node.focus(), 0);
+			handleClose(event);
+		}
+		event.preventDefault();
+	};
+	const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);
+	return /* @__PURE__ */ jsx(HvBaseDropdown, {
+		ref,
+		id,
+		className: cx(classes.root, className, { [classes.open]: open }),
+		classes: { panel: classes.menuListRoot },
+		expanded: open && !disabled,
+		headerComponent: HeaderComponent,
+		"data-popper-placement": computedPlacement,
+		size,
+		variant,
+		open,
+		"aria-label": labels.dropdownMenu,
+		icon,
+		placement,
+		variableWidth: true,
+		disablePortal,
+		onToggle: (e, s) => {
+			setOpen(s);
+			onToggle?.(e, s);
+		},
+		disabled,
+		onContainerCreation: (containerEl, state) => {
+			setComputedPlacement(state.placement);
+			containerEl?.getElementsByTagName("li")[0]?.focus();
+		},
+		...others,
+		children: /* @__PURE__ */ jsx(HvList, {
+			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
-};
+//#endregion
+export { HvDropDownMenu };

package/dist/DropDownMenu/DropDownMenu.styles.js

@@ -1,23 +1,14 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvDropDownMenu", {
-  root: {
-    flexShrink: 0,
-    "& > div": {
-      height: "inherit"
-    }
-  },
-  open: {
-    boxShadow: theme.colors.shadow
-  },
-  menuListRoot: {
-    padding: theme.space.sm
-  },
-  menuList: {
-    overflowClipMargin: theme.space.sm
-  }
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/DropDownMenu/DropDownMenu.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvDropDownMenu", {
+	root: {
+		flexShrink: 0,
+		"& > div": { height: "inherit" }
+	},
+	open: { boxShadow: theme.colors.shadow },
+	menuListRoot: { padding: theme.space.sm },
+	menuList: { overflowClipMargin: theme.space.sm }
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };