@quadrats/react 1.1.6 → 1.1.8

package/components/SegmentedControl/index.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-export interface SegmentedControlProps {
-    options: {
-        value: string;
-        label: string;
-        disabled?: boolean;
-    }[];
-    value: string;
-    onChange: (value: string) => void;
-    disabled?: boolean;
-}
-declare const SegmentedControl: ({ options, value, onChange, disabled }: SegmentedControlProps) => React.JSX.Element;
-export default SegmentedControl;

package/components/SegmentedControl/index.js

@@ -1,14 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-
-const SegmentedControl = ({ options, value, onChange, disabled }) => {
-    return (React.createElement("div", { className: clsx('qdr-segmented-control', {
-            'qdr-segmented-control--disabled': disabled || options.filter((o) => o.disabled).length === options.length,
-        }) }, options.map((option) => (React.createElement("button", { key: option.value, type: "button", disabled: disabled || option.disabled, className: clsx('qdr-segmented-control__button', {
-            'qdr-segmented-control__button--active': value === option.value,
-        }), onClick: () => {
-            onChange(option.value);
-        } }, option.label)))));
-};
-
-export { SegmentedControl as default };

package/components/Textarea/index.d.ts

@@ -1,15 +0,0 @@
-import React, { Ref } from 'react';
-import { BaseFieldProps } from '../BaseField';
-export interface TextareaProps extends Omit<BaseFieldProps, 'children'> {
-    value?: string;
-    onChange?: (value: string) => void;
-    textareaRef?: Ref<HTMLTextAreaElement>;
-    placeholder?: string;
-    height?: number;
-    disabled?: boolean;
-    isError?: boolean;
-    hint?: string;
-    maxLength?: number;
-}
-declare const Textarea: ({ label, className, width, value, onChange, textareaRef, placeholder, height, disabled, isError, hint, maxLength, errorMessage, required, }: TextareaProps) => React.JSX.Element;
-export default Textarea;

package/components/Textarea/index.js

@@ -1,24 +0,0 @@
-import React, { useMemo } from 'react';
-import clsx from 'clsx';
-import BaseField from '../BaseField/index.js';
-
-const Textarea = ({ label, className, width, value = '', onChange, textareaRef, placeholder, height, disabled, isError, hint, maxLength, errorMessage, required = false, }) => {
-    const isLimited = useMemo(() => maxLength && value && value.length >= maxLength, [maxLength, value]);
-    return (React.createElement(BaseField, { className: className, label: label, required: required, width: width, errorMessage: errorMessage },
-        React.createElement("div", { className: "qdr-textarea" },
-            React.createElement("textarea", { ref: textareaRef, style: { height }, className: clsx('qdr-textarea__textarea', {
-                    'qdr-textarea__textarea--error': isError,
-                }), value: value, onChange: (e) => {
-                    onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value);
-                }, maxLength: maxLength, placeholder: placeholder, disabled: disabled }),
-            hint && (React.createElement("div", { className: "qdr-textarea__hint-wrapper" },
-                React.createElement("span", { className: "qdr-textarea__hint" }, hint))),
-            maxLength && (React.createElement("span", { className: clsx('qdr-textarea__counter', {
-                    'qdr-textarea__counter--have-hint': hint,
-                    'qdr-textarea__counter--limited': isLimited,
-                    'qdr-textarea__counter--error': isError,
-                    'qdr-textarea__counter--disabled': disabled,
-                }) }, `${value ? value.length : 0}/${maxLength}`)))));
-};
-
-export { Textarea as default };

package/components/Toggle/index.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-export interface ToggleProps {
-    onChange: (status: boolean) => void;
-    checked: boolean;
-    disabled?: boolean;
-}
-declare const Toggle: ({ onChange, checked, disabled }: ToggleProps) => React.JSX.Element;
-export default Toggle;

package/components/Toggle/index.js

