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

package/cjs/core/DatePicker/DatePicker.js

@@ -9,8 +9,8 @@ const tslib_1 = require('tslib');
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const React = tslib_1.__importStar(require('react'));
 const index_js_1 = require('../utils/index.js');
-const index_js_2 = require('../Buttons/IconButton/index.js');
-const index_js_3 = require('../TimePicker/index.js');
+const IconButton_js_1 = require('../Buttons/IconButton.js');
+const TimePicker_js_1 = require('../TimePicker/TimePicker.js');
 const isSameDay = (a, b) => {
   return (
     a &&
@@ -146,6 +146,7 @@ exports.DatePicker = React.forwardRef((props, forwardedRef) => {
     dayProps,
     weekProps,
     isDateDisabled,
+    applyBackground = true,
     ...rest
   } = props;
   const monthNames = localizedNames?.months ?? defaultMonths;
@@ -417,7 +418,11 @@ exports.DatePicker = React.forwardRef((props, forwardedRef) => {
   return React.createElement(
     index_js_1.Box,
     {
-      className: (0, classnames_1.default)('iui-date-picker', className),
+      className: (0, classnames_1.default)(
+        'iui-date-picker',
+        { 'iui-popover-surface': applyBackground },
+        className,
+      ),
       ref: forwardedRef,
       ...rest,
     },
@@ -436,7 +441,7 @@ exports.DatePicker = React.forwardRef((props, forwardedRef) => {
         },
         showYearSelection &&
           React.createElement(
-            index_js_2.IconButton,
+            IconButton_js_1.IconButton,
             {
               styleType: 'borderless',
               onClick: handleMoveToPreviousYear,
@@ -446,7 +451,7 @@ exports.DatePicker = React.forwardRef((props, forwardedRef) => {
             React.createElement(index_js_1.SvgChevronLeftDouble, null),
           ),
         React.createElement(
-          index_js_2.IconButton,
+          IconButton_js_1.IconButton,
           {
             styleType: 'borderless',
             onClick: handleMoveToPreviousMonth,
@@ -476,7 +481,7 @@ exports.DatePicker = React.forwardRef((props, forwardedRef) => {
           displayedYear,
         ),
         React.createElement(
-          index_js_2.IconButton,
+          IconButton_js_1.IconButton,
           {
             styleType: 'borderless',
             onClick: handleMoveToNextMonth,
@@ -487,7 +492,7 @@ exports.DatePicker = React.forwardRef((props, forwardedRef) => {
         ),
         showYearSelection &&
           React.createElement(
-            index_js_2.IconButton,
+            IconButton_js_1.IconButton,
             {
               styleType: 'borderless',
               onClick: handleMoveToNextYear,
@@ -561,7 +566,7 @@ exports.DatePicker = React.forwardRef((props, forwardedRef) => {
       ),
     ),
     showTime &&
-      React.createElement(index_js_3.TimePicker, {
+      React.createElement(TimePicker_js_1.TimePicker, {
         date: selectedStartDay ?? selectedDay,
         use12Hours: use12Hours,
         precision: precision,

package/cjs/core/Dialog/DialogBackdrop.js

@@ -7,8 +7,8 @@ const tslib_1 = require('tslib');
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../Backdrop/index.js');
-const index_js_2 = require('../utils/index.js');
+const Backdrop_js_1 = require('../Backdrop/Backdrop.js');
+const index_js_1 = require('../utils/index.js');
 const DialogContext_js_1 = require('./DialogContext.js');
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 /**
@@ -31,7 +31,7 @@ exports.DialogBackdrop = React.forwardRef((props, ref) => {
     ...rest
   } = props;
   const backdropRef = React.useRef(null);
-  const refs = (0, index_js_2.useMergedRefs)(backdropRef, ref);
+  const refs = (0, index_js_1.useMergedRefs)(backdropRef, ref);
   const handleMouseDown = (event) => {
     // Prevents React from resetting its properties
     event.persist();
@@ -43,7 +43,7 @@ exports.DialogBackdrop = React.forwardRef((props, ref) => {
     }
     onMouseDown?.(event);
   };
-  return React.createElement(index_js_1.Backdrop, {
+  return React.createElement(Backdrop_js_1.Backdrop, {
     isVisible: isVisible,
     className: (0, classnames_1.default)(
       { 'iui-backdrop-fixed': relativeTo === 'viewport' },

package/cjs/core/Dialog/DialogTitleBar.js

@@ -9,7 +9,7 @@ const tslib_1 = require('tslib');
 const React = tslib_1.__importStar(require('react'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const index_js_1 = require('../utils/index.js');
-const index_js_2 = require('../Buttons/index.js');
+const IconButton_js_1 = require('../Buttons/IconButton.js');
 const DialogContext_js_1 = require('./DialogContext.js');
 const DialogTitleBarTitle_js_1 = require('./DialogTitleBarTitle.js');
 const DialogDragContext_js_1 = require('./DialogDragContext.js');
@@ -74,7 +74,7 @@ exports.DialogTitleBar = Object.assign(
             ),
             isDismissible &&
               React.createElement(
-                index_js_2.IconButton,
+                IconButton_js_1.IconButton,
                 {
                   size: 'small',
                   styleType: 'borderless',

package/cjs/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/cjs/core/{utils/components → Divider}/Divider.js

@@ -8,7 +8,7 @@ const tslib_1 = require('tslib');
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const Box_js_1 = require('./Box.js');
+const Box_js_1 = require('../utils/components/Box.js');
 /**
  * Shows a divider
  */

package/cjs/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/cjs/core/DropdownMenu/DropdownMenu.js

@@ -8,10 +8,11 @@ const tslib_1 = require('tslib');
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
 const index_js_1 = require('../utils/index.js');
-const index_js_2 = require('../Menu/index.js');
+const Menu_js_1 = require('../Menu/Menu.js');
+const Popover_js_1 = require('../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)}>
@@ -28,75 +29,79 @@ const index_js_2 = require('../Menu/index.js');
  *   <Button>Menu</Button>
  * </DropdownMenu>
  */
-const DropdownMenu = (props) => {
+exports.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] = (0, index_js_1.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 = (0, Popover_js_1.usePopover)({
+    visible,
+    onVisibleChange: (open) => (open ? setVisible(true) : close()),
+    placement,
+    matchWidth,
+  });
+  const popoverRef = (0, index_js_1.useMergedRefs)(
+    forwardedRef,
+    popover.refs.setFloating,
   );
   return React.createElement(
-    index_js_1.Popover,
-    {
-      content: React.createElement(
-        index_js_2.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: (0, index_js_1.mergeRefs)(targetRef, props.children.ref),
-          onClick: (args) => {
-            trigger === undefined && (isVisible ? close() : open());
-            children.props.onClick?.(args);
+    React.Fragment,
+    null,
+    (0, index_js_1.cloneElementWithRef)(children, (children) => ({
+      ...popover.getReferenceProps(children.props),
+      'aria-expanded': popover.open,
+      ref: (0, index_js_1.mergeRefs)(triggerRef, popover.refs.setReference),
+    })),
+    popover.open &&
+      React.createElement(
+        index_js_1.Portal,
+        { portal: portal },
+        React.createElement(
+          Menu_js_1.Menu,
+          {
+            ...popover.getFloatingProps({
+              role,
+              ...rest,
+              onKeyDown: (0, index_js_1.mergeEventHandlers)(
+                props.onKeyDown,
+                (e) => {
+                  if (e.defaultPrevented) {
+                    return;
+                  }
+                  if (e.key === 'Tab') {
+                    close();
+                  }
+                },
+              ),
+            }),
+            ref: popoverRef,
           },
-        })
-      : React.createElement(React.Fragment, null),
+          menuContent,
+        ),
+      ),
   );
-};
-exports.DropdownMenu = DropdownMenu;
+});
 exports.default = exports.DropdownMenu;

package/cjs/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/cjs/core/ExpandableBlock/ExpandableBlock.js

@@ -9,6 +9,7 @@ const tslib_1 = require('tslib');
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const React = tslib_1.__importStar(require('react'));
 const index_js_1 = require('../utils/index.js');
+const Icon_js_1 = require('../Icon/Icon.js');
 const ExpandableBlockContext = React.createContext(undefined);
 ExpandableBlockContext.displayName = 'ExpandableBlockContext';
 const ExpandableBlockComponent = React.forwardRef((props, forwardedRef) => {
@@ -125,7 +126,7 @@ ExpandableBlockTrigger.displayName = 'ExpandableBlock.Trigger';
 const ExpandableBlockExpandIcon = React.forwardRef((props, forwardedRef) => {
   const { className, children, ...rest } = props;
   return React.createElement(
-    index_js_1.Icon,
+    Icon_js_1.Icon,
     {
       className: (0, classnames_1.default)(
         'iui-expandable-block-icon',
@@ -176,7 +177,7 @@ const ExpandableBlockEndIcon = React.forwardRef((props, forwardedRef) => {
   const { status } = (0, index_js_1.useSafeContext)(ExpandableBlockContext);
   const icon = children ?? (status && index_js_1.StatusIconMap[status]());
   return React.createElement(
-    index_js_1.Icon,
+    Icon_js_1.Icon,
     { fill: status, ref: forwardedRef, ...rest },
     icon,
   );

package/cjs/core/FileUpload/FileUploadCard.js

@@ -10,7 +10,8 @@ const React = tslib_1.__importStar(require('react'));
 const index_js_1 = require('../utils/index.js');
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const FileEmptyCard_js_1 = require('./FileEmptyCard.js');
-const Anchor_js_1 = require('../Typography/Anchor/Anchor.js');
+const Anchor_js_1 = require('../Typography/Anchor.js');
+const VisuallyHidden_js_1 = require('../VisuallyHidden/VisuallyHidden.js');
 const toBytes = (bytes) => {
   const units = [' bytes', 'KB', 'MB', 'GB', 'TB'];
   let i = 0;
@@ -128,7 +129,7 @@ const FileUploadCardInput = React.forwardRef((props, ref) => {
   return React.createElement(
     React.Fragment,
     null,
-    React.createElement(index_js_1.VisuallyHidden, {
+    React.createElement(VisuallyHidden_js_1.VisuallyHidden, {
       as: 'input',
       type: 'file',
       unhideOnFocus: false,

package/cjs/core/FileUpload/FileUploadTemplate.js

@@ -9,7 +9,7 @@ const tslib_1 = require('tslib');
 const React = tslib_1.__importStar(require('react'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const index_js_1 = require('../utils/index.js');
-const Anchor_js_1 = require('../Typography/Anchor/Anchor.js');
+const Anchor_js_1 = require('../Typography/Anchor.js');
 /**
  * @deprecated Use `FileUploadCard` instead.
  * Default template to be used with the `FileUpload` wrapper component.

package/cjs/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/cjs/core/{utils/components → Flex}/Flex.js

@@ -8,7 +8,7 @@ const tslib_1 = require('tslib');
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const Box_js_1 = require('./Box.js');
+const Box_js_1 = require('../utils/components/Box.js');
 const sizeTokens = ['3xs', '2xs', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl'];
 const getValueForToken = (token) => {
   if (sizeTokens.includes(token)) {

package/cjs/core/Header/Header.js

@@ -8,9 +8,9 @@ const tslib_1 = require('tslib');
  *--------------------------------------------------------------------------------------------*/
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../Buttons/index.js');
-const index_js_2 = require('../utils/index.js');
-const index_js_3 = require('../DropdownMenu/index.js');
+const IconButton_js_1 = require('../Buttons/IconButton.js');
+const index_js_1 = require('../utils/index.js');
+const DropdownMenu_js_1 = require('../DropdownMenu/DropdownMenu.js');
 const defaultTranslations = {
   moreOptions: 'More options',
 };
@@ -55,7 +55,7 @@ exports.Header = React.forwardRef((props, forwardedRef) => {
   } = props;
   const headerTranslations = { ...defaultTranslations, ...translatedStrings };
   return React.createElement(
-    index_js_2.Box,
+    index_js_1.Box,
     {
       as: 'header',
       className: (0, classnames_1.default)('iui-page-header', className),
@@ -64,36 +64,36 @@ exports.Header = React.forwardRef((props, forwardedRef) => {
       ...rest,
     },
     React.createElement(
-      index_js_2.Box,
+      index_js_1.Box,
       { className: 'iui-page-header-left' },
       appLogo,
       breadcrumbs &&
-        React.createElement(index_js_2.Box, {
+        React.createElement(index_js_1.Box, {
           className: 'iui-page-header-divider',
         }),
       breadcrumbs,
     ),
     children &&
       React.createElement(
-        index_js_2.Box,
+        index_js_1.Box,
         { className: 'iui-page-header-center' },
         children,
       ),
     React.createElement(
-      index_js_2.Box,
+      index_js_1.Box,
       { className: 'iui-page-header-right' },
       actions,
       menuItems &&
         React.createElement(
-          index_js_3.DropdownMenu,
+          DropdownMenu_js_1.DropdownMenu,
           { menuItems: menuItems },
           React.createElement(
-            index_js_1.IconButton,
+            IconButton_js_1.IconButton,
             {
               styleType: 'borderless',
               'aria-label': headerTranslations.moreOptions,
             },
-            React.createElement(index_js_2.SvgMoreVertical, {
+            React.createElement(index_js_1.SvgMoreVertical, {
               'aria-hidden': true,
             }),
           ),

package/cjs/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/cjs/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/cjs/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/cjs/core/Header/HeaderDropdownButton.js

@@ -8,27 +8,26 @@ const tslib_1 = require('tslib');
  *--------------------------------------------------------------------------------------------*/
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../DropdownMenu/index.js');
-const index_js_2 = require('../utils/index.js');
+const DropdownMenu_js_1 = require('../DropdownMenu/DropdownMenu.js');
+const index_js_1 = require('../utils/index.js');
 const HeaderBasicButton_js_1 = require('./HeaderBasicButton.js');
 exports.HeaderDropdownButton = React.forwardRef((props, ref) => {
   const { menuItems, className, children, ...rest } = props;
   const [isMenuOpen, setIsMenuOpen] = React.useState(false);
   const [menuWidth, setMenuWidth] = React.useState(0);
   const buttonRef = React.useRef(null);
-  const refs = (0, index_js_2.useMergedRefs)(ref, buttonRef);
+  const refs = (0, index_js_1.useMergedRefs)(ref, buttonRef);
   React.useEffect(() => {
     if (buttonRef.current) {
       setMenuWidth(buttonRef.current.offsetWidth);
     }
   }, [children]);
   return React.createElement(
-    index_js_1.DropdownMenu,
+    DropdownMenu_js_1.DropdownMenu,
     {
       menuItems: menuItems,
       style: { minInlineSize: menuWidth },
-      onShow: () => setIsMenuOpen(true),
-      onHide: () => setIsMenuOpen(false),
+      onVisibleChange: (open) => setIsMenuOpen(open),
     },
     React.createElement(
       HeaderBasicButton_js_1.HeaderBasicButton,
@@ -40,11 +39,11 @@ exports.HeaderDropdownButton = React.forwardRef((props, ref) => {
         ref: refs,
         'aria-label': 'Dropdown',
         endIcon: isMenuOpen
-          ? React.createElement(index_js_2.SvgCaretUpSmall, {
+          ? React.createElement(index_js_1.SvgCaretUpSmall, {
               className: 'iui-header-breadcrumb-button-dropdown-icon',
               'aria-hidden': true,
             })
-          : React.createElement(index_js_2.SvgCaretDownSmall, {
+          : React.createElement(index_js_1.SvgCaretDownSmall, {
               className: 'iui-header-breadcrumb-button-dropdown-icon',
               'aria-hidden': true,
             }),

package/cjs/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/cjs/core/Header/HeaderSplitButton.js

@@ -8,8 +8,8 @@ const tslib_1 = require('tslib');
  *--------------------------------------------------------------------------------------------*/
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../DropdownMenu/index.js');
-const index_js_2 = require('../utils/index.js');
+const DropdownMenu_js_1 = require('../DropdownMenu/DropdownMenu.js');
+const index_js_1 = require('../utils/index.js');
 const HeaderBasicButton_js_1 = require('./HeaderBasicButton.js');
 exports.HeaderSplitButton = React.forwardRef((props, forwardedRef) => {
   const {
@@ -29,7 +29,7 @@ exports.HeaderSplitButton = React.forwardRef((props, forwardedRef) => {
     }
   }, [children]);
   return React.createElement(
-    index_js_2.Box,
+    index_js_1.Box,
     {
       className: (0, classnames_1.default)(
         'iui-header-breadcrumb-button-wrapper',
@@ -43,16 +43,15 @@ exports.HeaderSplitButton = React.forwardRef((props, forwardedRef) => {
       children,
     ),
     React.createElement(
-      index_js_1.DropdownMenu,
+      DropdownMenu_js_1.DropdownMenu,
       {
         placement: menuPlacement,
         menuItems: menuItems,
         style: { minInlineSize: menuWidth },
-        onShow: React.useCallback(() => setIsMenuOpen(true), []),
-        onHide: React.useCallback(() => setIsMenuOpen(false), []),
+        onVisibleChange: (open) => setIsMenuOpen(open),
       },
       React.createElement(
-        index_js_2.ButtonBase,
+        index_js_1.ButtonBase,
         {
           'aria-label': 'More',
           className:
@@ -60,11 +59,11 @@ exports.HeaderSplitButton = React.forwardRef((props, forwardedRef) => {
           disabled: disabled,
         },
         isMenuOpen
-          ? React.createElement(index_js_2.SvgCaretUpSmall, {
+          ? React.createElement(index_js_1.SvgCaretUpSmall, {
               className: 'iui-header-breadcrumb-button-dropdown-icon',
               'aria-hidden': true,
             })
-          : React.createElement(index_js_2.SvgCaretDownSmall, {
+          : React.createElement(index_js_1.SvgCaretDownSmall, {
               className: 'iui-header-breadcrumb-button-dropdown-icon',
               'aria-hidden': true,
             }),

package/cjs/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.

package/cjs/core/{utils/components → Icon}/Icon.js

@@ -8,7 +8,7 @@ const tslib_1 = require('tslib');
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const Box_js_1 = require('./Box.js');
+const Box_js_1 = require('../utils/components/Box.js');
 const getSizeValue = (size) => {
   switch (size) {
     case 'small':