@itwin/itwinui-react 2.11.5 → 3.0.0-dev.1

package/esm/core/index.d.ts

@@ -1,112 +1,66 @@
 export { Alert } from './Alert/index.js';
-export type { AlertProps } from './Alert/index.js';
 export { Avatar, UserIcon } from './Avatar/index.js';
-export type { AvatarProps, StatusTitles, AvatarStatus, UserIconProps, UserIconStatus, } from './Avatar/index.js';
 export { AvatarGroup, UserIconGroup } from './AvatarGroup/index.js';
-export type { AvatarGroupProps, UserIconGroupProps, } from './AvatarGroup/index.js';
 export { Backdrop } from './Backdrop/index.js';
-export type { BackdropProps } from './Backdrop/index.js';
 export { Badge } from './Badge/index.js';
-export type { BadgeProps } from './Badge/index.js';
 export { Breadcrumbs } from './Breadcrumbs/index.js';
-export type { BreadcrumbsProps } from './Breadcrumbs/index.js';
 export { Button, DropdownButton, IconButton, IdeasButton, SplitButton, } from './Buttons/index.js';
-export type { ButtonProps, DropdownButtonProps, IconButtonProps, IdeasButtonProps, SplitButtonProps, } from './Buttons/index.js';
 export { ButtonGroup } from './ButtonGroup/index.js';
-export type { ButtonGroupProps } from './ButtonGroup/index.js';
 export { Carousel } from './Carousel/index.js';
-export type { CarouselProps } from './Carousel/index.js';
 export { Checkbox } from './Checkbox/index.js';
-export type { CheckboxProps } from './Checkbox/index.js';
 export { ColorPicker, ColorSwatch, ColorBuilder, ColorInputPanel, ColorPalette, } from './ColorPicker/index.js';
-export type { ColorPickerProps, ColorSwatchProps, ColorBuilderProps, ColorInputPanelProps, ColorPaletteProps, } from './ColorPicker/index.js';
 export { ComboBox } from './ComboBox/index.js';
-export type { ComboBoxProps } from './ComboBox/index.js';
 export { DatePicker, generateLocalizedStrings } from './DatePicker/index.js';
-export type { DatePickerProps } from './DatePicker/index.js';
 export { Dialog } from './Dialog/index.js';
-export type { DialogProps, DialogButtonBarProps, DialogContentProps, DialogMainProps, DialogTitleBarProps, } from './Dialog/index.js';
 export { DropdownMenu } from './DropdownMenu/index.js';
-export type { DropdownMenuProps } from './DropdownMenu/index.js';
 export { ErrorPage, NonIdealState } from './NonIdealState/index.js';
-export type { ErrorPageProps, ErrorPageType, ErrorTypeTranslations, NonIdealStateProps, } from './NonIdealState/index.js';
+export type { ErrorPageType, ErrorTypeTranslations, } from './NonIdealState/index.js';
 export { ExpandableBlock } from './ExpandableBlock/index.js';
-export type { ExpandableBlockProps } from './ExpandableBlock/index.js';
 export { Fieldset } from './Fieldset/index.js';
-export type { FieldsetProps } from './Fieldset/index.js';
 export { FileUpload, FileUploadTemplate, FileUploadCard, FileEmptyCard, } from './FileUpload/index.js';
-export type { FileUploadProps, FileUploadTemplateProps, FileUploadCardProps, FileUploadCardIconProps, FileUploadCardInfoProps, FileUploadCardTitleProps, FileUploadCardDescriptionProps, FileUploadCardActionProps, FileUploadCardInputLabelProps, FileUploadCardInputProps, FileEmptyCardProps, FileEmptyCardIconProps, FileEmptyCardTextProps, } from './FileUpload/index.js';
 export { Footer, defaultFooterElements } from './Footer/index.js';
-export type { FooterProps, FooterElement, TitleTranslations, } from './Footer/index.js';
+export type { FooterElement, TitleTranslations } from './Footer/index.js';
 export { Header, HeaderBreadcrumbs, HeaderButton, HeaderLogo, } from './Header/index.js';
-export type { HeaderProps, HeaderBreadcrumbsProps, HeaderButtonProps, HeaderLogoProps, } from './Header/index.js';
 export { List, ListItem } from './List/index.js';