@@ -1,15 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-
-const Toggle = ({ onChange, checked, disabled }) => {
-    return (React.createElement("div", { className: clsx('qdr-toggle', {
-            'qdr-toggle--checked': checked,
-            'qdr-toggle--disabled': disabled,
-        }) },
-        React.createElement("div", { className: "qdr-toggle__control" }),
-        React.createElement("input", { "aria-checked": checked, "aria-disabled": disabled, checked: checked, className: "qdr-toggle__input", disabled: disabled, onChange: (e) => {
-                onChange(e.target.checked);
-            }, type: "checkbox" })));
-};
-
-export { Toggle as default };

package/components/Tooltip/calculatePosition.d.ts

@@ -1,5 +0,0 @@
-import { TooltipProps } from './typings';
-export declare function calculatePosition(props: Required<Pick<TooltipProps, 'placement' | 'getContainer' | 'horizontalOffset' | 'verticalOffset'>>, triggerEl: HTMLElement, popupEl: HTMLElement): {
-    top: number;
-    left: number;
-};

package/components/Tooltip/calculatePosition.js

@@ -1,69 +0,0 @@
-function isContainerAsDocument(container) {
-    return container === document.documentElement || container === document.body;
-}
-function getTargetRect(container, targetEl) {
-    const triggerRect = targetEl.getBoundingClientRect();
-    if (isContainerAsDocument(container)) {
-        return triggerRect;
-    }
-    const containerRect = container.getBoundingClientRect();
-    const { width, height } = triggerRect;
-    const top = triggerRect.top - containerRect.top;
-    const left = triggerRect.left - containerRect.left;
-    return {
-        width,
-        height,
-        top,
-        bottom: top + height,
-        left,
-        right: left + width,
-    };
-}
-function getScrollLeftAndTop(container) {
-    const isAsDocument = isContainerAsDocument(container);
-    return {
-        scrollTop: isAsDocument ? document.documentElement.scrollTop + document.body.scrollTop : container.scrollTop,
-        scrollLeft: isAsDocument ? document.documentElement.scrollLeft + document.body.scrollLeft : container.scrollLeft,
-    };
-}
-function calculatePosition(props, triggerEl, popupEl) {
-    const { placement, getContainer, horizontalOffset, verticalOffset, } = props;
-    const isTop = placement.includes('top');
-    const isBottom = placement.includes('bottom');
-    const isLeft = placement.includes('left');
-    const isRight = placement.includes('right');
-    const container = getContainer();
-    const triggerRect = getTargetRect(container, triggerEl);
-    const { width: popupWidth, height: popupHeight } = popupEl.getBoundingClientRect();
-    let { scrollTop: top, scrollLeft: left } = getScrollLeftAndTop(container);
-    /**
-     * position
-     */
-    if (isLeft) {
-        left += triggerRect.left;
-    }
-    else if (isRight) {
-        left += triggerRect.right - popupWidth;
-    }
-    else {
-        left += triggerRect.left + (triggerRect.width - popupWidth) / 2;
-    }
-    if (isTop) {
-        top += triggerRect.top - popupHeight;
-    }
-    else if (isBottom) {
-        top += triggerRect.bottom;
-    }
-    else {
-        top += triggerRect.top + (triggerRect.height - popupHeight) / 2;
-        left += isLeft ? -popupWidth : popupWidth;
-    }
-    /**
-     * offset
-     */
-    top += isTop ? -verticalOffset : verticalOffset;
-    left += isLeft ? -horizontalOffset : horizontalOffset;
-    return { top, left };
-}
-
-export { calculatePosition };

package/components/Tooltip/index.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import { TooltipProps } from './typings';
-/**
- * @todo
- * To implement all placement.
- * Extract Popup from Tooltip.
- */
-declare function Tooltip({ children, triggers, popup, getContainer, placement, horizontalOffset, verticalOffset, transitionClassNames, mouseEnterDelay, mouseLeaveDelay, }: TooltipProps): React.JSX.Element;
-export default Tooltip;
-export { TooltipProps };

package/components/Tooltip/index.js

