@teamturing/react-kit 2.3.1 → 2.5.0

package/dist/utils/index.d.ts

@@ -1,3 +1,4 @@
 export { forcePixelValue } from './forcePixelValue';
 export { isArray } from './isArray';
+export { isFunction } from './isFunction';
 export { isNullable } from './isNullable';

package/dist/utils/isFunction.d.ts

@@ -0,0 +1 @@
+export declare const isFunction: (value: any) => value is (...args: any[]) => any;

package/esm/core/Dialog/index.js

@@ -0,0 +1,188 @@
+import { forwardRef, useCallback, useRef, useImperativeHandle, useEffect } from 'react';
+import SvgClose from '../../packages/icons/esm/Close.js';
+import color from '../../packages/token-studio/esm/token/color/index.js';
+import elevation from '../../packages/token-studio/esm/token/elevation/index.js';
+import '../../packages/token-studio/esm/token/typography/index.js';
+import styled from 'styled-components';
+import IconButton from '../IconButton/index.js';
+import View from '../View/index.js';
+import { sx } from '../../utils/styled-system/index.js';
+import MotionView from '../MotionView/index.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+import { AnimatePresence } from '../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
+import { cubicBezier } from '../../node_modules/framer-motion/dist/es/easing/cubic-bezier.js';
+
+function visible(el) {
+  return !el.hidden && (!el.type || el.type !== 'hidden') && (el.offsetWidth > 0 || el.offsetHeight > 0);
+}
+function focusable(el) {
+  const inputEl = el;
+  return inputEl.tabIndex >= 0 && !inputEl.disabled && visible(inputEl);
+}
+const Dialog = ({
+  children,
+  isOpen,
+  onDismiss,
+  size,
+  sx
+}, ref) => {
+  const dialogRoot = typeof document !== 'undefined' ? document.getElementById('dialog_root') : null;
+  if (dialogRoot === null) return null;
+  const handleDismiss = useCallback(() => onDismiss?.(), [onDismiss]);
+  const overlayRef = useRef(null);
+  const dialogRef = useRef(null);
+  const closeButtonRef = useRef(null);
+  useImperativeHandle(ref, () => dialogRef.current);
+  const handleOutsideClick = useCallback(e => {
+    if (dialogRef.current && overlayRef.current && e.target instanceof Node && !dialogRef.current.contains(e.target) && overlayRef.current.contains(e.target)) {
+      handleDismiss?.();
+    }
+  }, [handleDismiss, dialogRef, overlayRef]);
+  const getFocusableItem = useCallback((e, movement) => {
+    if (dialogRef.current) {
+      const items = Array.from(dialogRef.current.querySelectorAll('*')).filter(focusable);
+      if (items.length === 0) return;
+      e.preventDefault();
+      const focusedElement = document.activeElement;
+      if (!focusedElement) {
+        return;
+      }
+      const index = items.indexOf(focusedElement);
+      const offsetIndex = index + movement;
+      const fallbackIndex = movement === 1 ? 0 : items.length - 1;
+      const focusableItem = items[offsetIndex] || items[fallbackIndex];
+      return focusableItem;
+    }
+  }, [dialogRef]);
+  const handleTab = useCallback(e => {
+    const movement = e.shiftKey ? -1 : 1;
+    const focusableItem = getFocusableItem(e, movement);
+    if (!focusableItem) {
+      return;
+    }
+    focusableItem.focus();
+  }, [getFocusableItem]);
+  const handleKeyDown = useCallback(event => {
+    switch (event.key) {
+      case 'Tab':
+        handleTab(event);
+        break;
+      case 'Escape':
+        handleDismiss?.();
+        event.stopPropagation();
+        break;
+    }
+  }, [handleDismiss]);
+  useEffect(() => {
+    if (isOpen) {
+      document.addEventListener('click', handleOutsideClick);
+      return () => {
+        document.removeEventListener('click', handleOutsideClick);
+      };
+    }
+  }, [isOpen, handleOutsideClick]);
+  useEffect(() => {
+    if (isOpen) {
+      if (closeButtonRef && closeButtonRef.current) {
+        closeButtonRef.current.focus();
+      }
+    }
+  }, [isOpen, closeButtonRef]);
+  return /*#__PURE__*/jsxRuntimeExports.jsx(AnimatePresence, {
+    children: isOpen ? /*#__PURE__*/jsxRuntimeExports.jsxs(MotionView, {
+      initial: {
+        opacity: 0,
+        scale: 1.1
+      },
+      animate: {
+        opacity: 1,
+        scale: 1
+      },
+      exit: {
+        opacity: 0,
+        scale: 1.1
+      },
+      transition: {
+        duration: 0.25,
+        /**
+         * easeOutQuad by https://easings.net/ko#easeOutQuad
+         */
+        ease: cubicBezier(0.5, 1, 0.89, 1)
+      },
+      sx: {
+        position: 'fixed',
+        display: 'flex',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        zIndex: 9999
+      },
+      children: [/*#__PURE__*/jsxRuntimeExports.jsx(Overlay, {
+        ref: overlayRef
+      }), /*#__PURE__*/jsxRuntimeExports.jsxs(BaseDialog, {
+        ref: dialogRef,
+        "aria-modal": 'true',
+        role: 'dialog',
+        tabIndex: -1,
+        sx: {
+          ...(size === 's' ? {
+            maxHeight: 'calc(100vh - 32px)',
+            width: ['100%', 400, 400],
+            marginX: [8, 'auto', 'auto'],
+            marginY: 'auto',
+            borderRadius: 'l'
+          } : size === 'l' ? {
+            maxHeight: '100vh',
+            height: ['100%', '100%', 'auto'],
+            minHeight: ['-webkit-fill-available', '-webkit-fill-available', 'auto'],
+            width: ['100%', '100%', 820],
+            marginX: [0, 0, 'auto'],
+            marginY: 'auto',
+            borderRadius: ['none', 'none', 'l']
+          } : {}),
+          ...sx
+        },
+        onKeyDown: handleKeyDown,
+        children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
+          sx: {
+            position: 'absolute',
+            top: 4,
+            right: 4
+          },
+          children: /*#__PURE__*/jsxRuntimeExports.jsx(IconButton, {
+            ref: closeButtonRef,
+            icon: SvgClose,
+            variant: 'plain',
+            size: 'm',
+            onClick: handleDismiss
+          })
+        }), children]
+      })]
+    }) : null
+  });
+};
+const Overlay = styled.span`
+  &:before {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: block;
+    cursor: default;
+    content: '';
+    background: ${color.dim};
+  }
+`;
+const BaseDialog = styled.div(() => ({
+  position: 'relative',
+  boxShadow: elevation['shadow/overlay'],
+  backgroundColor: elevation['surface/overlay'],
+  outline: 'none',
+  overflow: 'hidden',
+  margin: 'auto'
+}), sx);
+var index = /*#__PURE__*/forwardRef(Dialog);
+
+export { index as default };

