@hitachivantara/uikit-react-core 6.6.1 → 6.7.0

package/dist/BaseDropdown/BaseDropdown.js

@@ -1,20 +1,16 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useState, useCallback, useMemo, useId, isValidElement, cloneElement, Fragment } from "react";
-import { usePopper } from "react-popper";
-import { useForkRef } from "@mui/material/utils";
-import { detectOverflow } from "@popperjs/core";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useId, useCallback, isValidElement, cloneElement, Fragment } from "react";
+import useForkRef from "@mui/utils/useForkRef";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useControlled } from "../hooks/useControlled.js";
 import { useUniqueId } from "../hooks/useUniqueId.js";
 import { HvIcon } from "../icons.js";
-import { getFirstAndLastFocus } from "../utils/focusableElementFinder.js";
 import { isKey, isOneOfKeys } from "../utils/keyboardUtils.js";
 import { useClasses } from "./BaseDropdown.styles.js";
 import { staticClasses } from "./BaseDropdown.styles.js";
-import { BaseDropdownPanel } from "./BaseDropdownPanel.js";
-import { BaseDropdownContext, useBaseDropdownContext } from "./context.js";
+import { HvDropdownPanel } from "./BaseDropdownPanel.js";
 import { HvTypography } from "../Typography/Typography.js";
