draft-components 1.0.0-beta.3.1 → 1.0.0-beta.5

package/cjs/components/tabs/tab-list.cjs

@@ -0,0 +1,67 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const keyboardKeys = require('../../lib/keyboard-keys.cjs');
+const helpers = require('../../lib/helpers.cjs');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+const tabsContext = require('./tabs-context.cjs');
+
+function TabList({ className, children, onFocus, onBlur, onKeyDown, ...props }) {
+    const ref = react.useRef(null);
+    const { selectedTab, setTabListHasFocus } = tabsContext.useTabsContext();
+    function handleFocus(event) {
+        setTabListHasFocus(true);
+        onFocus?.(event);
+    }
+    function handleBlur(event) {
+        setTabListHasFocus(false);
+        onBlur?.(event);
+    }
+    function handleKeyDown(event) {
+        const tabList = ref.current;
+        helpers.assertIfNullable(tabList, 'ref.current is null or undefined');
+        let focusTabIndex = 0;
+        const tabs = tabList.querySelectorAll('[role="tab"]');
+        for (let index = 0; index < tabs.length; index += 1) {
+            const tab = tabs[index];
+            if (document.activeElement === tab) {
+                focusTabIndex = index;
+                break;
+            }
+            if (tab.name === selectedTab) {
+                focusTabIndex = index;
+            }
+        }
+        let index = focusTabIndex;
+        if (event.key === keyboardKeys.KeyboardKeys.ArrowRight) {
+            index += 1;
+        }
+        else if (event.key === keyboardKeys.KeyboardKeys.ArrowLeft) {
+            index -= 1;
+        }
+        else if (event.key === keyboardKeys.KeyboardKeys.End) {
+            index = tabs.length - 1;
+        }
+        else if (event.key === keyboardKeys.KeyboardKeys.Home) {
+            index = 0;
+        }
+        if (index < 0) {
+            index = tabs.length - 1;
+        }
+        else if (index >= tabs.length) {
+            index = 0;
+        }
+        if (index !== focusTabIndex) {
+            event.preventDefault();
+            event.stopPropagation();
+            const newFocusTab = tabs[index];
+            helpers.assertIfNullable(newFocusTab, `Unable to get tab at index ${index}`);
+            reactHelpers.focusElement(newFocusTab);
+        }
+        onKeyDown?.(event);
+    }
+    return (jsxRuntime.jsx("div", { ...props, ref: ref, role: "tablist", className: reactHelpers.classNames('dc-tab-list', className), onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, children: children }));
+}
+
+exports.TabList = TabList;

package/cjs/components/tabs/tab-panel.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+const tabsContext = require('./tabs-context.cjs');
+
+function TabPanel({ tab, id, className, children, 'aria-labelledby': ariaLabelledBy, ...props }) {
+    const { selectedTab, getTabProps } = tabsContext.useTabsContext();
+    if (selectedTab !== tab) {
+        return null;
+    }
+    const tabProps = getTabProps(tab);
+    return (jsxRuntime.jsx("div", { ...props, className: reactHelpers.classNames('dc-tab-panel', className), role: "tabpanel", id: id || tabProps.ariaControls, "aria-labelledby": ariaLabelledBy || tabProps.id, children: children }));
+}
+
+exports.TabPanel = TabPanel;