package/esm/core/DialogHandler/index.js

@@ -0,0 +1,33 @@
+import { Children, cloneElement } from 'react';
+import useDialogHandler from '../../hook/useDialogHandler.js';
+import { isFunction } from '../../utils/isFunction.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const DialogHandler = ({
+  renderDialog,
+  onClick,
+  children: propChildren
+}) => {
+  const {
+    isOpen,
+    openDialog,
+    closeDialog
+  } = useDialogHandler();
+  const handleClick = e => {
+    onClick?.(e);
+    openDialog();
+  };
+  const children = isFunction(propChildren) ? propChildren({
+    openDialog
+  }) : Children.map(propChildren, child => /*#__PURE__*/cloneElement(child, {
+    onClick: handleClick
+  }));
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
+    children: [children, renderDialog({
+      isOpen,
+      closeDialog
+    })]
+  });
+};
+
+export { DialogHandler as default };

package/esm/core/MotionView/index.js

@@ -0,0 +1,6 @@
+import View from '../View/index.js';
+import { motion } from '../../node_modules/framer-motion/dist/es/render/dom/motion.js';
+
+const MotionView = motion(View);
+
+export { MotionView as default };

package/esm/enigma/EnigmaUI/index.js

@@ -47,5 +47,10 @@ const getViewComponent = viewContainer => {
   const ViewComponent = renderableViewComponent[viewContainer.viewComponentType];
   return ViewComponent;
 };
+var index = Object.assign(EnigmaUI, {
+  TextView,
+  ImageView,
+  ChipGroupViewType: ChipGroupView
+});
 
-export { EnigmaUI as default };
+export { index as default };

package/esm/hook/useDialogHandler.js

@@ -0,0 +1,14 @@
+import { useState } from 'react';
+
+const useDialogHandler = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const openDialog = () => setIsOpen(true);
+  const closeDialog = () => setIsOpen(false);
+  return {
+    isOpen,
+    openDialog,
+    closeDialog
+  };
+};
+
+export { useDialogHandler as default };

