@jobber/components 4.77.4 → 4.77.6-JOB-84042.2

package/AnimatedPresence.d.ts

@@ -0,0 +1 @@
+export * from "./dist/AnimatedPresence";

package/AnimatedPresence.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var AnimatedPresence = require("./dist/AnimatedPresence");
+
+Object.keys(AnimatedPresence).forEach(function(key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return AnimatedPresence[key];
+    },
+  });
+});

package/dist/AnimatedPresence/AnimatedPresence.d.ts

@@ -0,0 +1,24 @@
+import { PropsWithChildren } from "react";
+declare const transitions: {
+    fromBottom: import("framer-motion").Variants;
+    fromTop: import("framer-motion").Variants;
+    fromLeft: import("framer-motion").Variants;
+    fromRight: import("framer-motion").Variants;
+    popIn: import("framer-motion").Variants;
+    fromLeftToRight: import("framer-motion").Variants;
+    fromRightToLeft: import("framer-motion").Variants;
+    fade: import("framer-motion").Variants;
+};
+export type AnimatedPresenceTransitions = keyof typeof transitions;
+interface AnimatedPresenceProps extends Required<PropsWithChildren> {
+    /**
+     * The type of transition you can use.
+     */
+    readonly transition?: AnimatedPresenceTransitions;
+    /**
+     * Whether or not to animate the children on mount. By default it's set to false.
+     */
+    readonly initial?: boolean;
+}
+export declare function AnimatedPresence(props: AnimatedPresenceProps): JSX.Element;
+export {};

package/dist/AnimatedPresence/AnimatedPresence.transitions.d.ts

@@ -0,0 +1,11 @@
+import { Variants } from "framer-motion";
+export declare const TIMING_QUICK: number;
+export declare const TIMING_BASE: number;
+export declare const fade: Variants;
+export declare const popIn: Variants;
+export declare const fromTop: Variants;
+export declare const fromBottom: Variants;
+export declare const fromLeft: Variants;
+export declare const fromRight: Variants;
+export declare const fromLeftToRight: Variants;
+export declare const fromRightToLeft: Variants;

package/dist/AnimatedPresence/hooks/usePreviousValue.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function usePreviousValue<T>(value: T): readonly [T, import("react").Dispatch<import("react").SetStateAction<T>>];

package/dist/AnimatedPresence/index.d.ts

@@ -0,0 +1 @@
+export * from "./AnimatedPresence";

package/dist/AnimatedPresence/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var AnimatedPresence = require('../AnimatedPresence-20a02aaa.js');
+require('react');
+require('framer-motion');
+require('@jobber/design');
+
+
+
+exports.AnimatedPresence = AnimatedPresence.AnimatedPresence;

package/dist/AnimatedPresence-20a02aaa.js

