@jobber/components 8.12.2 → 8.13.0
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.
- package/dist/Combobox/components/ComboboxContent/ComboboxContentList/index.cjs +11 -2
- package/dist/Combobox/components/ComboboxContent/ComboboxContentList/index.mjs +11 -2
- package/dist/Combobox/components/ComboboxContent/index.cjs +11 -2
- package/dist/Combobox/components/ComboboxContent/index.mjs +11 -2
- package/dist/Combobox/index.cjs +11 -3
- package/dist/Combobox/index.mjs +11 -3
- package/dist/ComboboxContentList-cjs.js +5 -2
- package/dist/ComboboxContentList-es.js +5 -2
- package/dist/DataList/components/DataListFilters/components/DataListSort/index.cjs +10 -2
- package/dist/DataList/components/DataListFilters/components/DataListSort/index.mjs +10 -2
- package/dist/DataList/components/DataListFilters/index.cjs +10 -4
- package/dist/DataList/components/DataListFilters/index.mjs +10 -4
- package/dist/DataList/index.cjs +7 -1
- package/dist/DataList/index.mjs +7 -1
- package/dist/docs/index.md +0 -1
- package/dist/index.cjs +0 -2
- package/dist/index.d.mts +0 -1
- package/dist/index.d.ts +0 -1
- package/dist/index.mjs +0 -1
- package/dist/utils/meta/meta.json +0 -1
- package/package.json +2 -7
- package/AnimatedPresence.d.ts +0 -1
- package/AnimatedPresence.js +0 -17
- package/dist/AnimatedPresence/AnimatedPresence.d.ts +0 -25
- package/dist/AnimatedPresence/AnimatedPresence.transitions.d.ts +0 -11
- package/dist/AnimatedPresence/hooks/usePreviousValue.d.ts +0 -1
- package/dist/AnimatedPresence/index.cjs +0 -10
- package/dist/AnimatedPresence/index.d.ts +0 -1
- package/dist/AnimatedPresence/index.mjs +0 -4
- package/dist/AnimatedPresence-cjs.js +0 -100
- package/dist/AnimatedPresence-es.js +0 -98
- package/dist/docs/AnimatedPresence/AnimatedPresence.md +0 -74
|
@@ -3,15 +3,24 @@
|
|
|
3
3
|
var ComboboxContentList = require('../../../../ComboboxContentList-cjs.js');
|
|
4
4
|
require('react');
|
|
5
5
|
require('classnames');
|
|
6
|
+
require('framer-motion');
|
|
6
7
|
require('../../../../Text-cjs.js');
|
|
7
8
|
require('../../../../Typography-cjs.js');
|
|
8
9
|
require('../../../../Glimmer-cjs.js');
|
|
9
10
|
require('../../../../tslib.es6-cjs.js');
|
|
10
11
|
require('../../../../Content-cjs.js');
|
|
11
12
|
require('../../../../Spinner-cjs.js');
|
|
12
|
-
require('../../../../
|
|
13
|
-
require('framer-motion');
|
|
13
|
+
require('../../../../AtlantisThemeContext-cjs.js');
|
|
14
14
|
require('@jobber/design');
|
|
15
|
+
require('../../../../_commonjsHelpers-cjs.js');
|
|
16
|
+
require('../../../../identity-cjs.js');
|
|
17
|
+
require('../../../../isTypedArray-cjs.js');
|
|
18
|
+
require('../../../../isObjectLike-cjs.js');
|
|
19
|
+
require('../../../../_baseAssignValue-cjs.js');
|
|
20
|
+
require('../../../../_baseFor-cjs.js');
|
|
21
|
+
require('../../../../keysIn-cjs.js');
|
|
22
|
+
require('../../../../_isIterateeCall-cjs.js');
|
|
23
|
+
require('../../../../_setToString-cjs.js');
|
|
15
24
|
require('../../../../ComboboxOption-cjs.js');
|
|
16
25
|
require('../../../../Icon-cjs.js');
|
|
17
26
|
require('../../../../Flex-cjs.js');
|
|
@@ -1,15 +1,24 @@
|
|
|
1
1
|
export { C as ComboboxContentList } from '../../../../ComboboxContentList-es.js';
|
|
2
2
|
import 'react';
|
|
3
3
|
import 'classnames';
|
|
4
|
+
import 'framer-motion';
|
|
4
5
|
import '../../../../Text-es.js';
|
|
5
6
|
import '../../../../Typography-es.js';
|
|
6
7
|
import '../../../../Glimmer-es.js';
|
|
7
8
|
import '../../../../tslib.es6-es.js';
|
|
8
9
|
import '../../../../Content-es.js';
|
|
9
10
|
import '../../../../Spinner-es.js';
|
|
10
|
-
import '../../../../
|
|
11
|
-
import 'framer-motion';
|
|
11
|
+
import '../../../../AtlantisThemeContext-es.js';
|
|
12
12
|
import '@jobber/design';
|
|
13
|
+
import '../../../../_commonjsHelpers-es.js';
|
|
14
|
+
import '../../../../identity-es.js';
|
|
15
|
+
import '../../../../isTypedArray-es.js';
|
|
16
|
+
import '../../../../isObjectLike-es.js';
|
|
17
|
+
import '../../../../_baseAssignValue-es.js';
|
|
18
|
+
import '../../../../_baseFor-es.js';
|
|
19
|
+
import '../../../../keysIn-es.js';
|
|
20
|
+
import '../../../../_isIterateeCall-es.js';
|
|
21
|
+
import '../../../../_setToString-es.js';
|
|
13
22
|
import '../../../../ComboboxOption-es.js';
|
|
14
23
|
import '../../../../Icon-es.js';
|
|
15
24
|
import '../../../../Flex-es.js';
|
|
@@ -13,14 +13,23 @@ require('../../../ComboboxContentSearch-cjs.js');
|
|
|
13
13
|
require('../../../Icon-cjs.js');
|
|
14
14
|
require('@jobber/design');
|
|
15
15
|
require('../../../ComboboxContentList-cjs.js');
|
|
16
|
+
require('framer-motion');
|
|
16
17
|
require('../../../Text-cjs.js');
|
|
17
18
|
require('../../../Typography-cjs.js');
|
|
18
19
|
require('../../../Glimmer-cjs.js');
|
|
19
20
|
require('../../../tslib.es6-cjs.js');
|
|
20
21
|
require('../../../Content-cjs.js');
|
|
21
22
|
require('../../../Spinner-cjs.js');
|
|
22
|
-
require('../../../
|
|
23
|
-
require('
|
|
23
|
+
require('../../../AtlantisThemeContext-cjs.js');
|
|
24
|
+
require('../../../_commonjsHelpers-cjs.js');
|
|
25
|
+
require('../../../identity-cjs.js');
|
|
26
|
+
require('../../../isTypedArray-cjs.js');
|
|
27
|
+
require('../../../isObjectLike-cjs.js');
|
|
28
|
+
require('../../../_baseAssignValue-cjs.js');
|
|
29
|
+
require('../../../_baseFor-cjs.js');
|
|
30
|
+
require('../../../keysIn-cjs.js');
|
|
31
|
+
require('../../../_isIterateeCall-cjs.js');
|
|
32
|
+
require('../../../_setToString-cjs.js');
|
|
24
33
|
require('../../../ComboboxOption-cjs.js');
|
|
25
34
|
require('../../../Flex-cjs.js');
|
|
26
35
|
require('../../../ComboboxProvider-cjs.js');
|
|
@@ -11,14 +11,23 @@ import '../../../ComboboxContentSearch-es.js';
|
|
|
11
11
|
import '../../../Icon-es.js';
|
|
12
12
|
import '@jobber/design';
|
|
13
13
|
import '../../../ComboboxContentList-es.js';
|
|
14
|
+
import 'framer-motion';
|
|
14
15
|
import '../../../Text-es.js';
|
|
15
16
|
import '../../../Typography-es.js';
|
|
16
17
|
import '../../../Glimmer-es.js';
|
|
17
18
|
import '../../../tslib.es6-es.js';
|
|
18
19
|
import '../../../Content-es.js';
|
|
19
20
|
import '../../../Spinner-es.js';
|
|
20
|
-
import '../../../
|
|
21
|
-
import '
|
|
21
|
+
import '../../../AtlantisThemeContext-es.js';
|
|
22
|
+
import '../../../_commonjsHelpers-es.js';
|
|
23
|
+
import '../../../identity-es.js';
|
|
24
|
+
import '../../../isTypedArray-es.js';
|
|
25
|
+
import '../../../isObjectLike-es.js';
|
|
26
|
+
import '../../../_baseAssignValue-es.js';
|
|
27
|
+
import '../../../_baseFor-es.js';
|
|
28
|
+
import '../../../keysIn-es.js';
|
|
29
|
+
import '../../../_isIterateeCall-es.js';
|
|
30
|
+
import '../../../_setToString-es.js';
|
|
22
31
|
import '../../../ComboboxOption-es.js';
|
|
23
32
|
import '../../../Flex-es.js';
|
|
24
33
|
import '../../../ComboboxProvider-es.js';
|
package/dist/Combobox/index.cjs
CHANGED
|
@@ -15,14 +15,23 @@ require('../ComboboxContentSearch-cjs.js');
|
|
|
15
15
|
require('../Icon-cjs.js');
|
|
16
16
|
require('@jobber/design');
|
|
17
17
|
require('../ComboboxContentList-cjs.js');
|
|
18
|
+
require('framer-motion');
|
|
18
19
|
require('../Text-cjs.js');
|
|
19
20
|
require('../Typography-cjs.js');
|
|
20
21
|
require('../Glimmer-cjs.js');
|
|
21
22
|
require('../tslib.es6-cjs.js');
|
|
22
23
|
require('../Content-cjs.js');
|
|
23
24
|
require('../Spinner-cjs.js');
|
|
24
|
-
require('../
|
|
25
|
-
require('
|
|
25
|
+
require('../AtlantisThemeContext-cjs.js');
|
|
26
|
+
require('../_commonjsHelpers-cjs.js');
|
|
27
|
+
require('../identity-cjs.js');
|
|
28
|
+
require('../isTypedArray-cjs.js');
|
|
29
|
+
require('../isObjectLike-cjs.js');
|
|
30
|
+
require('../_baseAssignValue-cjs.js');
|
|
31
|
+
require('../_baseFor-cjs.js');
|
|
32
|
+
require('../keysIn-cjs.js');
|
|
33
|
+
require('../_isIterateeCall-cjs.js');
|
|
34
|
+
require('../_setToString-cjs.js');
|
|
26
35
|
require('../ComboboxOption-cjs.js');
|
|
27
36
|
require('../Flex-cjs.js');
|
|
28
37
|
require('../ComboboxLoadMore-cjs.js');
|
|
@@ -39,7 +48,6 @@ require('color');
|
|
|
39
48
|
require('../useChildComponent-cjs.js');
|
|
40
49
|
require('../Tooltip-cjs.js');
|
|
41
50
|
require('../noop-cjs.js');
|
|
42
|
-
require('../_commonjsHelpers-cjs.js');
|
|
43
51
|
require('../ComboboxActivator-cjs.js');
|
|
44
52
|
|
|
45
53
|
|
package/dist/Combobox/index.mjs
CHANGED
|
@@ -13,14 +13,23 @@ import '../ComboboxContentSearch-es.js';
|
|
|
13
13
|
import '../Icon-es.js';
|
|
14
14
|
import '@jobber/design';
|
|
15
15
|
import '../ComboboxContentList-es.js';
|
|
16
|
+
import 'framer-motion';
|
|
16
17
|
import '../Text-es.js';
|
|
17
18
|
import '../Typography-es.js';
|
|
18
19
|
import '../Glimmer-es.js';
|
|
19
20
|
import '../tslib.es6-es.js';
|
|
20
21
|
import '../Content-es.js';
|
|
21
22
|
import '../Spinner-es.js';
|
|
22
|
-
import '../
|
|
23
|
-
import '
|
|
23
|
+
import '../AtlantisThemeContext-es.js';
|
|
24
|
+
import '../_commonjsHelpers-es.js';
|
|
25
|
+
import '../identity-es.js';
|
|
26
|
+
import '../isTypedArray-es.js';
|
|
27
|
+
import '../isObjectLike-es.js';
|
|
28
|
+
import '../_baseAssignValue-es.js';
|
|
29
|
+
import '../_baseFor-es.js';
|
|
30
|
+
import '../keysIn-es.js';
|
|
31
|
+
import '../_isIterateeCall-es.js';
|
|
32
|
+
import '../_setToString-es.js';
|
|
24
33
|
import '../ComboboxOption-es.js';
|
|
25
34
|
import '../Flex-es.js';
|
|
26
35
|
import '../ComboboxLoadMore-es.js';
|
|
@@ -37,5 +46,4 @@ import 'color';
|
|
|
37
46
|
import '../useChildComponent-es.js';
|
|
38
47
|
import '../Tooltip-es.js';
|
|
39
48
|
import '../noop-es.js';
|
|
40
|
-
import '../_commonjsHelpers-es.js';
|
|
41
49
|
import '../ComboboxActivator-es.js';
|
|
@@ -2,16 +2,18 @@
|
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var classnames = require('classnames');
|
|
5
|
+
var framerMotion = require('framer-motion');
|
|
5
6
|
var Text = require('./Text-cjs.js');
|
|
6
7
|
var Glimmer = require('./Glimmer-cjs.js');
|
|
7
8
|
var Spinner = require('./Spinner-cjs.js');
|
|
8
|
-
var
|
|
9
|
+
var AtlantisThemeContext = require('./AtlantisThemeContext-cjs.js');
|
|
9
10
|
var ComboboxOption = require('./ComboboxOption-cjs.js');
|
|
10
11
|
var ComboboxLoadMore = require('./ComboboxLoadMore-cjs.js');
|
|
11
12
|
|
|
12
13
|
var styles = {"container":"wFxd-3vJyKo-","optionsList":"PzwV5qiIgV4-","filterMessage":"c6TosVipkmw-","emptyStateMessage":"ZYrg-J4-v2Y-","scrollTop":"FLu6FtihsLo-","scrollNone":"-o-v1zjzb48-","scrollBottom":"_2iW5DZ16G2U-","loadingContainer":"PqwPrWjdB-A-","hasOptions":"v3cabuEY4Xk-","spinning":"NyvSj4UKYJM-"};
|
|
13
14
|
|
|
14
15
|
function ComboboxContentList(props) {
|
|
16
|
+
const { tokens } = AtlantisThemeContext.useAtlantisTheme();
|
|
15
17
|
const optionsExist = props.options.length > 0;
|
|
16
18
|
const hasSearchTerm = props.searchValue.length > 0;
|
|
17
19
|
const { listScrollState } = useScrollState(props.optionsListRef, props.options);
|
|
@@ -21,7 +23,8 @@ function ComboboxContentList(props) {
|
|
|
21
23
|
return (React.createElement(ComboboxOption.ComboboxOption, { key: option.id, id: option.id, label: option.label, prefix: option.prefix, customRender: option.customRender, onClick: option.onClick }));
|
|
22
24
|
}),
|
|
23
25
|
React.createElement("div", { className: classnames([styles.loadingContainer, styles.hasOptions]) },
|
|
24
|
-
React.createElement(
|
|
26
|
+
React.createElement(framerMotion.AnimatePresence, { initial: false }, Boolean(props.loading && optionsExist) && (React.createElement(framerMotion.motion.div, { initial: { opacity: 0, y: tokens["space-base"] }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: tokens["space-base"] }, transition: { duration: tokens["timing-base"] / 1000 } },
|
|
27
|
+
React.createElement(Spinner.Spinner, { size: "small" }))))),
|
|
25
28
|
props.onLoadMore && (React.createElement(ComboboxLoadMore.ComboboxLoadMore, { onLoadMore: props.onLoadMore })))),
|
|
26
29
|
props.loading && !optionsExist && (React.createElement(React.Fragment, null, Array.from({ length: 5 }).map((_, index) => (React.createElement("div", { className: styles.loadingContainer, key: index },
|
|
27
30
|
React.createElement(Glimmer.Glimmer, { shape: "rectangle", size: "small" })))))),
|
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
import React__default, { useState, useEffect } from 'react';
|
|
2
2
|
import classnames from 'classnames';
|
|
3
|
+
import { AnimatePresence, motion } from 'framer-motion';
|
|
3
4
|
import { T as Text } from './Text-es.js';
|
|
4
5
|
import { G as Glimmer } from './Glimmer-es.js';
|
|
5
6
|
import { S as Spinner } from './Spinner-es.js';
|
|
6
|
-
import {
|
|
7
|
+
import { u as useAtlantisTheme } from './AtlantisThemeContext-es.js';
|
|
7
8
|
import { C as ComboboxOption } from './ComboboxOption-es.js';
|
|
8
9
|
import { C as ComboboxLoadMore } from './ComboboxLoadMore-es.js';
|
|
9
10
|
|
|
10
11
|
var styles = {"container":"wFxd-3vJyKo-","optionsList":"PzwV5qiIgV4-","filterMessage":"c6TosVipkmw-","emptyStateMessage":"ZYrg-J4-v2Y-","scrollTop":"FLu6FtihsLo-","scrollNone":"-o-v1zjzb48-","scrollBottom":"_2iW5DZ16G2U-","loadingContainer":"PqwPrWjdB-A-","hasOptions":"v3cabuEY4Xk-","spinning":"NyvSj4UKYJM-"};
|
|
11
12
|
|
|
12
13
|
function ComboboxContentList(props) {
|
|
14
|
+
const { tokens } = useAtlantisTheme();
|
|
13
15
|
const optionsExist = props.options.length > 0;
|
|
14
16
|
const hasSearchTerm = props.searchValue.length > 0;
|
|
15
17
|
const { listScrollState } = useScrollState(props.optionsListRef, props.options);
|
|
@@ -19,7 +21,8 @@ function ComboboxContentList(props) {
|
|
|
19
21
|
return (React__default.createElement(ComboboxOption, { key: option.id, id: option.id, label: option.label, prefix: option.prefix, customRender: option.customRender, onClick: option.onClick }));
|
|
20
22
|
}),
|
|
21
23
|
React__default.createElement("div", { className: classnames([styles.loadingContainer, styles.hasOptions]) },
|
|
22
|
-
React__default.createElement(
|
|
24
|
+
React__default.createElement(AnimatePresence, { initial: false }, Boolean(props.loading && optionsExist) && (React__default.createElement(motion.div, { initial: { opacity: 0, y: tokens["space-base"] }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: tokens["space-base"] }, transition: { duration: tokens["timing-base"] / 1000 } },
|
|
25
|
+
React__default.createElement(Spinner, { size: "small" }))))),
|
|
23
26
|
props.onLoadMore && (React__default.createElement(ComboboxLoadMore, { onLoadMore: props.onLoadMore })))),
|
|
24
27
|
props.loading && !optionsExist && (React__default.createElement(React__default.Fragment, null, Array.from({ length: 5 }).map((_, index) => (React__default.createElement("div", { className: styles.loadingContainer, key: index },
|
|
25
28
|
React__default.createElement(Glimmer, { shape: "rectangle", size: "small" })))))),
|
|
@@ -18,14 +18,22 @@ require('../../../../../ComboboxContentSearch-cjs.js');
|
|
|
18
18
|
require('../../../../../Icon-cjs.js');
|
|
19
19
|
require('@jobber/design');
|
|
20
20
|
require('../../../../../ComboboxContentList-cjs.js');
|
|
21
|
+
require('framer-motion');
|
|
21
22
|
require('../../../../../Text-cjs.js');
|
|
22
23
|
require('../../../../../Typography-cjs.js');
|
|
23
24
|
require('../../../../../Glimmer-cjs.js');
|
|
24
25
|
require('../../../../../tslib.es6-cjs.js');
|
|
25
26
|
require('../../../../../Content-cjs.js');
|
|
26
27
|
require('../../../../../Spinner-cjs.js');
|
|
27
|
-
require('../../../../../
|
|
28
|
-
require('
|
|
28
|
+
require('../../../../../AtlantisThemeContext-cjs.js');
|
|
29
|
+
require('../../../../../identity-cjs.js');
|
|
30
|
+
require('../../../../../isTypedArray-cjs.js');
|
|
31
|
+
require('../../../../../isObjectLike-cjs.js');
|
|
32
|
+
require('../../../../../_baseAssignValue-cjs.js');
|
|
33
|
+
require('../../../../../_baseFor-cjs.js');
|
|
34
|
+
require('../../../../../keysIn-cjs.js');
|
|
35
|
+
require('../../../../../_isIterateeCall-cjs.js');
|
|
36
|
+
require('../../../../../_setToString-cjs.js');
|
|
29
37
|
require('../../../../../ComboboxOption-cjs.js');
|
|
30
38
|
require('../../../../../Flex-cjs.js');
|
|
31
39
|
require('../../../../../ComboboxProvider-cjs.js');
|
|
@@ -16,14 +16,22 @@ import '../../../../../ComboboxContentSearch-es.js';
|
|
|
16
16
|
import '../../../../../Icon-es.js';
|
|
17
17
|
import '@jobber/design';
|
|
18
18
|
import '../../../../../ComboboxContentList-es.js';
|
|
19
|
+
import 'framer-motion';
|
|
19
20
|
import '../../../../../Text-es.js';
|
|
20
21
|
import '../../../../../Typography-es.js';
|
|
21
22
|
import '../../../../../Glimmer-es.js';
|
|
22
23
|
import '../../../../../tslib.es6-es.js';
|
|
23
24
|
import '../../../../../Content-es.js';
|
|
24
25
|
import '../../../../../Spinner-es.js';
|
|
25
|
-
import '../../../../../
|
|
26
|
-
import '
|
|
26
|
+
import '../../../../../AtlantisThemeContext-es.js';
|
|
27
|
+
import '../../../../../identity-es.js';
|
|
28
|
+
import '../../../../../isTypedArray-es.js';
|
|
29
|
+
import '../../../../../isObjectLike-es.js';
|
|
30
|
+
import '../../../../../_baseAssignValue-es.js';
|
|
31
|
+
import '../../../../../_baseFor-es.js';
|
|
32
|
+
import '../../../../../keysIn-es.js';
|
|
33
|
+
import '../../../../../_isIterateeCall-es.js';
|
|
34
|
+
import '../../../../../_setToString-es.js';
|
|
27
35
|
import '../../../../../ComboboxOption-es.js';
|
|
28
36
|
import '../../../../../Flex-es.js';
|
|
29
37
|
import '../../../../../ComboboxProvider-es.js';
|
|
@@ -19,14 +19,22 @@ require('../../../ComboboxContentSearch-cjs.js');
|
|
|
19
19
|
require('../../../Icon-cjs.js');
|
|
20
20
|
require('@jobber/design');
|
|
21
21
|
require('../../../ComboboxContentList-cjs.js');
|
|
22
|
+
require('framer-motion');
|
|
22
23
|
require('../../../Text-cjs.js');
|
|
23
24
|
require('../../../Typography-cjs.js');
|
|
24
25
|
require('../../../Glimmer-cjs.js');
|
|
25
26
|
require('../../../tslib.es6-cjs.js');
|
|
26
27
|
require('../../../Content-cjs.js');
|
|
27
28
|
require('../../../Spinner-cjs.js');
|
|
28
|
-
require('../../../
|
|
29
|
-
require('
|
|
29
|
+
require('../../../AtlantisThemeContext-cjs.js');
|
|
30
|
+
require('../../../identity-cjs.js');
|
|
31
|
+
require('../../../isTypedArray-cjs.js');
|
|
32
|
+
require('../../../isObjectLike-cjs.js');
|
|
33
|
+
require('../../../_baseAssignValue-cjs.js');
|
|
34
|
+
require('../../../_baseFor-cjs.js');
|
|
35
|
+
require('../../../keysIn-cjs.js');
|
|
36
|
+
require('../../../_isIterateeCall-cjs.js');
|
|
37
|
+
require('../../../_setToString-cjs.js');
|
|
30
38
|
require('../../../ComboboxOption-cjs.js');
|
|
31
39
|
require('../../../Flex-cjs.js');
|
|
32
40
|
require('../../../ComboboxProvider-cjs.js');
|
|
@@ -47,8 +55,6 @@ require('../../../ComboboxActivator-cjs.js');
|
|
|
47
55
|
require('../../../DataListOverflowFade-cjs.js');
|
|
48
56
|
require('../../../DataList.utils-cjs.js');
|
|
49
57
|
require('../../../_getTag-cjs.js');
|
|
50
|
-
require('../../../isTypedArray-cjs.js');
|
|
51
|
-
require('../../../isObjectLike-cjs.js');
|
|
52
58
|
require('../../../DataList.const-cjs.js');
|
|
53
59
|
require('../../../DataListTags-cjs.js');
|
|
54
60
|
require('../../../InlineLabel-cjs.js');
|
|
@@ -17,14 +17,22 @@ import '../../../ComboboxContentSearch-es.js';
|
|
|
17
17
|
import '../../../Icon-es.js';
|
|
18
18
|
import '@jobber/design';
|
|
19
19
|
import '../../../ComboboxContentList-es.js';
|
|
20
|
+
import 'framer-motion';
|
|
20
21
|
import '../../../Text-es.js';
|
|
21
22
|
import '../../../Typography-es.js';
|
|
22
23
|
import '../../../Glimmer-es.js';
|
|
23
24
|
import '../../../tslib.es6-es.js';
|
|
24
25
|
import '../../../Content-es.js';
|
|
25
26
|
import '../../../Spinner-es.js';
|
|
26
|
-
import '../../../
|
|
27
|
-
import '
|
|
27
|
+
import '../../../AtlantisThemeContext-es.js';
|
|
28
|
+
import '../../../identity-es.js';
|
|
29
|
+
import '../../../isTypedArray-es.js';
|
|
30
|
+
import '../../../isObjectLike-es.js';
|
|
31
|
+
import '../../../_baseAssignValue-es.js';
|
|
32
|
+
import '../../../_baseFor-es.js';
|
|
33
|
+
import '../../../keysIn-es.js';
|
|
34
|
+
import '../../../_isIterateeCall-es.js';
|
|
35
|
+
import '../../../_setToString-es.js';
|
|
28
36
|
import '../../../ComboboxOption-es.js';
|
|
29
37
|
import '../../../Flex-es.js';
|
|
30
38
|
import '../../../ComboboxProvider-es.js';
|
|
@@ -45,8 +53,6 @@ import '../../../ComboboxActivator-es.js';
|
|
|
45
53
|
import '../../../DataListOverflowFade-es.js';
|
|
46
54
|
import '../../../DataList.utils-es.js';
|
|
47
55
|
import '../../../_getTag-es.js';
|
|
48
|
-
import '../../../isTypedArray-es.js';
|
|
49
|
-
import '../../../isObjectLike-es.js';
|
|
50
56
|
import '../../../DataList.const-es.js';
|
|
51
57
|
import '../../../DataListTags-es.js';
|
|
52
58
|
import '../../../InlineLabel-es.js';
|
package/dist/DataList/index.cjs
CHANGED
|
@@ -62,7 +62,13 @@ require('../ComboboxContent-cjs.js');
|
|
|
62
62
|
require('../ComboboxContentSearch-cjs.js');
|
|
63
63
|
require('../ComboboxContentList-cjs.js');
|
|
64
64
|
require('../Spinner-cjs.js');
|
|
65
|
-
require('../
|
|
65
|
+
require('../AtlantisThemeContext-cjs.js');
|
|
66
|
+
require('../identity-cjs.js');
|
|
67
|
+
require('../_baseAssignValue-cjs.js');
|
|
68
|
+
require('../_baseFor-cjs.js');
|
|
69
|
+
require('../keysIn-cjs.js');
|
|
70
|
+
require('../_isIterateeCall-cjs.js');
|
|
71
|
+
require('../_setToString-cjs.js');
|
|
66
72
|
require('../ComboboxOption-cjs.js');
|
|
67
73
|
require('../Flex-cjs.js');
|
|
68
74
|
require('../ComboboxProvider-cjs.js');
|
package/dist/DataList/index.mjs
CHANGED
|
@@ -60,7 +60,13 @@ import '../ComboboxContent-es.js';
|
|
|
60
60
|
import '../ComboboxContentSearch-es.js';
|
|
61
61
|
import '../ComboboxContentList-es.js';
|
|
62
62
|
import '../Spinner-es.js';
|
|
63
|
-
import '../
|
|
63
|
+
import '../AtlantisThemeContext-es.js';
|
|
64
|
+
import '../identity-es.js';
|
|
65
|
+
import '../_baseAssignValue-es.js';
|
|
66
|
+
import '../_baseFor-es.js';
|
|
67
|
+
import '../keysIn-es.js';
|
|
68
|
+
import '../_isIterateeCall-es.js';
|
|
69
|
+
import '../_setToString-es.js';
|
|
64
70
|
import '../ComboboxOption-es.js';
|
|
65
71
|
import '../Flex-es.js';
|
|
66
72
|
import '../ComboboxProvider-es.js';
|
package/dist/docs/index.md
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
[ActivityIndicator](./ActivityIndicator/ActivityIndicator.md)
|
|
2
|
-
[AnimatedPresence](./AnimatedPresence/AnimatedPresence.md)
|
|
3
2
|
[AnimatedSwitcher](./AnimatedSwitcher/AnimatedSwitcher.md)
|
|
4
3
|
[Animation](./Animation/Animation.md)
|
|
5
4
|
[AtlantisThemeContext](./AtlantisThemeContext/AtlantisThemeContext.md)
|
package/dist/index.cjs
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var ActivityIndicator = require('./ActivityIndicator-cjs.js');
|
|
4
|
-
var AnimatedPresence = require('./AnimatedPresence-cjs.js');
|
|
5
4
|
var AnimatedSwitcher = require('./AnimatedSwitcher-cjs.js');
|
|
6
5
|
var AtlantisContext = require('./AtlantisContext-cjs.js');
|
|
7
6
|
var AtlantisThemeContext = require('./AtlantisThemeContext-cjs.js');
|
|
@@ -203,7 +202,6 @@ function isNormalClick(evt) {
|
|
|
203
202
|
}
|
|
204
203
|
|
|
205
204
|
exports.ActivityIndicator = ActivityIndicator.ActivityIndicator;
|
|
206
|
-
exports.AnimatedPresence = AnimatedPresence.AnimatedPresence;
|
|
207
205
|
exports.AnimatedSwitcher = AnimatedSwitcher.AnimatedSwitcher;
|
|
208
206
|
exports.AtlantisContext = AtlantisContext.AtlantisContext;
|
|
209
207
|
exports.atlantisContextDefaultValues = AtlantisContext.atlantisContextDefaultValues;
|
package/dist/index.d.mts
CHANGED
package/dist/index.d.ts
CHANGED
package/dist/index.mjs
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
export { A as ActivityIndicator } from './ActivityIndicator-es.js';
|
|
2
|
-
export { A as AnimatedPresence } from './AnimatedPresence-es.js';
|
|
3
2
|
export { A as AnimatedSwitcher } from './AnimatedSwitcher-es.js';
|
|
4
3
|
export { A as AtlantisContext, a as atlantisContextDefaultValues, u as useAtlantisContext } from './AtlantisContext-es.js';
|
|
5
4
|
export { A as AtlantisThemeContextProvider, T as THEME_CHANGE_EVENT, a as atlantisThemeContextDefaultValues, u as useAtlantisTheme } from './AtlantisThemeContext-es.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jobber/components",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.13.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.cjs",
|
|
@@ -30,11 +30,6 @@
|
|
|
30
30
|
"import": "./dist/ActivityIndicator/index.mjs",
|
|
31
31
|
"require": "./dist/ActivityIndicator/index.cjs"
|
|
32
32
|
},
|
|
33
|
-
"./AnimatedPresence": {
|
|
34
|
-
"types": "./dist/AnimatedPresence/index.d.ts",
|
|
35
|
-
"import": "./dist/AnimatedPresence/index.mjs",
|
|
36
|
-
"require": "./dist/AnimatedPresence/index.cjs"
|
|
37
|
-
},
|
|
38
33
|
"./AnimatedSwitcher": {
|
|
39
34
|
"types": "./dist/AnimatedSwitcher/index.d.ts",
|
|
40
35
|
"import": "./dist/AnimatedSwitcher/index.mjs",
|
|
@@ -556,5 +551,5 @@
|
|
|
556
551
|
"> 1%",
|
|
557
552
|
"IE 10"
|
|
558
553
|
],
|
|
559
|
-
"gitHead": "
|
|
554
|
+
"gitHead": "bbe63d684891b974697436ac348514b2afc97394"
|
|
560
555
|
}
|
package/AnimatedPresence.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./dist/AnimatedPresence";
|
package/AnimatedPresence.js
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true,
|
|
5
|
-
});
|
|
6
|
-
|
|
7
|
-
var AnimatedPresence = require("./dist/AnimatedPresence");
|
|
8
|
-
|
|
9
|
-
Object.keys(AnimatedPresence).forEach(function(key) {
|
|
10
|
-
if (key === "default" || key === "__esModule") return;
|
|
11
|
-
Object.defineProperty(exports, key, {
|
|
12
|
-
enumerable: true,
|
|
13
|
-
get: function get() {
|
|
14
|
-
return AnimatedPresence[key];
|
|
15
|
-
},
|
|
16
|
-
});
|
|
17
|
-
});
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import type { PropsWithChildren } from "react";
|
|
2
|
-
import React from "react";
|
|
3
|
-
declare const transitions: {
|
|
4
|
-
fromBottom: import("framer-motion").Variants;
|
|
5
|
-
fromTop: import("framer-motion").Variants;
|
|
6
|
-
fromLeft: import("framer-motion").Variants;
|
|
7
|
-
fromRight: import("framer-motion").Variants;
|
|
8
|
-
popIn: import("framer-motion").Variants;
|
|
9
|
-
fromLeftToRight: import("framer-motion").Variants;
|
|
10
|
-
fromRightToLeft: import("framer-motion").Variants;
|
|
11
|
-
fade: import("framer-motion").Variants;
|
|
12
|
-
};
|
|
13
|
-
export type AnimatedPresenceTransitions = keyof typeof transitions;
|
|
14
|
-
interface AnimatedPresenceProps extends Required<PropsWithChildren> {
|
|
15
|
-
/**
|
|
16
|
-
* The type of transition you can use.
|
|
17
|
-
*/
|
|
18
|
-
readonly transition?: AnimatedPresenceTransitions;
|
|
19
|
-
/**
|
|
20
|
-
* Whether or not to animate the children on mount. By default it's set to false.
|
|
21
|
-
*/
|
|
22
|
-
readonly initial?: boolean;
|
|
23
|
-
}
|
|
24
|
-
export declare function AnimatedPresence(props: AnimatedPresenceProps): React.JSX.Element;
|
|
25
|
-
export {};
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { Variants } from "framer-motion";
|
|
2
|
-
export declare const TIMING_QUICK: number;
|
|
3
|
-
export declare const TIMING_BASE: number;
|
|
4
|
-
export declare const fade: Variants;
|
|
5
|
-
export declare const popIn: Variants;
|
|
6
|
-
export declare const fromTop: Variants;
|
|
7
|
-
export declare const fromBottom: Variants;
|
|
8
|
-
export declare const fromLeft: Variants;
|
|
9
|
-
export declare const fromRight: Variants;
|
|
10
|
-
export declare const fromLeftToRight: Variants;
|
|
11
|
-
export declare const fromRightToLeft: Variants;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function usePreviousValue<T>(value: T): readonly [T, import("react").Dispatch<import("react").SetStateAction<T>>];
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./AnimatedPresence";
|
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var React = require('react');
|
|
4
|
-
var framerMotion = require('framer-motion');
|
|
5
|
-
var design = require('@jobber/design');
|
|
6
|
-
|
|
7
|
-
const TIMING_QUICK = toSeconds(design.tokens["timing-quick"]);
|
|
8
|
-
const TIMING_BASE = toSeconds(design.tokens["timing-base"]);
|
|
9
|
-
const baseTransition = {
|
|
10
|
-
visible: { opacity: 1 },
|
|
11
|
-
hidden: { opacity: 0 },
|
|
12
|
-
};
|
|
13
|
-
const fade = {
|
|
14
|
-
visible: { opacity: 1 },
|
|
15
|
-
hidden: { opacity: 0 },
|
|
16
|
-
};
|
|
17
|
-
const popIn = {
|
|
18
|
-
visible: Object.assign({ scale: 1 }, baseTransition.visible),
|
|
19
|
-
hidden: Object.assign({ scale: 0.95 }, baseTransition.hidden),
|
|
20
|
-
};
|
|
21
|
-
const fromTop = {
|
|
22
|
-
visible: Object.assign({ y: 0 }, baseTransition.visible),
|
|
23
|
-
hidden: Object.assign({ y: -design.tokens["space-base"] }, baseTransition.hidden),
|
|
24
|
-
};
|
|
25
|
-
const fromBottom = {
|
|
26
|
-
visible: Object.assign({ y: 0 }, baseTransition.visible),
|
|
27
|
-
hidden: Object.assign({ y: design.tokens["space-base"] }, baseTransition.hidden),
|
|
28
|
-
};
|
|
29
|
-
const fromLeft = {
|
|
30
|
-
visible: Object.assign({ x: 0 }, baseTransition.visible),
|
|
31
|
-
hidden: Object.assign({ x: -design.tokens["space-base"] }, baseTransition.hidden),
|
|
32
|
-
};
|
|
33
|
-
const fromRight = {
|
|
34
|
-
visible: Object.assign({ x: 0 }, baseTransition.visible),
|
|
35
|
-
hidden: Object.assign({ x: design.tokens["space-base"] }, baseTransition.hidden),
|
|
36
|
-
};
|
|
37
|
-
const fromLeftToRight = {
|
|
38
|
-
initial: Object.assign({ x: -design.tokens["space-base"] }, baseTransition.hidden),
|
|
39
|
-
visible: Object.assign({ x: 0 }, baseTransition.visible),
|
|
40
|
-
hidden: Object.assign({ x: design.tokens["space-base"] }, baseTransition.hidden),
|
|
41
|
-
};
|
|
42
|
-
const fromRightToLeft = {
|
|
43
|
-
initial: Object.assign({ x: design.tokens["space-base"] }, baseTransition.hidden),
|
|
44
|
-
visible: Object.assign({ x: 0 }, baseTransition.visible),
|
|
45
|
-
hidden: Object.assign({ x: -design.tokens["space-base"] }, baseTransition.hidden),
|
|
46
|
-
};
|
|
47
|
-
function toSeconds(ms) {
|
|
48
|
-
return ms / 1000;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
function usePreviousValue(value) {
|
|
52
|
-
const [previousValue, setPreviousValue] = React.useState(value);
|
|
53
|
-
React.useEffect(() => {
|
|
54
|
-
setPreviousValue(value);
|
|
55
|
-
}, [value]);
|
|
56
|
-
return [previousValue, setPreviousValue];
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
const transitions = {
|
|
60
|
-
fromBottom,
|
|
61
|
-
fromTop,
|
|
62
|
-
fromLeft,
|
|
63
|
-
fromRight,
|
|
64
|
-
popIn,
|
|
65
|
-
fromLeftToRight,
|
|
66
|
-
fromRightToLeft,
|
|
67
|
-
fade,
|
|
68
|
-
};
|
|
69
|
-
function AnimatedPresence(props) {
|
|
70
|
-
const shouldReduceMotion = framerMotion.useReducedMotion();
|
|
71
|
-
if (shouldReduceMotion) {
|
|
72
|
-
return React.createElement(React.Fragment, null, props.children);
|
|
73
|
-
}
|
|
74
|
-
return React.createElement(InternalAnimatedPresence, Object.assign({}, props));
|
|
75
|
-
}
|
|
76
|
-
function InternalAnimatedPresence({ transition = "fromTop", initial = false, children, }) {
|
|
77
|
-
const transitionVariation = transitions[transition];
|
|
78
|
-
const hasInitialTransition = "initial" in transitionVariation;
|
|
79
|
-
const childCount = React.Children.count(children);
|
|
80
|
-
// Set the initial value to 0 so it staggers the animation on mount when
|
|
81
|
-
// initial is true.
|
|
82
|
-
const [lastChildIndex, setLastChildIndex] = usePreviousValue(0);
|
|
83
|
-
// Whenever the children count changes, update the last index.
|
|
84
|
-
React.useEffect(() => {
|
|
85
|
-
setLastChildIndex(childCount - 1);
|
|
86
|
-
}, [childCount]);
|
|
87
|
-
return (React.createElement(framerMotion.AnimatePresence, { initial: initial, mode: "popLayout" }, React.Children.map(children, (child, i) => child && (React.createElement(framerMotion.motion.div, { layout: true, variants: transitionVariation, initial: hasInitialTransition ? "initial" : "hidden", animate: "visible", exit: "hidden", transition: {
|
|
88
|
-
duration: TIMING_BASE,
|
|
89
|
-
delay: generateDelayTime(i),
|
|
90
|
-
} }, child)))));
|
|
91
|
-
function generateDelayTime(index) {
|
|
92
|
-
// Don't add a delay if it's already rendered.
|
|
93
|
-
if (lastChildIndex > index)
|
|
94
|
-
return 0;
|
|
95
|
-
// Stagger the animation starting after the previous last child index.
|
|
96
|
-
return (index - lastChildIndex) * TIMING_QUICK;
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
exports.AnimatedPresence = AnimatedPresence;
|
|
@@ -1,98 +0,0 @@
|
|
|
1
|
-
import React__default, { useState, useEffect, Children } from 'react';
|
|
2
|
-
import { useReducedMotion, AnimatePresence, motion } from 'framer-motion';
|
|
3
|
-
import { tokens } from '@jobber/design';
|
|
4
|
-
|
|
5
|
-
const TIMING_QUICK = toSeconds(tokens["timing-quick"]);
|
|
6
|
-
const TIMING_BASE = toSeconds(tokens["timing-base"]);
|
|
7
|
-
const baseTransition = {
|
|
8
|
-
visible: { opacity: 1 },
|
|
9
|
-
hidden: { opacity: 0 },
|
|
10
|
-
};
|
|
11
|
-
const fade = {
|
|
12
|
-
visible: { opacity: 1 },
|
|
13
|
-
hidden: { opacity: 0 },
|
|
14
|
-
};
|
|
15
|
-
const popIn = {
|
|
16
|
-
visible: Object.assign({ scale: 1 }, baseTransition.visible),
|
|
17
|
-
hidden: Object.assign({ scale: 0.95 }, baseTransition.hidden),
|
|
18
|
-
};
|
|
19
|
-
const fromTop = {
|
|
20
|
-
visible: Object.assign({ y: 0 }, baseTransition.visible),
|
|
21
|
-
hidden: Object.assign({ y: -tokens["space-base"] }, baseTransition.hidden),
|
|
22
|
-
};
|
|
23
|
-
const fromBottom = {
|
|
24
|
-
visible: Object.assign({ y: 0 }, baseTransition.visible),
|
|
25
|
-
hidden: Object.assign({ y: tokens["space-base"] }, baseTransition.hidden),
|
|
26
|
-
};
|
|
27
|
-
const fromLeft = {
|
|
28
|
-
visible: Object.assign({ x: 0 }, baseTransition.visible),
|
|
29
|
-
hidden: Object.assign({ x: -tokens["space-base"] }, baseTransition.hidden),
|
|
30
|
-
};
|
|
31
|
-
const fromRight = {
|
|
32
|
-
visible: Object.assign({ x: 0 }, baseTransition.visible),
|
|
33
|
-
hidden: Object.assign({ x: tokens["space-base"] }, baseTransition.hidden),
|
|
34
|
-
};
|
|
35
|
-
const fromLeftToRight = {
|
|
36
|
-
initial: Object.assign({ x: -tokens["space-base"] }, baseTransition.hidden),
|
|
37
|
-
visible: Object.assign({ x: 0 }, baseTransition.visible),
|
|
38
|
-
hidden: Object.assign({ x: tokens["space-base"] }, baseTransition.hidden),
|
|
39
|
-
};
|
|
40
|
-
const fromRightToLeft = {
|
|
41
|
-
initial: Object.assign({ x: tokens["space-base"] }, baseTransition.hidden),
|
|
42
|
-
visible: Object.assign({ x: 0 }, baseTransition.visible),
|
|
43
|
-
hidden: Object.assign({ x: -tokens["space-base"] }, baseTransition.hidden),
|
|
44
|
-
};
|
|
45
|
-
function toSeconds(ms) {
|
|
46
|
-
return ms / 1000;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
function usePreviousValue(value) {
|
|
50
|
-
const [previousValue, setPreviousValue] = useState(value);
|
|
51
|
-
useEffect(() => {
|
|
52
|
-
setPreviousValue(value);
|
|
53
|
-
}, [value]);
|
|
54
|
-
return [previousValue, setPreviousValue];
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
const transitions = {
|
|
58
|
-
fromBottom,
|
|
59
|
-
fromTop,
|
|
60
|
-
fromLeft,
|
|
61
|
-
fromRight,
|
|
62
|
-
popIn,
|
|
63
|
-
fromLeftToRight,
|
|
64
|
-
fromRightToLeft,
|
|
65
|
-
fade,
|
|
66
|
-
};
|
|
67
|
-
function AnimatedPresence(props) {
|
|
68
|
-
const shouldReduceMotion = useReducedMotion();
|
|
69
|
-
if (shouldReduceMotion) {
|
|
70
|
-
return React__default.createElement(React__default.Fragment, null, props.children);
|
|
71
|
-
}
|
|
72
|
-
return React__default.createElement(InternalAnimatedPresence, Object.assign({}, props));
|
|
73
|
-
}
|
|
74
|
-
function InternalAnimatedPresence({ transition = "fromTop", initial = false, children, }) {
|
|
75
|
-
const transitionVariation = transitions[transition];
|
|
76
|
-
const hasInitialTransition = "initial" in transitionVariation;
|
|
77
|
-
const childCount = Children.count(children);
|
|
78
|
-
// Set the initial value to 0 so it staggers the animation on mount when
|
|
79
|
-
// initial is true.
|
|
80
|
-
const [lastChildIndex, setLastChildIndex] = usePreviousValue(0);
|
|
81
|
-
// Whenever the children count changes, update the last index.
|
|
82
|
-
useEffect(() => {
|
|
83
|
-
setLastChildIndex(childCount - 1);
|
|
84
|
-
}, [childCount]);
|
|
85
|
-
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: {
|
|
86
|
-
duration: TIMING_BASE,
|
|
87
|
-
delay: generateDelayTime(i),
|
|
88
|
-
} }, child)))));
|
|
89
|
-
function generateDelayTime(index) {
|
|
90
|
-
// Don't add a delay if it's already rendered.
|
|
91
|
-
if (lastChildIndex > index)
|
|
92
|
-
return 0;
|
|
93
|
-
// Stagger the animation starting after the previous last child index.
|
|
94
|
-
return (index - lastChildIndex) * TIMING_QUICK;
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
export { AnimatedPresence as A };
|
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
# AnimatedPresence
|
|
2
|
-
|
|
3
|
-
Just like in real life, nothing appears out of nowhere. Animate elements that
|
|
4
|
-
get added or removed from the React tree with AnimatedPresence. If more than 1
|
|
5
|
-
element gets added, there will be a delay between each new element.
|
|
6
|
-
|
|
7
|
-
## Accessibility
|
|
8
|
-
|
|
9
|
-
AnimatedPresence respects the
|
|
10
|
-
[`prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion)
|
|
11
|
-
setting. If the user has this enabled, the animations will be disabled and the
|
|
12
|
-
elements will show/hide instantly.
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
## Configuration
|
|
16
|
-
|
|
17
|
-
### Conditional rendering
|
|
18
|
-
|
|
19
|
-
Hide and show elements with a transition to add emphasis on the change. This is
|
|
20
|
-
useful for UX which has a different part of the UI hidden until the user takes
|
|
21
|
-
an action to show them.
|
|
22
|
-
|
|
23
|
-
```tsx
|
|
24
|
-
<AnimatedPresence>{show && <div>Item</div>}</AnimatedPresence>
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
See the
|
|
28
|
-
[Basic](/storybook/web/?path=/story/components-utilities-animatedpresence--basic)
|
|
29
|
-
example for a live demo.
|
|
30
|
-
|
|
31
|
-
> **WARNING:** When using AnimatedPresence with conditional rendering, elements will be added
|
|
32
|
-
> 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.
|
|
33
|
-
>
|
|
34
|
-
> This can create undesirable visual jumps in some scenarios, such as when the
|
|
35
|
-
> element's height is what creates enough vertical space to require scrolling. The
|
|
36
|
-
> layout will have to be stabilized with something such as a min-height to avoid
|
|
37
|
-
> this.
|
|
38
|
-
|
|
39
|
-
### List rendering
|
|
40
|
-
|
|
41
|
-
Animate items in a list as they are added or removed.
|
|
42
|
-
|
|
43
|
-
```tsx
|
|
44
|
-
<AnimatedPresence>
|
|
45
|
-
{items.map(item => (
|
|
46
|
-
<div key={item.id}>{item.name}</div>
|
|
47
|
-
))}
|
|
48
|
-
</AnimatedPresence>
|
|
49
|
-
```
|
|
50
|
-
|
|
51
|
-
See the
|
|
52
|
-
[List](/storybook/web/?path=/story/components-utilities-animatedpresence--list)
|
|
53
|
-
example for a live demo.
|
|
54
|
-
|
|
55
|
-
### Animate on mount
|
|
56
|
-
|
|
57
|
-
Set the `initial` prop to `true` to animate the element whenever it initially
|
|
58
|
-
renders on the screen. See this in action on the
|
|
59
|
-
[List](/storybook/web/?path=/story/components-utilities-animatedpresence--list)
|
|
60
|
-
example.
|
|
61
|
-
|
|
62
|
-
```tsx
|
|
63
|
-
<AnimatedPresence initial={true}>...</AnimatedPresence>
|
|
64
|
-
```
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
## Props
|
|
68
|
-
|
|
69
|
-
### Web
|
|
70
|
-
|
|
71
|
-
| Prop | Type | Required | Default | Description |
|
|
72
|
-
|------|------|----------|---------|-------------|
|
|
73
|
-
| `initial` | `boolean` | No | — | Whether or not to animate the children on mount. By default it's set to false. |
|
|
74
|
-
| `transition` | `"fade" | "fromBottom" | "fromLeft" | "fromLeftToRight" | "fromRight" | "fromRightToLeft" | "fromTop" | "popIn"` | No | — | The type of transition you can use. |
|