draft-components 3.5.0 → 4.0.0

package/dist/components/slide-over/slide-over.js

@@ -1,106 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, } from 'react';
-import { SlideOverContextProvider } from './slide-over-context.js';
-import { classNames, getRefElement } from '../../lib/index.js';
-import { useDisableBodyScroll, useEscKeyDown, useFocusTrap } from '../../hooks/index.js';
-import { Portal } from '../portal/index.js';
-import { SlideOverHeader } from './slide-over-header.js';
-import { SlideOverBody } from './slide-over-body.js';
-const panelSlideIn = [
-    { transform: 'translateX(100%)' },
-    { transform: 'translateX(0%)' },
-];
-const backdropFade = [
-    { opacity: 0 },
-    { opacity: 1 },
-];
-const SlideOverWithRef = forwardRef(function SlideOver({ 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, animationDurationMs = 350, animationDisabled = false, shouldCloseOnEscKeyPress = true, shouldCloseOnBackdropClick = true, className, children, onClose, ...props }, ref) {
-    const id = useId();
-    const titleId = ariaLabelledby || `${id}dialogTitle`;
-    const descriptionId = ariaDescribedby || `${id}dialogDescription`;
-    const backdropRef = useRef(null);
-    const panelRef = useRef(null);
-    const isAnimationDisabled = useRef(animationDisabled);
-    const shouldPlayAnimations = useCallback(() => {
-        const mediaQueryList = window.matchMedia('(prefers-reduced-motion)');
-        return !isAnimationDisabled.current && !mediaQueryList.matches;
-    }, []);
-    const closePanel = useMemo(() => {
-        let isClosing = false;
-        return (source) => {
-            if (isClosing) {
-                return;
-            }
-            if (!shouldPlayAnimations()) {
-                onClose(source);
-            }
-            isClosing = true;
-            const backdrop = getRefElement(backdropRef);
-            const backdropAnimations = backdrop.getAnimations();
-            if (backdropAnimations.length === 0) {
-                backdropAnimations.push(backdrop.animate(backdropFade, {
-                    direction: 'reverse',
-                    fill: 'both',
-                    easing: 'ease-in-out',
-                    duration: animationDurationMs,
-                }));
-            }
-            else {
-                backdropAnimations.forEach((animation) => animation.reverse());
-            }
-            const panel = getRefElement(panelRef);
-            const panelAnimations = panel.getAnimations();
-            if (panelAnimations.length === 0) {
-                backdropAnimations.push(panel.animate(panelSlideIn, {
-                    direction: 'reverse',
-                    fill: 'both',
-                    easing: 'ease-in-out',
-                    duration: animationDurationMs,
-                }));
-            }
-            else {
-                panelAnimations.forEach((animation) => animation.reverse());
-            }
-            const animations = [...backdropAnimations, ...panelAnimations];
-            Promise.all(animations.map((animation) => animation.finished)).then(() => {
-                onClose(source);
-                isClosing = false;
-            });
-        };
-    }, [animationDurationMs, onClose, shouldPlayAnimations]);
-    useImperativeHandle(ref, () => ({
-        close: closePanel,
-    }));
-    useEffect(() => {
-        isAnimationDisabled.current = animationDisabled;
-    }, [animationDisabled]);
-    useEffect(() => {
-        if (shouldPlayAnimations()) {
-            const backdrop = getRefElement(backdropRef);
-            backdrop.animate(backdropFade, {
-                fill: 'both',
-                easing: 'ease-in-out',
-                duration: animationDurationMs,
-            });
-            const panel = getRefElement(panelRef);
-            panel.animate(panelSlideIn, {
-                fill: 'both',
-                easing: 'ease-in-out',
-                duration: animationDurationMs,
-            });
-        }
-    }, [shouldPlayAnimations, animationDurationMs]);
-    useEscKeyDown(() => closePanel('escape'), { isEnabled: shouldCloseOnEscKeyPress });
-    useFocusTrap(panelRef);
-    useDisableBodyScroll();
-    const onClickBackdrop = () => {
-        if (shouldCloseOnBackdropClick) {
-            closePanel('backdrop');
-        }
-    };
-    return (_jsx(Portal, { children: _jsxs("div", { className: "dc-slide-over", children: [_jsx("div", { "data-testid": "slide-over-backdrop", className: "dc-slide-over__backdrop", ref: backdropRef, role: "presentation", onClick: onClickBackdrop }), _jsx("div", { ...props, className: classNames('dc-slide-over__panel', className), role: "dialog", ref: panelRef, "aria-modal": true, "aria-labelledby": titleId, "aria-describedby": descriptionId, children: _jsx(SlideOverContextProvider, { titleId: titleId, descriptionId: descriptionId, closePanel: closePanel, children: children }) })] }) }));
-});
-export const SlideOver = Object.assign(SlideOverWithRef, {
-    Header: SlideOverHeader,
-    Body: SlideOverBody,
-});