@@ -0,0 +1,104 @@
+'use strict';
+
+var React = require('react');
+var framerMotion = require('framer-motion');
+var design = require('@jobber/design');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const TIMING_QUICK = toSeconds(design.tokens["timing-quick"]);
+const TIMING_BASE = toSeconds(design.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: -design.tokens["space-base"] }, baseTransition.hidden),
+};
+const fromBottom = {
+    visible: Object.assign({ y: 0 }, baseTransition.visible),
+    hidden: Object.assign({ y: design.tokens["space-base"] }, baseTransition.hidden),
+};
+const fromLeft = {
+    visible: Object.assign({ x: 0 }, baseTransition.visible),
+    hidden: Object.assign({ x: -design.tokens["space-base"] }, baseTransition.hidden),
+};
+const fromRight = {
+    visible: Object.assign({ x: 0 }, baseTransition.visible),
+    hidden: Object.assign({ x: design.tokens["space-base"] }, baseTransition.hidden),
+};
+const fromLeftToRight = {
+    initial: Object.assign({ x: -design.tokens["space-base"] }, baseTransition.hidden),
+    visible: Object.assign({ x: 0 }, baseTransition.visible),
+    hidden: Object.assign({ x: design.tokens["space-base"] }, baseTransition.hidden),
+};
+const fromRightToLeft = {
+    initial: Object.assign({ x: design.tokens["space-base"] }, baseTransition.hidden),
+    visible: Object.assign({ x: 0 }, baseTransition.visible),
+    hidden: Object.assign({ x: -design.tokens["space-base"] }, baseTransition.hidden),
+};
+function toSeconds(ms) {
+    return ms / 1000;
+}
+
+function usePreviousValue(value) {
+    const [previousValue, setPreviousValue] = React.useState(value);
+    React.useEffect(() => {
+        setPreviousValue(value);
+    }, [value]);
+    return [previousValue, setPreviousValue];
+}
+
+const transitions = {
+    fromBottom,
+    fromTop,
+    fromLeft,
+    fromRight,
+    popIn,
+    fromLeftToRight,
+    fromRightToLeft,
+    fade,
+};
+function AnimatedPresence(props) {
+    const shouldReduceMotion = framerMotion.useReducedMotion();
+    if (shouldReduceMotion) {
+        return React__default["default"].createElement(React__default["default"].Fragment, null, props.children);
+    }
+    return React__default["default"].createElement(InternalAnimatedPresence, Object.assign({}, props));
+}
+function InternalAnimatedPresence({ transition = "fromTop", initial = false, children, }) {
+    const transitionVariation = transitions[transition];
+    const hasInitialTransition = "initial" in transitionVariation;
+    const childCount = React.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.
+    React.useEffect(() => {
+        setLastChildIndex(childCount - 1);
+    }, [childCount]);
+    return (React__default["default"].createElement(framerMotion.AnimatePresence, { initial: initial, mode: "popLayout" }, React.Children.map(children, (child, i) => child && (React__default["default"].createElement(framerMotion.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;
+    }
+}
+
+exports.AnimatedPresence = AnimatedPresence;

package/dist/AnimatedSwitcher/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var AnimatedSwitcher = require('../AnimatedSwitcher-d1e1ddcf.js');
+var AnimatedSwitcher = require('../AnimatedSwitcher-3d45ec5d.js');
 require('react');
 require('framer-motion');
 require('../Icon-405a216c.js');

package/dist/{AnimatedSwitcher-d1e1ddcf.js → AnimatedSwitcher-3d45ec5d.js}

@@ -51,7 +51,7 @@ function AnimatedSwitcher({ initialChild, switched, switchTo, type = "slideFromB
     const [ref, setRef] = React.useState(null);
     const isSwitchingBetweenIcons = initialChild.type === Icon.Icon && switchTo.type === Icon.Icon;
     const { key, transition, child, duration } = getChildData();
-    return (React__default["default"].createElement(framerMotion.AnimatePresence, { exitBeforeEnter: true, initial: false },
+    return (React__default["default"].createElement(framerMotion.AnimatePresence, { mode: "wait", initial: false },
         React__default["default"].createElement(framerMotion.motion.div, { ref: setRef, key: key, variants: transition, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration }, style: { display: getDisplayValue() } }, child)));
     function getDisplayValue() {
         if (ref === null || ref === void 0 ? void 0 : ref.firstElementChild) {

package/dist/Autocomplete/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../tslib.es6-5b8768b7.js');
+var tslib_es6 = require('../tslib.es6-754e2961.js');
 var React = require('react');
 var debounce = require('lodash/debounce');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
@@ -10,20 +10,21 @@ var classnames = require('classnames');
 var ReactDOM = require('react-dom');
 var reactPopper = require('react-popper');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
+var useSafeLayoutEffect = require('@jobber/hooks/useSafeLayoutEffect');
 var Text = require('../Text-259af966.js');
 var Icon = require('../Icon-405a216c.js');
 var Heading = require('../Heading-1e8e4bd3.js');
-var InputText = require('../InputText-9e61365c.js');
+var InputText = require('../InputText-6c71361e.js');
 require('../Typography-c45bf216.js');
 require('@jobber/design');
 require('../getAtlantisConfig-0f3e8af2.js');
-require('../FormField-b0e74d32.js');
+require('../FormField-b4e6c549.js');
 require('uuid');
 require('react-hook-form');
 require('@jobber/hooks/useShowClear');
 require('../Button-b73a5e01.js');
 require('react-router-dom');
-require('../InputValidation-a7a737f9.js');
+require('../InputValidation-05e839fa.js');
 require('framer-motion');
 require('../Spinner-9d8fc7ff.js');
 
@@ -127,7 +128,7 @@ function useRepositionMenu(attachTo, visible = false) {
             { name: "flip", options: { fallbackPlacements: ["top"] } },
         ],
     });
-    React.useLayoutEffect(() => {
+    useSafeLayoutEffect.useSafeLayoutEffect(() => {
         var _a;
         (_a = popper === null || popper === void 0 ? void 0 : popper.update) === null || _a === void 0 ? void 0 : _a.call(popper);
     }, [visible]);

package/dist/Card/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Card = require('../Card-426a68a8.js');
+var Card = require('../Card-0a6f3a28.js');
 require('react');
 require('classnames');
 require('../style-inject.es-9d2f5f4e.js');
@@ -13,11 +13,12 @@ require('../Button-b73a5e01.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Menu-81b12936.js');
+require('../Menu-5fc613a1.js');
 require('uuid');
 require('framer-motion');
 require('@jobber/hooks/useOnKeyDown');
 require('@jobber/hooks/useRefocusOnActivator');
+require('@jobber/hooks/useSafeLayoutEffect');
 
 
 

package/dist/{Card-426a68a8.js → Card-0a6f3a28.js}

@@ -5,7 +5,7 @@ var classnames = require('classnames');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Heading = require('./Heading-1e8e4bd3.js');
 var Button = require('./Button-b73a5e01.js');
-var Menu = require('./Menu-81b12936.js');
+var Menu = require('./Menu-5fc613a1.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Checkbox/index.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Checkbox = require('../Checkbox-1cdd5cf6.js');
-require('../tslib.es6-5b8768b7.js');
+var Checkbox = require('../Checkbox-99f6297f.js');
+require('../tslib.es6-754e2961.js');
 require('react');
 require('uuid');
 require('classnames');

package/dist/{Checkbox-1cdd5cf6.js → Checkbox-99f6297f.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-5b8768b7.js');
+var tslib_es6 = require('./tslib.es6-754e2961.js');
 var React = require('react');
 var uuid = require('uuid');
 var classnames = require('classnames');

package/dist/Chip/index.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Chip = require('../Chip-c91fd6c8.js');
-var tslib_es6 = require('../tslib.es6-5b8768b7.js');
+var Chip = require('../Chip-3d1bfddc.js');
+var tslib_es6 = require('../tslib.es6-754e2961.js');
 var React = require('react');
 var Icon = require('../Icon-405a216c.js');
 require('classnames');
@@ -12,9 +12,10 @@ require('../style-inject.es-9d2f5f4e.js');
 require('../Avatar-76a799fa.js');
 require('color');
 require('../Typography-c45bf216.js');
-require('../Tooltip-27771182.js');
+require('../Tooltip-ef3d6ef4.js');
 require('react-dom');
 require('framer-motion');
+require('@jobber/hooks/useSafeLayoutEffect');
 require('react-popper');
 require('@jobber/design');
 

package/dist/{Chip-c91fd6c8.js → Chip-3d1bfddc.js}

@@ -7,7 +7,7 @@ var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Avatar = require('./Avatar-76a799fa.js');
 var Icon = require('./Icon-405a216c.js');
 var Typography = require('./Typography-c45bf216.js');
-var Tooltip = require('./Tooltip-27771182.js');
+var Tooltip = require('./Tooltip-ef3d6ef4.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Chips/index.js

@@ -9,7 +9,7 @@ var useAssert = require('@jobber/hooks/useAssert');
 var Icon = require('../Icon-405a216c.js');
 var Avatar = require('../Avatar-76a799fa.js');
 var Typography = require('../Typography-c45bf216.js');
-var Tooltip = require('../Tooltip-27771182.js');
+var Tooltip = require('../Tooltip-ef3d6ef4.js');
 var uuid = require('uuid');
 var sortBy = require('lodash/sortBy');
 var useLiveAnnounce = require('@jobber/hooks/useLiveAnnounce');
@@ -22,6 +22,7 @@ require('@jobber/design');
 require('color');
 require('react-dom');
 require('framer-motion');
+require('@jobber/hooks/useSafeLayoutEffect');
 require('react-router-dom');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/dist/Combobox/Combobox.types.d.ts

@@ -34,6 +34,10 @@ export interface ComboboxProps {
      * The amount of time in ms to debounce the onSearch callback. Defaults to 300ms.
      */
     readonly onSearchDebounce?: number;
+    /**
+     * Callback to load more options, this is called when the user scrolls to the bottom of the list.
+     */
+    readonly onLoadMore?: () => void;
     /**
      * The Chip heading for the trigger
      */
@@ -97,6 +101,10 @@ export interface ComboboxContentProps {
      * Function called when search input changes.
      */
     readonly handleSearchChange: (value: string) => void;
+    /**
+     * Callback to load more options, this is called when the user scrolls to the bottom of the list.
+     */
+    readonly onLoadMore?: () => void;
     /**
      * Reference to the wrapping div element of all the Combobox pieces
      */
@@ -191,6 +199,10 @@ export interface ComboboxListProps {
      * Should loading state be shown.
      */
     readonly loading?: boolean;
+    /**
+     * Callback to load more options, this is called when the user scrolls to the bottom of the list.
+     */
+    readonly onLoadMore?: () => void;
 }
 export interface ComboboxActionProps {
     /**

package/dist/Combobox/components/ComboboxContent/ComboboxLoadMore/ComboboxLoadMore.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface ComboboxLoadMoreProps {
+    readonly onLoadMore: () => void;
+}
+export declare function ComboboxLoadMore({ onLoadMore }: ComboboxLoadMoreProps): JSX.Element;
+export {};

package/dist/Combobox/components/ComboboxContent/ComboboxLoadMore/index.d.ts

@@ -0,0 +1 @@
+export { ComboboxLoadMore } from "./ComboboxLoadMore";

package/dist/Combobox/hooks/useMakeComboboxHandlers.d.ts

@@ -4,4 +4,4 @@ export interface UseMakeComboboxHandlersReturn {
     handleClose: () => void;
     handleSelection: (selection: ComboboxOption) => void;
 }
-export declare function useMakeComboboxHandlers(setOpen: (open: boolean) => void, setSearchValue: (searchValue: string) => void, selectedOptions: ComboboxOption[], shouldScroll: React.MutableRefObject<boolean>, selectedStateSetter: (selected: ComboboxOption[]) => void, multiSelect?: boolean, onClose?: () => void): UseMakeComboboxHandlersReturn;
+export declare function useMakeComboboxHandlers(setOpen: (open: boolean) => void, setSearchValue: (searchValue: string) => void, selectedOptions: ComboboxOption[], shouldScroll: React.MutableRefObject<boolean>, selectedStateSetter: (selected: ComboboxOption[]) => void, multiSelect?: boolean, onClose?: () => void, onSearch?: (searchValue: string) => void): UseMakeComboboxHandlersReturn;

package/dist/Combobox/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Combobox = require('../Combobox-d85ce78c.js');
+var Combobox = require('../Combobox-d24f1fec.js');
 require('react');
 require('classnames');
 require('react-dom');
@@ -11,21 +11,24 @@ require('../Icon-405a216c.js');
 require('@jobber/design');
 require('../Text-259af966.js');
 require('../Typography-c45bf216.js');
-require('../Glimmer-f40d5ea5.js');
-require('../tslib.es6-5b8768b7.js');
+require('../Glimmer-7c317864.js');
+require('../tslib.es6-754e2961.js');
 require('../Content-e3f7b6fc.js');
+require('../Spinner-9d8fc7ff.js');
+require('../AnimatedPresence-20a02aaa.js');
+require('framer-motion');
+require('@jobber/hooks/useInView');
 require('../Button-b73a5e01.js');
 require('react-router-dom');
 require('@jobber/hooks/useRefocusOnActivator');
 require('@jobber/hooks/useFocusTrap');
 require('react-popper');
 require('@jobber/hooks/useOnKeyDown');
-require('../Chip-c91fd6c8.js');
-require('@jobber/hooks/useInView');
+require('../Chip-3d1bfddc.js');
 require('../Avatar-76a799fa.js');
 require('color');
-require('../Tooltip-27771182.js');
-require('framer-motion');
+require('../Tooltip-ef3d6ef4.js');
+require('@jobber/hooks/useSafeLayoutEffect');
 require('lodash/debounce');
 require('lodash/noop');
 require('@jobber/hooks/useAssert');