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

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

@@ -33,7 +33,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 +54,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 +65,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 +90,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,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/cjs/core/utils/components/Icon.js

@@ -33,7 +33,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 +62,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.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/cjs/core/utils/components/InputContainer.js

@@ -33,31 +33,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,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/cjs/core/utils/components/InputFlexContainer.js

@@ -10,12 +10,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,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/cjs/core/utils/components/LinkAction.js

@@ -1,39 +1,11 @@
 "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 +16,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 +29,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

@@ -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/cjs/core/utils/components/Popover.js

@@ -35,8 +35,7 @@ const React = __importStar(require("react"));
 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 +44,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,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/cjs/core/utils/components/VisuallyHidden.js

@@ -33,8 +33,7 @@ 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 +45,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/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/cjs/core/utils/functions/dom.js

@@ -3,8 +3,12 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.mergeEventHandlers = exports.getWindow = exports.getDocument = exports.getContainer = void 0;
+exports.getTranslateValues = exports.mergeEventHandlers = exports.getWindow = exports.getDocument = exports.getContainer = void 0;
+const styles_js_1 = __importDefault(require("../../../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.
@@ -18,7 +22,7 @@ const getContainer = (containerId, ownerDocument = (0, exports.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_js_1.default['iui-root']}`)) !== null && _b !== void 0 ? _b : ownerDocument.body;
         root.appendChild(container);
     }
     return container;
@@ -53,3 +57,17 @@ const mergeEventHandlers = (...callbacks) => (event) => {
     }
 };
 exports.mergeEventHandlers = mergeEventHandlers;
+/**
+ * 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]`
+ */
+const getTranslateValues = (element) => {
+    if (!element) {
+        return [];
+    }
+    const transformValue = getComputedStyle(element).getPropertyValue('transform');
+    const matrix = new DOMMatrix(transformValue);
+    return [matrix.m41, matrix.m42];
+};
+exports.getTranslateValues = getTranslateValues;

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

@@ -23,5 +23,5 @@ __exportStar(require("./dom.js"), exports);
 __exportStar(require("./colors.js"), exports);
 __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);