@@ -1,124 +0,0 @@
-import React, { useContext, useState, useRef, useCallback, Children, cloneElement, useLayoutEffect } from 'react';
-import { CSSTransition } from 'react-transition-group';
-import clsx from 'clsx';
-import { composeRefs } from '@quadrats/react/utils';
-import { ThemeContext } from '@quadrats/react/configs';
-import Portal from '../Portal/index.js';
-import { calculatePosition } from './calculatePosition.js';
-
-const clsPrefix = 'qdr-tooltip';
-const defaultTriggers = ['hover'];
-const defaultGetContainer = () => document.body;
-const defaultTransitionClassNames = {
-    enter: `${clsPrefix}__fade--enter`,
-    enterActive: `${clsPrefix}__fade--enter-active`,
-    exit: `${clsPrefix}__fade--exit`,
-    exitActive: `${clsPrefix}__fade--exit-active`,
-};
-/**
- * @todo
- * To implement all placement.
- * Extract Popup from Tooltip.
- */
-function Tooltip({ children, triggers = defaultTriggers, popup, getContainer = defaultGetContainer, placement = 'top', horizontalOffset = 0, verticalOffset = 0, transitionClassNames = defaultTransitionClassNames, mouseEnterDelay = 0, mouseLeaveDelay = 0.1, }) {
-    const { props: themeProps } = useContext(ThemeContext);
-    const [visible, setVisible] = useState(false);
-    const delayTimer = useRef(NaN);
-    const nodeRef = useRef(null);
-    const clearDelayTimer = useCallback(() => {
-        if (delayTimer.current) {
-            window.clearTimeout(delayTimer.current);
-            delayTimer.current = NaN;
-        }
-    }, []);
-    const delaySetVisible = useCallback((setVisibleAction, delay) => {
-        clearDelayTimer();
-        if (delay) {
-            delayTimer.current = window.setTimeout(() => {
-                setVisible(setVisibleAction);
-                clearDelayTimer();
-            }, delay * 1000);
-        }
-        else {
-            setVisible(setVisibleAction);
-        }
-    }, [clearDelayTimer]);
-    const triggerRef = useRef(null);
-    const popupRef = useRef(null);
-    const [firstPlacement, secondPlacement] = placement.split('-');
-    const child = Children.only(children);
-    const triggerProps = {};
-    const popupProps = {};
-    if (triggers.includes('click')) {
-        triggerProps.onClick = (event) => {
-            var _a, _b;
-            delaySetVisible((prevVisible) => !prevVisible, 0);
-            (_b = (_a = child.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
-        };
-    }
-    if (triggers.includes('hover')) {
-        popupProps.onMouseEnter = clearDelayTimer;
-        popupProps.onMouseLeave = (event) => {
-            var _a;
-            if (!(event.relatedTarget instanceof Node && ((_a = popupRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget)))) {
-                delaySetVisible(false, mouseLeaveDelay);
-            }
-        };
-        triggerProps.onMouseEnter = (event) => {
-            var _a, _b;
-            delaySetVisible(true, mouseEnterDelay);
-            (_b = (_a = child.props).onMouseEnter) === null || _b === void 0 ? void 0 : _b.call(_a, event);
-        };
-        triggerProps.onMouseLeave = (event) => {
-            var _a, _b;
-            delaySetVisible(false, mouseLeaveDelay);
-            (_b = (_a = child.props).onMouseLeave) === null || _b === void 0 ? void 0 : _b.call(_a, event);
-        };
-    }
-    const trigger = cloneElement(child, Object.assign(Object.assign({}, triggerProps), { ref: composeRefs([triggerRef, child.ref]) }));
-    useLayoutEffect(() => {
-        const triggerEl = triggerRef.current;
-        const popupEl = popupRef.current;
-        if (!(visible && triggerEl && popupEl)) {
-            return;
-        }
-        const { top, left } = calculatePosition({
-            placement,
-            getContainer,
-            horizontalOffset,
-            verticalOffset,
-        }, triggerEl, popupEl);
-        popupEl.style.top = `${top}px`;
-        popupEl.style.left = `${left}px`;
-    }, [visible, placement, getContainer, horizontalOffset, verticalOffset]);
-    useLayoutEffect(() => {
-        if (!visible) {
-            return;
-        }
-        function clickOutSideHandler(event) {
-            event.preventDefault();
-            const popupEl = popupRef.current;
-            const targetEl = event.target;
-            const targetUnmount = targetEl.offsetParent === null;
-            if (!((popupEl === null || popupEl === void 0 ? void 0 : popupEl.contains(targetEl)) || targetUnmount)) {
-                setVisible(false);
-            }
-        }
-        document.addEventListener('click', clickOutSideHandler);
-        return () => {
-            document.removeEventListener('click', clickOutSideHandler);
-        };
-    }, [visible]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Portal, { getContainer: getContainer },
-            React.createElement(CSSTransition, { nodeRef: nodeRef, in: visible, classNames: transitionClassNames, timeout: 200, unmountOnExit: true },
-                React.createElement("div", { ref: nodeRef, className: `${clsPrefix}__mask` },
-                    React.createElement("div", Object.assign({ className: clsx(themeProps.className, `${clsPrefix}__popup`, `${clsPrefix}__popup--${firstPlacement}`), ref: popupRef, style: themeProps.style }, popupProps),
-                        React.createElement("div", { className: clsx(`${clsPrefix}__arrow`, `${clsPrefix}__arrow--${firstPlacement}`, {
-                                [`${clsPrefix}__arrow--${placement}`]: secondPlacement,
-                            }) }),
-                        React.createElement("div", { className: `${clsPrefix}__content` }, popup))))),
-        trigger));
-}
-
-export { Tooltip as default };