package/esm/index.js

@@ -1,11 +1,14 @@
 export { default as Button } from './core/Button/index.js';
 export { default as Chip } from './core/Chip/index.js';
+export { default as Dialog } from './core/Dialog/index.js';
+export { default as DialogHandler } from './core/DialogHandler/index.js';
 export { default as GradientText } from './core/GradientText/index.js';
 export { default as Grid } from './core/Grid/index.js';
 export { default as IconButton } from './core/IconButton/index.js';
 export { default as IconToggleButton } from './core/IconToggleButton/index.js';
 export { default as Image } from './core/Image/index.js';
 export { default as ItemList } from './core/ItemList/index.js';
+export { default as MotionView } from './core/MotionView/index.js';
 export { default as Space } from './core/Space/index.js';
 export { default as Spinner } from './core/Spinner/index.js';
 export { default as Stack } from './core/Stack/index.js';

package/esm/node_modules/framer-motion/dist/es/animation/animators/instant.js

@@ -0,0 +1,40 @@
+import { animateValue } from './js/index.js';
+import { noop } from '../../utils/noop.js';
+
+function createInstantAnimation({ keyframes, delay, onUpdate, onComplete, }) {
+    const setValue = () => {
+        onUpdate && onUpdate(keyframes[keyframes.length - 1]);
+        onComplete && onComplete();
+        /**
+         * TODO: As this API grows it could make sense to always return
+         * animateValue. This will be a bigger project as animateValue
+         * is frame-locked whereas this function resolves instantly.
+         * This is a behavioural change and also has ramifications regarding
+         * assumptions within tests.
+         */
+        return {
+            time: 0,
+            speed: 1,
+            duration: 0,
+            play: (noop),
+            pause: (noop),
+            stop: (noop),
+            then: (resolve) => {
+                resolve();
+                return Promise.resolve();
+            },
+            cancel: (noop),
+            complete: (noop),
+        };
+    };
+    return delay
+        ? animateValue({
+            keyframes: [0, 1],
+            duration: 0,
+            delay,
+            onComplete: setValue,
+        })
+        : setValue();
+}
+
+export { createInstantAnimation };

package/esm/node_modules/framer-motion/dist/es/animation/animators/js/driver-frameloop.js

@@ -0,0 +1,16 @@
+import { frame, cancelFrame, frameData } from '../../../frameloop/frame.js';
+
+const frameloopDriver = (update) => {
+    const passTimestamp = ({ timestamp }) => update(timestamp);
+    return {
+        start: () => frame.update(passTimestamp, true),
+        stop: () => cancelFrame(passTimestamp),
+        /**
+         * If we're processing this frame we can use the
+         * framelocked timestamp to keep things in sync.
+         */
+        now: () => frameData.isProcessing ? frameData.timestamp : performance.now(),
+    };
+};
+
+export { frameloopDriver };

package/esm/node_modules/framer-motion/dist/es/animation/animators/js/index.js

