@jobber/components 4.79.0 → 4.79.2

package/dist/AnimatedPresence/index.js

@@ -2,105 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
-var framerMotion = require('framer-motion');
-var design = require('@jobber/design');
+var AnimatedPresence = require('../AnimatedPresence-20a02aaa.js');
+require('react');
+require('framer-motion');
+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;
+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/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-d4b84edf.js');
+var Combobox = require('../Combobox-6edd91fa.js');
 require('react');
 require('classnames');
 require('react-dom');
@@ -15,6 +15,8 @@ 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');
@@ -26,7 +28,6 @@ require('../Chip-c91fd6c8.js');
 require('../Avatar-76a799fa.js');
 require('color');
 require('../Tooltip-27771182.js');
-require('framer-motion');
 require('lodash/debounce');
 require('lodash/noop');
 require('@jobber/hooks/useAssert');

package/dist/{Combobox-d4b84edf.js → Combobox-6edd91fa.js}

@@ -8,6 +8,7 @@ var Icon = require('./Icon-405a216c.js');
 var Text = require('./Text-259af966.js');
 var Glimmer = require('./Glimmer-7c317864.js');
 var Spinner = require('./Spinner-9d8fc7ff.js');
+var AnimatedPresence = require('./AnimatedPresence-20a02aaa.js');
 var tslib_es6 = require('./tslib.es6-754e2961.js');
 var useInView = require('@jobber/hooks/useInView');
 var Typography = require('./Typography-c45bf216.js');
@@ -64,7 +65,7 @@ function ComboboxContentSearch(props) {
     }
 }
 
-var css_248z$5 = ".SgMzjOcdE-E- {\n  position: relative;\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n}\n\n.TwoTCjgcssc- {\n  display: -ms-flexbox;\n  display: flex;\n\n  max-height: calc((16px / 2) * 33.33);\n\n  max-height: calc(calc(16px / 2) * 33.33);\n\n  max-height: calc(var(--space-small) * 33.33);\n  margin: 0;\n  padding: 0;\n  overflow: auto;\n  list-style: none;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n}\n\n._8T5M7MGwCRE-,\n._4y5NXkNeIQM- {\n  padding: calc(16px / 2) calc(16px * 1);\n  padding: var(--space-small) var(--space-base);\n}\n\n.SgMzjOcdE-E-::before,\n.SgMzjOcdE-E-::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  right: 0;\n  left: 0;\n  height: calc(16px * 1);\n  height: var(--space-base);\n  pointer-events: none;\n  transition: opacity 0.3s ease-in-out;\n}\n\n.SgMzjOcdE-E-::after {\n  bottom: calc(16px / 2);\n  bottom: var(--space-small);\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, 0) 0%,\n    rgb(255, 255, 255) 100%\n  );\n}\n\n.SgMzjOcdE-E-::before {\n  top: calc(16px / 2);\n  top: var(--space-small);\n  background: linear-gradient(\n    to bottom,\n    rgba(255, 255, 255, 1),\n    rgba(255, 255, 255, 0)\n  );\n}\n\n.T6E3VwBGoQM-::before,\n._6HQzxMQkXnE-::before {\n  opacity: 0;\n}\n\n._5YsJZyMDkbA-::after,\n._6HQzxMQkXnE-::after {\n  opacity: 0;\n}\n\n.A6z4OI58xoE- {\n  padding: calc(16px * 1) calc(16px * 1);\n  padding: var(--space-base) var(--space-base);\n}\n\n.A6z4OI58xoE-.QqHBSf52fPk- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: center;\n      justify-content: center;\n\n  position: fixed;\n  bottom: 0;\n\n  width: 100%;\n\n  padding: calc(16px * 1) 0;\n\n  padding: var(--space-base) 0;\n}\n";
+var css_248z$5 = ".SgMzjOcdE-E- {\n  position: relative;\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n}\n\n.TwoTCjgcssc- {\n  display: -ms-flexbox;\n  display: flex;\n\n  max-height: calc((16px / 2) * 33.33);\n\n  max-height: calc(calc(16px / 2) * 33.33);\n\n  max-height: calc(var(--space-small) * 33.33);\n  margin: 0;\n  padding: 0;\n  overflow: auto;\n  list-style: none;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n}\n\n._8T5M7MGwCRE-,\n._4y5NXkNeIQM- {\n  padding: calc(16px / 2) calc(16px * 1);\n  padding: var(--space-small) var(--space-base);\n}\n\n.SgMzjOcdE-E-::before,\n.SgMzjOcdE-E-::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  right: 0;\n  left: 0;\n  height: calc(16px * 1);\n  height: var(--space-base);\n  pointer-events: none;\n  transition: opacity 0.3s ease-in-out;\n}\n\n.SgMzjOcdE-E-::after {\n  bottom: calc(16px / 2);\n  bottom: var(--space-small);\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, 0) 0%,\n    rgb(255, 255, 255) 100%\n  );\n}\n\n.SgMzjOcdE-E-::before {\n  top: calc(16px / 2);\n  top: var(--space-small);\n  background: linear-gradient(\n    to bottom,\n    rgba(255, 255, 255, 1),\n    rgba(255, 255, 255, 0)\n  );\n}\n\n.T6E3VwBGoQM-::before,\n._6HQzxMQkXnE-::before {\n  opacity: 0;\n}\n\n._5YsJZyMDkbA-::after,\n._6HQzxMQkXnE-::after {\n  opacity: 0;\n}\n\n.A6z4OI58xoE- {\n  padding: calc(16px * 1) calc(16px * 1);\n  padding: var(--space-base) var(--space-base);\n}\n\n.A6z4OI58xoE-.QqHBSf52fPk- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: center;\n      justify-content: center;\n  position: sticky;\n  bottom: 0;\n  padding: calc(16px * 1) 0;\n  padding: var(--space-base) 0;\n}\n\n.A6z4OI58xoE-.QqHBSf52fPk-:empty {\n  display: none;\n}\n";
 var styles$5 = {"container":"SgMzjOcdE-E-","optionsList":"TwoTCjgcssc-","filterMessage":"_8T5M7MGwCRE-","emptyStateMessage":"_4y5NXkNeIQM-","scrollTop":"T6E3VwBGoQM-","scrollNone":"_6HQzxMQkXnE-","scrollBottom":"_5YsJZyMDkbA-","loadingContainer":"A6z4OI58xoE-","hasOptions":"QqHBSf52fPk-"};
 styleInject_es.styleInject(css_248z$5);
 
