@quadrats/react 1.1.8 → 1.1.10

package/components/src/Tooltip/index.tsx

@@ -1,187 +0,0 @@
-import React, {
-  HTMLAttributes,
-  ReactElement,
-  SetStateAction,
-  Children,
-  cloneElement,
-  useContext,
-  useRef,
-  useState,
-  useCallback,
-  useLayoutEffect,
-} from 'react';
-import { CSSTransition } from 'react-transition-group';
-import { CSSTransitionClassNames } from 'react-transition-group/CSSTransition';
-import clsx from 'clsx';
-import { composeRefs } from '@quadrats/react/utils';
-import { ThemeContext } from '@quadrats/react/configs';
-import Portal from '../Portal';
-import { TooltipTrigger, TooltipProps } from './typings';
-import { calculatePosition } from './calculatePosition';
-
-const clsPrefix = 'qdr-tooltip';
-
-const defaultTriggers: TooltipTrigger[] = ['hover'];
-const defaultGetContainer = () => document.body;
-const defaultTransitionClassNames: CSSTransitionClassNames = {
-  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,
-}: TooltipProps) {
-  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: SetStateAction<boolean>, delay: number) => {
-      clearDelayTimer();
-
-      if (delay) {
-        delayTimer.current = window.setTimeout(() => {
-          setVisible(setVisibleAction);
-          clearDelayTimer();
-        }, delay * 1000);
-      } else {
-        setVisible(setVisibleAction);
-      }
-    },
-    [clearDelayTimer],
-  );
-
-  const triggerRef = useRef<HTMLElement>(null);
-  const popupRef = useRef<HTMLDivElement>(null);
-  const [firstPlacement, secondPlacement] = placement.split('-');
-  const child = Children.only(children) as ReactElement;
-  const triggerProps: HTMLAttributes<HTMLElement> = {};
-  const popupProps: HTMLAttributes<HTMLDivElement> = {};
-
-  if (triggers.includes('click')) {
-    triggerProps.onClick = (event) => {
-      delaySetVisible((prevVisible) => !prevVisible, 0);
-      (child.props as any).onClick?.(event);
-    };
-  }
-
-  if (triggers.includes('hover')) {
-    popupProps.onMouseEnter = clearDelayTimer;
-    popupProps.onMouseLeave = (event) => {
-      if (!(event.relatedTarget instanceof Node && popupRef.current?.contains(event.relatedTarget))) {
-        delaySetVisible(false, mouseLeaveDelay);
-      }
-    };
-
-    triggerProps.onMouseEnter = (event) => {
-      delaySetVisible(true, mouseEnterDelay);
-      (child.props as any).onMouseEnter?.(event);
-    };
-
-    triggerProps.onMouseLeave = (event) => {
-      delaySetVisible(false, mouseLeaveDelay);
-      (child.props as any).onMouseLeave?.(event);
-    };
-  }
-
-  const trigger = cloneElement(child, { ...triggerProps, ref: composeRefs([triggerRef, (child as any).ref]) } as any);
-
-  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: MouseEvent) {
-      event.preventDefault();
-
-      const popupEl = popupRef.current;
-      const targetEl = event.target as HTMLElement;
-      const targetUnmount = targetEl.offsetParent === null;
-
-      if (!(popupEl?.contains(targetEl) || targetUnmount)) {
-        setVisible(false);
-      }
-    }
-
-    document.addEventListener('click', clickOutSideHandler);
-
-    return () => {
-      document.removeEventListener('click', clickOutSideHandler);
-    };
-  }, [visible]);
-
-  return (
-    <>
-      <Portal getContainer={getContainer}>
-        <CSSTransition nodeRef={nodeRef} in={visible} classNames={transitionClassNames} timeout={200} unmountOnExit>
-          <div ref={nodeRef} className={`${clsPrefix}__mask`}>
-            <div
-              className={clsx(themeProps.className, `${clsPrefix}__popup`, `${clsPrefix}__popup--${firstPlacement}`)}
-              ref={popupRef}
-              style={themeProps.style}
-              {...popupProps}
-            >
-              <div
-                className={clsx(`${clsPrefix}__arrow`, `${clsPrefix}__arrow--${firstPlacement}`, {
-                  [`${clsPrefix}__arrow--${placement}`]: secondPlacement,
-                })}
-              />
-              <div className={`${clsPrefix}__content`}>{popup}</div>
-            </div>
-          </div>
-        </CSSTransition>
-      </Portal>
-      {trigger}
-    </>
-  );
-}
-
-export default Tooltip;
-
-export { TooltipProps };

package/components/src/Tooltip/typings.ts

@@ -1,40 +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/src/Transition/SlideFade.tsx

