@itwin/itwinui-react 3.17.0-dev.0 → 3.17.0-dev.2

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # Changelog
 
+## 3.16.6
+
+### Patch Changes
+
+- [#2411](https://github.com/iTwin/iTwinUI/pull/2411): Fixed `Panels.Trigger` not working in older React versions where `useId` is not available.
+- [#2407](https://github.com/iTwin/iTwinUI/pull/2407): Increased contrast (i.e. opacity) of light theme's text selection background. This also affects some other opacities of other components (e.g. shadows and hover backgrounds).
+
+## 3.16.5
+
+### Patch Changes
+
+- [#2402](https://github.com/iTwin/iTwinUI/pull/2402): Fixed an issue in `Tabs` where it wasn't recalculating the active stripe position when a new tab was asynchronously added to the tablist.
+
+## 3.16.4
+
+### Patch Changes
+
+- [#2389](https://github.com/iTwin/iTwinUI/pull/2389): Fixed `Table` bug where parent rows had indeterminate checkboxes even when all sub rows were selected.
+- [#2390](https://github.com/iTwin/iTwinUI/pull/2390): Fixed `ThemeProvider` bug of re-mounting its children and losing state when `portalContainer` is toggled between `undefined` and defined.
+- [#2396](https://github.com/iTwin/iTwinUI/pull/2396): Fixed rare bug where icons in button components (e.g. `Button`, `SidenavButton`, etc.) were becoming 0 in width when less space was available.
+
+## 3.16.3
+
+### Patch Changes
+
+- [#2384](https://github.com/iTwin/iTwinUI/pull/2384): Fixed the syntax for `react` and `react-dom` version ranges declared in `peerDependencies`.
+- [#2386](https://github.com/iTwin/iTwinUI/pull/2386): Fixed a visual issue in `Tile.Name` where a long string without spaces wasn't wrapping properly.
+
 ## 3.16.2
 
 ### Patch Changes

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

@@ -19,7 +19,6 @@ const _DialogContext = require('./DialogContext.js');
 const _DialogButtonBar = require('./DialogButtonBar.js');
 const _DialogMain = require('./DialogMain.js');
 const _index = require('../../utils/index.js');
-const _reacttransitiongroup = require('react-transition-group');
 const DialogComponent = _react.forwardRef((props, ref) => {
   let {
     trapFocus = false,
@@ -39,49 +38,43 @@ const DialogComponent = _react.forwardRef((props, ref) => {
     ...rest
   } = props;
   let dialogRootRef = _react.useRef(null);
-  return _react.createElement(
-    _reacttransitiongroup.Transition,
-    {
-      in: isOpen,
-      timeout: {
-        exit: 600,
-      },
-      mountOnEnter: true,
-      unmountOnExit: true,
-    },
-    _react.createElement(
-      _DialogContext.DialogContext.Provider,
-      {
-        value: {
-          isOpen,
-          onClose,
-          closeOnEsc,
-          closeOnExternalClick,
-          isDismissible,
-          preventDocumentScroll,
-          trapFocus,
-          setFocus,
-          isDraggable,
-          isResizable,
-          relativeTo,
-          dialogRootRef,
-          placement,
-        },
-      },
-      _react.createElement(
-        _index.Portal,
+  let mergedRefs = (0, _index.useMergedRefs)(ref, dialogRootRef);
+  return isOpen
+    ? _react.createElement(
+        _DialogContext.DialogContext.Provider,
         {
-          portal: portal,
+          value: {
+            isOpen,
+            onClose,
+            closeOnEsc,
+            closeOnExternalClick,
+            isDismissible,
+            preventDocumentScroll,
+            trapFocus,
+            setFocus,
+            isDraggable,
+            isResizable,
+            relativeTo,
+            placement,
+          },
         },
-        _react.createElement(_index.Box, {
-          className: (0, _classnames.default)('iui-dialog-wrapper', className),
-          'data-iui-relative': 'container' === relativeTo,
-          ref: (0, _index.useMergedRefs)(ref, dialogRootRef),
-          ...rest,
-        }),
-      ),
-    ),
-  );
+        _react.createElement(
+          _index.Portal,
+          {
+            portal: portal,
+          },
+          _react.createElement(_index.Box, {
+            className: (0, _classnames.default)(
+              'iui-dialog-wrapper',
+              className,
+            ),
+            'data-iui-relative': 'container' === relativeTo,
+            ref: mergedRefs,
+            ...rest,
+          }),
+        ),
+      )
+    : null;
 });
 DialogComponent.displayName = 'Dialog';
 const Dialog = Object.assign(DialogComponent, {

package/DEV-cjs/core/Dialog/DialogBackdrop.js

@@ -14,9 +14,11 @@ const _react = _interop_require_wildcard._(require('react'));
 const _Backdrop = require('../Backdrop/Backdrop.js');
 const _index = require('../../utils/index.js');
 const _DialogContext = require('./DialogContext.js');
+const _DialogMainContext = require('./DialogMainContext.js');
 const _classnames = _interop_require_default._(require('classnames'));
 const DialogBackdrop = _react.forwardRef((props, ref) => {
   let dialogContext = (0, _DialogContext.useDialogContext)();
+  let dialogMainContext = (0, _DialogMainContext.useDialogMainContext)();
   let {
     isVisible = dialogContext.isOpen,
     isDismissible = dialogContext.isDismissible,
@@ -33,7 +35,10 @@ const DialogBackdrop = _react.forwardRef((props, ref) => {
   let handleMouseDown = (event) => {
     event.persist();
     if (event.target !== backdropRef.current) return;
-    if (isDismissible && closeOnExternalClick && onClose) onClose(event);
+    if (isDismissible && closeOnExternalClick && onClose) {
+      dialogMainContext?.beforeClose();
+      onClose(event);
+    }
     onMouseDown?.(event);
   };
   return _react.createElement(_Backdrop.Backdrop, {

package/DEV-cjs/core/Dialog/DialogMain.js

@@ -14,9 +14,9 @@ const _react = _interop_require_wildcard._(require('react'));
 const _classnames = _interop_require_default._(require('classnames'));
 const _index = require('../../utils/index.js');
 const _DialogContext = require('./DialogContext.js');
-const _reacttransitiongroup = require('react-transition-group');
 const _DialogDragContext = require('./DialogDragContext.js');
 const _useDragAndDrop = require('../../utils/hooks/useDragAndDrop.js');
+const _DialogMainContext = require('./DialogMainContext.js');
 const DialogMain = _react.forwardRef((props, ref) => {
   let dialogContext = (0, _DialogContext.useDialogContext)();
   let {
@@ -37,12 +37,13 @@ const DialogMain = _react.forwardRef((props, ref) => {
     placement = dialogContext.placement,
     ...rest
   } = props;
-  let [style, setStyle] = _react.useState();
+  let { dialogRootRef } = dialogContext;
   let dialogRef = _react.useRef(null);
-  let hasBeenResized = _react.useRef(false);
   let previousFocusedElement = _react.useRef();
+  let [style, setStyle] = _react.useState();
+  let hasBeenResized = _react.useRef(false);
   let originalBodyOverflow = _react.useRef('');
-  _react.useEffect(() => {
+  (0, _index.useLayoutEffect)(() => {
     if (isOpen) originalBodyOverflow.current = document.body.style.overflow;
   }, [isOpen]);
   _react.useEffect(() => {
@@ -58,17 +59,19 @@ const DialogMain = _react.forwardRef((props, ref) => {
     return () => {
       ownerDocument.body.style.overflow = originalBodyOverflow.current;
     };
-  }, [isOpen, preventDocumentScroll]);
+  }, [dialogRef, isOpen, preventDocumentScroll]);
   let handleKeyDown = (event) => {
     if (event.altKey) return;
     event.persist();
-    if (isDismissible && closeOnEsc && 'Escape' === event.key && onClose)
+    if (isDismissible && closeOnEsc && 'Escape' === event.key && onClose) {
+      beforeClose();
       onClose(event);
+    }
     onKeyDown?.(event);
   };
   let { onPointerDown, transform } = (0, _useDragAndDrop.useDragAndDrop)(
     dialogRef,
-    dialogContext.dialogRootRef,
+    dialogRootRef,
     isDraggable,
   );
   let handlePointerDown = _react.useCallback(
@@ -88,13 +91,35 @@ const DialogMain = _react.forwardRef((props, ref) => {
       insetBlockStart: dialogRef.current?.offsetTop,
       transform: `translate(${translateX}px,${translateY}px)`,
     }));
-  }, [isDraggable, isOpen]);
+  }, [dialogRef, isDraggable, isOpen]);
   let setResizeStyle = _react.useCallback((newStyle) => {
     setStyle((oldStyle) => ({
       ...oldStyle,
       ...newStyle,
     }));
   }, []);
+  let onEnter = _react.useCallback(() => {
+    previousFocusedElement.current =
+      dialogRef.current?.ownerDocument.activeElement;
+    if (setFocus)
+      dialogRef.current?.focus({
+        preventScroll: true,
+      });
+  }, [dialogRef, previousFocusedElement, setFocus]);
+  let beforeClose = _react.useCallback(() => {
+    if (
+      dialogRef.current?.contains(
+        dialogRef.current?.ownerDocument.activeElement,
+      )
+    )
+      previousFocusedElement.current?.focus();
+  }, [dialogRef, previousFocusedElement]);
+  let mountRef = _react.useCallback(
+    (element) => {
+      if (element) onEnter();
+    },
+    [onEnter],
+  );
   let content = _react.createElement(
     _index.Box,
     {
@@ -109,7 +134,7 @@ const DialogMain = _react.forwardRef((props, ref) => {
         className,
       ),
       role: 'dialog',
-      ref: (0, _index.useMergedRefs)(dialogRef, ref),
+      ref: (0, _index.useMergedRefs)(dialogRef, mountRef, ref),
       onKeyDown: handleKeyDown,
       tabIndex: -1,
       'data-iui-placement': placement,
@@ -127,7 +152,7 @@ const DialogMain = _react.forwardRef((props, ref) => {
       isResizable &&
         _react.createElement(_index.Resizer, {
           elementRef: dialogRef,
-          containerRef: dialogContext.dialogRootRef,
+          containerRef: dialogRootRef,
           onResizeStart: () => {
             if (!hasBeenResized.current) {
               hasBeenResized.current = true;
@@ -142,31 +167,14 @@ const DialogMain = _react.forwardRef((props, ref) => {
     children,
   );
   return _react.createElement(
-    _reacttransitiongroup.Transition,
+    _DialogMainContext.DialogMainContext.Provider,
     {
-      in: isOpen,
-      appear: true,
-      timeout: {
-        exit: 600,
-      },
-      onEntered: () => {
-        previousFocusedElement.current =
-          dialogRef.current?.ownerDocument.activeElement;
-        setFocus &&
-          dialogRef.current?.focus({
-            preventScroll: true,
-          });
-      },
-      onExit: () => {
-        if (
-          dialogRef.current?.contains(
-            dialogRef.current?.ownerDocument.activeElement,
-          )
-        )
-          previousFocusedElement.current?.focus();
-      },
-      unmountOnExit: true,
-      nodeRef: dialogRef,
+      value: _react.useMemo(
+        () => ({
+          beforeClose,
+        }),
+        [beforeClose],
+      ),
     },
     _react.createElement(
       _DialogDragContext.DialogDragContext.Provider,

package/DEV-cjs/core/Dialog/DialogMainContext.js

@@ -0,0 +1,23 @@
+'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, {
+  DialogMainContext: function () {
+    return DialogMainContext;
+  },
+  useDialogMainContext: function () {
+    return useDialogMainContext;
+  },
+});
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const DialogMainContext = _react.createContext(null);
+const useDialogMainContext = () => _react.useContext(DialogMainContext);

package/DEV-cjs/core/Dialog/DialogTitleBar.js

@@ -15,11 +15,13 @@ const _classnames = _interop_require_default._(require('classnames'));
 const _index = require('../../utils/index.js');
 const _IconButton = require('../Buttons/IconButton.js');
 const _DialogContext = require('./DialogContext.js');
+const _DialogMainContext = require('./DialogMainContext.js');
 const _DialogTitleBarTitle = require('./DialogTitleBarTitle.js');
 const _DialogDragContext = require('./DialogDragContext.js');
 const DialogTitleBar = Object.assign(
   _react.forwardRef((props, ref) => {
     let dialogContext = (0, _DialogContext.useDialogContext)();
+    let dialogMainContext = (0, _DialogMainContext.useDialogMainContext)();
     let {
       children,
       titleText,
@@ -31,6 +33,13 @@ const DialogTitleBar = Object.assign(
       ...rest
     } = props;
     let { onPointerDown } = (0, _DialogDragContext.useDialogDragContext)();
+    let onClick = _react.useCallback(
+      (e) => {
+        dialogMainContext?.beforeClose();
+        onClose?.(e);
+      },
+      [dialogMainContext, onClose],
+    );
     return _react.createElement(
       _index.Box,
       {
@@ -60,7 +69,7 @@ const DialogTitleBar = Object.assign(
                 {
                   size: 'small',
                   styleType: 'borderless',
-                  onClick: onClose,
+                  onClick: onClick,
                   'aria-label': 'Close',
                   'data-iui-shift': 'right',
                 },

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

@@ -170,7 +170,7 @@ const PanelTrigger = (props) => {
     panels,
   } = (0, _index.useSafeContext)(PanelsWrapperContext);
   let { id: panelId } = (0, _index.useSafeContext)(PanelContext);
-  let fallbackId = _react.useId();
+  let fallbackId = (0, _index.useId)();
   let triggerId = children.props.id || fallbackId;
   let onClick = _react.useCallback(() => {
     if (null == activePanel) return;

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

@@ -125,17 +125,7 @@ const SideNavigation = _react.forwardRef((props, forwardedRef) => {
         ),
         'bottom' === expanderPlacement && ExpandButton,
       ),
-      submenu &&
-        _react.createElement(
-          _index.WithCSSTransition,
-          {
-            in: isSubmenuOpen,
-            dimension: 'width',
-            timeout: 200,
-            classNames: 'iui',
-          },
-          submenu,
-        ),
+      submenu && isSubmenuOpen ? submenu : null,
     ),
   );
 });

package/DEV-cjs/core/Table/actionHandlers/selectHandler.js

@@ -29,19 +29,18 @@ const onSelectHandler = (newState, instance, onSelect, isRowDisabled) => {
   let newSelectedRowIds = {};
   let handleRow = (row) => {
     if (isRowDisabled?.(row.original)) return false;
+    let hasSubComponents = !!row.initialSubRows[0]?.original[_Table.iuiId];
+    let hasSubRows = row.subRows.length > 0 && !hasSubComponents;
     let isAllSubSelected = true;
-    if (row.initialSubRows[0]?.original[_Table.iuiId] === void 0)
+    if (hasSubRows)
       row.initialSubRows.forEach((subRow) => {
         let result = handleRow(subRow);
         if (!result) isAllSubSelected = false;
       });
-    if (
-      newState.selectedRowIds[row.id] &&
-      (!instance.selectSubRows ||
-        !row.initialSubRows.length ||
-        isAllSubSelected)
-    )
-      newSelectedRowIds[row.id] = true;
+    let isRowSelected = newState.selectedRowIds[row.id];
+    let case1 = isRowSelected && (!instance.selectSubRows || !hasSubRows);
+    let case2 = hasSubRows && isAllSubSelected;
+    if (case1 || case2) newSelectedRowIds[row.id] = true;
     return !!newSelectedRowIds[row.id];
   };
   instance.initialRows.forEach((row) => handleRow(row));

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

@@ -176,7 +176,15 @@ const Tab = _react.forwardRef((props, forwardedRef) => {
       });
     };
     if ('default' !== type && isActive) updateStripe();
-  }, [type, orientation, isActive, tabsWidth, setStripeProperties, tablistRef]);
+  }, [
+    type,
+    orientation,
+    isActive,
+    tabsWidth,
+    setStripeProperties,
+    tablistRef,
+    value,
+  ]);
   let onKeyDown = (event) => {
     if (event.altKey) return;
     let allTabs = Array.from(event.currentTarget.parentElement?.children ?? []);

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

@@ -21,13 +21,14 @@ const _meta = require('../../utils/meta.js');
 const versionWithoutDots = _meta.meta.version.replace(/\./g, '');
 const ownerDocumentAtom = (0, _jotai.atom)(void 0);
 const ThemeProvider = _react.forwardRef((props, forwardedRef) => {
-  var _themeOptions, _themeOptions1, _themeOptions2;
+  var _themeOptions, _themeOptions1, _future;
   let {
     theme: themeProp = 'inherit',
     children,
     themeOptions = {},
     portalContainer: portalContainerProp,
     includeCss = 'inherit' === themeProp,
+    future = {},
     ...rest
   } = props;
   useInertPolyfill();
@@ -39,11 +40,8 @@ const ThemeProvider = _react.forwardRef((props, forwardedRef) => {
   (_themeOptions1 = themeOptions).highContrast ??
     (_themeOptions1.highContrast =
       'inherit' === themeProp ? parent.highContrast : void 0);
-  (_themeOptions2 = themeOptions).bridgeToFutureVersions ??
-    (_themeOptions2.bridgeToFutureVersions =
-      'inherit' === themeProp
-        ? parent.context?.themeOptions?.bridgeToFutureVersions
-        : void 0);
+  (_future = future).themeBridge ??
+    (_future.themeBridge = parent.context?.future?.themeBridge);
   let [portalContainerFromParent] = (0, _index.useScopedAtom)(
     _index.portalContainerAtom,
   );
@@ -51,8 +49,9 @@ const ThemeProvider = _react.forwardRef((props, forwardedRef) => {
     () => ({
       theme,
       themeOptions,
+      future,
     }),
-    [theme, JSON.stringify(themeOptions)],
+    [theme, JSON.stringify(themeOptions), JSON.stringify(future)],
   );
   return _react.createElement(
     _index.ScopeProvider,
@@ -80,6 +79,7 @@ const ThemeProvider = _react.forwardRef((props, forwardedRef) => {
             {
               theme: theme,
               themeOptions: themeOptions,
+              future: future,
               ref: (0, _index.useMergedRefs)(
                 forwardedRef,
                 setRootElement,
@@ -91,6 +91,7 @@ const ThemeProvider = _react.forwardRef((props, forwardedRef) => {
             _react.createElement(PortalContainer, {
               theme: theme,
               themeOptions: themeOptions,
+              future: future,
               portalContainerProp: portalContainerProp,
               portalContainerFromParent: portalContainerFromParent,
               isInheritingTheme: 'inherit' === themeProp,
@@ -119,7 +120,7 @@ const MainRoot = _react.forwardRef((props, forwardedRef) => {
   });
 });
 const Root = _react.forwardRef((props, forwardedRef) => {
-  let { theme, children, themeOptions, className, ...rest } = props;
+  let { theme, children, themeOptions, className, future, ...rest } = props;
   let prefersDark = (0, _index.useMediaQuery)('(prefers-color-scheme: dark)');
   let prefersHighContrast = (0, _index.useMediaQuery)(
     '(prefers-contrast: more)',
@@ -139,7 +140,7 @@ const Root = _react.forwardRef((props, forwardedRef) => {
       ),
       'data-iui-theme': shouldApplyDark ? 'dark' : 'light',
       'data-iui-contrast': shouldApplyHC ? 'high' : 'default',
-      'data-iui-bridge': !!themeOptions?.bridgeToFutureVersions || void 0,
+      'data-iui-bridge': !!future?.themeBridge || void 0,
       ref: forwardedRef,
       ...rest,
     },
@@ -189,6 +190,7 @@ const PortalContainer = _react.memo(
     isInheritingTheme,
     theme,
     themeOptions,
+    future,
   }) => {
     let [ownerDocument] = (0, _index.useScopedAtom)(ownerDocumentAtom);
     let [portalContainer, setPortalContainer] = (0, _index.useScopedAtom)(
@@ -219,6 +221,7 @@ const PortalContainer = _react.memo(
               ...themeOptions,
               applyBackground: false,
             },
+            future: future,
             'data-iui-portal': true,
             style: {
               display: 'contents',