@itwin/itwinui-react 3.18.2 → 3.19.0

package/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/esm/core/Table/columns/actionColumn.d.ts

@@ -28,6 +28,7 @@ type ActionColumnProps = {
 export declare const ActionColumn: <T extends Record<string, unknown>>({ columnManager, }?: ActionColumnProps) => {
     id: string;
     disableResizing: boolean;
+    canResize: boolean;
     disableGroupBy: boolean;
     minWidth: number;
     width: number;

package/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/esm/core/Table/columns/expanderColumn.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { CellProps, CellRendererProps, Row } from '../../../react-table/react-table.js';
+import type { CellRendererProps, Row } from '../../../react-table/react-table.js';
 export declare const EXPANDER_CELL_ID = "iui-table-expander";
 /**
  * Expander column that adds sub-content expander column to the Table.
@@ -39,6 +39,6 @@ export declare const ExpanderColumn: <T extends Record<string, unknown>>(props?:
     maxWidth: number;
     columnClassName: string;
     cellClassName: string;
-    Cell: (props: CellProps<T>) => React.JSX.Element | null;
+    Cell: () => null;
     cellRenderer: (props: CellRendererProps<T>) => React.JSX.Element;
 };

package/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/esm/core/Table/columns/selectionColumn.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { CellProps, CellRendererProps, HeaderProps } from '../../../react-table/react-table.js';
+import type { CellRendererProps, HeaderProps } from '../../../react-table/react-table.js';
 export declare const SELECTION_CELL_ID = "iui-table-checkbox-selector";
 /**
  * Selection column that adds selection checkbox column to the Table.
@@ -28,6 +28,6 @@ export declare const SelectionColumn: <T extends Record<string, unknown>>(props?
     columnClassName: string;
     cellClassName: string;
     Header: ({ getToggleAllRowsSelectedProps, toggleAllRowsSelected, rows, preFilteredFlatRows, state, }: HeaderProps<T>) => React.JSX.Element;
-    Cell: ({ row, selectSubRows }: CellProps<T>) => React.JSX.Element;
+    Cell: () => null;
     cellRenderer: (props: CellRendererProps<T>) => React.JSX.Element;
 };

package/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/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,
       ];

package/esm/core/Tabs/Tabs.d.ts

@@ -42,9 +42,12 @@ type TabsWrapperOwnProps = {
      */
     value?: string;
     /**
-     * Function that gets called when active tab is changed.
+     * Function that gets called when active tab *changes* (uncontrolled mode) or should *change* (controlled mode).
      *
      * Should be used alongside `value` prop.
+     *
+     * If need to listen to each tab click, use `onClick` prop on `Tabs.Tab`.
+     * Similarly, for each focus, use `onFocus` prop on `Tabs.Tab`.
      */
     onValueChange?: (value: string) => void;
     /**

package/esm/core/Tag/Tag.js

@@ -1,6 +1,11 @@
 import cx from 'classnames';
 import * as React from 'react';
-import { SvgCloseSmall, Box, ButtonBase } from '../../utils/index.js';
+import {
+  SvgCloseSmall,
+  Box,
+  ButtonBase,
+  mergeEventHandlers,
+} from '../../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
 import { LinkAction, LinkBox } from '../LinkAction/LinkAction.js';
 export const Tag = React.forwardRef((props, forwardedRef) => {
@@ -35,8 +40,11 @@ export const Tag = React.forwardRef((props, forwardedRef) => {
           Box,
           {
             as: shouldUseLinkAction ? LinkAction : 'span',
-            onClick: shouldUseLinkAction ? onClick : void 0,
             ...labelProps,
+            onClick: mergeEventHandlers(
+              labelProps?.onClick,
+              shouldUseLinkAction ? onClick : void 0,
+            ),
             className: cx('iui-tag-label', labelProps?.className),
           },
           children,
@@ -48,9 +56,9 @@ export const Tag = React.forwardRef((props, forwardedRef) => {
         {
           styleType: 'borderless',
           size: 'small',
-          onClick: onRemove,
           'aria-label': 'Delete tag',
           ...removeButtonProps,
+          onClick: mergeEventHandlers(removeButtonProps?.onClick, onRemove),
           className: cx('iui-tag-button', removeButtonProps?.className),
         },
         React.createElement(SvgCloseSmall, {

package/esm/core/ThemeProvider/ThemeContext.d.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import type { FutureOptions, ThemeOptions, ThemeType } from './ThemeProvider.js';
+import type { ThemeOptions, ThemeType } from './ThemeProvider.js';
 export declare const ThemeContext: React.Context<{
     theme?: ThemeType;
     themeOptions?: ThemeOptions;
     portalContainer?: HTMLElement | null;
-    future?: FutureOptions;
 } | undefined>;

package/esm/core/ThemeProvider/ThemeProvider.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
+import type { FutureOptions, PolymorphicForwardRefComponent } from '../../utils/index.js';
 export type ThemeOptions = {
     /**
      * Whether to apply high-contrast versions of light and dark themes.
@@ -7,18 +7,6 @@ export type ThemeOptions = {
      */
     highContrast?: boolean;
 };
-export type FutureOptions = {
-    /**
-     * @alpha
-     *
-     * If enabled, the theme resembles the future iTwinUI version's theme (including alphas) *whenever possible*.
-     *
-     * This is useful in making apps looks like future versions of iTwinUI to help with incremental adoption.
-     *
-     * **NOTE**: Since this is a theme bridge to *future* versions, the theme could have breaking changes.
-     */
-    themeBridge?: boolean;
-};
 export type ThemeType = 'light' | 'dark' | 'os';
 type RootProps = {
     /**
@@ -53,12 +41,8 @@ type RootProps = {
          */
         applyBackground?: boolean;
     };
-    /**
-     * Options to help with early adoption of features from future versions.
-     */
-    future?: FutureOptions;
 };
