@quadrats/react 1.1.8 → 1.1.10

package/components/Transition/Transition.d.ts

@@ -0,0 +1,98 @@
+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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,35 @@
+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 };

package/components/baseField.css

@@ -0,0 +1 @@
+.qdr-base-field{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--qdr-spacing-2)}.qdr-base-field__label{color:var(--qdr-text-secondary);font-size:var(--qdr-typography-basic-h6-font-size);line-height:var(--qdr-typography-basic-h6-line-height);letter-spacing:var(--qdr-typography-basic-h6-letter-spacing);font-weight:var(--qdr-typography-basic-h6-font-weight);margin:0}.qdr-base-field__required-mark{display:inline-block;margin-left:var(--qdr-spacing-2);color:var(--qdr-error)}.qdr-base-field__error-message{display:flex;align-items:center;justify-content:flex-start;gap:var(--qdr-spacing-2);color:var(--qdr-error);font-size:var(--qdr-typography-basic-caption-font-size);line-height:var(--qdr-typography-basic-caption-line-height);letter-spacing:var(--qdr-typography-basic-caption-letter-spacing);font-weight:var(--qdr-typography-basic-caption-font-weight)}

package/components/button.css

@@ -0,0 +1 @@
+.qdr-button{display:flex;align-items:center;justify-content:center;gap:var(--qdr-spacing-2);border:none;background-color:rgba(0,0,0,0);cursor:pointer;transition:all var(--qdr-duration-short) var(--qdr-easing-standard)}.qdr-button--small{padding:0 var(--qdr-spacing-7);font-size:var(--qdr-typography-basic-button2-font-size);line-height:var(--qdr-typography-basic-button2-line-height);letter-spacing:var(--qdr-typography-basic-button2-letter-spacing);font-weight:var(--qdr-typography-basic-button2-font-weight)}.qdr-button--medium{padding:var(--qdr-spacing-1) var(--qdr-spacing-7);font-size:var(--qdr-typography-basic-button2-font-size);line-height:var(--qdr-typography-basic-button2-line-height);letter-spacing:var(--qdr-typography-basic-button2-letter-spacing);font-weight:var(--qdr-typography-basic-button2-font-weight)}.qdr-button--large{padding:0 var(--qdr-spacing-7);font-size:var(--qdr-typography-basic-button1-font-size);line-height:var(--qdr-typography-basic-button1-line-height);letter-spacing:var(--qdr-typography-basic-button1-letter-spacing);font-weight:var(--qdr-typography-basic-button1-font-weight)}.qdr-button--primary{background-color:var(--qdr-primary);color:var(--qdr-on-primary);border:1px solid var(--qdr-primary)}.qdr-button--primary:hover{background-color:var(--qdr-primary-light);border-color:var(--qdr-primary-light)}.qdr-button--primary:active{background-color:var(--qdr-primary-dark);border-color:var(--qdr-primary-dark)}.qdr-button--primary:disabled{color:var(--qdr-action-disabled);background-color:var(--qdr-action-disabled-bg);border-color:var(--qdr-action-disabled-bg);cursor:not-allowed}.qdr-button--primary.qdr-button--danger{background-color:var(--qdr-error);color:var(--qdr-on-error);border:1px solid var(--qdr-error)}.qdr-button--primary.qdr-button--danger:hover{background-color:var(--qdr-error-light);border-color:var(--qdr-error-light)}.qdr-button--primary.qdr-button--danger:active{background-color:var(--qdr-error-dark);border-color:var(--qdr-error-dark)}.qdr-button--primary.qdr-button--danger:disabled{color:var(--qdr-action-disabled);background-color:var(--qdr-action-disabled-bg);border-color:var(--qdr-action-disabled-bg);cursor:not-allowed}.qdr-button--secondary{background-color:rgba(0,0,0,0);color:var(--qdr-action-active);border:1px solid var(--qdr-border)}.qdr-button--secondary:hover{color:var(--qdr-primary);border-color:var(--qdr-primary-light)}.qdr-button--secondary:active{color:var(--qdr-primary-dark);border-color:var(--qdr-primary-dark)}.qdr-button--secondary:disabled{color:var(--qdr-action-disabled);border-color:var(--qdr-action-disabled);background-color:var(--qdr-action-disabled-bg);cursor:not-allowed}.qdr-button--secondary.qdr-button--danger{background-color:rgba(0,0,0,0);color:var(--qdr-error);border:1px solid var(--qdr-border)}.qdr-button--secondary.qdr-button--danger:hover{color:var(--qdr-error-light);border-color:var(--qdr-error-light)}.qdr-button--secondary.qdr-button--danger:active{color:var(--qdr-error-dark);border-color:var(--qdr-error-dark)}.qdr-button--secondary.qdr-button--danger:disabled{color:var(--qdr-action-disabled);border-color:var(--qdr-action-disabled);background-color:var(--qdr-action-disabled-bg);cursor:not-allowed}.qdr-button--outlined{background-color:rgba(0,0,0,0);color:var(--qdr-primary);border:1px solid var(--qdr-primary)}.qdr-button--outlined:hover{background-color:var(--qdr-primary-hover-bg);border-color:var(--qdr-primary-light)}.qdr-button--outlined:active{background-color:var(--qdr-primary-active-bg);border-color:var(--qdr-primary)}.qdr-button--outlined:disabled{color:var(--qdr-action-disabled);border-color:var(--qdr-action-disabled);background-color:rgba(0,0,0,0);cursor:not-allowed}.qdr-button--outlined.qdr-button--danger{background-color:rgba(0,0,0,0);color:var(--qdr-error);border:1px solid var(--qdr-error)}.qdr-button--outlined.qdr-button--danger:hover{background-color:var(--qdr-error-hover-bg);border-color:var(--qdr-error-light)}.qdr-button--outlined.qdr-button--danger:active{background-color:var(--qdr-error-active-bg);border-color:var(--qdr-error)}.qdr-button--outlined.qdr-button--danger:disabled{color:var(--qdr-action-disabled);border-color:var(--qdr-action-disabled);background-color:rgba(0,0,0,0);cursor:not-allowed}.qdr-button--dashed{background-color:rgba(0,0,0,0);color:var(--qdr-primary);border:1px dashed var(--qdr-border)}.qdr-button--dashed:hover{background-color:var(--qdr-primary-hover-bg);border-color:var(--qdr-primary-light)}.qdr-button--dashed:active{background-color:var(--qdr-primary-active-bg);border-color:var(--qdr-primary-dark)}.qdr-button--dashed:disabled{color:var(--qdr-action-disabled);border-color:var(--qdr-action-disabled);background-color:rgba(0,0,0,0);cursor:not-allowed}.qdr-button--dashed.qdr-button--danger{background-color:rgba(0,0,0,0);color:var(--qdr-error);border:1px dashed var(--qdr-error)}.qdr-button--dashed.qdr-button--danger:hover{background-color:var(--qdr-error-hover-bg);border-color:var(--qdr-error-light)}.qdr-button--dashed.qdr-button--danger:active{background-color:var(--qdr-error-active-bg);border-color:var(--qdr-error-dark)}.qdr-button--dashed.qdr-button--danger:disabled{color:var(--qdr-action-disabled);border-color:var(--qdr-action-disabled);background-color:rgba(0,0,0,0);cursor:not-allowed}.qdr-button--tertiary{color:var(--qdr-primary)}.qdr-button--tertiary:hover{background-color:var(--qdr-primary-hover-bg)}.qdr-button--tertiary:active{background-color:var(--qdr-primary-active-bg)}.qdr-button--tertiary:disabled{color:var(--qdr-action-disabled);background-color:rgba(0,0,0,0);cursor:not-allowed}.qdr-button--tertiary.qdr-button--danger{color:var(--qdr-error)}.qdr-button--tertiary.qdr-button--danger:hover{background-color:var(--qdr-error-hover-bg)}.qdr-button--tertiary.qdr-button--danger:active{background-color:var(--qdr-error-active-bg)}.qdr-button--tertiary.qdr-button--danger:disabled{color:var(--qdr-action-disabled);background-color:rgba(0,0,0,0);cursor:not-allowed}

