@itwin/itwinui-react 3.13.3 → 3.14.0

package/DEV-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',
+        }),
+    ),
+  );
+};

package/DEV-cjs/core/Table/SubRowExpander.js

@@ -1,37 +1,48 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-Object.defineProperty(exports, "SubRowExpander", {
-    enumerable: true,
-    get: function() {
-        return SubRowExpander;
-    }
+Object.defineProperty(exports, 'SubRowExpander', {
+  enumerable: true,
+  get: function () {
+    return SubRowExpander;
+  },
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = _interop_require_wildcard._(require("react"));
-const _index = require("../../utils/index.js");
-const _IconButton = require("../Buttons/IconButton.js");
-const SubRowExpander = (props)=>{
-    let { cell, isDisabled, cellProps, expanderCell, density, ...rest } = props;
-    return _react.createElement(_react.Fragment, null, expanderCell ? expanderCell(cellProps) : _react.createElement(_IconButton.IconButton, {
-        "aria-label": "Toggle sub row",
-        "aria-expanded": cell.row.isExpanded ? 'true' : 'false',
-        style: {
-            marginInlineEnd: 'default' === density || void 0 === density ? 8 : 4
-        },
-        className: "iui-table-row-expander",
-        styleType: "borderless",
-        size: "small",
-        onClick: (e)=>{
-            e.stopPropagation();
-            cell.row.toggleRowExpanded();
-        },
-        disabled: isDisabled,
-        ...rest
-    }, _react.createElement(_index.SvgChevronRight, {
-        style: {
-            transform: cell.row.isExpanded ? 'rotate(90deg)' : void 0
-        }
-    })));
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const _index = require('../../utils/index.js');
+const _IconButton = require('../Buttons/IconButton.js');
+const SubRowExpander = (props) => {
+  let { cell, isDisabled, cellProps, expanderCell, density, ...rest } = props;
+  return _react.createElement(
+    _react.Fragment,
+    null,
+    expanderCell
+      ? expanderCell(cellProps)
+      : _react.createElement(
+          _IconButton.IconButton,
+          {
+            'aria-label': 'Toggle sub row',
+            'aria-expanded': cell.row.isExpanded ? 'true' : 'false',
+            style: {
+              marginInlineEnd:
+                'default' === density || void 0 === density ? 8 : 4,
+            },
+            className: 'iui-table-row-expander',
+            styleType: 'borderless',
+            size: 'small',
+            onClick: (e) => {
+              e.stopPropagation();
+              cell.row.toggleRowExpanded();
+            },
+            disabled: isDisabled,
+            ...rest,
+          },
+          _react.createElement(_index.SvgChevronRight, {
+            style: {
+              transform: cell.row.isExpanded ? 'rotate(90deg)' : void 0,
+            },
+          }),
+        ),
+  );
 };