@hitachivantara/uikit-react-core 5.80.1 → 5.81.0

package/dist/cjs/Accordion/Accordion.cjs

@@ -8,9 +8,9 @@ const useExpandable = require("../hooks/useExpandable.cjs");
 const Accordion_styles = require("./Accordion.styles.cjs");
 const ButtonBase = require("../ButtonBase/ButtonBase.cjs");
 const Typography = require("../Typography/Typography.cjs");
-const HvAccordion = (props) => {
+const HvAccordion = React.forwardRef(function HvAccordion2(props, ref) {
   const {
-    id: idProp,
+    id,
     className,
     classes: classesProp,
     disabled = false,
@@ -27,7 +27,7 @@ const HvAccordion = (props) => {
   } = uikitReactUtils.useDefaultProps("HvAccordion", props);
   const { classes, cx } = Accordion_styles.useClasses(classesProp);
   const { isOpen, toggleOpen, buttonProps, regionProps } = useExpandable.useExpandable({
-    id: idProp,
+    id,
     expanded,
     disabled,
     defaultExpanded
@@ -79,7 +79,7 @@ const HvAccordion = (props) => {
     isOpen,
     labelVariant
   ]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { id: idProp, className: cx(classes.root, className), ...others, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, id, className: cx(classes.root, className), ...others, children: [
     accordionHeader,
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -92,6 +92,6 @@ const HvAccordion = (props) => {
       }
     )
   ] });
-};
+});
 exports.accordionClasses = Accordion_styles.staticClasses;
 exports.HvAccordion = HvAccordion;

package/dist/cjs/ActionBar/ActionBar.cjs

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const ActionBar_styles = require("./ActionBar.styles.cjs");
-const HvActionBar = (props) => {
+const HvActionBar = React.forwardRef(function HvActionBar2(props, ref) {
   const {
     classes: classesProp,
     className,
@@ -11,7 +12,7 @@ const HvActionBar = (props) => {
     ...others
   } = uikitReactUtils.useDefaultProps("HvActionBar", props);
   const { classes, cx } = ActionBar_styles.useClasses(classesProp);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.root, className), ...others, children });
-};
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cx(classes.root, className), ...others, children });
+});
 exports.actionBarClasses = ActionBar_styles.staticClasses;
 exports.HvActionBar = HvActionBar;

package/dist/cjs/ActionsGeneric/ActionsGeneric.cjs

@@ -9,7 +9,7 @@ const ActionsGeneric_styles = require("./ActionsGeneric.styles.cjs");
 const IconButton = require("../IconButton/IconButton.cjs");
 const Button = require("../Button/Button.cjs");
 const DropDownMenu = require("../DropDownMenu/DropDownMenu.cjs");
