@jobber/components 4.79.0 → 4.79.2-JOB-88844-.5

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.
Files changed (8) hide show
  1. package/dist/AnimatedPresence/index.js +5 -99
  2. package/dist/AnimatedPresence-20a02aaa.js +104 -0
  3. package/dist/Combobox/hooks/useMakeComboboxHandlers.d.ts +1 -1
  4. package/dist/Combobox/index.js +3 -2
  5. package/dist/{Combobox-d4b84edf.js → Combobox-6edd91fa.js} +8 -9
  6. package/dist/DataList/DataList.const.d.ts +1 -0
  7. package/dist/DataList/index.js +9 -6
  8. package/package.json +3 -3
package/dist/AnimatedPresence/index.js CHANGED
@@ -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;
package/dist/AnimatedPresence-20a02aaa.js ADDED
@@ -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;
package/dist/Combobox/hooks/useMakeComboboxHandlers.d.ts CHANGED
@@ -4,4 +4,4 @@ export interface UseMakeComboboxHandlersReturn {
4
4
  handleClose: () => void;
5
5
  handleSelection: (selection: ComboboxOption) => void;
6
6
  }
7
- 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;
7
+ 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 CHANGED
@@ -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-6edd91fa.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');
package/dist/{Combobox-d4b84edf.js → Combobox-6edd91fa.js} RENAMED
@@ -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" })))))),
@@ -353,15 +351,16 @@ var css_248z = ".W8qMZnORYxI- {\n position: fixed;\n top: 0;\n right: 0;\n b
353
351
  var styles = {"overlay":"W8qMZnORYxI-","wrapper":"_-0dkolvLF-Y-"};
354
352
  styleInject_es.styleInject(css_248z);
355
353
 
