@commercetools-uikit/collapsible-motion 12.2.2 → 12.2.9
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/README.md +21 -8
- package/dist/commercetools-uikit-collapsible-motion.cjs.d.ts +2 -0
- package/dist/commercetools-uikit-collapsible-motion.cjs.dev.js +84 -93
- package/dist/commercetools-uikit-collapsible-motion.cjs.prod.js +63 -58
- package/dist/commercetools-uikit-collapsible-motion.esm.js +79 -87
- package/dist/declarations/src/collapsible-motion.d.ts +30 -0
- package/dist/declarations/src/index.d.ts +2 -0
- package/dist/declarations/src/version.d.ts +2 -0
- package/package.json +5 -9
package/README.md
CHANGED
|
@@ -41,7 +41,6 @@ npm --save install react
|
|
|
41
41
|
## Usage
|
|
42
42
|
|
|
43
43
|
```jsx
|
|
44
|
-
import React from 'react';
|
|
45
44
|
import CollapsibleMotion from '@commercetools-uikit/collapsible-motion';
|
|
46
45
|
|
|
47
46
|
const Example = () => (
|
|
@@ -66,10 +65,24 @@ export default Example;
|
|
|
66
65
|
|
|
67
66
|
## Properties
|
|
68
67
|
|
|
69
|
-
| Props | Type
|
|
70
|
-
| ----------------- |
|
|
71
|
-
| `children` | `
|
|
72
|
-
| `isClosed` | `
|
|
73
|
-
| `onToggle` | `
|
|
74
|
-
| `minHeight` | `number`
|
|
75
|
-
| `isDefaultClosed` | `
|
|
68
|
+
| Props | Type | Required | Default | Description |
|
|
69
|
+
| ----------------- | ---------------------------------------------------- | :------: | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
70
|
+
| `children` | `Function`<br/>[See signature.](#signature-children) | ✅ | | A render function, called with the following named arguments: `isOpen` (boolean), `toggle` (function),
`containerStyles` (css-in-js object), `registerContentNode` (React reference to be used on the animated container).
<br/>
Siganture: `({ isOpen, containerStyles, toggle, registerContentNode }) => React.node` |
|
|
71
|
+
| `isClosed` | `boolean` | | | Determines the state of the toggle `isOpen`. Setting this prop will make the component **controlled** |
|
|
72
|
+
| `onToggle` | `Function`<br/>[See signature.](#signature-onToggle) | | | A callback function called when the `toggle` function is called. This prop is required when the component is **controlled**. |
|
|
73
|
+
| `minHeight` | `number` | | `0` | The minimal height of the container being animated. |
|
|
74
|
+
| `isDefaultClosed` | `boolean` | | | The initial value to the internal toggle state `isOpen`. |
|
|
75
|
+
|
|
76
|
+
## Signatures
|
|
77
|
+
|
|
78
|
+
### Signature `children`
|
|
79
|
+
|
|
80
|
+
```ts
|
|
81
|
+
(options: TRenderFunctionOptions) => ReactNode;
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
### Signature `onToggle`
|
|
85
|
+
|
|
86
|
+
```ts
|
|
87
|
+
() => void
|
|
88
|
+
```
|
|
@@ -13,12 +13,13 @@ var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/obje
|
|
|
13
13
|
var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
|
|
14
14
|
var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
|
|
15
15
|
var _taggedTemplateLiteral = require('@babel/runtime-corejs3/helpers/taggedTemplateLiteral');
|
|
16
|
-
var
|
|
17
|
-
var
|
|
16
|
+
var _pt = require('prop-types');
|
|
17
|
+
var react$1 = require('react');
|
|
18
18
|
var utils = require('@commercetools-uikit/utils');
|
|
19
19
|
var react = require('@emotion/react');
|
|
20
20
|
var isNil = require('lodash/isNil');
|
|
21
21
|
var hooks = require('@commercetools-uikit/hooks');
|
|
22
|
+
var jsxRuntime = require('@emotion/react/jsx-runtime');
|
|
22
23
|
|
|
23
24
|
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
24
25
|
|
|
@@ -30,47 +31,14 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
|
|
|
30
31
|
var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
|
|
31
32
|
var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
|
|
32
33
|
var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
|
|
33
|
-
var
|
|
34
|
-
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
34
|
+
var _pt__default = /*#__PURE__*/_interopDefault(_pt);
|
|
35
35
|
var isNil__default = /*#__PURE__*/_interopDefault(isNil);
|
|
36
36
|
|
|
37
37
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
38
38
|
|
|
39
|
-
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default[
|
|
40
|
-
|
|
41
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default[
|
|
42
|
-
var collapsibleMotionPropTypes = process.env.NODE_ENV !== "production" ? {
|
|
43
|
-
/**
|
|
44
|
-
* A render function, called with the following named arguments: `isOpen` (boolean), `toggle` (function),
|
|
45
|
-
* `containerStyles` (css-in-js object), `registerContentNode` (React reference to be used on the animated container).
|
|
46
|
-
* <br/>
|
|
47
|
-
* Siganture: `({ isOpen, containerStyles, toggle, registerContentNode }) => React.node`
|
|
48
|
-
*/
|
|
49
|
-
children: PropTypes__default['default'].func.isRequired,
|
|
50
|
-
|
|
51
|
-
/**
|
|
52
|
-
* Determines the state of the toggle `isOpen`. Setting this prop will make the component **controlled**
|
|
53
|
-
*/
|
|
54
|
-
// eslint-disable-next-line react/no-unused-prop-types
|
|
55
|
-
isClosed: PropTypes__default['default'].bool,
|
|
56
|
-
|
|
57
|
-
/**
|
|
58
|
-
* A callback function called when the `toggle` function is called. This prop is required when the component is **controlled**.
|
|
59
|
-
*/
|
|
60
|
-
// eslint-disable-next-line react/no-unused-prop-types
|
|
61
|
-
onToggle: PropTypes__default['default'].func,
|
|
62
|
-
|
|
63
|
-
/**
|
|
64
|
-
* The minimal height of the container being animated.
|
|
65
|
-
*/
|
|
66
|
-
minHeight: PropTypes__default['default'].number,
|
|
67
|
-
|
|
68
|
-
/**
|
|
69
|
-
*The initial value to the internal toggle state `isOpen`.
|
|
70
|
-
*/
|
|
71
|
-
// eslint-disable-next-line react/no-unused-prop-types
|
|
72
|
-
isDefaultClosed: PropTypes__default['default'].bool
|
|
73
|
-
} : {};
|
|
39
|
+
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
40
|
+
|
|
41
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default["default"](_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context2; _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
|
|
74
42
|
var defaultProps = {
|
|
75
43
|
minHeight: 0
|
|
76
44
|
};
|
|
@@ -88,24 +56,25 @@ var createOpeningAnimation = function createOpeningAnimation(height) {
|
|
|
88
56
|
return react.keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n 0% { height: ", "; overflow: hidden; visibility: ", "; }\n 99% { height: ", "px; overflow: hidden; }\n 100% { height: auto; overflow: visible; }\n "])), getMinHeight(minHeight), getVisibility(minHeight), height);
|
|
89
57
|
};
|
|
90
58
|
|
|
91
|
-
var createClosingAnimation = function createClosingAnimation(height
|
|
59
|
+
var createClosingAnimation = function createClosingAnimation(height) {
|
|
60
|
+
var minHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
92
61
|
return react.keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n from { height: ", "px; }\n to { height: ", "; overflow: hidden; visibility: ", "; }\n "])), height, getMinHeight(minHeight), getVisibility(minHeight));
|
|
93
62
|
};
|
|
94
63
|
|
|
95
|
-
var useToggleAnimation = function useToggleAnimation(isOpen, toggle
|
|
96
|
-
var
|
|
97
|
-
var
|
|
64
|
+
var useToggleAnimation = function useToggleAnimation(isOpen, toggle) {
|
|
65
|
+
var minHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
|
|
66
|
+
var nodeRef = react$1.useRef();
|
|
67
|
+
var animationRef = react$1.useRef(null);
|
|
98
68
|
var prevIsOpen = hooks.usePrevious(isOpen);
|
|
99
|
-
|
|
69
|
+
react$1.useEffect(function () {
|
|
100
70
|
process.env.NODE_ENV !== "production" ? utils.warning(nodeRef.current, 'You need to call `registerContentNode` in order to use this component') : void 0;
|
|
101
71
|
}, // to match the componentDidMount behaviour
|
|
102
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
103
72
|
[nodeRef]);
|
|
104
|
-
var handleToggle =
|
|
73
|
+
var handleToggle = react$1.useCallback(function () {
|
|
105
74
|
process.env.NODE_ENV !== "production" ? utils.warning(nodeRef.current, 'You need to call `registerContentNode` in order to use this component') : void 0; // set panel height to the height of the content,
|
|
106
75
|
// so we can animate between the height and 0
|
|
107
76
|
|
|
108
|
-
toggle();
|
|
77
|
+
toggle && toggle();
|
|
109
78
|
}, [nodeRef, toggle]);
|
|
110
79
|
var containerStyles = isOpen ? {
|
|
111
80
|
height: 'auto'
|
|
@@ -115,7 +84,7 @@ var useToggleAnimation = function useToggleAnimation(isOpen, toggle, minHeight)
|
|
|
115
84
|
visibility: getVisibility(minHeight)
|
|
116
85
|
}; // if state has changed
|
|
117
86
|
|
|
118
|
-
if (typeof prevIsOpen !== 'undefined' && prevIsOpen !== isOpen) {
|
|
87
|
+
if (typeof prevIsOpen !== 'undefined' && prevIsOpen !== isOpen && nodeRef.current) {
|
|
119
88
|
animationRef.current = isOpen ? createOpeningAnimation(nodeRef.current.clientHeight, minHeight) : createClosingAnimation(nodeRef.current.clientHeight, minHeight);
|
|
120
89
|
}
|
|
121
90
|
|
|
@@ -130,30 +99,38 @@ var ControlledCollapsibleMotion = function ControlledCollapsibleMotion(props) {
|
|
|
130
99
|
animationToggle = _useToggleAnimation2[2],
|
|
131
100
|
registerContentNode = _useToggleAnimation2[3];
|
|
132
101
|
|
|
133
|
-
return
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
102
|
+
return jsxRuntime.jsx(react.ClassNames, {
|
|
103
|
+
children: function children(_ref) {
|
|
104
|
+
var css = _ref.css;
|
|
105
|
+
var animationStyle = {};
|
|
106
|
+
|
|
107
|
+
if (animation) {
|
|
108
|
+
// By calling `css`, emotion injects the required CSS into the document head.
|
|
109
|
+
// eslint-disable-next-line no-unused-expressions
|
|
110
|
+
css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n animation: ", " 200ms\n forwards;\n "])), animation);
|
|
111
|
+
animationStyle = {
|
|
112
|
+
animation: "".concat(animation.name, " 200ms forwards")
|
|
113
|
+
};
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
return props.children({
|
|
117
|
+
isOpen: !props.isClosed,
|
|
118
|
+
containerStyles: _objectSpread(_objectSpread({}, containerStyles), animationStyle),
|
|
119
|
+
toggle: animationToggle,
|
|
120
|
+
registerContentNode: registerContentNode
|
|
121
|
+
});
|
|
144
122
|
}
|
|
145
|
-
|
|
146
|
-
return props.children({
|
|
147
|
-
isOpen: !props.isClosed,
|
|
148
|
-
containerStyles: _objectSpread(_objectSpread({}, containerStyles), animationStyle),
|
|
149
|
-
toggle: animationToggle,
|
|
150
|
-
registerContentNode: registerContentNode
|
|
151
|
-
});
|
|
152
123
|
});
|
|
153
124
|
};
|
|
154
125
|
|
|
126
|
+
ControlledCollapsibleMotion.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
127
|
+
children: _pt__default["default"].func.isRequired,
|
|
128
|
+
isClosed: _pt__default["default"].bool,
|
|
129
|
+
onToggle: _pt__default["default"].func,
|
|
130
|
+
minHeight: _pt__default["default"].number,
|
|
131
|
+
isDefaultClosed: _pt__default["default"].bool
|
|
132
|
+
} : {};
|
|
155
133
|
ControlledCollapsibleMotion.displayName = 'ControlledCollapsibleMotion';
|
|
156
|
-
ControlledCollapsibleMotion.propTypes = process.env.NODE_ENV !== "production" ? collapsibleMotionPropTypes : {};
|
|
157
134
|
|
|
158
135
|
var UncontrolledCollapsibleMotion = function UncontrolledCollapsibleMotion(props) {
|
|
159
136
|
var _useToggleState = hooks.useToggleState(!props.isDefaultClosed),
|
|
@@ -168,49 +145,63 @@ var UncontrolledCollapsibleMotion = function UncontrolledCollapsibleMotion(props
|
|
|
168
145
|
animationToggle = _useToggleAnimation4[2],
|
|
169
146
|
registerContentNode = _useToggleAnimation4[3];
|
|
170
147
|
|
|
171
|
-
return
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
148
|
+
return jsxRuntime.jsx(react.ClassNames, {
|
|
149
|
+
children: function children(_ref2) {
|
|
150
|
+
var css = _ref2.css;
|
|
151
|
+
var animationStyle = {};
|
|
152
|
+
|
|
153
|
+
if (animation) {
|
|
154
|
+
// By calling `css`, emotion injects the required CSS into the document head.
|
|
155
|
+
// eslint-disable-next-line no-unused-expressions
|
|
156
|
+
css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n animation: ", " 200ms\n forwards;\n "])), animation);
|
|
157
|
+
animationStyle = {
|
|
158
|
+
animation: "".concat(animation.name, " 200ms forwards")
|
|
159
|
+
};
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
return props.children({
|
|
163
|
+
isOpen: isOpen,
|
|
164
|
+
containerStyles: _objectSpread(_objectSpread({}, containerStyles), animationStyle),
|
|
165
|
+
toggle: animationToggle,
|
|
166
|
+
registerContentNode: registerContentNode
|
|
167
|
+
});
|
|
182
168
|
}
|
|
183
|
-
|
|
184
|
-
return props.children({
|
|
185
|
-
isOpen: isOpen,
|
|
186
|
-
containerStyles: _objectSpread(_objectSpread({}, containerStyles), animationStyle),
|
|
187
|
-
toggle: animationToggle,
|
|
188
|
-
registerContentNode: registerContentNode
|
|
189
|
-
});
|
|
190
169
|
});
|
|
191
170
|
};
|
|
192
171
|
|
|
172
|
+
UncontrolledCollapsibleMotion.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
173
|
+
children: _pt__default["default"].func.isRequired,
|
|
174
|
+
isClosed: _pt__default["default"].bool,
|
|
175
|
+
onToggle: _pt__default["default"].func,
|
|
176
|
+
minHeight: _pt__default["default"].number,
|
|
177
|
+
isDefaultClosed: _pt__default["default"].bool
|
|
178
|
+
} : {};
|
|
193
179
|
UncontrolledCollapsibleMotion.displayName = 'UncontrolledCollapsibleMotion';
|
|
194
180
|
UncontrolledCollapsibleMotion.defaultProps = defaultProps;
|
|
195
|
-
UncontrolledCollapsibleMotion.propTypes = process.env.NODE_ENV !== "production" ? collapsibleMotionPropTypes : {};
|
|
196
181
|
|
|
197
182
|
var CollapsibleMotion = function CollapsibleMotion(props) {
|
|
198
|
-
var isControlledComponent = !isNil__default[
|
|
183
|
+
var isControlledComponent = !isNil__default["default"](props.isClosed);
|
|
199
184
|
|
|
200
185
|
if (isControlledComponent) {
|
|
201
|
-
return
|
|
186
|
+
return jsxRuntime.jsx(ControlledCollapsibleMotion, _objectSpread({}, props));
|
|
202
187
|
}
|
|
203
188
|
|
|
204
|
-
return
|
|
189
|
+
return jsxRuntime.jsx(UncontrolledCollapsibleMotion, _objectSpread({}, props));
|
|
205
190
|
};
|
|
206
191
|
|
|
192
|
+
CollapsibleMotion.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
193
|
+
children: _pt__default["default"].func.isRequired,
|
|
194
|
+
isClosed: _pt__default["default"].bool,
|
|
195
|
+
onToggle: _pt__default["default"].func,
|
|
196
|
+
minHeight: _pt__default["default"].number,
|
|
197
|
+
isDefaultClosed: _pt__default["default"].bool
|
|
198
|
+
} : {};
|
|
207
199
|
CollapsibleMotion.displayName = 'CollapsibleMotion';
|
|
208
200
|
CollapsibleMotion.defaultProps = defaultProps;
|
|
209
|
-
CollapsibleMotion.propTypes = process.env.NODE_ENV !== "production" ? collapsibleMotionPropTypes : {};
|
|
210
201
|
var CollapsibleMotion$1 = CollapsibleMotion;
|
|
211
202
|
|
|
212
|
-
// NOTE: This string will be replaced
|
|
213
|
-
var version =
|
|
203
|
+
// NOTE: This string will be replaced on build time with the package version.
|
|
204
|
+
var version = "12.2.9";
|
|
214
205
|
|
|
215
|
-
exports[
|
|
206
|
+
exports["default"] = CollapsibleMotion$1;
|
|
216
207
|
exports.version = version;
|
|
@@ -14,11 +14,12 @@ var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
|
|
|
14
14
|
var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
|
|
15
15
|
var _taggedTemplateLiteral = require('@babel/runtime-corejs3/helpers/taggedTemplateLiteral');
|
|
16
16
|
require('prop-types');
|
|
17
|
-
var
|
|
17
|
+
var react$1 = require('react');
|
|
18
18
|
require('@commercetools-uikit/utils');
|
|
19
19
|
var react = require('@emotion/react');
|
|
20
20
|
var isNil = require('lodash/isNil');
|
|
21
21
|
var hooks = require('@commercetools-uikit/hooks');
|
|
22
|
+
var jsxRuntime = require('@emotion/react/jsx-runtime');
|
|
22
23
|
|
|
23
24
|
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
24
25
|
|
|
@@ -30,14 +31,13 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
|
|
|
30
31
|
var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
|
|
31
32
|
var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
|
|
32
33
|
var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
|
|
33
|
-
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
34
34
|
var isNil__default = /*#__PURE__*/_interopDefault(isNil);
|
|
35
35
|
|
|
36
36
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
37
37
|
|
|
38
|
-
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default[
|
|
38
|
+
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
39
39
|
|
|
40
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default[
|
|
40
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default["default"](_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context2; _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
|
|
41
41
|
var defaultProps = {
|
|
42
42
|
minHeight: 0
|
|
43
43
|
};
|
|
@@ -55,22 +55,23 @@ var createOpeningAnimation = function createOpeningAnimation(height) {
|
|
|
55
55
|
return react.keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n 0% { height: ", "; overflow: hidden; visibility: ", "; }\n 99% { height: ", "px; overflow: hidden; }\n 100% { height: auto; overflow: visible; }\n "])), getMinHeight(minHeight), getVisibility(minHeight), height);
|
|
56
56
|
};
|
|
57
57
|
|
|
58
|
-
var createClosingAnimation = function createClosingAnimation(height
|
|
58
|
+
var createClosingAnimation = function createClosingAnimation(height) {
|
|
59
|
+
var minHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
59
60
|
return react.keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n from { height: ", "px; }\n to { height: ", "; overflow: hidden; visibility: ", "; }\n "])), height, getMinHeight(minHeight), getVisibility(minHeight));
|
|
60
61
|
};
|
|
61
62
|
|
|
62
|
-
var useToggleAnimation = function useToggleAnimation(isOpen, toggle
|
|
63
|
-
var
|
|
64
|
-
var
|
|
63
|
+
var useToggleAnimation = function useToggleAnimation(isOpen, toggle) {
|
|
64
|
+
var minHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
|
|
65
|
+
var nodeRef = react$1.useRef();
|
|
66
|
+
var animationRef = react$1.useRef(null);
|
|
65
67
|
var prevIsOpen = hooks.usePrevious(isOpen);
|
|
66
|
-
|
|
68
|
+
react$1.useEffect(function () {
|
|
67
69
|
}, // to match the componentDidMount behaviour
|
|
68
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
69
70
|
[nodeRef]);
|
|
70
|
-
var handleToggle =
|
|
71
|
+
var handleToggle = react$1.useCallback(function () {
|
|
71
72
|
// so we can animate between the height and 0
|
|
72
73
|
|
|
73
|
-
toggle();
|
|
74
|
+
toggle && toggle();
|
|
74
75
|
}, [nodeRef, toggle]);
|
|
75
76
|
var containerStyles = isOpen ? {
|
|
76
77
|
height: 'auto'
|
|
@@ -80,7 +81,7 @@ var useToggleAnimation = function useToggleAnimation(isOpen, toggle, minHeight)
|
|
|
80
81
|
visibility: getVisibility(minHeight)
|
|
81
82
|
}; // if state has changed
|
|
82
83
|
|
|
83
|
-
if (typeof prevIsOpen !== 'undefined' && prevIsOpen !== isOpen) {
|
|
84
|
+
if (typeof prevIsOpen !== 'undefined' && prevIsOpen !== isOpen && nodeRef.current) {
|
|
84
85
|
animationRef.current = isOpen ? createOpeningAnimation(nodeRef.current.clientHeight, minHeight) : createClosingAnimation(nodeRef.current.clientHeight, minHeight);
|
|
85
86
|
}
|
|
86
87
|
|
|
@@ -95,30 +96,32 @@ var ControlledCollapsibleMotion = function ControlledCollapsibleMotion(props) {
|
|
|
95
96
|
animationToggle = _useToggleAnimation2[2],
|
|
96
97
|
registerContentNode = _useToggleAnimation2[3];
|
|
97
98
|
|
|
98
|
-
return
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
99
|
+
return jsxRuntime.jsx(react.ClassNames, {
|
|
100
|
+
children: function children(_ref) {
|
|
101
|
+
var css = _ref.css;
|
|
102
|
+
var animationStyle = {};
|
|
103
|
+
|
|
104
|
+
if (animation) {
|
|
105
|
+
// By calling `css`, emotion injects the required CSS into the document head.
|
|
106
|
+
// eslint-disable-next-line no-unused-expressions
|
|
107
|
+
css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n animation: ", " 200ms\n forwards;\n "])), animation);
|
|
108
|
+
animationStyle = {
|
|
109
|
+
animation: "".concat(animation.name, " 200ms forwards")
|
|
110
|
+
};
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
return props.children({
|
|
114
|
+
isOpen: !props.isClosed,
|
|
115
|
+
containerStyles: _objectSpread(_objectSpread({}, containerStyles), animationStyle),
|
|
116
|
+
toggle: animationToggle,
|
|
117
|
+
registerContentNode: registerContentNode
|
|
118
|
+
});
|
|
109
119
|
}
|
|
110
|
-
|
|
111
|
-
return props.children({
|
|
112
|
-
isOpen: !props.isClosed,
|
|
113
|
-
containerStyles: _objectSpread(_objectSpread({}, containerStyles), animationStyle),
|
|
114
|
-
toggle: animationToggle,
|
|
115
|
-
registerContentNode: registerContentNode
|
|
116
|
-
});
|
|
117
120
|
});
|
|
118
121
|
};
|
|
119
122
|
|
|
120
|
-
ControlledCollapsibleMotion.displayName = 'ControlledCollapsibleMotion';
|
|
121
123
|
ControlledCollapsibleMotion.propTypes = {};
|
|
124
|
+
ControlledCollapsibleMotion.displayName = 'ControlledCollapsibleMotion';
|
|
122
125
|
|
|
123
126
|
var UncontrolledCollapsibleMotion = function UncontrolledCollapsibleMotion(props) {
|
|
124
127
|
var _useToggleState = hooks.useToggleState(!props.isDefaultClosed),
|
|
@@ -133,49 +136,51 @@ var UncontrolledCollapsibleMotion = function UncontrolledCollapsibleMotion(props
|
|
|
133
136
|
animationToggle = _useToggleAnimation4[2],
|
|
134
137
|
registerContentNode = _useToggleAnimation4[3];
|
|
135
138
|
|
|
136
|
-
return
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
139
|
+
return jsxRuntime.jsx(react.ClassNames, {
|
|
140
|
+
children: function children(_ref2) {
|
|
141
|
+
var css = _ref2.css;
|
|
142
|
+
var animationStyle = {};
|
|
143
|
+
|
|
144
|
+
if (animation) {
|
|
145
|
+
// By calling `css`, emotion injects the required CSS into the document head.
|
|
146
|
+
// eslint-disable-next-line no-unused-expressions
|
|
147
|
+
css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n animation: ", " 200ms\n forwards;\n "])), animation);
|
|
148
|
+
animationStyle = {
|
|
149
|
+
animation: "".concat(animation.name, " 200ms forwards")
|
|
150
|
+
};
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
return props.children({
|
|
154
|
+
isOpen: isOpen,
|
|
155
|
+
containerStyles: _objectSpread(_objectSpread({}, containerStyles), animationStyle),
|
|
156
|
+
toggle: animationToggle,
|
|
157
|
+
registerContentNode: registerContentNode
|
|
158
|
+
});
|
|
147
159
|
}
|
|
148
|
-
|
|
149
|
-
return props.children({
|
|
150
|
-
isOpen: isOpen,
|
|
151
|
-
containerStyles: _objectSpread(_objectSpread({}, containerStyles), animationStyle),
|
|
152
|
-
toggle: animationToggle,
|
|
153
|
-
registerContentNode: registerContentNode
|
|
154
|
-
});
|
|
155
160
|
});
|
|
156
161
|
};
|
|
157
162
|
|
|
163
|
+
UncontrolledCollapsibleMotion.propTypes = {};
|
|
158
164
|
UncontrolledCollapsibleMotion.displayName = 'UncontrolledCollapsibleMotion';
|
|
159
165
|
UncontrolledCollapsibleMotion.defaultProps = defaultProps;
|
|
160
|
-
UncontrolledCollapsibleMotion.propTypes = {};
|
|
161
166
|
|
|
162
167
|
var CollapsibleMotion = function CollapsibleMotion(props) {
|
|
163
|
-
var isControlledComponent = !isNil__default[
|
|
168
|
+
var isControlledComponent = !isNil__default["default"](props.isClosed);
|
|
164
169
|
|
|
165
170
|
if (isControlledComponent) {
|
|
166
|
-
return
|
|
171
|
+
return jsxRuntime.jsx(ControlledCollapsibleMotion, _objectSpread({}, props));
|
|
167
172
|
}
|
|
168
173
|
|
|
169
|
-
return
|
|
174
|
+
return jsxRuntime.jsx(UncontrolledCollapsibleMotion, _objectSpread({}, props));
|
|
170
175
|
};
|
|
171
176
|
|
|
177
|
+
CollapsibleMotion.propTypes = {};
|
|
172
178
|
CollapsibleMotion.displayName = 'CollapsibleMotion';
|
|
173
179
|
CollapsibleMotion.defaultProps = defaultProps;
|
|
174
|
-
CollapsibleMotion.propTypes = {};
|
|
175
180
|
var CollapsibleMotion$1 = CollapsibleMotion;
|
|
176
181
|
|
|
177
|
-
// NOTE: This string will be replaced
|
|
178
|
-
var version =
|
|
182
|
+
// NOTE: This string will be replaced on build time with the package version.
|
|
183
|
+
var version = "12.2.9";
|
|
179
184
|
|
|
180
|
-
exports[
|
|
185
|
+
exports["default"] = CollapsibleMotion$1;
|
|
181
186
|
exports.version = version;
|
|
@@ -9,50 +9,19 @@ import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object
|
|
|
9
9
|
import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
|
|
10
10
|
import _slicedToArray from '@babel/runtime-corejs3/helpers/esm/slicedToArray';
|
|
11
11
|
import _taggedTemplateLiteral from '@babel/runtime-corejs3/helpers/esm/taggedTemplateLiteral';
|
|
12
|
-
import
|
|
13
|
-
import
|
|
12
|
+
import _pt from 'prop-types';
|
|
13
|
+
import { useRef, useEffect, useCallback } from 'react';
|
|
14
14
|
import { warning } from '@commercetools-uikit/utils';
|
|
15
|
-
import {
|
|
15
|
+
import { ClassNames, keyframes } from '@emotion/react';
|
|
16
16
|
import isNil from 'lodash/isNil';
|
|
17
17
|
import { useToggleState, usePrevious } from '@commercetools-uikit/hooks';
|
|
18
|
+
import { jsx } from '@emotion/react/jsx-runtime';
|
|
18
19
|
|
|
19
20
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
20
21
|
|
|
21
22
|
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
22
23
|
|
|
23
24
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
24
|
-
var collapsibleMotionPropTypes = process.env.NODE_ENV !== "production" ? {
|
|
25
|
-
/**
|
|
26
|
-
* A render function, called with the following named arguments: `isOpen` (boolean), `toggle` (function),
|
|
27
|
-
* `containerStyles` (css-in-js object), `registerContentNode` (React reference to be used on the animated container).
|
|
28
|
-
* <br/>
|
|
29
|
-
* Siganture: `({ isOpen, containerStyles, toggle, registerContentNode }) => React.node`
|
|
30
|
-
*/
|
|
31
|
-
children: PropTypes.func.isRequired,
|
|
32
|
-
|
|
33
|
-
/**
|
|
34
|
-
* Determines the state of the toggle `isOpen`. Setting this prop will make the component **controlled**
|
|
35
|
-
*/
|
|
36
|
-
// eslint-disable-next-line react/no-unused-prop-types
|
|
37
|
-
isClosed: PropTypes.bool,
|
|
38
|
-
|
|
39
|
-
/**
|
|
40
|
-
* A callback function called when the `toggle` function is called. This prop is required when the component is **controlled**.
|
|
41
|
-
*/
|
|
42
|
-
// eslint-disable-next-line react/no-unused-prop-types
|
|
43
|
-
onToggle: PropTypes.func,
|
|
44
|
-
|
|
45
|
-
/**
|
|
46
|
-
* The minimal height of the container being animated.
|
|
47
|
-
*/
|
|
48
|
-
minHeight: PropTypes.number,
|
|
49
|
-
|
|
50
|
-
/**
|
|
51
|
-
*The initial value to the internal toggle state `isOpen`.
|
|
52
|
-
*/
|
|
53
|
-
// eslint-disable-next-line react/no-unused-prop-types
|
|
54
|
-
isDefaultClosed: PropTypes.bool
|
|
55
|
-
} : {};
|
|
56
25
|
var defaultProps = {
|
|
57
26
|
minHeight: 0
|
|
58
27
|
};
|
|
@@ -70,24 +39,25 @@ var createOpeningAnimation = function createOpeningAnimation(height) {
|
|
|
70
39
|
return keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n 0% { height: ", "; overflow: hidden; visibility: ", "; }\n 99% { height: ", "px; overflow: hidden; }\n 100% { height: auto; overflow: visible; }\n "])), getMinHeight(minHeight), getVisibility(minHeight), height);
|
|
71
40
|
};
|
|
72
41
|
|
|
73
|
-
var createClosingAnimation = function createClosingAnimation(height
|
|
42
|
+
var createClosingAnimation = function createClosingAnimation(height) {
|
|
43
|
+
var minHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
74
44
|
return keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n from { height: ", "px; }\n to { height: ", "; overflow: hidden; visibility: ", "; }\n "])), height, getMinHeight(minHeight), getVisibility(minHeight));
|
|
75
45
|
};
|
|
76
46
|
|
|
77
|
-
var useToggleAnimation = function useToggleAnimation(isOpen, toggle
|
|
78
|
-
var
|
|
79
|
-
var
|
|
47
|
+
var useToggleAnimation = function useToggleAnimation(isOpen, toggle) {
|
|
48
|
+
var minHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
|
|
49
|
+
var nodeRef = useRef();
|
|
50
|
+
var animationRef = useRef(null);
|
|
80
51
|
var prevIsOpen = usePrevious(isOpen);
|
|
81
|
-
|
|
52
|
+
useEffect(function () {
|
|
82
53
|
process.env.NODE_ENV !== "production" ? warning(nodeRef.current, 'You need to call `registerContentNode` in order to use this component') : void 0;
|
|
83
54
|
}, // to match the componentDidMount behaviour
|
|
84
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
85
55
|
[nodeRef]);
|
|
86
|
-
var handleToggle =
|
|
56
|
+
var handleToggle = useCallback(function () {
|
|
87
57
|
process.env.NODE_ENV !== "production" ? warning(nodeRef.current, 'You need to call `registerContentNode` in order to use this component') : void 0; // set panel height to the height of the content,
|
|
88
58
|
// so we can animate between the height and 0
|
|
89
59
|
|
|
90
|
-
toggle();
|
|
60
|
+
toggle && toggle();
|
|
91
61
|
}, [nodeRef, toggle]);
|
|
92
62
|
var containerStyles = isOpen ? {
|
|
93
63
|
height: 'auto'
|
|
@@ -97,7 +67,7 @@ var useToggleAnimation = function useToggleAnimation(isOpen, toggle, minHeight)
|
|
|
97
67
|
visibility: getVisibility(minHeight)
|
|
98
68
|
}; // if state has changed
|
|
99
69
|
|
|
100
|
-
if (typeof prevIsOpen !== 'undefined' && prevIsOpen !== isOpen) {
|
|
70
|
+
if (typeof prevIsOpen !== 'undefined' && prevIsOpen !== isOpen && nodeRef.current) {
|
|
101
71
|
animationRef.current = isOpen ? createOpeningAnimation(nodeRef.current.clientHeight, minHeight) : createClosingAnimation(nodeRef.current.clientHeight, minHeight);
|
|
102
72
|
}
|
|
103
73
|
|
|
@@ -112,30 +82,38 @@ var ControlledCollapsibleMotion = function ControlledCollapsibleMotion(props) {
|
|
|
112
82
|
animationToggle = _useToggleAnimation2[2],
|
|
113
83
|
registerContentNode = _useToggleAnimation2[3];
|
|
114
84
|
|
|
115
|
-
return jsx(ClassNames,
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
85
|
+
return jsx(ClassNames, {
|
|
86
|
+
children: function children(_ref) {
|
|
87
|
+
var css = _ref.css;
|
|
88
|
+
var animationStyle = {};
|
|
89
|
+
|
|
90
|
+
if (animation) {
|
|
91
|
+
// By calling `css`, emotion injects the required CSS into the document head.
|
|
92
|
+
// eslint-disable-next-line no-unused-expressions
|
|
93
|
+
css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n animation: ", " 200ms\n forwards;\n "])), animation);
|
|
94
|
+
animationStyle = {
|
|
95
|
+
animation: "".concat(animation.name, " 200ms forwards")
|
|
96
|
+
};
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
return props.children({
|
|
100
|
+
isOpen: !props.isClosed,
|
|
101
|
+
containerStyles: _objectSpread(_objectSpread({}, containerStyles), animationStyle),
|
|
102
|
+
toggle: animationToggle,
|
|
103
|
+
registerContentNode: registerContentNode
|
|
104
|
+
});
|
|
126
105
|
}
|
|
127
|
-
|
|
128
|
-
return props.children({
|
|
129
|
-
isOpen: !props.isClosed,
|
|
130
|
-
containerStyles: _objectSpread(_objectSpread({}, containerStyles), animationStyle),
|
|
131
|
-
toggle: animationToggle,
|
|
132
|
-
registerContentNode: registerContentNode
|
|
133
|
-
});
|
|
134
106
|
});
|
|
135
107
|
};
|
|
136
108
|
|
|
109
|
+
ControlledCollapsibleMotion.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
110
|
+
children: _pt.func.isRequired,
|
|
111
|
+
isClosed: _pt.bool,
|
|
112
|
+
onToggle: _pt.func,
|
|
113
|
+
minHeight: _pt.number,
|
|
114
|
+
isDefaultClosed: _pt.bool
|
|
115
|
+
} : {};
|
|
137
116
|
ControlledCollapsibleMotion.displayName = 'ControlledCollapsibleMotion';
|
|
138
|
-
ControlledCollapsibleMotion.propTypes = process.env.NODE_ENV !== "production" ? collapsibleMotionPropTypes : {};
|
|
139
117
|
|
|
140
118
|
var UncontrolledCollapsibleMotion = function UncontrolledCollapsibleMotion(props) {
|
|
141
119
|
var _useToggleState = useToggleState(!props.isDefaultClosed),
|
|
@@ -150,48 +128,62 @@ var UncontrolledCollapsibleMotion = function UncontrolledCollapsibleMotion(props
|
|
|
150
128
|
animationToggle = _useToggleAnimation4[2],
|
|
151
129
|
registerContentNode = _useToggleAnimation4[3];
|
|
152
130
|
|
|
153
|
-
return jsx(ClassNames,
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
131
|
+
return jsx(ClassNames, {
|
|
132
|
+
children: function children(_ref2) {
|
|
133
|
+
var css = _ref2.css;
|
|
134
|
+
var animationStyle = {};
|
|
135
|
+
|
|
136
|
+
if (animation) {
|
|
137
|
+
// By calling `css`, emotion injects the required CSS into the document head.
|
|
138
|
+
// eslint-disable-next-line no-unused-expressions
|
|
139
|
+
css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n animation: ", " 200ms\n forwards;\n "])), animation);
|
|
140
|
+
animationStyle = {
|
|
141
|
+
animation: "".concat(animation.name, " 200ms forwards")
|
|
142
|
+
};
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
return props.children({
|
|
146
|
+
isOpen: isOpen,
|
|
147
|
+
containerStyles: _objectSpread(_objectSpread({}, containerStyles), animationStyle),
|
|
148
|
+
toggle: animationToggle,
|
|
149
|
+
registerContentNode: registerContentNode
|
|
150
|
+
});
|
|
164
151
|
}
|
|
165
|
-
|
|
166
|
-
return props.children({
|
|
167
|
-
isOpen: isOpen,
|
|
168
|
-
containerStyles: _objectSpread(_objectSpread({}, containerStyles), animationStyle),
|
|
169
|
-
toggle: animationToggle,
|
|
170
|
-
registerContentNode: registerContentNode
|
|
171
|
-
});
|
|
172
152
|
});
|
|
173
153
|
};
|
|
174
154
|
|
|
155
|
+
UncontrolledCollapsibleMotion.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
156
|
+
children: _pt.func.isRequired,
|
|
157
|
+
isClosed: _pt.bool,
|
|
158
|
+
onToggle: _pt.func,
|
|
159
|
+
minHeight: _pt.number,
|
|
160
|
+
isDefaultClosed: _pt.bool
|
|
161
|
+
} : {};
|
|
175
162
|
UncontrolledCollapsibleMotion.displayName = 'UncontrolledCollapsibleMotion';
|
|
176
163
|
UncontrolledCollapsibleMotion.defaultProps = defaultProps;
|
|
177
|
-
UncontrolledCollapsibleMotion.propTypes = process.env.NODE_ENV !== "production" ? collapsibleMotionPropTypes : {};
|
|
178
164
|
|
|
179
165
|
var CollapsibleMotion = function CollapsibleMotion(props) {
|
|
180
166
|
var isControlledComponent = !isNil(props.isClosed);
|
|
181
167
|
|
|
182
168
|
if (isControlledComponent) {
|
|
183
|
-
return jsx(ControlledCollapsibleMotion, props);
|
|
169
|
+
return jsx(ControlledCollapsibleMotion, _objectSpread({}, props));
|
|
184
170
|
}
|
|
185
171
|
|
|
186
|
-
return jsx(UncontrolledCollapsibleMotion, props);
|
|
172
|
+
return jsx(UncontrolledCollapsibleMotion, _objectSpread({}, props));
|
|
187
173
|
};
|
|
188
174
|
|
|
175
|
+
CollapsibleMotion.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
176
|
+
children: _pt.func.isRequired,
|
|
177
|
+
isClosed: _pt.bool,
|
|
178
|
+
onToggle: _pt.func,
|
|
179
|
+
minHeight: _pt.number,
|
|
180
|
+
isDefaultClosed: _pt.bool
|
|
181
|
+
} : {};
|
|
189
182
|
CollapsibleMotion.displayName = 'CollapsibleMotion';
|
|
190
183
|
CollapsibleMotion.defaultProps = defaultProps;
|
|
191
|
-
CollapsibleMotion.propTypes = process.env.NODE_ENV !== "production" ? collapsibleMotionPropTypes : {};
|
|
192
184
|
var CollapsibleMotion$1 = CollapsibleMotion;
|
|
193
185
|
|
|
194
|
-
// NOTE: This string will be replaced
|
|
195
|
-
var version =
|
|
186
|
+
// NOTE: This string will be replaced on build time with the package version.
|
|
187
|
+
var version = "12.2.9";
|
|
196
188
|
|
|
197
189
|
export { CollapsibleMotion$1 as default, version };
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { ReactNode, CSSProperties, LegacyRef } from 'react';
|
|
2
|
+
declare type TContainerStyles = {
|
|
3
|
+
height?: string | number;
|
|
4
|
+
overflow?: string;
|
|
5
|
+
visibility?: string;
|
|
6
|
+
name?: string;
|
|
7
|
+
animation?: string;
|
|
8
|
+
} & CSSProperties;
|
|
9
|
+
declare type TRenderFunctionOptions = {
|
|
10
|
+
isOpen: boolean;
|
|
11
|
+
containerStyles: TContainerStyles;
|
|
12
|
+
toggle: () => void;
|
|
13
|
+
registerContentNode: TNodeRefObject;
|
|
14
|
+
};
|
|
15
|
+
export declare type TCollapsibleMotionProps = {
|
|
16
|
+
children: (options: TRenderFunctionOptions) => ReactNode;
|
|
17
|
+
isClosed?: boolean;
|
|
18
|
+
onToggle?: () => void;
|
|
19
|
+
minHeight?: number;
|
|
20
|
+
isDefaultClosed?: boolean;
|
|
21
|
+
};
|
|
22
|
+
declare type TNodeRefObject = {
|
|
23
|
+
clientHeight: number;
|
|
24
|
+
} & LegacyRef<HTMLDivElement>;
|
|
25
|
+
declare const CollapsibleMotion: {
|
|
26
|
+
(props: TCollapsibleMotionProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
27
|
+
displayName: string;
|
|
28
|
+
defaultProps: Pick<TCollapsibleMotionProps, "minHeight">;
|
|
29
|
+
};
|
|
30
|
+
export default CollapsibleMotion;
|
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": "12.2.
|
|
4
|
+
"version": "12.2.9",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -11,7 +11,6 @@
|
|
|
11
11
|
"homepage": "https://uikit.commercetools.com",
|
|
12
12
|
"keywords": ["javascript", "design system", "react", "uikit"],
|
|
13
13
|
"license": "MIT",
|
|
14
|
-
"private": false,
|
|
15
14
|
"publishConfig": {
|
|
16
15
|
"access": "public"
|
|
17
16
|
},
|
|
@@ -19,14 +18,11 @@
|
|
|
19
18
|
"main": "dist/commercetools-uikit-collapsible-motion.cjs.js",
|
|
20
19
|
"module": "dist/commercetools-uikit-collapsible-motion.esm.js",
|
|
21
20
|
"files": ["dist"],
|
|
22
|
-
"scripts": {
|
|
23
|
-
"prepare": "../../../scripts/version.js replace"
|
|
24
|
-
},
|
|
25
21
|
"dependencies": {
|
|
26
|
-
"@babel/runtime": "7.
|
|
27
|
-
"@babel/runtime-corejs3": "7.
|
|
28
|
-
"@commercetools-uikit/hooks": "12.2.
|
|
29
|
-
"@commercetools-uikit/utils": "12.2.
|
|
22
|
+
"@babel/runtime": "7.16.5",
|
|
23
|
+
"@babel/runtime-corejs3": "7.16.5",
|
|
24
|
+
"@commercetools-uikit/hooks": "12.2.9",
|
|
25
|
+
"@commercetools-uikit/utils": "12.2.9",
|
|
30
26
|
"@emotion/react": "^11.4.0",
|
|
31
27
|
"@emotion/styled": "^11.3.0",
|
|
32
28
|
"lodash": "4.17.21",
|