@jobber/components 4.79.0 → 4.79.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2,105 +2,11 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var React = require('react');
6
- var framerMotion = require('framer-motion');
7
- var design = require('@jobber/design');
5
+ var AnimatedPresence = require('../AnimatedPresence-20a02aaa.js');
6
+ require('react');
7
+ require('framer-motion');
8
+ require('@jobber/design');
8
9
 
9
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
10
10
 
11
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
12
11
 
13
- const TIMING_QUICK = toSeconds(design.tokens["timing-quick"]);
14
- const TIMING_BASE = toSeconds(design.tokens["timing-base"]);
15
- const baseTransition = {
16
- visible: { opacity: 1 },
17
- hidden: { opacity: 0 },
18
- };
19
- const fade = {
20
- visible: { opacity: 1 },
21
- hidden: { opacity: 0 },
22
- };
23
- const popIn = {
24
- visible: Object.assign({ scale: 1 }, baseTransition.visible),
25
- hidden: Object.assign({ scale: 0.95 }, baseTransition.hidden),
26
- };
27
- const fromTop = {
28
- visible: Object.assign({ y: 0 }, baseTransition.visible),
29
- hidden: Object.assign({ y: -design.tokens["space-base"] }, baseTransition.hidden),
30
- };
31
- const fromBottom = {
32
- visible: Object.assign({ y: 0 }, baseTransition.visible),
33
- hidden: Object.assign({ y: design.tokens["space-base"] }, baseTransition.hidden),
34
- };
35
- const fromLeft = {
36
- visible: Object.assign({ x: 0 }, baseTransition.visible),
37
- hidden: Object.assign({ x: -design.tokens["space-base"] }, baseTransition.hidden),
38
- };
39
- const fromRight = {
40
- visible: Object.assign({ x: 0 }, baseTransition.visible),
41
- hidden: Object.assign({ x: design.tokens["space-base"] }, baseTransition.hidden),
42
- };
43
- const fromLeftToRight = {
44
- initial: Object.assign({ x: -design.tokens["space-base"] }, baseTransition.hidden),
45
- visible: Object.assign({ x: 0 }, baseTransition.visible),
46
- hidden: Object.assign({ x: design.tokens["space-base"] }, baseTransition.hidden),
47
- };
48
- const fromRightToLeft = {
49
- initial: Object.assign({ x: design.tokens["space-base"] }, baseTransition.hidden),
50
- visible: Object.assign({ x: 0 }, baseTransition.visible),
51
- hidden: Object.assign({ x: -design.tokens["space-base"] }, baseTransition.hidden),
52
- };
53
- function toSeconds(ms) {
54
- return ms / 1000;
55
- }
56
-
57
- function usePreviousValue(value) {
58
- const [previousValue, setPreviousValue] = React.useState(value);
59
- React.useEffect(() => {
60
- setPreviousValue(value);
61
- }, [value]);
62
- return [previousValue, setPreviousValue];
63
- }
64
-
65
- const transitions = {
66
- fromBottom,
67
- fromTop,
68
- fromLeft,
69
- fromRight,
70
- popIn,
71
- fromLeftToRight,
72
- fromRightToLeft,
73
- fade,
74
- };
75
- function AnimatedPresence(props) {
76
- const shouldReduceMotion = framerMotion.useReducedMotion();
77
- if (shouldReduceMotion) {
78
- return React__default["default"].createElement(React__default["default"].Fragment, null, props.children);
79
- }
80
- return React__default["default"].createElement(InternalAnimatedPresence, Object.assign({}, props));
81
- }
82
- function InternalAnimatedPresence({ transition = "fromTop", initial = false, children, }) {
83
- const transitionVariation = transitions[transition];
84
- const hasInitialTransition = "initial" in transitionVariation;
85
- const childCount = React.Children.count(children);
86
- // Set the initial value to 0 so it staggers the animation on mount when
87
- // initial is true.
88
- const [lastChildIndex, setLastChildIndex] = usePreviousValue(0);
89
- // Whenever the children count changes, update the last index.
90
- React.useEffect(() => {
91
- setLastChildIndex(childCount - 1);
92
- }, [childCount]);
93
- 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: {
94
- duration: TIMING_BASE,
95
- delay: generateDelayTime(i),
96
- } }, child)))));
97
- function generateDelayTime(index) {
98
- // Don't add a delay if it's already rendered.
99
- if (lastChildIndex > index)
100
- return 0;
101
- // Stagger the animation starting after the previous last child index.
102
- return (index - lastChildIndex) * TIMING_QUICK;
103
- }
104
- }
105
-
106
- exports.AnimatedPresence = AnimatedPresence;
12
+ exports.AnimatedPresence = AnimatedPresence.AnimatedPresence;
@@ -0,0 +1,104 @@
1
+ 'use strict';
2
+
3
+ var React = require('react');
4
+ var framerMotion = require('framer-motion');
5
+ var design = require('@jobber/design');
6
+
7
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
8
+
9
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
10
+
11
+ const TIMING_QUICK = toSeconds(design.tokens["timing-quick"]);
12
+ const TIMING_BASE = toSeconds(design.tokens["timing-base"]);
13
+ const baseTransition = {
14
+ visible: { opacity: 1 },
15
+ hidden: { opacity: 0 },
16
+ };
17
+ const fade = {
18
+ visible: { opacity: 1 },
19
+ hidden: { opacity: 0 },
20
+ };
21
+ const popIn = {
22
+ visible: Object.assign({ scale: 1 }, baseTransition.visible),
23
+ hidden: Object.assign({ scale: 0.95 }, baseTransition.hidden),
24
+ };
25
+ const fromTop = {
26
+ visible: Object.assign({ y: 0 }, baseTransition.visible),
27
+ hidden: Object.assign({ y: -design.tokens["space-base"] }, baseTransition.hidden),
28
+ };
29
+ const fromBottom = {
30
+ visible: Object.assign({ y: 0 }, baseTransition.visible),
31
+ hidden: Object.assign({ y: design.tokens["space-base"] }, baseTransition.hidden),
32
+ };
33
+ const fromLeft = {
34
+ visible: Object.assign({ x: 0 }, baseTransition.visible),
35
+ hidden: Object.assign({ x: -design.tokens["space-base"] }, baseTransition.hidden),
36
+ };
37
+ const fromRight = {
38
+ visible: Object.assign({ x: 0 }, baseTransition.visible),
39
+ hidden: Object.assign({ x: design.tokens["space-base"] }, baseTransition.hidden),
40
+ };
41
+ const fromLeftToRight = {
42
+ initial: Object.assign({ x: -design.tokens["space-base"] }, baseTransition.hidden),
43
+ visible: Object.assign({ x: 0 }, baseTransition.visible),
44
+ hidden: Object.assign({ x: design.tokens["space-base"] }, baseTransition.hidden),
45
+ };
46
+ const fromRightToLeft = {
47
+ initial: Object.assign({ x: design.tokens["space-base"] }, baseTransition.hidden),
48
+ visible: Object.assign({ x: 0 }, baseTransition.visible),
49
+ hidden: Object.assign({ x: -design.tokens["space-base"] }, baseTransition.hidden),
50
+ };
51
+ function toSeconds(ms) {
52
+ return ms / 1000;
53
+ }
54
+
55
+ function usePreviousValue(value) {
56
+ const [previousValue, setPreviousValue] = React.useState(value);
57
+ React.useEffect(() => {
58
+ setPreviousValue(value);
59
+ }, [value]);
60
+ return [previousValue, setPreviousValue];
61
+ }
62
+
63
+ const transitions = {
64
+ fromBottom,
65
+ fromTop,
66
+ fromLeft,
67
+ fromRight,
68
+ popIn,
69
+ fromLeftToRight,
70
+ fromRightToLeft,
71
+ fade,
72
+ };
73
+ function AnimatedPresence(props) {
74
+ const shouldReduceMotion = framerMotion.useReducedMotion();
75
+ if (shouldReduceMotion) {
76
+ return React__default["default"].createElement(React__default["default"].Fragment, null, props.children);
77
+ }
78
+ return React__default["default"].createElement(InternalAnimatedPresence, Object.assign({}, props));
79
+ }
80
+ function InternalAnimatedPresence({ transition = "fromTop", initial = false, children, }) {
81
+ const transitionVariation = transitions[transition];
82
+ const hasInitialTransition = "initial" in transitionVariation;
83
+ const childCount = React.Children.count(children);
84
+ // Set the initial value to 0 so it staggers the animation on mount when
85
+ // initial is true.
86
+ const [lastChildIndex, setLastChildIndex] = usePreviousValue(0);
87
+ // Whenever the children count changes, update the last index.
88
+ React.useEffect(() => {
89
+ setLastChildIndex(childCount - 1);
90
+ }, [childCount]);
91
+ 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: {
92
+ duration: TIMING_BASE,
93
+ delay: generateDelayTime(i),
94
+ } }, child)))));
95
+ function generateDelayTime(index) {
96
+ // Don't add a delay if it's already rendered.
97
+ if (lastChildIndex > index)
98
+ return 0;
99
+ // Stagger the animation starting after the previous last child index.
100
+ return (index - lastChildIndex) * TIMING_QUICK;
101
+ }
102
+ }
103
+
104
+ exports.AnimatedPresence = AnimatedPresence;
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var Combobox = require('../Combobox-d4b84edf.js');
5
+ var Combobox = require('../Combobox-ca9ac94b.js');
6
6
  require('react');