356
- function useMakeComboboxHandlers(setOpen, setSearchValue, selectedOptions, shouldScroll, selectedStateSetter, multiSelect, onClose) {
354
+ function useMakeComboboxHandlers(setOpen, setSearchValue, selectedOptions, shouldScroll, selectedStateSetter, multiSelect, onClose, onSearch) {
357
355
  const handleClose = React.useCallback(() => {
358
356
  setOpen(false);
359
357
  setSearchValue("");
358
+ onSearch && onSearch("");
360
359
  onClose && onClose();
361
360
  if (selectedOptions.length > 0) {
362
361
  shouldScroll.current = true;
363
362
  }
364
- }, [setOpen, setSearchValue, onClose, selectedOptions.length]);
363
+ }, [setOpen, setSearchValue, onClose, onSearch, selectedOptions.length]);
365
364
  const handleSelection = React.useCallback((selection) => {
366
365
  if (multiSelect) {
367
366
  handleMultiSelect(selectedStateSetter, selectedOptions, selection);
@@ -394,7 +393,7 @@ function useCombobox(selected, onSelect, options, onClose, multiSelect, onSearch
394
393
  const [open, setOpen] = React.useState(false);
395
394
  const [searchValue, setSearchValue] = React.useState("");
396
395
  const searchCallback = React.useCallback(debounce__default["default"]((value) => onSearch === null || onSearch === void 0 ? void 0 : onSearch(value), debounceTime), [onSearch, debounceTime]);
397
- const { handleClose, handleSelection } = useMakeComboboxHandlers(setOpen, setSearchValue, selected, shouldScroll, onSelect, multiSelect, onClose);
396
+ const { handleClose, handleSelection } = useMakeComboboxHandlers(setOpen, setSearchValue, selected, shouldScroll, onSelect, multiSelect, onClose, onSearch);
398
397
  const internalFilteredOptions = options.filter(option => option.label.toLowerCase().includes(searchValue.toLowerCase()));
399
398
  return {
400
399
  wrapperRef,
package/dist/DataList/DataList.const.d.ts CHANGED
@@ -15,6 +15,7 @@ export declare const SEARCH_DEBOUNCE_DELAY: number;
15
15
  export declare const DATA_LIST_FILTERING_SPINNER_TEST_ID = "ATL-DataList-filteringSpinner";
16
16
  export declare const DATA_LIST_LOADING_MORE_SPINNER_TEST_ID = "ATL-DataList-loadingMoreSpinner";
17
17
  export declare const DATA_LOAD_MORE_TEST_ID = "ATL-DataList-LoadMore-trigger";
18
+ export declare const DATA_LIST_STICKY_HEADER_TEST_ID = "ATL-DataList-stickyHeader";
18
19
  export declare const TRANSITION_DURATION_IN_SECONDS: number;
19
20
  export declare const TRANSITION_DELAY_IN_SECONDS: number;
20
21
  export {};
package/dist/DataList/index.js CHANGED
@@ -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-6edd91fa.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');
@@ -144,6 +145,7 @@ const SEARCH_DEBOUNCE_DELAY = design.tokens["timing-slowest"];
144
145
  const DATA_LIST_FILTERING_SPINNER_TEST_ID = "ATL-DataList-filteringSpinner";
145
146
  const DATA_LIST_LOADING_MORE_SPINNER_TEST_ID = "ATL-DataList-loadingMoreSpinner";
146
147
  const DATA_LOAD_MORE_TEST_ID = "ATL-DataList-LoadMore-trigger";
148
+ const DATA_LIST_STICKY_HEADER_TEST_ID = "ATL-DataList-stickyHeader";
147
149
  const TRANSITION_DURATION_IN_SECONDS = design.tokens["timing-base"] / 1000;
148
150
  const TRANSITION_DELAY_IN_SECONDS = design.tokens["timing-quick"] / 1000;
149
151
 
@@ -1016,7 +1018,7 @@ function DataListStickyHeader({ children }) {
1016
1018
  ref.current && observer.unobserve(ref.current);
1017
1019
  };
1018
1020
  }, [handleObserver, ref.current]);
1019
- return (React__default["default"].createElement("div", { ref: ref, className: classnames__default["default"](styles$5.header, { [styles$5.stuck]: isStuck }) }, children));
1021
+ return (React__default["default"].createElement("div", { "data-testid": DATA_LIST_STICKY_HEADER_TEST_ID, ref: ref, className: classnames__default["default"](styles$5.header, { [styles$5.stuck]: isStuck }) }, children));
1020
1022
  }
1021
1023
 
1022
1024
  var css_248z$4 = ".tj0MOMhLEEY- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.SaPMOnvw-3c- {\n --transition-properties: var(--timing-base) ease-in-out;\n --button-offset: calc(var(--space-largest) - var(--space-smaller));\n\n position: absolute;\n top: 50%;\n right: calc((16px * 3) - (16px / 4));\n right: calc(calc(16px * 3) - calc(16px / 4));\n right: var(--button-offset);\n visibility: hidden;\n width: 0;\n padding: calc(16px / 4) 0;\n padding: var(--space-smaller) 0;\n background-color: rgba(255, 255, 255, 1);\n background-color: var(--color-surface);\n opacity: 0;\n -webkit-transform: translateY(-50%);\n transform: translateY(-50%);\n transition: opacity 200ms ease-in-out,\n width 200ms ease-in-out, visibility 200ms ease-in-out;\n transition: opacity var(--transition-properties),\n width var(--transition-properties), visibility var(--transition-properties);\n}\n\n._3S1-91v2SYI- {\n visibility: visible;\n width: calc(100% - var(--button-offset));\n opacity: 1;\n}\n\n@media (min-width: 768px) {\n\n.SaPMOnvw-3c-,\n._3S1-91v2SYI- {\n position: static;\n visibility: visible;\n width: auto;\n padding: 0;\n background-color: transparent;\n opacity: 1;\n -webkit-transform: none;\n transform: none;\n transition: none;\n}\n }\n\n@media (--medium-screens-and-up) {\n\n.SaPMOnvw-3c-,\n._3S1-91v2SYI- {\n position: static;\n visibility: visible;\n width: auto;\n padding: 0;\n background-color: transparent;\n opacity: 1;\n -webkit-transform: none;\n transform: none;\n transition: none;\n}\n }\n\n._9GlBktsUALw- {\n display: block;\n}\n\n@media (min-width: 768px) {\n\n._9GlBktsUALw- {\n display: none;\n}\n }\n\n@media (--medium-screens-and-up) {\n\n._9GlBktsUALw- {\n display: none;\n}\n }\n\n/*\n * No Filters Styling\n *\n * When there are no filters, the search input is always visible.\n * ------------------------------------------------------------------------- */\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n position: static;\n visibility: visible;\n width: auto;\n opacity: 1;\n transition: none;\n}\n\n@media (min-width: 768px) {\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n max-width: 30%;\n}\n }\n\n@media (--medium-screens-and-up) {\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n max-width: 30%;\n}\n }\n\n._3Pjrt42x454- ._9GlBktsUALw- {\n display: none;\n}\n";
@@ -1230,6 +1232,7 @@ function DataList(_a) {
1230
1232
  const emptyStateComponents = getCompoundComponents(props.children, DataListEmptyState);
1231
1233
  const itemActionComponent = getCompoundComponent(props.children, DataListItemActions);
1232
1234
  const bulkActionsComponent = getCompoundComponent(props.children, DataListBulkActions);
1235
+ const shouldRenderStickyHeader = !!filterComponent || !!searchComponent;
1233
1236
  return (React__default["default"].createElement(DataListContext.Provider, { value: Object.assign(Object.assign({ searchComponent,
1234
1237
  filterComponent,
1235
1238
  layoutComponents,
@@ -1242,7 +1245,7 @@ function DataList(_a) {
1242
1245
  registerLayout }, props), { selected,
1243
1246
  // T !== DataListObject
1244
1247
  sorting: sorting }) },
1245
- React__default["default"].createElement(InternalDataList, null)));
1248
+ React__default["default"].createElement(InternalDataList, { shouldRenderStickyHeader: shouldRenderStickyHeader })));
1246
1249
  function registerLayoutBreakpoints(size) {
1247
1250
  setLayoutBreakpoints(prev => sortBreakpoints([...prev, size]));
1248
1251
  }
@@ -1250,7 +1253,7 @@ function DataList(_a) {
1250
1253
  setLayouts(prev => (Object.assign(Object.assign({}, prev), { [size]: children })));
1251
1254
  }
1252
1255
  }
1253
- function InternalDataList() {
1256
+ function InternalDataList({ shouldRenderStickyHeader, }) {
1254
1257
  const { data, title, totalCount, loadingState = "none", layoutComponents, } = useDataListContext();
1255
1258
  const backToTopRef = React.useRef(null);
1256
1259
  const initialLoading = loadingState === "initial";
@@ -1261,12 +1264,12 @@ function InternalDataList() {
1261
1264
  title && React__default["default"].createElement(Heading.Heading, { level: 3 }, title),
1262
1265
  React__default["default"].createElement(DataListTotalCount, { totalCount: totalCount, loading: initialLoading })),
1263
1266
  React__default["default"].createElement("div", { ref: backToTopRef }),
1264
- React__default["default"].createElement(DataListStickyHeader, null,
1267
+ shouldRenderStickyHeader && (React__default["default"].createElement(DataListStickyHeader, null,
1265
1268
  React__default["default"].createElement("div", { className: styles$g.headerFilters },
1266
1269
  React__default["default"].createElement(InternalDataListFilters, null),
1267
1270
  React__default["default"].createElement(InternalDataListSearch, null)),
1268
1271
  React__default["default"].createElement(InternalDataListStatusBar, null),
1269
- React__default["default"].createElement(DataListHeader, null)),
1272
+ React__default["default"].createElement(DataListHeader, null))),
1270
1273
  initialLoading && React__default["default"].createElement(DataListLoadingState, null),
1271
1274
  showEmptyState && React__default["default"].createElement(InternalDataListEmptyState, null),
1272
1275
  layoutComponents,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jobber/components",
3
- "version": "4.79.0",
3
+ "version": "4.79.2-JOB-88844-.5+b7447611",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -20,7 +20,7 @@
20
20
  ],
21
21
  "dependencies": {
22
22
  "@jobber/design": "^0.53.0",
23
- "@jobber/formatters": "*",
23
+ "@jobber/formatters": "^0.2.2",
24
24
  "@jobber/hooks": "^2.8.2",
25
25
  "@popperjs/core": "^2.0.6",
26
26
  "@std-proposal/temporal": "0.0.1",
@@ -84,5 +84,5 @@
84
84
  "> 1%",
85
85
  "IE 10"
86
86
  ],
87
- "gitHead": "01c73a7bc9171ba85c75f5f0f5046baf8469f35a"
87
+ "gitHead": "b74476111dae7c641dcd2acae08dbf2aa4c45e69"
88
88
  }