-type ThemeProviderOwnProps = Pick<RootProps, 'theme' | 'future'> & {
+type ThemeProviderOwnProps = Pick<RootProps, 'theme'> & {
     themeOptions?: RootProps['themeOptions'];
     children: Required<React.ReactNode>;
     /**
@@ -89,6 +73,12 @@ type ThemeProviderOwnProps = Pick<RootProps, 'theme' | 'future'> & {
      * If true or false is passed, it will override the default behavior.
      */
     includeCss?: boolean;
+    /**
+     * Options to help with early adoption of features from future versions.
+     *
+     * All future options will be automatically inherited across nested ThemeProviders, unless explicitly overridden.
+     */
+    future?: true | FutureOptions;
 };
 /**
  * This component provides global state and applies theme to the entire tree

package/esm/core/ThemeProvider/ThemeProvider.js

@@ -13,6 +13,8 @@ import {
   useHydration,
   PortalContainerContext,
   useId,
+  FutureFlagsProvider,
+  useFutureFlag,
 } from '../../utils/index.js';
 import { ThemeContext } from './ThemeContext.js';
 import { ToastProvider, Toaster } from '../Toast/Toaster.js';
@@ -20,14 +22,14 @@ import { meta } from '../../utils/meta.js';
 let versionWithoutDots = meta.version.replace(/\./g, '');
 let OwnerDocumentContext = React.createContext(void 0);
 export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
-  var _themeOptions, _themeOptions1, _future;
+  var _themeOptions, _themeOptions1;
   let {
     theme: themeProp = 'inherit',
     children,
     themeOptions = {},
     portalContainer: portalContainerProp,
     includeCss = 'inherit' === themeProp,
-    future = {},
+    future: futureProp = {},
     ...rest
   } = props;
   useInertPolyfill();
@@ -39,62 +41,67 @@ export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
   (_themeOptions1 = themeOptions).highContrast ??
     (_themeOptions1.highContrast =
       'inherit' === themeProp ? parent.highContrast : void 0);
-  (_future = future).themeBridge ??
-    (_future.themeBridge = parent.context?.future?.themeBridge);
   let portalContainerFromParent = React.useContext(PortalContainerContext);
-  let contextValue = React.useMemo(
+  let themeContextValue = React.useMemo(
     () => ({
       theme,
       themeOptions,
-      future,
     }),
-    [theme, JSON.stringify(themeOptions), JSON.stringify(future)],
+    [theme, JSON.stringify(themeOptions)],
   );
   let [portalContainer, setPortalContainer] = React.useState(
     portalContainerProp || null,
   );
   return React.createElement(
-    PortalContainerContext.Provider,
+    FutureFlagsProvider,
     {
-      value: portalContainer,
+      value: futureProp,
     },
     React.createElement(
-      HydrationProvider,
-      null,
+      PortalContainerContext.Provider,
+      {
+        value: portalContainer,
+      },
       React.createElement(
-        ThemeContext.Provider,
-        {
-          value: contextValue,
-        },
+        HydrationProvider,
+        null,
         React.createElement(
-          ToastProvider,
+          ThemeContext.Provider,
           {
-            inherit: 'inherit' === themeProp && !portalContainerProp,
+            value: themeContextValue,
           },
-          includeCss && rootElement
-            ? React.createElement(FallbackStyles, {
-                root: rootElement,
-              })
-            : null,
           React.createElement(
-            MainRoot,
+            ToastProvider,
             {
-              theme: theme,
-              themeOptions: themeOptions,
-              future: future,
-              ref: useMergedRefs(forwardedRef, setRootElement, useIuiDebugRef),
-              ...rest,
+              inherit: 'inherit' === themeProp && !portalContainerProp,
             },
-            children,
-            React.createElement(PortalContainer, {
-              theme: theme,
-              themeOptions: themeOptions,
-              future: future,
-              portalContainerProp: portalContainerProp,
-              portalContainerFromParent: portalContainerFromParent,
-              setPortalContainer: setPortalContainer,
-              isInheritingTheme: 'inherit' === themeProp,
-            }),
+            includeCss && rootElement
+              ? React.createElement(FallbackStyles, {
+                  root: rootElement,
+                })
+              : null,
+            React.createElement(
+              MainRoot,
+              {
+                theme: theme,
+                themeOptions: themeOptions,
+                ref: useMergedRefs(
+                  forwardedRef,
+                  setRootElement,
+                  useIuiDebugRef,
+                ),
+                ...rest,
+              },
+              children,
+              React.createElement(PortalContainer, {
+                theme: theme,
+                themeOptions: themeOptions,
+                portalContainerProp: portalContainerProp,
+                portalContainerFromParent: portalContainerFromParent,
+                setPortalContainer: setPortalContainer,
+                isInheritingTheme: 'inherit' === themeProp,
+              }),
+            ),
           ),
         ),
       ),
@@ -124,12 +131,13 @@ let MainRoot = React.forwardRef((props, forwardedRef) => {
   );
 });
 let Root = React.forwardRef((props, forwardedRef) => {
-  let { theme, children, themeOptions, className, future, ...rest } = props;
+  let { theme, children, themeOptions, className, ...rest } = props;
   let prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
   let prefersHighContrast = useMediaQuery('(prefers-contrast: more)');
   let shouldApplyDark = 'dark' === theme || ('os' === theme && prefersDark);
   let shouldApplyHC = themeOptions?.highContrast ?? prefersHighContrast;
   let shouldApplyBackground = themeOptions?.applyBackground;
+  let themeBridge = useFutureFlag('themeBridge');
   return React.createElement(
     Box,
     {
@@ -142,7 +150,7 @@ let Root = React.forwardRef((props, forwardedRef) => {
       ),
       'data-iui-theme': shouldApplyDark ? 'dark' : 'light',
       'data-iui-contrast': shouldApplyHC ? 'high' : 'default',
-      'data-iui-bridge': future?.themeBridge ? true : void 0,
+      'data-iui-bridge': themeBridge ? 'true' : void 0,
       ref: forwardedRef,
       ...rest,
     },
@@ -191,7 +199,6 @@ let PortalContainer = React.memo(
     isInheritingTheme,
     theme,
     themeOptions,
-    future,
   }) => {
     let ownerDocument = React.useContext(OwnerDocumentContext);
     let shouldSetupPortalContainer =
@@ -223,7 +230,6 @@ let PortalContainer = React.memo(
               ...themeOptions,
               applyBackground: false,
             },
-            future: future,
             'data-iui-portal': true,
             style: {
               display: 'contents',

package/esm/core/ToggleSwitch/ToggleSwitch.d.ts

@@ -14,6 +14,16 @@ type ToggleSwitchProps = {
      * @default 'right'
      */
     labelPosition?: 'left' | 'right';
+    /**
+     * Passes props to wrapper.
+     *
+     * By default, `className` and `style` are applied on the wrapper element, and all other DOM props are passed to
+     * `<input>` element.
+     *
+     * When `wrapperProps` is passed or when the `ToggleSwitch.consistentPropsSpread` future flag is enabled, `className`
+     * and `style` are applied on the `<input>` element, similar to other DOM props.
+     */
+    wrapperProps?: React.HTMLAttributes<HTMLElement>;
 } & ({
     /**
      * Size of the toggle switch.
@@ -32,6 +42,17 @@ type ToggleSwitchProps = {
 });
 /**
  * A switch for turning on and off.
+ *
+ * ---
+ *
+ * By default, `className` and `style` are applied on the wrapper element, and all other DOM props are passed to `<input>`
+ * element.
+ *
+ * When `wrapperProps` is passed or when the `ToggleSwitch.consistentPropsSpread` future flag is enabled, `className`
+ * and `style` are applied on the `<input>` element, similar to other DOM props.
+ *
+ * ---
+ *
  * @example
  * <caption>Basic toggle</caption>
  * <ToggleSwitch onChange={(e) => console.log(e.target.checked)} defaultChecked />

package/esm/core/ToggleSwitch/ToggleSwitch.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import cx from 'classnames';
-import { Box, SvgCheckmark } from '../../utils/index.js';
+import { Box, SvgCheckmark, useFutureFlag } from '../../utils/index.js';
 export const ToggleSwitch = React.forwardRef((props, ref) => {
   let {
     disabled = false,
@@ -10,15 +10,21 @@ export const ToggleSwitch = React.forwardRef((props, ref) => {
     style,
     size = 'default',
     labelProps = {},
+    wrapperProps,
     icon: iconProp,
     ...rest
   } = props;
+  let { consistentPropsSpread } = useFutureFlag('ToggleSwitch') || {};
+  let shouldApplyClassNameAndStyleOnInput =
+    null != wrapperProps || consistentPropsSpread;
   let shouldShowIcon =
     void 0 === iconProp || (null !== iconProp && 'small' !== size);
   return React.createElement(
     Box,
     {
       as: label ? 'label' : 'div',
+      style: shouldApplyClassNameAndStyleOnInput ? void 0 : style,
+      ...wrapperProps,
       className: cx(
         'iui-toggle-switch-wrapper',
         {
@@ -26,19 +32,23 @@ export 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(Box, {
       as: 'input',
-      className: 'iui-toggle-switch',
       type: 'checkbox',
       role: 'switch',
+      style: shouldApplyClassNameAndStyleOnInput ? style : void 0,
+      ...rest,
+      className: cx(
+        'iui-toggle-switch',
+        shouldApplyClassNameAndStyleOnInput ? className : void 0,
+      ),
       disabled: disabled,
       ref: ref,
-      ...rest,
     }),
     shouldShowIcon &&
       React.createElement(

package/esm/styles.js

@@ -1,4 +1,4 @@
-const t = '3.18.2';
+const t = '3.19.0';
 const u = new Proxy(
   {},
   {

package/esm/utils/components/index.d.ts

@@ -9,6 +9,6 @@ export * from './Box.js';
 export * from './ButtonBase.js';
 export * from './Portal.js';
 export * from './ShadowRoot.js';
-export * from './LineClamp.js';
+export * from './lineClamp.js';
 export * from './FieldsetBase.js';
 export * from './OverflowContainer.js';

package/esm/utils/components/index.js

@@ -9,6 +9,6 @@ export * from './Box.js';
 export * from './ButtonBase.js';
 export * from './Portal.js';
 export * from './ShadowRoot.js';
-export * from './LineClamp.js';
+export * from './lineClamp.js';
 export * from './FieldsetBase.js';
 export * from './OverflowContainer.js';

package/esm/utils/components/lineClamp.d.ts

@@ -0,0 +1,5 @@
+/** @private */
+export declare const lineClamp: {
+    css: string;
+    className: string;
+};

package/esm/utils/components/lineClamp.js

@@ -0,0 +1,13 @@
+let className = '_iui-line-clamp';
+let css = `
+.${className} {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: var(--_iui-line-clamp, 3);
+  -webkit-box-orient: vertical;
+}
+`;
+export const lineClamp = {
+  css,
+  className,
+};