package/components/components.css

@@ -0,0 +1 @@
+@import"./BaseField/baseField.scss";@import"./Button/button.scss";@import"./Hint/hint.scss";@import"./ImageUploader/imageUploader.scss";@import"./Input/input.scss";@import"./Message/message.scss";@import"./Modal/modal.scss";@import"./Progress/progress.scss";@import"./SegmentedControl/segmentedControl.scss";@import"./Textarea/textarea.scss";@import"./Toggle/toggle.scss";@import"./Tooltip/tooltip.scss"

package/components/hint.css

@@ -0,0 +1 @@
+.qdr-hint{display:flex;align-items:flex-start;justify-content:flex-start;gap:var(--qdr-spacing-2)}.qdr-hint__icon{display:flex;align-items:center;justify-content:center}.qdr-hint__icon--info{color:var(--qdr-primary)}.qdr-hint__icon--success{color:var(--qdr-success)}.qdr-hint__icon--warning{color:var(--qdr-warning)}.qdr-hint__icon--error{color:var(--qdr-error)}.qdr-hint__children{font-size:var(--qdr-typography-basic-caption-font-size);line-height:var(--qdr-typography-basic-caption-line-height);letter-spacing:var(--qdr-typography-basic-caption-letter-spacing);font-weight:var(--qdr-typography-basic-caption-font-weight)}.qdr-hint__children--info{color:var(--qdr-text-secondary)}.qdr-hint__children--success{color:var(--qdr-success)}.qdr-hint__children--warning{color:var(--qdr-warning)}.qdr-hint__children--error{color:var(--qdr-error)}.qdr-hints{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--qdr-spacing-2)}