7
7
  require('classnames');
8
8
  require('react-dom');
@@ -15,6 +15,8 @@ require('../Glimmer-7c317864.js');
15
15
  require('../tslib.es6-754e2961.js');
16
16
  require('../Content-e3f7b6fc.js');
17
17
  require('../Spinner-9d8fc7ff.js');
18
+ require('../AnimatedPresence-20a02aaa.js');
19
+ require('framer-motion');
18
20
  require('@jobber/hooks/useInView');
19
21
  require('../Button-b73a5e01.js');
20
22
  require('react-router-dom');
@@ -26,7 +28,6 @@ require('../Chip-c91fd6c8.js');
26
28
  require('../Avatar-76a799fa.js');
27
29
  require('color');
28
30
  require('../Tooltip-27771182.js');
29
- require('framer-motion');
30
31
  require('lodash/debounce');
31
32
  require('lodash/noop');
32
33
  require('@jobber/hooks/useAssert');
@@ -8,6 +8,7 @@ var Icon = require('./Icon-405a216c.js');
8
8
  var Text = require('./Text-259af966.js');
9
9
  var Glimmer = require('./Glimmer-7c317864.js');
10
10
  var Spinner = require('./Spinner-9d8fc7ff.js');
11
+ var AnimatedPresence = require('./AnimatedPresence-20a02aaa.js');
11
12
  var tslib_es6 = require('./tslib.es6-754e2961.js');