@@ -0,0 +1,303 @@
+import { keyframes } from '../../generators/keyframes.js';
+import { spring } from '../../generators/spring/index.js';
+import { inertia } from '../../generators/inertia.js';
+import { frameloopDriver } from './driver-frameloop.js';
+import { interpolate } from '../../../utils/interpolate.js';
+import { clamp } from '../../../utils/clamp.js';
+import { millisecondsToSeconds, secondsToMilliseconds } from '../../../utils/time-conversion.js';
+import { calcGeneratorDuration } from '../../generators/utils/calc-duration.js';
+
+const types = {
+    decay: inertia,
+    inertia,
+    tween: keyframes,
+    keyframes: keyframes,
+    spring,
+};
+/**
+ * Animate a single value on the main thread.
+ *
+ * This function is written, where functionality overlaps,
+ * to be largely spec-compliant with WAAPI to allow fungibility
+ * between the two.
+ */
+function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, keyframes: keyframes$1, type = "keyframes", repeat = 0, repeatDelay = 0, repeatType = "loop", onPlay, onStop, onComplete, onUpdate, ...options }) {
+    let speed = 1;
+    let hasStopped = false;
+    let resolveFinishedPromise;
+    let currentFinishedPromise;
+    /**
+     * Resolve the current Promise every time we enter the
+     * finished state. This is WAAPI-compatible behaviour.
+     */
+    const updateFinishedPromise = () => {
+        currentFinishedPromise = new Promise((resolve) => {
+            resolveFinishedPromise = resolve;
+        });
+    };
+    // Create the first finished promise
+    updateFinishedPromise();
+    let animationDriver;
+    const generatorFactory = types[type] || keyframes;
+    /**
+     * If this isn't the keyframes generator and we've been provided
+     * strings as keyframes, we need to interpolate these.
+     * TODO: Support velocity for units and complex value types/
+     */
+    let mapNumbersToKeyframes;
+    if (generatorFactory !== keyframes &&
+        typeof keyframes$1[0] !== "number") {
+        mapNumbersToKeyframes = interpolate([0, 100], keyframes$1, {
+            clamp: false,
+        });
+        keyframes$1 = [0, 100];
+    }
+    const generator = generatorFactory({ ...options, keyframes: keyframes$1 });
+    let mirroredGenerator;
+    if (repeatType === "mirror") {
+        mirroredGenerator = generatorFactory({
+            ...options,
+            keyframes: [...keyframes$1].reverse(),
+            velocity: -(options.velocity || 0),
+        });
+    }
+    let playState = "idle";
+    let holdTime = null;
+    let startTime = null;
+    let cancelTime = null;
+    /**
+     * If duration is undefined and we have repeat options,
+     * we need to calculate a duration from the generator.
+     *
+     * We set it to the generator itself to cache the duration.
+     * Any timeline resolver will need to have already precalculated
+     * the duration by this step.
+     */
+    if (generator.calculatedDuration === null && repeat) {
+        generator.calculatedDuration = calcGeneratorDuration(generator);
+    }
+    const { calculatedDuration } = generator;
+    let resolvedDuration = Infinity;
+    let totalDuration = Infinity;
+    if (calculatedDuration !== null) {
+        resolvedDuration = calculatedDuration + repeatDelay;
+        totalDuration = resolvedDuration * (repeat + 1) - repeatDelay;
+    }
+    let currentTime = 0;
+    const tick = (timestamp) => {
+        if (startTime === null)
+            return;
+        /**
+         * requestAnimationFrame timestamps can come through as lower than
+         * the startTime as set by performance.now(). Here we prevent this,
+         * though in the future it could be possible to make setting startTime
+         * a pending operation that gets resolved here.
+         */
+        if (speed > 0)
+            startTime = Math.min(startTime, timestamp);
+        if (speed < 0)
+            startTime = Math.min(timestamp - totalDuration / speed, startTime);
+        if (holdTime !== null) {
+            currentTime = holdTime;
+        }
+        else {
+            // Rounding the time because floating point arithmetic is not always accurate, e.g. 3000.367 - 1000.367 =
+            // 2000.0000000000002. This is a problem when we are comparing the currentTime with the duration, for
+            // example.
+            currentTime = Math.round(timestamp - startTime) * speed;
+        }
+        // Rebase on delay
+        const timeWithoutDelay = currentTime - delay * (speed >= 0 ? 1 : -1);
+        const isInDelayPhase = speed >= 0 ? timeWithoutDelay < 0 : timeWithoutDelay > totalDuration;
+        currentTime = Math.max(timeWithoutDelay, 0);
+        /**
+         * If this animation has finished, set the current time
+         * to the total duration.
+         */
+        if (playState === "finished" && holdTime === null) {
+            currentTime = totalDuration;
+        }
+        let elapsed = currentTime;
+        let frameGenerator = generator;
+        if (repeat) {
+            /**
+             * Get the current progress (0-1) of the animation. If t is >
+             * than duration we'll get values like 2.5 (midway through the
+             * third iteration)
+             */
+            const progress = currentTime / resolvedDuration;
+            /**
+             * Get the current iteration (0 indexed). For instance the floor of
+             * 2.5 is 2.
+             */
+            let currentIteration = Math.floor(progress);
+            /**
+             * Get the current progress of the iteration by taking the remainder
+             * so 2.5 is 0.5 through iteration 2
+             */
+            let iterationProgress = progress % 1.0;
+            /**
+             * If iteration progress is 1 we count that as the end
+             * of the previous iteration.
+             */
+            if (!iterationProgress && progress >= 1) {
+                iterationProgress = 1;
+            }
+            iterationProgress === 1 && currentIteration--;
+            currentIteration = Math.min(currentIteration, repeat + 1);
+            /**
+             * Reverse progress if we're not running in "normal" direction
+             */
+            const iterationIsOdd = Boolean(currentIteration % 2);
+            if (iterationIsOdd) {
+                if (repeatType === "reverse") {
+                    iterationProgress = 1 - iterationProgress;
+                    if (repeatDelay) {
+                        iterationProgress -= repeatDelay / resolvedDuration;
+                    }
+                }
+                else if (repeatType === "mirror") {
+                    frameGenerator = mirroredGenerator;
+                }
+            }
+            let p = clamp(0, 1, iterationProgress);
+            if (currentTime > totalDuration) {
+                p = repeatType === "reverse" && iterationIsOdd ? 1 : 0;
+            }
+            elapsed = p * resolvedDuration;
+        }
+        /**
+         * If we're in negative time, set state as the initial keyframe.
+         * This prevents delay: x, duration: 0 animations from finishing
+         * instantly.
+         */
+        const state = isInDelayPhase
+            ? { done: false, value: keyframes$1[0] }
+            : frameGenerator.next(elapsed);
+        if (mapNumbersToKeyframes) {
+            state.value = mapNumbersToKeyframes(state.value);
+        }
+        let { done } = state;
+        if (!isInDelayPhase && calculatedDuration !== null) {
+            done = speed >= 0 ? currentTime >= totalDuration : currentTime <= 0;
+        }
+        const isAnimationFinished = holdTime === null &&
+            (playState === "finished" || (playState === "running" && done));
+        if (onUpdate) {
+            onUpdate(state.value);
+        }
+        if (isAnimationFinished) {
+            finish();
+        }
+        return state;
+    };
+    const stopAnimationDriver = () => {
+        animationDriver && animationDriver.stop();
+        animationDriver = undefined;
+    };
+    const cancel = () => {
+        playState = "idle";
+        stopAnimationDriver();
+        resolveFinishedPromise();
+        updateFinishedPromise();
+        startTime = cancelTime = null;
+    };
+    const finish = () => {
+        playState = "finished";
+        onComplete && onComplete();
+        stopAnimationDriver();
+        resolveFinishedPromise();
+    };
+    const play = () => {
+        if (hasStopped)
+            return;
+        if (!animationDriver)
+            animationDriver = driver(tick);
+        const now = animationDriver.now();
+        onPlay && onPlay();
+        if (holdTime !== null) {
+            startTime = now - holdTime;
+        }
+        else if (!startTime || playState === "finished") {
+            startTime = now;
+        }
+        if (playState === "finished") {
+            updateFinishedPromise();
+        }
+        cancelTime = startTime;
+        holdTime = null;
+        /**
+         * Set playState to running only after we've used it in
+         * the previous logic.
+         */
+        playState = "running";
+        animationDriver.start();
+    };
+    if (autoplay) {
+        play();
+    }
+    const controls = {
+        then(resolve, reject) {
+            return currentFinishedPromise.then(resolve, reject);
+        },
+        get time() {
+            return millisecondsToSeconds(currentTime);
+        },
+        set time(newTime) {
+            newTime = secondsToMilliseconds(newTime);
+            currentTime = newTime;
+            if (holdTime !== null || !animationDriver || speed === 0) {
+                holdTime = newTime;
+            }
+            else {
+                startTime = animationDriver.now() - newTime / speed;
+            }
+        },
+        get duration() {
+            const duration = generator.calculatedDuration === null
+                ? calcGeneratorDuration(generator)
+                : generator.calculatedDuration;
+            return millisecondsToSeconds(duration);
+        },
+        get speed() {
+            return speed;
+        },
+        set speed(newSpeed) {
+            if (newSpeed === speed || !animationDriver)
+                return;
+            speed = newSpeed;
+            controls.time = millisecondsToSeconds(currentTime);
+        },
+        get state() {
+            return playState;
+        },
+        play,
+        pause: () => {
+            playState = "paused";
+            holdTime = currentTime;
+        },
+        stop: () => {
+            hasStopped = true;
+            if (playState === "idle")
+                return;
+            playState = "idle";
+            onStop && onStop();
+            cancel();
+        },
+        cancel: () => {
+            if (cancelTime !== null)
+                tick(cancelTime);
+            cancel();
+        },
+        complete: () => {
+            playState = "finished";
+        },
+        sample: (elapsed) => {
+            startTime = 0;
+            return tick(elapsed);
+        },
+    };
+    return controls;
+}
+
+export { animateValue };