package/components/Tooltip/typings.d.ts

@@ -1,29 +0,0 @@
-import { ReactNode } from 'react';
-import { CSSTransitionClassNames } from 'react-transition-group/CSSTransition';
-import { PortalProps } from '../Portal';
-export type TooltipPlacement = 'top' | 'right' | 'bottom' | 'left' | 'top-left' | 'top-right' | 'right-top' | 'right-bottom';
-export type TooltipTrigger = 'hover' | 'click';
-export interface TooltipProps {
-    children?: React.ReactNode;
-    triggers?: TooltipTrigger[];
-    popup?: ReactNode;
-    getContainer?: PortalProps['getContainer'];
-    /**
-     * Placement of popup.
-     */
-    placement?: TooltipPlacement;
-    /**
-     * Horizontal offset of popup between trigger.
-     */
-    horizontalOffset?: number;
-    /**
-     * Vertical offset of popup between trigger.
-     */
-    verticalOffset?: number;
-    /**
-     * classNames props of CSSTransition in react-transition-group.
-     */
-    transitionClassNames?: string | CSSTransitionClassNames;
-    mouseEnterDelay?: number;
-    mouseLeaveDelay?: number;
-}

package/components/Transition/SlideFade.d.ts

@@ -1,20 +0,0 @@
-import React from 'react';
-import { TransitionImplementationProps } from './Transition';
-export type MotionDurationType = 'shortest' | 'shorter' | 'short' | 'standard' | 'long';
-export declare const MOTION_DURATION: Readonly<Record<MotionDurationType, number>>;
-export type MotionEasingType = 'standard' | 'emphasized' | 'decelerated' | 'accelerated';
-export declare const MOTION_EASING: Readonly<Record<MotionEasingType, string>>;
-export declare function reflow(node: HTMLElement): void;
-export type SlideFadeDirection = 'left' | 'right' | 'up' | 'down';
-export interface SlideFadeProps extends TransitionImplementationProps {
-    /**
-     * The direction of child element will enter to.
-     * @default 'down'
-     */
-    direction?: SlideFadeDirection;
-}
-/**
- * The react component for `mezzanine` transition slide fade.
- */
-declare const SlideFade: React.ForwardRefExoticComponent<SlideFadeProps & React.RefAttributes<HTMLElement>>;
-export default SlideFade;

package/components/Transition/SlideFade.js