package/dist/components/slide-over/types.d.ts

@@ -1 +0,0 @@
-export type SlideOverCloseCallback = (source?: 'close-button' | 'backdrop' | 'escape') => void;

package/dist/components/slide-over/types.js

@@ -1 +0,0 @@
-export {};

package/dist/hooks/use-callback-ref.js

@@ -1,8 +0,0 @@
-import { useEffect, useMemo, useRef } from 'react';
-export function useCallbackRef(callback) {
-    const savedCallback = useRef(callback);
-    useEffect(() => {
-        savedCallback.current = callback;
-    }, [callback]);
-    return useMemo(() => ((...args) => savedCallback.current(...args)), []);
-}

package/dist/hooks/use-disable-body-scroll.d.ts

@@ -1,5 +0,0 @@
-type Options = {
-    isEnabled: boolean;
-};
-export declare function useDisableBodyScroll(options?: Options): void;
-export {};

package/dist/hooks/use-disable-body-scroll.js

@@ -1,32 +0,0 @@
-import { useEffect } from 'react';
-import { once } from '../lib/helpers.js';
-export function useDisableBodyScroll(options = {
-    isEnabled: true,
-}) {
-    useEffect(() => {
-        if (options.isEnabled) {
-            return disableBodyScroll();
-        }
-    }, [options.isEnabled]);
-}
-let disableAttempts = 0;
-let initialOverflow = '';
-let initialPaddingRight = '';
-function disableBodyScroll() {
-    if (!disableAttempts) {
-        const bodyStyle = window.getComputedStyle(document.body);
-        const scrollbarWidth = (window.innerWidth - document.documentElement.clientWidth);
-        initialOverflow = bodyStyle.overflow;
-        initialPaddingRight = bodyStyle.paddingRight;
-        document.body.style.overflow = 'hidden';
-        document.body.style.paddingRight = `${parseInt(initialPaddingRight, 10) + scrollbarWidth}px`;
-    }
-    disableAttempts += 1;
-    return once(function enableBodyScroll() {
-        disableAttempts -= 1;
-        if (!disableAttempts) {
-            document.body.style.overflow = initialOverflow;
-            document.body.style.paddingRight = initialPaddingRight;
-        }
-    });
-}

package/dist/hooks/use-esc-key-down.d.ts

@@ -1,17 +0,0 @@
-type Handler = () => void;
-type Options = {
-    isEnabled: boolean;
-};
-/**
- * Invokes a given handler when the `Esc` key was pressed.
- * When multiple handlers are registered, only the last one will be invoked.
- * For example, this behavior can be used to close only top-level popover
- * or dialog.
- *
- * @param handler The key down handler.
- * @param options An object with hook options.
- * @param options.isEnabled A flag that determines whether to run
- * the passed handler or not.
- */
-export declare function useEscKeyDown(handler: Handler, options?: Options): void;
-export {};

package/dist/hooks/use-esc-key-down.js

@@ -1,51 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { KeyboardKeys } from '../lib/keyboard-keys.js';
-const handlers = [];
-/**
- * Invokes a given handler when the `Esc` key was pressed.
- * When multiple handlers are registered, only the last one will be invoked.
- * For example, this behavior can be used to close only top-level popover
- * or dialog.
- *
- * @param handler The key down handler.
- * @param options An object with hook options.
- * @param options.isEnabled A flag that determines whether to run
- * the passed handler or not.
- */
-export function useEscKeyDown(handler, options = {
-    isEnabled: true,
-}) {
-    const handlerRef = useRef(handler);
-    const isEnabled = options.isEnabled;
-    useEffect(() => {
-        handlerRef.current = handler;
-    }, [handler]);
-    useEffect(() => {
-        if (!isEnabled) {
-            return;
-        }
-        const handler = handlerRef.current;
-        handlers.push(handler);
-        const handleBodyKeyDown = (event) => {
-            const eventHandler = handlers[handlers.length - 1];
-            if (eventHandler && event.key === KeyboardKeys.Escape) {
-                eventHandler();
-            }
-        };
-        // Add only one global `body` key down handler.
-        if (handlers.length === 1) {
-            document.body.addEventListener('keydown', handleBodyKeyDown);
-        }
-        return () => {
-            const index = handlers.indexOf(handler);
-            if (index >= 0) {
-                handlers.splice(index, 1);
-            }
-            // Remove the global `body` key down handler
-            // if there are no active handlers.
-            if (handlers.length === 0) {
-                document.body.removeEventListener('keydown', handleBodyKeyDown);
-            }
-        };
-    }, [isEnabled]);
-}

