@itwin/itwinui-react 2.6.1 → 2.8.0

package/esm/core/Tile/Tile.js

@@ -4,11 +4,29 @@
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import cx from 'classnames';
-import { StatusIconMap, useTheme, SvgMore, SvgNew, SvgCheckmark, } from '../utils';
+import { StatusIconMap, useTheme, SvgMore, SvgNew, SvgCheckmark, LinkAction, useSafeContext, supportsHas, } from '../utils';
 import '@itwin/itwinui-css/css/tile.css';
 import { DropdownMenu } from '../DropdownMenu';
 import { IconButton } from '../Buttons';
 import { ProgressRadial } from '../ProgressIndicators';
+const TileContext = React.createContext(undefined);
+/**
+ * Polymorphic Tile action component. Recommended to be used in a "name" of `Tile`.
+ * Renders `a` element by default.
+ * @example
+ * <Tile
+ *   name={<Tile.Action href='/new-page'>Tile name<Tile.Action/>}
+ * />
+ */
+export const TileAction = (props) => {
+    const tileContext = useSafeContext(TileContext);
+    React.useEffect(() => {
+        if (!supportsHas()) {
+            tileContext.setActionable(true);
+        }
+    }, [tileContext]);
+    return React.createElement(LinkAction, { ...props });
+};
 /**
  * Tile component that displays content and actions in a card-like format.
  * @example
@@ -26,58 +44,73 @@ import { ProgressRadial } from '../ProgressIndicators';
  *  isNew={false}
  * />
  */
