@itwin/itwinui-react 3.0.0-dev.8 → 3.0.0

package/esm/core/ComboBox/ComboBoxMenu.js

@@ -2,112 +2,90 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import cx from 'classnames';
 import * as React from 'react';
-import { Menu } from '../Menu/index.js';
-import { Surface } from '../Surface/index.js';
+import { Menu } from '../Menu/Menu.js';
 import {
   useSafeContext,
   useMergedRefs,
   useVirtualization,
-  mergeRefs,
-  getWindow,
+  Portal,
+  Box,
 } from '../utils/index.js';
 import { ComboBoxStateContext, ComboBoxRefsContext } from './helpers.js';
-const isOverflowOverlaySupported = () =>
-  getWindow()?.CSS?.supports?.('overflow: overlay');
-const VirtualizedComboBoxMenu = React.forwardRef(
-  ({ children, className, style, ...rest }, forwardedRef) => {
-    const { minWidth, id, filteredOptions, getMenuItem, focusedIndex } =
-      useSafeContext(ComboBoxStateContext);
-    const { menuRef } = useSafeContext(ComboBoxRefsContext);
-    const virtualItemRenderer = React.useCallback(
-      (index) =>
-        filteredOptions.length > 0
-          ? getMenuItem(filteredOptions[index], index)
-          : children, // Here is expected empty state content
-      [filteredOptions, getMenuItem, children],
+const VirtualizedComboBoxMenu = (props) => {
+  const { children, ...rest } = props;
+  const { filteredOptions, getMenuItem, focusedIndex } =
+    useSafeContext(ComboBoxStateContext);
+  const { menuRef } = useSafeContext(ComboBoxRefsContext);
+  const virtualItemRenderer = React.useCallback(
+    (index) =>
+      filteredOptions.length > 0
+        ? getMenuItem(filteredOptions[index], index)
+        : children, // Here is expected empty state content
+    [filteredOptions, getMenuItem, children],
+  );
+  const focusedVisibleIndex = React.useMemo(() => {
+    const currentElement = menuRef.current?.querySelector(
+      `[data-iui-index="${focusedIndex}"]`,
     );
-    const focusedVisibleIndex = React.useMemo(() => {
-      const currentElement = menuRef.current?.querySelector(
-        `[data-iui-index="${focusedIndex}"]`,
-      );
-      if (!currentElement) {
-        return focusedIndex;
-      }
-      return Number(
-        currentElement.getAttribute('data-iui-filtered-index') ?? focusedIndex,
-      );
-    }, [focusedIndex, menuRef]);
-    const { outerProps, innerProps, visibleChildren } = useVirtualization({
-      // 'Fool' VirtualScroll by passing length 1
-      // whenever there is no elements, to show empty state message
-      itemsLength: filteredOptions.length || 1,
-      itemRenderer: virtualItemRenderer,
-      scrollToIndex: focusedVisibleIndex,
-    });
-    const surfaceStyles = {
-      minInlineSize: minWidth,
-      // set as constant because we don't want it shifting when items are unmounted
-      maxInlineSize: minWidth,
-      // max-height must be on the outermost element for virtual scroll
-      maxBlockSize: 'calc((var(--iui-component-height) - 1px) * 8.5)',
-      overflowY: isOverflowOverlaySupported() ? 'overlay' : 'auto',
-      ...style,
-    };
-    return React.createElement(
-      Surface,
-      { style: surfaceStyles },
-      React.createElement(
-        'div',
-        { ...outerProps },
-        React.createElement(
-          Menu,
-          {
-            id: `${id}-list`,
-            setFocus: false,
-            role: 'listbox',
-            ref: mergeRefs(menuRef, innerProps.ref, forwardedRef),
-            className: className,
-            style: innerProps.style,
-            ...rest,
-          },
-          visibleChildren,
-        ),
-      ),
+    if (!currentElement) {
+      return focusedIndex;
+    }
+    return Number(
+      currentElement.getAttribute('data-iui-filtered-index') ?? focusedIndex,
     );
-  },
-);
+  }, [focusedIndex, menuRef]);
+  const { outerProps, innerProps, visibleChildren } = useVirtualization({
+    // 'Fool' VirtualScroll by passing length 1
+    // whenever there is no elements, to show empty state message
+    itemsLength: filteredOptions.length || 1,
+    itemRenderer: virtualItemRenderer,
+    scrollToIndex: focusedVisibleIndex,
+  });
+  return React.createElement(
+    Box,
+    { as: 'div', ...outerProps, ...rest },
+    React.createElement(
+      'div',
+      { ...innerProps, ref: innerProps.ref },
+      visibleChildren,
+    ),
+  );
+};
 export const ComboBoxMenu = React.forwardRef((props, forwardedRef) => {
-  const { className, style, ...rest } = props;
-  const { minWidth, id, enableVirtualization } =
+  const { children, style, ...rest } = props;
+  const { id, enableVirtualization, popover } =
     useSafeContext(ComboBoxStateContext);
   const { menuRef } = useSafeContext(ComboBoxRefsContext);
-  const refs = useMergedRefs(menuRef, forwardedRef);
-  const styles = React.useMemo(
-    () => ({
-      minInlineSize: minWidth,
-      maxInlineSize: `min(${minWidth * 2}px, 90vw)`,
-    }),
-    [minWidth],
-  );
-  return React.createElement(
-    React.Fragment,
-    null,
-    !enableVirtualization
-      ? React.createElement(Menu, {
+  const refs = useMergedRefs(popover.refs.setFloating, forwardedRef, menuRef);
+  return (
+    popover.open &&
+    React.createElement(
+      Portal,
+      { portal: true },
+      React.createElement(
+        Menu,
+        {
           id: `${id}-list`,
-          style: { ...styles, ...style },
           setFocus: false,
           role: 'listbox',
           ref: refs,
-          className: cx('iui-scroll', className),
-          ...rest,
-        })
-      : React.createElement(VirtualizedComboBoxMenu, {
-          ref: forwardedRef,
-          ...props,
-        }),
+          ...popover.getFloatingProps({
+            style: !enableVirtualization
+              ? style
+              : {
+                  // set as constant because we don't want it shifting when items are unmounted
+                  maxInlineSize: 0,
+                  ...style,
+                },
+            ...rest,
+          }),
+        },
+        !enableVirtualization
+          ? children
+          : React.createElement(VirtualizedComboBoxMenu, null, children),
+      ),
+    )
   );
 });
 ComboBoxMenu.displayName = 'ComboBoxMenu';

package/esm/core/ComboBox/helpers.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { SelectOption } from '../Select/Select.js';
+import type { usePopover } from '../Popover/Popover.js';
 type ComboBoxAction = {
     type: 'multiselect';
     value: number[];
@@ -33,13 +34,15 @@ export declare const ComboBoxRefsContext: React.Context<{
 type ComboBoxStateContextProps<T = unknown> = {
     isOpen: boolean;
     id: string;
-    minWidth: number;
     enableVirtualization: boolean;
     filteredOptions: SelectOption<T>[];
     onClickHandler?: (prop: number) => void;
     getMenuItem: (option: SelectOption<T>, filteredIndex?: number) => JSX.Element;
     focusedIndex?: number;
     multiple?: boolean;
+    popover: ReturnType<typeof usePopover>;
+    show: () => void;
+    hide: () => void;
 };
 export declare const ComboBoxStateContext: React.Context<ComboBoxStateContextProps<unknown> | undefined>;
 export declare const ComboBoxActionContext: React.Context<((x: ComboBoxAction) => void) | undefined>;

package/esm/core/DatePicker/DatePicker.d.ts

@@ -87,6 +87,15 @@ type DatePickerProps = {
      * Disabled dates cannot be selected.
      */
     isDateDisabled?: (date: Date) => boolean;
+    /**
+     * Whether there is a background, border, shadow, etc.
+     *
+     * Should be set to true if used in a popover that doesn't have its own background,
+     * or set to false if the popover has its own background or embedding within a page.
+     *
+     * @default true
+     */
+    applyBackground?: boolean;
 } & DateRangePickerProps & Omit<TimePickerProps, 'date' | 'onChange' | 'setFocusHour'>;
 /**
  * Date picker component

package/esm/core/DatePicker/DatePicker.js

@@ -13,8 +13,8 @@ import {
   Box,
   useId,
 } from '../utils/index.js';
-import { IconButton } from '../Buttons/IconButton/index.js';
-import { TimePicker } from '../TimePicker/index.js';
+import { IconButton } from '../Buttons/IconButton.js';
+import { TimePicker } from '../TimePicker/TimePicker.js';
 const isSameDay = (a, b) => {
   return (
     a &&
@@ -149,6 +149,7 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => {
     dayProps,
     weekProps,
     isDateDisabled,
+    applyBackground = true,
     ...rest
   } = props;
   const monthNames = localizedNames?.months ?? defaultMonths;
@@ -419,7 +420,15 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => {
   const dateTableId = useId();
   return React.createElement(
     Box,
-    { className: cx('iui-date-picker', className), ref: forwardedRef, ...rest },
+    {
+      className: cx(
+        'iui-date-picker',
+        { 'iui-popover-surface': applyBackground },
+        className,
+      ),
+      ref: forwardedRef,
+      ...rest,
+    },
     React.createElement(
       'div',
       null,

package/esm/core/Dialog/DialogBackdrop.js

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Backdrop } from '../Backdrop/index.js';
+import { Backdrop } from '../Backdrop/Backdrop.js';
 import { useMergedRefs } from '../utils/index.js';
 import { useDialogContext } from './DialogContext.js';
 import cx from 'classnames';

package/esm/core/Dialog/DialogTitleBar.js

@@ -5,7 +5,7 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { SvgClose, mergeEventHandlers, Box } from '../utils/index.js';
-import { IconButton } from '../Buttons/index.js';
+import { IconButton } from '../Buttons/IconButton.js';
 import { useDialogContext } from './DialogContext.js';
 import { DialogTitleBarTitle } from './DialogTitleBarTitle.js';
 import { useDialogDragContext } from './DialogDragContext.js';

package/esm/core/{utils/components → Divider}/Divider.d.ts

@@ -1,4 +1,4 @@
-import type { PolymorphicForwardRefComponent } from '../props.js';
+import type { PolymorphicForwardRefComponent } from '../utils/props.js';
 type DividerProps = {
     /**
      * Sets the orientation of the divider

package/esm/core/{utils/components → Divider}/Divider.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { Box } from './Box.js';
+import { Box } from '../utils/components/Box.js';
 /**
  * Shows a divider
  */

package/esm/core/DropdownMenu/DropdownMenu.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
-import type { CommonProps, PopoverProps } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent, PortalProps } from '../utils/index.js';
+import { usePopover } from '../Popover/Popover.js';
 export type DropdownMenuProps = {
     /**
      * List of menu items. Recommended to use MenuItem component.
      * You can pass function that takes argument `close` that closes the dropdown menu, or a list of MenuItems.
      */
-    menuItems: (close: () => void) => JSX.Element[] | JSX.Element[] | JSX.Element;
+    menuItems: ((close: () => void) => JSX.Element[]) | JSX.Element[] | JSX.Element;
     /**
      * ARIA role. Role of menu. For menu use 'menu', for select use 'listbox'.
      * @default 'menu'
@@ -15,10 +16,10 @@ export type DropdownMenuProps = {
      * Child element to wrap dropdown with.
      */
     children: React.ReactNode;
-} & Omit<PopoverProps, 'content'> & Omit<CommonProps, 'title'>;
+} & Pick<Parameters<typeof usePopover>[0], 'visible' | 'onVisibleChange' | 'placement' | 'matchWidth'> & React.ComponentPropsWithoutRef<'ul'> & Pick<PortalProps, 'portal'>;
 /**
  * Dropdown menu component.
- * Uses the {@link Popover} component, which is a wrapper around [tippy.js](https://atomiks.github.io/tippyjs).
+ * Built on top of the {@link Popover} component.
  * @example
  * const menuItems = (close: () => void) => [
  *   <MenuItem key={1} onClick={onClick(1, close)}>
@@ -35,5 +36,5 @@ export type DropdownMenuProps = {
  *   <Button>Menu</Button>
  * </DropdownMenu>
  */
-export declare const DropdownMenu: (props: DropdownMenuProps) => React.JSX.Element;
+export declare const DropdownMenu: PolymorphicForwardRefComponent<"div", DropdownMenuProps>;
 export default DropdownMenu;

package/esm/core/DropdownMenu/DropdownMenu.js

@@ -3,11 +3,19 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Popover, mergeRefs } from '../utils/index.js';
-import { Menu } from '../Menu/index.js';
+import {
+  useMergedRefs,
+  Portal,
+  cloneElementWithRef,
+  useControlledState,
+  mergeRefs,
+  mergeEventHandlers,
+} from '../utils/index.js';
+import { Menu } from '../Menu/Menu.js';
+import { usePopover } from '../Popover/Popover.js';
 /**
  * Dropdown menu component.
- * Uses the {@link Popover} component, which is a wrapper around [tippy.js](https://atomiks.github.io/tippyjs).
+ * Built on top of the {@link Popover} component.
  * @example
  * const menuItems = (close: () => void) => [
  *   <MenuItem key={1} onClick={onClick(1, close)}>
@@ -24,74 +32,73 @@ import { Menu } from '../Menu/index.js';
  *   <Button>Menu</Button>
  * </DropdownMenu>
  */
-export const DropdownMenu = (props) => {
+export const DropdownMenu = React.forwardRef((props, forwardedRef) => {
   const {
     menuItems,
     children,
-    className,
-    style,
     role = 'menu',
-    visible,
+    visible: visibleProp,
     placement = 'bottom-start',
-    onShow,
-    onHide,
-    trigger,
-    id,
+    matchWidth = false,
+    onVisibleChange,
+    portal = true,
     ...rest
   } = props;
-  const [isVisible, setIsVisible] = React.useState(visible ?? false);
-  React.useEffect(() => {
-    setIsVisible(visible ?? false);
-  }, [visible]);
-  const open = React.useCallback(() => setIsVisible(true), []);
-  const close = React.useCallback(() => setIsVisible(false), []);
+  const [visible, setVisible] = useControlledState(
+    false,
+    visibleProp,
+    onVisibleChange,
+  );
+  const triggerRef = React.useRef(null);
+  const close = React.useCallback(() => {
+    setVisible(false);
+    triggerRef.current?.focus({ preventScroll: true });
+  }, [setVisible]);
   const menuContent = React.useMemo(() => {
     if (typeof menuItems === 'function') {
       return menuItems(close);
     }
     return menuItems;
   }, [menuItems, close]);
-  const targetRef = React.useRef(null);
-  const onShowHandler = React.useCallback(
-    (instance) => {
-      setIsVisible(true);
-      onShow?.(instance);
-    },
-    [onShow],
-  );
-  const onHideHandler = React.useCallback(
-    (instance) => {
-      setIsVisible(false);
-      targetRef.current?.focus();
-      onHide?.(instance);
-    },
-    [onHide],
-  );
+  const popover = usePopover({
+    visible,
+    onVisibleChange: (open) => (open ? setVisible(true) : close()),
+    placement,
+    matchWidth,
+  });
+  const popoverRef = useMergedRefs(forwardedRef, popover.refs.setFloating);
   return React.createElement(
-    Popover,
-    {
-      content: React.createElement(
-        Menu,
-        { className: className, style: style, role: role, id: id },
-        menuContent,
-      ),
-      visible: trigger === undefined ? isVisible : undefined,
-      onClickOutside: close,
-      placement: placement,
-      onShow: onShowHandler,
-      onHide: onHideHandler,
-      trigger: visible === undefined ? trigger : undefined,
-      ...rest,
-    },
-    React.isValidElement(children)
-      ? React.cloneElement(children, {
-          ref: mergeRefs(targetRef, props.children.ref),
-          onClick: (args) => {
-            trigger === undefined && (isVisible ? close() : open());
-            children.props.onClick?.(args);
+    React.Fragment,
+    null,
+    cloneElementWithRef(children, (children) => ({
+      ...popover.getReferenceProps(children.props),
+      'aria-expanded': popover.open,
+      ref: mergeRefs(triggerRef, popover.refs.setReference),
+    })),
+    popover.open &&
+      React.createElement(
+        Portal,
+        { portal: portal },
+        React.createElement(
+          Menu,
+          {
+            ...popover.getFloatingProps({
+              role,
+              ...rest,
+              onKeyDown: mergeEventHandlers(props.onKeyDown, (e) => {
+                if (e.defaultPrevented) {
+                  return;
+                }
+                if (e.key === 'Tab') {
+                  close();
+                }
+              }),
+            }),
+            ref: popoverRef,
           },
-        })
-      : React.createElement(React.Fragment, null),
+          menuContent,
+        ),
+      ),
   );
-};
+});
 export default DropdownMenu;

package/esm/core/ExpandableBlock/ExpandableBlock.d.ts

@@ -106,7 +106,7 @@ export declare const ExpandableBlock: PolymorphicForwardRefComponent<"div", Expa
     EndIcon: PolymorphicForwardRefComponent<"span", Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
     }, "fill" | "as" | "key" | "size" | keyof React.HTMLAttributes<HTMLSpanElement> | "padded"> & {
-        size?: "small" | "large" | "auto" | "medium" | import("../utils/types.js").AnyString | undefined;
+        size?: "small" | "auto" | "medium" | "large" | import("../utils/types.js").AnyString | undefined;
         fill?: "default" | "informational" | "negative" | "positive" | "warning" | import("../utils/types.js").AnyString | undefined;
         padded?: boolean | undefined;
     } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {

package/esm/core/ExpandableBlock/ExpandableBlock.js

@@ -7,13 +7,13 @@ import * as React from 'react';
 import {
   StatusIconMap,
   SvgChevronRight,
-  Icon,
   Box,
   useSafeContext,
   polymorphic,
   mergeEventHandlers,
   ButtonBase,
 } from '../utils/index.js';
+import { Icon } from '../Icon/Icon.js';
 const ExpandableBlockContext = React.createContext(undefined);
 ExpandableBlockContext.displayName = 'ExpandableBlockContext';
 const ExpandableBlockComponent = React.forwardRef((props, forwardedRef) => {

package/esm/core/FileUpload/FileUploadCard.js

@@ -12,11 +12,11 @@ import {
   mergeEventHandlers,
   polymorphic,
   Box,
-  VisuallyHidden,
 } from '../utils/index.js';
 import cx from 'classnames';
 import { FileEmptyCard } from './FileEmptyCard.js';
-import { Anchor } from '../Typography/Anchor/Anchor.js';
+import { Anchor } from '../Typography/Anchor.js';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 const toBytes = (bytes) => {
   const units = [' bytes', 'KB', 'MB', 'GB', 'TB'];
   let i = 0;

package/esm/core/FileUpload/FileUploadTemplate.js

@@ -5,7 +5,7 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { SvgUpload, Box } from '../utils/index.js';
-import { Anchor } from '../Typography/Anchor/Anchor.js';
+import { Anchor } from '../Typography/Anchor.js';
 /**
  * @deprecated Use `FileUploadCard` instead.
  * Default template to be used with the `FileUpload` wrapper component.

package/esm/core/{utils/components → Flex}/Flex.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { AnyString } from '../types.js';
-import type { PolymorphicForwardRefComponent } from '../props.js';
+import type { AnyString } from '../utils/types.js';
+import type { PolymorphicForwardRefComponent } from '../utils/props.js';
 declare const sizeTokens: readonly ["3xs", "2xs", "xs", "s", "m", "l", "xl", "2xl", "3xl"];
 /**
  * String literal shorthands that correspond to the size tokens in [itwinui-variables](https://github.com/iTwin/iTwinUI/blob/main/packages/itwinui-variables/src/sizes.scss).

package/esm/core/{utils/components → Flex}/Flex.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { Box } from './Box.js';
+import { Box } from '../utils/components/Box.js';
 const sizeTokens = ['3xs', '2xs', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl'];
 const getValueForToken = (token) => {
   if (sizeTokens.includes(token)) {

package/esm/core/Header/Header.js

@@ -4,9 +4,9 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { IconButton } from '../Buttons/index.js';
+import { IconButton } from '../Buttons/IconButton.js';
 import { SvgMoreVertical, Box } from '../utils/index.js';
-import { DropdownMenu } from '../DropdownMenu/index.js';
+import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
 const defaultTranslations = {
   moreOptions: 'More options',
 };

package/esm/core/Header/HeaderBasicButton.d.ts

@@ -1,4 +1,4 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import type { ButtonProps } from '../Buttons/Button/Button.js';
+import type { ButtonProps } from '../Buttons/Button.js';
 export declare const HeaderBasicButton: PolymorphicForwardRefComponent<"button", ButtonProps>;
 export default HeaderBasicButton;

package/esm/core/Header/HeaderButton.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import type { ButtonProps } from '../Buttons/Button/Button.js';
+import type { ButtonProps } from '../Buttons/Button.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import type { DropdownButtonProps } from '../Buttons/DropdownButton/DropdownButton.js';
+import type { DropdownButtonProps } from '../Buttons/DropdownButton.js';
 type HeaderButtonProps = {
     /**
      * Main label of the header button.

package/esm/core/Header/HeaderDropdownButton.d.ts

@@ -1,4 +1,4 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import type { DropdownButtonProps } from '../Buttons/DropdownButton/DropdownButton.js';
+import type { DropdownButtonProps } from '../Buttons/DropdownButton.js';
 export declare const HeaderDropdownButton: PolymorphicForwardRefComponent<"button", DropdownButtonProps>;
 export default HeaderDropdownButton;

package/esm/core/Header/HeaderDropdownButton.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { DropdownMenu } from '../DropdownMenu/index.js';
+import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
 import {
   useMergedRefs,
   SvgCaretDownSmall,
@@ -27,8 +27,7 @@ export const HeaderDropdownButton = React.forwardRef((props, ref) => {
     {
       menuItems: menuItems,
       style: { minInlineSize: menuWidth },
-      onShow: () => setIsMenuOpen(true),
-      onHide: () => setIsMenuOpen(false),
+      onVisibleChange: (open) => setIsMenuOpen(open),
     },
     React.createElement(
       HeaderBasicButton,

package/esm/core/Header/HeaderSplitButton.d.ts

@@ -1,4 +1,4 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import type { SplitButtonProps } from '../Buttons/SplitButton/SplitButton.js';
+import type { SplitButtonProps } from '../Buttons/SplitButton.js';
 export declare const HeaderSplitButton: PolymorphicForwardRefComponent<"button", SplitButtonProps>;
 export default HeaderSplitButton;

package/esm/core/Header/HeaderSplitButton.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { DropdownMenu } from '../DropdownMenu/index.js';
+import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
 import {
   SvgCaretDownSmall,
   SvgCaretUpSmall,
@@ -46,8 +46,7 @@ export const HeaderSplitButton = React.forwardRef((props, forwardedRef) => {
         placement: menuPlacement,
         menuItems: menuItems,
         style: { minInlineSize: menuWidth },
-        onShow: React.useCallback(() => setIsMenuOpen(true), []),
-        onHide: React.useCallback(() => setIsMenuOpen(false), []),
+        onVisibleChange: (open) => setIsMenuOpen(open),
       },
       React.createElement(
         ButtonBase,

package/esm/core/{utils/components → Icon}/Icon.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { AnyString } from '../types.js';
-import type { PolymorphicForwardRefComponent } from '../props.js';
+import type { AnyString } from '../utils/types.js';
+import type { PolymorphicForwardRefComponent } from '../utils/props.js';
 export type IconProps = {
     /**
      * Size of the svg.