-export type { ListProps, ListItemProps, ListItemIconProps, ListItemContentProps, ListItemDescriptionProps, } from './List/index.js';
+export { TransferList } from './TransferList/index.js';
 export { VerticalTabs, Tabs, Tab, HorizontalTabs } from './Tabs/index.js';
-export type { VerticalTabsProps, TabProps, HorizontalTabsProps, } from './Tabs/index.js';
 export { InformationPanel, InformationPanelWrapper, InformationPanelHeader, InformationPanelBody, InformationPanelContent, } from './InformationPanel/index.js';
-export type { InformationPanelProps, InformationPanelWrapperProps, InformationPanelHeaderProps, InformationPanelBodyProps, InformationPanelContentProps, } from './InformationPanel/index.js';
 export { Input } from './Input/index.js';
-export type { InputProps } from './Input/index.js';
 export { Label } from './Label/index.js';
-export type { LabelProps } from './Label/index.js';
 export { LabeledInput } from './LabeledInput/index.js';
-export type { LabeledInputProps } from './LabeledInput/index.js';
 export { InputGroup } from './InputGroup/index.js';
-export type { InputGroupProps } from './InputGroup/index.js';
 export { LabeledSelect } from './LabeledSelect/index.js';
-export type { LabeledSelectProps } from './LabeledSelect/index.js';
 export { LabeledTextarea } from './LabeledTextarea/index.js';
-export type { LabeledTextareaProps } from './LabeledTextarea/index.js';
 export { Menu, MenuItem, MenuDivider, MenuExtraContent, MenuItemSkeleton, } from './Menu/index.js';
-export type { MenuProps, MenuItemProps, MenuDividerProps, MenuExtraContentProps, MenuItemSkeletonProps, } from './Menu/index.js';
 export { Modal, ModalButtonBar, ModalContent } from './Modal/index.js';
-export type { ModalProps, ModalButtonBarProps, ModalContentProps, } from './Modal/index.js';
 export { NotificationMarker } from './NotificationMarker/index.js';
-export type { NotificationMarkerProps } from './NotificationMarker/index.js';
 export { ProgressLinear, ProgressRadial } from './ProgressIndicators/index.js';
-export type { ProgressLinearProps, ProgressRadialProps, } from './ProgressIndicators/index.js';
 export { Radio } from './Radio/index.js';
-export type { RadioProps } from './Radio/index.js';
 export { RadioTile, RadioTileGroup } from './RadioTiles/index.js';
-export type { RadioTileGroupProps, RadioTileProps, } from './RadioTiles/index.js';
 export { Select } from './Select/index.js';
-export type { SelectProps, SelectOption, ItemRendererProps, SelectValueChangeEvent, } from './Select/index.js';
+export type { SelectOption, ItemRendererProps, SelectValueChangeEvent, } from './Select/index.js';
 export { SideNavigation, SidenavButton, SidenavSubmenu, SidenavSubmenuHeader, } from './SideNavigation/index.js';
-export type { SideNavigationProps, SidenavButtonProps, SidenavSubmenuProps, SidenavSubmenuHeaderProps, } from './SideNavigation/index.js';
 export { SkipToContentLink } from './SkipToContentLink/index.js';
-export type { SkipToContentLinkProps } from './SkipToContentLink/index.js';
 export { Slider } from './Slider/index.js';
-export type { SliderProps } from './Slider/index.js';
 export { StatusMessage } from './StatusMessage/index.js';
-export type { StatusMessageProps } from './StatusMessage/index.js';
 export { Surface } from './Surface/index.js';
-export type { SurfaceProps, SurfaceHeaderProps, SurfaceBodyProps, } from './Surface/index.js';
 export { Table, tableFilters, BaseFilter, FilterButtonBar, DefaultCell, EditableCell, TablePaginator, ActionColumn, ExpanderColumn, SelectionColumn, } from './Table/index.js';
-export type { TableProps, TableFilterProps, TableFilterValue, DateRangeFilterOptions, FilterButtonBarProps, DefaultCellProps, EditableCellProps, TablePaginatorProps, TablePaginatorRendererProps, } from './Table/index.js';
+export type { TableFilterValue, DateRangeFilterOptions, TablePaginatorRendererProps, } from './Table/index.js';
 export { Tag, TagContainer } from './Tag/index.js';
