@itwin/itwinui-react 3.15.3 → 3.15.5

package/cjs/utils/components/OverflowContainer.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import type { PolymorphicForwardRefComponent } from '../props.js';
+type OverflowContainerProps = {
+    /**
+     * The orientation of the overflow in container.
+     * @default 'horizontal'
+     */
+    overflowOrientation?: 'horizontal' | 'vertical';
+    /**
+     * Count of the *original* items (i.e. when sufficient space is available).
+     */
+    itemsCount: number;
+};
+type OverflowContainerOverflowNodeProps = {
+    children: React.ReactNode;
+};
+/**
+ * Wrapper over `useOverflow`.
+ *
+ * - Use `OverflowContainer.useContext()` to get overflow related properties.
+ * - Wrap overflow content in `OverflowContainer.OverflowNode` to conditionally render it when overflowing.
+ */
+export declare const OverflowContainer: PolymorphicForwardRefComponent<"div", OverflowContainerProps> & {
+    /**
+     * Wrap overflow content in this component to conditionally render it when overflowing.
+     */
+    OverflowNode: (props: OverflowContainerOverflowNodeProps) => React.ReactNode;
+    /**
+     * Get overflow related properties of the nearest `OverflowContainer` ancestor.
+     */
+    useContext: typeof useOverflowContainerContext;
+};
+declare function useOverflowContainerContext(): {
+    visibleCount: number;
+    itemsCount: number;
+};
+export {};

package/cjs/utils/components/OverflowContainer.js

@@ -0,0 +1,62 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+Object.defineProperty(exports, 'OverflowContainer', {
+  enumerable: true,
+  get: function () {
+    return OverflowContainer;
+  },
+});
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _react = _interop_require_default._(require('react'));
+const _useMergedRefs = require('../hooks/useMergedRefs.js');
+const _Box = require('./Box.js');
+const _useOverflow = require('../hooks/useOverflow.js');
+const _useSafeContext = require('../hooks/useSafeContext.js');
+const OverflowContainerComponent = _react.default.forwardRef((props, ref) => {
+  let { itemsCount, children, overflowOrientation, ...rest } = props;
+  let [containerRef, visibleCount] = (0, _useOverflow.useOverflow)(
+    itemsCount,
+    false,
+    overflowOrientation,
+  );
+  let overflowContainerContextValue = _react.default.useMemo(
+    () => ({
+      visibleCount,
+      itemsCount,
+    }),
+    [itemsCount, visibleCount],
+  );
+  return _react.default.createElement(
+    OverflowContainerContext.Provider,
+    {
+      value: overflowContainerContextValue,
+    },
+    _react.default.createElement(
+      _Box.Box,
+      {
+        ref: (0, _useMergedRefs.useMergedRefs)(ref, containerRef),
+        ...rest,
+      },
+      children,
+    ),
+  );
+});
+const OverflowContainerOverflowNode = (props) => {
+  let { children } = props;
+  let { visibleCount, itemsCount } = useOverflowContainerContext();
+  let isOverflowing = visibleCount < itemsCount;
+  return isOverflowing ? children : null;
+};
+const OverflowContainer = Object.assign(OverflowContainerComponent, {
+  OverflowNode: OverflowContainerOverflowNode,
+  useContext: useOverflowContainerContext,
+});
+const OverflowContainerContext = _react.default.createContext(void 0);
+function useOverflowContainerContext() {
+  let overflowContainerContext = (0, _useSafeContext.useSafeContext)(
+    OverflowContainerContext,
+  );
+  return overflowContainerContext;
+}

package/cjs/utils/components/index.d.ts

@@ -12,3 +12,4 @@ export * from './Portal.js';
 export * from './ShadowRoot.js';
 export * from './LineClamp.js';
 export * from './FieldsetBase.js';
+export * from './OverflowContainer.js';

package/cjs/utils/components/index.js

@@ -17,3 +17,4 @@ _export_star._(require('./Portal.js'), exports);
 _export_star._(require('./ShadowRoot.js'), exports);
 _export_star._(require('./LineClamp.js'), exports);
 _export_star._(require('./FieldsetBase.js'), exports);
+_export_star._(require('./OverflowContainer.js'), exports);

