@hitachivantara/uikit-react-core 5.39.2 → 5.39.4

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

@@ -0,0 +1 @@
+{"version":3,"file":"DotPagination.styles.js","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.js

@@ -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.js";
+import { IconButton } from "../utils/IconButton.js";
+import { setId } from "../utils/setId.js";
+import { useClasses } from "./Drawer.styles.js";
+import { staticClasses } from "./Drawer.styles.js";
+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.js.map

package/dist/esm/Drawer/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","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.js

@@ -0,0 +1,24 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../utils/classes.js";
+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.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.styles.js","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.js

@@ -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.js";
+import { useUniqueId } from "../hooks/useUniqueId.js";
+import { useControlled } from "../hooks/useControlled.js";
+import { isKey } from "../utils/keyboardUtils.js";
+import { setId } from "../utils/setId.js";
+import { getPrevNextFocus } from "../utils/focusableElementFinder.js";
+import { useClasses } from "./DropDownMenu.styles.js";
+import { staticClasses } from "./DropDownMenu.styles.js";
+import { HvBaseDropdown } from "../BaseDropdown/BaseDropdown.js";
+import { HvButton } from "../Button/Button.js";
+import { HvPanel } from "../Panel/Panel.js";
+import { HvList } from "../List/List.js";
+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.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DropDownMenu.js","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.js

@@ -0,0 +1,51 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { outlineStyles } from "../utils/focusUtils.js";
+import { createClasses } from "../utils/classes.js";
+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.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DropDownMenu.styles.js","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;"}

package/dist/esm/Dropdown/Dropdown.js

@@ -0,0 +1,325 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef, useState, useRef, useEffect } from "react";
+import { useForkRef } from "@mui/material/utils";
+import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { setId } from "../utils/setId.js";
+import { useLabels } from "../hooks/useLabels.js";
+import { useUniqueId } from "../hooks/useUniqueId.js";
+import { useControlled } from "../hooks/useControlled.js";
+import { getSelectionLabel, getSelected } from "./utils.js";
+import { useClasses } from "./Dropdown.styles.js";
+import { staticClasses } from "./Dropdown.styles.js";
+import { HvDropdownList } from "./List/List.js";
+import { isInvalid } from "../Forms/FormElement/validationStates.js";
+import { HvFormElement } from "../Forms/FormElement/FormElement.js";
+import { HvLabel } from "../Forms/Label/Label.js";
+import { HvInfoMessage } from "../Forms/InfoMessage/InfoMessage.js";
+import { HvBaseDropdown } from "../BaseDropdown/BaseDropdown.js";
+import { HvWarningText } from "../Forms/WarningText/WarningText.js";
+import { HvTypography } from "../Typography/Typography.js";
+const DEFAULT_LABELS = {
+  select: void 0,
+  selectAll: "All",
+  cancelLabel: "Cancel",
+  applyLabel: "Apply",
+  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) {
+              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 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
+};
+//# sourceMappingURL=Dropdown.js.map