-export const Tile = (props) => {
-    const { className, name, description, metadata, thumbnail, buttons, leftIcon, rightIcon, badge, isNew, isSelected, moreOptions, variant = 'default', children, isActionable, status, isLoading = false, isDisabled = false, ...rest } = props;
+export const Tile = Object.assign((props) => {
+    const { className, name, description, metadata, thumbnail, buttons, leftIcon, rightIcon, badge, isNew, isSelected, moreOptions, variant = 'default', children, isActionable: isActionableProp, status, isLoading = false, isDisabled = false, onClick, ...rest } = props;
     useTheme();
     const [isMenuVisible, setIsMenuVisible] = React.useState(false);
     const showMenu = React.useCallback(() => setIsMenuVisible(true), []);
     const hideMenu = React.useCallback(() => setIsMenuVisible(false), []);
-    return (React.createElement("div", { className: cx('iui-tile', {
-            'iui-folder': variant === 'folder',
-            'iui-new': isNew,
-            'iui-selected': isSelected,
-            'iui-actionable': isActionable,
-            [`iui-${status}`]: !!status,
-            'iui-loading': isLoading,
-        }, className), "aria-disabled": isDisabled, tabIndex: isActionable && !isDisabled ? 0 : undefined, ...rest },
-        thumbnail && (React.createElement("div", { className: 'iui-tile-thumbnail' },
-            typeof thumbnail === 'string' ? (React.createElement("div", { className: 'iui-tile-thumbnail-picture', style: { backgroundImage: `url(${thumbnail})` } })) : thumbnail && thumbnail.type === 'img' ? (React.cloneElement(thumbnail, {
-                className: 'iui-tile-thumbnail-picture',
-            })) : React.isValidElement(thumbnail) ? (React.cloneElement(thumbnail, {
-                className: cx('iui-thumbnail-icon', thumbnail.props.className),
-            })) : (thumbnail),
-            leftIcon &&
-                React.cloneElement(leftIcon, {
-                    className: 'iui-tile-thumbnail-type-indicator',
-                    'data-iui-size': 'small',
-                }),
-            rightIcon &&
-                React.cloneElement(rightIcon, {
-                    className: 'iui-tile-thumbnail-quick-action',
-                    'data-iui-size': 'small',
-                }),
-            badge && (React.createElement("div", { className: 'iui-tile-thumbnail-badge-container' }, badge)))),
-        React.createElement("div", { className: 'iui-tile-content' },
-            React.createElement("div", { className: 'iui-tile-name' },
-                React.createElement(TitleIcon, { isLoading: isLoading, isSelected: isSelected, isNew: isNew, status: status }),
-                React.createElement("span", { className: 'iui-tile-name-label' }, name)),
-            description != undefined && (React.createElement("div", { className: 'iui-tile-description' }, description)),
-            metadata != undefined && (React.createElement("div", { className: 'iui-tile-metadata' }, metadata)),
-            moreOptions && (React.createElement(DropdownMenu, { onShow: showMenu, onHide: hideMenu, menuItems: (close) => moreOptions.map((option) => React.cloneElement(option, {
-                    onClick: (value) => {
-                        var _a, _b;
-                        close();
-                        (_b = (_a = option.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, value);
-                    },
-                })) },
-                React.createElement("div", { className: cx('iui-tile-more-options', {
-                        'iui-visible': isMenuVisible,
-                    }) },
-                    React.createElement(IconButton, { styleType: 'borderless', size: 'small', "aria-label": 'More options' },
-                        React.createElement(SvgMore, null))))),
-            children),
-        buttons && React.createElement("div", { className: 'iui-tile-buttons' }, buttons)));
-};
+    const [localActionable, setLocalActionable] = React.useState(isActionableProp);
+    const isActionable = isActionableProp !== null && isActionableProp !== void 0 ? isActionableProp : localActionable;
+    const tileName = (React.createElement("div", { className: 'iui-tile-name' },
+        React.createElement(TitleIcon, { isLoading: isLoading, isSelected: isSelected, isNew: isNew, status: status }),
+        React.createElement("span", { className: 'iui-tile-name-label' }, isActionable && onClick ? (React.createElement(LinkAction, { as: 'button', onClick: !isDisabled ? onClick : undefined, "aria-disabled": isDisabled }, name)) : (name))));
+    return (React.createElement(TileContext.Provider, { value: { setActionable: setLocalActionable } },
+        React.createElement("div", { className: cx('iui-tile', {
+                'iui-folder': variant === 'folder',
+                'iui-new': isNew,
+                'iui-selected': isSelected,
+                'iui-actionable': isActionable,
+                [`iui-${status}`]: !!status,
+                'iui-loading': isLoading,
+            }, className), "aria-disabled": isDisabled, ...rest },
+            variant !== 'folder' ? tileName : null,
+            thumbnail && (React.createElement("div", { className: 'iui-tile-thumbnail' },
+                typeof thumbnail === 'string' ? (React.createElement("div", { className: 'iui-tile-thumbnail-picture', style: { backgroundImage: `url(${thumbnail})` } })) : thumbnail && thumbnail.type === 'img' ? (React.cloneElement(thumbnail, {
+                    className: 'iui-tile-thumbnail-picture',
+                })) : React.isValidElement(thumbnail) ? (React.cloneElement(thumbnail, {
+                    className: cx('iui-thumbnail-icon', thumbnail.props.className),
+                })) : (thumbnail),
+                leftIcon &&
+                    React.cloneElement(leftIcon, {
+                        className: 'iui-tile-thumbnail-type-indicator',
+                        'data-iui-size': 'small',
+                    }),
+                rightIcon &&
+                    React.cloneElement(rightIcon, {
+                        className: 'iui-tile-thumbnail-quick-action',
+                        'data-iui-size': 'small',
+                    }),
+                badge && (React.createElement("div", { className: 'iui-tile-thumbnail-badge-container' }, badge)))),
+            React.createElement("div", { className: 'iui-tile-content' },
+                variant === 'folder' ? tileName : null,
+                description != undefined && (React.createElement("div", { className: 'iui-tile-description' }, description)),
+                metadata != undefined && (React.createElement("div", { className: 'iui-tile-metadata' }, metadata)),
+                moreOptions && (React.createElement(DropdownMenu, { onShow: showMenu, onHide: hideMenu, menuItems: (close) => moreOptions.map((option) => React.cloneElement(option, {
+                        onClick: (value) => {
+                            var _a, _b;
+                            close();
+                            (_b = (_a = option.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, value);
+                        },
+                    })) },
+                    React.createElement("div", { className: cx('iui-tile-more-options', {
+                            'iui-visible': isMenuVisible,
+                        }) },
+                        React.createElement(IconButton, { styleType: 'borderless', size: 'small', "aria-label": 'More options' },
+                            React.createElement(SvgMore, null))))),
+                children),
+            buttons && React.createElement("div", { className: 'iui-tile-buttons' }, buttons))));
+}, {
+    /**
+     * Polymorphic Tile action component. Recommended to be used in a "name" of `Tile`.
+     * Renders `a` element by default.
+     * @example
+     * <Tile
+     *   name={<Tile.Action href='/new-page'>Tile name<Tile.Action/>}
+     * />
+     */
+    Action: TileAction,
+});
 const TitleIcon = ({ isLoading = false, isSelected = false, isNew = false, status, }) => {
     const StatusIcon = !!status && StatusIconMap[status];
     if (isLoading) {

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

@@ -15,16 +15,20 @@ export declare type ToggleSwitchProps = {
      * @default false
      */
     setFocus?: boolean;
-    /**
-     * Icon inside the toggle switch. Shown only when toggle is checked.
-     */
-    icon?: JSX.Element;
+} & ({
     /**
      * Size of the toggle switch.
      *  @default 'default'
      */
-    size?: 'default' | 'small';
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'>;
+    size?: 'default';
+    /**
+     * Icon inside the toggle switch. Shown only when toggle is checked and size is not small.
+     */
+    icon?: JSX.Element;
+} | {
+    size: 'small';
+    icon?: never;
+}) & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'>;
 /**
  * A switch for turning on and off.
  * @example
@@ -43,29 +47,5 @@ export declare type ToggleSwitchProps = {
  * <caption>Toggle with icon</caption>
  * <ToggleSwitch label='With icon toggle' icon={<svg viewBox='0 0 16 16'><path d='M1 1v14h14V1H1zm13 1.7v10.6L8.7 8 14 2.7zM8 7.3L2.7 2h10.6L8 7.3zm-.7.7L2 13.3V2.7L7.3 8zm.7.7l5.3 5.3H2.7L8 8.7z' /></svg>} />
  */
-export declare const ToggleSwitch: React.ForwardRefExoticComponent<{
-    /**
-     * Label for the toggle switch.
-     */
-    label?: React.ReactNode;
-    /**
-     * Position of the label.
-     * @default 'right'
-     */
-    labelPosition?: "right" | "left" | undefined;
-    /**
-     * Set focus on toggle.
-     * @default false
-     */
-    setFocus?: boolean | undefined;
-    /**
-     * Icon inside the toggle switch. Shown only when toggle is checked.
-     */
-    icon?: JSX.Element | undefined;
-    /**
-     * Size of the toggle switch.
-     *  @default 'default'
-     */
-    size?: "small" | "default" | undefined;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & React.RefAttributes<HTMLInputElement>>;
+export declare const ToggleSwitch: React.ForwardRefExoticComponent<ToggleSwitchProps & React.RefAttributes<HTMLInputElement>>;
 export default ToggleSwitch;

package/esm/core/ToggleSwitch/ToggleSwitch.js

@@ -25,7 +25,13 @@ import '@itwin/itwinui-css/css/toggle-switch.css';
  * <ToggleSwitch label='With icon toggle' icon={<svg viewBox='0 0 16 16'><path d='M1 1v14h14V1H1zm13 1.7v10.6L8.7 8 14 2.7zM8 7.3L2.7 2h10.6L8 7.3zm-.7.7L2 13.3V2.7L7.3 8zm.7.7l5.3 5.3H2.7L8 8.7z' /></svg>} />
  */
 export const ToggleSwitch = React.forwardRef((props, ref) => {
-    const { disabled = false, labelPosition = 'right', icon, label, setFocus = false, className, style, size = 'default', ...rest } = props;
+    let icon;
+    if (props.size !== 'small') {
+        icon = props.icon;
+        props = { ...props };
+        delete props.icon;
+    }
+    const { disabled = false, labelPosition = 'right', label, setFocus = false, className, style, size = 'default', ...rest } = props;
     useTheme();
     const inputElementRef = React.useRef(null);
     const refs = useMergedRefs(inputElementRef, ref);
@@ -42,6 +48,7 @@ export const ToggleSwitch = React.forwardRef((props, ref) => {
         }, className), "data-iui-size": size, style: style },
         React.createElement("input", { className: 'iui-toggle-switch', type: 'checkbox', role: 'switch', disabled: disabled, ref: refs, ...rest }),
         icon &&
+            size !== 'small' &&
             React.cloneElement(icon, {
                 className: cx('iui-toggle-switch-icon', icon.props.className),
                 'aria-hidden': true,

package/esm/core/index.d.ts

@@ -79,7 +79,7 @@ export type { SliderProps } from './Slider';
 export { StatusMessage } from './StatusMessage';
 export type { StatusMessageProps } from './StatusMessage';
 export { Surface } from './Surface';
-export type { SurfaceProps } from './Surface';
+export type { SurfaceProps, SurfaceHeaderProps, SurfaceBodyProps, } from './Surface';
 export { Table, tableFilters, BaseFilter, FilterButtonBar, DefaultCell, EditableCell, TablePaginator, ActionColumn, ExpanderColumn, SelectionColumn, } from './Table';
 export type { TableProps, TableFilterProps, TableFilterValue, DateRangeFilterOptions, FilterButtonBarProps, DefaultCellProps, EditableCellProps, TablePaginatorProps, TablePaginatorRendererProps, } from './Table';
 export { Tag, TagContainer } from './Tag';
@@ -104,5 +104,5 @@ export { Anchor, Body, Headline, Leading, Small, Subheading, Title, Blockquote,
 export type { AnchorProps, BodyProps, HeadlineProps, LeadingProps, SmallProps, SubheadingProps, TitleProps, BlockquoteProps, CodeProps, KbdProps, TextProps, } from './Typography';
 export { Wizard, Stepper, WorkflowDiagram } from './Stepper';
 export type { WizardProps, StepProperties, WizardType, WizardLocalization, StepperProps, StepperLocalization, WorkflowDiagramProps, } from './Stepper';
-export { getUserColor, useTheme, ColorValue, MiddleTextTruncation, Icon, Flex, } from './utils';
-export type { ThemeType, MiddleTextTruncationProps, IconProps, FlexProps, FlexItemProps, FlexSpacerProps, } from './utils';
+export { getUserColor, useTheme, ColorValue, MiddleTextTruncation, LinkBox, LinkAction, Icon, Flex, VisuallyHidden, Divider, } from './utils';
+export type { ThemeType, MiddleTextTruncationProps, IconProps, FlexProps, FlexItemProps, FlexSpacerProps, DividerProps, LinkBoxProps, LinkActionProps, VisuallyHiddenProps, } from './utils';

package/esm/core/index.js

@@ -55,4 +55,4 @@ export { Tooltip } from './Tooltip';
 export { Tree, TreeNode, TreeNodeExpander } from './Tree';
 export { Anchor, Body, Headline, Leading, Small, Subheading, Title, Blockquote, Code, Kbd, KbdKeys, Text, } from './Typography';
 export { Wizard, Stepper, WorkflowDiagram } from './Stepper';
-export { getUserColor, useTheme, ColorValue, MiddleTextTruncation, Icon, Flex, } from './utils';
+export { getUserColor, useTheme, ColorValue, MiddleTextTruncation, LinkBox, LinkAction, Icon, Flex, VisuallyHidden, Divider, } from './utils';

package/esm/core/utils/components/Divider.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import '@itwin/itwinui-css/css/utils.css';
+export declare type DividerProps = {
+    /**
+     * Sets the orientation of the divider
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+} & React.ComponentPropsWithRef<'hr'>;
+/**
+ * Shows a divider
+ */
+export declare const Divider: React.ForwardRefExoticComponent<Pick<DividerProps, "key" | "orientation" | keyof React.HTMLAttributes<HTMLHRElement>> & React.RefAttributes<HTMLHRElement>>;
+export default Divider;

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

@@ -0,0 +1,17 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import cx from 'classnames';
+import { useTheme } from '../hooks';
+import '@itwin/itwinui-css/css/utils.css';
+/**
+ * Shows a divider
+ */
+export const Divider = React.forwardRef((props, ref) => {
+    const { className, orientation = 'horizontal', ...rest } = props;
+    useTheme();
+    return (React.createElement("hr", { className: cx('iui-divider', className), "aria-orientation": orientation === 'vertical' ? 'vertical' : undefined, ref: ref, ...rest }));
+});
+export default Divider;

package/esm/core/utils/components/LinkAction.d.ts

@@ -0,0 +1,30 @@
+import { PolymorphicComponentProps, PolymorphicForwardRefComponent } from '../props';
+import '@itwin/itwinui-css/css/utils.css';
+declare type LinkActionOwnProps = {};
+declare type LinkBoxOwnProps = {};
+export declare type LinkActionProps = PolymorphicComponentProps<'a', LinkActionOwnProps>;
+export declare type LinkBoxProps = PolymorphicComponentProps<'div', LinkBoxOwnProps>;
+/**
+ * Polymorphic link action component.
+ * It is rendered as `a` by default.
+ * @example
+ * <LinkBox>
+ *   <Surface>
+ *     <LinkAction href='/new-page'>Whole card is clickable</LinkAction>
+ *   </Surface>
+ * </LinkBox>
+ */
+export declare const LinkAction: PolymorphicForwardRefComponent<"a", LinkActionOwnProps>;
+/**
+ * Polymorphic link box component.
+ * Used to wrap around your component to use LinkAction.
+ * Rendered as `div` by default
+ * @example
+ * <LinkBox>
+ *   <Surface>
+ *     <LinkAction href='/new-page'>Whole card is clickable</LinkAction>
+ *   </Surface>
+ * </LinkBox>
+ */
+export declare const LinkBox: PolymorphicForwardRefComponent<"div", LinkBoxOwnProps>;
+export {};

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

@@ -0,0 +1,38 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import cx from 'classnames';
+import '@itwin/itwinui-css/css/utils.css';
+/**
+ * Polymorphic link action component.
+ * It is rendered as `a` by default.
+ * @example
+ * <LinkBox>
+ *   <Surface>
+ *     <LinkAction href='/new-page'>Whole card is clickable</LinkAction>
+ *   </Surface>
+ * </LinkBox>
+ */
+export const LinkAction = React.forwardRef((props, ref) => {
+    const { as: Element = 'a', className, ...rest } = props;
+    return (React.createElement(Element, { ref: ref, className: cx('iui-link-action', className), ...rest }));
+});
+LinkAction.displayName = 'LinkAction';
+/**
+ * Polymorphic link box component.
+ * Used to wrap around your component to use LinkAction.
+ * Rendered as `div` by default
+ * @example
+ * <LinkBox>
+ *   <Surface>
+ *     <LinkAction href='/new-page'>Whole card is clickable</LinkAction>
+ *   </Surface>
+ * </LinkBox>
+ */
+export const LinkBox = React.forwardRef((props, ref) => {
+    const { as: Element = 'div', className, ...rest } = props;
+    return (React.createElement(Element, { ref: ref, className: cx('iui-link-box', className), ...rest }));
+});
+LinkBox.displayName = 'LinkBox';

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

@@ -34,8 +34,9 @@ export const Resizer = (props) => {
         const minWidth = parseFloat(getComputedStyle(elementRef.current).minWidth);
         const minHeight = parseFloat(getComputedStyle(elementRef.current).minHeight);
         const resizer = event.currentTarget.dataset.iuiResizer;
-        const originalUserSelect = elementRef.current.ownerDocument.body.style.userSelect;
-        elementRef.current.ownerDocument.body.style.userSelect = 'none';
+        const ownerDocument = elementRef.current.ownerDocument || document;
+        const originalUserSelect = ownerDocument.body.style.userSelect;
+        ownerDocument.body.style.userSelect = 'none';
         const onResizePointerMove = (event) => {
             var _a, _b, _c, _d, _e, _f, _g;
             if (!elementRef.current) {
@@ -46,8 +47,8 @@ export const Resizer = (props) => {
                 onResizeStart === null || onResizeStart === void 0 ? void 0 : onResizeStart();
             }
             const containerRect = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-            const clientX = getBoundedValue(event.clientX, (_b = containerRect === null || containerRect === void 0 ? void 0 : containerRect.left) !== null && _b !== void 0 ? _b : 0, (_d = (_c = containerRect === null || containerRect === void 0 ? void 0 : containerRect.right) !== null && _c !== void 0 ? _c : elementRef.current.ownerDocument.documentElement.clientWidth) !== null && _d !== void 0 ? _d : 0);
-            const clientY = getBoundedValue(event.clientY, (_e = containerRect === null || containerRect === void 0 ? void 0 : containerRect.top) !== null && _e !== void 0 ? _e : 0, (_g = (_f = containerRect === null || containerRect === void 0 ? void 0 : containerRect.bottom) !== null && _f !== void 0 ? _f : elementRef.current.ownerDocument.documentElement.clientHeight) !== null && _g !== void 0 ? _g : 0);
+            const clientX = getBoundedValue(event.clientX, (_b = containerRect === null || containerRect === void 0 ? void 0 : containerRect.left) !== null && _b !== void 0 ? _b : 0, (_d = (_c = containerRect === null || containerRect === void 0 ? void 0 : containerRect.right) !== null && _c !== void 0 ? _c : ownerDocument.documentElement.clientWidth) !== null && _d !== void 0 ? _d : 0);
+            const clientY = getBoundedValue(event.clientY, (_e = containerRect === null || containerRect === void 0 ? void 0 : containerRect.top) !== null && _e !== void 0 ? _e : 0, (_g = (_f = containerRect === null || containerRect === void 0 ? void 0 : containerRect.bottom) !== null && _f !== void 0 ? _f : ownerDocument.documentElement.clientHeight) !== null && _g !== void 0 ? _g : 0);
             const diffX = initialPointerX - clientX;
             const diffY = initialPointerY - clientY;
             switch (resizer) {
@@ -122,12 +123,11 @@ export const Resizer = (props) => {
                     break;
             }
         };
-        elementRef.current.ownerDocument.addEventListener('pointermove', onResizePointerMove);
-        elementRef.current.ownerDocument.addEventListener('pointerup', () => {
-            document.removeEventListener('pointermove', onResizePointerMove);
+        ownerDocument.addEventListener('pointermove', onResizePointerMove);
+        ownerDocument.addEventListener('pointerup', () => {
+            ownerDocument.removeEventListener('pointermove', onResizePointerMove);
             if (elementRef.current) {
-                elementRef.current.ownerDocument.body.style.userSelect =
-                    originalUserSelect;
+                ownerDocument.body.style.userSelect = originalUserSelect;
                 isResizing.current = false;
                 onResizeEnd === null || onResizeEnd === void 0 ? void 0 : onResizeEnd({
                     width,

package/esm/core/utils/components/VisuallyHidden.d.ts

@@ -1,10 +1,24 @@
-import React from 'react';
 import '@itwin/itwinui-css/css/utils.css';
-export declare type VisuallyHiddenProps = React.ComponentPropsWithRef<'div'>;
+import type { PolymorphicComponentProps, PolymorphicForwardRefComponent } from '../props';
+declare type VisuallyHiddenOwnProps = {
+    /**
+     * When VisuallyHidden is used with an interactive element (e.g. button),
+     * that element will "unhide" (become visible again) when focused.
+     *
+     * @default true
+     */
+    unhideOnFocus?: boolean;
+};
+export declare type VisuallyHiddenProps = PolymorphicComponentProps<'span', VisuallyHiddenOwnProps>;
 /**
- * Hides content visually but is still accessible to screen readers.
+ * Hides content visually but keeps it still accessible to screen readers
+ * and other assistive technologies.
+ *
+ * @example
+ * <div aria-hidden='true'>★★★☆☆</div>
+ * <VisuallyHidden>3 stars out of 5</VisuallyHidden>
+ *
+ * @see https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html
  */
-export declare const VisuallyHidden: React.ForwardRefExoticComponent<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
+export declare const VisuallyHidden: PolymorphicForwardRefComponent<"span", VisuallyHiddenOwnProps>;
 export default VisuallyHidden;

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

@@ -7,11 +7,18 @@ import cx from 'classnames';
 import { useTheme } from '../hooks';
 import '@itwin/itwinui-css/css/utils.css';
 /**
- * Hides content visually but is still accessible to screen readers.
+ * Hides content visually but keeps it still accessible to screen readers
+ * and other assistive technologies.
+ *
+ * @example
+ * <div aria-hidden='true'>★★★☆☆</div>
+ * <VisuallyHidden>3 stars out of 5</VisuallyHidden>
+ *
+ * @see https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html
  */
 export const VisuallyHidden = React.forwardRef((props, ref) => {
-    const { className, ...rest } = props;
+    const { as: Element = 'span', className, unhideOnFocus = true, ...rest } = props;
     useTheme();
-    return (React.createElement("div", { className: cx('iui-visually-hidden', className), ref: ref, ...rest }));
+    return (React.createElement(Element, { className: cx('iui-visually-hidden', className), "data-iui-unhide-on-focus": unhideOnFocus ? true : undefined, ref: ref, ...rest }));
 });
 export default VisuallyHidden;

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

@@ -8,3 +8,5 @@ export * from './VirtualScroll';
 export * from './VisuallyHidden';
 export * from './Icon';
 export * from './Flex';
+export * from './Divider';
+export * from './LinkAction';

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

@@ -12,3 +12,5 @@ export * from './VirtualScroll';
 export * from './VisuallyHidden';
 export * from './Icon';
 export * from './Flex';
+export * from './Divider';
+export * from './LinkAction';

package/esm/core/utils/functions/index.d.ts

@@ -3,3 +3,4 @@ export * from './colors';
 export * from './numbers';
 export * from './focusable';
 export * from './styles';
+export * from './supports';

package/esm/core/utils/functions/index.js

@@ -7,3 +7,4 @@ export * from './colors';
 export * from './numbers';
 export * from './focusable';
 export * from './styles';
+export * from './supports';

package/esm/core/utils/functions/supports.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Returns true if the :has selector is supported in the browser
+ */
+export declare const supportsHas: () => boolean | undefined;

package/esm/core/utils/functions/supports.js

@@ -0,0 +1,9 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import { getWindow } from './dom';
+/**
+ * Returns true if the :has selector is supported in the browser
+ */
+export const supportsHas = () => { var _a, _b, _c; return (_c = (_b = (_a = getWindow()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, 'selector(:has(+ *))'); };

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

@@ -10,4 +10,5 @@ export * from './useSafeContext';
 export * from './useLatestRef';
 export * from './useIsomorphicLayoutEffect';
 export * from './useIsThemeAlreadySet';
+export * from './useIsClient';
 export * from './useId';

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

@@ -14,4 +14,5 @@ export * from './useSafeContext';
 export * from './useLatestRef';
 export * from './useIsomorphicLayoutEffect';
 export * from './useIsThemeAlreadySet';
+export * from './useIsClient';
 export * from './useId';

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

@@ -88,10 +88,11 @@ export const useDragAndDrop = (elementRef, containerRef, enabled = true) => {
         originalUserSelect.current = elementRef.current.style.userSelect;
         // Prevents from selecting inner content when dragging.
         elementRef.current.style.userSelect = 'none';
-        elementRef.current.ownerDocument.addEventListener('pointermove', onPointerMove.current);
-        elementRef.current.ownerDocument.addEventListener('pointerup', () => {
+        const ownerDocument = elementRef.current.ownerDocument || document;
+        ownerDocument.addEventListener('pointermove', onPointerMove.current);
+        ownerDocument.addEventListener('pointerup', () => {
             setTransform(`translate(${translateX.current}px, ${translateY.current}px)`);
-            document.removeEventListener('pointermove', onPointerMove.current);
+            ownerDocument.removeEventListener('pointermove', onPointerMove.current);
             if (elementRef.current) {
                 elementRef.current.style.userSelect = originalUserSelect.current;
             }

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

@@ -0,0 +1 @@
+export declare const useIsClient: () => boolean;

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

@@ -0,0 +1,12 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+export const useIsClient = () => {
+    const [isClient, setIsClient] = React.useState(false);
+    React.useEffect(() => {
+        setIsClient(true);
+    }, []);
+    return isClient;
+};

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

@@ -2,6 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
 import { getDocument, getWindow } from '../functions';
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
 import { useIsThemeAlreadySet } from './useIsThemeAlreadySet';
@@ -20,6 +21,7 @@ export const useTheme = (theme, themeOptions) => {
     var _a;
     const ownerDocument = (_a = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.ownerDocument) !== null && _a !== void 0 ? _a : getDocument();
     const isThemeAlreadySet = useIsThemeAlreadySet(ownerDocument);
+    useCorrectRootFontSize();
     useIsomorphicLayoutEffect(() => {
         if (!ownerDocument || isThemeAlreadySet.current) {
             return;
@@ -77,3 +79,22 @@ const handleTheme = (theme, ownerDocument, highContrast) => {
         (_b = prefersHCQuery === null || prefersHCQuery === void 0 ? void 0 : prefersHCQuery.removeEventListener) === null || _b === void 0 ? void 0 : _b.call(prefersHCQuery, 'change', changeHandler);
     };
 };
+let didLogWarning = false;
+let isDev = false;
+// wrapping in try-catch because process might be undefined
+try {
+    isDev = process.env.NODE_ENV !== 'production';
+}
+catch (_a) { }
+/** Shows console error if the page changes the root font size */
+const useCorrectRootFontSize = () => {
+    React.useEffect(() => {
+        if (isDev && !didLogWarning) {
+            const rootFontSize = parseInt(getComputedStyle(document.documentElement).fontSize);
+            if (rootFontSize < 16) {
+                console.error('Root font size must not be overridden. \nSee https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#relative-font-size');
+                didLogWarning = true;
+            }
+        }
+    }, []);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "2.6.1",
+  "version": "2.8.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",
@@ -62,7 +62,7 @@
     "dev:types": "concurrently \"tsc -p tsconfig.cjs.json --emitDeclarationOnly --watch --preserveWatchOutput\" \"tsc -p tsconfig.esm.json --emitDeclarationOnly --watch --preserveWatchOutput\""
   },
   "dependencies": {
-    "@itwin/itwinui-css": "^1.7.0",
+    "@itwin/itwinui-css": "^1.9.0",
     "@itwin/itwinui-illustrations-react": "^2.0.0",
     "@itwin/itwinui-variables": "^2.0.0",
     "@tippyjs/react": "^4.2.6",