package/dist/hooks/use-mount-transition.d.ts

@@ -1,35 +0,0 @@
-export type TransitionParams = {
-    animateFirstMount?: boolean;
-    isShown: boolean;
-    durationMs: number;
-    /**
-     * CSS class for the initial state of element.
-     * This class defines the starting values of transition styles and
-     * the transition duration and timing function.
-     *
-     * @example
-     * .hidden {
-     *   opacity: 0;
-     *   transition: opacity 0.15s ease;
-     * }
-     */
-    enterFrom: string;
-    /**
-     * CSS class for the target state of element.
-     * This class defines the ending values of transition styles.
-     *
-     * @example
-     * .visible {
-     *   opacity: 1;
-     * }
-     */
-    enterTo: string;
-};
-export type TransitionState = {
-    isMounted: boolean;
-    className: string;
-};
-/**
- * @deprecated
- */
-export declare function useMountTransition({ animateFirstMount, isShown, durationMs, enterFrom, enterTo, }: TransitionParams): TransitionState;

package/dist/hooks/use-mount-transition.js

@@ -1,39 +0,0 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { classNames } from '../lib/react-helpers.js';
-/**
- * @deprecated
- */
-export function useMountTransition({ animateFirstMount = false, isShown, durationMs, enterFrom, enterTo, }) {
-    const [isMounted, setIsMounted] = useState(isShown);
-    const [hasEnterToClass, setHasEnterToClass] = useState(false);
-    const firstMount = useRef(true);
-    const prefersReducedMotion = useMemo(() => window.matchMedia('(prefers-reduced-motion: reduce)'), []);
-    const disableTransition = (prefersReducedMotion.matches
-        || (!animateFirstMount && firstMount.current));
-    if (disableTransition) {
-        durationMs = 0;
-    }
-    useEffect(() => {
-        if (!isShown) {
-            firstMount.current = false;
-        }
-    }, [isShown]);
-    useEffect(() => {
-        let timeout;
-        if (isShown) {
-            setIsMounted(true);
-            timeout = window.setTimeout(() => setHasEnterToClass(true));
-        }
-        else {
-            setHasEnterToClass(false);
-            timeout = window.setTimeout(() => setIsMounted(false), durationMs);
-        }
-        return () => window.clearTimeout(timeout);
-    }, [isShown, durationMs]);
-    return {
-        isMounted,
-        className: disableTransition
-            ? ''
-            : classNames(enterFrom, hasEnterToClass && enterTo),
-    };
-}

package/dist/hooks/use-prefers-reduced-motion.d.ts

@@ -1 +0,0 @@
-export declare function usePrefersReducedMotion(): boolean;

package/dist/hooks/use-prefers-reduced-motion.js

@@ -1,15 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-export function usePrefersReducedMotion() {
-    const media = useMemo(() => window.matchMedia('(prefers-reduced-motion)'), []);
-    const [reduced, setReduced] = useState(media.matches);
-    useEffect(() => {
-        const handleChange = () => {
-            setReduced(media.matches);
-        };
-        media.addEventListener('change', handleChange);
-        return () => {
-            media.removeEventListener('change', handleChange);
-        };
-    }, [media]);
-    return reduced;
-}

package/dist/hooks/use-show-transition.d.ts

