@itwin/itwinui-react 3.13.4 → 3.14.1

package/DEV-esm/utils/icons/SvgStatusWarning.js

@@ -1,5 +1,10 @@
 import * as React from 'react';
 import { Svg } from './Svg.js';
-export const SvgStatusWarning = (props)=>React.createElement(Svg, props, React.createElement("path", {
-        d: "m15.86807 13.26721-6.77-11.62a1.15 1.15 0 0 0 -1.1-.67 1.17 1.17 0 0 0 -1.1.69l-6.77 11.59a1.2 1.2 0 0 0 1.1 1.72h13.45a1.19 1.19 0 0 0 1.19-1.71zm-6.87-.29h-2v-2h2zm0-3h-2v-5h2z"
-    }));
+export const SvgStatusWarning = (props) =>
+  React.createElement(
+    Svg,
+    props,
+    React.createElement('path', {
+      d: 'm15.86807 13.26721-6.77-11.62a1.15 1.15 0 0 0 -1.1-.67 1.17 1.17 0 0 0 -1.1.69l-6.77 11.59a1.2 1.2 0 0 0 1.1 1.72h13.45a1.19 1.19 0 0 0 1.19-1.71zm-6.87-.29h-2v-2h2zm0-3h-2v-5h2z',
+    }),
+  );

package/DEV-esm/utils/icons/SvgSwap.js

@@ -1,5 +1,10 @@
 import * as React from 'react';
 import { Svg } from './Svg.js';
-export const SvgSwap = (props)=>React.createElement(Svg, props, React.createElement("path", {
-        d: "m5 15-3.78125-3.5 3.78125-3.5v2h8v3h-8zm6-7 3.78125-3.5-3.78125-3.5v2h-8v3h8z"
-    }));
+export const SvgSwap = (props) =>
+  React.createElement(
+    Svg,
+    props,
+    React.createElement('path', {
+      d: 'm5 15-3.78125-3.5 3.78125-3.5v2h8v3h-8zm6-7 3.78125-3.5-3.78125-3.5v2h-8v3h8z',
+    }),
+  );

package/DEV-esm/utils/icons/SvgUpload.js

@@ -1,5 +1,10 @@
 import * as React from 'react';
 import { Svg } from './Svg.js';
-export const SvgUpload = (props)=>React.createElement(Svg, props, React.createElement("path", {
-        d: "m2 5h4v7h4v-7h4l-6-5zm12 6v3h-12v-3h-2v5h16v-5z"
-    }));
+export const SvgUpload = (props) =>
+  React.createElement(
+    Svg,
+    props,
+    React.createElement('path', {
+      d: 'm2 5h4v7h4v-7h4l-6-5zm12 6v3h-12v-3h-2v5h16v-5z',
+    }),
+  );

package/DEV-esm/utils/meta.js

@@ -1,6 +1,6 @@
 import { version } from '../styles.js';
 let _moduleType = 'ESM';
 export const meta = {
-    version,
-    module: _moduleType
+  version,
+  module: _moduleType,
 };

package/DEV-esm/utils/props.js

@@ -1 +1 @@
-export { };
+export {};

package/DEV-esm/utils/providers/HydrationProvider.js

@@ -1,27 +1,38 @@
 import * as React from 'react';
 import { useSyncExternalStore, useIsClient } from '../hooks/index.js';
 let HydrationContext = React.createContext(false);
-let noopSubscribe = ()=>()=>{};
+let noopSubscribe = () => () => {};
 let isServer = 'undefined' == typeof window;
