@itwin/itwinui-react 2.7.0 → 2.8.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # Changelog
 
+## 2.8.0
+
+### Minor Changes
+
+- 861fcab3: The `Surface` component can now be broken down using the `Surface.Header` and `Surface.Body` subcomponents. Users can add padding to the body using `isPadded`.
+
+  ```jsx
+  <Surface>
+    <Surface.Header>Surface Header Content</Surface.Header>
+    <Surface.Body isPadded={true}>Surface Body Content</Surface.Body>
+  </Surface>
+  ```
+
+- 861fcab3: A new `Divider` component has been created which can be used horizontally or vertically
+
+  ```jsx
+  <Divider orientation={'vertical'} />
+  ```
+
+- 8c89441f: Added `VisuallyHidden`, a utility component for providing text to assistive technologies while hiding it visually.
+
+  ```jsx
+  <div aria-hidden='true'>★★★☆☆</div>
+  <VisuallyHidden>3 stars out of 5</VisuallyHidden>
+  ```
+
+### Patch Changes
+
+- 3ad2dd90: Fixed an issue in draggable/resizable dialogs opened in popup windows, where pointermove event listeners were not being removed correctly.
+- 521610a0: iTwinUI will now show a warning in development if it detects that the page overrides the root font size. For more details, see the [migration guide](https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#relative-font-size).
+- 6caccc8d: Fixes jumpy animation when opening full page dialog
+- Updated dependencies
+  - @itwin/itwinui-css@1.9.0
+
 ## 2.7.0
 
 ### Minor Changes

package/cjs/core/Dialog/DialogMain.js

@@ -44,28 +44,7 @@ exports.DialogMain = react_1.default.forwardRef((props, ref) => {
     const dialogRef = react_1.default.useRef(null);
     const refs = (0, utils_1.useMergedRefs)(dialogRef, ref);
     const hasBeenResized = react_1.default.useRef(false);
-    // Focuses dialog when opened and brings back focus to the previously focused element when closed.
     const previousFocusedElement = react_1.default.useRef();
-    const setFocusRef = (0, utils_1.useLatestRef)(setFocus);
-    react_1.default.useEffect(() => {
-        var _a, _b, _c;
-        if (!setFocusRef.current) {
-            return;
-        }
-        if (isOpen) {
-            previousFocusedElement.current = (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.activeElement;
-            (_b = dialogRef.current) === null || _b === void 0 ? void 0 : _b.focus();
-        }
-        else {
-            (_c = previousFocusedElement.current) === null || _c === void 0 ? void 0 : _c.focus();
-        }
-        const ref = dialogRef.current;
-        return () => {
-            var _a;
-            (ref === null || ref === void 0 ? void 0 : ref.contains(document.activeElement)) &&
-                ((_a = previousFocusedElement.current) === null || _a === void 0 ? void 0 : _a.focus());
-        };
-    }, [isOpen, setFocusRef]);
     const originalBodyOverflow = react_1.default.useRef('');
     react_1.default.useEffect(() => {
         if (isOpen) {
@@ -136,7 +115,6 @@ exports.DialogMain = react_1.default.forwardRef((props, ref) => {
     const content = (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-dialog', {
             'iui-dialog-default': styleType === 'default',
             'iui-dialog-full-page': styleType === 'fullPage',
-            'iui-dialog-visible': isOpen,
             'iui-dialog-draggable': isDraggable,
         }, className), role: 'dialog', ref: refs, onKeyDown: handleKeyDown, tabIndex: -1, style: {
             transform,
@@ -151,7 +129,24 @@ exports.DialogMain = react_1.default.forwardRef((props, ref) => {
                 }
             }, onResizeEnd: setResizeStyle })),
         children));
-    return (react_1.default.createElement(react_transition_group_1.CSSTransition, { in: isOpen, classNames: 'iui-dialog-animation', timeout: { exit: 600 }, unmountOnExit: true, nodeRef: dialogRef },
+    return (react_1.default.createElement(react_transition_group_1.CSSTransition, { in: isOpen, classNames: {
+            enter: 'iui-dialog-animation-enter',
+            enterActive: 'iui-dialog-animation-enter-active',
+            enterDone: 'iui-dialog-visible',
+        }, timeout: { exit: 600 }, 
+        // Focuses dialog when opened
+        onEntered: () => {
+            var _a, _b;
+            previousFocusedElement.current = (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.activeElement;
+            setFocus && ((_b = dialogRef.current) === null || _b === void 0 ? void 0 : _b.focus({ preventScroll: true }));
+        }, 
+        // Brings back focus to the previously focused element when closed
+        onExit: () => {
+            var _a, _b, _c;
+            if ((_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.contains((_b = dialogRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.activeElement)) {
+                (_c = previousFocusedElement.current) === null || _c === void 0 ? void 0 : _c.focus();
+            }
+        }, unmountOnExit: true, nodeRef: dialogRef },
         react_1.default.createElement(DialogDragContext_1.DialogDragContext.Provider, { value: { onPointerDown: handlePointerDown } },
             trapFocus && react_1.default.createElement(utils_1.FocusTrap, null, content),
             !trapFocus && content)));

package/cjs/core/Surface/Surface.d.ts

@@ -1,6 +1,15 @@
 import React from 'react';
-import { CommonProps } from '../utils';
+import { CommonProps, PolymorphicComponentProps, PolymorphicForwardRefComponent } from '../utils';
 import '@itwin/itwinui-css/css/surface.css';
+declare type SurfaceHeaderOwnProps = {};
+export declare type SurfaceHeaderProps<T extends React.ElementType = 'div'> = PolymorphicComponentProps<T, SurfaceHeaderOwnProps>;
+declare type SurfaceBodyOwnProps = {
+    /**
+     * Gives padding to the surface body
+     */
+    isPadded?: boolean;
+};
+export declare type SurfaceBodyProps<T extends React.ElementType = 'div'> = PolymorphicComponentProps<T, SurfaceBodyOwnProps>;
 export declare type SurfaceProps = {
     /**
      * Sets the elevation of the surface
@@ -16,6 +25,10 @@ export declare type SurfaceProps = {
  * @example
  * <Surface>Surface Content</Surface>
  * <Surface elevation={2}>Surface Content</Surface>
+ * <Surface>
+ *   <Surface.Header>Surface Header Content</Surface.Header>
+ *   <Surface.Body isPadded={true}>Surface Body Content</Surface.Body>
+ * </Surface>
  */
 export declare const Surface: React.ForwardRefExoticComponent<{
     /**
@@ -26,5 +39,14 @@ export declare const Surface: React.ForwardRefExoticComponent<{
      * Content in the surface.
      */
     children: React.ReactNode;
-} & Omit<CommonProps, "title"> & React.RefAttributes<HTMLDivElement>>;
+} & Omit<CommonProps, "title"> & React.RefAttributes<HTMLDivElement>> & {
+    /**
+     * 	Surface header subcomponent
+     */
+    Header: PolymorphicForwardRefComponent<"div", SurfaceHeaderOwnProps>;
+    /**
+     * 	Surface body subcomponent. Additional padding can be added to the body through the 'isPadded' prop
+     */
+    Body: PolymorphicForwardRefComponent<"div", SurfaceBodyOwnProps>;
+};
 export default Surface;

package/cjs/core/Surface/Surface.js

@@ -33,19 +33,55 @@ const getSurfaceElevationValue = (elevation) => {
             return '';
     }
 };
+const SurfaceHeader = react_1.default.forwardRef((props, ref) => {
+    const { as: Element = 'div', children, className, ...rest } = props;
+    const { setHasLayout } = (0, utils_1.useSafeContext)(SurfaceContext);
+    react_1.default.useEffect(() => {
+        if (!(0, utils_1.supportsHas)()) {
+            setHasLayout(true);
+        }
+    }, [setHasLayout]);
+    return (react_1.default.createElement(Element, { className: (0, classnames_1.default)('iui-surface-header', className), ref: ref, ...rest }, children));
+});
+const SurfaceBody = react_1.default.forwardRef((props, ref) => {
+    const { as: Element = 'div', children, className, isPadded, ...rest } = props;
+    const { setHasLayout } = (0, utils_1.useSafeContext)(SurfaceContext);
+    react_1.default.useEffect(() => {
+        if (!(0, utils_1.supportsHas)()) {
+            setHasLayout(true);
+        }
+    }, [setHasLayout]);
+    return (react_1.default.createElement(Element, { className: (0, classnames_1.default)('iui-surface-body', className), ref: ref, "data-iui-padded": isPadded ? 'true' : undefined, ...rest }, children));
+});
 /**
  * The Surface container allows content to appear elevated through the use of a drop shadow
  * @example
  * <Surface>Surface Content</Surface>
  * <Surface elevation={2}>Surface Content</Surface>
+ * <Surface>
+ *   <Surface.Header>Surface Header Content</Surface.Header>
+ *   <Surface.Body isPadded={true}>Surface Body Content</Surface.Body>
+ * </Surface>
  */
-exports.Surface = react_1.default.forwardRef((props, ref) => {
+exports.Surface = Object.assign(react_1.default.forwardRef((props, ref) => {
     const { elevation, className, style, children, ...rest } = props;
     (0, utils_1.useTheme)();
+    const [hasLayout, setHasLayout] = react_1.default.useState(false);
     const _style = {
         '--iui-surface-elevation': getSurfaceElevationValue(elevation),
         ...style,
     };
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-surface', className), style: _style, ref: ref, ...rest }, children));
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-surface', className), style: _style, ref: ref, "data-iui-layout": hasLayout ? 'true' : undefined, ...rest },
+        react_1.default.createElement(SurfaceContext.Provider, { value: { setHasLayout } }, children)));
+}), {
+    /**
+     * 	Surface header subcomponent
+     */
+    Header: SurfaceHeader,
+    /**
+     * 	Surface body subcomponent. Additional padding can be added to the body through the 'isPadded' prop
+     */
+    Body: SurfaceBody,
 });
+const SurfaceContext = react_1.default.createContext(undefined);
 exports.default = exports.Surface;

package/cjs/core/Surface/index.d.ts

@@ -1,4 +1,4 @@
 export { Surface } from './Surface';
-export type { SurfaceProps } from './Surface';
+export type { SurfaceProps, SurfaceHeaderProps, SurfaceBodyProps, } from './Surface';
 declare const _default: "./Surface";
 export default _default;

package/cjs/core/Tile/Tile.js

@@ -25,14 +25,12 @@ const TileContext = react_1.default.createContext(undefined);
  * />
  */
 const TileAction = (props) => {
-    var _a, _b, _c;
     const tileContext = (0, utils_1.useSafeContext)(TileContext);
-    const supportsHas = (_c = (_b = (_a = (0, utils_1.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(+ *))');
     react_1.default.useEffect(() => {
-        if (!supportsHas) {
+        if (!(0, utils_1.supportsHas)()) {
             tileContext.setActionable(true);
         }
-    }, [supportsHas, tileContext]);
+    }, [tileContext]);
     return react_1.default.createElement(utils_1.LinkAction, { ...props });
 };
 exports.TileAction = TileAction;

package/cjs/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, LinkBox, LinkAction, Icon, Flex, } from './utils';
-export type { ThemeType, MiddleTextTruncationProps, IconProps, FlexProps, FlexItemProps, FlexSpacerProps, LinkBoxProps, LinkActionProps, } 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/cjs/core/index.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Input = exports.InformationPanelContent = exports.InformationPanelBody = exports.InformationPanelHeader = exports.InformationPanelWrapper = exports.InformationPanel = exports.HorizontalTabs = exports.Tab = exports.Tabs = exports.VerticalTabs = exports.HeaderLogo = exports.HeaderButton = exports.HeaderBreadcrumbs = exports.Header = exports.defaultFooterElements = exports.Footer = exports.FileEmptyCard = exports.FileUploadCard = exports.FileUploadTemplate = exports.FileUpload = exports.Fieldset = exports.ExpandableBlock = exports.NonIdealState = exports.ErrorPage = exports.DropdownMenu = exports.Dialog = exports.generateLocalizedStrings = exports.DatePicker = exports.ComboBox = exports.ColorPalette = exports.ColorInputPanel = exports.ColorBuilder = exports.ColorSwatch = exports.ColorPicker = exports.Checkbox = exports.Carousel = exports.ButtonGroup = exports.SplitButton = exports.IdeasButton = exports.IconButton = exports.DropdownButton = exports.Button = exports.Breadcrumbs = exports.Badge = exports.Backdrop = exports.UserIconGroup = exports.AvatarGroup = exports.UserIcon = exports.Avatar = exports.Alert = void 0;
 exports.TreeNodeExpander = exports.TreeNode = exports.Tree = exports.Tooltip = exports.ToggleSwitch = exports.ThemeProvider = exports.toaster = exports.TimePicker = exports.Tile = exports.Textarea = exports.TagContainer = exports.Tag = exports.SelectionColumn = exports.ExpanderColumn = exports.ActionColumn = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.FilterButtonBar = exports.BaseFilter = exports.tableFilters = exports.Table = exports.Surface = exports.StatusMessage = exports.Slider = exports.SkipToContentLink = exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = exports.ProgressLinear = exports.NotificationMarker = exports.ModalContent = exports.ModalButtonBar = exports.Modal = exports.MenuItemSkeleton = exports.MenuExtraContent = exports.MenuDivider = exports.MenuItem = exports.Menu = exports.LabeledTextarea = exports.LabeledSelect = exports.InputGroup = exports.LabeledInput = exports.Label = void 0;
-exports.Flex = exports.Icon = exports.LinkAction = exports.LinkBox = exports.MiddleTextTruncation = exports.ColorValue = exports.useTheme = exports.getUserColor = exports.WorkflowDiagram = exports.Stepper = exports.Wizard = exports.Text = exports.KbdKeys = exports.Kbd = exports.Code = exports.Blockquote = exports.Title = exports.Subheading = exports.Small = exports.Leading = exports.Headline = exports.Body = exports.Anchor = void 0;
+exports.Divider = exports.VisuallyHidden = exports.Flex = exports.Icon = exports.LinkAction = exports.LinkBox = exports.MiddleTextTruncation = exports.ColorValue = exports.useTheme = exports.getUserColor = exports.WorkflowDiagram = exports.Stepper = exports.Wizard = exports.Text = exports.KbdKeys = exports.Kbd = exports.Code = exports.Blockquote = exports.Title = exports.Subheading = exports.Small = exports.Leading = exports.Headline = exports.Body = exports.Anchor = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -187,3 +187,5 @@ Object.defineProperty(exports, "LinkBox", { enumerable: true, get: function () {
 Object.defineProperty(exports, "LinkAction", { enumerable: true, get: function () { return utils_1.LinkAction; } });
 Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return utils_1.Icon; } });
 Object.defineProperty(exports, "Flex", { enumerable: true, get: function () { return utils_1.Flex; } });
+Object.defineProperty(exports, "VisuallyHidden", { enumerable: true, get: function () { return utils_1.VisuallyHidden; } });
+Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return utils_1.Divider; } });

package/cjs/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/cjs/core/utils/components/Divider.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Divider = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const hooks_1 = require("../hooks");
+require("@itwin/itwinui-css/css/utils.css");
+/**
+ * Shows a divider
+ */
+exports.Divider = react_1.default.forwardRef((props, ref) => {
+    const { className, orientation = 'horizontal', ...rest } = props;
+    (0, hooks_1.useTheme)();
+    return (react_1.default.createElement("hr", { className: (0, classnames_1.default)('iui-divider', className), "aria-orientation": orientation === 'vertical' ? 'vertical' : undefined, ref: ref, ...rest }));
+});
+exports.default = exports.Divider;

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

@@ -40,8 +40,9 @@ 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) {
@@ -52,8 +53,8 @@ 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 = (0, functions_1.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 = (0, functions_1.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 = (0, functions_1.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 = (0, functions_1.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) {
@@ -128,12 +129,11 @@ 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/cjs/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/cjs/core/utils/components/VisuallyHidden.js

@@ -13,11 +13,18 @@ const classnames_1 = __importDefault(require("classnames"));
 const hooks_1 = require("../hooks");
 require("@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
  */
 exports.VisuallyHidden = react_1.default.forwardRef((props, ref) => {
-    const { className, ...rest } = props;
+    const { as: Element = 'span', className, unhideOnFocus = true, ...rest } = props;
     (0, hooks_1.useTheme)();
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-visually-hidden', className), ref: ref, ...rest }));
+    return (react_1.default.createElement(Element, { className: (0, classnames_1.default)('iui-visually-hidden', className), "data-iui-unhide-on-focus": unhideOnFocus ? true : undefined, ref: ref, ...rest }));
 });
 exports.default = exports.VisuallyHidden;

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

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

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

@@ -28,4 +28,5 @@ __exportStar(require("./VirtualScroll"), exports);
 __exportStar(require("./VisuallyHidden"), exports);
 __exportStar(require("./Icon"), exports);
 __exportStar(require("./Flex"), exports);
+__exportStar(require("./Divider"), exports);
 __exportStar(require("./LinkAction"), exports);

package/cjs/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/cjs/core/utils/functions/index.js

@@ -23,3 +23,4 @@ __exportStar(require("./colors"), exports);
 __exportStar(require("./numbers"), exports);
 __exportStar(require("./focusable"), exports);
 __exportStar(require("./styles"), exports);
+__exportStar(require("./supports"), exports);

package/cjs/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/cjs/core/utils/functions/supports.js

@@ -0,0 +1,13 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.supportsHas = void 0;
+const dom_1 = require("./dom");
+/**
+ * Returns true if the :has selector is supported in the browser
+ */
+const supportsHas = () => { var _a, _b, _c; return (_c = (_b = (_a = (0, dom_1.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(+ *))'); };
+exports.supportsHas = supportsHas;

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

@@ -94,10 +94,11 @@ 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/cjs/core/utils/hooks/useTheme.js

@@ -1,10 +1,34 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTheme = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
+const React = __importStar(require("react"));
 const functions_1 = require("../functions");
 const useIsomorphicLayoutEffect_1 = require("./useIsomorphicLayoutEffect");
 const useIsThemeAlreadySet_1 = require("./useIsThemeAlreadySet");
@@ -23,6 +47,7 @@ const useTheme = (theme, themeOptions) => {
     var _a;
     const ownerDocument = (_a = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.ownerDocument) !== null && _a !== void 0 ? _a : (0, functions_1.getDocument)();
     const isThemeAlreadySet = (0, useIsThemeAlreadySet_1.useIsThemeAlreadySet)(ownerDocument);
+    useCorrectRootFontSize();
     (0, useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect)(() => {
         if (!ownerDocument || isThemeAlreadySet.current) {
             return;
@@ -81,3 +106,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/esm/core/Dialog/DialogMain.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import cx from 'classnames';
-import { FocusTrap, getTranslateValues, useLatestRef, Resizer, useMergedRefs, useTheme, useIsomorphicLayoutEffect, } from '../utils';
+import { FocusTrap, getTranslateValues, Resizer, useMergedRefs, useTheme, useIsomorphicLayoutEffect, } from '../utils';
 import '@itwin/itwinui-css/css/dialog.css';
 import { useDialogContext } from './DialogContext';
 import { CSSTransition } from 'react-transition-group';
@@ -38,28 +38,7 @@ export const DialogMain = React.forwardRef((props, ref) => {
     const dialogRef = React.useRef(null);
     const refs = useMergedRefs(dialogRef, ref);
     const hasBeenResized = React.useRef(false);
-    // Focuses dialog when opened and brings back focus to the previously focused element when closed.
     const previousFocusedElement = React.useRef();
-    const setFocusRef = useLatestRef(setFocus);
-    React.useEffect(() => {
-        var _a, _b, _c;
-        if (!setFocusRef.current) {
-            return;
-        }
-        if (isOpen) {
-            previousFocusedElement.current = (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.activeElement;
-            (_b = dialogRef.current) === null || _b === void 0 ? void 0 : _b.focus();
-        }
-        else {
-            (_c = previousFocusedElement.current) === null || _c === void 0 ? void 0 : _c.focus();
-        }
-        const ref = dialogRef.current;
-        return () => {
-            var _a;
-            (ref === null || ref === void 0 ? void 0 : ref.contains(document.activeElement)) &&
-                ((_a = previousFocusedElement.current) === null || _a === void 0 ? void 0 : _a.focus());
-        };
-    }, [isOpen, setFocusRef]);
     const originalBodyOverflow = React.useRef('');
     React.useEffect(() => {
         if (isOpen) {
@@ -130,7 +109,6 @@ export const DialogMain = React.forwardRef((props, ref) => {
     const content = (React.createElement("div", { className: cx('iui-dialog', {
             'iui-dialog-default': styleType === 'default',
             'iui-dialog-full-page': styleType === 'fullPage',
-            'iui-dialog-visible': isOpen,
             'iui-dialog-draggable': isDraggable,
         }, className), role: 'dialog', ref: refs, onKeyDown: handleKeyDown, tabIndex: -1, style: {
             transform,
@@ -145,7 +123,24 @@ export const DialogMain = React.forwardRef((props, ref) => {
                 }
             }, onResizeEnd: setResizeStyle })),
         children));
-    return (React.createElement(CSSTransition, { in: isOpen, classNames: 'iui-dialog-animation', timeout: { exit: 600 }, unmountOnExit: true, nodeRef: dialogRef },
+    return (React.createElement(CSSTransition, { in: isOpen, classNames: {
+            enter: 'iui-dialog-animation-enter',
+            enterActive: 'iui-dialog-animation-enter-active',
+            enterDone: 'iui-dialog-visible',
+        }, timeout: { exit: 600 }, 
+        // Focuses dialog when opened
+        onEntered: () => {
+            var _a, _b;
+            previousFocusedElement.current = (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.activeElement;
+            setFocus && ((_b = dialogRef.current) === null || _b === void 0 ? void 0 : _b.focus({ preventScroll: true }));
+        }, 
+        // Brings back focus to the previously focused element when closed
+        onExit: () => {
+            var _a, _b, _c;
+            if ((_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.contains((_b = dialogRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.activeElement)) {
+                (_c = previousFocusedElement.current) === null || _c === void 0 ? void 0 : _c.focus();
+            }
+        }, unmountOnExit: true, nodeRef: dialogRef },
         React.createElement(DialogDragContext.Provider, { value: { onPointerDown: handlePointerDown } },
             trapFocus && React.createElement(FocusTrap, null, content),
             !trapFocus && content)));

package/esm/core/Surface/Surface.d.ts

@@ -1,6 +1,15 @@
 import React from 'react';
-import { CommonProps } from '../utils';
+import { CommonProps, PolymorphicComponentProps, PolymorphicForwardRefComponent } from '../utils';
 import '@itwin/itwinui-css/css/surface.css';
+declare type SurfaceHeaderOwnProps = {};
+export declare type SurfaceHeaderProps<T extends React.ElementType = 'div'> = PolymorphicComponentProps<T, SurfaceHeaderOwnProps>;
+declare type SurfaceBodyOwnProps = {
+    /**
+     * Gives padding to the surface body
+     */
+    isPadded?: boolean;
+};
+export declare type SurfaceBodyProps<T extends React.ElementType = 'div'> = PolymorphicComponentProps<T, SurfaceBodyOwnProps>;
 export declare type SurfaceProps = {
     /**
      * Sets the elevation of the surface
@@ -16,6 +25,10 @@ export declare type SurfaceProps = {
  * @example
  * <Surface>Surface Content</Surface>
  * <Surface elevation={2}>Surface Content</Surface>
+ * <Surface>
+ *   <Surface.Header>Surface Header Content</Surface.Header>
+ *   <Surface.Body isPadded={true}>Surface Body Content</Surface.Body>
+ * </Surface>
  */
 export declare const Surface: React.ForwardRefExoticComponent<{
     /**
@@ -26,5 +39,14 @@ export declare const Surface: React.ForwardRefExoticComponent<{
      * Content in the surface.
      */
     children: React.ReactNode;
-} & Omit<CommonProps, "title"> & React.RefAttributes<HTMLDivElement>>;
+} & Omit<CommonProps, "title"> & React.RefAttributes<HTMLDivElement>> & {
+    /**
+     * 	Surface header subcomponent
+     */
+    Header: PolymorphicForwardRefComponent<"div", SurfaceHeaderOwnProps>;
+    /**
+     * 	Surface body subcomponent. Additional padding can be added to the body through the 'isPadded' prop
+     */
+    Body: PolymorphicForwardRefComponent<"div", SurfaceBodyOwnProps>;
+};
 export default Surface;

package/esm/core/Surface/Surface.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import cx from 'classnames';
-import { useTheme } from '../utils';
+import { useSafeContext, useTheme, supportsHas, } from '../utils';
 import '@itwin/itwinui-css/css/surface.css';
 /**
  * Helper function that returns one of the preset surface elevation values.
@@ -27,19 +27,55 @@ const getSurfaceElevationValue = (elevation) => {
             return '';
     }
 };
+const SurfaceHeader = React.forwardRef((props, ref) => {
+    const { as: Element = 'div', children, className, ...rest } = props;
+    const { setHasLayout } = useSafeContext(SurfaceContext);
+    React.useEffect(() => {
+        if (!supportsHas()) {
+            setHasLayout(true);
+        }
+    }, [setHasLayout]);
+    return (React.createElement(Element, { className: cx('iui-surface-header', className), ref: ref, ...rest }, children));
+});
+const SurfaceBody = React.forwardRef((props, ref) => {
+    const { as: Element = 'div', children, className, isPadded, ...rest } = props;
+    const { setHasLayout } = useSafeContext(SurfaceContext);
+    React.useEffect(() => {
+        if (!supportsHas()) {
+            setHasLayout(true);
+        }
+    }, [setHasLayout]);
+    return (React.createElement(Element, { className: cx('iui-surface-body', className), ref: ref, "data-iui-padded": isPadded ? 'true' : undefined, ...rest }, children));
+});
 /**
  * The Surface container allows content to appear elevated through the use of a drop shadow
  * @example
  * <Surface>Surface Content</Surface>
  * <Surface elevation={2}>Surface Content</Surface>
+ * <Surface>
+ *   <Surface.Header>Surface Header Content</Surface.Header>
+ *   <Surface.Body isPadded={true}>Surface Body Content</Surface.Body>
+ * </Surface>
  */
-export const Surface = React.forwardRef((props, ref) => {
+export const Surface = Object.assign(React.forwardRef((props, ref) => {
     const { elevation, className, style, children, ...rest } = props;
     useTheme();
+    const [hasLayout, setHasLayout] = React.useState(false);
     const _style = {
         '--iui-surface-elevation': getSurfaceElevationValue(elevation),
         ...style,
     };
-    return (React.createElement("div", { className: cx('iui-surface', className), style: _style, ref: ref, ...rest }, children));
+    return (React.createElement("div", { className: cx('iui-surface', className), style: _style, ref: ref, "data-iui-layout": hasLayout ? 'true' : undefined, ...rest },
+        React.createElement(SurfaceContext.Provider, { value: { setHasLayout } }, children)));
+}), {
+    /**
+     * 	Surface header subcomponent
+     */
+    Header: SurfaceHeader,
+    /**
+     * 	Surface body subcomponent. Additional padding can be added to the body through the 'isPadded' prop
+     */
+    Body: SurfaceBody,
 });
+const SurfaceContext = React.createContext(undefined);
 export default Surface;

package/esm/core/Surface/index.d.ts

@@ -1,4 +1,4 @@
 export { Surface } from './Surface';
-export type { SurfaceProps } from './Surface';
+export type { SurfaceProps, SurfaceHeaderProps, SurfaceBodyProps, } from './Surface';
 declare const _default: "./Surface";
 export default _default;

package/esm/core/Tile/Tile.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import cx from 'classnames';
-import { StatusIconMap, useTheme, SvgMore, SvgNew, SvgCheckmark, LinkAction, useSafeContext, getWindow, } 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';
@@ -19,14 +19,12 @@ const TileContext = React.createContext(undefined);
  * />
  */
 export const TileAction = (props) => {
-    var _a, _b, _c;
     const tileContext = useSafeContext(TileContext);
-    const supportsHas = (_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(+ *))');
     React.useEffect(() => {
-        if (!supportsHas) {
+        if (!supportsHas()) {
             tileContext.setActionable(true);
         }
-    }, [supportsHas, tileContext]);
+    }, [tileContext]);
     return React.createElement(LinkAction, { ...props });
 };
 /**

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, LinkBox, LinkAction, Icon, Flex, } from './utils';
-export type { ThemeType, MiddleTextTruncationProps, IconProps, FlexProps, FlexItemProps, FlexSpacerProps, LinkBoxProps, LinkActionProps, } 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, LinkBox, LinkAction, 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/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,4 +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,4 +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/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/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.7.0",
+  "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.8.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",