12
13
  var useInView = require('@jobber/hooks/useInView');
13
14
  var Typography = require('./Typography-c45bf216.js');
@@ -64,7 +65,7 @@ function ComboboxContentSearch(props) {
64
65
  }
65
66
  }
66
67
 
67
- 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";
68
+ 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";
68
69
  var styles$5 = {"container":"SgMzjOcdE-E-","optionsList":"TwoTCjgcssc-","filterMessage":"_8T5M7MGwCRE-","emptyStateMessage":"_4y5NXkNeIQM-","scrollTop":"T6E3VwBGoQM-","scrollNone":"_6HQzxMQkXnE-","scrollBottom":"_5YsJZyMDkbA-","loadingContainer":"A6z4OI58xoE-","hasOptions":"QqHBSf52fPk-"};
69
70
  styleInject_es.styleInject(css_248z$5);
70
71
 
@@ -108,11 +109,8 @@ function ComboboxContentList(props) {
108
109
  props.options.map(option => {
109
110
  return (React__default["default"].createElement(ComboboxOption, { key: option.id, id: option.id, label: option.label }));
110
111
  }),
111
- props.loading && optionsExist && (React__default["default"].createElement("div", { className: classnames__default["default"]([
112
- styles$5.loadingContainer,
113
- styles$5.hasOptions,
114
- ]) },
115
- React__default["default"].createElement(Spinner.Spinner, { size: "small" }))),
112
+ React__default["default"].createElement("div", { className: classnames__default["default"]([styles$5.loadingContainer, styles$5.hasOptions]) },
113
+ React__default["default"].createElement(AnimatedPresence.AnimatedPresence, { transition: "fromBottom" }, Boolean(props.loading && optionsExist) && (React__default["default"].createElement(Spinner.Spinner, { size: "small" })))),
116
114
  props.onLoadMore && (React__default["default"].createElement(ComboboxLoadMore, { onLoadMore: props.onLoadMore })))),
117
115
  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 },
118
116
  React__default["default"].createElement(Glimmer.Glimmer, { shape: "rectangle", size: "small" })))))),
@@ -26,7 +26,7 @@ var ReactDOM = require('react-dom');
26
26
  var Checkbox = require('../Checkbox-99f6297f.js');
27
27
  var reactRouterDom = require('react-router-dom');
28
28
  var AnimatedSwitcher = require('../AnimatedSwitcher-3d45ec5d.js');
29
- var Combobox = require('../Combobox-d4b84edf.js');
29
+ var Combobox = require('../Combobox-ca9ac94b.js');
30
30
  var Chip = require('../Chip-c91fd6c8.js');
31
31
  var debounce = require('lodash/debounce');
32
32
  var InputText = require('../InputText-6e356985.js');
@@ -37,6 +37,7 @@ require('react-popper');
37
37
  require('../getAtlantisConfig-0f3e8af2.js');
38
38
  require('uuid');
39
39
  require('react-hook-form');
40
+ require('../AnimatedPresence-20a02aaa.js');
40
41
  require('@jobber/hooks/useAssert');
41
42
  require('../Avatar-76a799fa.js');
42
43
  require('color');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jobber/components",
3
- "version": "4.79.0",
3
+ "version": "4.79.1",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -84,5 +84,5 @@
84
84
  "> 1%",
85
85
  "IE 10"
86
86
  ],
87
- "gitHead": "01c73a7bc9171ba85c75f5f0f5046baf8469f35a"
87
+ "gitHead": "78a7f41466245e133f4966509bea0e4121c3e77c"
88
88
  }