@jobber/components 8.12.2 → 8.13.1-addeditor-cab44cf.0

package/dist/AnimatedPresence-es.js

@@ -1,98 +0,0 @@
-import React__default, { useState, useEffect, Children } from 'react';
-import { useReducedMotion, AnimatePresence, motion } from 'framer-motion';
-import { tokens } from '@jobber/design';
-
-const TIMING_QUICK = toSeconds(tokens["timing-quick"]);
-const TIMING_BASE = toSeconds(tokens["timing-base"]);
-const baseTransition = {
-    visible: { opacity: 1 },
-    hidden: { opacity: 0 },
-};
-const fade = {
-    visible: { opacity: 1 },
-    hidden: { opacity: 0 },
-};
-const popIn = {
-    visible: Object.assign({ scale: 1 }, baseTransition.visible),
-    hidden: Object.assign({ scale: 0.95 }, baseTransition.hidden),
-};
-const fromTop = {
-    visible: Object.assign({ y: 0 }, baseTransition.visible),
-    hidden: Object.assign({ y: -tokens["space-base"] }, baseTransition.hidden),
-};
-const fromBottom = {
-    visible: Object.assign({ y: 0 }, baseTransition.visible),
-    hidden: Object.assign({ y: tokens["space-base"] }, baseTransition.hidden),
-};
-const fromLeft = {
-    visible: Object.assign({ x: 0 }, baseTransition.visible),
-    hidden: Object.assign({ x: -tokens["space-base"] }, baseTransition.hidden),
-};
-const fromRight = {
-    visible: Object.assign({ x: 0 }, baseTransition.visible),
-    hidden: Object.assign({ x: tokens["space-base"] }, baseTransition.hidden),
-};
-const fromLeftToRight = {
-    initial: Object.assign({ x: -tokens["space-base"] }, baseTransition.hidden),
-    visible: Object.assign({ x: 0 }, baseTransition.visible),
-    hidden: Object.assign({ x: tokens["space-base"] }, baseTransition.hidden),
-};
-const fromRightToLeft = {
-    initial: Object.assign({ x: tokens["space-base"] }, baseTransition.hidden),
-    visible: Object.assign({ x: 0 }, baseTransition.visible),
-    hidden: Object.assign({ x: -tokens["space-base"] }, baseTransition.hidden),
-};
-function toSeconds(ms) {
-    return ms / 1000;
-}
-
-function usePreviousValue(value) {
-    const [previousValue, setPreviousValue] = useState(value);
-    useEffect(() => {
-        setPreviousValue(value);
-    }, [value]);
-    return [previousValue, setPreviousValue];
-}
-
-const transitions = {
-    fromBottom,
-    fromTop,
-    fromLeft,
-    fromRight,
-    popIn,
-    fromLeftToRight,
-    fromRightToLeft,
-    fade,
-};
-function AnimatedPresence(props) {
-    const shouldReduceMotion = useReducedMotion();
-    if (shouldReduceMotion) {
-        return React__default.createElement(React__default.Fragment, null, props.children);
-    }
-    return React__default.createElement(InternalAnimatedPresence, Object.assign({}, props));
-}
-function InternalAnimatedPresence({ transition = "fromTop", initial = false, children, }) {
-    const transitionVariation = transitions[transition];
-    const hasInitialTransition = "initial" in transitionVariation;
-    const childCount = Children.count(children);
-    // Set the initial value to 0 so it staggers the animation on mount when
-    // initial is true.
-    const [lastChildIndex, setLastChildIndex] = usePreviousValue(0);
-    // Whenever the children count changes, update the last index.
-    useEffect(() => {
-        setLastChildIndex(childCount - 1);
-    }, [childCount]);
-    return (React__default.createElement(AnimatePresence, { initial: initial, mode: "popLayout" }, Children.map(children, (child, i) => child && (React__default.createElement(motion.div, { layout: true, variants: transitionVariation, initial: hasInitialTransition ? "initial" : "hidden", animate: "visible", exit: "hidden", transition: {
-            duration: TIMING_BASE,
-            delay: generateDelayTime(i),
-        } }, child)))));
-    function generateDelayTime(index) {
-        // Don't add a delay if it's already rendered.
-        if (lastChildIndex > index)
-            return 0;
-        // Stagger the animation starting after the previous last child index.
-        return (index - lastChildIndex) * TIMING_QUICK;
-    }
-}
-
-export { AnimatedPresence as A };

package/dist/docs/AnimatedPresence/AnimatedPresence.md

@@ -1,74 +0,0 @@
-# AnimatedPresence
-
-Just like in real life, nothing appears out of nowhere. Animate elements that
-get added or removed from the React tree with AnimatedPresence. If more than 1
-element gets added, there will be a delay between each new element.
-
-## Accessibility
-
-AnimatedPresence respects the
-[`prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion)
-setting. If the user has this enabled, the animations will be disabled and the
-elements will show/hide instantly.
-
-
-## Configuration
-
-### Conditional rendering
-
-Hide and show elements with a transition to add emphasis on the change. This is
-useful for UX which has a different part of the UI hidden until the user takes
-an action to show them.
-
-```tsx
-<AnimatedPresence>{show && <div>Item</div>}</AnimatedPresence>
-```
-
-See the
-[Basic](/storybook/web/?path=/story/components-utilities-animatedpresence--basic)
-example for a live demo.
-
-> **WARNING:** When using AnimatedPresence with conditional rendering, elements will be added
-> and removed from the DOM causing shifts in the layout, with the potential for frames where neither the entering nor exiting element is yet present.
->
-> This can create undesirable visual jumps in some scenarios, such as when the
-> element's height is what creates enough vertical space to require scrolling. The
-> layout will have to be stabilized with something such as a min-height to avoid
-> this.
-
-### List rendering
-
-Animate items in a list as they are added or removed.
-
-```tsx
-<AnimatedPresence>
-  {items.map(item => (
-    <div key={item.id}>{item.name}</div>
-  ))}
-</AnimatedPresence>
-```
-
-See the
-[List](/storybook/web/?path=/story/components-utilities-animatedpresence--list)
-example for a live demo.
-
-### Animate on mount
-
-Set the `initial` prop to `true` to animate the element whenever it initially
-renders on the screen. See this in action on the
-[List](/storybook/web/?path=/story/components-utilities-animatedpresence--list)
-example.
-
-```tsx
-<AnimatedPresence initial={true}>...</AnimatedPresence>
-```
-
-
-## Props
-
-### Web
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `initial` | `boolean` | No | — | Whether or not to animate the children on mount. By default it's set to false. |
-| `transition` | `"fade" | "fromBottom" | "fromLeft" | "fromLeftToRight" | "fromRight" | "fromRightToLeft" | "fromTop" | "popIn"` | No | — | The type of transition you can use. |