@itwin/itwinui-react 3.18.3 → 3.19.0

package/DEV-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/DEV-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/DEV-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/DEV-esm/styles.js

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

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

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

@@ -1,9 +1,14 @@
 import * as React from 'react';
 import { mergeRefs } from '../hooks/useMergedRefs.js';
+let _React = React;
+export const isReact17or18 = (() => {
+  let version = _React.version?.split('.')?.[0];
+  return ['17', '18'].includes(version);
+})();
 export 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 = mergeRefs(
     ...[childrenRef, 'ref' in props ? props.ref : null].filter(Boolean),

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useLatestRef } from './useLatestRef.js';
 export const useControlledState = (
   initialValue,
   controlledState,
@@ -9,12 +10,15 @@ export const useControlledState = (
     () => (void 0 !== controlledState ? controlledState : uncontrolledState),
     [controlledState, uncontrolledState],
   );
+  let oldState = 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-esm/utils/providers/FutureFlagsProvider.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { useSafeContext } from '../hooks/useSafeContext.js';
+let FutureFlagsContext = React.createContext({});
+export function useFutureFlag(key) {
+  let context = useSafeContext(FutureFlagsContext);
+  return context[key];
+}
+export 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-esm/utils/providers/index.js

@@ -1 +1,2 @@
+export * from './FutureFlagsProvider.js';
 export * from './HydrationProvider.js';

package/cjs/core/Buttons/DropdownButton.d.ts

@@ -8,7 +8,7 @@ export type DropdownButtonProps = {
      * Pass a function that takes the `close` argument (to close the menu),
      * and returns a list of `MenuItem` components.
      */
-    menuItems: (close: () => void) => React.JSX.Element[];
+    menuItems: ((close: () => void) => React.JSX.Element[]) | React.JSX.Element[] | React.JSX.Element;
     /**
      * Style of the dropdown button.
      * Use 'borderless' to hide outline.

package/cjs/core/ComboBox/ComboBoxMenuItem.d.ts

@@ -1,20 +1,9 @@
 import * as React from 'react';
-export declare const ComboBoxMenuItem: React.NamedExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children" | "as" | "role" | "onClick" | "size" | "icon" | "disabled" | "value" | "startIcon" | "endIcon" | "index" | "focused" | "isSelected" | "sublabel" | "badge" | "subMenuItems"> & {
-    isSelected?: boolean;
-    disabled?: boolean;
-    value?: unknown;
-    onClick?: (value?: unknown) => void;
-    size?: "default" | "large";
-    sublabel?: React.ReactNode;
-    startIcon?: React.JSX.Element;
-    icon?: React.JSX.Element;
-    endIcon?: React.JSX.Element;
-    badge?: React.JSX.Element;
-    role?: string;
-    subMenuItems?: React.JSX.Element[];
-    children?: React.ReactNode;
-} & Pick<import("../List/ListItem.js").ListItemOwnProps, "focused"> & {
+import type { MenuItemProps } from '../Menu/MenuItem.js';
+type ComboBoxMenuItemProps = MenuItemProps & {
     index: number;
-} & {
+};
+export declare const ComboBoxMenuItem: React.NamedExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children" | "as" | "role" | "onClick" | "size" | "icon" | "disabled" | "value" | "startIcon" | "endIcon" | "index" | "focused" | "isSelected" | "sublabel" | "badge" | "subMenuItems"> & ComboBoxMenuItemProps & {
     as?: "div" | undefined;
 }>;
+export {};

package/cjs/core/ComboBox/ComboBoxMenuItem.js

@@ -49,7 +49,7 @@ 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/cjs/core/DropdownMenu/DropdownMenu.d.ts

@@ -16,7 +16,7 @@ export type DropdownMenuProps = {
     /**
      * Child element to wrap dropdown with.
      */
-    children: React.ReactNode;
+    children: React.JSX.Element;
     /**
      * Middleware options.
      *

package/cjs/core/Menu/MenuItem.d.ts

@@ -10,14 +10,20 @@ export type MenuItemProps = {
      * Item is disabled.
      */
     disabled?: boolean;
+} & ({
     /**
      * Value of the item.
+     * @deprecated
      */
-    value?: unknown;
+    value: unknown;
     /**
      * Callback function that handles click and keyboard submit actions.
      */
     onClick?: (value?: unknown) => void;
+} | {
+    /** @deprecated */ value?: never;
+    onClick?: (event?: React.MouseEvent) => void;
+}) & {
     /**
      * Modify height of the item.
      * Use 'large' when any of the sibling items have `sublabel`.

package/cjs/core/Menu/MenuItem.js

@@ -70,13 +70,10 @@ 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,
@@ -101,9 +98,13 @@ const MenuItem = _react.forwardRef((props, forwardedRef) => {
       ...(parentMenu?.popoverGetItemProps != null
         ? parentMenu.popoverGetItemProps({
             focusableItemIndex,
-            userProps: handlers,
+            userProps: {
+              onClick,
+            },
           })
-        : handlers),
+        : {
+            onClick,
+          }),
       ...rest,
     },
     startIcon &&

package/cjs/core/Popover/Popover.d.ts

@@ -14,8 +14,10 @@ type PopoverOptions = {
      */
     visible?: boolean;
     /**
-     * Callback invoked every time the popover visibility changes as a result
-     * of internal logic. Should be used alongside `visible` prop.
+     * Callback invoked every time the popover visibility *changes* (uncontrolled mode) or should *change*
+     * (controlled mode) as a result of internal logic.
+     *
+     * Should be used alongside `visible` prop.
      */
     onVisibleChange?: (visible: boolean) => void;
     /**
@@ -147,7 +149,7 @@ export declare const usePopover: (options: PopoverOptions & PopoverInternalProps
         elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
     };
     open: boolean;
-    onOpenChange: React.Dispatch<React.SetStateAction<boolean>>;
+    onOpenChange: (value: boolean) => void;
     getReferenceProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
     getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
 };

package/cjs/core/Select/Select.js

@@ -183,7 +183,13 @@ const CustomSelect = _react.forwardRef((props, forwardedRef) => {
               isSelected,
             })
           : _react.createElement(_MenuItem.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}`,
@@ -467,15 +473,17 @@ const SelectListbox = _react.forwardRef((props, forwardedRef) => {
   }, []);
   let children = _react.useMemo(
     () =>
-      _react.Children.map(childrenProp, (child, index) =>
-        _react.isValidElement(child)
-          ? _react.createElement(_react1.CompositeItem, {
-              key: index,
-              render: child,
-              ref: child.props.ref || child.ref,
-            })
-          : child,
-      ),
+      _react.Children.map(childrenProp, (child, index) => {
+        if (_react.isValidElement(child)) {
+          let ref = _index.isReact17or18 ? child.ref : child.props.ref;
+          return _react.createElement(_react1.CompositeItem, {
+            key: index,
+            ref: ref,
+            render: child,
+          });
+        }
+        return child;
+      }),
     [childrenProp],
   );
   return _react.createElement(

package/cjs/core/SideNavigation/SideNavigation.js

@@ -56,9 +56,9 @@ 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(_index.SvgChevronRight, null),
   );

package/cjs/core/Table/ColumnHeader.js

@@ -105,10 +105,14 @@ const ColumnHeader = _react.forwardRef((props, forwardedRef) => {
       'string' == typeof column.Header
         ? _react.createElement(
             _index.ShadowRoot,
-            null,
+            {
+              css: _index.lineClamp.css,
+            },
             _react.createElement(
-              _index.LineClamp,
-              null,
+              'div',
+              {
+                className: _index.lineClamp.className,
+              },
               _react.createElement('slot', null),
             ),
             _react.createElement('slot', {

package/cjs/core/Table/Table.d.ts

@@ -206,8 +206,8 @@ export type TableProps<T extends Record<string, unknown> = Record<string, unknow
     /**
      * Passes props to the `role="table"` element within the wrapper.
      *
-     * If `tableProps` or `role` is passed to `Table`, all ARIA attributes passed to `Table` will be passed to the wrapper.
-     * Else, all ARIA attributes will be passed to the inner element with `role="table"`.
+     * - If `tableProps` or `role` is passed to `Table`, all ARIA attributes passed to `Table` will be passed to the wrapper.
+     * - Else, all ARIA attributes will be passed to the inner element with `role="table"`.
      */
     tableProps?: React.ComponentProps<'div'>;
     /**