-const BaseDropdown = forwardRef(function BaseDropdown2(props, ref) {
+const HvBaseDropdown = forwardRef(function BaseDropdown(props, ref) {
   const {
     id: idProp,
     className,
@@ -26,6 +22,9 @@ const BaseDropdown = forwardRef(function BaseDropdown2(props, ref) {
     headerComponent: HeaderComponentProp,
     adornment,
     expanded,
+    popperProps,
+    variableWidth,
+    placement: placementProp = "right",
     dropdownHeaderProps,
     defaultExpanded,
     disabled,
@@ -38,15 +37,14 @@ const BaseDropdown = forwardRef(function BaseDropdown2(props, ref) {
     dropdownHeaderRef: dropdownHeaderRefProp,
     onToggle,
     onClickOutside,
+    onContainerCreation,
     ...others
-  } = props;
+  } = useDefaultProps("HvBaseDropdown", props);
   const { classes, cx } = useClasses(classesProp);
-  const {
-    popperPlacement,
-    popperElement,
-    referenceElement,
-    setReferenceElement
-  } = useBaseDropdownContext();
+  const [computedPlacement, setComputedPlacement] = useState();
+  const [referenceElement, setReferenceElement] = useState(
+    null
+  );
   const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));
   const headerRef = useForkRef(
     setReferenceElement,
@@ -92,7 +90,7 @@ const BaseDropdown = forwardRef(function BaseDropdown2(props, ref) {
   const defaultHeaderElement = /* @__PURE__ */ jsxs(
     "div",
     {
-      "data-popper-placement": popperPlacement,
+      "data-popper-placement": computedPlacement,
       className: cx(classes.header, {
         [classes.headerOpen]: isOpen,
         [classes.headerReadOnly]: readOnly,
@@ -130,18 +128,6 @@ const BaseDropdown = forwardRef(function BaseDropdown2(props, ref) {
     ref: headerRef,
     ...headerControlArias
   }) : defaultHeaderElement;
-  const handleContainerKeyDown = (event) => {
-    if (isKey(event, "Esc")) {
-      handleToggle(event);
-    }
-    if (isKey(event, "Tab") && !event.shiftKey) {
-      const focusList = getFirstAndLastFocus(popperElement);
-      if (document.activeElement === focusList?.last) {
-        event.preventDefault();
-        focusList?.first?.focus();
-      }
-    }
-  };
   const handleOutside = (event) => {
     const isButtonClick = referenceElement?.contains(event.target);
     if (!isButtonClick) {
@@ -178,106 +164,28 @@ const BaseDropdown = forwardRef(function BaseDropdown2(props, ref) {
         children: headerElement
       }
     ),
-    isOpen && /* @__PURE__ */ jsx(
-      BaseDropdownPanel,
+    /* @__PURE__ */ jsx(
+      HvDropdownPanel,
       {
-        classes,
+        open: isOpen,
+        classes: { container: classes.container, panel: classes.panel },
+        placement: `bottom-${placementProp === "right" ? "start" : "end"}`,
+        variableWidth,
         containerId,
         onClickAway: handleOutside,
         disablePortal,
-        onContainerKeyDown: handleContainerKeyDown,
+        anchorEl: referenceElement,
+        onToggle: handleToggle,
+        onFirstUpdate: (state) => {
+          setComputedPlacement(state.placement);
+          onContainerCreation?.(state.elements?.popper ?? null, state);
+        },
+        popperOptions: popperProps,
         children
       }
     )
   ] });
 });
-const HvBaseDropdown = forwardRef(
-  function HvBaseDropdown2(props, ref) {
-    const {
-      popperProps = {},
-      variableWidth,
-      placement: placementProp = "right",
-      onContainerCreation,
-      ...others
-    } = useDefaultProps("HvBaseDropdown", props);
-    const placement = `bottom-${placementProp === "right" ? "start" : "end"}`;
-    const { modifiers: popperPropsModifiers, ...otherPopperProps } = popperProps;
-    const [referenceElement, setReferenceElement] = useState(null);
-    const [popperElement, setPopperElement] = useState(
-      null
-    );
-    const onFirstUpdate = useCallback(() => {
-      onContainerCreation?.(popperElement);
-    }, [onContainerCreation, popperElement]);
-    const modifiers = useMemo(
-      () => [
-        {
-          name: "variableWidth",
-          enabled: !variableWidth,
-          phase: "beforeWrite",
-          requires: ["computeStyles"],
-          fn: ({ state }) => {
-            state.styles.popper.width = `${state.rects.reference.width}px`;
-          },
-          effect: ({ state }) => {
-            state.elements.popper.style.width = `${state.elements.reference.offsetWidth}px`;
-          }
-        },
-        {
-          name: "maxSize",
-          enabled: true,
-          phase: "main",
-          requiresIfExists: ["offset", "preventOverflow", "flip"],
-          fn: ({ state, name, options }) => {
-            const overflow = detectOverflow(state, options);
-            const x = state.modifiersData.preventOverflow?.x || 0;
-            const y = state.modifiersData.preventOverflow?.y || 0;
-            const popperWidth = state.rects.popper.width;
-            const popperHeight = state.rects.popper.height;
-            const basePlacement = state.placement.split("-")[0];
-            const widthProp = basePlacement === "left" ? "left" : "right";
-            const heightProp = basePlacement === "top" ? "top" : "bottom";
-            state.modifiersData[name] = {
-              width: popperWidth - overflow[widthProp] - x,
-              height: popperHeight - overflow[heightProp] - y
-            };
-          }
-        },
-        {
-          name: "applyMaxSize",
-          enabled: true,
-          phase: "beforeWrite",
-          requires: ["maxSize"],
-          fn: ({ state }) => {
-            const { width, height } = state.modifiersData.maxSize;
-            state.styles.popper.maxWidth = `${width}px`;
-            state.styles.popper.maxHeight = `${height}px`;
-          }
-        },
-        ...popperPropsModifiers || []
-      ],
-      [popperPropsModifiers, variableWidth]
-    );
-    const popper = usePopper(referenceElement, popperElement, {
-      placement,
-      modifiers,
-      onFirstUpdate,
-      ...otherPopperProps
-    });
-    const value = useMemo(
-      () => ({
-        popperPlacement: popper?.attributes.popper?.["data-popper-placement"] ?? "bottom",
-        popper,
-        popperElement,
-        setPopperElement,
-        referenceElement,
-        setReferenceElement
-      }),
-      [popper, popperElement, referenceElement]
-    );
-    return /* @__PURE__ */ jsx(BaseDropdownContext.Provider, { value, children: /* @__PURE__ */ jsx(BaseDropdown, { ref, ...others }) });
-  }
-);
 export {
   HvBaseDropdown,
   staticClasses as baseDropdownClasses

package/dist/BaseDropdown/BaseDropdown.styles.js

@@ -10,7 +10,7 @@ const { useClasses, staticClasses } = createClasses("HvBaseDropdown", {
     }
   },
   anchor: { display: "inline-block", width: "100%" },
-  container: { zIndex: theme.zIndices.popover, width: "auto" },
+  container: {},
   header: {
     cursor: "pointer",
     userSelect: "none",
@@ -75,25 +75,7 @@ const { useClasses, staticClasses } = createClasses("HvBaseDropdown", {
     display: "block",
     color: theme.colors.textSubtle
   },
-  panel: {
-    // TODO: remove padding override in v6 (most elements need it)
-    padding: 0,
-    border: `1px solid ${theme.colors.text}`
-  },
-  inputExtensionOpen: {
-    height: "0px",
-    backgroundColor: theme.colors.bgContainer,
-    borderTop: "none",
-    borderBottom: "none",
-    borderRight: `1px solid ${theme.colors.text}`,
-    borderLeft: `1px solid ${theme.colors.text}`
-  },
-  inputExtensionLeftPosition: { marginLeft: "auto" },
-  inputExtensionOpenShadow: {
-    boxShadow: `0px 8px 0px ${theme.colors.textDimmed}, 0px 0px 9px 0px rgba(65,65,65,.12)`
-  },
-  inputExtensionFloatRight: { float: "right" },
-  inputExtensionFloatLeft: { float: "left" }
+  panel: {}
 });
 export {
   staticClasses,

package/dist/BaseDropdown/BaseDropdownPanel.js

@@ -1,77 +1,92 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { Portal, ClickAwayListener } from "@mui/base";
-import { useCss, useTheme } from "@hitachivantara/uikit-react-utils";
+import { jsx } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import ClickAwayListener from "@mui/material/ClickAwayListener";
+import Popper from "@mui/material/Popper";
+import { useDefaultProps, useTheme, createClasses } from "@hitachivantara/uikit-react-utils";
+import { theme } from "@hitachivantara/uikit-styles";
 import { getContainerElement } from "../utils/document.js";
-import { useBaseDropdownContext } from "./context.js";
+import { getFirstAndLastFocus } from "../utils/focusableElementFinder.js";
+import { isKey } from "../utils/keyboardUtils.js";
+import { usePopperModifiers } from "./utils.js";
 import { HvPanel } from "../Panel/Panel.js";
-const BaseDropdownPanel = ({
-  classes,
-  containerId,
-  children,
-  disablePortal,
-  onContainerKeyDown,
-  onClickAway
-}) => {
-  const { cx } = useCss();
-  const { popperPlacement, popper, referenceElement, setPopperElement } = useBaseDropdownContext();
+const name = "HvDropdownPanel";
+const { useClasses } = createClasses(name, {
+  container: {
+    zIndex: theme.zIndices.popover,
+    width: "auto"
+  },
+  panel: {
+    padding: 0,
+    // TODO(major): remove padding as most elements need it
+    border: `1px solid ${theme.colors.text}`
+  }
+});
+const HvDropdownPanel = (props) => {
+  const {
+    classes: classesProp,
+    className,
+    containerId,
+    children,
+    variableWidth,
+    anchorEl,
+    disablePortal,
+    modifiers: modifiersProp,
+    popperOptions,
+    onToggle,
+    onClickAway,
+    onFirstUpdate,
+    ...others
+  } = useDefaultProps(name, props);
+  const { classes, cx } = useClasses(classesProp, false);
   const { rootId } = useTheme();
-  const extensionWidth = referenceElement ? referenceElement?.offsetWidth : "inherit";
-  const container = (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: setPopperElement,
-        className: classes.container,
-        onKeyDown: onContainerKeyDown,
-        style: popper?.styles.popper,
-        ...popper?.attributes.popper,
-        children: [
-          popperPlacement?.includes("bottom") && /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: { width: extensionWidth },
-              className: cx(classes.inputExtensionOpen, {
-                [classes.inputExtensionLeftPosition]: popperPlacement.includes("end")
-              })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            HvPanel,
-            {
-              id: containerId,
-              "data-popper-placement": popperPlacement,
-              className: classes.panel,
-              children
-            }
-          ),
-          popperPlacement?.includes("top") && /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: { width: extensionWidth },
-              className: cx(
-                classes.inputExtensionOpen,
-                classes.inputExtensionOpenShadow,
-                {
-                  [classes.inputExtensionFloatRight]: popperPlacement.includes("end"),
-                  [classes.inputExtensionFloatLeft]: popperPlacement.includes("start")
-                }
-              )
-            }
-          )
-        ]
+  const popperRef = useRef(null);
+  const [placement, setPlacement] = useState();
+  const modifiers = usePopperModifiers({
+    variableWidth,
+    modifiers: modifiersProp,
+    onPlacementChange: setPlacement
+  });
+  const handleKeyDown = (event) => {
+    if (isKey(event, "Esc")) {
+      onToggle?.(event);
+    }
+    if (isKey(event, "Tab") && !event.shiftKey) {
+      const focusList = getFirstAndLastFocus(
+        popperRef.current?.state?.elements.popper
+      );
+      if (document.activeElement === focusList?.last) {
+        event.preventDefault();
+        focusList?.first?.focus();
       }
-    )
-  );
+    }
+  };
   return /* @__PURE__ */ jsx(
-    Portal,
+    Popper,
     {
-      container: getContainerElement(rootId),
+      anchorEl,
+      popperRef,
       disablePortal,
-      children: /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway, children: container })
+      container: !disablePortal ? getContainerElement(rootId) : void 0,
+      className: cx(classes.container, className),
+      modifiers,
+      onKeyDown: handleKeyDown,
+      popperOptions: {
+        onFirstUpdate,
+        ...popperOptions
+      },
+      ...others,
+      children: /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway, children: /* @__PURE__ */ jsx(
+        HvPanel,
+        {
+          id: containerId,
+          className: classes.panel,
+          "data-popper-placement": placement,
+          children
+        }
+      ) })
     }
   );
 };
 export {
-  BaseDropdownPanel
+  HvDropdownPanel
 };

package/dist/BaseDropdown/utils.js

@@ -0,0 +1,79 @@
+import { useMemo } from "react";
+import { detectOverflow } from "@popperjs/core";
+function usePopperModifiers({
+  variableWidth,
+  modifiers,
+  onPlacementChange
+}) {
+  return useMemo(
+    () => [
+      {
+        name: "placementListener",
+        enabled: true,
+        phase: "main",
+        fn: ({ state }) => onPlacementChange?.(state.placement)
+      },
+      {
+        name: "fixedWidth",
+        enabled: !variableWidth,
+        phase: "beforeWrite",
+        requires: ["computeStyles"],
+        fn: ({ state }) => {
+          state.styles.popper.width = `${state.rects.reference.width}px`;
+        },
+        effect: ({ state }) => {
+          const { popper, reference } = state.elements;
+          popper.style.width = `${reference.offsetWidth}px`;
+        }
+      },
+      {
+        name: "minSize",
+        enabled: true,
+        phase: "main",
+        fn: ({ state }) => {
+          state.styles.popper.minWidth = `${state.rects.reference.width}px`;
+        },
+        effect: ({ state }) => {
+          const { popper, reference } = state.elements;
+          popper.style.minWidth = `${reference.offsetWidth}px`;
+        }
+      },
+      {
+        name: "maxSize",
+        enabled: true,
+        phase: "main",
+        requiresIfExists: ["offset", "preventOverflow", "flip"],
+        fn: ({ state, name, options }) => {
+          const overflow = detectOverflow(state, options);
+          const x = state.modifiersData.preventOverflow?.x || 0;
+          const y = state.modifiersData.preventOverflow?.y || 0;
+          const popperWidth = state.rects.popper.width;
+          const popperHeight = state.rects.popper.height;
+          const basePlacement = state.placement.split("-")[0];
+          const widthProp = basePlacement === "left" ? "left" : "right";
+          const heightProp = basePlacement === "top" ? "top" : "bottom";
+          state.modifiersData[name] = {
+            width: popperWidth - overflow[widthProp] - x,
+            height: popperHeight - overflow[heightProp] - y
+          };
+        }
+      },
+      {
+        name: "applyMaxSize",
+        enabled: true,
+        phase: "beforeWrite",
+        requires: ["maxSize"],
+        fn: ({ state }) => {
+          const { width, height } = state.modifiersData.maxSize;
+          state.styles.popper.maxWidth = `${width}px`;
+          state.styles.popper.maxHeight = `${height}px`;
+        }
+      },
+      ...modifiers || []
+    ],
+    [modifiers, variableWidth, onPlacementChange]
+  );
+}
+export {
+  usePopperModifiers
+};

package/dist/DropDownMenu/DropDownMenu.js

@@ -1,7 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { forwardRef, useMemo } from "react";
+import { forwardRef, useState, useMemo } from "react";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { useBaseDropdownContext } from "../BaseDropdown/context.js";
 import { useControlled } from "../hooks/useControlled.js";
 import { useLabels } from "../hooks/useLabels.js";
 import { useUniqueId } from "../hooks/useUniqueId.js";
@@ -19,7 +18,6 @@ const DEFAULT_LABELS = {
 const HeaderComponent = forwardRef(
   function HeaderComponent2(props, ref) {
     const { open, icon, disabled, ...others } = props;
-    const { popperPlacement } = useBaseDropdownContext();
     return /* @__PURE__ */ jsx(
       HvDropdownButton,
       {
@@ -29,7 +27,6 @@ const HeaderComponent = forwardRef(
         disabled,
         "aria-expanded": open,
         "aria-haspopup": "menu",
-        placement: popperPlacement,
         ...others,
         children: icon || /* @__PURE__ */ jsx(HvIcon, { name: "DotsVertical" })
       }
@@ -58,6 +55,7 @@ const HvDropDownMenu = forwardRef(function HvDropDownMenu2(props, ref) {
   } = 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) => {
@@ -87,6 +85,7 @@ const HvDropDownMenu = forwardRef(function HvDropDownMenu2(props, ref) {
       },
       expanded: open && !disabled,
       headerComponent: HeaderComponent,
+      "data-popper-placement": computedPlacement,
       size,
       variant,
       open,
@@ -100,7 +99,8 @@ const HvDropDownMenu = forwardRef(function HvDropDownMenu2(props, ref) {
         onToggle?.(e, s);
       },
       disabled,
-      onContainerCreation: (containerEl) => {
+      onContainerCreation: (containerEl, state) => {
+        setComputedPlacement(state.placement);
         containerEl?.getElementsByTagName("li")[0]?.focus();
       },
       ...others,

package/dist/Dropdown/Dropdown.js

@@ -76,6 +76,7 @@ const HvDropdown = fixedForwardRef(function HvDropdown2(props, ref) {
   const { classes, cx } = useClasses(classesProp);
   const labels = useLabels(DEFAULT_LABELS, labelsProp);
   const elementId = useUniqueId(id);
+  const [popperStyles, setPopperStyles] = useState();
   const [validationState, setValidationState] = useControlled(
     status,
     "standBy"
@@ -254,7 +255,10 @@ const HvDropdown = fixedForwardRef(function HvDropdown2(props, ref) {
             placeholder: buildHeaderLabel(),
             onToggle: handleToggle,
             onClickOutside: handleClickOutside,
-            onContainerCreation: setFocusToContent,
+            onContainerCreation: (el, state) => {
+              setFocusToContent(el);
+              setPopperStyles(state.elements?.popper.style);
+            },
             role: "combobox",
             variableWidth,
             "aria-label": ariaLabel,
@@ -276,6 +280,7 @@ const HvDropdown = fixedForwardRef(function HvDropdown2(props, ref) {
                 },
                 values: internalValues,
                 multiSelect,
+                popperStyles,
                 showSearch,
                 onChange: handleSelection,
                 onCancel: handleCancel,
@@ -287,7 +292,7 @@ const HvDropdown = fixedForwardRef(function HvDropdown2(props, ref) {
                 height,
                 maxHeight,
                 virtualized,
-                "data-is-dropdown": "true",
+                "data-is-dropdown": true,
                 ...listProps
               }
             )

package/dist/Dropdown/List/List.js

@@ -2,7 +2,6 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useMemo, useEffect } from "react";
 import { useDefaultProps, mergeStyles } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-import { useBaseDropdownContext } from "../../BaseDropdown/context.js";
 import { CounterLabel } from "../../utils/CounterLabel.js";
 import { getSelected } from "../utils.js";
 import { useClasses } from "./List.styles.js";
@@ -29,6 +28,7 @@ const HvDropdownList = (props) => {
     notifyChangesOnFirstRender = false,
     singleSelectionToggle,
     height: heightProp,
+    popperStyles,
     maxHeight: maxHeightProp,
     virtualized = false,
     ...others
@@ -38,8 +38,7 @@ const HvDropdownList = (props) => {
   const [list, setList] = useState(clone(values));
   const [allSelected, setAllSelected] = useState(false);
   const [anySelected, setAnySelected] = useState(false);
-  const { popper } = useBaseDropdownContext();
-  const { maxWidth, maxHeight } = popper?.styles.popper || {};
+  const { maxWidth, maxHeight } = popperStyles || {};
   const hasChanges = useMemo(() => {
     return String(getSelectedIds(values)) !== String(getSelectedIds(list));
   }, [list, values]);

package/dist/DropdownButton/DropdownButton.js

@@ -9,7 +9,6 @@ const HvDropdownButton = forwardRef(function HvDropdownButton2(props, ref) {
   const {
     className,
     classes: classesProp,
-    placement = "bottom",
     disabled,
     open,
     icon,
@@ -27,7 +26,6 @@ const HvDropdownButton = forwardRef(function HvDropdownButton2(props, ref) {
       ref,
       icon,
       disabled: disabled || readOnly,
-      "data-popper-placement": placement,
       className: cx(
         classes.root,
         {

package/dist/FormElement/Suggestions/Suggestions.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef, useContext, useRef } from "react";
-import { ClickAwayListener, Popper } from "@mui/base";
+import ClickAwayListener from "@mui/material/ClickAwayListener";
+import Popper from "@mui/material/Popper";
 import { useForkRef } from "@mui/material/utils";
 import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
 import { getContainerElement } from "../../utils/document.js";