-export type { TagProps, TagContainerProps } from './Tag/index.js';
 export { Textarea } from './Textarea/index.js';
-export type { TextareaProps } from './Textarea/index.js';
 export { Tile } from './Tile/index.js';
-export type { TileProps } from './Tile/index.js';
 export { TimePicker } from './TimePicker/index.js';
-export type { MeridiemType, TimePickerProps } from './TimePicker/index.js';
+export type { MeridiemType } from './TimePicker/index.js';
 export { default as toaster } from './Toast/index.js';
 export type { ToastOptions } from './Toast/index.js';
 export { ThemeProvider } from './ThemeProvider/index.js';
-export type { ThemeProviderProps } from './ThemeProvider/index.js';
+export type { ThemeType } from './ThemeProvider/index.js';
 export { ToggleSwitch } from './ToggleSwitch/index.js';
-export type { ToggleSwitchProps } from './ToggleSwitch/index.js';
 export { Tooltip } from './Tooltip/index.js';
-export type { TooltipProps } from './Tooltip/index.js';
 export { Tree, TreeNode, TreeNodeExpander } from './Tree/index.js';
-export type { TreeProps, TreeNodeProps, TreeNodeExpanderProps, NodeData, NodeRenderProps, } from './Tree/index.js';
-export { Anchor, Body, Headline, Leading, Small, Subheading, Title, Blockquote, Code, Kbd, KbdKeys, Text, } from './Typography/index.js';
-export type { AnchorProps, BodyProps, HeadlineProps, LeadingProps, SmallProps, SubheadingProps, TitleProps, BlockquoteProps, CodeProps, KbdProps, TextProps, } from './Typography/index.js';
+export type { NodeData, NodeRenderProps } from './Tree/index.js';
+export { Anchor, Blockquote, Code, Kbd, KbdKeys, Text, } from './Typography/index.js';
 export { Wizard, Stepper, WorkflowDiagram } from './Stepper/index.js';
-export type { WizardProps, StepProperties, WizardType, WizardLocalization, StepperProps, StepperLocalization, WorkflowDiagramProps, } from './Stepper/index.js';
+export type { StepProperties, WizardType, WizardLocalization, StepperLocalization, } from './Stepper/index.js';
 export { SearchBox } from './SearchBox/index.js';
-export type { SearchBoxProps } from './SearchBox/index.js';
-export { getUserColor, useTheme, ColorValue, MiddleTextTruncation, LinkBox, LinkAction, Icon, Flex, VisuallyHidden, Divider, } from './utils/index.js';
-export type { ThemeType, MiddleTextTruncationProps, IconProps, FlexProps, FlexItemProps, FlexSpacerProps, DividerProps, LinkBoxProps, LinkActionProps, VisuallyHiddenProps, } from './utils/index.js';
+export { getUserColor, ColorValue, MiddleTextTruncation, LinkBox, LinkAction, Icon, Flex, VisuallyHidden, Divider, } from './utils/index.js';

package/esm/core/index.js

@@ -24,6 +24,7 @@ export { FileUpload, FileUploadTemplate, FileUploadCard, FileEmptyCard, } from '
 export { Footer, defaultFooterElements } from './Footer/index.js';
 export { Header, HeaderBreadcrumbs, HeaderButton, HeaderLogo, } from './Header/index.js';
 export { List, ListItem } from './List/index.js';
+export { TransferList } from './TransferList/index.js';
 export { VerticalTabs, Tabs, Tab, HorizontalTabs } from './Tabs/index.js';
 export { InformationPanel, InformationPanelWrapper, InformationPanelHeader, InformationPanelBody, InformationPanelContent, } from './InformationPanel/index.js';
 export { Input } from './Input/index.js';
@@ -54,7 +55,7 @@ export { ThemeProvider } from './ThemeProvider/index.js';
 export { ToggleSwitch } from './ToggleSwitch/index.js';
 export { Tooltip } from './Tooltip/index.js';
 export { Tree, TreeNode, TreeNodeExpander } from './Tree/index.js';