package/cjs/utils/hooks/useOverflow.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 /**
  * Hook that observes the size of an element and returns the number of items
  * that should be visible based on the size of the container element.
@@ -6,7 +5,7 @@ import * as React from 'react';
  * The returned number should be used to render the element with fewer items.
  *
  * @private
- * @param items Items that this element contains.
+ * @param itemsCount Number of items that this element contains.
  * @param disabled Set to true to disconnect the observer.
  * @param dimension 'horizontal' (default) or 'vertical'
  * @returns [callback ref to set on container, stateful count of visible items]
@@ -21,4 +20,4 @@ import * as React from 'react';
  *   </div>
  * );
  */
-export declare const useOverflow: <T extends HTMLElement>(items: React.ReactNode[] | string, disabled?: boolean, orientation?: "horizontal" | "vertical") => readonly [(instance: T | null | undefined) => void, number];
+export declare const useOverflow: <T extends HTMLElement>(itemsCount: number, disabled?: boolean, orientation?: "horizontal" | "vertical") => readonly [(instance: T | null | undefined) => void, number];

package/cjs/utils/hooks/useOverflow.js

@@ -14,10 +14,14 @@ const _useMergedRefs = require('./useMergedRefs.js');
 const _useResizeObserver = require('./useResizeObserver.js');
 const _useIsomorphicLayoutEffect = require('./useIsomorphicLayoutEffect.js');
 const STARTING_MAX_ITEMS_COUNT = 20;
-const useOverflow = (items, disabled = false, orientation = 'horizontal') => {
+const useOverflow = (
+  itemsCount,
+  disabled = false,
+  orientation = 'horizontal',
+) => {
   let containerRef = _react.useRef(null);
   let [visibleCount, setVisibleCount] = _react.useState(() =>
-    disabled ? items.length : Math.min(items.length, STARTING_MAX_ITEMS_COUNT),
+    disabled ? itemsCount : Math.min(itemsCount, STARTING_MAX_ITEMS_COUNT),
   );
   let needsFullRerender = _react.useRef(true);
   let [containerSize, setContainerSize] = _react.useState(0);
@@ -32,12 +36,12 @@ const useOverflow = (items, disabled = false, orientation = 'horizontal') => {
   );
   let resizeObserverRef = _react.useRef(observer);
   (0, _useIsomorphicLayoutEffect.useLayoutEffect)(() => {
-    if (disabled) setVisibleCount(items.length);
+    if (disabled) setVisibleCount(itemsCount);
     else {
-      setVisibleCount(Math.min(items.length, STARTING_MAX_ITEMS_COUNT));
+      setVisibleCount(Math.min(itemsCount, STARTING_MAX_ITEMS_COUNT));
       needsFullRerender.current = true;
     }
-  }, [containerSize, disabled, items]);
+  }, [containerSize, disabled, itemsCount]);
   let mergedRefs = (0, _useMergedRefs.useMergedRefs)(containerRef, resizeRef);
   (0, _useIsomorphicLayoutEffect.useLayoutEffect)(() => {
     if (!containerRef.current || disabled) {
@@ -57,14 +61,14 @@ const useOverflow = (items, disabled = false, orientation = 'horizontal') => {
         0,
       );
       let currentVisibleCount =
-        visibleCount || Math.min(items.length, STARTING_MAX_ITEMS_COUNT);
+        visibleCount || Math.min(itemsCount, STARTING_MAX_ITEMS_COUNT);
       let avgItemSize = childrenSize / currentVisibleCount;
       let visibleItems = Math.floor(availableSize / avgItemSize);
       if (!isNaN(visibleItems))
-        setVisibleCount(Math.min(items.length, 2 * visibleItems));
+        setVisibleCount(Math.min(itemsCount, 2 * visibleItems));
     }
     needsFullRerender.current = false;
-  }, [containerSize, visibleCount, disabled, items.length, orientation]);
+  }, [containerSize, visibleCount, disabled, itemsCount, orientation]);
   (0, _useIsomorphicLayoutEffect.useLayoutEffect)(() => {
     previousContainerSize.current = containerSize;
   }, [containerSize]);

package/esm/core/Breadcrumbs/Breadcrumbs.js

