@itwin/itwinui-react 3.13.3 → 3.14.0

package/esm/core/ComboBox/ComboBox.js

@@ -314,6 +314,11 @@ export 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/esm/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/esm/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/esm/core/List/List.js

@@ -1,4 +1,4 @@
 import { polymorphic } from '../../utils/index.js';
-export const List = polymorphic.ul('iui-list', {
+export const List = polymorphic.div('iui-list', {
   role: 'list',
 });

package/esm/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/esm/core/List/ListItem.js

@@ -13,7 +13,7 @@ let ListItemComponent = React.forwardRef((props, ref) => {
     ...rest
   } = props;
   return React.createElement(Box, {
-    as: 'li',
+    role: 'listitem',
     className: cx('iui-list-item', className),
     'data-iui-active': active ? 'true' : void 0,
     'data-iui-disabled': disabled ? 'true' : void 0,
@@ -24,9 +24,9 @@ let ListItemComponent = React.forwardRef((props, ref) => {
     ...rest,
   });
 });
-let ListItemIcon = polymorphic('iui-list-item-icon');
-let ListItemContent = polymorphic('iui-list-item-content');
-let ListItemDescription = polymorphic('iui-list-item-description');
+let ListItemIcon = polymorphic.div('iui-list-item-icon');
+let ListItemContent = polymorphic.div('iui-list-item-content');
+let ListItemDescription = polymorphic.div('iui-list-item-description');
 let ListItemAction = LinkAction;
 export const ListItem = Object.assign(ListItemComponent, {
   Icon: ListItemIcon,

package/esm/core/Menu/Menu.js

@@ -77,6 +77,12 @@ export const Menu = React.forwardRef((props, ref) => {
       ...restInteractionsProps,
     },
     ...restPopoverProps,
+    middleware: {
+      size: {
+        maxHeight: 'var(--iui-menu-max-height)',
+      },
+      ...restPopoverProps.middleware,
+    },
   });
   let { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
     useListNavigation(popover.context, {

package/esm/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/esm/core/Menu/MenuDivider.js

@@ -1,4 +1,4 @@
 import { polymorphic } from '../../utils/index.js';
-export const MenuDivider = polymorphic('iui-menu-divider', {
+export const MenuDivider = polymorphic.div('iui-menu-divider', {
   role: 'separator',
 });

package/esm/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/esm/core/Overlay/Overlay.js

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

package/esm/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;

package/esm/core/Popover/Popover.js

@@ -61,10 +61,13 @@ export const usePopover = (options) => {
     () => ({
       flip: true,
       shift: true,
+      size: true,
       ...options.middleware,
     }),
     [options.middleware],
   );
+  let maxHeight =
+    'boolean' == typeof middleware.size ? '400px' : middleware.size?.maxHeight;
   let [open, onOpenChange] = useControlledState(
     false,
     visible,
@@ -74,6 +77,7 @@ export const usePopover = (options) => {
     placement,
     open,
     onOpenChange,
+    strategy: 'fixed',
     whileElementsMounted: React.useMemo(
       () =>
         open ? (...args) => autoUpdate(...args, autoUpdateOptions) : void 0,
@@ -84,17 +88,32 @@ export const usePopover = (options) => {
       () =>
         [
           void 0 !== middleware.offset && offset(middleware.offset),
-          middleware.flip && flip(),
-          middleware.shift && shift(),
-          matchWidth &&
+          middleware.flip &&
+            flip({
+              padding: 4,
+            }),
+          middleware.shift &&
+            shift({
+              padding: 4,
+            }),
+          (matchWidth || middleware.size) &&
             size({
-              apply: ({ rects }) => {
-                setReferenceWidth(rects.reference.width);
+              padding: 4,
+              apply: ({ rects, availableHeight }) => {
+                if (middleware.size)
+                  setAvailableHeight(Math.round(availableHeight));
+                if (matchWidth) setReferenceWidth(rects.reference.width);
               },
             }),
-          middleware.autoPlacement && autoPlacement(),
+          middleware.autoPlacement &&
+            autoPlacement({
+              padding: 4,
+            }),
           middleware.inline && inline(),
-          middleware.hide && hide(),
+          middleware.hide &&
+            hide({
+              padding: 4,
+            }),
         ].filter(Boolean),
       [matchWidth, middleware],
     ),
@@ -130,12 +149,17 @@ export const usePopover = (options) => {
     }),
   ]);
   let [referenceWidth, setReferenceWidth] = React.useState();
+  let [availableHeight, setAvailableHeight] = React.useState();
   let getFloatingProps = React.useCallback(
     (userProps) =>
       interactions.getFloatingProps({
         ...userProps,
         style: {
           ...floating.floatingStyles,
+          ...(middleware.size &&
+            availableHeight && {
+              maxBlockSize: `min(${availableHeight}px, ${maxHeight})`,
+            }),
           zIndex: 9999,
           ...(matchWidth && referenceWidth
             ? {
@@ -146,7 +170,15 @@ export const usePopover = (options) => {
           ...userProps?.style,
         },
       }),
-    [floating.floatingStyles, interactions, matchWidth, referenceWidth],
+    [
+      floating.floatingStyles,
+      interactions,
+      matchWidth,
+      referenceWidth,
+      middleware.size,
+      availableHeight,
+      maxHeight,
+    ],
   );
   let getReferenceProps = React.useCallback(
     (userProps) =>
@@ -236,7 +268,6 @@ export const Popover = React.forwardRef((props, forwardedRef) => {
               {
                 context: popover.context,
                 modal: false,
-                initialFocus: popover.refs.floating,
               },
               React.createElement(
                 Box,

package/esm/core/Select/Select.js

@@ -224,6 +224,11 @@ let CustomSelect = React.forwardRef((props, forwardedRef) => {
     visible: isOpen,
     matchWidth: true,
     closeOnOutsideClick: true,
+    middleware: {
+      size: {
+        maxHeight: 'var(--iui-menu-max-height)',
+      },
+    },
     ...popoverProps,
     onVisibleChange: (open) => (open ? show() : hide()),
   });

package/esm/core/Table/ColumnHeader.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import type { ColumnInstance, HeaderGroup, TableKeyedProps, TableState } from '../../react-table/react-table.js';
+type ColumnHeaderProps<T extends Record<string, unknown> = Record<string, unknown>> = TableKeyedProps & {
+    columnRefs: React.MutableRefObject<Record<string, HTMLDivElement>>;
+    column: HeaderGroup<T>;
+    index: number;
+    areFiltersSet: boolean;
+    hasAnySubRows: boolean;
+    headers: HeaderGroup<T>[];
+    state: TableState<T>;
+    data: T[];
+    isResizable: boolean;
+    columnResizeMode: 'fit' | 'expand';
+    enableColumnReordering: boolean;
+    density: string | undefined;
+    visibleColumns: ColumnInstance<T>[];
+};
+export declare const ColumnHeader: <T extends Record<string, unknown> = Record<string, unknown>>(props: ColumnHeaderProps<T>) => JSX.Element;
+export {};

package/esm/core/Table/ColumnHeader.js

@@ -0,0 +1,188 @@
+import * as React from 'react';
+import {
+  Box,
+  ShadowRoot,
+  LineClamp,
+  SvgSortDown,
+  SvgSortUp,
+} from '../../utils/index.js';
+import { SELECTION_CELL_ID } from './columns/index.js';
+import { FilterToggle } from './filters/FilterToggle.js';
+import { getCellStyle, getSubRowStyle, getStickyStyle } from './utils.js';
+import cx from 'classnames';
+export const ColumnHeader = (props) => {
+  let {
+    columnRefs,
+    column,
+    index,
+    areFiltersSet,
+    hasAnySubRows,
+    headers,
+    state,
+    data,
+    isResizable,
+    columnResizeMode,
+    enableColumnReordering,
+    density,
+    visibleColumns,
+    ...rest
+  } = props;
+  let isHeaderDirectClick = React.useRef(false);
+  let COLUMN_MIN_WIDTHS = {
+    default: 72,
+    withExpander: 108,
+  };
+  let showFilterButton = (column) =>
+    (0 !== data.length || areFiltersSet) && column.canFilter && !!column.Filter;
+  let showSortButton = (column) => 0 !== data.length && column.canSort;
+  let { onClick, ...restSortProps } = column.getSortByToggleProps();
+  let columnHasExpanders =
+    hasAnySubRows &&
+    index === headers.findIndex((c) => c.id !== SELECTION_CELL_ID);
+  if ([void 0, 0].includes(column.minWidth)) {
+    column.minWidth = columnHasExpanders
+      ? COLUMN_MIN_WIDTHS.withExpander
+      : COLUMN_MIN_WIDTHS.default;
+    if ('number' == typeof column.width && column.minWidth > column.width)
+      column.minWidth = column.width;
+  }
+  let columnProps = column.getHeaderProps({
+    ...restSortProps,
+    className: cx(
+      'iui-table-cell',
+      {
+        'iui-actionable': column.canSort,
+        'iui-sorted': column.isSorted,
+        'iui-table-cell-sticky': !!column.sticky,
+      },
+      column.columnClassName,
+    ),
+    style: {
+      ...getCellStyle(column, !!state.isTableResizing),
+      ...(columnHasExpanders &&
+        getSubRowStyle({
+          density,
+        })),
+      ...getStickyStyle(column, visibleColumns),
+      flexWrap: 'wrap',
+      columnGap: 'var(--iui-size-xs)',
+    },
+  });
+  return React.createElement(
+    Box,
+    {
+      ...columnProps,
+      ...rest,
+      key: columnProps.key,
+      title: void 0,
+      ref: React.useCallback(
+        (el) => {
+          if (el) {
+            columnRefs.current[column.id] = el;
+            column.resizeWidth = el.getBoundingClientRect().width;
+          }
+        },
+        [column, columnRefs],
+      ),
+      onMouseDown: () => {
+        isHeaderDirectClick.current = true;
+      },
+      onClick: (e) => {
+        if (isHeaderDirectClick.current) {
+          onClick?.(e);
+          isHeaderDirectClick.current = false;
+        }
+      },
+      tabIndex: showSortButton(column) ? 0 : void 0,
+      onKeyDown: (e) => {
+        if ('Enter' == e.key && showSortButton(column)) column.toggleSortBy();
+      },
+    },
+    React.createElement(
+      React.Fragment,
+      null,
+      React.createElement(
+        ShadowRoot,
+        null,
+        'string' == typeof column.Header
+          ? React.createElement(
+              LineClamp,
+              null,
+              React.createElement('slot', null),
+            )
+          : React.createElement('slot', null),
+        React.createElement('slot', {
+          name: 'actions',
+        }),
+        React.createElement('slot', {
+          name: 'resizers',
+        }),
+        React.createElement('slot', {
+          name: 'shadows',
+        }),
+      ),
+      column.render('Header'),
+      (showFilterButton(column) || showSortButton(column)) &&
+        React.createElement(
+          Box,
+          {
+            className: 'iui-table-header-actions-container',
+            onKeyDown: (e) => e.stopPropagation(),
+            slot: 'actions',
+          },
+          showFilterButton(column) &&
+            React.createElement(FilterToggle, {
+              column: column,
+            }),
+          showSortButton(column) &&
+            React.createElement(
+              Box,
+              {
+                className: 'iui-table-cell-end-icon',
+              },
+              column.isSortedDesc || (!column.isSorted && column.sortDescFirst)
+                ? React.createElement(SvgSortDown, {
+                    className: 'iui-table-sort',
+                    'aria-hidden': true,
+                  })
+                : React.createElement(SvgSortUp, {
+                    className: 'iui-table-sort',
+                    'aria-hidden': true,
+                  }),
+            ),
+        ),
+      isResizable &&
+        column.isResizerVisible &&
+        (index !== headers.length - 1 || 'expand' === columnResizeMode) &&
+        React.createElement(
+          Box,
+          {
+            ...column.getResizerProps(),
+            className: 'iui-table-resizer',
+            slot: 'resizers',
+          },
+          React.createElement(Box, {
+            className: 'iui-table-resizer-bar',
+          }),
+        ),
+      enableColumnReordering &&
+        !column.disableReordering &&
+        React.createElement(Box, {
+          className: 'iui-table-reorder-bar',
+          slot: 'resizers',
+        }),
+      'left' === column.sticky &&
+        state.sticky.isScrolledToRight &&
+        React.createElement(Box, {
+          className: 'iui-table-cell-shadow-right',
+          slot: 'shadows',
+        }),
+      'right' === column.sticky &&
+        state.sticky.isScrolledToLeft &&
+        React.createElement(Box, {
+          className: 'iui-table-cell-shadow-left',
+          slot: 'shadows',
+        }),
+    ),
+  );
+};