@itwin/itwinui-react 2.6.1 → 2.8.0

package/cjs/core/Tile/Tile.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tile = void 0;
+exports.Tile = exports.TileAction = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -15,6 +15,25 @@ require("@itwin/itwinui-css/css/tile.css");
 const DropdownMenu_1 = require("../DropdownMenu");
 const Buttons_1 = require("../Buttons");
 const ProgressIndicators_1 = require("../ProgressIndicators");
+const TileContext = react_1.default.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/>}
+ * />
+ */
+const TileAction = (props) => {
+    const tileContext = (0, utils_1.useSafeContext)(TileContext);
+    react_1.default.useEffect(() => {
+        if (!(0, utils_1.supportsHas)()) {
+            tileContext.setActionable(true);
+        }
+    }, [tileContext]);
+    return react_1.default.createElement(utils_1.LinkAction, { ...props });
+};
+exports.TileAction = TileAction;
 /**
  * Tile component that displays content and actions in a card-like format.
  * @example
@@ -32,59 +51,73 @@ const ProgressIndicators_1 = require("../ProgressIndicators");
  *  isNew={false}
  * />
  */
-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;
+exports.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;
     (0, utils_1.useTheme)();
     const [isMenuVisible, setIsMenuVisible] = react_1.default.useState(false);
     const showMenu = react_1.default.useCallback(() => setIsMenuVisible(true), []);
     const hideMenu = react_1.default.useCallback(() => setIsMenuVisible(false), []);
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('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_1.default.createElement("div", { className: 'iui-tile-thumbnail' },
-            typeof thumbnail === 'string' ? (react_1.default.createElement("div", { className: 'iui-tile-thumbnail-picture', style: { backgroundImage: `url(${thumbnail})` } })) : thumbnail && thumbnail.type === 'img' ? (react_1.default.cloneElement(thumbnail, {
-                className: 'iui-tile-thumbnail-picture',
-            })) : react_1.default.isValidElement(thumbnail) ? (react_1.default.cloneElement(thumbnail, {
-                className: (0, classnames_1.default)('iui-thumbnail-icon', thumbnail.props.className),
-            })) : (thumbnail),
-            leftIcon &&
-                react_1.default.cloneElement(leftIcon, {
-                    className: 'iui-tile-thumbnail-type-indicator',
-                    'data-iui-size': 'small',
-                }),
-            rightIcon &&
-                react_1.default.cloneElement(rightIcon, {
-                    className: 'iui-tile-thumbnail-quick-action',
-                    'data-iui-size': 'small',
-                }),
-            badge && (react_1.default.createElement("div", { className: 'iui-tile-thumbnail-badge-container' }, badge)))),
-        react_1.default.createElement("div", { className: 'iui-tile-content' },
-            react_1.default.createElement("div", { className: 'iui-tile-name' },
-                react_1.default.createElement(TitleIcon, { isLoading: isLoading, isSelected: isSelected, isNew: isNew, status: status }),
-                react_1.default.createElement("span", { className: 'iui-tile-name-label' }, name)),
-            description != undefined && (react_1.default.createElement("div", { className: 'iui-tile-description' }, description)),
-            metadata != undefined && (react_1.default.createElement("div", { className: 'iui-tile-metadata' }, metadata)),
-            moreOptions && (react_1.default.createElement(DropdownMenu_1.DropdownMenu, { onShow: showMenu, onHide: hideMenu, menuItems: (close) => moreOptions.map((option) => react_1.default.cloneElement(option, {
-                    onClick: (value) => {
-                        var _a, _b;
-                        close();
-                        (_b = (_a = option.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, value);
-                    },
-                })) },
-                react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-tile-more-options', {
-                        'iui-visible': isMenuVisible,
-                    }) },
-                    react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', size: 'small', "aria-label": 'More options' },
-                        react_1.default.createElement(utils_1.SvgMore, null))))),
-            children),
-        buttons && react_1.default.createElement("div", { className: 'iui-tile-buttons' }, buttons)));
-};
-exports.Tile = Tile;
+    const [localActionable, setLocalActionable] = react_1.default.useState(isActionableProp);
+    const isActionable = isActionableProp !== null && isActionableProp !== void 0 ? isActionableProp : localActionable;
+    const tileName = (react_1.default.createElement("div", { className: 'iui-tile-name' },
+        react_1.default.createElement(TitleIcon, { isLoading: isLoading, isSelected: isSelected, isNew: isNew, status: status }),
+        react_1.default.createElement("span", { className: 'iui-tile-name-label' }, isActionable && onClick ? (react_1.default.createElement(utils_1.LinkAction, { as: 'button', onClick: !isDisabled ? onClick : undefined, "aria-disabled": isDisabled }, name)) : (name))));
+    return (react_1.default.createElement(TileContext.Provider, { value: { setActionable: setLocalActionable } },
+        react_1.default.createElement("div", { className: (0, classnames_1.default)('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_1.default.createElement("div", { className: 'iui-tile-thumbnail' },
+                typeof thumbnail === 'string' ? (react_1.default.createElement("div", { className: 'iui-tile-thumbnail-picture', style: { backgroundImage: `url(${thumbnail})` } })) : thumbnail && thumbnail.type === 'img' ? (react_1.default.cloneElement(thumbnail, {
+                    className: 'iui-tile-thumbnail-picture',
+                })) : react_1.default.isValidElement(thumbnail) ? (react_1.default.cloneElement(thumbnail, {
+                    className: (0, classnames_1.default)('iui-thumbnail-icon', thumbnail.props.className),
+                })) : (thumbnail),
+                leftIcon &&
+                    react_1.default.cloneElement(leftIcon, {
+                        className: 'iui-tile-thumbnail-type-indicator',
+                        'data-iui-size': 'small',
+                    }),
+                rightIcon &&
+                    react_1.default.cloneElement(rightIcon, {
+                        className: 'iui-tile-thumbnail-quick-action',
+                        'data-iui-size': 'small',
+                    }),
+                badge && (react_1.default.createElement("div", { className: 'iui-tile-thumbnail-badge-container' }, badge)))),
+            react_1.default.createElement("div", { className: 'iui-tile-content' },
+                variant === 'folder' ? tileName : null,
+                description != undefined && (react_1.default.createElement("div", { className: 'iui-tile-description' }, description)),
+                metadata != undefined && (react_1.default.createElement("div", { className: 'iui-tile-metadata' }, metadata)),
+                moreOptions && (react_1.default.createElement(DropdownMenu_1.DropdownMenu, { onShow: showMenu, onHide: hideMenu, menuItems: (close) => moreOptions.map((option) => react_1.default.cloneElement(option, {
+                        onClick: (value) => {
+                            var _a, _b;
+                            close();
+                            (_b = (_a = option.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, value);
+                        },
+                    })) },
+                    react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-tile-more-options', {
+                            'iui-visible': isMenuVisible,
+                        }) },
+                        react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', size: 'small', "aria-label": 'More options' },
+                            react_1.default.createElement(utils_1.SvgMore, null))))),
+                children),
+            buttons && react_1.default.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: exports.TileAction,
+});
 const TitleIcon = ({ isLoading = false, isSelected = false, isNew = false, status, }) => {
     const StatusIcon = !!status && utils_1.StatusIconMap[status];
     if (isLoading) {

package/cjs/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/cjs/core/ToggleSwitch/ToggleSwitch.js

@@ -31,7 +31,13 @@ require("@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>} />
  */
 exports.ToggleSwitch = react_1.default.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;
     (0, utils_1.useTheme)();
     const inputElementRef = react_1.default.useRef(null);
     const refs = (0, utils_1.useMergedRefs)(inputElementRef, ref);
@@ -48,6 +54,7 @@ exports.ToggleSwitch = react_1.default.forwardRef((props, ref) => {
         }, className), "data-iui-size": size, style: style },
         react_1.default.createElement("input", { className: 'iui-toggle-switch', type: 'checkbox', role: 'switch', disabled: disabled, ref: refs, ...rest }),
         icon &&
+            size !== 'small' &&
             react_1.default.cloneElement(icon, {
                 className: (0, classnames_1.default)('iui-toggle-switch-icon', icon.props.className),
                 'aria-hidden': true,

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, 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/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.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.
@@ -183,5 +183,9 @@ Object.defineProperty(exports, "getUserColor", { enumerable: true, get: function
 Object.defineProperty(exports, "useTheme", { enumerable: true, get: function () { return utils_1.useTheme; } });
 Object.defineProperty(exports, "ColorValue", { enumerable: true, get: function () { return utils_1.ColorValue; } });
 Object.defineProperty(exports, "MiddleTextTruncation", { enumerable: true, get: function () { return utils_1.MiddleTextTruncation; } });
+Object.defineProperty(exports, "LinkBox", { enumerable: true, get: function () { return utils_1.LinkBox; } });
+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/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/cjs/core/utils/components/LinkAction.js

@@ -0,0 +1,44 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkBox = exports.LinkAction = 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"));
+require("@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>
+ */
+exports.LinkAction = react_1.default.forwardRef((props, ref) => {
+    const { as: Element = 'a', className, ...rest } = props;
+    return (react_1.default.createElement(Element, { ref: ref, className: (0, classnames_1.default)('iui-link-action', className), ...rest }));
+});
+exports.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>
+ */
+exports.LinkBox = react_1.default.forwardRef((props, ref) => {
+    const { as: Element = 'div', className, ...rest } = props;
+    return (react_1.default.createElement(Element, { ref: ref, className: (0, classnames_1.default)('iui-link-box', className), ...rest }));
+});
+exports.LinkBox.displayName = 'LinkBox';

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,3 +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,3 +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/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/cjs/core/utils/hooks/index.js

@@ -30,4 +30,5 @@ __exportStar(require("./useSafeContext"), exports);
 __exportStar(require("./useLatestRef"), exports);
 __exportStar(require("./useIsomorphicLayoutEffect"), exports);
 __exportStar(require("./useIsThemeAlreadySet"), exports);
+__exportStar(require("./useIsClient"), exports);
 __exportStar(require("./useId"), exports);

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/useIsClient.d.ts

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

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

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsClient = 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 useIsClient = () => {
+    const [isClient, setIsClient] = react_1.default.useState(false);
+    react_1.default.useEffect(() => {
+        setIsClient(true);
+    }, []);
+    return isClient;
+};
+exports.useIsClient = useIsClient;