@itwin/itwinui-react 2.11.4 → 3.0.0-dev.0

package/cjs/core/index.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InformationPanelBody = exports.InformationPanelHeader = exports.InformationPanelWrapper = exports.InformationPanel = exports.HorizontalTabs = exports.Tab = exports.Tabs = exports.VerticalTabs = exports.ListItem = exports.List = 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.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 = exports.Input = exports.InformationPanelContent = void 0;
-exports.Divider = exports.VisuallyHidden = exports.Flex = exports.Icon = exports.LinkAction = exports.LinkBox = exports.MiddleTextTruncation = exports.ColorValue = exports.useTheme = exports.getUserColor = exports.SearchBox = 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 = exports.TreeNodeExpander = exports.TreeNode = void 0;
+exports.Divider = exports.VisuallyHidden = exports.Flex = exports.Icon = exports.LinkAction = exports.LinkBox = exports.MiddleTextTruncation = exports.ColorValue = exports.getUserColor = exports.SearchBox = exports.WorkflowDiagram = exports.Stepper = exports.Wizard = exports.Text = exports.KbdKeys = exports.Kbd = exports.Code = exports.Blockquote = exports.Anchor = exports.TreeNodeExpander = exports.TreeNode = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -166,12 +166,6 @@ Object.defineProperty(exports, "TreeNode", { enumerable: true, get: function ()
 Object.defineProperty(exports, "TreeNodeExpander", { enumerable: true, get: function () { return index_js_52.TreeNodeExpander; } });
 var index_js_53 = require("./Typography/index.js");
 Object.defineProperty(exports, "Anchor", { enumerable: true, get: function () { return index_js_53.Anchor; } });
-Object.defineProperty(exports, "Body", { enumerable: true, get: function () { return index_js_53.Body; } });
-Object.defineProperty(exports, "Headline", { enumerable: true, get: function () { return index_js_53.Headline; } });
-Object.defineProperty(exports, "Leading", { enumerable: true, get: function () { return index_js_53.Leading; } });
-Object.defineProperty(exports, "Small", { enumerable: true, get: function () { return index_js_53.Small; } });
-Object.defineProperty(exports, "Subheading", { enumerable: true, get: function () { return index_js_53.Subheading; } });
-Object.defineProperty(exports, "Title", { enumerable: true, get: function () { return index_js_53.Title; } });
 Object.defineProperty(exports, "Blockquote", { enumerable: true, get: function () { return index_js_53.Blockquote; } });
 Object.defineProperty(exports, "Code", { enumerable: true, get: function () { return index_js_53.Code; } });
 Object.defineProperty(exports, "Kbd", { enumerable: true, get: function () { return index_js_53.Kbd; } });
@@ -185,7 +179,6 @@ var index_js_55 = require("./SearchBox/index.js");
 Object.defineProperty(exports, "SearchBox", { enumerable: true, get: function () { return index_js_55.SearchBox; } });
 var index_js_56 = require("./utils/index.js");
 Object.defineProperty(exports, "getUserColor", { enumerable: true, get: function () { return index_js_56.getUserColor; } });
-Object.defineProperty(exports, "useTheme", { enumerable: true, get: function () { return index_js_56.useTheme; } });
 Object.defineProperty(exports, "ColorValue", { enumerable: true, get: function () { return index_js_56.ColorValue; } });
 Object.defineProperty(exports, "MiddleTextTruncation", { enumerable: true, get: function () { return index_js_56.MiddleTextTruncation; } });
 Object.defineProperty(exports, "LinkBox", { enumerable: true, get: function () { return index_js_56.LinkBox; } });

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

@@ -0,0 +1,6 @@
+/**
+ * Polymorphic component that renders a div element by default.
+ * Intended to be used as a base for other components.
+ * @private
+ */
+export declare const Box: import("../props.js").PolymorphicForwardRefComponent<"div", {}>;

package/cjs/core/{Typography/Leading/index.js → utils/components/Box.js}

@@ -1,10 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Leading = void 0;
+exports.Box = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var Leading_js_1 = require("./Leading.js");
-Object.defineProperty(exports, "Leading", { enumerable: true, get: function () { return Leading_js_1.Leading; } });
-exports.default = './Leading';
+const polymorphic_js_1 = require("../functions/polymorphic.js");
+/**
+ * Polymorphic component that renders a div element by default.
+ * Intended to be used as a base for other components.
+ * @private
+ */
+exports.Box = polymorphic_js_1.polymorphic.div('');

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

@@ -1,14 +1,14 @@
-import * as React from 'react';
 import '@itwin/itwinui-css/css/utils.css';
-export declare type DividerProps = {
+import type { PolymorphicForwardRefComponent } from '../props.js';
+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 declare const Divider: PolymorphicForwardRefComponent<"hr", DividerProps>;
 export default Divider;

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

@@ -33,14 +33,13 @@ exports.Divider = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const index_js_1 = require("../hooks/index.js");
 require("@itwin/itwinui-css/css/utils.css");
+const Box_js_1 = require("./Box.js");
 /**
  * Shows a divider
  */
 exports.Divider = React.forwardRef((props, ref) => {
     const { className, orientation = 'horizontal', ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement("hr", { className: (0, classnames_1.default)('iui-divider', className), "aria-orientation": orientation === 'vertical' ? 'vertical' : undefined, ref: ref, ...rest }));
+    return (React.createElement(Box_js_1.Box, { as: '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/Flex.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { AnyString } from '../types.js';
-import type { PolymorphicComponentProps, PolymorphicForwardRefComponent } from '../props.js';
+import type { PolymorphicForwardRefComponent } from '../props.js';
 import '@itwin/itwinui-css/css/utils.css';
 declare const sizeTokens: readonly ["3xs", "2xs", "xs", "s", "m", "l", "xl", "2xl", "3xl"];
 /**
@@ -136,7 +136,4 @@ export declare const Flex: PolymorphicForwardRefComponent<"div", FlexOwnProps> &
      */
     Spacer: PolymorphicForwardRefComponent<"div", FlexSpacerOwnProps>;
 };
-export declare type FlexProps = PolymorphicComponentProps<'div', FlexOwnProps>;
-export declare type FlexItemProps = PolymorphicComponentProps<'div', FlexItemOwnProps>;
-export declare type FlexSpacerProps = PolymorphicComponentProps<'div', FlexSpacerOwnProps>;
 export default Flex;

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

@@ -34,6 +34,7 @@ exports.Flex = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 require("@itwin/itwinui-css/css/utils.css");
+const Box_js_1 = require("./Box.js");
 const sizeTokens = [
     '3xs',
     '2xs',
@@ -54,8 +55,8 @@ const getValueForToken = (token) => {
 // ----------------------------------------------------------------------------
 // Main Flex component
 const FlexComponent = React.forwardRef((props, ref) => {
-    const { as: Element = 'div', display, flexDirection, justifyContent, alignItems, gap, flexWrap, className, style, ...rest } = props;
-    return (React.createElement(Element, { className: (0, classnames_1.default)('iui-flex', className), style: {
+    const { display, flexDirection, justifyContent, alignItems, gap, flexWrap, className, style, ...rest } = props;
+    return (React.createElement(Box_js_1.Box, { className: (0, classnames_1.default)('iui-flex', className), style: {
             '--iui-flex-display': display,
             '--iui-flex-direction': flexDirection,
             '--iui-flex-justify': justifyContent,
@@ -65,16 +66,18 @@ const FlexComponent = React.forwardRef((props, ref) => {
             ...style,
         }, ref: ref, ...rest }));
 });
+FlexComponent.displayName = 'Flex';
 // ----------------------------------------------------------------------------
 // Flex.Spacer component
 const FlexSpacer = React.forwardRef((props, ref) => {
-    const { as: Element = 'div', flex, className, style, ...rest } = props;
-    return (React.createElement(Element, { className: (0, classnames_1.default)('iui-flex-spacer', className), style: { '--iui-flex-spacer-flex': flex, ...style }, ref: ref, ...rest }));
+    const { flex, className, style, ...rest } = props;
+    return (React.createElement(Box_js_1.Box, { className: (0, classnames_1.default)('iui-flex-spacer', className), style: { '--iui-flex-spacer-flex': flex, ...style }, ref: ref, ...rest }));
 });
+FlexSpacer.displayName = 'Flex.Spacer';
 // ----------------------------------------------------------------------------
 // Flex.Item subcomponent
 const FlexItem = React.forwardRef((props, ref) => {
-    const { as: Element = 'div', gapBefore, gapAfter, flex, alignSelf, className, style, ...rest } = props;
+    const { gapBefore, gapAfter, flex, alignSelf, className, style, ...rest } = props;
     const _style = {
         '--iui-flex-item-flex': flex,
         '--iui-flex-item-align': alignSelf,
@@ -88,8 +91,9 @@ const FlexItem = React.forwardRef((props, ref) => {
         }),
         ...style,
     };
-    return (React.createElement(Element, { className: (0, classnames_1.default)('iui-flex-item', className), ref: ref, style: _style, ...rest }));
+    return (React.createElement(Box_js_1.Box, { className: (0, classnames_1.default)('iui-flex-item', className), ref: ref, style: _style, ...rest }));
 });
+FlexItem.displayName = 'Flex.Item';
 // ----------------------------------------------------------------------------
 // Exported compound component
 /**

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import type { AnyString } from '../types.js';
 import '@itwin/itwinui-css/css/utils.css';
+import type { PolymorphicForwardRefComponent } from '../props.js';
 export declare type IconProps = {
     /**
      * Size of the svg.
@@ -39,28 +40,5 @@ export declare type IconProps = {
  *   <SvgStatusError />
  * </Icon>
  */
-export declare const Icon: React.ForwardRefExoticComponent<{
-    /**
-     * Size of the svg.
-     *  - 'medium': works well with most text
-     *  - 'small': smaller than medium
-     *  - 'large': larger than medium
-     *  - 'auto': scales with text
-     *
-     * Also accepts a custom string value that will be used unchanged.
-     *
-     * @default 'medium'
-     */
-    size?: "small" | "auto" | "medium" | "large" | AnyString | undefined;
-    /**
-     * Fill (color) of the svg.
-     * Defaults to `--iui-color-icon-muted`. Can be specified to
-     * use one of the status colors.
-     *
-     * Also accepts a custom string value that will be used unchanged.
-     *
-     * @default 'default'
-     */
-    fill?: "default" | "positive" | "warning" | "negative" | AnyString | "informational" | undefined;
-} & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & React.RefAttributes<HTMLSpanElement>>;
+export declare const Icon: PolymorphicForwardRefComponent<"span", IconProps>;
 export default Icon;

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

@@ -34,6 +34,7 @@ exports.Icon = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 require("@itwin/itwinui-css/css/utils.css");
+const Box_js_1 = require("./Box.js");
 const getSizeValue = (size) => {
     switch (size) {
         case 'small':
@@ -62,6 +63,6 @@ const getSizeValue = (size) => {
  */
 exports.Icon = React.forwardRef((props, ref) => {
     const { size = 'medium', fill = 'default', className, ...rest } = props;
-    return (React.createElement("span", { className: (0, classnames_1.default)('iui-svg-icon', className), "data-iui-icon-size": getSizeValue(size), "data-iui-icon-color": fill, ref: ref, ...rest }));
+    return (React.createElement(Box_js_1.Box, { as: 'span', className: (0, classnames_1.default)('iui-svg-icon', className), "data-iui-icon-size": getSizeValue(size), "data-iui-icon-color": fill, ref: ref, ...rest }));
 });
 exports.default = exports.Icon;

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

@@ -34,30 +34,26 @@ exports.InputContainer = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 require("@itwin/itwinui-css/css/utils.css");
+const Box_js_1 = require("./Box.js");
 /**
  * Input container to wrap inputs with label, and add optional message and icon.
  * @private
  */
 const InputContainer = (props) => {
-    var _a;
-    const { as: Element = 'div', label, disabled, required, status, message, icon, isLabelInline, isIconInline, children, className, style, statusMessage, inputId, labelId, ...rest } = props;
-    const LabelElement = inputId && Element !== 'label' ? 'label' : 'div';
-    return (React.createElement(Element, { className: (0, classnames_1.default)('iui-input-container', {
+    const { label, disabled, required, status, message, icon, isLabelInline, isIconInline, children, className, style, statusMessage, inputId, labelId, ...rest } = props;
+    return (React.createElement(Box_js_1.Box, { className: (0, classnames_1.default)('iui-input-container', {
             'iui-disabled': disabled,
             [`iui-${status}`]: !!status,
             'iui-inline-label': isLabelInline,
             'iui-inline-icon': isIconInline,
             'iui-with-message': (!!message || !!icon || !!statusMessage) && !isLabelInline,
         }, className), style: style, ...rest },
-        label && (React.createElement(LabelElement, { className: (0, classnames_1.default)('iui-label', {
+        label && (React.createElement(Box_js_1.Box, { as: inputId && props.as !== 'label' ? 'label' : 'div', className: (0, classnames_1.default)('iui-label', {
                 'iui-required': required,
             }), htmlFor: inputId, id: labelId }, label)),
         children,
         statusMessage ? (statusMessage) : (React.createElement(React.Fragment, null,
-            icon &&
-                React.cloneElement(icon, {
-                    className: (0, classnames_1.default)('iui-input-icon', (_a = icon.props) === null || _a === void 0 ? void 0 : _a.className),
-                }),
-            message && !isLabelInline && (React.createElement("div", { className: 'iui-message' }, message))))));
+            icon && (React.createElement(Box_js_1.Box, { as: 'span', className: 'iui-input-icon', "aria-hidden": true }, icon)),
+            message && !isLabelInline && (React.createElement(Box_js_1.Box, { className: 'iui-message' }, message))))));
 };
 exports.InputContainer = InputContainer;

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

@@ -1,6 +1,6 @@
-import type { PolymorphicComponentProps, PolymorphicForwardRefComponent } from '../props.js';
+import type { PolymorphicForwardRefComponent } from '../props.js';
 import '@itwin/itwinui-css/css/input-container.css';
-declare type InputFlexContainerOwnProps = {
+export declare type InputFlexContainerProps = {
     isDisabled?: boolean;
     status?: 'positive' | 'warning' | 'negative';
 };
@@ -8,6 +8,4 @@ declare type InputFlexContainerOwnProps = {
  * Utility component for input container with display flex abilities.
  * @private
  */
-export declare const InputFlexContainer: PolymorphicForwardRefComponent<"div", InputFlexContainerOwnProps>;
-export declare type InputFlexContainerProps = PolymorphicComponentProps<'div', InputFlexContainerOwnProps>;
-export {};
+export declare const InputFlexContainer: PolymorphicForwardRefComponent<"div", InputFlexContainerProps>;

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

@@ -11,11 +11,12 @@ exports.InputFlexContainer = void 0;
 const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 require("@itwin/itwinui-css/css/input-container.css");
+const Box_js_1 = require("./Box.js");
 /**
  * Utility component for input container with display flex abilities.
  * @private
  */
 exports.InputFlexContainer = react_1.default.forwardRef((props, ref) => {
-    const { as: Element = 'div', isDisabled, status, children, className, style, ...rest } = props;
-    return (react_1.default.createElement(Element, { className: (0, classnames_1.default)('iui-input-flex-container', className), "data-iui-status": status, "data-iui-disabled": isDisabled ? 'true' : undefined, ref: ref, style: style, ...rest }, children));
+    const { isDisabled, status, children, className, style, ...rest } = props;
+    return (react_1.default.createElement(Box_js_1.Box, { className: (0, classnames_1.default)('iui-input-flex-container', className), "data-iui-status": status, "data-iui-disabled": isDisabled ? 'true' : undefined, ref: ref, style: style, ...rest }, children));
 });

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

@@ -1,9 +1,4 @@
-import type { PolymorphicComponentProps, PolymorphicForwardRefComponent } from '../props.js';
 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.
@@ -14,7 +9,7 @@ export declare type LinkBoxProps = PolymorphicComponentProps<'div', LinkBoxOwnPr
  *   </Surface>
  * </LinkBox>
  */
-export declare const LinkAction: PolymorphicForwardRefComponent<"a", LinkActionOwnProps>;
+export declare const LinkAction: import("../props.js").PolymorphicForwardRefComponent<"a", {}>;
 /**
  * Polymorphic link box component.
  * Used to wrap around your component to use LinkAction.
@@ -26,5 +21,4 @@ export declare const LinkAction: PolymorphicForwardRefComponent<"a", LinkActionO
  *   </Surface>
  * </LinkBox>
  */
-export declare const LinkBox: PolymorphicForwardRefComponent<"div", LinkBoxOwnProps>;
-export {};
+export declare const LinkBox: import("../props.js").PolymorphicForwardRefComponent<"div", {}>;

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

@@ -1,39 +1,12 @@
 "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;
-};
-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 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
 require("@itwin/itwinui-css/css/utils.css");
+const polymorphic_js_1 = require("../functions/polymorphic.js");
 /**
  * Polymorphic link action component.
  * It is rendered as `a` by default.
@@ -44,10 +17,7 @@ require("@itwin/itwinui-css/css/utils.css");
  *   </Surface>
  * </LinkBox>
  */
-exports.LinkAction = React.forwardRef((props, ref) => {
-    const { as: Element = 'a', className, ...rest } = props;
-    return (React.createElement(Element, { ref: ref, className: (0, classnames_1.default)('iui-link-action', className), ...rest }));
-});
+exports.LinkAction = polymorphic_js_1.polymorphic.a('iui-link-action');
 exports.LinkAction.displayName = 'LinkAction';
 /**
  * Polymorphic link box component.
@@ -60,8 +30,5 @@ exports.LinkAction.displayName = 'LinkAction';
  *   </Surface>
  * </LinkBox>
  */
-exports.LinkBox = React.forwardRef((props, ref) => {
-    const { as: Element = 'div', className, ...rest } = props;
-    return (React.createElement(Element, { ref: ref, className: (0, classnames_1.default)('iui-link-box', className), ...rest }));
-});
+exports.LinkBox = polymorphic_js_1.polymorphic.div('iui-link-box');
 exports.LinkBox.displayName = 'LinkBox';

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

@@ -26,7 +26,7 @@ export declare type PopoverProps = {
  * with pre-configured props and plugins (e.g. lazy mounting, focus, etc).
  * @private
  */
-export declare const Popover: React.ForwardRefExoticComponent<Pick<PopoverProps, "disabled" | "theme" | "children" | "className" | "role" | "offset" | "content" | "plugins" | "placement" | "trigger" | "visible" | "render" | "animateFill" | "appendTo" | "aria" | "delay" | "duration" | "followCursor" | "getReferenceClientRect" | "hideOnClick" | "ignoreAttributes" | "inlinePositioning" | "interactive" | "interactiveBorder" | "interactiveDebounce" | "moveTransition" | "popperOptions" | "showOnCreate" | "sticky" | "touch" | "triggerTarget" | "onAfterUpdate" | "onBeforeUpdate" | "onCreate" | "onDestroy" | "onHidden" | "onHide" | "onMount" | "onShow" | "onShown" | "onTrigger" | "onUntrigger" | "onClickOutside" | "allowHTML" | "animation" | "arrow" | "inertia" | "maxWidth" | "zIndex" | "singleton" | "reference"> & React.RefAttributes<unknown>>;
+export declare const Popover: React.ForwardRefExoticComponent<Pick<PopoverProps, "disabled" | "className" | "role" | "offset" | "children" | "content" | "plugins" | "theme" | "placement" | "trigger" | "visible" | "render" | "animateFill" | "appendTo" | "aria" | "delay" | "duration" | "followCursor" | "getReferenceClientRect" | "hideOnClick" | "ignoreAttributes" | "inlinePositioning" | "interactive" | "interactiveBorder" | "interactiveDebounce" | "moveTransition" | "popperOptions" | "showOnCreate" | "sticky" | "touch" | "triggerTarget" | "onAfterUpdate" | "onBeforeUpdate" | "onCreate" | "onDestroy" | "onHidden" | "onHide" | "onMount" | "onShow" | "onShown" | "onTrigger" | "onUntrigger" | "onClickOutside" | "allowHTML" | "animation" | "arrow" | "inertia" | "maxWidth" | "zIndex" | "singleton" | "reference"> & React.RefAttributes<unknown>>;
 /**
  * Plugin to hide Popover when either Esc key is pressed,
  * or when the content inside is not tabbable and Tab key is pressed.

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

@@ -36,7 +36,7 @@ const classnames_1 = __importDefault(require("classnames"));
 const react_1 = __importDefault(require("@tippyjs/react"));
 const index_js_1 = require("../hooks/index.js");
 require("@itwin/itwinui-css/css/utils.css");
-const ThemeProvider_js_1 = require("../../ThemeProvider/ThemeProvider.js");
+const ThemeContext_js_1 = require("../../ThemeProvider/ThemeContext.js");
 /**
  * Wrapper around [tippy.js](https://atomiks.github.io/tippyjs)
  * with pre-configured props and plugins (e.g. lazy mounting, focus, etc).
@@ -45,7 +45,7 @@ const ThemeProvider_js_1 = require("../../ThemeProvider/ThemeProvider.js");
 exports.Popover = React.forwardRef((props, ref) => {
     var _a;
     const [mounted, setMounted] = React.useState(false);
-    const themeInfo = React.useContext(ThemeProvider_js_1.ThemeContext);
+    const themeInfo = React.useContext(ThemeContext_js_1.ThemeContext);
     const isDomAvailable = (0, index_js_1.useIsClient)();
     const tippyRef = React.useRef(null);
     const refs = (0, index_js_1.useMergedRefs)(tippyRef, ref);

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

@@ -1,5 +1,5 @@
 import '@itwin/itwinui-css/css/utils.css';
-import type { PolymorphicComponentProps, PolymorphicForwardRefComponent } from '../props.js';
+import type { PolymorphicForwardRefComponent } from '../props.js';
 declare type VisuallyHiddenOwnProps = {
     /**
      * When VisuallyHidden is used with an interactive element (e.g. button),
@@ -9,7 +9,6 @@ declare type VisuallyHiddenOwnProps = {
      */
     unhideOnFocus?: boolean;
 };
-export declare type VisuallyHiddenProps = PolymorphicComponentProps<'span', VisuallyHiddenOwnProps>;
 /**
  * Hides content visually but keeps it still accessible to screen readers
  * and other assistive technologies.

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

@@ -33,8 +33,8 @@ exports.VisuallyHidden = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const index_js_1 = require("../hooks/index.js");
 require("@itwin/itwinui-css/css/utils.css");
+const Box_js_1 = require("./Box.js");
 /**
  * Hides content visually but keeps it still accessible to screen readers
  * and other assistive technologies.
@@ -46,8 +46,7 @@ require("@itwin/itwinui-css/css/utils.css");
  * @see https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html
  */
 exports.VisuallyHidden = React.forwardRef((props, ref) => {
-    const { as: Element = 'span', className, unhideOnFocus = true, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement(Element, { className: (0, classnames_1.default)('iui-visually-hidden', className), "data-iui-unhide-on-focus": unhideOnFocus ? true : undefined, ref: ref, ...rest }));
+    const { className, unhideOnFocus = true, ...rest } = props;
+    return (React.createElement(Box_js_1.Box, { as: 'span', 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

@@ -12,3 +12,4 @@ export * from './Flex.js';
 export * from './Divider.js';
 export * from './LinkAction.js';
 export * from './AutoclearingHiddenLiveRegion.js';
+export * from './Box.js';

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

@@ -32,3 +32,4 @@ __exportStar(require("./Flex.js"), exports);
 __exportStar(require("./Divider.js"), exports);
 __exportStar(require("./LinkAction.js"), exports);
 __exportStar(require("./AutoclearingHiddenLiveRegion.js"), exports);
+__exportStar(require("./Box.js"), exports);

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

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

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

@@ -25,3 +25,4 @@ __exportStar(require("./numbers.js"), exports);
 __exportStar(require("./focusable.js"), exports);
 __exportStar(require("./styles.js"), exports);
 __exportStar(require("./supports.js"), exports);
+__exportStar(require("./polymorphic.js"), exports);