-export { Anchor, Body, Headline, Leading, Small, Subheading, Title, Blockquote, Code, Kbd, KbdKeys, Text, } from './Typography/index.js';
+export { Anchor, Blockquote, Code, Kbd, KbdKeys, Text, } from './Typography/index.js';
 export { Wizard, Stepper, WorkflowDiagram } from './Stepper/index.js';
 export { SearchBox } from './SearchBox/index.js';
-export { getUserColor, useTheme, ColorValue, MiddleTextTruncation, LinkBox, LinkAction, Icon, Flex, VisuallyHidden, Divider, } from './utils/index.js';
+export { getUserColor, ColorValue, MiddleTextTruncation, LinkBox, LinkAction, Icon, Flex, VisuallyHidden, Divider, } from './utils/index.js';

package/esm/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/esm/core/utils/components/Box.js

@@ -0,0 +1,11 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import { polymorphic } from '../functions/polymorphic.js';
+/**
+ * Polymorphic component that renders a div element by default.
+ * Intended to be used as a base for other components.
+ * @private
+ */
+export const Box = polymorphic.div('');

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

@@ -1,14 +1,13 @@
-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/esm/core/utils/components/Divider.js

@@ -4,14 +4,12 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useTheme } from '../hooks/index.js';
-import '@itwin/itwinui-css/css/utils.css';
+import { Box } from './Box.js';
 /**
  * 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 }));
+    return (React.createElement(Box, { as: 'hr', className: cx('iui-divider', className), "aria-orientation": orientation === 'vertical' ? 'vertical' : undefined, ref: ref, ...rest }));
 });
 export default Divider;

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import type { AnyString } from '../types.js';
-import type { PolymorphicComponentProps, PolymorphicForwardRefComponent } from '../props.js';
-import '@itwin/itwinui-css/css/utils.css';
+import type { PolymorphicForwardRefComponent } from '../props.js';
 declare const sizeTokens: readonly ["3xs", "2xs", "xs", "s", "m", "l", "xl", "2xl", "3xl"];
 /**
  * String literal shorthands that correspond to the size tokens in [itwinui-variables](https://github.com/iTwin/iTwinUI/blob/main/packages/itwinui-variables/src/sizes.scss).
@@ -136,7 +135,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/esm/core/utils/components/Flex.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import '@itwin/itwinui-css/css/utils.css';
+import { Box } from './Box.js';
 const sizeTokens = [
     '3xs',
     '2xs',
@@ -25,8 +25,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: cx('iui-flex', className), style: {
+    const { display, flexDirection, justifyContent, alignItems, gap, flexWrap, className, style, ...rest } = props;
+    return (React.createElement(Box, { className: cx('iui-flex', className), style: {
             '--iui-flex-display': display,
             '--iui-flex-direction': flexDirection,
             '--iui-flex-justify': justifyContent,
@@ -36,16 +36,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: cx('iui-flex-spacer', className), style: { '--iui-flex-spacer-flex': flex, ...style }, ref: ref, ...rest }));
+    const { flex, className, style, ...rest } = props;
+    return (React.createElement(Box, { className: cx('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,
@@ -59,8 +61,9 @@ const FlexItem = React.forwardRef((props, ref) => {
         }),
         ...style,
     };
-    return (React.createElement(Element, { className: cx('iui-flex-item', className), ref: ref, style: _style, ...rest }));
+    return (React.createElement(Box, { className: cx('iui-flex-item', className), ref: ref, style: _style, ...rest }));
 });
+FlexItem.displayName = 'Flex.Item';
 // ----------------------------------------------------------------------------
 // Exported compound component
 /**

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

@@ -1,6 +1,6 @@
 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 +39,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/esm/core/utils/components/Icon.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import '@itwin/itwinui-css/css/utils.css';
+import { Box } from './Box.js';
 const getSizeValue = (size) => {
     switch (size) {
         case 'small':
@@ -33,6 +33,6 @@ const getSizeValue = (size) => {
  */
 export const Icon = React.forwardRef((props, ref) => {
     const { size = 'medium', fill = 'default', className, ...rest } = props;
-    return (React.createElement("span", { className: cx('iui-svg-icon', className), "data-iui-icon-size": getSizeValue(size), "data-iui-icon-color": fill, ref: ref, ...rest }));
+    return (React.createElement(Box, { as: 'span', className: cx('iui-svg-icon', className), "data-iui-icon-size": getSizeValue(size), "data-iui-icon-color": fill, ref: ref, ...rest }));
 });
 export default Icon;

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/utils.css';
 export declare type InputContainerProps<T extends React.ElementType = 'div'> = {
     as?: T;
     label?: React.ReactNode;

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

@@ -4,30 +4,25 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import '@itwin/itwinui-css/css/utils.css';
+import { Box } from './Box.js';
 /**
  * Input container to wrap inputs with label, and add optional message and icon.
  * @private
  */
 export 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: cx('iui-input-container', {
+    const { label, disabled, required, status, message, icon, isLabelInline, isIconInline, children, className, style, statusMessage, inputId, labelId, ...rest } = props;
+    return (React.createElement(Box, { className: cx('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: cx('iui-label', {
+        label && (React.createElement(Box, { as: inputId && props.as !== 'label' ? 'label' : 'div', className: cx('iui-label', {
                 'iui-required': required,
             }), htmlFor: inputId, id: labelId }, label)),
         children,
         statusMessage ? (statusMessage) : (React.createElement(React.Fragment, null,
-            icon &&
-                React.cloneElement(icon, {
-                    className: cx('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, { as: 'span', className: 'iui-input-icon', "aria-hidden": true }, icon)),
+            message && !isLabelInline && (React.createElement(Box, { className: 'iui-message' }, message))))));
 };

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

@@ -1,6 +1,5 @@
-import type { PolymorphicComponentProps, PolymorphicForwardRefComponent } from '../props.js';
-import '@itwin/itwinui-css/css/input-container.css';
-declare type InputFlexContainerOwnProps = {
+import type { PolymorphicForwardRefComponent } from '../props.js';
+export declare type InputFlexContainerProps = {
     isDisabled?: boolean;
     status?: 'positive' | 'warning' | 'negative';
 };
@@ -8,6 +7,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/esm/core/utils/components/InputFlexContainer.js

@@ -4,12 +4,12 @@
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import cx from 'classnames';
-import '@itwin/itwinui-css/css/input-container.css';
+import { Box } from './Box.js';
 /**
  * Utility component for input container with display flex abilities.
  * @private
  */
 export const InputFlexContainer = React.forwardRef((props, ref) => {
-    const { as: Element = 'div', isDisabled, status, children, className, style, ...rest } = props;
-    return (React.createElement(Element, { className: cx('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.createElement(Box, { className: cx('iui-input-flex-container', className), "data-iui-status": status, "data-iui-disabled": isDisabled ? 'true' : undefined, ref: ref, style: style, ...rest }, children));
 });

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

@@ -1,9 +1,3 @@
-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 +8,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 +20,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/esm/core/utils/components/LinkAction.js

@@ -2,9 +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 cx from 'classnames';
-import '@itwin/itwinui-css/css/utils.css';
+import { polymorphic } from '../functions/polymorphic.js';
 /**
  * Polymorphic link action component.
  * It is rendered as `a` by default.
@@ -15,10 +13,7 @@ import '@itwin/itwinui-css/css/utils.css';
  *   </Surface>
  * </LinkBox>
  */
-export const LinkAction = React.forwardRef((props, ref) => {
-    const { as: Element = 'a', className, ...rest } = props;
-    return (React.createElement(Element, { ref: ref, className: cx('iui-link-action', className), ...rest }));
-});
+export const LinkAction = polymorphic.a('iui-link-action');
 LinkAction.displayName = 'LinkAction';
 /**
  * Polymorphic link box component.
@@ -31,8 +26,5 @@ LinkAction.displayName = 'LinkAction';
  *   </Surface>
  * </LinkBox>
  */
-export const LinkBox = React.forwardRef((props, ref) => {
-    const { as: Element = 'div', className, ...rest } = props;
-    return (React.createElement(Element, { ref: ref, className: cx('iui-link-box', className), ...rest }));
-});
+export const LinkBox = polymorphic.div('iui-link-box');
 LinkBox.displayName = 'LinkBox';

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

@@ -2,7 +2,6 @@ import * as React from 'react';
 import type { TippyProps } from '@tippyjs/react';
 import type { Placement, Instance } from 'tippy.js';
 export declare type PopoverInstance = Instance;
-import '@itwin/itwinui-css/css/utils.css';
 export declare type PopoverProps = {
     /**
      * Controlled flag for whether the popover is visible.
@@ -26,7 +25,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/esm/core/utils/components/Popover.js

@@ -6,8 +6,7 @@ import * as React from 'react';
 import cx from 'classnames';
 import Tippy from '@tippyjs/react';
 import { useMergedRefs, useIsClient } from '../hooks/index.js';
-import '@itwin/itwinui-css/css/utils.css';
-import { ThemeContext } from '../../ThemeProvider/ThemeProvider.js';
+import { ThemeContext } from '../../ThemeProvider/ThemeContext.js';
 /**
  * Wrapper around [tippy.js](https://atomiks.github.io/tippyjs)
  * with pre-configured props and plugins (e.g. lazy mounting, focus, etc).

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

@@ -1,5 +1,4 @@
-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 +8,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/esm/core/utils/components/VisuallyHidden.js

@@ -4,8 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useTheme } from '../hooks/index.js';
-import '@itwin/itwinui-css/css/utils.css';
+import { Box } from './Box.js';
 /**
  * Hides content visually but keeps it still accessible to screen readers
  * and other assistive technologies.
@@ -17,8 +16,7 @@ import '@itwin/itwinui-css/css/utils.css';
  * @see https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html
  */
 export const VisuallyHidden = React.forwardRef((props, ref) => {
-    const { as: Element = 'span', className, unhideOnFocus = true, ...rest } = props;
-    useTheme();
-    return (React.createElement(Element, { className: cx('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, { as: 'span', 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

@@ -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/esm/core/utils/components/index.js

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

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

@@ -22,3 +22,9 @@ export declare const getWindow: () => (Window & typeof globalThis) | undefined;
  * `defaultPrevented` is respected for each callback.
  */
 export declare const mergeEventHandlers: <E extends import("react").SyntheticEvent<Element, Event>>(...callbacks: (((event: E) => void) | undefined)[]) => (event: E) => void;
+/**
+ * Returns translate values as an array of a given element.
+ * @param element HTML element you want to get translate value of
+ * @returns Translate values in pixels in an array `[translateX, translateY]`
+ */
+export declare const getTranslateValues: (element: HTMLElement | null | undefined) => number[];

package/esm/core/utils/functions/dom.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 styles from '../../../styles.js';
 /**
  * Get the container as a child of body, or create one if it doesn't exist.
  * Mostly used for dynamic components like Modal or Toast.
@@ -15,7 +16,7 @@ export const getContainer = (containerId, ownerDocument = getDocument()) => {
     if (container == null && !!ownerDocument) {
         container = ownerDocument.createElement('div');
         container.setAttribute('id', containerId);
-        const root = (_b = ownerDocument.querySelector('.iui-root')) !== null && _b !== void 0 ? _b : ownerDocument.body;
+        const root = (_b = ownerDocument.querySelector(`.${styles['iui-root']}`)) !== null && _b !== void 0 ? _b : ownerDocument.body;
         root.appendChild(container);
     }
     return container;
@@ -46,3 +47,16 @@ export const mergeEventHandlers = (...callbacks) => (event) => {
         }
     }
 };
+/**
+ * Returns translate values as an array of a given element.
+ * @param element HTML element you want to get translate value of
+ * @returns Translate values in pixels in an array `[translateX, translateY]`
+ */
+export const getTranslateValues = (element) => {
+    if (!element) {
+        return [];
+    }
+    const transformValue = getComputedStyle(element).getPropertyValue('transform');
+    const matrix = new DOMMatrix(transformValue);
+    return [matrix.m41, matrix.m42];
+};

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

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

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

@@ -7,5 +7,5 @@ export * from './dom.js';
 export * from './colors.js';
 export * from './numbers.js';
 export * from './focusable.js';
-export * from './styles.js';
 export * from './supports.js';
+export * from './polymorphic.js';