@@ -1,159 +0,0 @@
-import React, { cloneElement, CSSProperties, forwardRef, useRef } from 'react';
-import { composeRefs } from '@quadrats/react/utils';
-import Transition, { TransitionState, TransitionImplementationProps, TransitionProps } from './Transition';
-import { useSetNodeTransition } from './useSetNodeTransition';
-import { TransitionChildren } from 'react-transition-group/Transition';
-
-export type MotionDurationType = 'shortest' | 'shorter' | 'short' | 'standard' | 'long';
-
-export const MOTION_DURATION: Readonly<Record<MotionDurationType, number>> = {
-  shortest: 150,
-  shorter: 200,
-  short: 250,
-  standard: 300,
-  long: 375,
-};
-
-export type MotionEasingType = 'standard' | 'emphasized' | 'decelerated' | 'accelerated';
-
-export const MOTION_EASING: Readonly<Record<MotionEasingType, string>> = {
-  standard: 'cubic-bezier(0.58, 0.01, 0.29, 1.01)',
-  emphasized: 'cubic-bezier(0.83, 0, 0.17, 1)',
-  decelerated: 'cubic-bezier(0, 0, 0.3, 1)',
-  accelerated: 'cubic-bezier(0.32, 0, 0.67, 0)',
-};
-
-export function reflow(node: HTMLElement): void {
-  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-  node.scrollTop;
-}
-
-function getStyle(state: TransitionState, inProp: boolean, direction: SlideFadeDirection): CSSProperties {
-  if (state === 'entering' || state === 'entered') {
-    return {
-      opacity: 1,
-      transform: 'translate3d(0, 0, 0)',
-    };
-  }
-
-  const style: CSSProperties = {
-    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,
-};
-
-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.
- */
-const SlideFade = forwardRef<HTMLElement, SlideFadeProps>(function SlideFade(props: SlideFadeProps, ref) {
-  const {
-    children,
-    direction = 'down',
-    delay = 0,
-    duration: durationProp = defaultDuration,
-    easing = defaultEasing,
-    in: inProp = false,
-    onEnter,
-    onEntered,
-    onExit,
-    onExited,
-    ...rest
-  } = props;
-
-  const duration = durationProp === 'auto' ? defaultDuration : durationProp;
-  const nodeRef = useRef<HTMLElement>(null);
-  const composedNodeRef = composeRefs([ref, nodeRef]);
-  const [setNodeTransition, resetNodeTransition] = useSetNodeTransition(
-    {
-      delay,
-      duration,
-      easing,
-      properties: ['opacity', 'transform'],
-    },
-    children?.props.style,
-  );
-
-  const transitionProps: TransitionProps = {
-    ...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 (
-    <Transition {...transitionProps}>
-      {children &&
-        (((state) =>
-          cloneElement(children, {
-            ...children.props,
-            ref: composedNodeRef,
-            style: {
-              ...getStyle(state, inProp, direction),
-              ...children.props.style,
-            },
-          })) as TransitionChildren)}
-    </Transition>
-  );
-});
-
-export default SlideFade;

package/components/src/Transition/Transition.tsx

@@ -1,176 +0,0 @@
-import React, { JSX, RefObject, CSSProperties, ReactElement, JSXElementConstructor, Ref } from 'react';
-import ReactTransition, {
-  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.
- */
-function Transition(props: TransitionProps) {
-  const {
-    addEndListener,
-    appear = true,
-    children,
-    duration,
-    in: inProp = false,
-    keepMount = false,
-    lazyMount = true,
-    nodeRef,
-    onEnter,
-    onEntering,
-    onEntered,
-    onExit,
-    onExiting,
-    onExited,
-  } = props;
-
-  const addNodeToCallback = <F extends (node: HTMLElement, ...args: any[]) => void>(callback?: F) => {
-    if (!callback) {
-      return;
-    }
-
-    return (...args: F extends (node: HTMLElement, ...a: infer A) => void ? A : never) => {
-      const node = nodeRef.current;
-
-      if (node) {
-        callback(node, ...args);
-      }
-    };
-  };
-
-  return (
-    <ReactTransition
-      // 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}
-    </ReactTransition>
-  );
-}
-
-export default Transition;

package/components/src/Transition/getTransitionStyleProps.ts

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

package/components/src/Transition/useSetNodeTransition.ts

@@ -1,46 +0,0 @@
-import { CSSProperties } from 'react';
-import { TransitionMode } from './Transition';
-import { GetTransitionStyleProps, getTransitionStyleProps, TransitionStyleProps } from './getTransitionStyleProps';
-
-export interface UseSetNodeTransitionProps extends GetTransitionStyleProps {
-  properties: (string | [string, (props: TransitionStyleProps, mode: TransitionMode) => TransitionStyleProps])[];
-}
-
-export function useSetNodeTransition(props: UseSetNodeTransitionProps, style?: CSSProperties) {
-  /* eslint-disable no-param-reassign */
-  const setNodeTransition = (node: HTMLElement, mode: TransitionMode) => {
-    const transitionProps = getTransitionStyleProps(mode, props);
-    const { properties } = props;
-
-    node.style.transition = properties
-      .map((propertyOrConfig) => {
-        let property: string;
-        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: HTMLElement) => {
-    const { transition } = style || {};
-
-    if (transition) {
-      node.style.transition = transition;
-    }
-  };
-  /* eslint-enable no-param-reassign */
-
-  return [setNodeTransition, resetNodeTransition] as const;
-}

package/components/src/index.ts

@@ -1,17 +0,0 @@
-export { BaseFieldProps, default as BaseField } from './BaseField';
-export { ButtonProps, default as Button } from './Button';
-export { HintProps, default as Hint, HintsProps, Hints } from './Hint';
-export { ImageUploaderItem, ImageUploaderProps, default as ImageUploader } from './ImageUploader';
-export { InputProps, default as Input } from './Input';
-export { TextareaProps, default as Textarea } from './Textarea';
-export { IconProps, default as Icon } from './Icon';
-export { ModalProps, default as Modal } from './Modal';
-export { MessageSeverity, default as Message } from './Message';
-export { PortalProps, default as Portal } from './Portal';
-export { ProgressProps, default as Progress } from './Progress';
-export { SegmentedControlProps, default as SegmentedControl } from './SegmentedControl';
-export { ToggleProps, default as Toggle } from './Toggle';
-export { TooltipProps, default as Tooltip } from './Tooltip';
-
-export * from './Notifier/typings';
-export * from './Notifier/createNotifier';

package/components/tsconfig.build.json

@@ -1,5 +0,0 @@
-{
-  "extends": "../../../tsconfig.base.json",
-  "exclude": ["**/*.spec.*"],
-  "include": ["./src"]
-}