@@ -108,11 +109,8 @@ function ComboboxContentList(props) {
             props.options.map(option => {
                 return (React__default["default"].createElement(ComboboxOption, { key: option.id, id: option.id, label: option.label }));
             }),
-            props.loading && optionsExist && (React__default["default"].createElement("div", { className: classnames__default["default"]([
-                    styles$5.loadingContainer,
-                    styles$5.hasOptions,
-                ]) },
-                React__default["default"].createElement(Spinner.Spinner, { size: "small" }))),
+            React__default["default"].createElement("div", { className: classnames__default["default"]([styles$5.loadingContainer, styles$5.hasOptions]) },
+                React__default["default"].createElement(AnimatedPresence.AnimatedPresence, { transition: "fromBottom" }, Boolean(props.loading && optionsExist) && (React__default["default"].createElement(Spinner.Spinner, { size: "small" })))),
             props.onLoadMore && (React__default["default"].createElement(ComboboxLoadMore, { onLoadMore: props.onLoadMore })))),
         props.loading && !optionsExist && (React__default["default"].createElement(React__default["default"].Fragment, null, Array.from({ length: 5 }).map((_, index) => (React__default["default"].createElement("div", { className: styles$5.loadingContainer, key: index },
             React__default["default"].createElement(Glimmer.Glimmer, { shape: "rectangle", size: "small" })))))),
@@ -353,15 +351,16 @@ var css_248z = ".W8qMZnORYxI- {\n  position: fixed;\n  top: 0;\n  right: 0;\n  b
 var styles = {"overlay":"W8qMZnORYxI-","wrapper":"_-0dkolvLF-Y-"};
 styleInject_es.styleInject(css_248z);
 
-function useMakeComboboxHandlers(setOpen, setSearchValue, selectedOptions, shouldScroll, selectedStateSetter, multiSelect, onClose) {
+function useMakeComboboxHandlers(setOpen, setSearchValue, selectedOptions, shouldScroll, selectedStateSetter, multiSelect, onClose, onSearch) {
     const handleClose = React.useCallback(() => {
         setOpen(false);
         setSearchValue("");
+        onSearch && onSearch("");
         onClose && onClose();
         if (selectedOptions.length > 0) {
             shouldScroll.current = true;
         }
-    }, [setOpen, setSearchValue, onClose, selectedOptions.length]);
+    }, [setOpen, setSearchValue, onClose, onSearch, selectedOptions.length]);
     const handleSelection = React.useCallback((selection) => {
         if (multiSelect) {
             handleMultiSelect(selectedStateSetter, selectedOptions, selection);
@@ -394,7 +393,7 @@ function useCombobox(selected, onSelect, options, onClose, multiSelect, onSearch
     const [open, setOpen] = React.useState(false);
     const [searchValue, setSearchValue] = React.useState("");
     const searchCallback = React.useCallback(debounce__default["default"]((value) => onSearch === null || onSearch === void 0 ? void 0 : onSearch(value), debounceTime), [onSearch, debounceTime]);
-    const { handleClose, handleSelection } = useMakeComboboxHandlers(setOpen, setSearchValue, selected, shouldScroll, onSelect, multiSelect, onClose);
+    const { handleClose, handleSelection } = useMakeComboboxHandlers(setOpen, setSearchValue, selected, shouldScroll, onSelect, multiSelect, onClose, onSearch);
     const internalFilteredOptions = options.filter(option => option.label.toLowerCase().includes(searchValue.toLowerCase()));
     return {
         wrapperRef,

package/dist/DataList/index.js

@@ -26,7 +26,7 @@ var ReactDOM = require('react-dom');
 var Checkbox = require('../Checkbox-99f6297f.js');
 var reactRouterDom = require('react-router-dom');
 var AnimatedSwitcher = require('../AnimatedSwitcher-3d45ec5d.js');
-var Combobox = require('../Combobox-d4b84edf.js');
+var Combobox = require('../Combobox-6edd91fa.js');
 var Chip = require('../Chip-c91fd6c8.js');
 var debounce = require('lodash/debounce');
 var InputText = require('../InputText-6e356985.js');
@@ -37,6 +37,7 @@ require('react-popper');
 require('../getAtlantisConfig-0f3e8af2.js');
 require('uuid');
 require('react-hook-form');
+require('../AnimatedPresence-20a02aaa.js');
 require('@jobber/hooks/useAssert');
 require('../Avatar-76a799fa.js');
 require('color');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.79.0",
+  "version": "4.79.2",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -84,5 +84,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "01c73a7bc9171ba85c75f5f0f5046baf8469f35a"
+  "gitHead": "b3b38d3fbaad852f2a229909cb39f265bbbe2178"
 }