@@ -1,16 +0,0 @@
-export declare function useShowTransition({ isOpen, enterDurationMs, leaveDurationMs, enter, enterFrom, enterTo, leave, leaveFrom, leaveTo, onEnterTransitionEnd: _onEnterTransitionEnd, onLeaveTransitionEnd: _onLeaveTransitionEnd, }: {
-    isOpen: boolean;
-    enterDurationMs: number;
-    leaveDurationMs: number;
-    enter?: string;
-    enterFrom?: string;
-    enterTo?: string;
-    leave?: string;
-    leaveFrom?: string;
-    leaveTo?: string;
-    onEnterTransitionEnd?: () => void;
-    onLeaveTransitionEnd?: () => void;
-}): {
-    shouldRender: boolean;
-    transitionClassName: string;
-};

package/dist/hooks/use-show-transition.js

@@ -1,69 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import { useCallbackRef } from './index.js';
-import { classNames, noop } from '../lib/index.js';
-import { usePrefersReducedMotion } from './use-prefers-reduced-motion.js';
-export function useShowTransition({ isOpen, enterDurationMs, leaveDurationMs, enter = 'enter', enterFrom = 'enter-from', enterTo = 'enter-to', leave = 'leave', leaveFrom = 'leave-from', leaveTo = 'leave-to', onEnterTransitionEnd: _onEnterTransitionEnd = noop, onLeaveTransitionEnd: _onLeaveTransitionEnd = noop, }) {
-    const onEnterTransitionEnd = useCallbackRef(_onEnterTransitionEnd);
-    const onLeaveTransitionEnd = useCallbackRef(_onLeaveTransitionEnd);
-    const enterTimeoutRef = useRef(-1);
-    const leaveTimeoutRef = useRef(-1);
-    const prefersReducedMotion = usePrefersReducedMotion();
-    const [shouldRender, setShouldRender] = useState(isOpen);
-    const [transitionClasses, setTransitionClasses] = useState(isOpen
-        ? [enter, enterTo]
-        : [enter, enterFrom]);
-    useEffect(() => {
-        if (prefersReducedMotion) {
-            return;
-        }
-        if (isOpen) {
-            window.clearTimeout(leaveTimeoutRef.current);
-            setShouldRender(true);
-            return () => {
-                window.clearTimeout(enterTimeoutRef.current);
-                setTransitionClasses([leave, leaveFrom]);
-                window.setTimeout(() => {
-                    setTransitionClasses([leave, leaveTo]);
-                });
-                leaveTimeoutRef.current = window.setTimeout(() => {
-                    setShouldRender(false);
-                    setTransitionClasses([enter, enterFrom]);
-                    onLeaveTransitionEnd();
-                }, leaveDurationMs);
-            };
-        }
-    }, [
-        prefersReducedMotion,
-        isOpen,
-        enter,
-        enterFrom,
-        leave,
-        leaveFrom,
-        leaveTo,
-        leaveDurationMs,
-        onLeaveTransitionEnd,
-    ]);
-    useEffect(() => {
-        if (prefersReducedMotion) {
-            return;
-        }
-        if (shouldRender) {
-            setTransitionClasses([enter, enterTo]);
-            enterTimeoutRef.current = window.setTimeout(() => {
-                setTransitionClasses([]);
-                onEnterTransitionEnd();
-            }, enterDurationMs);
-        }
-    }, [
-        prefersReducedMotion,
-        shouldRender,
-        enter,
-        enterTo,
-        enterDurationMs,
-        onEnterTransitionEnd,
-    ]);
-    return {
-        shouldRender: isOpen || shouldRender,
-        transitionClassName: prefersReducedMotion ? '' : classNames(...transitionClasses),
-    };
-}

package/dist/lib/keyboard-keys.d.ts

@@ -1,15 +0,0 @@
-export declare const KeyboardKeys: {
-    ArrowUp: string;
-    ArrowRight: string;
-    ArrowDown: string;
-    ArrowLeft: string;
-    Tab: string;
-    Home: string;
-    End: string;
-    PageUp: string;
-    PageDown: string;
-    Enter: string;
-    Escape: string;
-    Backspace: string;
-    Space: string;
-};

package/dist/lib/keyboard-keys.js

@@ -1,15 +0,0 @@
-export const KeyboardKeys = {
-    ArrowUp: 'ArrowUp',
-    ArrowRight: 'ArrowRight',
-    ArrowDown: 'ArrowDown',
-    ArrowLeft: 'ArrowLeft',
-    Tab: 'Tab',
-    Home: 'Home',
-    End: 'End',
-    PageUp: 'PageUp',
-    PageDown: 'PageDown',
-    Enter: 'Enter',
-    Escape: 'Escape',
-    Backspace: 'Backspace',
-    Space: ' ',
-};