@@ -1,91 +0,0 @@
-import { __rest } from 'tslib';
-import React, { forwardRef, useRef, cloneElement } from 'react';
-import { composeRefs } from '@quadrats/react/utils';
-import Transition from './Transition.js';
-import { useSetNodeTransition } from './useSetNodeTransition.js';
-
-const MOTION_DURATION = {
-    shorter: 200,
-    short: 250};
-const MOTION_EASING = {
-    decelerated: 'cubic-bezier(0, 0, 0.3, 1)',
-    accelerated: 'cubic-bezier(0.32, 0, 0.67, 0)',
-};
-function reflow(node) {
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    node.scrollTop;
-}
-function getStyle(state, inProp, direction) {
-    if (state === 'entering' || state === 'entered') {
-        return {
-            opacity: 1,
-            transform: 'translate3d(0, 0, 0)',
-        };
-    }
-    const style = {
-        opacity: 0,
-        transform: {
-            up: 'translate3d(0, 100%, 0)',
-            right: 'translate3d(-100%, 0, 0)',
-            down: 'translate3d(0, -100%, 0)',
-            left: 'translate3d(100%, 0, 0)',
-        }[direction],
-    };
-    if (state === 'exited' && !inProp) {
-        style.visibility = 'hidden';
-    }
-    return style;
-}
-const defaultDuration = {
-    enter: MOTION_DURATION.short,
-    exit: MOTION_DURATION.shorter,
-};
-const defaultEasing = {
-    enter: MOTION_EASING.decelerated,
-    exit: MOTION_EASING.accelerated,
-};
-/**
- * The react component for `mezzanine` transition slide fade.
- */
-const SlideFade = forwardRef(function SlideFade(props, ref) {
-    const { children, direction = 'down', delay = 0, duration: durationProp = defaultDuration, easing = defaultEasing, in: inProp = false, onEnter, onEntered, onExit, onExited } = props, rest = __rest(props, ["children", "direction", "delay", "duration", "easing", "in", "onEnter", "onEntered", "onExit", "onExited"]);
-    const duration = durationProp === 'auto' ? defaultDuration : durationProp;
-    const nodeRef = useRef(null);
-    const composedNodeRef = composeRefs([ref, nodeRef]);
-    const [setNodeTransition, resetNodeTransition] = useSetNodeTransition({
-        delay,
-        duration,
-        easing,
-        properties: ['opacity', 'transform'],
-    }, children === null || children === void 0 ? void 0 : children.props.style);
-    const transitionProps = Object.assign(Object.assign({}, rest), { duration, in: inProp, nodeRef,
-        onEnter(node, isAppearing) {
-            setNodeTransition(node, 'enter');
-            reflow(node);
-            if (onEnter) {
-                onEnter(node, isAppearing);
-            }
-        },
-        onEntered(node, isAppearing) {
-            resetNodeTransition(node);
-            if (onEntered) {
-                onEntered(node, isAppearing);
-            }
-        },
-        onExit(node) {
-            setNodeTransition(node, 'exit');
-            if (onExit) {
-                onExit(node);
-            }
-        },
-        onExited(node) {
-            resetNodeTransition(node);
-            if (onExited) {
-                onExited(node);
-            }
-        } });
-    return (React.createElement(Transition, Object.assign({}, transitionProps), children &&
-        ((state) => cloneElement(children, Object.assign(Object.assign({}, children.props), { ref: composedNodeRef, style: Object.assign(Object.assign({}, getStyle(state, inProp, direction)), children.props.style) })))));
-});
-
-export { MOTION_DURATION, MOTION_EASING, SlideFade as default, reflow };

package/components/Transition/Transition.d.ts

