@itwin/itwinui-react 3.13.3 → 3.14.0

package/DEV-esm/core/Stepper/WorkflowDiagram.js

@@ -2,24 +2,32 @@ import * as React from 'react';
 import cx from 'classnames';
 import { Box } from '../../utils/index.js';
 import { WorkflowDiagramStep } from './WorkflowDiagramStep.js';
-export const WorkflowDiagram = React.forwardRef((props, ref)=>{
-    let { steps, className, contentProps, wrapperProps, ...rest } = props;
-    return React.createElement(Box, {
-        as: "div",
-        ...wrapperProps,
-        ref: ref
-    }, React.createElement(Box, {
-        as: "ol",
+export const WorkflowDiagram = React.forwardRef((props, ref) => {
+  let { steps, className, contentProps, wrapperProps, ...rest } = props;
+  return React.createElement(
+    Box,
+    {
+      as: 'div',
+      ...wrapperProps,
+      ref: ref,
+    },
+    React.createElement(
+      Box,
+      {
+        as: 'ol',
         className: cx('iui-workflow-diagram', className),
-        ...rest
-    }, steps.map((s, index)=>{
+        ...rest,
+      },
+      steps.map((s, index) => {
         let thisContentProps = contentProps?.(index);
         return React.createElement(WorkflowDiagramStep, {
-            contentProps: thisContentProps,
-            key: index,
-            title: s.name,
-            description: s.description
+          contentProps: thisContentProps,
+          key: index,
+          title: s.name,
+          description: s.description,
         });
-    })));
+      }),
+    ),
+  );
 });
 WorkflowDiagram.displayName = 'WorkflowDiagram';

package/DEV-esm/core/Stepper/WorkflowDiagramStep.js

@@ -2,19 +2,33 @@ import cx from 'classnames';
 import * as React from 'react';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import { Box } from '../../utils/index.js';
-export const WorkflowDiagramStep = (props)=>{
-    let { title, description, className, style, contentProps, ...rest } = props;
-    let stepShape = React.createElement(Box, {
-        as: "li",
-        className: cx('iui-workflow-diagram-step', className),
-        style: style,
-        ...rest
-    }, React.createElement(Box, {
-        as: "span",
+export const WorkflowDiagramStep = (props) => {
+  let { title, description, className, style, contentProps, ...rest } = props;
+  let stepShape = React.createElement(
+    Box,
+    {
+      as: 'li',
+      className: cx('iui-workflow-diagram-step', className),
+      style: style,
+      ...rest,
+    },
+    React.createElement(
+      Box,
+      {
+        as: 'span',
         ...contentProps,
-        className: cx('iui-workflow-diagram-content', contentProps?.className)
-    }, title));
-    return description ? React.createElement(Tooltip, {
-        content: description
-    }, stepShape) : stepShape;
+        className: cx('iui-workflow-diagram-content', contentProps?.className),
+      },
+      title,
+    ),
+  );
+  return description
+    ? React.createElement(
+        Tooltip,
+        {
+          content: description,
+        },
+        stepShape,
+      )
+    : stepShape;
 };

package/DEV-esm/core/Surface/Surface.js

@@ -1,82 +1,104 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { useSafeContext, supportsHas, Box } from '../../utils/index.js';
-let getSurfaceElevationValue = (elevation)=>{
-    switch(elevation){
-        case 0:
-            return 'none';
-        case 1:
-            return 'var(--iui-shadow-1)';
-        case 2:
-            return 'var(--iui-shadow-2)';
-        case 3:
-            return 'var(--iui-shadow-3)';
-        case 4:
-            return 'var(--iui-shadow-4)';
-        case 5:
-            return 'var(--iui-shadow-5)';
-        default:
-            return;
-    }
+let getSurfaceElevationValue = (elevation) => {
+  switch (elevation) {
+    case 0:
+      return 'none';
+    case 1:
+      return 'var(--iui-shadow-1)';
+    case 2:
+      return 'var(--iui-shadow-2)';
+    case 3:
+      return 'var(--iui-shadow-3)';
+    case 4:
+      return 'var(--iui-shadow-4)';
+    case 5:
+      return 'var(--iui-shadow-5)';
+    default:
+      return;
+  }
 };
-let getBorderValue = (border)=>{
-    if ('string' == typeof border) return border;
-    if (false === border) return 'none';
+let getBorderValue = (border) => {
+  if ('string' == typeof border) return border;
+  if (false === border) return 'none';
 };
-let SurfaceHeader = React.forwardRef((props, ref)=>{
-    let { children, className, ...rest } = props;
-    let { setHasLayout } = useSafeContext(SurfaceContext);
-    React.useEffect(()=>{
-        if (!supportsHas()) setHasLayout(true);
-    }, [
-        setHasLayout
-    ]);
-    return React.createElement(Box, {
-        className: cx('iui-surface-header', className),
-        ref: ref,
-        ...rest
-    }, children);
+let SurfaceHeader = React.forwardRef((props, ref) => {
+  let { children, className, ...rest } = props;
+  let { setHasLayout } = useSafeContext(SurfaceContext);
+  React.useEffect(() => {
+    if (!supportsHas()) setHasLayout(true);
+  }, [setHasLayout]);
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-surface-header', className),
+      ref: ref,
+      ...rest,
+    },
+    children,
+  );
 });
 SurfaceHeader.displayName = 'Surface.Header';
-let SurfaceBody = React.forwardRef((props, ref)=>{
-    let { children, className, isPadded = false, ...rest } = props;
-    let { setHasLayout } = useSafeContext(SurfaceContext);
-    React.useEffect(()=>{
-        if (!supportsHas()) setHasLayout(true);
-    }, [
-        setHasLayout
-    ]);
-    return React.createElement(Box, {
-        className: cx('iui-surface-body', className),
-        ref: ref,
-        "data-iui-padded": isPadded ? 'true' : void 0,
-        ...rest
-    }, children);
+let SurfaceBody = React.forwardRef((props, ref) => {
+  let { children, className, isPadded = false, ...rest } = props;
+  let { setHasLayout } = useSafeContext(SurfaceContext);
+  React.useEffect(() => {
+    if (!supportsHas()) setHasLayout(true);
+  }, [setHasLayout]);
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-surface-body', className),
+      ref: ref,
+      'data-iui-padded': isPadded ? 'true' : void 0,
+      ...rest,
+    },
+    children,
+  );
 });
 SurfaceBody.displayName = 'Surface.Body';
-export const Surface = Object.assign(React.forwardRef((props, ref)=>{
-    let { elevation, border = true, className, style, children, ...rest } = props;
+export const Surface = Object.assign(
+  React.forwardRef((props, ref) => {
+    let {
+      elevation,
+      border = true,
+      className,
+      style,
+      children,
+      ...rest
+    } = props;
     let [hasLayout, setHasLayout] = React.useState(false);
     let _style = {
-        '--iui-surface-elevation': getSurfaceElevationValue(elevation),
-        '--iui-surface-border': getBorderValue(border),
-        ...style
+      '--iui-surface-elevation': getSurfaceElevationValue(elevation),
+      '--iui-surface-border': getBorderValue(border),
+      ...style,
     };
-    return React.createElement(Box, {
+    return React.createElement(
+      Box,
+      {
         className: cx('iui-surface', className),
         style: _style,
         ref: ref,
-        "data-iui-layout": hasLayout ? 'true' : void 0,
-        ...rest
-    }, React.createElement(SurfaceContext.Provider, {
-        value: {
-            setHasLayout
-        }
-    }, children));
-}), {
+        'data-iui-layout': hasLayout ? 'true' : void 0,
+        ...rest,
+      },
+      React.createElement(
+        SurfaceContext.Provider,
+        {
+          value: {
+            setHasLayout,
+          },
+        },
+        children,
+      ),
+    );
+  }),
+  {
     Header: SurfaceHeader,
-    Body: SurfaceBody
-});
+    Body: SurfaceBody,
+  },
+);
 Surface.displayName = 'Surface';
 let SurfaceContext = React.createContext(void 0);
 SurfaceContext.displayName = 'SurfaceContext';

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

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

@@ -1,26 +1,37 @@
 import * as React from 'react';
 import { SvgChevronRight } from '../../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
-export const SubRowExpander = (props)=>{
-    let { cell, isDisabled, cellProps, expanderCell, density, ...rest } = props;
-    return React.createElement(React.Fragment, null, expanderCell ? expanderCell(cellProps) : React.createElement(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(SvgChevronRight, {
-        style: {
-            transform: cell.row.isExpanded ? 'rotate(90deg)' : void 0
-        }
-    })));
+export const SubRowExpander = (props) => {
+  let { cell, isDisabled, cellProps, expanderCell, density, ...rest } = props;
+  return React.createElement(
+    React.Fragment,
+    null,
+    expanderCell
+      ? expanderCell(cellProps)
+      : React.createElement(
+          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(SvgChevronRight, {
+            style: {
+              transform: cell.row.isExpanded ? 'rotate(90deg)' : void 0,
+            },
+          }),
+        ),
+  );
 };