@itwin/itwinui-react 3.3.3 → 3.4.0

package/esm/core/Tabs/Tabs.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { useSafeContext, Box, polymorphic, useIsClient, useIsomorphicLayoutEffect, useMergedRefs, useContainerWidth, ButtonBase, mergeEventHandlers, useControlledState, useId, useLatestRef, } from '../utils/index.js';
+import { useSafeContext, Box, polymorphic, useIsClient, useLayoutEffect, useMergedRefs, useContainerWidth, ButtonBase, mergeEventHandlers, useControlledState, useId, useLatestRef, } from '../utils/index.js';
 import { Icon } from '../Icon/Icon.js';
 const TabsWrapper = React.forwardRef((props, ref) => {
     const { className, children, orientation = 'horizontal', type = 'default', focusActivationMode = 'auto', color = 'blue', defaultValue, value: activeValueProp, onValueChange, ...rest } = props;
@@ -53,27 +53,27 @@ const Tab = React.forwardRef((props, forwardedRef) => {
     const isActive = activeValue === value;
     const isActiveRef = useLatestRef(isActive);
     // Scroll to active tab only on initial render
-    useIsomorphicLayoutEffect(() => {
+    useLayoutEffect(() => {
         if (isActiveRef.current) {
             tabRef.current?.parentElement?.scrollTo({
                 [orientation === 'horizontal' ? 'left' : 'top']: tabRef.current?.[orientation === 'horizontal' ? 'offsetLeft' : 'offsetTop'] - 4,
                 behavior: 'instant', // not using 'smooth' to reduce layout shift on page load
             });
         }
-    }, []);
-    const updateStripe = () => {
-        const currentTabRect = tabRef.current?.getBoundingClientRect();
-        setStripeProperties({
-            '--iui-tabs-stripe-size': orientation === 'horizontal'
-                ? `${currentTabRect?.width}px`
-                : `${currentTabRect?.height}px`,
-            '--iui-tabs-stripe-position': orientation === 'horizontal'
-                ? `${tabRef.current?.offsetLeft}px`
-                : `${tabRef.current?.offsetTop}px`,
-        });
-    };
+    }, [isActiveRef, orientation]);
     // CSS custom properties to place the active stripe
-    useIsomorphicLayoutEffect(() => {
+    useLayoutEffect(() => {
+        const updateStripe = () => {
+            const currentTabRect = tabRef.current?.getBoundingClientRect();
+            setStripeProperties({
+                '--iui-tabs-stripe-size': orientation === 'horizontal'
+                    ? `${currentTabRect?.width}px`
+                    : `${currentTabRect?.height}px`,
+                '--iui-tabs-stripe-position': orientation === 'horizontal'
+                    ? `${tabRef.current?.offsetLeft}px`
+                    : `${tabRef.current?.offsetTop}px`,
+            });
+        };
         if (type !== 'default' && isActive) {
             updateStripe();
         }
@@ -81,7 +81,8 @@ const Tab = React.forwardRef((props, forwardedRef) => {
         type,
         orientation,
         isActive,
-        tabsWidth, // to fix visual artifact on initial render
+        tabsWidth,
+        setStripeProperties,
     ]);
     const onKeyDown = (event) => {
         if (event.altKey) {
@@ -157,7 +158,7 @@ TabLabel.displayName = 'Tabs.TabLabel';
 const TabDescription = React.forwardRef((props, ref) => {
     const { className, children, ...rest } = props;
     const { hasSublabel, setHasSublabel } = useSafeContext(TabsContext);
-    useIsomorphicLayoutEffect(() => {
+    useLayoutEffect(() => {
         if (!hasSublabel) {
             setHasSublabel(true);
         }

package/esm/core/Tag/Tag.d.ts

@@ -2,22 +2,44 @@ import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 type TagProps = {
     /**
-     * Callback function that handles click on close icon.
-     * Close icon is shown only when this function is passed.
-     * Use only with 'default' Tag.
+     * Text inside the tag.
+     */
+    children: React.ReactNode;
+    /**
+     * Callback invoked when the tag is clicked.
+     *
+     * When this prop is passed, the tag will be rendered as a button.
+     */
+    onClick?: React.MouseEventHandler;
+    /**
+     * Callback function that handles click on the remove ("❌") button.
+     * If not passed, the remove button will not be shown.
+     *
+     * If both `onClick` and `onRemove` are passed, then the tag label (rather than the tag itself)
+     * will be rendered as a button, to avoid invalid markup (nested buttons).
      */
     onRemove?: React.MouseEventHandler;
     /**
-     * Text inside the tag.
+     * Props for customizing the remove ("❌") button.
      */
-    children: React.ReactNode;
+    removeButtonProps?: React.ComponentPropsWithRef<'button'>;
+} & ({
     /**
      * Variant of tag.
      * Basic tags don't have an outline.
      * @default 'default'
      */
-    variant?: 'default' | 'basic';
-};
+    variant?: 'default';
+    /**
+     * Props for customizing the label.
+     *
+     * Only relevant for the 'default' Tag.
+     */
+    labelProps?: React.ComponentPropsWithRef<'span'>;
+} | {
+    variant?: 'basic';
+    labelProps?: never;
+});
 /**
  * Tag for showing categories, filters etc.
  * @example

package/esm/core/Tag/Tag.js

@@ -4,8 +4,9 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { SvgCloseSmall, Box } from '../utils/index.js';
+import { SvgCloseSmall, Box, ButtonBase } from '../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
+import { LinkAction, LinkBox } from '../LinkAction/LinkAction.js';
 /**
  * Tag for showing categories, filters etc.
  * @example
@@ -13,13 +14,19 @@ import { IconButton } from '../Buttons/IconButton.js';
  * <Tag variant='basic'>Basic tag</Tag>
  */
 export const Tag = React.forwardRef((props, forwardedRef) => {
-    const { className, variant = 'default', children, onRemove, ...rest } = props;
-    return (React.createElement(Box, { as: 'span', className: cx({
+    const { className, variant = 'default', children, onRemove, onClick, labelProps, removeButtonProps, ...rest } = props;
+    // If both onClick and onRemove are passed, we want to render the label as a button
+    // to avoid invalid markup (nested buttons). LinkAction ensures that clicking anywhere outside
+    // the remove button (including padding) will still trigger the main onClick callback.
+    const shouldUseLinkAction = !!onClick && !!onRemove;
+    return (React.createElement(Box, { as: shouldUseLinkAction ? LinkBox : !!onClick ? ButtonBase : 'span', className: cx({
             'iui-tag-basic': variant === 'basic',
             'iui-tag': variant === 'default',
-        }, className), ref: forwardedRef, ...rest },
-        variant === 'default' ? (React.createElement(Box, { as: 'span', className: 'iui-tag-label' }, children)) : (children),
-        onRemove && (React.createElement(IconButton, { styleType: 'borderless', size: 'small', onClick: onRemove, "aria-label": 'Delete tag', className: 'iui-tag-button' },
+        }, className), 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- ref's type doesn't matter internally
+        ref: forwardedRef, onClick: !shouldUseLinkAction ? onClick : undefined, ...rest },
+        variant === 'default' ? (React.createElement(Box, { as: (shouldUseLinkAction ? LinkAction : 'span'), onClick: shouldUseLinkAction ? onClick : undefined, ...labelProps, className: cx('iui-tag-label', labelProps?.className) }, children)) : (children),
+        onRemove && (React.createElement(IconButton, { styleType: 'borderless', size: 'small', onClick: onRemove, "aria-label": 'Delete tag', ...removeButtonProps, className: cx('iui-tag-button', removeButtonProps?.className) },
             React.createElement(SvgCloseSmall, { "aria-hidden": true })))));
 });
 export default Tag;

package/esm/core/ThemeProvider/ThemeProvider.js

@@ -5,7 +5,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import cx from 'classnames';
-import { useMediaQuery, useMergedRefs, Box, useIsomorphicLayoutEffect, useControlledState, useLatestRef, importCss, isUnitTest, } from '../utils/index.js';
+import { useMediaQuery, useMergedRefs, Box, useLayoutEffect, useControlledState, useLatestRef, importCss, isUnitTest, } from '../utils/index.js';
 import { ThemeContext } from './ThemeContext.js';
 import { ToastProvider, Toaster } from '../Toast/Toaster.js';
 /**
@@ -87,7 +87,7 @@ const useParentThemeAndContext = (rootElement) => {
     const [parentThemeState, setParentTheme] = React.useState(parentContext?.theme);
     const [parentHighContrastState, setParentHighContrastState] = React.useState(parentContext?.themeOptions?.highContrast);
     const parentThemeRef = useLatestRef(parentContext?.theme);
-    useIsomorphicLayoutEffect(() => {
+    useLayoutEffect(() => {
         // bail if we already have theme from context
         if (parentThemeRef.current) {
             return;
@@ -126,7 +126,7 @@ const useParentThemeAndContext = (rootElement) => {
  * dynamically import it (if possible) and fallback to loading it from a CDN.
  */
 const FallbackStyles = ({ root }) => {
-    useIsomorphicLayoutEffect(() => {
+    useLayoutEffect(() => {
         // bail if styles are already loaded
         if (getComputedStyle(root).getPropertyValue('--_iui-v3-loaded') === 'yes') {
             return;

package/esm/core/utils/components/VirtualScroll.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { mergeRefs, useResizeObserver, useIsomorphicLayoutEffect, } from '../hooks/index.js';
+import { mergeRefs, useResizeObserver, useLayoutEffect, } from '../hooks/index.js';
 const unstable_batchedUpdates = ReactDOM.unstable_batchedUpdates ?? ((cb) => void cb());
 const getScrollableParent = (element, ownerDocument = document) => {
     if (!element || element === ownerDocument.body) {
@@ -146,17 +146,17 @@ export const useVirtualization = (props) => {
     const [resizeRef, resizeObserver] = useResizeObserver(onResize);
     // Find scrollable parent
     // Needed only on init
-    useIsomorphicLayoutEffect(() => {
+    useLayoutEffect(() => {
         const scrollableParent = getScrollableParent(parentRef.current, parentRef.current?.ownerDocument);
         scrollContainer.current = scrollableParent;
         resizeRef(scrollableParent);
     }, [resizeRef]);
     // Stop watching resize, when virtual scroll is unmounted
-    useIsomorphicLayoutEffect(() => {
+    useLayoutEffect(() => {
         return () => resizeObserver?.disconnect();
     }, [resizeObserver]);
     // Get child height when children available
-    useIsomorphicLayoutEffect(() => updateChildHeight(), [updateChildHeight]);
+    useLayoutEffect(() => updateChildHeight(), [updateChildHeight]);
     const updateVirtualScroll = React.useCallback(() => {
         const scrollableContainer = getScrollableContainer();
         if (!scrollableContainer) {
@@ -189,7 +189,7 @@ export const useVirtualization = (props) => {
             : scrollContainer.current.removeEventListener('scroll', onScrollRef.current);
     }, []);
     // Add event listener to the scrollable container.
-    useIsomorphicLayoutEffect(() => {
+    useLayoutEffect(() => {
         removeScrollListener();
         onScrollRef.current = onScroll;
         if (!scrollContainer.current ||
@@ -201,7 +201,7 @@ export const useVirtualization = (props) => {
         }
         return removeScrollListener;
     }, [onScroll, removeScrollListener]);
-    useIsomorphicLayoutEffect(() => {
+    useLayoutEffect(() => {
         if (!isMounted) {
             return;
         }
@@ -256,8 +256,8 @@ export const useVirtualization = (props) => {
                 });
             }
         }
-    }, [scrollToIndex, isMounted]);
-    useIsomorphicLayoutEffect(() => {
+    }, [scrollToIndex, isMounted, itemsLength]);
+    useLayoutEffect(() => {
         if (!scrollContainerHeight) {
             return;
         }

package/esm/core/utils/hooks/useIsomorphicLayoutEffect.d.ts

@@ -2,6 +2,9 @@ import * as React from 'react';
 /**
  * SSR-safe version of `useLayoutEffect` that replaces it with `useEffect` on the server.
  *
+ * Exported as `useLayoutEffect` so that the react hooks linter correctly identifies the necessary dependencies.
+ *
  * @see https://fb.me/react-uselayouteffect-ssr
  */
-export declare const useIsomorphicLayoutEffect: typeof React.useEffect;
+declare const useIsomorphicLayoutEffect: typeof React.useEffect;
+export { useIsomorphicLayoutEffect as useLayoutEffect };

package/esm/core/utils/hooks/useIsomorphicLayoutEffect.js

@@ -6,6 +6,9 @@ import * as React from 'react';
 /**
  * SSR-safe version of `useLayoutEffect` that replaces it with `useEffect` on the server.
  *
+ * Exported as `useLayoutEffect` so that the react hooks linter correctly identifies the necessary dependencies.
+ *
  * @see https://fb.me/react-uselayouteffect-ssr
  */
-export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+export { useIsomorphicLayoutEffect as useLayoutEffect };

package/esm/core/utils/hooks/useMediaQuery.js

@@ -4,10 +4,10 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { getWindow } from '../functions/index.js';
-import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
+import { useLayoutEffect } from './useIsomorphicLayoutEffect.js';
 export const useMediaQuery = (queryString) => {
     const [matches, setMatches] = React.useState();
-    useIsomorphicLayoutEffect(() => {
+    useLayoutEffect(() => {
         const mediaQueryList = getWindow()?.matchMedia?.(queryString);
         const handleChange = ({ matches }) => setMatches(matches);
         if (mediaQueryList != undefined) {

package/esm/core/utils/hooks/useOverflow.js

@@ -5,7 +5,7 @@
 import * as React from 'react';
 import { useMergedRefs } from './useMergedRefs.js';
 import { useResizeObserver } from './useResizeObserver.js';
-import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
+import { useLayoutEffect } from './useIsomorphicLayoutEffect.js';
 const STARTING_MAX_ITEMS_COUNT = 20;
 /**
  * Hook that observes the size of an element and returns the number of items
@@ -38,7 +38,7 @@ export const useOverflow = (items, disabled = false, orientation = 'horizontal')
     const updateContainerSize = React.useCallback(({ width, height }) => setContainerSize(orientation === 'horizontal' ? width : height), [orientation]);
     const [resizeRef, observer] = useResizeObserver(updateContainerSize);
     const resizeObserverRef = React.useRef(observer);
-    useIsomorphicLayoutEffect(() => {
+    useLayoutEffect(() => {
         if (disabled) {
             setVisibleCount(items.length);
         }
@@ -48,7 +48,7 @@ export const useOverflow = (items, disabled = false, orientation = 'horizontal')
         }
     }, [containerSize, disabled, items]);
     const mergedRefs = useMergedRefs(containerRef, resizeRef);
-    useIsomorphicLayoutEffect(() => {
+    useLayoutEffect(() => {
         if (!containerRef.current || disabled) {
             resizeObserverRef.current?.disconnect();
             return;
@@ -77,7 +77,7 @@ export const useOverflow = (items, disabled = false, orientation = 'horizontal')
         }
         needsFullRerender.current = false;
     }, [containerSize, visibleCount, disabled, items.length, orientation]);
-    useIsomorphicLayoutEffect(() => {
+    useLayoutEffect(() => {
         previousContainerSize.current = containerSize;
     }, [containerSize]);
     return [mergedRefs, visibleCount];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "3.3.3",
+  "version": "3.4.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "type": "module",
@@ -86,7 +86,7 @@
     "tslib": "^2.6.0"
   },
   "devDependencies": {
-    "@itwin/itwinui-css": "^2.2.1",
+    "@itwin/itwinui-css": "^2.3.0",
     "@itwin/itwinui-variables": "3.0.0",
     "@swc/cli": "^0.1.62",
     "@swc/core": "^1.3.68",