-export const useHydration = ()=>{
-    let hydrating = useSyncExternalStore(noopSubscribe, ()=>false, ()=>!isServer);
-    let hydrated = React.useContext(HydrationContext);
-    let hydratedFallback = useIsClient();
-    if (hydrated || hydratedFallback) return 'hydrated';
-    if (hydrating) return 'hydrating';
+export const useHydration = () => {
+  let hydrating = useSyncExternalStore(
+    noopSubscribe,
+    () => false,
+    () => !isServer,
+  );
+  let hydrated = React.useContext(HydrationContext);
+  let hydratedFallback = useIsClient();
+  if (hydrated || hydratedFallback) return 'hydrated';
+  if (hydrating) return 'hydrating';
 };
-export const HydrationProvider = ({ children })=>{
-    let [isHydrated, setIsHydrated] = React.useState(React.useContext(HydrationContext));
-    let onHydrate = React.useCallback(()=>setIsHydrated(true), []);
-    return React.createElement(HydrationContext.Provider, {
-        value: isHydrated
-    }, isHydrated ? null : React.createElement(HydrationCheck, {
-        onHydrate: onHydrate
-    }), children);
+export const HydrationProvider = ({ children }) => {
+  let [isHydrated, setIsHydrated] = React.useState(
+    React.useContext(HydrationContext),
+  );
+  let onHydrate = React.useCallback(() => setIsHydrated(true), []);
+  return React.createElement(
+    HydrationContext.Provider,
+    {
+      value: isHydrated,
+    },
+    isHydrated
+      ? null
+      : React.createElement(HydrationCheck, {
+          onHydrate: onHydrate,
+        }),
+    children,
+  );
 };
-let HydrationCheck = ({ onHydrate })=>{
-    React.useEffect(()=>void onHydrate(), [
-        onHydrate
-    ]);
-    return null;
+let HydrationCheck = ({ onHydrate }) => {
+  React.useEffect(() => void onHydrate(), [onHydrate]);
+  return null;
 };

package/DEV-esm/utils/providers/ScopeProvider.js

@@ -1,42 +1,43 @@
 import * as React from 'react';
 import { createStore, useAtomValue, useSetAtom } from 'jotai';
 let ScopeContext = React.createContext({
-    store: createStore(),
-    parentStore: null
+  store: createStore(),
+  parentStore: null,
 });
-export const ScopeProvider = ({ children })=>{
-    let store = React.useMemo(()=>createStore(), []);
-    let parentStore = React.useContext(ScopeContext).store;
-    return React.createElement(ScopeContext.Provider, {
-        value: React.useMemo(()=>({
-                store,
-                parentStore
-            }), [
-            store,
-            parentStore
-        ])
-    }, children);
+export const ScopeProvider = ({ children }) => {
+  let store = React.useMemo(() => createStore(), []);
+  let parentStore = React.useContext(ScopeContext).store;
+  return React.createElement(
+    ScopeContext.Provider,
+    {
+      value: React.useMemo(
+        () => ({
+          store,
+          parentStore,
+        }),
+        [store, parentStore],
+      ),
+    },
+    children,
+  );
 };
-export const useScopedAtom = (atom)=>{
-    let { store, parentStore } = React.useContext(ScopeContext);
-    let setAtom = useScopedSetAtom(atom);
-    let value = useAtomValue(atom, {
-        store
-    });
-    let inheritedValue = useAtomValue(atom, {
-        store: parentStore || store
-    });
-    React.useEffect(()=>{
-        if (void 0 == value && void 0 != inheritedValue) setAtom(inheritedValue);
-    });
-    return [
-        value,
-        setAtom
-    ];
+export const useScopedAtom = (atom) => {
+  let { store, parentStore } = React.useContext(ScopeContext);
+  let setAtom = useScopedSetAtom(atom);
+  let value = useAtomValue(atom, {
+    store,
+  });
+  let inheritedValue = useAtomValue(atom, {
+    store: parentStore || store,
+  });
+  React.useEffect(() => {
+    if (void 0 == value && void 0 != inheritedValue) setAtom(inheritedValue);
+  });
+  return [value, setAtom];
 };
-export const useScopedSetAtom = (atom)=>{
-    let { store } = React.useContext(ScopeContext);
-    return useSetAtom(atom, {
-        store
-    });
+export const useScopedSetAtom = (atom) => {
+  let { store } = React.useContext(ScopeContext);
+  return useSetAtom(atom, {
+    store,
+  });
 };

package/DEV-esm/utils/types.js

@@ -1 +1 @@
-export { };
+export {};

package/cjs/core/Breadcrumbs/Breadcrumbs.js

@@ -15,7 +15,6 @@ const _classnames = _interop_require_default._(require('classnames'));
 const _index = require('../../utils/index.js');
 const _Button = require('../Buttons/Button.js');
 const _Anchor = require('../Typography/Anchor.js');
-const logWarning = (0, _index.createWarningLogger)();
 const BreadcrumbsComponent = _react.forwardRef((props, ref) => {
   let {
     children: items,
@@ -108,6 +107,7 @@ const BreadcrumbsComponent = _react.forwardRef((props, ref) => {
 });
 const ListItem = ({ item, isActive }) => {
   let children = item;
+  let logWarning = (0, _index.useWarningLogger)();
   if (
     children?.type === 'span' ||
     children?.type === 'a' ||

package/cjs/core/Buttons/IconButton.d.ts

@@ -21,6 +21,10 @@ export type IconButtonProps = {
      * Passes props to IconButton icon.
      */
     iconProps?: React.ComponentProps<'span'>;
+    /**
+     * @deprecated Use `label` instead.
+     */
+    title?: string;
 } & Omit<ButtonProps, 'startIcon' | 'endIcon' | 'startIconProps' | 'endIconProps' | 'labelProps' | 'loading'>;
 /**
  * Icon button

package/cjs/core/Buttons/IconButton.js

@@ -24,7 +24,8 @@ const IconButton = _react.forwardRef((props, ref) => {
     styleType = 'default',
     size,
     className,
-    label,
+    title,
+    label = title,
     iconProps,
     labelProps,
     ...rest
@@ -33,6 +34,7 @@ const IconButton = _react.forwardRef((props, ref) => {
     _ButtonGroup.ButtonGroupContext,
   );
   let hasPopoverOpen = _react.useContext(_Popover.PopoverOpenContext);
+  let logWarning = (0, _index.useWarningLogger)();
   let button = _react.createElement(
     _index.ButtonBase,
     {

package/cjs/core/Carousel/Carousel.d.ts

@@ -42,21 +42,23 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
     Navigation: PolymorphicForwardRefComponent<"div", {}> & {
         PreviousButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
             ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-        }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
+        }, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
             isActive?: boolean;
             label?: React.ReactNode;
             labelProps?: Omit<React.ComponentPropsWithoutRef<typeof import("../Tooltip/Tooltip.js").Tooltip>, "content" | "reference" | "ariaStrategy" | "children">;
             iconProps?: React.ComponentProps<"span">;
+            title?: string;
         } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
             as?: "button" | undefined;
         }>;
         NextButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
             ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-        }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
+        }, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
             isActive?: boolean;
             label?: React.ReactNode;
             labelProps?: Omit<React.ComponentPropsWithoutRef<typeof import("../Tooltip/Tooltip.js").Tooltip>, "content" | "reference" | "ariaStrategy" | "children">;
             iconProps?: React.ComponentProps<"span">;
+            title?: string;
         } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
             as?: "button" | undefined;
         }>;

package/cjs/core/Carousel/CarouselNavigation.d.ts

@@ -9,21 +9,23 @@ import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {}> & {
     PreviousButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
+    }, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
         isActive?: boolean;
         label?: React.ReactNode;
         labelProps?: Omit<React.ComponentPropsWithoutRef<typeof import("../Tooltip/Tooltip.js").Tooltip>, "content" | "reference" | "ariaStrategy" | "children">;
         iconProps?: React.ComponentProps<"span">;
+        title?: string;
     } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
         as?: "button" | undefined;
     }>;
     NextButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
+    }, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
         isActive?: boolean;
         label?: React.ReactNode;
         labelProps?: Omit<React.ComponentPropsWithoutRef<typeof import("../Tooltip/Tooltip.js").Tooltip>, "content" | "reference" | "ariaStrategy" | "children">;
         iconProps?: React.ComponentProps<"span">;
+        title?: string;
     } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
         as?: "button" | undefined;
     }>;

package/cjs/core/ComboBox/ComboBox.js

@@ -318,6 +318,11 @@ const ComboBox = _react.forwardRef((props, forwardedRef) => {
     visible: isOpen,
     onVisibleChange: (open) => (open ? show() : hide()),
     matchWidth: true,
+    middleware: {
+      size: {
+        maxHeight: 'var(--iui-menu-max-height)',
+      },
+    },
     closeOnOutsideClick: true,
     interactions: {
       click: false,

package/cjs/core/InputWithDecorations/InputWithDecorations.d.ts

@@ -32,7 +32,7 @@ export declare const InputWithDecorations: PolymorphicForwardRefComponent<"div",
      */
     Button: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & Omit<import("../Buttons/IconButton.js").IconButtonProps, "styleType"> & {
+    }, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & Omit<import("../Buttons/IconButton.js").IconButtonProps, "styleType"> & {
         styleType?: import("../Buttons/IconButton.js").IconButtonProps["styleType"];
     } & {
         as?: "button" | undefined;

package/cjs/core/List/List.d.ts

@@ -1 +1 @@
-export declare const List: import("../../utils/props.js").PolymorphicForwardRefComponent<"ul", {}>;
+export declare const List: import("../../utils/props.js").PolymorphicForwardRefComponent<"div", {}>;

package/cjs/core/List/List.js

@@ -9,6 +9,6 @@ Object.defineProperty(exports, 'List', {
   },
 });
 const _index = require('../../utils/index.js');
-const List = _index.polymorphic.ul('iui-list', {
+const List = _index.polymorphic.div('iui-list', {
   role: 'list',
 });

package/cjs/core/List/ListItem.d.ts

@@ -40,11 +40,11 @@ export type ListItemOwnProps = {
  *   <ListItem>item 3</ListItem>
  * </List>
  */
-export declare const ListItem: PolymorphicForwardRefComponent<"li", ListItemOwnProps> & {
+export declare const ListItem: PolymorphicForwardRefComponent<"div", ListItemOwnProps> & {
     /**
      * Icon to be placed at the beginning or end of the ListItem.
      */
-    Icon: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    Icon: PolymorphicForwardRefComponent<"div", {}>;
     /**
      * Wrapper for the main content of the ListItem.
      *
@@ -53,7 +53,7 @@ export declare const ListItem: PolymorphicForwardRefComponent<"li", ListItemOwnP
      *   and push the icon to the end
      * - When using `ListItem.Description`.
      */
-    Content: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    Content: PolymorphicForwardRefComponent<"div", {}>;
     /**
      * Description to be used in addition to the main label of the ListItem.
      * Should be used as a child of `ListItem.Content`.
@@ -66,7 +66,7 @@ export declare const ListItem: PolymorphicForwardRefComponent<"li", ListItemOwnP
      *  </ListItem.Content>
      * </ListItem>
      */
-    Description: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    Description: PolymorphicForwardRefComponent<"div", {}>;
     /**
      * Wrapper over [LinkAction](https://itwinui.bentley.com/docs/linkaction) which allows rendering a link inside a ListItem.
      * This ensures that clicking anywhere on the ListItem will trigger the link.

package/cjs/core/List/ListItem.js

@@ -25,7 +25,7 @@ const ListItemComponent = _react.forwardRef((props, ref) => {
     ...rest
   } = props;
   return _react.createElement(_index.Box, {
-    as: 'li',
+    role: 'listitem',
     className: (0, _classnames.default)('iui-list-item', className),
     'data-iui-active': active ? 'true' : void 0,
     'data-iui-disabled': disabled ? 'true' : void 0,
@@ -36,11 +36,9 @@ const ListItemComponent = _react.forwardRef((props, ref) => {
     ...rest,
   });
 });
-const ListItemIcon = (0, _index.polymorphic)('iui-list-item-icon');
-const ListItemContent = (0, _index.polymorphic)('iui-list-item-content');
-const ListItemDescription = (0, _index.polymorphic)(
-  'iui-list-item-description',
-);
+const ListItemIcon = _index.polymorphic.div('iui-list-item-icon');
+const ListItemContent = _index.polymorphic.div('iui-list-item-content');
+const ListItemDescription = _index.polymorphic.div('iui-list-item-description');
 const ListItemAction = _LinkAction.LinkAction;
 const ListItem = Object.assign(ListItemComponent, {
   Icon: ListItemIcon,

package/cjs/core/Menu/Menu.js

@@ -79,6 +79,12 @@ const Menu = _react.forwardRef((props, ref) => {
       ...restInteractionsProps,
     },
     ...restPopoverProps,
+    middleware: {
+      size: {
+        maxHeight: 'var(--iui-menu-max-height)',
+      },
+      ...restPopoverProps.middleware,
+    },
   });
   let { getReferenceProps, getFloatingProps, getItemProps } = (0,
   _react1.useInteractions)([

package/cjs/core/Menu/MenuDivider.d.ts

@@ -13,4 +13,4 @@
  *   ]}
  * </Menu>
  */
-export declare const MenuDivider: import("../../utils/props.js").PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+export declare const MenuDivider: import("../../utils/props.js").PolymorphicForwardRefComponent<"div", {}>;

package/cjs/core/Menu/MenuDivider.js

@@ -9,6 +9,6 @@ Object.defineProperty(exports, 'MenuDivider', {
   },
 });
 const _index = require('../../utils/index.js');
-const MenuDivider = (0, _index.polymorphic)('iui-menu-divider', {
+const MenuDivider = _index.polymorphic.div('iui-menu-divider', {
   role: 'separator',
 });

package/cjs/core/Menu/MenuItem.js

@@ -15,7 +15,6 @@ const _index = require('../../utils/index.js');
 const _Menu = require('./Menu.js');
 const _ListItem = require('../List/ListItem.js');
 const _classnames = _interop_require_default._(require('classnames'));
-const logWarning = (0, _index.createWarningLogger)();
 const MenuItem = _react.forwardRef((props, forwardedRef) => {
   let {
     className,
@@ -34,6 +33,7 @@ const MenuItem = _react.forwardRef((props, forwardedRef) => {
     subMenuItems = [],
     ...rest
   } = props;
+  let logWarning = (0, _index.useWarningLogger)();
   let parentMenu = _react.useContext(_Menu.MenuContext);
   let menuItemRef = _react.useRef(null);
   let submenuId = (0, _index.useId)();

package/cjs/core/Overlay/Overlay.d.ts

@@ -38,7 +38,7 @@ export declare const Overlay: PolymorphicForwardRefComponent<"div", OverlayCompo
      * The main component is a wrapper to hold the
      * `Overlay.HiddenContent` and `Overlay.Overlay`.
      */
-    Wrapper: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    Wrapper: PolymorphicForwardRefComponent<"div", {}>;
     /**
      * `Overlay.HiddenContent` houses page elements that are blurred by the
      * Overlay. These elements will become inert when the overlay is active.
@@ -48,6 +48,6 @@ export declare const Overlay: PolymorphicForwardRefComponent<"div", OverlayCompo
      * `Overlay.Overlay` sits on top of the HiddenContent, and can show
      * any arbitrary content like a progress indicator and loading message.
      */
-    Overlay: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+    Overlay: PolymorphicForwardRefComponent<"div", {}>;
 };
 export {};

package/cjs/core/Overlay/Overlay.js

@@ -36,8 +36,8 @@ const OverlayHiddenContent = _react.forwardRef((props, ref) => {
     children,
   );
 });
-const OverlayOverlay = (0, _index.polymorphic)('iui-overlay');
-const OverlayWrapper = (0, _index.polymorphic)('iui-overlay-wrapper');
+const OverlayOverlay = _index.polymorphic.div('iui-overlay');
+const OverlayWrapper = _index.polymorphic.div('iui-overlay-wrapper');
 const Overlay = Object.assign(OverlayComponent, {
   Wrapper: OverlayWrapper,
   HiddenContent: OverlayHiddenContent,

package/cjs/core/Popover/Popover.d.ts

@@ -26,7 +26,7 @@ type PopoverOptions = {
     /**
      * Middleware options.
      *
-     * By default, `flip` and `shift` are enabled.
+     * By default, `flip`, `shift` and `size` are enabled.
      *
      * @see https://floating-ui.com/docs/middleware
      */
@@ -34,6 +34,13 @@ type PopoverOptions = {
         offset?: number;
         flip?: boolean;
         shift?: boolean;
+        size?: boolean | {
+            /**
+             * Override the maximum height of the popover. Must be a CSS-compatible value.
+             * @default "400px"
+             */
+            maxHeight?: string;
+        };
         autoPlacement?: boolean;
         hide?: boolean;
         inline?: boolean;