@@ -1,98 +0,0 @@
-import { JSX, RefObject, CSSProperties, ReactElement, JSXElementConstructor, Ref } from 'react';
-import { TransitionStatus as TransitionState, TransitionChildren } from 'react-transition-group/Transition';
-export type NativeElementTag = keyof JSX.IntrinsicElements;
-export { TransitionState };
-export type TransitionMode = 'enter' | 'exit';
-export type TransitionDuration = 'auto' | number | {
-    [mode in TransitionMode]?: number;
-};
-export type TransitionEasing = string | {
-    [mode in TransitionMode]?: string;
-};
-export type TransitionDelay = number | {
-    [mode in TransitionMode]?: number;
-};
-export type TransitionEnterHandler = (node: HTMLElement, isAppearing: boolean) => void;
-export type TransitionExitHandler = (node: HTMLElement) => void;
-export interface TransitionImplementationChildProps {
-    ref?: Ref<HTMLElement>;
-    style?: CSSProperties;
-}
-export interface TransitionProps {
-    /**
-     * A custom callback for adding custom transition end handler
-     */
-    addEndListener?: (node: HTMLElement, next: VoidFunction) => void;
-    /**
-     * Whether to perform the enter transition if `in` is true while it first mount
-     * @true
-     */
-    appear?: boolean;
-    /**
-     * A react node or a render props called with transition state
-     */
-    children?: TransitionChildren;
-    /**
-     * The duration of the transition, in milliseconds
-     */
-    duration?: TransitionDuration;
-    /**
-     * The flag to trigger toggling transition between `enter` and `exit` state
-     * @default false
-     */
-    in?: boolean;
-    /**
-     * Whether to keeping mounting the child if exited.
-     * @default false
-     */
-    keepMount?: boolean;
-    /**
-     * Whether to mount the child at the first time entering.
-     * @default true
-     */
-    lazyMount?: boolean;
-    /**
-     * A ref of DOM element need to transition
-     */
-    nodeRef: RefObject<HTMLElement | null>;
-    /**
-     * Callback fired before the `entering` state applied
-     */
-    onEnter?: TransitionEnterHandler;
-    /**
-     * Callback fired after the `entering` state applied
-     */
-    onEntering?: TransitionEnterHandler;
-    /**
-     * Callback fired after the `entered` state applied
-     */
-    onEntered?: TransitionEnterHandler;
-    /**
-     * Callback fired before the `exiting` state applied.
-     */
-    onExit?: TransitionExitHandler;
-    /**
-     * Callback fired after the `exiting` state applied.
-     */
-    onExiting?: TransitionExitHandler;
-    /**
-     * Callback fired after the `exited` state applied.
-     */
-    onExited?: TransitionExitHandler;
-}
-export interface TransitionImplementationProps extends Omit<TransitionProps, 'addEndListener' | 'children' | 'nodeRef'> {
-    children: ReactElement<TransitionImplementationChildProps, NativeElementTag | JSXElementConstructor<TransitionImplementationChildProps>>;
-    /**
-     * The delay of the transition, in milliseconds
-     */
-    delay?: TransitionDelay;
-    /**
-     * The timing function of the transition
-     */
-    easing?: TransitionEasing;
-}
-/**
- * The react component for `mezzanine` transition.
- */
-declare function Transition(props: TransitionProps): JSX.Element;
-export default Transition;

package/components/Transition/Transition.js

@@ -1,27 +0,0 @@
-import React from 'react';
-import ReactTransition from 'react-transition-group/Transition';
-
-/**
- * The react component for `mezzanine` transition.
- */
-function Transition(props) {
-    const { addEndListener, appear = true, children, duration, in: inProp = false, keepMount = false, lazyMount = true, nodeRef, onEnter, onEntering, onEntered, onExit, onExiting, onExited, } = props;
-    const addNodeToCallback = (callback) => {
-        if (!callback) {
-            return;
-        }
-        return (...args) => {
-            const node = nodeRef.current;
-            if (node) {
-                callback(node, ...args);
-            }
-        };
-    };
-    return (React.createElement(ReactTransition
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    , { 
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        addEndListener: addNodeToCallback(addEndListener), appear: appear, in: inProp, mountOnEnter: lazyMount, nodeRef: nodeRef, onEnter: addNodeToCallback(onEnter), onEntering: addNodeToCallback(onEntering), onEntered: addNodeToCallback(onEntered), onExit: addNodeToCallback(onExit), onExiting: addNodeToCallback(onExiting), onExited: addNodeToCallback(onExited), timeout: duration === 'auto' ? undefined : duration, unmountOnExit: !keepMount }, children));
-}
-
-export { Transition as default };

package/components/Transition/getTransitionStyleProps.d.ts