-const HvActionsGeneric = (props) => {
+const HvActionsGeneric = React.forwardRef(function HvActionsGeneric2(props, ref) {
   const {
     id: idProp,
     classes: classesProp,
@@ -97,6 +97,7 @@ const HvActionsGeneric = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
+      ref,
       className: cx(
         classes.root,
         { [classes.actionContainer]: actionOverflow },
@@ -106,6 +107,6 @@ const HvActionsGeneric = (props) => {
       children: actionOverflow ? renderActionsGrid() : actions.map((action, idx) => renderButton(action, idx))
     }
   );
-};
+});
 exports.actionsGenericClasses = ActionsGeneric_styles.staticClasses;
 exports.HvActionsGeneric = HvActionsGeneric;

package/dist/cjs/AppSwitcher/AppSwitcher.cjs

@@ -9,7 +9,7 @@ const Panel = require("../Panel/Panel.cjs");
 const Typography = require("../Typography/Typography.cjs");
 const OverflowTooltip = require("../OverflowTooltip/OverflowTooltip.cjs");
 const ListContainer = require("../ListContainer/ListContainer.cjs");
-const HvAppSwitcher = (props) => {
+const HvAppSwitcher = React.forwardRef(function HvAppSwitcher2(props, ref) {
   const {
     className,
     classes: classesProp,
@@ -54,6 +54,7 @@ const HvAppSwitcher = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Panel.HvPanel,
     {
+      ref,
       className: cx(
         classes.root,
         classes[layout],
@@ -94,6 +95,6 @@ const HvAppSwitcher = (props) => {
       ]
     }
   );
-};
+});
 exports.appSwitcherClasses = AppSwitcher_styles.staticClasses;
 exports.HvAppSwitcher = HvAppSwitcher;

package/dist/cjs/Avatar/Avatar.cjs

@@ -12,7 +12,7 @@ const sizes = require("../utils/sizes.cjs");
 const Avatar_styles = require("./Avatar.styles.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const MuiAvatar__default = /* @__PURE__ */ _interopDefault(MuiAvatar);
-const HvAvatar = React.forwardRef((props, ref) => {
+const HvAvatar = React.forwardRef(function HvAvatar2(props, ref) {
   const {
     className,
     style,

package/dist/cjs/AvatarGroup/AvatarGroup.cjs

@@ -79,7 +79,7 @@ const Overflow = ({
   );
 };
 const HvAvatarGroup = React.forwardRef(
-  (props, ref) => {
+  function HvAvatarGroup2(props, ref) {
     const {
       className,
       style,

package/dist/cjs/Badge/Badge.cjs

@@ -5,7 +5,7 @@ const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const Badge_styles = require("./Badge.styles.cjs");
 const Typography = require("../Typography/Typography.cjs");
-const HvBadge = React.forwardRef((props, ref) => {
+const HvBadge = React.forwardRef(function HvBadge2(props, ref) {
   const {
     classes: classesProp,
     className,

package/dist/cjs/Banner/Banner.cjs

@@ -11,7 +11,7 @@ const BannerContent = require("./BannerContent/BannerContent.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const Slide__default = /* @__PURE__ */ _interopDefault(Slide);
 const Snackbar__default = /* @__PURE__ */ _interopDefault(Snackbar);
-const HvBanner = (props) => {
+const HvBanner = React.forwardRef(function HvBanner2(props, ref) {
   const {
     id,
     classes: classesProp,
@@ -54,6 +54,7 @@ const HvBanner = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     Snackbar__default.default,
     {
+      ref,
       id,
       open,
       className,
@@ -85,6 +86,6 @@ const HvBanner = (props) => {
       )
     }
   );
-};
+});
 exports.bannerClasses = Banner_styles.staticClasses;
 exports.HvBanner = HvBanner;

package/dist/cjs/Banner/BannerContent/BannerContent.cjs

@@ -10,7 +10,7 @@ const ActionContainer = require("./ActionContainer/ActionContainer.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const SnackbarContent__default = /* @__PURE__ */ _interopDefault(SnackbarContent);
 const HvBannerContent = React.forwardRef(
-  (props, ref) => {
+  function HvBannerContent2(props, ref) {
     const {
       id,
       classes: classesProp,

package/dist/cjs/BaseCheckBox/BaseCheckBox.cjs

@@ -15,7 +15,7 @@ const getSelectorIcons = () => {
     checkboxChecked: /* @__PURE__ */ jsxRuntime.jsx(icons.Check, {})
   };
 };
-const HvBaseCheckBox = React.forwardRef((props, ref) => {
+const HvBaseCheckBox = React.forwardRef(function HvBaseCheckBox2(props, ref) {
   const {
     id,
     classes: classesProp,

package/dist/cjs/BaseDropdown/BaseDropdown.cjs

@@ -2,24 +2,20 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const reactDom = require("react-dom");
 const reactPopper = require("react-popper");
-const ClickAwayListener = require("@mui/material/ClickAwayListener");
+const utils = require("@mui/material/utils");
 const core = require("@popperjs/core");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const useControlled = require("../hooks/useControlled.cjs");
-const useForkRef = require("../hooks/useForkRef.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
-const document$1 = require("../utils/document.cjs");
 const focusableElementFinder = require("../utils/focusableElementFinder.cjs");
 const keyboardUtils = require("../utils/keyboardUtils.cjs");
 const setId = require("../utils/setId.cjs");
 const BaseDropdown_styles = require("./BaseDropdown.styles.cjs");
-const BaseDropdownContext = require("./BaseDropdownContext/BaseDropdownContext.cjs");
+const BaseDropdownPanel = require("./BaseDropdownPanel.cjs");
+const context = require("./context.cjs");
 const Typography = require("../Typography/Typography.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const ClickAwayListener__default = /* @__PURE__ */ _interopDefault(ClickAwayListener);
 const BaseDropdown = React.forwardRef((props, ref) => {
   const {
     id: idProp,
@@ -29,6 +25,7 @@ const BaseDropdown = React.forwardRef((props, ref) => {
     role,
     placeholder,
     component,
+    headerComponent: HeaderComponentProp,
     adornment,
     expanded,
     dropdownHeaderProps,
@@ -48,22 +45,17 @@ const BaseDropdown = React.forwardRef((props, ref) => {
   const { classes, cx } = BaseDropdown_styles.useClasses(classesProp);
   const {
     popperPlacement,
-    popper,
     popperElement,
     referenceElement,
-    setPopperElement,
     setReferenceElement
-  } = BaseDropdownContext.useBaseDropdownContext();
-  const { rootId } = uikitReactUtils.useTheme();
+  } = context.useBaseDropdownContext();
   const [isOpen, setIsOpen] = useControlled.useControlled(expanded, Boolean(defaultExpanded));
-  const handleDropdownHeaderRefProp = useForkRef.useForkRef(
+  const headerRef = utils.useForkRef(
+    setReferenceElement,
     dropdownHeaderRefProp,
     dropdownHeaderProps?.ref
   );
-  const handleDropdownHeaderRef = useForkRef.useForkRef(
-    setReferenceElement,
-    handleDropdownHeaderRefProp
-  );
+  const customHeaderRef = utils.useForkRef(ref, headerRef);
   const ariaRole = role || (component == null ? "combobox" : void 0);
   const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : void 0);
   const id = useUniqueId.useUniqueId(idProp);
@@ -80,7 +72,6 @@ const BaseDropdown = React.forwardRef((props, ref) => {
     "aria-label": ariaLabelProp,
     "aria-labelledby": ariaLabelledByProp
   };
-  const extensionWidth = referenceElement ? referenceElement?.offsetWidth : "inherit";
   const handleToggle = React.useCallback(
     (event) => {
       if (event && !keyboardUtils.isKey(event, "Tab")) {
@@ -116,7 +107,7 @@ const BaseDropdown = React.forwardRef((props, ref) => {
       ...headerAriaLabels,
       style: disabled || readOnly ? { pointerEvents: "none" } : void 0,
       tabIndex: disabled ? -1 : 0,
-      ref: handleDropdownHeaderRef,
+      ref: headerRef,
       ...dropdownHeaderProps,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -140,114 +131,71 @@ const BaseDropdown = React.forwardRef((props, ref) => {
     }
   );
   const headerElement = component && React.isValidElement(component) ? React.cloneElement(component, {
-    ref: handleDropdownHeaderRef,
+    ref: headerRef,
     ...headerControlArias
   }) : defaultHeaderElement;
-  const containerComponent = (() => {
-    if (!document$1.getDocument()) {
-      return null;
+  const handleContainerKeyDown = (event) => {
+    if (keyboardUtils.isKey(event, "Esc")) {
+      handleToggle(event);
     }
-    const handleContainerKeyDown = (event) => {
-      if (keyboardUtils.isKey(event, "Esc")) {
-        handleToggle(event);
-      }
-      if (keyboardUtils.isKey(event, "Tab") && !event.shiftKey) {
-        const focusList = focusableElementFinder.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__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref: setPopperElement,
-        className: classes.container,
-        style: popper?.styles.popper,
-        ...popper?.attributes.popper,
-        children: /* @__PURE__ */ jsxRuntime.jsx(ClickAwayListener__default.default, { onClickAway: handleOutside, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { onKeyDown: handleContainerKeyDown, children: [
-          popperPlacement?.includes("bottom") && /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              style: { width: extensionWidth },
-              className: cx(classes.inputExtensionOpen, {
-                [classes.inputExtensionLeftPosition]: popperPlacement.includes("end")
-              })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              id: containerId,
-              className: cx(classes.panel, {
-                [classes.panelOpenedUp]: popperPlacement?.includes("top"),
-                [classes.panelOpenedDown]: popperPlacement?.includes("bottom")
-              }),
-              children
-            }
-          ),
-          popperPlacement?.includes("top") && /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              style: { width: extensionWidth },
-              className: cx(
-                classes.inputExtensionOpen,
-                classes.inputExtensionOpenShadow,
-                {
-                  [classes.inputExtensionFloatRight]: popperPlacement.includes("end"),
-                  [classes.inputExtensionFloatLeft]: popperPlacement.includes("start")
-                }
-              )
-            }
-          )
-        ] }) })
+    if (keyboardUtils.isKey(event, "Tab") && !event.shiftKey) {
+      const focusList = focusableElementFinder.getFirstAndLastFocus(popperElement);
+      if (document.activeElement === focusList?.last) {
+        event.preventDefault();
+        focusList?.first?.focus();
       }
-    );
-    if (disablePortal) return container;
-    return reactDom.createPortal(
-      container,
-      document.getElementById(rootId || "") || document.body
-    );
-  })();
-  return /* @__PURE__ */ jsxRuntime.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 ? React.Fragment : "div";
+  return /* @__PURE__ */ jsxRuntime.jsxs(RootComponent, { ...!hasCustomHeader && { className: classes.root }, children: [
     /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+      BaseDropdownPanel.BaseDropdownPanel,
+      {
+        classes,
+        containerId,
+        onClickAway: handleOutside,
+        onContainerKeyDown: handleContainerKeyDown,
+        children
+      }
+    )
   ] });
 });
 const HvBaseDropdown = React.forwardRef(
-  (props, ref) => {
+  function HvBaseDropdown2(props, ref) {
     const {
       popperProps = {},
       variableWidth,
@@ -256,58 +204,14 @@ const HvBaseDropdown = React.forwardRef(
       ...others
     } = uikitReactUtils.useDefaultProps("HvBaseDropdown", props);
     const placement = `bottom-${placementProp === "right" ? "start" : "end"}`;
-    const { modifiers: popperPropsModifiers = [], ...otherPopperProps } = popperProps;
+    const { modifiers: popperPropsModifiers, ...otherPopperProps } = popperProps;
     const [referenceElement, setReferenceElement] = React.useState(null);
     const [popperElement, setPopperElement] = React.useState(
       null
     );
-    const [popperMaxSize, setPopperMaxSize] = React.useState({});
     const onFirstUpdate = React.useCallback(() => {
       onContainerCreation?.(popperElement);
     }, [onContainerCreation, popperElement]);
-    const applyMaxSizeCalculator = React.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 = React.useCallback(
-      ({ state }) => {
-        state.styles.popper.width = `${state.rects.reference.width}px`;
-      },
-      []
-    );
-    const widthCalculatorEffect = React.useCallback(
-      ({ state }) => {
-        state.elements.popper.style.width = `${state.elements.reference.offsetWidth}px`;
-      },
-      []
-    );
-    const maxSizeCalculator = React.useCallback(
-      ({ state, name, options }) => {
-        const overflow = core.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 = React.useMemo(
       () => [
         {
@@ -315,33 +219,47 @@ const HvBaseDropdown = React.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 = core.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 = reactPopper.usePopper(referenceElement, popperElement, {
       placement,
@@ -351,7 +269,6 @@ const HvBaseDropdown = React.forwardRef(
     });
     const value = React.useMemo(
       () => ({
-        ...popperMaxSize,
         popperPlacement: popper?.attributes.popper?.["data-popper-placement"] ?? "bottom",
         popper,
         popperElement,
@@ -359,9 +276,9 @@ const HvBaseDropdown = React.forwardRef(
         referenceElement,
         setReferenceElement
       }),
-      [popper, popperElement, popperMaxSize, referenceElement]
+      [popper, popperElement, referenceElement]
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(BaseDropdownContext.default.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(BaseDropdown, { ref, ...others }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(context.BaseDropdownContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(BaseDropdown, { ref, ...others }) });
   }
 );
 exports.baseDropdownClasses = BaseDropdown_styles.staticClasses;

package/dist/cjs/BaseDropdown/BaseDropdown.styles.cjs

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

package/dist/cjs/BaseDropdown/BaseDropdownPanel.cjs

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const ClickAwayListener = require("@mui/base/ClickAwayListener");
+const Portal = require("@mui/base/Portal");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const document = require("../utils/document.cjs");
+const context = require("./context.cjs");
+const Panel = require("../Panel/Panel.cjs");
+const BaseDropdownPanel = ({
+  classes,
+  containerId,
+  children,
+  disablePortal,
+  onContainerKeyDown,
+  onClickAway
+}) => {
+  const { cx } = uikitReactUtils.useCss();
+  const { popperPlacement, popper, referenceElement, setPopperElement } = context.useBaseDropdownContext();
+  const { rootId } = uikitReactUtils.useTheme();
+  const extensionWidth = referenceElement ? referenceElement?.offsetWidth : "inherit";
+  const container = (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: setPopperElement,
+        className: classes.container,
+        onKeyDown: onContainerKeyDown,
+        style: popper?.styles.popper,
+        ...popper?.attributes.popper,
+        children: [
+          popperPlacement?.includes("bottom") && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: { width: extensionWidth },
+              className: cx(classes.inputExtensionOpen, {
+                [classes.inputExtensionLeftPosition]: popperPlacement.includes("end")
+              })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Panel.HvPanel,
+            {
+              id: containerId,
+              className: cx(classes.panel, {
+                [classes.panelOpenedUp]: popperPlacement?.includes("top"),
+                [classes.panelOpenedDown]: popperPlacement?.includes("bottom")
+              }),
+              children
+            }
+          ),
+          popperPlacement?.includes("top") && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: { width: extensionWidth },
+              className: cx(
+                classes.inputExtensionOpen,
+                classes.inputExtensionOpenShadow,
+                {
+                  [classes.inputExtensionFloatRight]: popperPlacement.includes("end"),
+                  [classes.inputExtensionFloatLeft]: popperPlacement.includes("start")
+                }
+              )
+            }
+          )
+        ]
+      }
+    )
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Portal.Portal,
+    {
+      container: document.getContainerElement(rootId),
+      disablePortal,
+      children: /* @__PURE__ */ jsxRuntime.jsx(ClickAwayListener.ClickAwayListener, { onClickAway, children: container })
+    }
+  );
+};
+exports.BaseDropdownPanel = BaseDropdownPanel;

package/dist/cjs/BaseDropdown/{BaseDropdownContext/BaseDropdownContext.cjs → context.cjs}

@@ -1,5 +1,5 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const BaseDropdownContext = React.createContext({
   referenceElement: null,
@@ -7,5 +7,5 @@ const BaseDropdownContext = React.createContext({
 });
 BaseDropdownContext.displayName = "BaseDropdownContext";
 const useBaseDropdownContext = () => React.useContext(BaseDropdownContext);
-exports.default = BaseDropdownContext;
+exports.BaseDropdownContext = BaseDropdownContext;
 exports.useBaseDropdownContext = useBaseDropdownContext;