@itwin/itwinui-react 3.13.4 → 3.14.1

package/cjs/core/Popover/Popover.js

@@ -27,7 +27,6 @@ const _classnames = _interop_require_default._(require('classnames'));
 const _react1 = require('@floating-ui/react');
 const _index = require('../../utils/index.js');
 const _Portal = require('../../utils/components/Portal.js');
-const _ThemeProvider = require('../ThemeProvider/ThemeProvider.js');
 const PopoverOpenContext = _react.createContext(void 0);
 const usePopover = (options) => {
   let {
@@ -56,10 +55,13 @@ 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] = (0, _index.useControlledState)(
     false,
     visible,
@@ -69,6 +71,7 @@ const usePopover = (options) => {
     placement,
     open,
     onOpenChange,
+    strategy: 'fixed',
     whileElementsMounted: _react.useMemo(
       () =>
         open
@@ -82,17 +85,32 @@ const usePopover = (options) => {
         [
           void 0 !== middleware.offset &&
             (0, _react1.offset)(middleware.offset),
-          middleware.flip && (0, _react1.flip)(),
-          middleware.shift && (0, _react1.shift)(),
-          matchWidth &&
+          middleware.flip &&
+            (0, _react1.flip)({
+              padding: 4,
+            }),
+          middleware.shift &&
+            (0, _react1.shift)({
+              padding: 4,
+            }),
+          (matchWidth || middleware.size) &&
             (0, _react1.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 && (0, _react1.autoPlacement)(),
+          middleware.autoPlacement &&
+            (0, _react1.autoPlacement)({
+              padding: 4,
+            }),
           middleware.inline && (0, _react1.inline)(),
-          middleware.hide && (0, _react1.hide)(),
+          middleware.hide &&
+            (0, _react1.hide)({
+              padding: 4,
+            }),
         ].filter(Boolean),
       [matchWidth, middleware],
     ),
@@ -128,12 +146,17 @@ 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
             ? {
@@ -144,7 +167,15 @@ const usePopover = (options) => {
           ...userProps?.style,
         },
       }),
-    [floating.floatingStyles, interactions, matchWidth, referenceWidth],
+    [
+      floating.floatingStyles,
+      interactions,
+      matchWidth,
+      referenceWidth,
+      middleware.size,
+      availableHeight,
+      maxHeight,
+    ],
   );
   let getReferenceProps = _react.useCallback(
     (userProps) =>
@@ -190,11 +221,9 @@ const Popover = _react.forwardRef((props, forwardedRef) => {
     role: 'dialog',
     middleware,
   });
-  let [popoverElement, setPopoverElement] = _react.useState();
   let popoverRef = (0, _index.useMergedRefs)(
     popover.refs.setFloating,
     forwardedRef,
-    setPopoverElement,
   );
   let triggerId = `${(0, _index.useId)()}-trigger`;
   let hasAriaLabel = !!props['aria-labelledby'] || !!props['aria-label'];
@@ -224,35 +253,27 @@ const Popover = _react.forwardRef((props, forwardedRef) => {
             portal: portal,
           },
           _react.createElement(
-            _ThemeProvider.ThemeProvider,
+            _react1.FloatingFocusManager,
             {
-              portalContainer: popoverElement,
+              context: popover.context,
+              modal: false,
             },
-            _react.createElement(DisplayContents, null),
             _react.createElement(
-              _react1.FloatingFocusManager,
+              _index.Box,
               {
-                context: popover.context,
-                modal: false,
-                initialFocus: popover.refs.floating,
+                className: (0, _classnames.default)(
+                  {
+                    'iui-popover-surface': applyBackground,
+                  },
+                  className,
+                ),
+                'aria-labelledby': hasAriaLabel
+                  ? void 0
+                  : popover.refs.domReference.current?.id,
+                ...popover.getFloatingProps(rest),
+                ref: popoverRef,
               },
-              _react.createElement(
-                _index.Box,
-                {
-                  className: (0, _classnames.default)(
-                    {
-                      'iui-popover-surface': applyBackground,
-                    },
-                    className,
-                  ),
-                  'aria-labelledby': hasAriaLabel
-                    ? void 0
-                    : popover.refs.domReference.current?.id,
-                  ...popover.getFloatingProps(rest),
-                  ref: popoverRef,
-                },
-                content,
-              ),
+              content,
             ),
           ),
         )

package/cjs/core/Select/Select.js

@@ -231,6 +231,11 @@ const 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/cjs/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/cjs/core/Table/ColumnHeader.js

@@ -0,0 +1,194 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+Object.defineProperty(exports, 'ColumnHeader', {
+  enumerable: true,
+  get: function () {
+    return ColumnHeader;
+  },
+});
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const _index = require('../../utils/index.js');
+const _index1 = require('./columns/index.js');
+const _FilterToggle = require('./filters/FilterToggle.js');
+const _utils = require('./utils.js');
+const _classnames = _interop_require_default._(require('classnames'));
+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 !== _index1.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: (0, _classnames.default)(
+      'iui-table-cell',
+      {
+        'iui-actionable': column.canSort,
+        'iui-sorted': column.isSorted,
+        'iui-table-cell-sticky': !!column.sticky,
+      },
+      column.columnClassName,
+    ),
+    style: {
+      ...(0, _utils.getCellStyle)(column, !!state.isTableResizing),
+      ...(columnHasExpanders &&
+        (0, _utils.getSubRowStyle)({
+          density,
+        })),
+      ...(0, _utils.getStickyStyle)(column, visibleColumns),
+      flexWrap: 'wrap',
+      columnGap: 'var(--iui-size-xs)',
+    },
+  });
+  return _react.createElement(
+    _index.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(
+        _index.ShadowRoot,
+        null,
+        'string' == typeof column.Header
+          ? _react.createElement(
+              _index.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(
+          _index.Box,
+          {
+            className: 'iui-table-header-actions-container',
+            onKeyDown: (e) => e.stopPropagation(),
+            slot: 'actions',
+          },
+          showFilterButton(column) &&
+            _react.createElement(_FilterToggle.FilterToggle, {
+              column: column,
+            }),
+          showSortButton(column) &&
+            _react.createElement(
+              _index.Box,
+              {
+                className: 'iui-table-cell-end-icon',
+              },
+              column.isSortedDesc || (!column.isSorted && column.sortDescFirst)
+                ? _react.createElement(_index.SvgSortDown, {
+                    className: 'iui-table-sort',
+                    'aria-hidden': true,
+                  })
+                : _react.createElement(_index.SvgSortUp, {
+                    className: 'iui-table-sort',
+                    'aria-hidden': true,
+                  }),
+            ),
+        ),
+      isResizable &&
+        column.isResizerVisible &&
+        (index !== headers.length - 1 || 'expand' === columnResizeMode) &&
+        _react.createElement(
+          _index.Box,
+          {
+            ...column.getResizerProps(),
+            className: 'iui-table-resizer',
+            slot: 'resizers',
+          },
+          _react.createElement(_index.Box, {
+            className: 'iui-table-resizer-bar',
+          }),
+        ),
+      enableColumnReordering &&
+        !column.disableReordering &&
+        _react.createElement(_index.Box, {
+          className: 'iui-table-reorder-bar',
+          slot: 'resizers',
+        }),
+      'left' === column.sticky &&
+        state.sticky.isScrolledToRight &&
+        _react.createElement(_index.Box, {
+          className: 'iui-table-cell-shadow-right',
+          slot: 'shadows',
+        }),
+      'right' === column.sticky &&
+        state.sticky.isScrolledToLeft &&
+        _react.createElement(_index.Box, {
+          className: 'iui-table-cell-shadow-left',
+          slot: 'shadows',
+        }),
+    ),
+  );
+};