package/components/imageUploader.css

@@ -0,0 +1 @@
+.qdr-image-uploader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--qdr-spacing-4);border:1px dashed var(--qdr-border);background-color:var(--qdr-block);border-radius:var(--qdr-radius-1);box-sizing:border-box;cursor:pointer;transition:border-color var(--qdr-duration-short) var(--qdr-easing-standard),background-color var(--qdr-duration-short) var(--qdr-easing-standard)}.qdr-image-uploader:hover,.qdr-image-uploader--dragging{border-color:var(--qdr-primary);background-color:var(--qdr-bg)}.qdr-image-uploader--dragging{padding:var(--qdr-spacing-9);gap:var(--qdr-spacing-6)}.qdr-image-uploader__previewer{border-style:solid;cursor:default;overflow:hidden}.qdr-image-uploader__wrapper{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--qdr-spacing-4)}.qdr-image-uploader__icon{color:var(--qdr-primary);transition:color var(--qdr-duration-short) var(--qdr-easing-standard);pointer-events:none}.qdr-image-uploader__main-text{display:block;color:var(--qdr-text-primary);font-size:var(--qdr-typography-basic-body1-font-size);line-height:var(--qdr-typography-basic-body1-line-height);letter-spacing:var(--qdr-typography-basic-body1-letter-spacing);font-weight:var(--qdr-typography-basic-body1-font-weight);text-align:center;transition:color var(--qdr-duration-short) var(--qdr-easing-standard);pointer-events:none}.qdr-image-uploader__info-text{display:block;color:var(--qdr-text-secondary);font-size:var(--qdr-typography-basic-body2-font-size);line-height:var(--qdr-typography-basic-body2-line-height);letter-spacing:var(--qdr-typography-basic-body2-letter-spacing);font-weight:var(--qdr-typography-basic-body2-font-weight);text-align:center;transition:color var(--qdr-duration-short) var(--qdr-easing-standard);pointer-events:none}.qdr-image-uploader__dragging-wrapper{width:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--qdr-spacing-2);pointer-events:none}.qdr-image-uploader__image-wrapper{position:relative;display:flex;align-items:center;justify-content:center}.qdr-image-uploader__image-wrapper::after{content:"";position:absolute;inset:0;background-color:rgba(0,0,0,0);transition:background-color var(--qdr-duration-short) var(--qdr-easing-standard)}.qdr-image-uploader__image-wrapper:hover::after{background-color:var(--qdr-overlay-dark)}.qdr-image-uploader__image-wrapper:hover .qdr-image-uploader__inline-toolbar{opacity:1;pointer-events:auto}.qdr-image-uploader__image{width:100%}.qdr-image-uploader--error{border-color:var(--qdr-error) !important;background-color:var(--qdr-error-hover-bg)}.qdr-image-uploader--error .qdr-image-uploader__icon{color:var(--qdr-error)}.qdr-image-uploader--error .qdr-image-uploader__main-text{color:var(--qdr-error)}.qdr-image-uploader--disabled{cursor:not-allowed;border-color:var(--qdr-border) !important;background-color:var(--qdr-action-disabled-bg) !important}.qdr-image-uploader--disabled .qdr-image-uploader__icon{color:var(--qdr-action-disabled)}.qdr-image-uploader--disabled .qdr-image-uploader__main-text{color:var(--qdr-text-disabled)}