@hitachivantara/uikit-react-core 5.80.1 → 5.81.0

package/dist/esm/BaseDropdown/BaseDropdown.js

@@ -1,21 +1,19 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef, useCallback, isValidElement, cloneElement, useState, useMemo } from "react";
-import { createPortal } from "react-dom";
+import { forwardRef, useCallback, isValidElement, cloneElement, useState, useMemo, Fragment } from "react";
 import { usePopper } from "react-popper";
-import ClickAwayListener from "@mui/material/ClickAwayListener";
+import { useForkRef } from "@mui/material/utils";
 import { detectOverflow } from "@popperjs/core";
 import { DropUpXS, DropDownXS } from "@hitachivantara/uikit-react-icons";
-import { useTheme, useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useControlled } from "../hooks/useControlled.js";
-import { useForkRef } from "../hooks/useForkRef.js";
 import { useUniqueId } from "../hooks/useUniqueId.js";
-import { getDocument } from "../utils/document.js";
 import { getFirstAndLastFocus } from "../utils/focusableElementFinder.js";
 import { isKey, isOneOfKeys } from "../utils/keyboardUtils.js";
 import { setId } from "../utils/setId.js";
 import { useClasses } from "./BaseDropdown.styles.js";
 import { staticClasses } from "./BaseDropdown.styles.js";
