reshaped 3.9.1-canary.3 → 3.10.0-canary.4

package/dist/components/Slider/SliderControlled.js

@@ -1,15 +1,14 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
+import { disableScroll, enableScroll } from "@reshaped/utilities/internal";
 import React from "react";
 import { useFormControl } from "../FormControl/index.js";
 import useElementId from "../../hooks/useElementId.js";
 import useHandlerRef from "../../hooks/useHandlerRef.js";
 import useRTL from "../../hooks/useRTL.js";
-import { triggerChangeEvent } from "../../utilities/dom/index.js";
-import { classNames } from "../../utilities/props.js";
-import { disableScroll, enableScroll } from "../../utilities/scroll/index.js";
 import s from "./Slider.module.css";
-import { applyStepToValue, getDragCoord } from "./Slider.utilities.js";
+import { applyStepToValue, getDragCoord, triggerChangeEvent } from "./Slider.utilities.js";
 import SliderThumb from "./SliderThumb.js";
 const THUMB_SIZE = 16;
 const SliderControlled = (props) => {
@@ -93,13 +92,18 @@ const SliderControlled = (props) => {
         // @ts-ignore
         if (options.commit)
             onChangeCommitRef.current?.(args);
+        // Keyboard changes should commit immediately
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        if (options.native && !draggingId)
+            onChangeCommitRef.current?.(args);
         // Manually controlled resolving of single/range handlers
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         if (options.native)
             onChangeRef.current?.(args);
         triggerChangeEvent(minInputRef.current, value.toString());
-    }, [maxValue, name, minName, maxName, range, onChangeCommitRef, onChangeRef]);
+    }, [range, maxValue, name, minName, maxName, draggingId, onChangeCommitRef, onChangeRef]);
     const handleMaxChange = React.useCallback((value, options = {}) => {
         const args = range
             ? { minValue: minValue, maxValue: value, name, minName, maxName }
@@ -109,13 +113,18 @@ const SliderControlled = (props) => {
         // @ts-ignore
         if (options.commit)
             onChangeCommitRef.current?.(args);
+        // Keyboard changes should commit immediately
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        if (options.native && !draggingId)
+            onChangeCommitRef.current?.(args);
         // Manually controlled resolving of single/range handlers
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         if (options.native)
             onChangeRef.current?.(args);
         triggerChangeEvent(maxInputRef.current, value.toString());
-    }, [minValue, name, minName, maxName, range, onChangeRef, onChangeCommitRef]);
+    }, [range, minValue, name, minName, maxName, onChangeCommitRef, draggingId, onChangeRef]);
     const handleMouseDown = ({ nativeEvent }) => {
         if (disabled)
             return;

package/dist/components/Slider/SliderThumb.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
 import React from "react";
 import Text from "../Text/index.js";
 import Theme from "../Theme/index.js";
-import { classNames } from "../../utilities/props.js";
 import s from "./Slider.module.css";
 import { getPrecision } from "./Slider.utilities.js";
 const SliderThumb = React.forwardRef((props, ref) => {

package/dist/components/Switch/Switch.js

@@ -1,9 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
 import { useFormControl } from "../FormControl/index.js";
 import Text from "../Text/index.js";
 import useElementId from "../../hooks/useElementId.js";
-import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
+import { responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
 import s from "./Switch.module.css";
 const Switch = (props) => {
     const { children, name, checked, size = "medium", reversed, defaultChecked, onChange, onFocus, onBlur, className, attributes, } = props;

package/dist/components/Table/Table.js

@@ -1,9 +1,10 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
 import React, { isValidElement } from "react";
 import useFadeSide from "../../hooks/_private/useFadeSide.js";
 import { resolveMixin } from "../../styles/mixin.js";
-import { classNames, responsiveVariables } from "../../utilities/props.js";
+import { responsiveVariables } from "../../utilities/props.js";
 import s from "./Table.module.css";
 const TableCellPrivate = (props) => {
     const { minWidth, rowSpan, colSpan, align, verticalAlign, tagName: TagName, padding, paddingInline, paddingBlock, children, className, attributes, } = props;

package/dist/components/Tabs/TabsItem.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
+import { findParent } from "@reshaped/utilities/internal";
 import React from "react";
 import Actionable from "../Actionable/index.js";
 import HiddenInput from "../HiddenInput/index.js";
 import Icon from "../Icon/index.js";
 import Text from "../Text/index.js";
 import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
-import { findParent } from "../../utilities/dom/index.js";
-import { classNames } from "../../utilities/props.js";
 import s from "./Tabs.module.css";
 import { useTabs } from "./TabsContext.js";
 const TabsItem = React.forwardRef((props, ref) => {

package/dist/components/Tabs/TabsList.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
 import React from "react";
 import Actionable from "../Actionable/index.js";
 import Icon from "../Icon/index.js";
@@ -9,7 +10,6 @@ import useKeyboardArrowNavigation from "../../hooks/useKeyboardArrowNavigation.j
 import useRTL from "../../hooks/useRTL.js";
 import IconChevronLeft from "../../icons/ChevronLeft.js";
 import IconChevronRight from "../../icons/ChevronRight.js";
-import { classNames } from "../../utilities/props.js";
 import s from "./Tabs.module.css";
 import { useTabs } from "./TabsContext.js";
 import TabsItem from "./TabsItem.js";

package/dist/components/Tabs/TabsPanel.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
+import { getFocusableElements } from "@reshaped/utilities/internal";
 import React from "react";
-import { getFocusableElements } from "../../utilities/a11y/index.js";
-import { classNames } from "../../utilities/props.js";
 import s from "./Tabs.module.css";
 import { useTabs } from "./TabsContext.js";
 const TabsPanel = (props) => {

package/dist/components/Text/Text.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
 import { resolveMixin } from "../../styles/mixin.js";
-import { classNames, responsiveClassNames } from "../../utilities/props.js";
+import { responsiveClassNames } from "../../utilities/props.js";
 import s from "./Text.module.css";
 const tagMap = {
     "title-1": "h1",

package/dist/components/TextArea/TextArea.js

@@ -1,9 +1,10 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
 import React from "react";
 import { useFormControl } from "../FormControl/index.js";
 import useElementId from "../../hooks/useElementId.js";
-import { classNames, responsiveClassNames } from "../../utilities/props.js";
+import { responsiveClassNames } from "../../utilities/props.js";
 import s from "./TextArea.module.css";
 const TextArea = (props) => {
     const { onChange, onFocus, onBlur, name, value, defaultValue, placeholder, size = "medium", variant = "outline", resize, className, attributes, } = props;

package/dist/components/TextField/TextField.js

@@ -1,10 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
 import React from "react";
 import { useFormControl } from "../FormControl/index.js";
 import Icon from "../Icon/index.js";
 import useElementId from "../../hooks/useElementId.js";
-import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
+import { responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
 import s from "./TextField.module.css";
 const TextFieldSlot = (props) => {
     const { slot, icon, size, affix, position, id } = props;

package/dist/components/Theme/Theme.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
 import React from "react";
 import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
-import { classNames } from "../../utilities/props.js";
 import { ThemeContext } from "./Theme.context.js";
 import s from "./Theme.module.css";
 import { getRootThemeEl } from "./Theme.utilities.js";

package/dist/components/Timeline/Timeline.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
 import React, { isValidElement } from "react";
 import View from "../View/index.js";
-import { classNames } from "../../utilities/props.js";
 import s from "./Timeline.module.css";
 export const TimelineItem = (props) => {
     const { children, markerSlot, className, attributes } = props;

package/dist/components/Toast/ToastContainer.js

@@ -1,9 +1,10 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { TrapFocus } from "@reshaped/utilities";
+import { classNames } from "@reshaped/utilities";
+import { checkKeyboardMode } from "@reshaped/utilities/internal";
 import React from "react";
-import { checkKeyboardMode, TrapFocus } from "../../utilities/a11y/index.js";
 import { onNextFrame } from "../../utilities/animation.js";
-import { classNames } from "../../utilities/props.js";
 import Toast from "./Toast.js";
 import { timeouts } from "./Toast.constants.js";
 import ToastContext from "./Toast.context.js";

package/dist/components/Toast/ToastRegion.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
+import { focusableSelector } from "@reshaped/utilities/internal";
 import React from "react";
-import { focusableSelector } from "../../utilities/a11y/index.js";
-import { classNames } from "../../utilities/props.js";
 import ToastContext from "./Toast.context.js";
 import s from "./Toast.module.css";
 import ToastContainer from "./ToastContainer.js";

package/dist/components/View/View.js

@@ -1,10 +1,11 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
 import React, { isValidElement } from "react";
 import Divider from "../Divider/index.js";
 import Hidden from "../Hidden/index.js";
 import { resolveMixin } from "../../styles/mixin.js";
-import { classNames, responsiveClassNames, responsiveVariables } from "../../utilities/props.js";
+import { responsiveClassNames, responsiveVariables } from "../../utilities/props.js";
 import s from "./View.module.css";
 export const ViewItem = (props) => {
     const { columns, grow, shrink, gapBefore, 

package/dist/components/_private/Aligner/Aligner.js

@@ -7,7 +7,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * It relies on using a data-rs-aligner-target attribute in other components and works based
  * on the --rs-p, --rs-p-v and --rs-p-h css variables
  */
-import { classNames } from "../../../utilities/props.js";
+import { classNames } from "@reshaped/utilities";
 import s from "./Aligner.module.css";
 const Aligner = (props) => {
     const { side: passedSide = "all", children, className, attributes } = props;

package/dist/components/_private/Expandable/Expandable.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
 import React from "react";
 import useIsomorphicLayoutEffect from "../../../hooks/useIsomorphicLayoutEffect.js";
 import { onNextFrame } from "../../../utilities/animation.js";
-import { classNames } from "../../../utilities/props.js";
 import s from "./Expandable.module.css";
 const Expandable = (props) => {
     const { children, active, attributes } = props;

package/dist/core/Actionable/Actionable.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
 import { forwardRef } from "react";
 import * as keys from "../../constants/keys.js";
-import { classNames } from "../../utilities/props.js";
 const Actionable = forwardRef((props, ref) => {
     const { children, render, href, onClick, type, disabled, as, stopPropagation, className, attributes, } = props;
     const rootAttributes = { ...attributes };

package/dist/hooks/_private/useDrag.js

@@ -1,10 +1,10 @@
 "use client";
+import { disableScroll, enableScroll } from "@reshaped/utilities/internal";
 import React from "react";
 import * as keys from "../../constants/keys.js";
 import useHandlerRef from "../useHandlerRef.js";
 import useHotkeys from "../useHotkeys.js";
 import useToggle from "../useToggle.js";
-import { disableScroll, enableScroll } from "../../utilities/scroll/index.js";
 const useDrag = (cb, options) => {
     const { disabled, containerRef: passedContainerRef, orientation = "all" } = options || {};
     const cbRef = useHandlerRef(cb);

package/dist/hooks/_private/useFadeSide.js

@@ -1,8 +1,8 @@
 "use client";
+import { rafThrottle } from "@reshaped/utilities/internal";
 import React from "react";
 import useIsomorphicLayoutEffect from "../useIsomorphicLayoutEffect.js";
 import useRTL from "../useRTL.js";
-import { rafThrottle } from "../../utilities/helpers.js";
 const useFadeSide = (scrollableRef, options = {}) => {
     const { disabled } = options;
     const [rtl] = useRTL();

package/dist/hooks/_private/useSingletonKeyboardMode.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { activateKeyboardMode, deactivateKeyboardMode } from "@reshaped/utilities/internal";
 import React from "react";
 import * as keys from "../../constants/keys.js";
-import { activateKeyboardMode, deactivateKeyboardMode } from "../../utilities/a11y/index.js";
 export const SingletonKeyboardModeContext = React.createContext({
     disabledRef: null,
     disable: () => { },

package/dist/hooks/useKeyboardArrowNavigation.js

@@ -1,5 +1,5 @@
+import { focusFirstElement, focusLastElement, focusNextElement, focusPreviousElement, getFocusableElements, } from "@reshaped/utilities/internal";
 import React, { useEffect } from "react";
-import { focusFirstElement, focusLastElement, focusNextElement, focusPreviousElement, getFocusableElements, } from "../utilities/a11y/index.js";
 import useHotkeys from "./useHotkeys.js";
 const useKeyboardArrowNavigation = (props) => {
     const { ref, disabled, orientation, circular } = props;

package/dist/hooks/useScrollLock.js

@@ -1,6 +1,6 @@
 "use client";
+import { lockScroll } from "@reshaped/utilities";
 import React from "react";
-import { lockScroll } from "../utilities/scroll/index.js";
 const useScrollLock = (options) => {
     const { containerRef, originRef } = options || {};
     const [locked, setLocked] = React.useState(false);
@@ -9,11 +9,11 @@ const useScrollLock = (options) => {
         unlockScrollRef.current = lockScroll({
             containerEl: containerRef?.current,
             originEl: originRef?.current,
-            cb: () => setLocked(true),
+            callback: () => setLocked(true),
         });
     }, [containerRef, originRef]);
     const handleUnlockScroll = React.useCallback(() => {
-        unlockScrollRef.current?.(() => setLocked(false));
+        unlockScrollRef.current?.({ callback: () => setLocked(false) });
         unlockScrollRef.current = null;
     }, []);
     return React.useMemo(() => ({

package/dist/index.d.ts

@@ -146,8 +146,8 @@ export { default as useToggle } from "./hooks/useToggle";
 /**
  * Utility functions
  */
-export { classNames, responsivePropDependency } from "./utilities/props";
-export { TrapFocus } from "./utilities/a11y";
+export { responsivePropDependency } from "./utilities/props";
+export { TrapFocus, classNames } from "@reshaped/utilities";
 /**
  * Types
  */

package/dist/index.js

@@ -84,8 +84,8 @@ export { default as useToggle } from "./hooks/useToggle.js";
 /**
  * Utility functions
  */
-export { classNames, responsivePropDependency } from "./utilities/props.js";
-export { TrapFocus } from "./utilities/a11y/index.js";
+export { responsivePropDependency } from "./utilities/props.js";
+export { TrapFocus, classNames } from "@reshaped/utilities";
 /**
  * Dev utilities
  */

package/dist/utilities/helpers.d.ts

@@ -1,3 +1,2 @@
 export declare const sleep: (milliseconds: number) => Promise<unknown>;
 export declare const range: (start: number, end: number) => number[];
-export declare const rafThrottle: <T extends (...args: any[]) => void>(fn: T) => T;

package/dist/utilities/helpers.js

@@ -6,17 +6,3 @@ export const range = (start, end) => {
         return [];
     return Array.from({ length: end - start + 1 }, (_, i) => start + i);
 };
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const rafThrottle = (fn) => {
-    let rafId = null;
-    let args = null;
-    return function (...newArgs) {
-        args = newArgs;
-        if (rafId === null) {
-            rafId = requestAnimationFrame(() => {
-                rafId = null;
-                fn(...args);
-            });
-        }
-    };
-};

package/dist/utilities/props.d.ts

@@ -1,10 +1,6 @@
 import type * as G from "../types/global";
 type Value = string | boolean | number | undefined;
 type ClassNameResolver = string | ((value: Value) => string);
-/**
- * Resolve an array of values into a classname string
- */
-export declare const classNames: (...args: G.ClassName[]) => string;
 export declare const responsiveClassNames: <V extends G.Responsive<Value>>(s: Record<string, string>, className: ClassNameResolver, value: V, options?: {
     excludeValueFromClassName?: boolean;
 }) => string[];

package/dist/utilities/props.js

@@ -1,21 +1,3 @@
-/**
- * Resolve an array of values into a classname string
- */
-export const classNames = (...args) => {
-    return args
-        .reduce((acc, cur) => {
-        if (Array.isArray(cur)) {
-            const className = classNames(...cur);
-            if (!className)
-                return acc;
-            return `${acc} ${className}`;
-        }
-        if (cur)
-            return `${acc} ${cur}`;
-        return acc;
-    }, "")
-        .trim();
-};
 const applyClassName = (passedClassName, value, options) => {
     const { base, excludeValueFromClassName } = options || {};
     const className = typeof passedClassName === "string" ? passedClassName : passedClassName(value);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reshaped",
   "description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
-  "version": "3.9.1-canary.3",
+  "version": "3.10.0-canary.4",
   "license": "MIT",
   "email": "hello@reshaped.so",
   "homepage": "https://reshaped.so",
@@ -91,17 +91,17 @@
     "csstype": "3.1.3",
     "culori": "4.0.2",
     "postcss-custom-media": "11.0.6",
-    "@reshaped/utilities": "3.9.1-canary.3"
+    "@reshaped/utilities": "3.10.0-canary.4"
   },
   "scripts": {
-    "clean": "sh ./bin/clean.sh",
+    "clean": "bash ./bin/clean.sh",
     "dev": "storybook dev -p 3001 -c ../../.storybook --disable-telemetry",
     "build": "pnpm clean && pnpm build:esm && pnpm build:css && pnpm build:bundle",
     "build:themes": "node bin/cli.js theming --config dist/cli/theming/reshaped.config.js --output src/themes",
     "build:esm": "tsc -p tsconfig.esm.json && resolve-tspaths -p tsconfig.esm.json",
     "build:css": "postcss \"src/**/*.css\" --dir dist --base src --config tools/build",
     "build:stories": "tsc -p tsconfig.stories.json && resolve-tspaths -p tsconfig.stories.json",
-    "build:bundle": "vite build && cp dist/index.d.ts dist/bundle.d.ts",
+    "build:bundle": "vite build && shx cp dist/index.d.ts dist/bundle.d.ts",
     "build:size": "pnpm clean && pnpm build:esm && pnpm build:bundle",
     "release:local": "pnpm build && pnpm pack --out reshaped-local.tgz",
     "test:browser": "vitest run --project=storybook",

package/dist/utilities/Chain.d.ts

@@ -1,20 +0,0 @@
-type ID = number;
-type Item<T> = {
-    previousId?: ID | null;
-    nextId?: ID | null;
-    data: T;
-};
-declare class Chain<T = unknown> {
-    chain: Record<ID, Item<T>>;
-    tailId: ID | null;
-    idCounter: ID;
-    generateId(): number;
-    getAll(): Record<number, Item<T>>;
-    get(id: ID): Item<T>;
-    isLast(id: ID): boolean;
-    isEmpty(): boolean;
-    add(data: T): number;
-    remove(id: ID): T | undefined;
-    removePreviousTill(id: ID, condition: (item: Item<T>) => boolean): T | undefined;
-}
-export default Chain;

package/dist/utilities/Chain.js

@@ -1,60 +0,0 @@
-class Chain {
-    chain = {};
-    tailId = null;
-    idCounter = 0;
-    generateId() {
-        this.idCounter += 1;
-        return this.idCounter;
-    }
-    getAll() {
-        return this.chain;
-    }
-    get(id) {
-        return this.chain[id];
-    }
-    isLast(id) {
-        return this.tailId !== null && id === this.tailId;
-    }
-    isEmpty() {
-        return typeof this.tailId !== "number";
-    }
-    add(data) {
-        const previousId = this.tailId;
-        const previousItem = previousId && this.get(previousId);
-        const id = this.generateId();
-        this.chain[id] = { previousId, data };
-        if (previousItem)
-            previousItem.nextId = id;
-        this.tailId = id;
-        return id;
-    }
-    remove(id) {
-        const target = this.chain[id];
-        if (!target)
-            return;
-        const previousId = target.previousId;
-        const previousItem = previousId && this.get(previousId);
-        const nextId = target.nextId;
-        const nextItem = nextId && this.get(nextId);
-        if (previousItem)
-            previousItem.nextId = target.nextId ?? null;
-        if (nextItem)
-            nextItem.previousId = target.previousId ?? null;
-        if (!nextId)
-            this.tailId = previousId ?? null;
-        const data = this.get(id).data;
-        delete this.chain[id];
-        return data;
-    }
-    removePreviousTill(id, condition) {
-        const target = this.get(id);
-        const data = this.remove(id);
-        if (!target || !target.previousId)
-            return data;
-        const keepIterating = !condition(target);
-        if (keepIterating)
-            return this.removePreviousTill(target.previousId, condition);
-        return data;
-    }
-}
-export default Chain;

package/dist/utilities/a11y/TrapFocus.d.ts

@@ -1,28 +0,0 @@
-import Chain from "../Chain";
-import type { FocusableElement, TrapMode } from "./types";
-type ReleaseOptions = {
-    withoutFocusReturn?: boolean;
-};
-type TrapOptions = {
-    onRelease?: () => void;
-    includeTrigger?: boolean;
-    initialFocusEl?: FocusableElement | null;
-    mode?: TrapMode;
-};
-declare class TrapFocus {
-    #private;
-    static chain: Chain<TrapFocus>;
-    trapped?: boolean;
-    constructor();
-    /**
-     * Trap the focus, add observer and keyboard event listeners
-     * and create a chain item
-     */
-    trap: (root: HTMLElement, options?: TrapOptions) => void;
-    /**
-     * Disabled the trap focus for the element,
-     * cleanup all observers/handlers and trap for the previous element in the chain
-     */
-    release: (releaseOptions?: ReleaseOptions) => void;
-}
-export default TrapFocus;