package/cjs/components/tabs/tab.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+const tabsContext = require('./tabs-context.cjs');
+const badge = require('../badge/badge.cjs');
+
+function Tab({ id, name, icon, counter, className, children, onClick, 'aria-controls': ariaControls, ...props }) {
+    const { getTabProps, selectedTab, setSelectedTab, tabListHasFocus, } = tabsContext.useTabsContext();
+    const tabProps = getTabProps(name);
+    const selected = name === selectedTab;
+    function handleClick(event) {
+        setSelectedTab(name);
+        onClick?.(event);
+    }
+    return (jsxRuntime.jsx("button", { ...props, className: reactHelpers.classNames('dc-tab', className), type: "button", role: "tab", name: name, id: id || tabProps.id, "aria-controls": ariaControls || tabProps.ariaControls, "aria-selected": selected, tabIndex: selected && !tabListHasFocus ? 0 : -1, onClick: handleClick, children: jsxRuntime.jsxs("span", { className: "dc-tab__layout", children: [icon != null && (jsxRuntime.jsx("span", { className: "dc-tab__icon", children: icon })), children != null && (jsxRuntime.jsxs("span", { className: "dc-tab__label", children: [children, " "] })), counter != null && counter !== 0 && (jsxRuntime.jsx(badge.Badge, { className: "dc-tab__counter", children: counter }))] }) }));
+}
+
+exports.Tab = Tab;

package/cjs/components/tabs/{tabs-context.js → tabs-context.cjs}

