@itwin/itwinui-react 3.18.2 → 3.19.0

package/DEV-cjs/core/ToggleSwitch/ToggleSwitch.js

@@ -24,15 +24,22 @@ const ToggleSwitch = _react.forwardRef((props, ref) => {
     style,
     size = 'default',
     labelProps = {},
+    wrapperProps,
     icon: iconProp,
     ...rest
   } = props;
+  let { consistentPropsSpread } =
+    (0, _index.useFutureFlag)('ToggleSwitch') || {};
+  let shouldApplyClassNameAndStyleOnInput =
+    null != wrapperProps || consistentPropsSpread;
   let shouldShowIcon =
     void 0 === iconProp || (null !== iconProp && 'small' !== size);
   return _react.createElement(
     _index.Box,
     {
       as: label ? 'label' : 'div',
+      style: shouldApplyClassNameAndStyleOnInput ? void 0 : style,
+      ...wrapperProps,
       className: (0, _classnames.default)(
         'iui-toggle-switch-wrapper',
         {
@@ -40,19 +47,23 @@ const ToggleSwitch = _react.forwardRef((props, ref) => {
           'iui-label-on-right': label && 'right' === labelPosition,
           'iui-label-on-left': label && 'left' === labelPosition,
         },
-        className,
+        shouldApplyClassNameAndStyleOnInput ? void 0 : className,
+        wrapperProps?.className,
       ),
       'data-iui-size': size,
-      style: style,
     },
     _react.createElement(_index.Box, {
       as: 'input',
-      className: 'iui-toggle-switch',
       type: 'checkbox',
       role: 'switch',
+      style: shouldApplyClassNameAndStyleOnInput ? style : void 0,
+      ...rest,
+      className: (0, _classnames.default)(
+        'iui-toggle-switch',
+        shouldApplyClassNameAndStyleOnInput ? className : void 0,
+      ),
       disabled: disabled,
       ref: ref,
-      ...rest,
     }),
     shouldShowIcon &&
       _react.createElement(

package/DEV-cjs/styles.js

@@ -1,6 +1,6 @@
 'use strict';
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const e = '3.18.2';
+const e = '3.19.0';
 const u = new Proxy(
   {},
   {

package/DEV-cjs/utils/components/index.js

@@ -14,6 +14,6 @@ _export_star._(require('./Box.js'), exports);
 _export_star._(require('./ButtonBase.js'), exports);
 _export_star._(require('./Portal.js'), exports);
 _export_star._(require('./ShadowRoot.js'), exports);
-_export_star._(require('./LineClamp.js'), exports);
+_export_star._(require('./lineClamp.js'), exports);
 _export_star._(require('./FieldsetBase.js'), exports);
 _export_star._(require('./OverflowContainer.js'), exports);

package/DEV-cjs/utils/components/lineClamp.js

@@ -0,0 +1,23 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+Object.defineProperty(exports, 'lineClamp', {
+  enumerable: true,
+  get: function () {
+    return lineClamp;
+  },
+});
+const className = '_iui-line-clamp';
+const css = `
+.${className} {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: var(--_iui-line-clamp, 3);
+  -webkit-box-orient: vertical;
+}
+`;
+const lineClamp = {
+  css,
+  className,
+};

package/DEV-cjs/utils/functions/react.js

@@ -2,19 +2,33 @@
 Object.defineProperty(exports, '__esModule', {
   value: true,
 });
-Object.defineProperty(exports, 'cloneElementWithRef', {
-  enumerable: true,
-  get: function () {
+function _export(target, all) {
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name],
+    });
+}
+_export(exports, {
+  cloneElementWithRef: function () {
     return cloneElementWithRef;
   },
+  isReact17or18: function () {
+    return isReact17or18;
+  },
 });
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
 const _useMergedRefs = require('../hooks/useMergedRefs.js');
+const _React = _react;
+const isReact17or18 = (() => {
+  let version = _React.version?.split('.')?.[0];
+  return ['17', '18'].includes(version);
+})();
 const cloneElementWithRef = (children, getProps) => {
   if (!children) return null;
   if (!_react.isValidElement(children)) return children;
-  let childrenRef = children.props?.ref || children?.ref;
+  let childrenRef = isReact17or18 ? children?.ref : children.props?.ref;
   let props = getProps(children);
   let ref = (0, _useMergedRefs.mergeRefs)(
     ...[childrenRef, 'ref' in props ? props.ref : null].filter(Boolean),

package/DEV-cjs/utils/hooks/useControlledState.js

@@ -10,6 +10,7 @@ Object.defineProperty(exports, 'useControlledState', {
 });
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
+const _useLatestRef = require('./useLatestRef.js');
 const useControlledState = (
   initialValue,
   controlledState,
@@ -20,12 +21,15 @@ const useControlledState = (
     () => (void 0 !== controlledState ? controlledState : uncontrolledState),
     [controlledState, uncontrolledState],
   );
+  let oldState = (0, _useLatestRef.useLatestRef)(state);
   let setState = _react.useCallback(
     (value) => {
+      if (value === oldState.current) return;
+      oldState.current = value;
       setUncontrolledState(value);
       setControlledState?.(value);
     },
-    [setControlledState, setUncontrolledState],
+    [oldState, setControlledState],
   );
   return [state, setState];
 };

package/DEV-cjs/utils/providers/FutureFlagsProvider.js

@@ -0,0 +1,48 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+function _export(target, all) {
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name],
+    });
+}
+_export(exports, {
+  FutureFlagsProvider: function () {
+    return FutureFlagsProvider;
+  },
+  useFutureFlag: function () {
+    return useFutureFlag;
+  },
+});
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
+const _useSafeContext = require('../hooks/useSafeContext.js');
+const FutureFlagsContext = _react.createContext({});
+function useFutureFlag(key) {
+  let context = (0, _useSafeContext.useSafeContext)(FutureFlagsContext);
+  return context[key];
+}
+const FutureFlagsProvider = ({ children, value }) => {
+  if (true === value)
+    value = {
+      themeBridge: true,
+    };
+  let context = _react.useContext(FutureFlagsContext);
+  let combinedValue = {
+    ...context,
+    ...value,
+  };
+  return _react.createElement(
+    FutureFlagsContext.Provider,
+    {
+      value: _react.useMemo(
+        () => combinedValue,
+        [JSON.stringify(combinedValue)],
+      ),
+    },
+    children,
+  );
+};

package/DEV-cjs/utils/providers/index.js

@@ -3,4 +3,5 @@ Object.defineProperty(exports, '__esModule', {
   value: true,
 });
 const _export_star = require('@swc/helpers/_/_export_star');
+_export_star._(require('./FutureFlagsProvider.js'), exports);
 _export_star._(require('./HydrationProvider.js'), exports);

package/DEV-esm/core/ComboBox/ComboBoxMenuItem.js

@@ -41,7 +41,7 @@ export const ComboBoxMenuItem = React.memo(
         disabled: disabled,
         focused: focusedIndex === index,
         ref: refs,
-        onClick: () => onClick?.(value),
+        onClick: () => onClick?.(),
         role: role,
         tabIndex: 'presentation' === role ? void 0 : -1,
         'aria-selected': isSelected,

package/DEV-esm/core/Menu/MenuItem.js

@@ -63,13 +63,10 @@ export const MenuItem = React.forwardRef((props, forwardedRef) => {
     }),
     [hasSubMenu],
   );
-  let onClick = () => {
+  let onClick = (event) => {
     if (disabled) return;
     if (shouldCloseMenuOnClick) dropdownMenu?.close();
-    onClickProp?.(value);
-  };
-  let handlers = {
-    onClick,
+    onClickProp?.(value ?? event);
   };
   let focusableItemIndex = parentMenu?.focusableElements.findIndex(
     (el) => el === menuItemRef.current,
@@ -94,9 +91,13 @@ export const MenuItem = React.forwardRef((props, forwardedRef) => {
       ...(parentMenu?.popoverGetItemProps != null
         ? parentMenu.popoverGetItemProps({
             focusableItemIndex,
-            userProps: handlers,
+            userProps: {
+              onClick,
+            },
           })
-        : handlers),
+        : {
+            onClick,
+          }),
       ...rest,
     },
     startIcon &&

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

@@ -12,6 +12,7 @@ import {
   useLatestRef,
   InputWithIcon,
   mergeEventHandlers,
+  isReact17or18,
 } from '../../utils/index.js';
 import { SelectTag } from './SelectTag.js';
 import { SelectTagContainer } from './SelectTagContainer.js';
@@ -174,7 +175,13 @@ let CustomSelect = React.forwardRef((props, forwardedRef) => {
               isSelected,
             })
           : React.createElement(MenuItem, null, option.label);
-        let { label, icon, startIcon: startIconProp, ...restOption } = option;
+        let {
+          label,
+          icon,
+          startIcon: startIconProp,
+          value: _,
+          ...restOption
+        } = option;
         let startIcon = startIconProp ?? icon;
         return React.cloneElement(menuItem, {
           key: `${label}-${index}`,
@@ -451,15 +458,17 @@ let SelectListbox = React.forwardRef((props, forwardedRef) => {
   }, []);
   let children = React.useMemo(
     () =>
-      React.Children.map(childrenProp, (child, index) =>
-        React.isValidElement(child)
-          ? React.createElement(CompositeItem, {
-              key: index,
-              render: child,
-              ref: child.props.ref || child.ref,
-            })
-          : child,
-      ),
+      React.Children.map(childrenProp, (child, index) => {
+        if (React.isValidElement(child)) {
+          let ref = isReact17or18 ? child.ref : child.props.ref;
+          return React.createElement(CompositeItem, {
+            key: index,
+            ref: ref,
+            render: child,
+          });
+        }
+        return child;
+      }),
     [childrenProp],
   );
   return React.createElement(

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

@@ -30,9 +30,9 @@ export const SideNavigation = React.forwardRef((props, forwardedRef) => {
       className: 'iui-sidenav-button iui-expand',
       size: 'small',
       onClick: React.useCallback(() => {
-        setIsExpanded((expanded) => !expanded);
+        setIsExpanded(!isExpanded);
         onExpanderClick?.();
-      }, [onExpanderClick, setIsExpanded]),
+      }, [isExpanded, onExpanderClick, setIsExpanded]),
     },
     React.createElement(SvgChevronRight, null),
   );

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import {
   Box,
   ShadowRoot,
-  LineClamp,
+  lineClamp,
   SvgSortDown,
   SvgSortUp,
   useMergedRefs,
@@ -103,10 +103,14 @@ export const ColumnHeader = React.forwardRef((props, forwardedRef) => {
       'string' == typeof column.Header
         ? React.createElement(
             ShadowRoot,
-            null,
+            {
+              css: lineClamp.css,
+            },
             React.createElement(
-              LineClamp,
-              null,
+              'div',
+              {
+                className: lineClamp.className,
+              },
               React.createElement('slot', null),
             ),
             React.createElement('slot', {

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

@@ -113,6 +113,38 @@ export const Table = (props) => {
     caption = 'Table',
     role,
     scrollToRow,
+    useControlledState,
+    autoResetExpanded,
+    autoResetFilters,
+    autoResetGlobalFilter,
+    autoResetHiddenColumns,
+    autoResetPage,
+    autoResetResize,
+    autoResetSelectedRows,
+    autoResetSortBy,
+    defaultCanFilter,
+    defaultCanSort,
+    defaultColumn: defaultColumnProp,
+    disableFilters,
+    disableGlobalFilter,
+    disableMultiSort,
+    disableSortRemove,
+    disabledMultiRemove,
+    expandSubRows,
+    globalFilter,
+    initialState,
+    isMultiSortEvent,
+    manualExpandedKey,
+    manualFilters,
+    manualGlobalFilter,
+    manualRowSelectedKey,
+    manualSortBy,
+    maxMultiSortColCount,
+    orderByFn,
+    pageCount,
+    sortTypes,
+    manualPagination,
+    paginateExpandedRows,
     ..._rest
   } = props;
   let { ariaRestAttributes, nonAriaRestAttributes } = React.useMemo(
@@ -153,8 +185,9 @@ export const Table = (props) => {
       maxWidth: 0,
       minWidth: 0,
       width: 0,
+      ...defaultColumnProp,
     }),
-    [],
+    [defaultColumnProp],
   );
   let rowHeight = React.useMemo(() => {
     if ('condensed' === density) return 50;
@@ -306,9 +339,36 @@ export const Table = (props) => {
   );
   let instance = useTable(
     {
-      manualPagination: !paginatorRenderer,
-      paginateExpandedRows: false,
-      ...props,
+      manualPagination: manualPagination ?? !paginatorRenderer,
+      paginateExpandedRows: paginateExpandedRows ?? false,
+      useControlledState,
+      autoResetExpanded,
+      autoResetFilters,
+      autoResetGlobalFilter,
+      autoResetHiddenColumns,
+      autoResetPage,
+      autoResetResize,
+      autoResetSelectedRows,
+      autoResetSortBy,
+      defaultCanFilter,
+      defaultCanSort,
+      disableFilters,
+      disableGlobalFilter,
+      disableMultiSort,
+      disableSortRemove,
+      disabledMultiRemove,
+      expandSubRows,
+      globalFilter,
+      isMultiSortEvent,
+      manualExpandedKey,
+      manualFilters,
+      manualGlobalFilter,
+      manualRowSelectedKey,
+      manualSortBy,
+      maxMultiSortColCount,
+      orderByFn,
+      pageCount: pageCount ?? -1,
+      sortTypes,
       columns,
       defaultColumn,
       disableSortBy: !isSortable,
@@ -319,7 +379,7 @@ export const Table = (props) => {
       getSubRows: subComponent ? getSubRowsWithSubComponents : getSubRows,
       initialState: {
         pageSize,
-        ...props.initialState,
+        ...initialState,
       },
       columnResizeMode,
       getRowId: subComponent ? getRowIdWithSubComponents : getRowId,

package/DEV-esm/core/Table/cells/DefaultCell.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { defaultColumn } from 'react-table';
 import cx from 'classnames';
-import { Box, LineClamp, ShadowRoot } from '../../../utils/index.js';
+import { Box, lineClamp, ShadowRoot } from '../../../utils/index.js';
 import { TableInstanceContext } from '../utils.js';
 export const DefaultCellRendererPropsChildren = React.createContext(void 0);
 export const DefaultCell = (props) => {
@@ -14,6 +14,10 @@ export const DefaultCell = (props) => {
   );
   let isCellRendererChildrenCustom =
     React.useContext(DefaultCellRendererPropsChildren) !== props.children;
+  let isDefaultTextCell =
+    'string' == typeof props.cellProps.value &&
+    !isCustomCell &&
+    !isCellRendererChildrenCustom;
   let {
     cellElementProps: {
       className: cellElementClassName,
@@ -28,9 +32,7 @@ export const DefaultCell = (props) => {
     className,
     style,
     status,
-    clamp = 'string' == typeof cellProps.value &&
-      !isCustomCell &&
-      !isCellRendererChildrenCustom,
+    clamp = isDefaultTextCell,
     ...rest
   } = props;
   let { key: cellElementKey, ...cellElementPropsRest } = cellElementProps;
@@ -61,12 +63,14 @@ export const DefaultCell = (props) => {
       React.createElement(
         TableCellContent,
         {
-          shouldRenderWrapper: isCellRendererChildrenCustom,
+          shouldRenderWrapper: isDefaultTextCell,
         },
         clamp
           ? React.createElement(
-              LineClamp,
-              null,
+              'div',
+              {
+                className: lineClamp.className,
+              },
               React.createElement('slot', null),
             )
           : React.createElement('slot', null),
@@ -106,15 +110,15 @@ if ('development' === process.env.NODE_ENV)
 let TableCellContent = (props) => {
   let { children, shouldRenderWrapper } = props;
   return shouldRenderWrapper
-    ? children
-    : React.createElement(
+    ? React.createElement(
         'div',
         {
           className: '_iui-table-cell-default-content',
           onClick: (e) => e.stopPropagation(),
         },
         children,
-      );
+      )
+    : children;
 };
 let css = `
 ._iui-table-cell-default-content {
@@ -128,4 +132,5 @@ let css = `
   inset: -6px;
   z-index: -1;
 }
+${lineClamp.css}
 `;

package/DEV-esm/core/Table/columns/actionColumn.js

@@ -12,6 +12,7 @@ let ACTION_CELL_ID = 'iui-table-action';
 export const ActionColumn = ({ columnManager = false } = {}) => ({
   id: ACTION_CELL_ID,
   disableResizing: true,
+  canResize: false,
   disableGroupBy: true,
   minWidth: 48,
   width: 48,

package/DEV-esm/core/Table/columns/expanderColumn.js

@@ -15,30 +15,35 @@ export const ExpanderColumn = (props = {}) => {
     maxWidth: 48,
     columnClassName: 'iui-slot',
     cellClassName: 'iui-slot',
-    Cell: (props) => {
-      let { row } = props;
-      if (!subComponent?.(row)) return null;
+    Cell: () => null,
+    cellRenderer: (props) => {
+      let { row } = props.cellProps;
+      let children = subComponent?.(row)
+        ? React.createElement(
+            IconButton,
+            {
+              'aria-label': 'Toggle expandable content',
+              className: 'iui-table-row-expander',
+              styleType: 'borderless',
+              size: 'small',
+              onClick: (e) => {
+                e.stopPropagation();
+                row.toggleRowExpanded();
+              },
+              disabled: isDisabled?.(row.original),
+              'aria-expanded': row.isExpanded,
+            },
+            React.createElement(SvgChevronRight, null),
+          )
+        : null;
       return React.createElement(
-        IconButton,
+        DefaultCell,
         {
-          'aria-label': 'Toggle expandable content',
-          className: 'iui-table-row-expander',
-          styleType: 'borderless',
-          size: 'small',
-          onClick: (e) => {
-            e.stopPropagation();
-            row.toggleRowExpanded();
-          },
-          disabled: isDisabled?.(props.row.original),
-          'aria-expanded': row.isExpanded,
+          ...props,
+          isDisabled: (rowData) => !!isDisabled?.(rowData),
         },
-        React.createElement(SvgChevronRight, null),
+        children,
       );
     },
-    cellRenderer: (props) =>
-      React.createElement(DefaultCell, {
-        ...props,
-        isDisabled: (rowData) => !!isDisabled?.(rowData),
-      }),
   };
 };

package/DEV-esm/core/Table/columns/selectionColumn.js

@@ -44,8 +44,10 @@ export const SelectionColumn = (props = {}) => {
         onChange: () => toggleAllRowsSelected(nextToggleState),
       });
     },
-    Cell: ({ row, selectSubRows = true }) =>
-      React.createElement(Checkbox, {
+    Cell: () => null,
+    cellRenderer: (props) => {
+      let { row, selectSubRows = true } = props.cellProps;
+      let children = React.createElement(Checkbox, {
         ...row.getToggleRowSelectedProps(),
         style: {},
         title: '',
@@ -65,11 +67,15 @@ export const SelectionColumn = (props = {}) => {
             );
           else row.toggleRowSelected(!row.isSelected);
         },
-      }),
-    cellRenderer: (props) =>
-      React.createElement(DefaultCell, {
-        ...props,
-        isDisabled: (rowData) => !!isDisabled?.(rowData),
-      }),
+      });
+      return React.createElement(
+        DefaultCell,
+        {
+          ...props,
+          isDisabled: (rowData) => !!isDisabled?.(rowData),
+        },
+        children,
+      );
+    },
   };
 };

package/DEV-esm/core/Table/hooks/useExpanderCell.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { ExpanderColumn, EXPANDER_CELL_ID } from '../columns/index.js';
+import { DefaultCell } from '../cells/DefaultCell.js';
 export const useExpanderCell =
   (subComponent, expanderCell, isRowDisabled) => (hooks) => {
     if (!subComponent) return;
@@ -13,14 +14,17 @@ export const useExpanderCell =
       return [
         {
           ...expanderColumn,
-          Cell: expanderCell
-            ? (cellProps) =>
+          cellRenderer: expanderCell
+            ? (props) =>
                 React.createElement(
-                  React.Fragment,
-                  null,
-                  expanderCell(cellProps),
+                  DefaultCell,
+                  {
+                    ...props,
+                    isDisabled: (rowData) => !!isRowDisabled?.(rowData),
+                  },
+                  expanderCell(props.cellProps),
                 )
-            : expanderColumn.Cell,
+            : expanderColumn.cellRenderer,
         },
         ...columns,
       ];