-import BaseDropdownContext, { useBaseDropdownContext } from "./BaseDropdownContext/BaseDropdownContext.js";
+import { BaseDropdownPanel } from "./BaseDropdownPanel.js";
+import { useBaseDropdownContext, BaseDropdownContext } from "./context.js";
 import { HvTypography } from "../Typography/Typography.js";
 const BaseDropdown = forwardRef((props, ref) => {
   const {
@@ -26,6 +24,7 @@ const BaseDropdown = forwardRef((props, ref) => {
     role,
     placeholder,
     component,
+    headerComponent: HeaderComponentProp,
     adornment,
     expanded,
     dropdownHeaderProps,
@@ -45,22 +44,17 @@ const BaseDropdown = forwardRef((props, ref) => {
   const { classes, cx } = useClasses(classesProp);
   const {
     popperPlacement,
-    popper,
     popperElement,
     referenceElement,
-    setPopperElement,
     setReferenceElement
   } = useBaseDropdownContext();
-  const { rootId } = useTheme();
   const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));
-  const handleDropdownHeaderRefProp = useForkRef(
+  const headerRef = useForkRef(
+    setReferenceElement,
     dropdownHeaderRefProp,
     dropdownHeaderProps?.ref
   );
-  const handleDropdownHeaderRef = useForkRef(
-    setReferenceElement,
-    handleDropdownHeaderRefProp
-  );
+  const customHeaderRef = useForkRef(ref, headerRef);
   const ariaRole = role || (component == null ? "combobox" : void 0);
   const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : void 0);
   const id = useUniqueId(idProp);
@@ -77,7 +71,6 @@ const BaseDropdown = forwardRef((props, ref) => {
     "aria-label": ariaLabelProp,
     "aria-labelledby": ariaLabelledByProp
   };
-  const extensionWidth = referenceElement ? referenceElement?.offsetWidth : "inherit";
   const handleToggle = useCallback(
     (event) => {
       if (event && !isKey(event, "Tab")) {
@@ -113,7 +106,7 @@ const BaseDropdown = forwardRef((props, ref) => {
       ...headerAriaLabels,
       style: disabled || readOnly ? { pointerEvents: "none" } : void 0,
       tabIndex: disabled ? -1 : 0,
-      ref: handleDropdownHeaderRef,
+      ref: headerRef,
       ...dropdownHeaderProps,
       children: [
         /* @__PURE__ */ jsx(
@@ -137,114 +130,71 @@ const BaseDropdown = forwardRef((props, ref) => {
     }
   );
   const headerElement = component && isValidElement(component) ? cloneElement(component, {
-    ref: handleDropdownHeaderRef,
+    ref: headerRef,
     ...headerControlArias
   }) : defaultHeaderElement;
-  const containerComponent = (() => {
-    if (!getDocument()) {
-      return null;
+  const handleContainerKeyDown = (event) => {
+    if (isKey(event, "Esc")) {
+      handleToggle(event);
     }
-    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) {
-        onClickOutside?.(event);
-        setIsOpen(false);
-        onToggle?.(event, false);
-      }
-    };
-    const container = /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: setPopperElement,
-        className: classes.container,
-        style: popper?.styles.popper,
-        ...popper?.attributes.popper,
-        children: /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: handleOutside, children: /* @__PURE__ */ jsxs("div", { onKeyDown: handleContainerKeyDown, children: [
-          popperPlacement?.includes("bottom") && /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: { width: extensionWidth },
-              className: cx(classes.inputExtensionOpen, {
-                [classes.inputExtensionLeftPosition]: popperPlacement.includes("end")
-              })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              id: containerId,
-              className: cx(classes.panel, {
-                [classes.panelOpenedUp]: popperPlacement?.includes("top"),
-                [classes.panelOpenedDown]: popperPlacement?.includes("bottom")
-              }),
-              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")
-                }
-              )
-            }
-          )
-        ] }) })
+    if (isKey(event, "Tab") && !event.shiftKey) {
+      const focusList = getFirstAndLastFocus(popperElement);
+      if (document.activeElement === focusList?.last) {
+        event.preventDefault();
+        focusList?.first?.focus();
       }
-    );
-    if (disablePortal) return container;
-    return createPortal(
-      container,
-      document.getElementById(rootId || "") || document.body
-    );
-  })();
-  return /* @__PURE__ */ jsxs("div", { className: classes.root, children: [
+    }
+  };
+  const handleOutside = (event) => {
+    const isButtonClick = referenceElement?.contains(event.target);
+    if (!isButtonClick) {
+      onClickOutside?.(event);
+      setIsOpen(false);
+      onToggle?.(event, false);
+    }
+  };
+  const hasCustomHeader = !!HeaderComponentProp;
+  const HeaderComponent = HeaderComponentProp || "div";
+  const RootComponent = HeaderComponentProp ? Fragment : "div";
+  return /* @__PURE__ */ jsxs(RootComponent, { ...!hasCustomHeader && { className: classes.root }, children: [
     /* @__PURE__ */ jsx(
-      "div",
+      HeaderComponent,
       {
-        ref,
+        ref: hasCustomHeader ? customHeaderRef : ref,
         id,
-        className: cx(
-          classes.anchor,
-          { [classes.rootDisabled]: disabled },
-          className
-        ),
+        disabled: hasCustomHeader && disabled,
+        className: cx(className, {
+          [classes.anchor]: !hasCustomHeader,
+          [classes.rootDisabled]: disabled
+        }),
         ...!readOnly && {
           onKeyDown: handleToggle,
           onClick: handleToggle
         },
-        ...ariaRole && {
-          role: ariaRole,
+        ...(ariaRole || hasCustomHeader) && {
+          role: hasCustomHeader ? void 0 : ariaRole,
           ...headerAriaLabels,
           ...headerControlArias
         },
-        tabIndex: -1,
+        tabIndex: hasCustomHeader ? void 0 : -1,
         ...others,
         children: headerElement
       }
     ),
-    isOpen && containerComponent
+    isOpen && /* @__PURE__ */ jsx(
+      BaseDropdownPanel,
+      {
+        classes,
+        containerId,
+        onClickAway: handleOutside,
+        onContainerKeyDown: handleContainerKeyDown,
+        children
+      }
+    )
   ] });
 });
 const HvBaseDropdown = forwardRef(
-  (props, ref) => {
+  function HvBaseDropdown2(props, ref) {
     const {
       popperProps = {},
       variableWidth,
@@ -253,58 +203,14 @@ const HvBaseDropdown = forwardRef(
       ...others
     } = useDefaultProps("HvBaseDropdown", props);
     const placement = `bottom-${placementProp === "right" ? "start" : "end"}`;
-    const { modifiers: popperPropsModifiers = [], ...otherPopperProps } = popperProps;
+    const { modifiers: popperPropsModifiers, ...otherPopperProps } = popperProps;
     const [referenceElement, setReferenceElement] = useState(null);
     const [popperElement, setPopperElement] = useState(
       null
     );
-    const [popperMaxSize, setPopperMaxSize] = useState({});
     const onFirstUpdate = useCallback(() => {
       onContainerCreation?.(popperElement);
     }, [onContainerCreation, popperElement]);
-    const applyMaxSizeCalculator = useCallback(
-      ({ state }) => {
-        const { width, height } = state.modifiersData.maxSize;
-        if (width !== popperMaxSize?.width || height !== popperMaxSize?.height) {
-          setPopperMaxSize({ width, height });
-        }
-        state.styles.popper = {
-          ...state.styles.popper,
-          maxWidth: `${width}px`,
-          maxHeight: `${height}px`
-        };
-      },
-      [popperMaxSize]
-    );
-    const widthCalculator = useCallback(
-      ({ state }) => {
-        state.styles.popper.width = `${state.rects.reference.width}px`;
-      },
-      []
-    );
-    const widthCalculatorEffect = useCallback(
-      ({ state }) => {
-        state.elements.popper.style.width = `${state.elements.reference.offsetWidth}px`;
-      },
-      []
-    );
-    const maxSizeCalculator = useCallback(
-      ({ 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
-        };
-      },
-      []
-    );
     const modifiers = useMemo(
       () => [
         {
@@ -312,33 +218,47 @@ const HvBaseDropdown = forwardRef(
           enabled: !variableWidth,
           phase: "beforeWrite",
           requires: ["computeStyles"],
-          fn: widthCalculator,
-          effect: widthCalculatorEffect
+          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: maxSizeCalculator
+          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: applyMaxSizeCalculator
+          fn: ({ state }) => {
+            const { width, height } = state.modifiersData.maxSize;
+            state.styles.popper.maxWidth = `${width}px`;
+            state.styles.popper.maxHeight = `${height}px`;
+          }
         },
-        ...popperPropsModifiers
+        ...popperPropsModifiers || []
       ],
-      [
-        maxSizeCalculator,
-        applyMaxSizeCalculator,
-        popperPropsModifiers,
-        variableWidth,
-        widthCalculator,
-        widthCalculatorEffect
-      ]
+      [popperPropsModifiers, variableWidth]
     );
     const popper = usePopper(referenceElement, popperElement, {
       placement,
@@ -348,7 +268,6 @@ const HvBaseDropdown = forwardRef(
     });
     const value = useMemo(
       () => ({
-        ...popperMaxSize,
         popperPlacement: popper?.attributes.popper?.["data-popper-placement"] ?? "bottom",
         popper,
         popperElement,
@@ -356,7 +275,7 @@ const HvBaseDropdown = forwardRef(
         referenceElement,
         setReferenceElement
       }),
-      [popper, popperElement, popperMaxSize, referenceElement]
+      [popper, popperElement, referenceElement]
     );
     return /* @__PURE__ */ jsx(BaseDropdownContext.Provider, { value, children: /* @__PURE__ */ jsx(BaseDropdown, { ref, ...others }) });
   }

package/dist/esm/BaseDropdown/BaseDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseDropdown.js","sources":["../../../src/BaseDropdown/BaseDropdown.tsx"],"sourcesContent":["import {\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useMemo,\n  useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { PopperProps, usePopper } from \"react-popper\";\nimport ClickAwayListener, {\n  ClickAwayListenerProps,\n} from \"@mui/material/ClickAwayListener\";\nimport {\n  detectOverflow,\n  ModifierArguments,\n  Options,\n  Placement,\n} from \"@popperjs/core\";\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useForkRef } from \"../hooks/useForkRef\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { getDocument } from \"../utils/document\";\nimport { getFirstAndLastFocus } from \"../utils/focusableElementFinder\";\nimport { isKey, isOneOfKeys } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./BaseDropdown.styles\";\nimport BaseDropdownContext from \"./BaseDropdownContext\";\nimport { useBaseDropdownContext } from \"./BaseDropdownContext/BaseDropdownContext\";\n\nexport { staticClasses as baseDropdownClasses };\n\nexport type HvBaseDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseDropdownProps\n  extends HvBaseProps<HTMLDivElement, \"onToggle\"> {\n  /**\n   * The role of the element that triggers the popup.\n   *\n   * Defaults to \"combobox\" if `component` and the default\n   * \"textbox\" header is used, undefined otherwise.\n   */\n  role?: string;\n  /**\n   * Header placeholder.\n   */\n  placeholder?: React.ReactNode;\n  /**\n   * If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the dropdown will be in read only mode, unable to be interacted.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required?: boolean;\n  /**\n   * Disable the portal behavior.\n   * The children stay within it's parent DOM hierarchy.\n   */\n  disablePortal?: boolean;\n  /**\n   * If `true` the dropdown width depends size of content if `false` the width depends on the header size.\n   * Defaults to `false`.\n   */\n  variableWidth?: boolean;\n  /**\n   * If `true` the dropdown starts opened if `false` it starts closed.\n   */\n  expanded?: boolean;\n  /**\n   * When uncontrolled, defines the initial expanded state.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * An object containing props to be wired to the popper component.\n   */\n  popperProps?: Partial<PopperProps<any>>;\n  /**\n   * Placement of the dropdown.\n   */\n  placement?: \"left\" | \"right\";\n  /**\n   * Replacement for the header component.\n   */\n  component?: React.ReactNode;\n  /**\n   * Adornment to replace the default arrows.\n   */\n  adornment?: React.ReactNode;\n  /**\n   * When dropdown changes the expanded state.\n   */\n  onToggle?: (event: Event, open: boolean) => void;\n  /**\n   * When user click outside the open container.\n   */\n  onClickOutside?: (event: Event) => void;\n  /**\n   * Callback called when the dropdown is opened and ready,\n   * commonly used to set focus to the content.\n   */\n  onContainerCreation?: (container: HTMLElement | null) => void;\n  /**\n   * Attributes applied to the dropdown header element.\n   */\n  dropdownHeaderProps?: React.DetailedHTMLProps<\n    React.HTMLAttributes<HTMLDivElement>,\n    HTMLDivElement\n  >;\n  /**\n   * Pass a ref to the dropdown header element.\n   */\n  dropdownHeaderRef?: React.Ref<HTMLDivElement>;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvBaseDropdownClasses;\n  /** @ignore */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst BaseDropdown = forwardRef<\n  HTMLDivElement,\n  Omit<\n    HvBaseDropdownProps,\n    \"popperProps\" | \"variableWidth\" | \"placement\" | \"onContainerCreation\"\n  >\n>((props, ref) => {\n  const {\n    id: idProp,\n    className,\n    classes: classesProp,\n    children,\n    role,\n    placeholder,\n    component,\n    adornment,\n    expanded,\n    dropdownHeaderProps,\n    defaultExpanded,\n    disabled,\n    readOnly,\n    required,\n    disablePortal,\n    \"aria-expanded\": ariaExpandedProp,\n    \"aria-label\": ariaLabelProp,\n    \"aria-labelledby\": ariaLabelledByProp,\n    dropdownHeaderRef: dropdownHeaderRefProp,\n    onToggle,\n    onClickOutside,\n    ...others\n  } = props;\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const {\n    popperPlacement,\n    popper,\n    popperElement,\n    referenceElement,\n    setPopperElement,\n    setReferenceElement,\n  } = useBaseDropdownContext();\n\n  const { rootId } = useTheme();\n\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n\n  const handleDropdownHeaderRefProp = useForkRef(\n    dropdownHeaderRefProp,\n    dropdownHeaderProps?.ref,\n  );\n  const handleDropdownHeaderRef = useForkRef(\n    setReferenceElement,\n    handleDropdownHeaderRefProp,\n  );\n\n  const ariaRole = role || (component == null ? \"combobox\" : undefined);\n\n  const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : undefined);\n\n  const id = useUniqueId(idProp);\n  const containerId = setId(id, \"children-container\");\n\n  const headerControlArias = {\n    \"aria-required\": required ?? undefined,\n    \"aria-readonly\": readOnly ?? undefined,\n    \"aria-disabled\": disabled ?? undefined,\n\n    \"aria-expanded\": ariaExpanded,\n    \"aria-owns\": isOpen ? containerId : undefined,\n    \"aria-controls\": isOpen ? containerId : undefined,\n  } satisfies React.AriaAttributes;\n\n  const headerAriaLabels = {\n    \"aria-label\": ariaLabelProp,\n    \"aria-labelledby\": ariaLabelledByProp,\n  } satisfies React.AriaAttributes;\n\n  const extensionWidth = referenceElement\n    ? referenceElement?.offsetWidth\n    : \"inherit\";\n\n  const handleToggle = useCallback(\n    (event: any) => {\n      if (event && !isKey(event, \"Tab\")) {\n        event.preventDefault();\n      }\n\n      const notControlKey =\n        !!event?.code &&\n        !isOneOfKeys(event, [\"Tab\", \"Enter\", \"Esc\", \"ArrowDown\", \"Space\"]);\n\n      const ignoredCombinations =\n        (isKey(event, \"Esc\") && !isOpen) ||\n        (isKey(event, \"ArrowDown\") && isOpen) ||\n        (isKey(event, \"Tab\") && !isOpen);\n\n      if (disabled || notControlKey || ignoredCombinations) return;\n\n      const newOpen = !isOpen;\n\n      /* If about to close focus on the header component. */\n      setIsOpen(() => {\n        if (!newOpen) {\n          // Focus-ring won't be visible even if using the keyboard:\n          // https://github.com/WICG/focus-visible/issues/88\n          referenceElement?.focus({ preventScroll: true });\n        }\n\n        return newOpen;\n      });\n\n      onToggle?.(event, newOpen);\n    },\n    [isOpen, disabled, setIsOpen, onToggle, referenceElement],\n  );\n\n  const ExpanderComponent = isOpen ? DropUpXS : DropDownXS;\n\n  const defaultHeaderElement = (\n    <div\n      id={setId(id, \"header\")}\n      className={cx(classes.header, {\n        [classes.headerDisabled]: disabled,\n        [classes.headerReadOnly]: readOnly,\n        [classes.headerOpen]: isOpen,\n        [classes.headerOpenUp]: isOpen && popperPlacement?.includes(\"top\"),\n        [classes.headerOpenDown]: isOpen && popperPlacement?.includes(\"bottom\"),\n      })}\n      // TODO: review \"textbox\" role\n      role={ariaRole === \"combobox\" ? \"textbox\" : undefined}\n      {...headerAriaLabels}\n      style={disabled || readOnly ? { pointerEvents: \"none\" } : undefined}\n      // Removes the element from the navigation sequence for keyboard focus if disabled\n      tabIndex={disabled ? -1 : 0}\n      ref={handleDropdownHeaderRef}\n      {...dropdownHeaderProps}\n    >\n      <div\n        className={cx(classes.selection, {\n          [classes.selectionDisabled]: disabled,\n        })}\n      >\n        {placeholder && typeof placeholder === \"string\" ? (\n          <HvTypography noWrap className={classes.placeholder}>\n            {placeholder}\n          </HvTypography>\n        ) : (\n          placeholder\n        )}\n      </div>\n      <div className={classes.arrowContainer}>\n        {adornment || (\n          <ExpanderComponent\n            iconSize=\"XS\"\n            color={disabled ? \"secondary_60\" : undefined}\n            className={classes.arrow}\n          />\n        )}\n      </div>\n    </div>\n  );\n\n  const headerElement =\n    component && isValidElement(component)\n      ? cloneElement(component as React.ReactElement, {\n          ref: handleDropdownHeaderRef,\n          ...headerControlArias,\n        })\n      : defaultHeaderElement;\n\n  const containerComponent = (() => {\n    if (!getDocument()) {\n      return null;\n    }\n\n    /**\n     *  Handle keyboard inside children container.\n     */\n    const handleContainerKeyDown: React.KeyboardEventHandler = (event) => {\n      if (isKey(event, \"Esc\")) {\n        handleToggle(event);\n      }\n      if (isKey(event, \"Tab\") && !event.shiftKey) {\n        const focusList = getFirstAndLastFocus(popperElement);\n        if (document.activeElement === focusList?.last) {\n          event.preventDefault();\n          focusList?.first?.focus();\n        }\n      }\n    };\n\n    const handleOutside: ClickAwayListenerProps[\"onClickAway\"] = (event) => {\n      const isButtonClick = referenceElement?.contains(event.target as any);\n      if (!isButtonClick) {\n        onClickOutside?.(event);\n        setIsOpen(false);\n        onToggle?.(event, false);\n      }\n    };\n\n    const container = (\n      <div\n        ref={setPopperElement}\n        className={classes.container}\n        style={popper?.styles.popper}\n        {...popper?.attributes.popper}\n      >\n        <ClickAwayListener onClickAway={handleOutside}>\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n          <div onKeyDown={handleContainerKeyDown}>\n            {popperPlacement?.includes(\"bottom\") && (\n              <div\n                style={{ width: extensionWidth }}\n                className={cx(classes.inputExtensionOpen, {\n                  [classes.inputExtensionLeftPosition]:\n                    popperPlacement.includes(\"end\"),\n                })}\n              />\n            )}\n            <div\n              // TODO: review in v6. `containerId` needs to be on the role element (`children` has it)\n              id={containerId}\n              className={cx(classes.panel, {\n                [classes.panelOpenedUp]: popperPlacement?.includes(\"top\"),\n                [classes.panelOpenedDown]: popperPlacement?.includes(\"bottom\"),\n              })}\n            >\n              {children}\n            </div>\n            {popperPlacement?.includes(\"top\") && (\n              <div\n                style={{ width: extensionWidth }}\n                className={cx(\n                  classes.inputExtensionOpen,\n                  classes.inputExtensionOpenShadow,\n                  {\n                    [classes.inputExtensionFloatRight]:\n                      popperPlacement.includes(\"end\"),\n                    [classes.inputExtensionFloatLeft]:\n                      popperPlacement.includes(\"start\"),\n                  },\n                )}\n              />\n            )}\n          </div>\n        </ClickAwayListener>\n      </div>\n    );\n\n    if (disablePortal) return container;\n\n    return createPortal(\n      container,\n      document.getElementById(rootId || \"\") || document.body,\n    );\n  })();\n\n  return (\n    <div className={classes.root}>\n      <div\n        ref={ref}\n        id={id}\n        className={cx(\n          classes.anchor,\n          { [classes.rootDisabled]: disabled },\n          className,\n        )}\n        {...(!readOnly && {\n          onKeyDown: handleToggle,\n          onClick: handleToggle,\n        })}\n        {...(ariaRole && {\n          role: ariaRole,\n          ...headerAriaLabels,\n          ...headerControlArias,\n        })}\n        // Removes the element from the navigation sequence for keyboard focus\n        tabIndex={-1}\n        {...others}\n      >\n        {headerElement}\n      </div>\n      {isOpen && containerComponent}\n    </div>\n  );\n});\n\nexport const HvBaseDropdown = forwardRef<HTMLDivElement, HvBaseDropdownProps>(\n  (props, ref) => {\n    const {\n      popperProps = {},\n      variableWidth,\n      placement: placementProp = \"right\",\n      onContainerCreation,\n      ...others\n    } = useDefaultProps(\"HvBaseDropdown\", props);\n\n    const placement: Placement = `bottom-${\n      placementProp === \"right\" ? \"start\" : \"end\"\n    }`;\n\n    const { modifiers: popperPropsModifiers = [], ...otherPopperProps } =\n      popperProps;\n\n    const [referenceElement, setReferenceElement] =\n      useState<HTMLElement | null>(null);\n    const [popperElement, setPopperElement] = useState<HTMLElement | null>(\n      null,\n    );\n    const [popperMaxSize, setPopperMaxSize] = useState<{\n      width?: number;\n      height?: number;\n    }>({});\n\n    const onFirstUpdate = useCallback(() => {\n      onContainerCreation?.(popperElement);\n    }, [onContainerCreation, popperElement]);\n\n    const applyMaxSizeCalculator = useCallback(\n      ({ state }: ModifierArguments<Options>) => {\n        // The `maxSize` modifier provides this data\n        const { width, height } = state.modifiersData.maxSize;\n        if (\n          width !== popperMaxSize?.width ||\n          height !== popperMaxSize?.height\n        ) {\n          setPopperMaxSize({ width, height });\n        }\n\n        state.styles.popper = {\n          ...state.styles.popper,\n          maxWidth: `${width}px`,\n          maxHeight: `${height}px`,\n        };\n      },\n      [popperMaxSize],\n    );\n\n    const widthCalculator = useCallback(\n      ({ state }: ModifierArguments<Options>) => {\n        state.styles.popper.width = `${state.rects.reference.width}px`;\n      },\n      [],\n    );\n\n    const widthCalculatorEffect = useCallback(\n      ({ state }: ModifierArguments<Options>) => {\n        state.elements.popper.style.width = `${\n          (state.elements.reference as any).offsetWidth\n        }px`;\n      },\n      [],\n    );\n\n    const maxSizeCalculator = useCallback(\n      ({ state, name, options }: ModifierArguments<Options>) => {\n        const overflow = detectOverflow(state, options);\n\n        const x = state.modifiersData.preventOverflow?.x || 0;\n        const y = state.modifiersData.preventOverflow?.y || 0;\n\n        const popperWidth = state.rects.popper.width;\n        const popperHeight = state.rects.popper.height;\n\n        const basePlacement = state.placement.split(\"-\")[0];\n\n        const widthProp = basePlacement === \"left\" ? \"left\" : \"right\";\n        const heightProp = basePlacement === \"top\" ? \"top\" : \"bottom\";\n\n        state.modifiersData[name] = {\n          width: popperWidth - overflow[widthProp] - x,\n          height: popperHeight - overflow[heightProp] - y,\n        };\n      },\n      [],\n    );\n\n    const modifiers = useMemo<Options[\"modifiers\"]>(\n      () => [\n        {\n          name: \"variableWidth\",\n          enabled: !variableWidth,\n          phase: \"beforeWrite\",\n          requires: [\"computeStyles\"],\n          fn: widthCalculator,\n          effect: widthCalculatorEffect,\n        },\n        {\n          name: \"maxSize\",\n          enabled: true,\n          phase: \"main\",\n          requiresIfExists: [\"offset\", \"preventOverflow\", \"flip\"],\n          fn: maxSizeCalculator,\n        },\n        {\n          name: \"applyMaxSize\",\n          enabled: true,\n          phase: \"beforeWrite\",\n          requires: [\"maxSize\"],\n          fn: applyMaxSizeCalculator,\n        },\n        ...popperPropsModifiers,\n      ],\n      [\n        maxSizeCalculator,\n        applyMaxSizeCalculator,\n        popperPropsModifiers,\n        variableWidth,\n        widthCalculator,\n        widthCalculatorEffect,\n      ],\n    );\n\n    const popper = usePopper(referenceElement, popperElement, {\n      placement,\n      modifiers,\n      onFirstUpdate,\n      ...otherPopperProps,\n    });\n\n    const value = useMemo(\n      () => ({\n        ...popperMaxSize,\n        popperPlacement:\n          popper?.attributes.popper?.[\"data-popper-placement\"] ?? \"bottom\",\n        popper,\n        popperElement,\n        setPopperElement,\n        referenceElement,\n        setReferenceElement,\n      }),\n      [popper, popperElement, popperMaxSize, referenceElement],\n    );\n\n    return (\n      <BaseDropdownContext.Provider value={value}>\n        <BaseDropdown ref={ref} {...others} />\n      </BaseDropdownContext.Provider>\n    );\n  },\n);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"BaseDropdown.js","sources":["../../../src/BaseDropdown/BaseDropdown.tsx"],"sourcesContent":["import {\n  cloneElement,\n  forwardRef,\n  Fragment,\n  isValidElement,\n  useCallback,\n  useMemo,\n  useState,\n} from \"react\";\nimport { PopperProps, usePopper } from \"react-popper\";\nimport type { ClickAwayListenerProps } from \"@mui/material/ClickAwayListener\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport { detectOverflow, Options, Placement } from \"@popperjs/core\";\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { getFirstAndLastFocus } from \"../utils/focusableElementFinder\";\nimport { isKey, isOneOfKeys } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./BaseDropdown.styles\";\nimport { BaseDropdownPanel } from \"./BaseDropdownPanel\";\nimport { BaseDropdownContext, useBaseDropdownContext } from \"./context\";\n\nexport { staticClasses as baseDropdownClasses };\n\nexport type HvBaseDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseDropdownProps\n  extends HvBaseProps<HTMLDivElement, \"onToggle\"> {\n  /**\n   * The role of the element that triggers the popup.\n   *\n   * Defaults to \"combobox\" if `component` and the default\n   * \"textbox\" header is used, undefined otherwise.\n   */\n  role?: string;\n  /**\n   * Header placeholder.\n   */\n  placeholder?: React.ReactNode;\n  /**\n   * If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the dropdown will be in read only mode, unable to be interacted.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required?: boolean;\n  /**\n   * Disable the portal behavior.\n   * The children stay within it's parent DOM hierarchy.\n   */\n  disablePortal?: boolean;\n  /**\n   * If `true` the dropdown width depends size of content if `false` the width depends on the header size.\n   * Defaults to `false`.\n   */\n  variableWidth?: boolean;\n  /**\n   * If `true` the dropdown starts opened if `false` it starts closed.\n   */\n  expanded?: boolean;\n  /**\n   * When uncontrolled, defines the initial expanded state.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * An object containing props to be wired to the popper component.\n   */\n  popperProps?: Partial<PopperProps<any>>;\n  /**\n   * Placement of the dropdown.\n   */\n  placement?: \"left\" | \"right\";\n  /**\n   * Replacement for the header component.\n   * @deprecated use `Component` instead\n   */\n  component?: React.ReactNode;\n  /** Replacement for the header component */\n  headerComponent?: React.ElementType;\n  /**\n   * Adornment to replace the default arrows.\n   */\n  adornment?: React.ReactNode;\n  /**\n   * When dropdown changes the expanded state.\n   */\n  onToggle?: (event: Event, open: boolean) => void;\n  /**\n   * When user click outside the open container.\n   */\n  onClickOutside?: (event: Event) => void;\n  /**\n   * Callback called when the dropdown is opened and ready,\n   * commonly used to set focus to the content.\n   */\n  onContainerCreation?: (container: HTMLElement | null) => void;\n  /**\n   * Attributes applied to the dropdown header element.\n   */\n  dropdownHeaderProps?: React.DetailedHTMLProps<\n    React.HTMLAttributes<HTMLDivElement>,\n    HTMLDivElement\n  >;\n  /**\n   * Pass a ref to the dropdown header element.\n   */\n  dropdownHeaderRef?: React.Ref<HTMLDivElement>;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvBaseDropdownClasses;\n  /** @ignore */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst BaseDropdown = forwardRef<\n  HTMLDivElement,\n  Omit<\n    HvBaseDropdownProps,\n    \"popperProps\" | \"variableWidth\" | \"placement\" | \"onContainerCreation\"\n  >\n>((props, ref) => {\n  const {\n    id: idProp,\n    className,\n    classes: classesProp,\n    children,\n    role,\n    placeholder,\n    component,\n    headerComponent: HeaderComponentProp,\n    adornment,\n    expanded,\n    dropdownHeaderProps,\n    defaultExpanded,\n    disabled,\n    readOnly,\n    required,\n    disablePortal,\n    \"aria-expanded\": ariaExpandedProp,\n    \"aria-label\": ariaLabelProp,\n    \"aria-labelledby\": ariaLabelledByProp,\n    dropdownHeaderRef: dropdownHeaderRefProp,\n    onToggle,\n    onClickOutside,\n    ...others\n  } = props;\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const {\n    popperPlacement,\n    popperElement,\n    referenceElement,\n    setReferenceElement,\n  } = useBaseDropdownContext();\n\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n\n  const headerRef = useForkRef(\n    setReferenceElement,\n    dropdownHeaderRefProp,\n    dropdownHeaderProps?.ref as any,\n  );\n\n  const customHeaderRef = useForkRef(ref, headerRef);\n\n  const ariaRole = role || (component == null ? \"combobox\" : undefined);\n\n  const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : undefined);\n\n  const id = useUniqueId(idProp);\n  const containerId = setId(id, \"children-container\");\n\n  const headerControlArias = {\n    \"aria-required\": required ?? undefined,\n    \"aria-readonly\": readOnly ?? undefined,\n    \"aria-disabled\": disabled ?? undefined,\n\n    \"aria-expanded\": ariaExpanded,\n    \"aria-owns\": isOpen ? containerId : undefined,\n    \"aria-controls\": isOpen ? containerId : undefined,\n  } satisfies React.AriaAttributes;\n\n  const headerAriaLabels = {\n    \"aria-label\": ariaLabelProp,\n    \"aria-labelledby\": ariaLabelledByProp,\n  } satisfies React.AriaAttributes;\n\n  const handleToggle = useCallback(\n    (event: any) => {\n      if (event && !isKey(event, \"Tab\")) {\n        event.preventDefault();\n      }\n\n      const notControlKey =\n        !!event?.code &&\n        !isOneOfKeys(event, [\"Tab\", \"Enter\", \"Esc\", \"ArrowDown\", \"Space\"]);\n\n      const ignoredCombinations =\n        (isKey(event, \"Esc\") && !isOpen) ||\n        (isKey(event, \"ArrowDown\") && isOpen) ||\n        (isKey(event, \"Tab\") && !isOpen);\n\n      if (disabled || notControlKey || ignoredCombinations) return;\n\n      const newOpen = !isOpen;\n\n      /* If about to close focus on the header component. */\n      setIsOpen(() => {\n        if (!newOpen) {\n          // Focus-ring won't be visible even if using the keyboard:\n          // https://github.com/WICG/focus-visible/issues/88\n          referenceElement?.focus({ preventScroll: true });\n        }\n\n        return newOpen;\n      });\n\n      onToggle?.(event, newOpen);\n    },\n    [isOpen, disabled, setIsOpen, onToggle, referenceElement],\n  );\n\n  const ExpanderComponent = isOpen ? DropUpXS : DropDownXS;\n\n  const defaultHeaderElement = (\n    <div\n      id={setId(id, \"header\")}\n      className={cx(classes.header, {\n        [classes.headerDisabled]: disabled,\n        [classes.headerReadOnly]: readOnly,\n        [classes.headerOpen]: isOpen,\n        [classes.headerOpenUp]: isOpen && popperPlacement?.includes(\"top\"),\n        [classes.headerOpenDown]: isOpen && popperPlacement?.includes(\"bottom\"),\n      })}\n      // TODO: review \"textbox\" role\n      role={ariaRole === \"combobox\" ? \"textbox\" : undefined}\n      {...headerAriaLabels}\n      style={disabled || readOnly ? { pointerEvents: \"none\" } : undefined}\n      // Removes the element from the navigation sequence for keyboard focus if disabled\n      tabIndex={disabled ? -1 : 0}\n      ref={headerRef}\n      {...dropdownHeaderProps}\n    >\n      <div\n        className={cx(classes.selection, {\n          [classes.selectionDisabled]: disabled,\n        })}\n      >\n        {placeholder && typeof placeholder === \"string\" ? (\n          <HvTypography noWrap className={classes.placeholder}>\n            {placeholder}\n          </HvTypography>\n        ) : (\n          placeholder\n        )}\n      </div>\n      <div className={classes.arrowContainer}>\n        {adornment || (\n          <ExpanderComponent\n            iconSize=\"XS\"\n            color={disabled ? \"secondary_60\" : undefined}\n            className={classes.arrow}\n          />\n        )}\n      </div>\n    </div>\n  );\n\n  const headerElement =\n    component && isValidElement(component)\n      ? cloneElement(component as React.ReactElement, {\n          ref: headerRef,\n          ...headerControlArias,\n        })\n      : defaultHeaderElement;\n\n  /** Handle keyboard inside children container. */\n  const handleContainerKeyDown: React.KeyboardEventHandler = (event) => {\n    if (isKey(event, \"Esc\")) {\n      handleToggle(event);\n    }\n    if (isKey(event, \"Tab\") && !event.shiftKey) {\n      const focusList = getFirstAndLastFocus(popperElement);\n      if (document.activeElement === focusList?.last) {\n        event.preventDefault();\n        focusList?.first?.focus();\n      }\n    }\n  };\n\n  const handleOutside: ClickAwayListenerProps[\"onClickAway\"] = (event) => {\n    const isButtonClick = referenceElement?.contains(event.target as any);\n    if (!isButtonClick) {\n      onClickOutside?.(event);\n      setIsOpen(false);\n      onToggle?.(event, false);\n    }\n  };\n\n  const hasCustomHeader = !!HeaderComponentProp;\n  const HeaderComponent = HeaderComponentProp || \"div\";\n  const RootComponent = HeaderComponentProp ? Fragment : \"div\";\n\n  return (\n    <RootComponent {...(!hasCustomHeader && { className: classes.root })}>\n      <HeaderComponent\n        ref={hasCustomHeader ? customHeaderRef : ref}\n        id={id}\n        disabled={hasCustomHeader && disabled}\n        className={cx(className, {\n          [classes.anchor]: !hasCustomHeader,\n          [classes.rootDisabled]: disabled,\n        })}\n        {...(!readOnly && {\n          onKeyDown: handleToggle,\n          onClick: handleToggle,\n        })}\n        {...((ariaRole || hasCustomHeader) && {\n          role: hasCustomHeader ? undefined : ariaRole,\n          ...headerAriaLabels,\n          ...headerControlArias,\n        })}\n        // Removes the element from the navigation sequence for keyboard focus\n        tabIndex={hasCustomHeader ? undefined : -1}\n        {...others}\n      >\n        {headerElement}\n      </HeaderComponent>\n      {isOpen && (\n        <BaseDropdownPanel\n          classes={classes}\n          containerId={containerId}\n          onClickAway={handleOutside}\n          onContainerKeyDown={handleContainerKeyDown}\n        >\n          {children}\n        </BaseDropdownPanel>\n      )}\n    </RootComponent>\n  );\n});\n\nexport const HvBaseDropdown = forwardRef<HTMLDivElement, HvBaseDropdownProps>(\n  function HvBaseDropdown(props, ref) {\n    const {\n      popperProps = {},\n      variableWidth,\n      placement: placementProp = \"right\",\n      onContainerCreation,\n      ...others\n    } = useDefaultProps(\"HvBaseDropdown\", props);\n\n    const placement: Placement = `bottom-${\n      placementProp === \"right\" ? \"start\" : \"end\"\n    }`;\n\n    const { modifiers: popperPropsModifiers, ...otherPopperProps } =\n      popperProps;\n\n    const [referenceElement, setReferenceElement] =\n      useState<HTMLElement | null>(null);\n    const [popperElement, setPopperElement] = useState<HTMLElement | null>(\n      null,\n    );\n\n    const onFirstUpdate = useCallback(() => {\n      onContainerCreation?.(popperElement);\n    }, [onContainerCreation, popperElement]);\n\n    const modifiers = useMemo<Options[\"modifiers\"]>(\n      () => [\n        {\n          name: \"variableWidth\",\n          enabled: !variableWidth,\n          phase: \"beforeWrite\",\n          requires: [\"computeStyles\"],\n          fn: ({ state }) => {\n            state.styles.popper.width = `${state.rects.reference.width}px`;\n          },\n          effect: ({ state }) => {\n            state.elements.popper.style.width = `${\n              (state.elements.reference as any).offsetWidth\n            }px`;\n          },\n        },\n        {\n          name: \"maxSize\",\n          enabled: true,\n          phase: \"main\",\n          requiresIfExists: [\"offset\", \"preventOverflow\", \"flip\"],\n          fn: ({ state, name, options }) => {\n            const overflow = detectOverflow(state, options);\n\n            const x = state.modifiersData.preventOverflow?.x || 0;\n            const y = state.modifiersData.preventOverflow?.y || 0;\n\n            const popperWidth = state.rects.popper.width;\n            const popperHeight = state.rects.popper.height;\n\n            const basePlacement = state.placement.split(\"-\")[0];\n\n            const widthProp = basePlacement === \"left\" ? \"left\" : \"right\";\n            const heightProp = basePlacement === \"top\" ? \"top\" : \"bottom\";\n\n            state.modifiersData[name] = {\n              width: popperWidth - overflow[widthProp] - x,\n              height: popperHeight - overflow[heightProp] - y,\n            };\n          },\n        },\n        {\n          name: \"applyMaxSize\",\n          enabled: true,\n          phase: \"beforeWrite\",\n          requires: [\"maxSize\"],\n          fn: ({ state }) => {\n            // The `maxSize` modifier provides this data\n            const { width, height } = state.modifiersData.maxSize;\n            state.styles.popper.maxWidth = `${width}px`;\n            state.styles.popper.maxHeight = `${height}px`;\n          },\n        },\n        ...(popperPropsModifiers || []),\n      ],\n      [popperPropsModifiers, variableWidth],\n    );\n\n    const popper = usePopper(referenceElement, popperElement, {\n      placement,\n      modifiers,\n      onFirstUpdate,\n      ...otherPopperProps,\n    });\n\n    const value = useMemo(\n      () => ({\n        popperPlacement:\n          (popper?.attributes.popper?.[\"data-popper-placement\"] as Placement) ??\n          \"bottom\",\n        popper,\n        popperElement,\n        setPopperElement,\n        referenceElement,\n        setReferenceElement,\n      }),\n      [popper, popperElement, referenceElement],\n    );\n\n    return (\n      <BaseDropdownContext.Provider value={value}>\n        <BaseDropdown ref={ref} {...others} />\n      </BaseDropdownContext.Provider>\n    );\n  },\n);\n"],"names":["HvBaseDropdown"],"mappings":"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"}

package/dist/esm/BaseDropdown/BaseDropdown.styles.js

@@ -86,8 +86,8 @@ const { useClasses, staticClasses } = createClasses("HvBaseDropdown", {
     color: theme.colors.secondary_80
   },
   panel: {
-    position: "relative",
-    backgroundColor: theme.colors.atmo1,
+    // TODO: remove padding override in v6 (most elements need it)
+    padding: 0,
     border: `1px solid ${theme.colors.secondary}`
   },
   panelOpenedUp: {

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

@@ -1 +1 @@
-{"version":3,"file":"BaseDropdown.styles.js","sources":["../../../src/BaseDropdown/BaseDropdown.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvBaseDropdown\", {\n  root: { width: \"100%\", position: \"relative\" },\n  rootDisabled: {\n    cursor: \"not-allowed\",\n    \"&:focus\": {\n      outline: \"none\",\n    },\n  },\n  anchor: { display: \"inline-block\", width: \"100%\" },\n  container: { zIndex: theme.zIndices.popover, width: \"auto\" },\n  header: {\n    cursor: \"pointer\",\n    userSelect: \"none\",\n    position: \"relative\",\n    background: theme.colors.atmo1,\n    boxSizing: \"border-box\",\n    border: `1px solid ${theme.colors.secondary}`,\n    borderRadius: theme.radii.base,\n    \"&:hover\": {\n      border: `1px solid ${theme.colors.primary}`,\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n      border: `1px solid ${theme.colors.primary}`,\n    },\n  },\n  headerOpen: {\n    border: `1px solid ${theme.colors.secondary}`,\n\n    \"&:hover\": {\n      border: `1px solid ${theme.colors.secondary}`,\n    },\n  },\n  headerOpenUp: {\n    borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`,\n  },\n  headerOpenDown: {\n    borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,\n  },\n  headerDisabled: {\n    cursor: \"not-allowed\",\n    pointerEvents: \"none\",\n    color: theme.colors.secondary_60,\n    border: `1px solid ${theme.colors.secondary_60}`,\n    background: theme.colors.atmo2,\n    \"&:hover\": {\n      border: `1px solid ${theme.colors.secondary_60}`,\n    },\n  },\n  headerReadOnly: {\n    cursor: \"not-allowed\",\n    pointerEvents: \"none\",\n    color: theme.colors.secondary_80,\n    border: `1px solid ${theme.colors.secondary_60}`,\n    background: theme.colors.atmo2,\n    userSelect: \"text\",\n    \"&:focus-visible\": {\n      outline: \"none\",\n      border: `1px solid ${theme.colors.secondary_60}`,\n    },\n  },\n  arrowContainer: {\n    position: \"absolute\",\n    pointerEvents: \"none\",\n    top: -1,\n    right: -1,\n  },\n  arrow: {},\n  selection: {\n    display: \"flex\",\n    alignItems: \"center\",\n    height: \"30px\",\n    boxSizing: \"border-box\",\n    paddingLeft: theme.space.xs,\n    paddingRight: theme.sizes.sm,\n    color: \"inherit\",\n  },\n  selectionDisabled: {},\n  placeholder: {\n    display: \"block\",\n    color: theme.colors.secondary_80,\n  },\n  panel: {\n    position: \"relative\",\n\n    backgroundColor: theme.colors.atmo1,\n    border: `1px solid ${theme.colors.secondary}`,\n  },\n  panelOpenedUp: {\n    top: 1,\n    borderRadius: `${theme.radii.base} ${theme.radii.base} 0 0`,\n  },\n  panelOpenedDown: {\n    top: -1,\n    borderRadius: `0 0 ${theme.radii.base} ${theme.radii.base}`,\n  },\n  inputExtensionOpen: {\n    height: \"0px\",\n    backgroundColor: theme.colors.atmo1,\n    borderTop: \"none\",\n    borderBottom: \"none\",\n    borderRight: `1px solid ${theme.colors.secondary}`,\n    borderLeft: `1px solid ${theme.colors.secondary}`,\n  },\n  inputExtensionLeftPosition: { marginLeft: \"auto\" },\n  inputExtensionOpenShadow: {\n    boxShadow: `0px 8px 0px ${theme.colors.atmo1}, 0px 0px 9px 0px rgba(65,65,65,.12)`,\n  },\n  inputExtensionFloatRight: { float: \"right\" },\n  inputExtensionFloatLeft: { float: \"left\" },\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"BaseDropdown.styles.js","sources":["../../../src/BaseDropdown/BaseDropdown.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvBaseDropdown\", {\n  root: { width: \"100%\", position: \"relative\" },\n  rootDisabled: {\n    cursor: \"not-allowed\",\n    \"&:focus\": {\n      outline: \"none\",\n    },\n  },\n  anchor: { display: \"inline-block\", width: \"100%\" },\n  container: { zIndex: theme.zIndices.popover, width: \"auto\" },\n  header: {\n    cursor: \"pointer\",\n    userSelect: \"none\",\n    position: \"relative\",\n    background: theme.colors.atmo1,\n    boxSizing: \"border-box\",\n    border: `1px solid ${theme.colors.secondary}`,\n    borderRadius: theme.radii.base,\n    \"&:hover\": {\n      border: `1px solid ${theme.colors.primary}`,\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n      border: `1px solid ${theme.colors.primary}`,\n    },\n  },\n  headerOpen: {\n    border: `1px solid ${theme.colors.secondary}`,\n\n    \"&:hover\": {\n      border: `1px solid ${theme.colors.secondary}`,\n    },\n  },\n  headerOpenUp: {\n    borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`,\n  },\n  headerOpenDown: {\n    borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,\n  },\n  headerDisabled: {\n    cursor: \"not-allowed\",\n    pointerEvents: \"none\",\n    color: theme.colors.secondary_60,\n    border: `1px solid ${theme.colors.secondary_60}`,\n    background: theme.colors.atmo2,\n    \"&:hover\": {\n      border: `1px solid ${theme.colors.secondary_60}`,\n    },\n  },\n  headerReadOnly: {\n    cursor: \"not-allowed\",\n    pointerEvents: \"none\",\n    color: theme.colors.secondary_80,\n    border: `1px solid ${theme.colors.secondary_60}`,\n    background: theme.colors.atmo2,\n    userSelect: \"text\",\n    \"&:focus-visible\": {\n      outline: \"none\",\n      border: `1px solid ${theme.colors.secondary_60}`,\n    },\n  },\n  arrowContainer: {\n    position: \"absolute\",\n    pointerEvents: \"none\",\n    top: -1,\n    right: -1,\n  },\n  arrow: {},\n  selection: {\n    display: \"flex\",\n    alignItems: \"center\",\n    height: \"30px\",\n    boxSizing: \"border-box\",\n    paddingLeft: theme.space.xs,\n    paddingRight: theme.sizes.sm,\n    color: \"inherit\",\n  },\n  selectionDisabled: {},\n  placeholder: {\n    display: \"block\",\n    color: theme.colors.secondary_80,\n  },\n  panel: {\n    // TODO: remove padding override in v6 (most elements need it)\n    padding: 0,\n    border: `1px solid ${theme.colors.secondary}`,\n  },\n  panelOpenedUp: {\n    top: 1,\n    borderRadius: `${theme.radii.base} ${theme.radii.base} 0 0`,\n  },\n  panelOpenedDown: {\n    top: -1,\n    borderRadius: `0 0 ${theme.radii.base} ${theme.radii.base}`,\n  },\n  inputExtensionOpen: {\n    height: \"0px\",\n    backgroundColor: theme.colors.atmo1,\n    borderTop: \"none\",\n    borderBottom: \"none\",\n    borderRight: `1px solid ${theme.colors.secondary}`,\n    borderLeft: `1px solid ${theme.colors.secondary}`,\n  },\n  inputExtensionLeftPosition: { marginLeft: \"auto\" },\n  inputExtensionOpenShadow: {\n    boxShadow: `0px 8px 0px ${theme.colors.atmo1}, 0px 0px 9px 0px rgba(65,65,65,.12)`,\n  },\n  inputExtensionFloatRight: { float: \"right\" },\n  inputExtensionFloatLeft: { float: \"left\" },\n});\n"],"names":[],"mappings":"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"}

package/dist/esm/BaseDropdown/BaseDropdownPanel.js

@@ -0,0 +1,80 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { ClickAwayListener } from "@mui/base/ClickAwayListener";
+import { Portal } from "@mui/base/Portal";
+import { useCss, useTheme } from "@hitachivantara/uikit-react-utils";
+import { getContainerElement } from "../utils/document.js";
+import { useBaseDropdownContext } from "./context.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 { 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,
+              className: cx(classes.panel, {
+                [classes.panelOpenedUp]: popperPlacement?.includes("top"),
+                [classes.panelOpenedDown]: popperPlacement?.includes("bottom")
+              }),
+              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")
+                }
+              )
+            }
+          )
+        ]
+      }
+    )
+  );
+  return /* @__PURE__ */ jsx(
+    Portal,
+    {
+      container: getContainerElement(rootId),
+      disablePortal,
+      children: /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway, children: container })
+    }
+  );
+};
+export {
+  BaseDropdownPanel
+};

package/dist/esm/BaseDropdown/BaseDropdownPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseDropdownPanel.js","sources":["../../../src/BaseDropdown/BaseDropdownPanel.tsx"],"sourcesContent":["import {\n  ClickAwayListener,\n  ClickAwayListenerProps,\n} from \"@mui/base/ClickAwayListener\";\nimport { Portal } from \"@mui/base/Portal\";\nimport { useCss, useTheme } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvPanel } from \"../Panel\";\nimport { getContainerElement } from \"../utils/document\";\nimport type {\n  HvBaseDropdownClasses,\n  HvBaseDropdownProps,\n} from \"./BaseDropdown\";\nimport { useBaseDropdownContext } from \"./context\";\n\nexport interface BaseDropdownPanelProps\n  extends Pick<\n    HvBaseDropdownProps,\n    \"disablePortal\" | \"onClickOutside\" | \"children\"\n  > {\n  classes: Required<HvBaseDropdownClasses>;\n  containerId?: string;\n  onContainerKeyDown: (event: any) => void;\n  onClickAway: ClickAwayListenerProps[\"onClickAway\"];\n}\n\nexport const BaseDropdownPanel = ({\n  classes,\n  containerId,\n  children,\n  disablePortal,\n  onContainerKeyDown,\n  onClickAway,\n}: BaseDropdownPanelProps) => {\n  const { cx } = useCss();\n  const { popperPlacement, popper, referenceElement, setPopperElement } =\n    useBaseDropdownContext();\n\n  const { rootId } = useTheme();\n\n  const extensionWidth = referenceElement\n    ? referenceElement?.offsetWidth\n    : \"inherit\";\n\n  const container = (\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n    <div\n      ref={setPopperElement}\n      className={classes.container}\n      onKeyDown={onContainerKeyDown}\n      style={popper?.styles.popper}\n      {...popper?.attributes.popper}\n    >\n      {popperPlacement?.includes(\"bottom\") && (\n        <div\n          style={{ width: extensionWidth }}\n          className={cx(classes.inputExtensionOpen, {\n            [classes.inputExtensionLeftPosition]:\n              popperPlacement.includes(\"end\"),\n          })}\n        />\n      )}\n      <HvPanel\n        // TODO: review in v6. `containerId` needs to be on the role element (`children` has it)\n        id={containerId}\n        className={cx(classes.panel, {\n          [classes.panelOpenedUp]: popperPlacement?.includes(\"top\"),\n          [classes.panelOpenedDown]: popperPlacement?.includes(\"bottom\"),\n        })}\n      >\n        {children}\n      </HvPanel>\n      {popperPlacement?.includes(\"top\") && (\n        <div\n          style={{ width: extensionWidth }}\n          className={cx(\n            classes.inputExtensionOpen,\n            classes.inputExtensionOpenShadow,\n            {\n              [classes.inputExtensionFloatRight]:\n                popperPlacement.includes(\"end\"),\n              [classes.inputExtensionFloatLeft]:\n                popperPlacement.includes(\"start\"),\n            },\n          )}\n        />\n      )}\n    </div>\n  );\n\n  return (\n    <Portal\n      container={getContainerElement(rootId)}\n      disablePortal={disablePortal}\n    >\n      <ClickAwayListener onClickAway={onClickAway}>\n        {container}\n      </ClickAwayListener>\n    </Portal>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA0BO,MAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA8B;AACtB,QAAA,EAAE,GAAG,IAAI,OAAO;AACtB,QAAM,EAAE,iBAAiB,QAAQ,kBAAkB,iBAAA,IACjD,uBAAuB;AAEnB,QAAA,EAAE,OAAO,IAAI,SAAS;AAEtB,QAAA,iBAAiB,mBACnB,kBAAkB,cAClB;AAEE,QAAA;AAAA;AAAA,IAEJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW,QAAQ;AAAA,QACnB,WAAW;AAAA,QACX,OAAO,QAAQ,OAAO;AAAA,QACrB,GAAG,QAAQ,WAAW;AAAA,QAEtB,UAAA;AAAA,UAAiB,iBAAA,SAAS,QAAQ,KACjC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO,EAAE,OAAO,eAAe;AAAA,cAC/B,WAAW,GAAG,QAAQ,oBAAoB;AAAA,gBACxC,CAAC,QAAQ,0BAA0B,GACjC,gBAAgB,SAAS,KAAK;AAAA,cACjC,CAAA;AAAA,YAAA;AAAA,UACH;AAAA,UAEF;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,IAAI;AAAA,cACJ,WAAW,GAAG,QAAQ,OAAO;AAAA,gBAC3B,CAAC,QAAQ,aAAa,GAAG,iBAAiB,SAAS,KAAK;AAAA,gBACxD,CAAC,QAAQ,eAAe,GAAG,iBAAiB,SAAS,QAAQ;AAAA,cAAA,CAC9D;AAAA,cAEA;AAAA,YAAA;AAAA,UACH;AAAA,UACC,iBAAiB,SAAS,KAAK,KAC9B;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO,EAAE,OAAO,eAAe;AAAA,cAC/B,WAAW;AAAA,gBACT,QAAQ;AAAA,gBACR,QAAQ;AAAA,gBACR;AAAA,kBACE,CAAC,QAAQ,wBAAwB,GAC/B,gBAAgB,SAAS,KAAK;AAAA,kBAChC,CAAC,QAAQ,uBAAuB,GAC9B,gBAAgB,SAAS,OAAO;AAAA,gBAAA;AAAA,cACpC;AAAA,YACF;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA;AAMJ,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,oBAAoB,MAAM;AAAA,MACrC;AAAA,MAEA,UAAA,oBAAC,mBAAkB,EAAA,aAChB,UACH,UAAA,CAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/esm/BaseDropdown/{BaseDropdownContext/BaseDropdownContext.js → context.js}

@@ -6,6 +6,6 @@ const BaseDropdownContext = createContext({
 BaseDropdownContext.displayName = "BaseDropdownContext";
 const useBaseDropdownContext = () => useContext(BaseDropdownContext);
 export {
-  BaseDropdownContext as default,
+  BaseDropdownContext,
   useBaseDropdownContext
 };

package/dist/esm/BaseDropdown/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sources":["../../../src/BaseDropdown/context.ts"],"sourcesContent":["import { createContext, Dispatch, SetStateAction, useContext } from \"react\";\nimport { usePopper } from \"react-popper\";\nimport type { Placement } from \"@popperjs/core\";\n\ninterface BaseDropdownValue {\n  popperPlacement?: Placement;\n  popper?: ReturnType<typeof usePopper>;\n  referenceElement: HTMLElement | null;\n  setReferenceElement?: Dispatch<SetStateAction<HTMLElement | null>>;\n  popperElement: HTMLElement | null;\n  setPopperElement?: Dispatch<SetStateAction<HTMLElement | null>>;\n}\n\nexport const BaseDropdownContext = createContext<BaseDropdownValue>({\n  referenceElement: null,\n  popperElement: null,\n});\n\nBaseDropdownContext.displayName = \"BaseDropdownContext\";\n\nexport const useBaseDropdownContext = () => useContext(BaseDropdownContext);\n"],"names":[],"mappings":";AAaO,MAAM,sBAAsB,cAAiC;AAAA,EAClE,kBAAkB;AAAA,EAClB,eAAe;AACjB,CAAC;AAED,oBAAoB,cAAc;AAErB,MAAA,yBAAyB,MAAM,WAAW,mBAAmB;"}