@commercetools-uikit/collapsible-motion 19.11.0 → 19.12.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.
|
@@ -12,7 +12,6 @@ var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/ob
|
|
|
12
12
|
var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
|
|
13
13
|
var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
|
|
14
14
|
var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
|
|
15
|
-
var _taggedTemplateLiteral = require('@babel/runtime-corejs3/helpers/taggedTemplateLiteral');
|
|
16
15
|
var _pt = require('prop-types');
|
|
17
16
|
var react$1 = require('react');
|
|
18
17
|
var utils = require('@commercetools-uikit/utils');
|
|
@@ -34,21 +33,27 @@ var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defin
|
|
|
34
33
|
var _pt__default = /*#__PURE__*/_interopDefault(_pt);
|
|
35
34
|
var isNil__default = /*#__PURE__*/_interopDefault(isNil);
|
|
36
35
|
|
|
37
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
38
36
|
function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
39
37
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
|
|
40
38
|
const defaultProps = {
|
|
41
39
|
minHeight: 0
|
|
42
40
|
};
|
|
43
|
-
const getMinHeight = minHeight => minHeight !== 0 ?
|
|
41
|
+
const getMinHeight = minHeight => minHeight !== 0 ? `${minHeight}px` : minHeight;
|
|
44
42
|
const getVisibility = height => height === 0 ? 'hidden' : 'visible';
|
|
45
43
|
const createOpeningAnimation = function (height) {
|
|
46
44
|
let minHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
47
|
-
return react.keyframes
|
|
45
|
+
return react.keyframes`
|
|
46
|
+
0% { height: ${getMinHeight(minHeight)}; overflow: hidden; visibility: ${getVisibility(minHeight)}; }
|
|
47
|
+
99% { height: ${height}px; overflow: hidden; }
|
|
48
|
+
100% { height: auto; overflow: visible; }
|
|
49
|
+
`;
|
|
48
50
|
};
|
|
49
51
|
const createClosingAnimation = function (height) {
|
|
50
52
|
let minHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
51
|
-
return react.keyframes
|
|
53
|
+
return react.keyframes`
|
|
54
|
+
from { height: ${height}px; }
|
|
55
|
+
to { height: ${getMinHeight(minHeight)}; overflow: hidden; visibility: ${getVisibility(minHeight)}; }
|
|
56
|
+
`;
|
|
52
57
|
};
|
|
53
58
|
const useToggleAnimation = function (isOpen, toggle) {
|
|
54
59
|
let minHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
|
|
@@ -95,9 +100,12 @@ const ControlledCollapsibleMotion = props => {
|
|
|
95
100
|
if (animation) {
|
|
96
101
|
// By calling `css`, emotion injects the required CSS into the document head.
|
|
97
102
|
// eslint-disable-next-line no-unused-expressions
|
|
98
|
-
css
|
|
103
|
+
css`
|
|
104
|
+
animation: ${animation} 200ms
|
|
105
|
+
forwards;
|
|
106
|
+
`;
|
|
99
107
|
animationStyle = {
|
|
100
|
-
animation:
|
|
108
|
+
animation: `${animation.name} 200ms forwards`
|
|
101
109
|
};
|
|
102
110
|
}
|
|
103
111
|
return props.children({
|
|
@@ -135,9 +143,12 @@ const UncontrolledCollapsibleMotion = props => {
|
|
|
135
143
|
if (animation) {
|
|
136
144
|
// By calling `css`, emotion injects the required CSS into the document head.
|
|
137
145
|
// eslint-disable-next-line no-unused-expressions
|
|
138
|
-
css
|
|
146
|
+
css`
|
|
147
|
+
animation: ${animation} 200ms
|
|
148
|
+
forwards;
|
|
149
|
+
`;
|
|
139
150
|
animationStyle = {
|
|
140
|
-
animation:
|
|
151
|
+
animation: `${animation.name} 200ms forwards`
|
|
141
152
|
};
|
|
142
153
|
}
|
|
143
154
|
return props.children({
|
|
@@ -177,7 +188,7 @@ CollapsibleMotion.defaultProps = defaultProps;
|
|
|
177
188
|
var CollapsibleMotion$1 = CollapsibleMotion;
|
|
178
189
|
|
|
179
190
|
// NOTE: This string will be replaced on build time with the package version.
|
|
180
|
-
var version = "19.
|
|
191
|
+
var version = "19.12.1";
|
|
181
192
|
|
|
182
193
|
exports["default"] = CollapsibleMotion$1;
|
|
183
194
|
exports.version = version;
|
|
@@ -12,7 +12,6 @@ var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/ob
|
|
|
12
12
|
var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
|
|
13
13
|
var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
|
|
14
14
|
var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
|
|
15
|
-
var _taggedTemplateLiteral = require('@babel/runtime-corejs3/helpers/taggedTemplateLiteral');
|
|
16
15
|
require('prop-types');
|
|
17
16
|
var react$1 = require('react');
|
|
18
17
|
require('@commercetools-uikit/utils');
|
|
@@ -33,21 +32,27 @@ var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$def
|
|
|
33
32
|
var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
|
|
34
33
|
var isNil__default = /*#__PURE__*/_interopDefault(isNil);
|
|
35
34
|
|
|
36
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
37
35
|
function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
38
36
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
|
|
39
37
|
const defaultProps = {
|
|
40
38
|
minHeight: 0
|
|
41
39
|
};
|
|
42
|
-
const getMinHeight = minHeight => minHeight !== 0 ?
|
|
40
|
+
const getMinHeight = minHeight => minHeight !== 0 ? `${minHeight}px` : minHeight;
|
|
43
41
|
const getVisibility = height => height === 0 ? 'hidden' : 'visible';
|
|
44
42
|
const createOpeningAnimation = function (height) {
|
|
45
43
|
let minHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
46
|
-
return react.keyframes
|
|
44
|
+
return react.keyframes`
|
|
45
|
+
0% { height: ${getMinHeight(minHeight)}; overflow: hidden; visibility: ${getVisibility(minHeight)}; }
|
|
46
|
+
99% { height: ${height}px; overflow: hidden; }
|
|
47
|
+
100% { height: auto; overflow: visible; }
|
|
48
|
+
`;
|
|
47
49
|
};
|
|
48
50
|
const createClosingAnimation = function (height) {
|
|
49
51
|
let minHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
50
|
-
return react.keyframes
|
|
52
|
+
return react.keyframes`
|
|
53
|
+
from { height: ${height}px; }
|
|
54
|
+
to { height: ${getMinHeight(minHeight)}; overflow: hidden; visibility: ${getVisibility(minHeight)}; }
|
|
55
|
+
`;
|
|
51
56
|
};
|
|
52
57
|
const useToggleAnimation = function (isOpen, toggle) {
|
|
53
58
|
let minHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
|
|
@@ -92,9 +97,12 @@ const ControlledCollapsibleMotion = props => {
|
|
|
92
97
|
if (animation) {
|
|
93
98
|
// By calling `css`, emotion injects the required CSS into the document head.
|
|
94
99
|
// eslint-disable-next-line no-unused-expressions
|
|
95
|
-
css
|
|
100
|
+
css`
|
|
101
|
+
animation: ${animation} 200ms
|
|
102
|
+
forwards;
|
|
103
|
+
`;
|
|
96
104
|
animationStyle = {
|
|
97
|
-
animation:
|
|
105
|
+
animation: `${animation.name} 200ms forwards`
|
|
98
106
|
};
|
|
99
107
|
}
|
|
100
108
|
return props.children({
|
|
@@ -126,9 +134,12 @@ const UncontrolledCollapsibleMotion = props => {
|
|
|
126
134
|
if (animation) {
|
|
127
135
|
// By calling `css`, emotion injects the required CSS into the document head.
|
|
128
136
|
// eslint-disable-next-line no-unused-expressions
|
|
129
|
-
css
|
|
137
|
+
css`
|
|
138
|
+
animation: ${animation} 200ms
|
|
139
|
+
forwards;
|
|
140
|
+
`;
|
|
130
141
|
animationStyle = {
|
|
131
|
-
animation:
|
|
142
|
+
animation: `${animation.name} 200ms forwards`
|
|
132
143
|
};
|
|
133
144
|
}
|
|
134
145
|
return props.children({
|
|
@@ -156,7 +167,7 @@ CollapsibleMotion.defaultProps = defaultProps;
|
|
|
156
167
|
var CollapsibleMotion$1 = CollapsibleMotion;
|
|
157
168
|
|
|
158
169
|
// NOTE: This string will be replaced on build time with the package version.
|
|
159
|
-
var version = "19.
|
|
170
|
+
var version = "19.12.1";
|
|
160
171
|
|
|
161
172
|
exports["default"] = CollapsibleMotion$1;
|
|
162
173
|
exports.version = version;
|
|
@@ -8,7 +8,6 @@ import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/obje
|
|
|
8
8
|
import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
|
|
9
9
|
import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
|
|
10
10
|
import _slicedToArray from '@babel/runtime-corejs3/helpers/esm/slicedToArray';
|
|
11
|
-
import _taggedTemplateLiteral from '@babel/runtime-corejs3/helpers/esm/taggedTemplateLiteral';
|
|
12
11
|
import _pt from 'prop-types';
|
|
13
12
|
import { useRef, useEffect, useCallback } from 'react';
|
|
14
13
|
import { warning } from '@commercetools-uikit/utils';
|
|
@@ -17,21 +16,27 @@ import isNil from 'lodash/isNil';
|
|
|
17
16
|
import { useToggleState, usePrevious } from '@commercetools-uikit/hooks';
|
|
18
17
|
import { jsx } from '@emotion/react/jsx-runtime';
|
|
19
18
|
|
|
20
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
21
19
|
function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
22
20
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
23
21
|
const defaultProps = {
|
|
24
22
|
minHeight: 0
|
|
25
23
|
};
|
|
26
|
-
const getMinHeight = minHeight => minHeight !== 0 ?
|
|
24
|
+
const getMinHeight = minHeight => minHeight !== 0 ? `${minHeight}px` : minHeight;
|
|
27
25
|
const getVisibility = height => height === 0 ? 'hidden' : 'visible';
|
|
28
26
|
const createOpeningAnimation = function (height) {
|
|
29
27
|
let minHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
30
|
-
return keyframes
|
|
28
|
+
return keyframes`
|
|
29
|
+
0% { height: ${getMinHeight(minHeight)}; overflow: hidden; visibility: ${getVisibility(minHeight)}; }
|
|
30
|
+
99% { height: ${height}px; overflow: hidden; }
|
|
31
|
+
100% { height: auto; overflow: visible; }
|
|
32
|
+
`;
|
|
31
33
|
};
|
|
32
34
|
const createClosingAnimation = function (height) {
|
|
33
35
|
let minHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
34
|
-
return keyframes
|
|
36
|
+
return keyframes`
|
|
37
|
+
from { height: ${height}px; }
|
|
38
|
+
to { height: ${getMinHeight(minHeight)}; overflow: hidden; visibility: ${getVisibility(minHeight)}; }
|
|
39
|
+
`;
|
|
35
40
|
};
|
|
36
41
|
const useToggleAnimation = function (isOpen, toggle) {
|
|
37
42
|
let minHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
|
|
@@ -78,9 +83,12 @@ const ControlledCollapsibleMotion = props => {
|
|
|
78
83
|
if (animation) {
|
|
79
84
|
// By calling `css`, emotion injects the required CSS into the document head.
|
|
80
85
|
// eslint-disable-next-line no-unused-expressions
|
|
81
|
-
css
|
|
86
|
+
css`
|
|
87
|
+
animation: ${animation} 200ms
|
|
88
|
+
forwards;
|
|
89
|
+
`;
|
|
82
90
|
animationStyle = {
|
|
83
|
-
animation:
|
|
91
|
+
animation: `${animation.name} 200ms forwards`
|
|
84
92
|
};
|
|
85
93
|
}
|
|
86
94
|
return props.children({
|
|
@@ -118,9 +126,12 @@ const UncontrolledCollapsibleMotion = props => {
|
|
|
118
126
|
if (animation) {
|
|
119
127
|
// By calling `css`, emotion injects the required CSS into the document head.
|
|
120
128
|
// eslint-disable-next-line no-unused-expressions
|
|
121
|
-
css
|
|
129
|
+
css`
|
|
130
|
+
animation: ${animation} 200ms
|
|
131
|
+
forwards;
|
|
132
|
+
`;
|
|
122
133
|
animationStyle = {
|
|
123
|
-
animation:
|
|
134
|
+
animation: `${animation.name} 200ms forwards`
|
|
124
135
|
};
|
|
125
136
|
}
|
|
126
137
|
return props.children({
|
|
@@ -160,6 +171,6 @@ CollapsibleMotion.defaultProps = defaultProps;
|
|
|
160
171
|
var CollapsibleMotion$1 = CollapsibleMotion;
|
|
161
172
|
|
|
162
173
|
// NOTE: This string will be replaced on build time with the package version.
|
|
163
|
-
var version = "19.
|
|
174
|
+
var version = "19.12.1";
|
|
164
175
|
|
|
165
176
|
export { CollapsibleMotion$1 as default, version };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/collapsible-motion",
|
|
3
3
|
"description": "A component which allows building collapsible elements with an arbitrary height.",
|
|
4
|
-
"version": "19.
|
|
4
|
+
"version": "19.12.1",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -21,8 +21,8 @@
|
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@babel/runtime": "^7.20.13",
|
|
23
23
|
"@babel/runtime-corejs3": "^7.20.13",
|
|
24
|
-
"@commercetools-uikit/hooks": "19.
|
|
25
|
-
"@commercetools-uikit/utils": "19.
|
|
24
|
+
"@commercetools-uikit/hooks": "19.12.1",
|
|
25
|
+
"@commercetools-uikit/utils": "19.12.1",
|
|
26
26
|
"@emotion/react": "^11.10.5",
|
|
27
27
|
"@emotion/styled": "^11.10.5",
|
|
28
28
|
"lodash": "4.17.21",
|