@@ -1,104 +1,123 @@
 import * as React from 'react';
 import cx from 'classnames';
 import {
-  useMergedRefs,
-  useOverflow,
   SvgChevronRight,
   Box,
+  OverflowContainer,
   useWarningLogger,
 } from '../../utils/index.js';
 import { Button } from '../Buttons/Button.js';
 import { Anchor } from '../Typography/Anchor.js';
 let BreadcrumbsComponent = React.forwardRef((props, ref) => {
   let {
-    children: items,
-    currentIndex = items.length - 1,
+    children: childrenProp,
+    currentIndex = React.Children.count(childrenProp) - 1,
     separator,
     overflowButton,
     className,
     ...rest
   } = props;
-  let [overflowRef, visibleCount] = useOverflow(items);
-  let refs = useMergedRefs(overflowRef, ref);
+  let items = React.useMemo(
+    () => React.Children.toArray(childrenProp),
+    [childrenProp],
+  );
   return React.createElement(
     Box,
     {
       as: 'nav',
       className: cx('iui-breadcrumbs', className),
-      ref: refs,
+      ref: ref,
       'aria-label': 'Breadcrumb',
       ...rest,
     },
     React.createElement(
-      Box,
+      OverflowContainer,
       {
         as: 'ol',
+        itemsCount: items.length,
         className: 'iui-breadcrumbs-list',
       },
-      visibleCount > 1 &&
+      React.createElement(
+        BreadcrumbContent,
+        {
+          currentIndex: currentIndex,
+          overflowButton: overflowButton,
+          separator: separator,
+        },
+        items,
+      ),
+    ),
+  );
+});
+let BreadcrumbContent = (props) => {
+  let { children: items, currentIndex, overflowButton, separator } = props;
+  let { visibleCount } = OverflowContainer.useContext();
+  return React.createElement(
+    React.Fragment,
+    null,
+    visibleCount > 1 &&
+      React.createElement(
+        React.Fragment,
+        null,
+        React.createElement(ListItem, {
+          item: items[0],
+          isActive: 0 === currentIndex,
+        }),
+        React.createElement(Separator, {
+          separator: separator,
+        }),
+      ),
+    items.length - visibleCount > 0 &&
+      React.createElement(
+        React.Fragment,
+        null,
         React.createElement(
-          React.Fragment,
-          null,
-          React.createElement(ListItem, {
-            item: items[0],
-            isActive: 0 === currentIndex,
-          }),
-          React.createElement(Separator, {
-            separator: separator,
-          }),
+          Box,
+          {
+            as: 'li',
+            className: 'iui-breadcrumbs-item',
+          },
+          overflowButton
+            ? overflowButton(visibleCount)
+            : React.createElement(
+                Box,
+                {
+                  as: 'span',
+                  className: 'iui-breadcrumbs-content',
+                },
+                '…',
+              ),
         ),
-      items.length - visibleCount > 0 &&
-        React.createElement(
+        React.createElement(Separator, {
+          separator: separator,
+        }),
+      ),
+    items
+      .slice(
+        visibleCount > 1 ? items.length - visibleCount + 1 : items.length - 1,
+      )
+      .map((_, _index) => {
+        let index =
+          visibleCount > 1
+            ? 1 + (items.length - visibleCount) + _index
+            : items.length - 1;
+        return React.createElement(
           React.Fragment,
-          null,
-          React.createElement(
-            Box,
-            {
-              as: 'li',
-              className: 'iui-breadcrumbs-item',
-            },
-            overflowButton
-              ? overflowButton(visibleCount)
-              : React.createElement(
-                  Box,
-                  {
-                    as: 'span',
-                    className: 'iui-breadcrumbs-content',
-                  },
-                  '…',
-                ),
-          ),
-          React.createElement(Separator, {
-            separator: separator,
+          {
+            key: index,
+          },
+          React.createElement(ListItem, {
+            item: items[index],
+            isActive: currentIndex === index,
           }),
-        ),
-      items
-        .slice(
-          visibleCount > 1 ? items.length - visibleCount + 1 : items.length - 1,
-        )
-        .map((_, _index) => {
-          let index =
-            visibleCount > 1
-              ? 1 + (items.length - visibleCount) + _index
-              : items.length - 1;
-          return React.createElement(
-            React.Fragment,
-            {
-              key: index,
-            },
-            React.createElement(ListItem, {
-              item: items[index],
-              isActive: currentIndex === index,
+          index < items.length - 1 &&
+            React.createElement(Separator, {
+              separator: separator,
             }),
-            index < items.length - 1 &&
-              React.createElement(Separator, {
-                separator: separator,
-              }),
-          );
-        }),
-    ),
+        );
+      }),
   );
-});
+};
 let ListItem = ({ item, isActive }) => {
   let children = item;
   let logWarning = useWarningLogger();

package/esm/core/ButtonGroup/ButtonGroup.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import cx from 'classnames';
-import { useOverflow, useMergedRefs, Box } from '../../utils/index.js';
+import { Box, OverflowContainer } from '../../utils/index.js';
 import {
   Composite,
   CompositeItem,
@@ -91,14 +91,12 @@ let OverflowGroup = React.forwardRef((props, forwardedRef) => {
     () => React.Children.toArray(childrenProp).filter(Boolean),
     [childrenProp],
   );
-  let [overflowRef, visibleCount] = useOverflow(
-    items,
-    !overflowButton,
-    orientation,
-  );
   return React.createElement(
-    BaseGroup,
+    OverflowContainer,
     {
+      as: BaseGroup,
+      itemsCount: items.length,
+      overflowOrientation: orientation,
       orientation: orientation,
       ...rest,
       className: cx(
@@ -108,27 +106,34 @@ let OverflowGroup = React.forwardRef((props, forwardedRef) => {
         },
         props.className,
       ),
-      ref: useMergedRefs(forwardedRef, overflowRef),
+      ref: forwardedRef,
     },
-    (() => {
-      if (!(visibleCount < items.length)) return items;
-      let overflowStart =
-        'start' === overflowPlacement
-          ? items.length - visibleCount
-          : visibleCount - 1;
-      return React.createElement(
-        React.Fragment,
-        null,
-        overflowButton &&
-          'start' === overflowPlacement &&
-          overflowButton(overflowStart),
-        'start' === overflowPlacement
-          ? items.slice(overflowStart + 1)
-          : items.slice(0, Math.max(0, overflowStart)),
-        overflowButton &&
-          'end' === overflowPlacement &&
-          overflowButton(overflowStart),
-      );
-    })(),
+    React.createElement(OverflowGroupContent, {
+      overflowButton: overflowButton,
+      overflowPlacement: overflowPlacement,
+      items: items,
+    }),
   );
 });
+let OverflowGroupContent = (props) => {
+  let { overflowButton, overflowPlacement, items } = props;
+  let { visibleCount } = OverflowContainer.useContext();
+  let overflowStart =
+    'start' === overflowPlacement
+      ? items.length - visibleCount
+      : visibleCount - 1;
+  if (!(visibleCount < items.length)) return items;
+  return React.createElement(
+    React.Fragment,
+    null,
+    overflowButton &&
+      'start' === overflowPlacement &&
+      overflowButton(overflowStart),
+    'start' === overflowPlacement
+      ? items.slice(overflowStart + 1)
+      : items.slice(0, Math.max(0, overflowStart)),
+    overflowButton &&
+      'end' === overflowPlacement &&
+      overflowButton(overflowStart),
+  );
+};

package/esm/core/ComboBox/ComboBox.js

@@ -113,12 +113,14 @@ export const ComboBox = React.forwardRef((props, forwardedRef) => {
         setFocusedIndex(selectedIndexes ?? -1);
     } else {
       setFocusedIndex(-1);
-      if (!isMultipleEnabled(selectedIndexes, multiple))
-        setInputValue(
-          selectedIndexes >= 0
-            ? optionsRef.current[selectedIndexes]?.label ?? ''
-            : '',
-        );
+      isMultipleEnabled(selectedIndexes, multiple)
+        ? setInputValue('')
+        : setInputValue(
+            selectedIndexes >= 0
+              ? optionsRef.current[selectedIndexes]?.label ?? ''
+              : '',
+          );
+      setIsInputDirty(false);
     }
   }, [isOpen, multiple, optionsRef, selectedIndexes]);
   let previousOptions = React.useRef(options);
@@ -216,6 +218,7 @@ export const ComboBox = React.forwardRef((props, forwardedRef) => {
             .filter(Boolean)
             .join(', '),
         );
+        setInputValue('');
       } else {
         setSelectedIndexes(__originalIndex);
         hide();

package/esm/core/DatePicker/DatePicker.js

@@ -11,6 +11,7 @@ import {
 } from '../../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
 import { TimePicker } from '../TimePicker/TimePicker.js';
+import { PopoverInitialFocusContext } from '../Popover/Popover.js';
 let isSameDay = (a, b) =>
   a &&
   b &&
@@ -175,6 +176,11 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => {
         currentDate.getFullYear(),
     );
   }, [date, setMonthAndYear, startDate, endDate, enableRangeSelect]);
+  let popoverInitialFocusContext = React.useContext(PopoverInitialFocusContext);
+  React.useLayoutEffect(() => {
+    if (setFocus && popoverInitialFocusContext)
+      popoverInitialFocusContext.setInitialFocus(-1);
+  }, [popoverInitialFocusContext, setFocus]);
   let days = React.useMemo(() => {
     let offsetToFirst = new Date(
       displayedYear,
@@ -499,10 +505,12 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => {
                   role: 'option',
                   tabIndex: isSameDay(weekDay, focusedDay) ? 0 : -1,
                   'aria-disabled': isDisabled ? 'true' : void 0,
-                  ref: (element) =>
-                    isSameDay(weekDay, focusedDay) &&
-                    needFocus.current &&
-                    element?.focus(),
+                  ref: (element) => {
+                    if (isSameDay(weekDay, focusedDay) && needFocus.current)
+                      setTimeout(() => {
+                        element?.focus();
+                      });
+                  },
                   ...dayProps,
                   className: cx(getDayClass(weekDay), dayProps?.className),
                 },

package/esm/core/NonIdealState/NonIdealState.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 type NonIdealStateProps = {
     /**
-     * An svg component, preferably from @itwin/itwinui-illustrations-react.
+     * An svg component, preferably from `@itwin/itwinui-illustrations-react`.
      *
      * @example
      * import { Svg404 } from '@itwin/itwinui-illustrations-react';
@@ -10,13 +10,17 @@ type NonIdealStateProps = {
      */
     svg: React.ReactNode;
     /**
-     * Primary heading for the error page
+     * Primary heading for the `NonIdealState`
      */
     heading?: React.ReactNode;
     /**
      * Secondary text to explain the error
      * Can include html in order to provide a hyperlink
-     * E.g. `Please visit <a href="https://www.bentley.com/help">our support page</a> for help.`
+     *
+     * @example
+     * <>
+     *   Please visit <Anchor href="https://www.bentley.com/help">our support page</Anchor> for help.
+     * </>
      */
     description?: React.ReactNode;
     /**
@@ -24,13 +28,13 @@ type NonIdealStateProps = {
      * Typically should be a primary and secondary button.
      *
      * @example
-     * <ErrorPage
-     *  actions={
-     *   <>
-     *    <Button styleType={'high-visibility'}>Retry</Button>
-     *    <Button>Contact us</Button>
-     *   </>
-     *  }
+     * <NonIdealState
+     *   actions={
+     *     <>
+     *       <Button styleType={'high-visibility'}>Retry</Button>
+     *       <Button>Contact us</Button>
+     *     </>
+     *   }
      * />
      */
     actions?: React.ReactNode;
@@ -53,7 +57,7 @@ type NonIdealStateProps = {
 };
 /**
  * A stylized display to communicate common http errors and other non-ideal states.
- * Works well with svgs from @itwin/itwinui-illustrations-react.
+ * Works well with svgs from `@itwin/itwinui-illustrations-react`.
  *
  * @example
  * <NonIdealState svg={<Svg404 />} heading='Not found' />

package/esm/core/Popover/Popover.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { FloatingFocusManager } from '@floating-ui/react';
 import type { Placement, UseFloatingOptions, UseHoverProps, UseClickProps, UseFocusProps, UseDismissProps } from '@floating-ui/react';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 import type { PortalProps } from '../../utils/components/Portal.js';
@@ -97,8 +98,17 @@ type PopoverInternalProps = {
      */
     matchWidth?: boolean;
 } & Omit<UseFloatingOptions, 'middleware' | 'placement'>;
+type InitialFocus = React.ComponentPropsWithoutRef<typeof FloatingFocusManager>['initialFocus'];
 /** Stores the current open/closed state of the popover. */
 export declare const PopoverOpenContext: React.Context<boolean | undefined>;
+/**
+ * Stores the initialFocus of the popover.
+ *
+ * E.g. Popover's descendants can disable the popover's initialFocus to prevent conflicts with its own focus management.
+ */
+export declare const PopoverInitialFocusContext: React.Context<{
+    setInitialFocus: React.Dispatch<React.SetStateAction<InitialFocus>>;
+} | undefined>;
 export declare const usePopover: (options: PopoverOptions & PopoverInternalProps) => {
     placement: Placement;
     strategy: import("@floating-ui/utils").Strategy;