@@ -1,17 +1,17 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTabsContext = exports.TabsContextProvider = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const TabsContext = (0, react_1.createContext)(null);
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+
+const TabsContext = react.createContext(null);
 function TabsContextProvider({ children, selectedTab, setSelectedTab, }) {
-    const [tabListHasFocus, setTabListHasFocus] = (0, react_1.useState)(false);
-    const id = (0, react_1.useId)();
-    const getTabProps = (0, react_1.useCallback)((tab) => ({
+    const [tabListHasFocus, setTabListHasFocus] = react.useState(false);
+    const id = react.useId();
+    const getTabProps = react.useCallback((tab) => ({
         id: `${id}-tab[${tab}]`,
         ariaControls: `${id}-tabPanel[${tab}]`,
     }), [id]);
-    return ((0, jsx_runtime_1.jsx)(TabsContext.Provider, { value: {
+    return (jsxRuntime.jsx(TabsContext.Provider, { value: {
             getTabProps,
             selectedTab,
             setSelectedTab,
@@ -19,12 +19,13 @@ function TabsContextProvider({ children, selectedTab, setSelectedTab, }) {
             setTabListHasFocus,
         }, children: children }));
 }
-exports.TabsContextProvider = TabsContextProvider;
 function useTabsContext() {
-    const context = (0, react_1.useContext)(TabsContext);
+    const context = react.useContext(TabsContext);
     if (!context) {
         throw new Error('useTabsContext must be used within TabsContextProvider');
     }
     return context;
 }
+
+exports.TabsContextProvider = TabsContextProvider;
 exports.useTabsContext = useTabsContext;

package/cjs/components/tabs/tabs.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+const tabsContext = require('./tabs-context.cjs');
+
+function Tabs({ className, children, selectedTab, onSelectTab, ...props }) {
+    return (jsxRuntime.jsx(tabsContext.TabsContextProvider, { selectedTab: selectedTab, setSelectedTab: onSelectTab, children: jsxRuntime.jsx("div", { ...props, className: reactHelpers.classNames('dc-tabs', className), children: children }) }));
+}
+
+exports.Tabs = Tabs;

package/cjs/components/tag/{tag.js → tag.cjs}

@@ -1,14 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tag = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_helpers_1 = require("../../lib/react-helpers");
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+
 function Tag({ isRounded = false, variant = 'tinted', fill = 'gray', size = 'md', className, children, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("strong", { ...props, className: (0, react_helpers_1.classNames)(className, 'dc-tag', {
+    return (jsxRuntime.jsx("strong", { ...props, className: reactHelpers.classNames(className, 'dc-tag', {
             [`dc-tag_${variant}`]: variant,
             [`dc-tag_${fill}`]: fill,
             [`dc-tag_${size}`]: size,
             'dc-tag_rounded': isRounded,
         }), children: children }));
 }
+
 exports.Tag = Tag;

package/cjs/components/text-input/text-input.cjs

@@ -0,0 +1,26 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+
+const TextInput = react.forwardRef(function TextInput({ hasError = false, isBlock = false, type = 'text', size = 'md', prefix, suffix, style, className, disabled, width, htmlSize, onChange, onChangeValue, ...props }, ref) {
+    const shouldRenderPrefix = Boolean(prefix);
+    const shouldRenderSuffix = Boolean(suffix);
+    return (jsxRuntime.jsxs("div", { style: style, className: reactHelpers.classNames(className, 'dc-text-input__container', {
+            [`dc-text-input__container_${size}`]: size,
+            'dc-text-input__container_disabled': disabled,
+            'dc-text-input__container_has_error': hasError,
+            'dc-text-input__container_block': isBlock,
+            'dc-text-input__container_has_prefix': shouldRenderPrefix,
+            'dc-text-input__container_has_suffix': shouldRenderSuffix,
+        }), children: [shouldRenderPrefix && (jsxRuntime.jsx("div", { className: "dc-text-input__prefix", children: prefix })), jsxRuntime.jsx("input", { ...props, className: reactHelpers.classNames({
+                    'dc-text-input': true,
+                    [`dc-text-input_width_${width}`]: width,
+                }), ref: ref, type: type, size: htmlSize, disabled: disabled, onChange: (event) => {
+                    onChange?.(event);
+                    onChangeValue?.(event.target.value);
+                } }), shouldRenderSuffix && (jsxRuntime.jsx("div", { className: "dc-text-input__suffix", children: suffix }))] }));
+});
+
+exports.TextInput = TextInput;

package/cjs/components/textarea/textarea.cjs

@@ -0,0 +1,40 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+const caption = require('../caption/caption.cjs');
+
+const getCharactersCountMessage = ({ maxCharacters, characterCount, }) => {
+    const charsRemaining = maxCharacters - characterCount;
+    const characters = (jsxRuntime.jsx("span", { style: { fontVariant: 'tabular-nums' }, children: charsRemaining === 1
+            ? `${charsRemaining} character`
+            : `${charsRemaining} characters` }));
+    return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: ["You have ", characters, " remaining"] });
+};
+const Textarea = react.forwardRef(function Textarea({ disabled = false, hasError = false, isBlock = false, showCharacterCount = false, size = 'md', rows = 3, width, style, className, maxLength, onChange, onChangeValue, renderCharacterCount = getCharactersCountMessage, ...props }, ref) {
+    const shouldRenderCharacterCount = (showCharacterCount &&
+        maxLength != null && maxLength > 0);
+    const [characterCount, setCharacterCount] = react.useState(() => {
+        const value = props.value || props.defaultValue;
+        return typeof value === 'string' ? value.length : 0;
+    });
+    return (jsxRuntime.jsxs("div", { style: style, className: reactHelpers.classNames(className, 'dc-textarea__container', {
+            [`dc-textarea__container_size_${size}`]: size !== undefined,
+            'dc-textarea__container_disabled': disabled,
+            'dc-textarea__container_has_error': hasError,
+            'dc-textarea__container_block': isBlock,
+        }), children: [jsxRuntime.jsx("textarea", { ...props, ref: ref, className: reactHelpers.classNames('dc-textarea', {
+                    [`dc-textarea_width_${width}`]: width !== undefined,
+                }), rows: rows, maxLength: maxLength, disabled: disabled, onChange: (event) => {
+                    const value = event.target.value;
+                    onChange?.(event);
+                    onChangeValue?.(value);
+                    setCharacterCount(value.length);
+                } }), shouldRenderCharacterCount && (jsxRuntime.jsx(caption.Caption, { "data-testid": "textarea-character-count", className: "dc-textarea__character-count", children: renderCharacterCount({
+                    characterCount,
+                    maxCharacters: maxLength,
+                }) }))] }));
+});
+
+exports.Textarea = Textarea;

package/cjs/components/toast/toast-button.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+
+const ToastButton = react.forwardRef(function ToastButton({ className, ...props }, ref) {
+    return (jsxRuntime.jsx("button", { ...props, ref: ref, className: reactHelpers.classNames(className, 'dc-toast__btn') }));
+});
+
+exports.ToastButton = ToastButton;

package/cjs/components/toast/toast.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+const xMarkIcon = require('./x-mark-icon.cjs');
+
+function Toast({ icon, message, actions, closeButtonAriaLabel = 'close', onClickCloseButton, children, className, ...props }) {
+    return (jsxRuntime.jsxs("section", { ...props, className: reactHelpers.classNames('dc-toast', className), children: [jsxRuntime.jsx("button", { className: "dc-toast__close-btn", "aria-label": closeButtonAriaLabel, onClick: onClickCloseButton, children: jsxRuntime.jsx(xMarkIcon.XMarkIcon, { width: 16, height: 16 }) }), jsxRuntime.jsxs("div", { className: "dc-toast__body", children: [icon && jsxRuntime.jsx("div", { className: "dc-toast__icon", children: icon }), jsxRuntime.jsxs("div", { className: "dc-toast__content", children: [jsxRuntime.jsx("h1", { className: "dc-toast__title", children: children }), message && jsxRuntime.jsx("div", { className: "dc-toast__message", children: message })] })] }), actions && jsxRuntime.jsx("div", { className: "dc-toast__actions", children: actions })] }));
+}
+
+exports.Toast = Toast;

package/cjs/components/toast/x-mark-icon.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+
+function XMarkIcon(props) {
+    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 24, height: 24, fill: "none", strokeWidth: 1.5, stroke: "currentColor", ...props, children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }));
+}
+
+exports.XMarkIcon = XMarkIcon;

package/cjs/components/toaster/toaster.cjs

@@ -0,0 +1,115 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const helpers = require('../../lib/helpers.cjs');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+const portal = require('../portal/portal.cjs');
+const toast = require('../toast/toast.cjs');
+const toastButton = require('../toast/toast-button.cjs');
+
+const TOAST_SHOW_EVENT = 'toast_show';
+const isToastShowEvent = (event) => (event instanceof CustomEvent && event.type === TOAST_SHOW_EVENT);
+const TOAST_HIDE_EVENT = 'toast_hide';
+const isToastHideEvent = (event) => (event instanceof CustomEvent && event.type === TOAST_HIDE_EVENT);
+class Toaster {
+    constructor(params) {
+        this._id = 0;
+        this.timeoutMs = params?.timeoutMs || 10000;
+        this.onShow = params?.onShowToast;
+        this.onHide = params?.onHideToast;
+    }
+    _getNextId() {
+        this._id += 1;
+        return this._id;
+    }
+    showToast(toast, params) {
+        const id = this._getNextId();
+        const event = new CustomEvent(TOAST_SHOW_EVENT, {
+            detail: {
+                toaster: this,
+                toast: { ...toast, id },
+            },
+        });
+        const timeoutMs = toast.timeoutMs || params?.timeoutMs || this.timeoutMs;
+        this.onShow?.(event.detail.toast);
+        window.dispatchEvent(event);
+        window.setTimeout(() => this.hideToast(id), timeoutMs);
+        return id;
+    }
+    hideToast(id) {
+        const event = new CustomEvent(TOAST_HIDE_EVENT, {
+            detail: {
+                toaster: this,
+                toastId: id,
+            },
+        });
+        this.onHide?.(id);
+        window.dispatchEvent(event);
+    }
+    render(options) {
+        return (jsxRuntime.jsx(ToastsList, { toaster: this, toastGap: options?.toastGap, toastPosition: options?.toastPosition, toastCloseButtonAriaLabel: options?.toastCloseButtonAriaLabel }));
+    }
+}
+function ToastsList({ toaster, toastGap = 12, toastPosition = 'top-center', toastCloseButtonAriaLabel = 'Close', }) {
+    const ref = react.useRef(null);
+    const [toasts, setToasts] = react.useState([]);
+    react.useEffect(() => {
+        function handleShowToast(event) {
+            if (isToastShowEvent(event)) {
+                const detail = event.detail;
+                if (detail.toaster === toaster) {
+                    setToasts((prevToasts) => [detail.toast, ...prevToasts]);
+                }
+            }
+        }
+        function handleCloseToast(event) {
+            if (isToastHideEvent(event)) {
+                const detail = event.detail;
+                if (detail.toaster === toaster) {
+                    setToasts((prevToasts) => prevToasts.filter((toast) => toast.id !== detail.toastId));
+                }
+            }
+        }
+        window.addEventListener(TOAST_SHOW_EVENT, handleShowToast);
+        window.addEventListener(TOAST_HIDE_EVENT, handleCloseToast);
+        return () => {
+            window.removeEventListener(TOAST_SHOW_EVENT, handleShowToast);
+            window.removeEventListener(TOAST_HIDE_EVENT, handleCloseToast);
+        };
+    }, [toaster]);
+    react.useEffect(() => {
+        const listEl = ref.current;
+        helpers.assertIfNullable(listEl, 'ToastsList ref was not set');
+        let offset = 0;
+        for (const item of listEl.children) {
+            if (item instanceof HTMLLIElement) {
+                item.style.transform = `translateY(${offset}px)`;
+                const d = item.offsetHeight + toastGap;
+                if (toastPosition === 'top-right' ||
+                    toastPosition === 'top-center' ||
+                    toastPosition === 'top-left') {
+                    offset += d;
+                }
+                else {
+                    offset -= d;
+                }
+            }
+        }
+    }, [toasts, toastGap, toastPosition]);
+    return (jsxRuntime.jsx(portal.Portal, { children: jsxRuntime.jsx("ul", { ref: ref, className: reactHelpers.classNames({
+                'dc-toasts-list': true,
+                [`dc-toasts-list_${toastPosition}`]: toastPosition,
+            }), children: toasts.map((toast$1) => {
+                const hideToast = () => toaster.hideToast(toast$1.id);
+                const actions = toast$1.actions?.map((action, index) => (jsxRuntime.jsx(toastButton.ToastButton, { onClick: () => {
+                        action.onClick?.();
+                        if (action.shouldHideAfterClick ?? true) {
+                            hideToast();
+                        }
+                    }, children: action.content }, index)));
+                return (jsxRuntime.jsx("li", { children: jsxRuntime.jsx(toast.Toast, { className: "dc-toasts-list__toast", role: "alert", icon: toast$1.icon, message: toast$1.message, actions: actions, closeButtonAriaLabel: toastCloseButtonAriaLabel, onClickCloseButton: hideToast, children: toast$1.title }) }, toast$1.id));
+            }) }) }));
+}
+
+exports.Toaster = Toaster;

package/cjs/components/tooltip/tooltip.cjs

@@ -0,0 +1,75 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+const useMountTransition = require('../../hooks/use-mount-transition.cjs');
+const positioner = require('../positioner/positioner.cjs');
+
+function Tooltip({ anchorGap = 8, placement = 'top', alignment = 'center', style, className, content, children, ...props }) {
+    const [defaultShow, setDefaultShow] = react.useState(props.defaultIsShown ?? false);
+    const defaultId = react.useId();
+    const tooltipId = props.id || defaultId;
+    const isShown = props.isShown ?? defaultShow;
+    const durationMs = 100;
+    const { isMounted, className: transitionClass } = useMountTransition.useMountTransition({
+        isShown,
+        durationMs,
+        enterFrom: 'dc-tooltip_hidden',
+        enterTo: 'dc-tooltip_visible',
+    });
+    const { showTooltip, hideTooltip } = react.useMemo(() => ({
+        showTooltip: () => setDefaultShow(true),
+        hideTooltip: () => setDefaultShow(false),
+    }), []);
+    const renderAnchor = ({ setRef }) => {
+        if (typeof children === 'function') {
+            return children({
+                ref: setRef,
+            }, {
+                tooltipId,
+                showTooltip,
+                hideTooltip,
+                isShown: isShown || isMounted,
+            });
+        }
+        if (reactHelpers.isReactElementWithRef(children)) {
+            const props = children.props;
+            return react.cloneElement(children, {
+                'ref': reactHelpers.mergeRefs(setRef, children.ref),
+                'onFocus': (event) => {
+                    showTooltip();
+                    props.onFocus?.(event);
+                },
+                'onBlur': (event) => {
+                    hideTooltip();
+                    props.onBlur?.(event);
+                },
+                'onMouseEnter': (event) => {
+                    showTooltip();
+                    props.onMouseEnter?.(event);
+                },
+                'onMouseLeave': (event) => {
+                    hideTooltip();
+                    props.onMouseLeave?.(event);
+                },
+                'aria-describedby': props['aria-describedby'] || tooltipId,
+            });
+        }
+        return children;
+    };
+    const renderContent = ({ setRef: portalRef, style: portalStyle, }) => {
+        if (isShown || isMounted) {
+            delete props.defaultIsShown;
+            delete props.isShown;
+            return (jsxRuntime.jsx("div", { ...props, ref: portalRef, id: tooltipId, style: {
+                    '--dc-tooltip-transition-duration': `${durationMs}ms`,
+                    ...portalStyle,
+                    ...style,
+                }, className: reactHelpers.classNames('dc-tooltip', transitionClass, className), role: "tooltip", children: content }));
+        }
+    };
+    return (jsxRuntime.jsx(positioner.Positioner, { placement: placement, alignment: alignment, anchorGap: anchorGap, renderAnchor: renderAnchor, renderContent: renderContent }));
+}
+
+exports.Tooltip = Tooltip;

package/cjs/hooks/index.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+const useMountTransition = require('./use-mount-transition.cjs');
+const useDisableBodyScroll = require('./use-disable-body-scroll.cjs');
+const useEscKeyDown = require('./use-esc-key-down.cjs');
+const useFocusTrap = require('./use-focus-trap.cjs');
+
+
+
+exports.useMountTransition = useMountTransition.useMountTransition;
+exports.useDisableBodyScroll = useDisableBodyScroll.useDisableBodyScroll;
+exports.useEscKeyDown = useEscKeyDown.useEscKeyDown;
+exports.useFocusTrap = useFocusTrap.useFocusTrap;

package/cjs/hooks/{use-disable-body-scroll.js → use-disable-body-scroll.cjs}

@@ -1,16 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDisableBodyScroll = void 0;
-const react_1 = require("react");
-const helpers_1 = require("../lib/helpers");
+'use strict';
+
+const react = require('react');
+const helpers = require('../lib/helpers.cjs');
+
 function useDisableBodyScroll(options) {
-    (0, react_1.useEffect)(() => {
+    react.useEffect(() => {
         if (options.isEnabled) {
             return disableBodyScroll();
         }
     }, [options.isEnabled]);
 }
-exports.useDisableBodyScroll = useDisableBodyScroll;
 let disableAttempts = 0;
 let initialOverflow = '';
 let initialPaddingRight = '';
@@ -24,7 +23,7 @@ function disableBodyScroll() {
         document.body.style.paddingRight = `${parseInt(initialPaddingRight, 10) + scrollbarWidth}px`;
     }
     disableAttempts += 1;
-    return (0, helpers_1.once)(function enableBodyScroll() {
+    return helpers.once(function enableBodyScroll() {
         disableAttempts -= 1;
         if (!disableAttempts) {
             document.body.style.overflow = initialOverflow;
@@ -32,3 +31,5 @@ function disableBodyScroll() {
         }
     });
 }
+
+exports.useDisableBodyScroll = useDisableBodyScroll;

package/cjs/hooks/{use-esc-key-down.js → use-esc-key-down.cjs}

@@ -1,8 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useEscKeyDown = void 0;
-const react_1 = require("react");
-const keyboard_keys_1 = require("../lib/keyboard-keys");
+'use strict';
+
+const react = require('react');
+const keyboardKeys = require('../lib/keyboard-keys.cjs');
+
 const handlers = [];
 /**
  * Invokes a given handler when the `Esc` key was pressed.
@@ -16,12 +16,12 @@ const handlers = [];
  * the passed handler or not.
  */
 function useEscKeyDown(handler, options) {
-    const handlerRef = (0, react_1.useRef)(handler);
+    const handlerRef = react.useRef(handler);
     const isEnabled = options.isEnabled;
-    (0, react_1.useEffect)(() => {
+    react.useEffect(() => {
         handlerRef.current = handler;
     }, [handler]);
-    (0, react_1.useEffect)(() => {
+    react.useEffect(() => {
         if (!isEnabled) {
             return;
         }
@@ -29,7 +29,7 @@ function useEscKeyDown(handler, options) {
         handlers.push(handler);
         const handleBodyKeyDown = (event) => {
             const eventHandler = handlers[handlers.length - 1];
-            if (eventHandler && event.key === keyboard_keys_1.KeyboardKeys.Escape) {
+            if (eventHandler && event.key === keyboardKeys.KeyboardKeys.Escape) {
                 eventHandler();
             }
         };
@@ -50,4 +50,5 @@ function useEscKeyDown(handler, options) {
         };
     }, [isEnabled]);
 }
+
 exports.useEscKeyDown = useEscKeyDown;

package/cjs/hooks/{use-focus-trap.js → use-focus-trap.cjs}

@@ -1,9 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFocusTrap = void 0;
-const react_1 = require("react");
-const keyboard_keys_1 = require("../lib/keyboard-keys");
-const react_helpers_1 = require("../lib/react-helpers");
+'use strict';
+
+const react = require('react');
+const keyboardKeys = require('../lib/keyboard-keys.cjs');
+const reactHelpers = require('../lib/react-helpers.cjs');
+
 const modals = [];
 const focusableElementsSelector = [
     'a[href]',
@@ -28,13 +28,13 @@ const focusableElementsSelector = [
  */
 function useFocusTrap(modalRef, options) {
     const isEnabled = options.isEnabled;
-    (0, react_1.useEffect)(() => {
+    react.useEffect(() => {
         if (!isEnabled) {
             return;
         }
         modals.push(modalRef);
         const handleBodyKeyDown = (event) => {
-            if (event.key !== keyboard_keys_1.KeyboardKeys.Tab) {
+            if (event.key !== keyboardKeys.KeyboardKeys.Tab) {
                 return;
             }
             const activeModalRef = modals[modals.length - 1];
@@ -53,17 +53,17 @@ function useFocusTrap(modalRef, options) {
             const lastFocusableEl = focusableEls[focusableEls.length - 1];
             if (!activeModal.contains(document.activeElement)) {
                 event.preventDefault();
-                (0, react_helpers_1.focusElement)(firstFocusableEl);
+                reactHelpers.focusElement(firstFocusableEl);
             }
             else if (event.shiftKey) {
                 if (document.activeElement === firstFocusableEl) {
                     event.preventDefault();
-                    (0, react_helpers_1.focusElement)(lastFocusableEl);
+                    reactHelpers.focusElement(lastFocusableEl);
                 }
             }
             else if (document.activeElement === lastFocusableEl) {
                 event.preventDefault();
-                (0, react_helpers_1.focusElement)(firstFocusableEl);
+                reactHelpers.focusElement(firstFocusableEl);
             }
         };
         // Add only one global `body` key down handler.
@@ -83,4 +83,5 @@ function useFocusTrap(modalRef, options) {
         };
     }, [isEnabled, modalRef]);
 }
+
 exports.useFocusTrap = useFocusTrap;