@@ -1,16 +0,0 @@
-import { TransitionDelay, TransitionDuration, TransitionEasing, TransitionMode } from './Transition';
-export declare function getTransitionDuration(mode: TransitionMode, duration: TransitionDuration, resolveAuto?: number | ((mode: TransitionMode) => number)): number;
-export declare function getTransitionTimingFunction(mode: TransitionMode, easing: TransitionEasing): string;
-export declare function getTransitionDelay(mode: TransitionMode, delay: TransitionDelay): number;
-export interface GetTransitionStyleProps {
-    delay: TransitionDelay;
-    duration: TransitionDuration;
-    easing: TransitionEasing;
-    resolveAutoDuration?: Parameters<typeof getTransitionDuration>[2];
-}
-export interface TransitionStyleProps {
-    delay: number;
-    duration: number;
-    timingFunction: string;
-}
-export declare function getTransitionStyleProps(mode: TransitionMode, props: GetTransitionStyleProps): TransitionStyleProps;

package/components/Transition/getTransitionStyleProps.js

@@ -1,25 +0,0 @@
-function getTransitionDuration(mode, duration, resolveAuto) {
-    if (duration !== 'auto') {
-        return typeof duration === 'number' ? duration : duration[mode] || 0;
-    }
-    if (typeof resolveAuto === 'function') {
-        return resolveAuto(mode);
-    }
-    return resolveAuto !== null && resolveAuto !== void 0 ? resolveAuto : 0;
-}
-function getTransitionTimingFunction(mode, easing) {
-    return typeof easing === 'string' ? easing : easing[mode] || 'ease';
-}
-function getTransitionDelay(mode, delay) {
-    return typeof delay === 'number' ? delay : delay[mode] || 0;
-}
-function getTransitionStyleProps(mode, props) {
-    const { delay, duration, easing, resolveAutoDuration } = props;
-    return {
-        delay: getTransitionDelay(mode, delay),
-        duration: getTransitionDuration(mode, duration, resolveAutoDuration),
-        timingFunction: getTransitionTimingFunction(mode, easing),
-    };
-}
-
-export { getTransitionDelay, getTransitionDuration, getTransitionStyleProps, getTransitionTimingFunction };

package/components/Transition/useSetNodeTransition.d.ts

@@ -1,7 +0,0 @@
-import { CSSProperties } from 'react';
-import { TransitionMode } from './Transition';
-import { GetTransitionStyleProps, TransitionStyleProps } from './getTransitionStyleProps';
-export interface UseSetNodeTransitionProps extends GetTransitionStyleProps {
-    properties: (string | [string, (props: TransitionStyleProps, mode: TransitionMode) => TransitionStyleProps])[];
-}
-export declare function useSetNodeTransition(props: UseSetNodeTransitionProps, style?: CSSProperties): readonly [(node: HTMLElement, mode: TransitionMode) => void, (node: HTMLElement) => void];

package/components/Transition/useSetNodeTransition.js

@@ -1,35 +0,0 @@
-import { getTransitionStyleProps } from './getTransitionStyleProps.js';
-
-function useSetNodeTransition(props, style) {
-    /* eslint-disable no-param-reassign */
-    const setNodeTransition = (node, mode) => {
-        const transitionProps = getTransitionStyleProps(mode, props);
-        const { properties } = props;
-        node.style.transition = properties
-            .map((propertyOrConfig) => {
-            let property;
-            let resolvedTransitionProps = transitionProps;
-            if (typeof propertyOrConfig === 'string') {
-                property = propertyOrConfig;
-            }
-            else {
-                const [, overrideTransitionProps] = propertyOrConfig;
-                [property] = propertyOrConfig;
-                resolvedTransitionProps = overrideTransitionProps(resolvedTransitionProps, mode);
-            }
-            const { delay, duration, timingFunction } = resolvedTransitionProps;
-            return `${property} ${duration}ms ${timingFunction} ${delay}ms`;
-        })
-            .join(',');
-    };
-    const resetNodeTransition = (node) => {
-        const { transition } = style || {};
-        if (transition) {
-            node.style.transition = transition;
-        }
-    };
-    /* eslint-enable no-param-reassign */
-    return [setNodeTransition, resetNodeTransition];
-}
-
-export { useSetNodeTransition };