@commercetools-uikit/collapsible-motion 16.0.0 → 16.1.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.
Files changed (4) hide show
  1. package/dist/commercetools-uikit-collapsible-motion.cjs.dev.js +21 -41
  2. package/dist/commercetools-uikit-collapsible-motion.cjs.prod.js +20 -40
  3. package/dist/commercetools-uikit-collapsible-motion.esm.js +21 -41
  4. package/package.json +3 -3
package/dist/commercetools-uikit-collapsible-motion.cjs.dev.js CHANGED
@@ -35,28 +35,21 @@ var _pt__default = /*#__PURE__*/_interopDefault(_pt);
35
35
  var isNil__default = /*#__PURE__*/_interopDefault(isNil);
36
36
 
37
37
  var _templateObject, _templateObject2, _templateObject3, _templateObject4;
38
-
39
38
  function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); 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
39
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _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; }
42
40
  const defaultProps = {
43
41
  minHeight: 0
44
42
  };
45
-
46
43
  const getMinHeight = minHeight => minHeight !== 0 ? "".concat(minHeight, "px") : minHeight;
47
-
48
44
  const getVisibility = height => height === 0 ? 'hidden' : 'visible';
49
-
50
45
  const createOpeningAnimation = function (height) {
51
46
  let minHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
52
47
  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);
53
48
  };
54
-
55
49
  const createClosingAnimation = function (height) {
56
50
  let minHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
57
51
  return react.keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n from { height: ", "px; }\n to { height: ", "; overflow: hidden; visibility: ", "; }\n "])), height, getMinHeight(minHeight), getVisibility(minHeight));
58
52
  };
59
-
60
53
  const useToggleAnimation = function (isOpen, toggle) {
61
54
  let minHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
62
55
  const nodeRef = react$1.useRef();
@@ -64,12 +57,14 @@ const useToggleAnimation = function (isOpen, toggle) {
64
57
  const prevIsOpen = hooks.usePrevious(isOpen);
65
58
  react$1.useEffect(() => {
66
59
  process.env.NODE_ENV !== "production" ? utils.warning(nodeRef.current, 'You need to call `registerContentNode` in order to use this component') : void 0;
67
- }, // to match the componentDidMount behaviour
60
+ },
61
+ // to match the componentDidMount behaviour
68
62
  [nodeRef]);
69
63
  const handleToggle = react$1.useCallback(() => {
70
- 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,
71
- // so we can animate between the height and 0
64
+ process.env.NODE_ENV !== "production" ? utils.warning(nodeRef.current, 'You need to call `registerContentNode` in order to use this component') : void 0;
72
65
 
66
+ // set panel height to the height of the content,
67
+ // so we can animate between the height and 0
73
68
  toggle && toggle();
74
69
  }, [nodeRef, toggle]);
75
70
  const containerStyles = isOpen ? {
@@ -78,28 +73,25 @@ const useToggleAnimation = function (isOpen, toggle) {
78
73
  height: getMinHeight(minHeight),
79
74
  overflow: 'hidden',
80
75
  visibility: getVisibility(minHeight)
81
- }; // if state has changed
76
+ };
82
77
 
78
+ // if state has changed
83
79
  if (typeof prevIsOpen !== 'undefined' && prevIsOpen !== isOpen && nodeRef.current) {
84
80
  animationRef.current = isOpen ? createOpeningAnimation(nodeRef.current.clientHeight, minHeight) : createClosingAnimation(nodeRef.current.clientHeight, minHeight);
85
81
  }
86
-
87
82
  return [animationRef.current, containerStyles, handleToggle, nodeRef];
88
83
  };
89
-
90
84
  const ControlledCollapsibleMotion = props => {
91
85
  const _useToggleAnimation = useToggleAnimation(!props.isClosed, props.onToggle, props.minHeight),
92
- _useToggleAnimation2 = _slicedToArray(_useToggleAnimation, 4),
93
- animation = _useToggleAnimation2[0],
94
- containerStyles = _useToggleAnimation2[1],
95
- animationToggle = _useToggleAnimation2[2],
96
- registerContentNode = _useToggleAnimation2[3];
97
-
86
+ _useToggleAnimation2 = _slicedToArray(_useToggleAnimation, 4),
87
+ animation = _useToggleAnimation2[0],
88
+ containerStyles = _useToggleAnimation2[1],
89
+ animationToggle = _useToggleAnimation2[2],
90
+ registerContentNode = _useToggleAnimation2[3];
98
91
  return jsxRuntime.jsx(react.ClassNames, {
99
92
  children: _ref => {
100
93
  let css = _ref.css;
101
94
  let animationStyle = {};
102
-
103
95
  if (animation) {
104
96
  // By calling `css`, emotion injects the required CSS into the document head.
105
97
  // eslint-disable-next-line no-unused-expressions
@@ -108,7 +100,6 @@ const ControlledCollapsibleMotion = props => {
108
100
  animation: "".concat(animation.name, " 200ms forwards")
109
101
  };
110
102
  }
111
-
112
103
  return props.children({
113
104
  isOpen: !props.isClosed,
114
105
  containerStyles: _objectSpread(_objectSpread({}, containerStyles), animationStyle),
@@ -118,7 +109,6 @@ const ControlledCollapsibleMotion = props => {
118
109
  }
119
110
  });
120
111
  };
121
-
122
112
  ControlledCollapsibleMotion.propTypes = process.env.NODE_ENV !== "production" ? {
123
113
  children: _pt__default["default"].func.isRequired,
124
114
  isClosed: _pt__default["default"].bool,
@@ -127,25 +117,21 @@ ControlledCollapsibleMotion.propTypes = process.env.NODE_ENV !== "production" ?
127
117
  isDefaultClosed: _pt__default["default"].bool
128
118
  } : {};
129
119
  ControlledCollapsibleMotion.displayName = 'ControlledCollapsibleMotion';
130
-
131
120
  const UncontrolledCollapsibleMotion = props => {
132
121
  const _useToggleState = hooks.useToggleState(!props.isDefaultClosed),
133
- _useToggleState2 = _slicedToArray(_useToggleState, 2),
134
- isOpen = _useToggleState2[0],
135
- toggle = _useToggleState2[1];
136
-
122
+ _useToggleState2 = _slicedToArray(_useToggleState, 2),
123
+ isOpen = _useToggleState2[0],
124
+ toggle = _useToggleState2[1];
137
125
  const _useToggleAnimation3 = useToggleAnimation(isOpen, toggle, props.minHeight),
138
- _useToggleAnimation4 = _slicedToArray(_useToggleAnimation3, 4),
139
- animation = _useToggleAnimation4[0],
140
- containerStyles = _useToggleAnimation4[1],
141
- animationToggle = _useToggleAnimation4[2],
142
- registerContentNode = _useToggleAnimation4[3];
143
-
126
+ _useToggleAnimation4 = _slicedToArray(_useToggleAnimation3, 4),
127
+ animation = _useToggleAnimation4[0],
128
+ containerStyles = _useToggleAnimation4[1],
129
+ animationToggle = _useToggleAnimation4[2],
130
+ registerContentNode = _useToggleAnimation4[3];
144
131
  return jsxRuntime.jsx(react.ClassNames, {
145
132
  children: _ref2 => {
146
133
  let css = _ref2.css;
147
134
  let animationStyle = {};
148
-
149
135
  if (animation) {
150
136
  // By calling `css`, emotion injects the required CSS into the document head.
151
137
  // eslint-disable-next-line no-unused-expressions
@@ -154,7 +140,6 @@ const UncontrolledCollapsibleMotion = props => {
154
140
  animation: "".concat(animation.name, " 200ms forwards")
155
141
  };
156
142
  }
157
-
158
143
  return props.children({
159
144
  isOpen,
160
145
  containerStyles: _objectSpread(_objectSpread({}, containerStyles), animationStyle),
@@ -164,7 +149,6 @@ const UncontrolledCollapsibleMotion = props => {
164
149
  }
165
150
  });
166
151
  };
167
-
168
152
  UncontrolledCollapsibleMotion.propTypes = process.env.NODE_ENV !== "production" ? {
169
153
  children: _pt__default["default"].func.isRequired,
170
154
  isClosed: _pt__default["default"].bool,
@@ -174,17 +158,13 @@ UncontrolledCollapsibleMotion.propTypes = process.env.NODE_ENV !== "production"
174
158
  } : {};
175
159
  UncontrolledCollapsibleMotion.displayName = 'UncontrolledCollapsibleMotion';
176
160
  UncontrolledCollapsibleMotion.defaultProps = defaultProps;
177
-
178
161
  const CollapsibleMotion = props => {
179
162
  const isControlledComponent = !isNil__default["default"](props.isClosed);
180
-
181
163
  if (isControlledComponent) {
182
164
  return jsxRuntime.jsx(ControlledCollapsibleMotion, _objectSpread({}, props));
183
165
  }
184
-
185
166
  return jsxRuntime.jsx(UncontrolledCollapsibleMotion, _objectSpread({}, props));
186
167
  };
187
-
188
168
  CollapsibleMotion.propTypes = process.env.NODE_ENV !== "production" ? {
189
169
  children: _pt__default["default"].func.isRequired,
190
170
  isClosed: _pt__default["default"].bool,
@@ -197,7 +177,7 @@ CollapsibleMotion.defaultProps = defaultProps;
197
177
  var CollapsibleMotion$1 = CollapsibleMotion;
198
178
 
199
179
  // NOTE: This string will be replaced on build time with the package version.
200
- var version = "16.0.0";
180
+ var version = "16.1.0";
201
181
 
202
182
  exports["default"] = CollapsibleMotion$1;
203
183
  exports.version = version;
package/dist/commercetools-uikit-collapsible-motion.cjs.prod.js CHANGED
@@ -34,39 +34,34 @@ var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defin
34
34
  var isNil__default = /*#__PURE__*/_interopDefault(isNil);
35
35
 
36
36
  var _templateObject, _templateObject2, _templateObject3, _templateObject4;
37
-
38
37
  function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); 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
-
40
38
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _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
39
  const defaultProps = {
42
40
  minHeight: 0
43
41
  };
44
-
45
42
  const getMinHeight = minHeight => minHeight !== 0 ? "".concat(minHeight, "px") : minHeight;
46
-
47
43
  const getVisibility = height => height === 0 ? 'hidden' : 'visible';
48
-
49
44
  const createOpeningAnimation = function (height) {
50
45
  let minHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
51
46
  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);
52
47
  };
53
-
54
48
  const createClosingAnimation = function (height) {
55
49
  let minHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
56
50
  return react.keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n from { height: ", "px; }\n to { height: ", "; overflow: hidden; visibility: ", "; }\n "])), height, getMinHeight(minHeight), getVisibility(minHeight));
57
51
  };
58
-
59
52
  const useToggleAnimation = function (isOpen, toggle) {
60
53
  let minHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
61
54
  const nodeRef = react$1.useRef();
62
55
  const animationRef = react$1.useRef(null);
63
56
  const prevIsOpen = hooks.usePrevious(isOpen);
64
57
  react$1.useEffect(() => {
65
- }, // to match the componentDidMount behaviour
58
+ },
59
+ // to match the componentDidMount behaviour
66
60
  [nodeRef]);
67
61
  const handleToggle = react$1.useCallback(() => {
68
- // so we can animate between the height and 0
69
62
 
63
+ // set panel height to the height of the content,
64
+ // so we can animate between the height and 0
70
65
  toggle && toggle();
71
66
  }, [nodeRef, toggle]);
72
67
  const containerStyles = isOpen ? {
@@ -75,28 +70,25 @@ const useToggleAnimation = function (isOpen, toggle) {
75
70
  height: getMinHeight(minHeight),
76
71
  overflow: 'hidden',
77
72
  visibility: getVisibility(minHeight)
78
- }; // if state has changed
73
+ };
79
74
 
75
+ // if state has changed
80
76
  if (typeof prevIsOpen !== 'undefined' && prevIsOpen !== isOpen && nodeRef.current) {
81
77
  animationRef.current = isOpen ? createOpeningAnimation(nodeRef.current.clientHeight, minHeight) : createClosingAnimation(nodeRef.current.clientHeight, minHeight);
82
78
  }
83
-
84
79
  return [animationRef.current, containerStyles, handleToggle, nodeRef];
85
80
  };
86
-
87
81
  const ControlledCollapsibleMotion = props => {
88
82
  const _useToggleAnimation = useToggleAnimation(!props.isClosed, props.onToggle, props.minHeight),
89
- _useToggleAnimation2 = _slicedToArray(_useToggleAnimation, 4),
90
- animation = _useToggleAnimation2[0],
91
- containerStyles = _useToggleAnimation2[1],
92
- animationToggle = _useToggleAnimation2[2],
93
- registerContentNode = _useToggleAnimation2[3];
94
-
83
+ _useToggleAnimation2 = _slicedToArray(_useToggleAnimation, 4),
84
+ animation = _useToggleAnimation2[0],
85
+ containerStyles = _useToggleAnimation2[1],
86
+ animationToggle = _useToggleAnimation2[2],
87
+ registerContentNode = _useToggleAnimation2[3];
95
88
  return jsxRuntime.jsx(react.ClassNames, {
96
89
  children: _ref => {
97
90
  let css = _ref.css;
98
91
  let animationStyle = {};
99
-
100
92
  if (animation) {
101
93
  // By calling `css`, emotion injects the required CSS into the document head.
102
94
  // eslint-disable-next-line no-unused-expressions
@@ -105,7 +97,6 @@ const ControlledCollapsibleMotion = props => {
105
97
  animation: "".concat(animation.name, " 200ms forwards")
106
98
  };
107
99
  }
108
-
109
100
  return props.children({
110
101
  isOpen: !props.isClosed,
111
102
  containerStyles: _objectSpread(_objectSpread({}, containerStyles), animationStyle),
@@ -115,28 +106,23 @@ const ControlledCollapsibleMotion = props => {
115
106
  }
116
107
  });
117
108
  };
118
-
119
109
  ControlledCollapsibleMotion.propTypes = {};
120
110
  ControlledCollapsibleMotion.displayName = 'ControlledCollapsibleMotion';
121
-
122
111
  const UncontrolledCollapsibleMotion = props => {
123
112
  const _useToggleState = hooks.useToggleState(!props.isDefaultClosed),
124
- _useToggleState2 = _slicedToArray(_useToggleState, 2),
125
- isOpen = _useToggleState2[0],
126
- toggle = _useToggleState2[1];
127
-
113
+ _useToggleState2 = _slicedToArray(_useToggleState, 2),
114
+ isOpen = _useToggleState2[0],
115
+ toggle = _useToggleState2[1];
128
116
  const _useToggleAnimation3 = useToggleAnimation(isOpen, toggle, props.minHeight),
129
- _useToggleAnimation4 = _slicedToArray(_useToggleAnimation3, 4),
130
- animation = _useToggleAnimation4[0],
131
- containerStyles = _useToggleAnimation4[1],
132
- animationToggle = _useToggleAnimation4[2],
133
- registerContentNode = _useToggleAnimation4[3];
134
-
117
+ _useToggleAnimation4 = _slicedToArray(_useToggleAnimation3, 4),
118
+ animation = _useToggleAnimation4[0],
119
+ containerStyles = _useToggleAnimation4[1],
120
+ animationToggle = _useToggleAnimation4[2],
121
+ registerContentNode = _useToggleAnimation4[3];
135
122
  return jsxRuntime.jsx(react.ClassNames, {
136
123
  children: _ref2 => {
137
124
  let css = _ref2.css;
138
125
  let animationStyle = {};
139
-
140
126
  if (animation) {
141
127
  // By calling `css`, emotion injects the required CSS into the document head.
142
128
  // eslint-disable-next-line no-unused-expressions
@@ -145,7 +131,6 @@ const UncontrolledCollapsibleMotion = props => {
145
131
  animation: "".concat(animation.name, " 200ms forwards")
146
132
  };
147
133
  }
148
-
149
134
  return props.children({
150
135
  isOpen,
151
136
  containerStyles: _objectSpread(_objectSpread({}, containerStyles), animationStyle),
@@ -155,28 +140,23 @@ const UncontrolledCollapsibleMotion = props => {
155
140
  }
156
141
  });
157
142
  };
158
-
159
143
  UncontrolledCollapsibleMotion.propTypes = {};
160
144
  UncontrolledCollapsibleMotion.displayName = 'UncontrolledCollapsibleMotion';
161
145
  UncontrolledCollapsibleMotion.defaultProps = defaultProps;
162
-
163
146
  const CollapsibleMotion = props => {
164
147
  const isControlledComponent = !isNil__default["default"](props.isClosed);
165
-
166
148
  if (isControlledComponent) {
167
149
  return jsxRuntime.jsx(ControlledCollapsibleMotion, _objectSpread({}, props));
168
150
  }
169
-
170
151
  return jsxRuntime.jsx(UncontrolledCollapsibleMotion, _objectSpread({}, props));
171
152
  };
172
-
173
153
  CollapsibleMotion.propTypes = {};
174
154
  CollapsibleMotion.displayName = 'CollapsibleMotion';
175
155
  CollapsibleMotion.defaultProps = defaultProps;
176
156
  var CollapsibleMotion$1 = CollapsibleMotion;
177
157
 
178
158
  // NOTE: This string will be replaced on build time with the package version.
179
- var version = "16.0.0";
159
+ var version = "16.1.0";
180
160
 
181
161
  exports["default"] = CollapsibleMotion$1;
182
162
  exports.version = version;
package/dist/commercetools-uikit-collapsible-motion.esm.js CHANGED
@@ -18,28 +18,21 @@ import { useToggleState, usePrevious } from '@commercetools-uikit/hooks';
18
18
  import { jsx } from '@emotion/react/jsx-runtime';
19
19
 
20
20
  var _templateObject, _templateObject2, _templateObject3, _templateObject4;
21
-
22
21
  function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
23
-
24
22
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
25
23
  const defaultProps = {
26
24
  minHeight: 0
27
25
  };
28
-
29
26
  const getMinHeight = minHeight => minHeight !== 0 ? "".concat(minHeight, "px") : minHeight;
30
-
31
27
  const getVisibility = height => height === 0 ? 'hidden' : 'visible';
32
-
33
28
  const createOpeningAnimation = function (height) {
34
29
  let minHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
35
30
  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);
36
31
  };
37
-
38
32
  const createClosingAnimation = function (height) {
39
33
  let minHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
40
34
  return keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n from { height: ", "px; }\n to { height: ", "; overflow: hidden; visibility: ", "; }\n "])), height, getMinHeight(minHeight), getVisibility(minHeight));
41
35
  };
42
-
43
36
  const useToggleAnimation = function (isOpen, toggle) {
44
37
  let minHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
45
38
  const nodeRef = useRef();
@@ -47,12 +40,14 @@ const useToggleAnimation = function (isOpen, toggle) {
47
40
  const prevIsOpen = usePrevious(isOpen);
48
41
  useEffect(() => {
49
42
  process.env.NODE_ENV !== "production" ? warning(nodeRef.current, 'You need to call `registerContentNode` in order to use this component') : void 0;
50
- }, // to match the componentDidMount behaviour
43
+ },
44
+ // to match the componentDidMount behaviour
51
45
  [nodeRef]);
52
46
  const handleToggle = useCallback(() => {
53
- 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,
54
- // so we can animate between the height and 0
47
+ process.env.NODE_ENV !== "production" ? warning(nodeRef.current, 'You need to call `registerContentNode` in order to use this component') : void 0;
55
48
 
49
+ // set panel height to the height of the content,
50
+ // so we can animate between the height and 0
56
51
  toggle && toggle();
57
52
  }, [nodeRef, toggle]);
58
53
  const containerStyles = isOpen ? {
@@ -61,28 +56,25 @@ const useToggleAnimation = function (isOpen, toggle) {
61
56
  height: getMinHeight(minHeight),
62
57
  overflow: 'hidden',
63
58
  visibility: getVisibility(minHeight)
64
- }; // if state has changed
59
+ };
65
60
 
61
+ // if state has changed
66
62
  if (typeof prevIsOpen !== 'undefined' && prevIsOpen !== isOpen && nodeRef.current) {
67
63
  animationRef.current = isOpen ? createOpeningAnimation(nodeRef.current.clientHeight, minHeight) : createClosingAnimation(nodeRef.current.clientHeight, minHeight);
68
64
  }
69
-
70
65
  return [animationRef.current, containerStyles, handleToggle, nodeRef];
71
66
  };
72
-
73
67
  const ControlledCollapsibleMotion = props => {
74
68
  const _useToggleAnimation = useToggleAnimation(!props.isClosed, props.onToggle, props.minHeight),
75
- _useToggleAnimation2 = _slicedToArray(_useToggleAnimation, 4),
76
- animation = _useToggleAnimation2[0],
77
- containerStyles = _useToggleAnimation2[1],
78
- animationToggle = _useToggleAnimation2[2],
79
- registerContentNode = _useToggleAnimation2[3];
80
-
69
+ _useToggleAnimation2 = _slicedToArray(_useToggleAnimation, 4),
70
+ animation = _useToggleAnimation2[0],
71
+ containerStyles = _useToggleAnimation2[1],
72
+ animationToggle = _useToggleAnimation2[2],
73
+ registerContentNode = _useToggleAnimation2[3];
81
74
  return jsx(ClassNames, {
82
75
  children: _ref => {
83
76
  let css = _ref.css;
84
77
  let animationStyle = {};
85
-
86
78
  if (animation) {
87
79
  // By calling `css`, emotion injects the required CSS into the document head.
88
80
  // eslint-disable-next-line no-unused-expressions
@@ -91,7 +83,6 @@ const ControlledCollapsibleMotion = props => {
91
83
  animation: "".concat(animation.name, " 200ms forwards")
92
84
  };
93
85
  }
94
-
95
86
  return props.children({
96
87
  isOpen: !props.isClosed,
97
88
  containerStyles: _objectSpread(_objectSpread({}, containerStyles), animationStyle),
@@ -101,7 +92,6 @@ const ControlledCollapsibleMotion = props => {
101
92
  }
102
93
  });
103
94
  };
104
-
105
95
  ControlledCollapsibleMotion.propTypes = process.env.NODE_ENV !== "production" ? {
106
96
  children: _pt.func.isRequired,
107
97
  isClosed: _pt.bool,
@@ -110,25 +100,21 @@ ControlledCollapsibleMotion.propTypes = process.env.NODE_ENV !== "production" ?
110
100
  isDefaultClosed: _pt.bool
111
101
  } : {};
112
102
  ControlledCollapsibleMotion.displayName = 'ControlledCollapsibleMotion';
113
-
114
103
  const UncontrolledCollapsibleMotion = props => {
115
104
  const _useToggleState = useToggleState(!props.isDefaultClosed),
116
- _useToggleState2 = _slicedToArray(_useToggleState, 2),
117
- isOpen = _useToggleState2[0],
118
- toggle = _useToggleState2[1];
119
-
105
+ _useToggleState2 = _slicedToArray(_useToggleState, 2),
106
+ isOpen = _useToggleState2[0],
107
+ toggle = _useToggleState2[1];
120
108
  const _useToggleAnimation3 = useToggleAnimation(isOpen, toggle, props.minHeight),
121
- _useToggleAnimation4 = _slicedToArray(_useToggleAnimation3, 4),
122
- animation = _useToggleAnimation4[0],
123
- containerStyles = _useToggleAnimation4[1],
124
- animationToggle = _useToggleAnimation4[2],
125
- registerContentNode = _useToggleAnimation4[3];
126
-
109
+ _useToggleAnimation4 = _slicedToArray(_useToggleAnimation3, 4),
110
+ animation = _useToggleAnimation4[0],
111
+ containerStyles = _useToggleAnimation4[1],
112
+ animationToggle = _useToggleAnimation4[2],
113
+ registerContentNode = _useToggleAnimation4[3];
127
114
  return jsx(ClassNames, {
128
115
  children: _ref2 => {
129
116
  let css = _ref2.css;
130
117
  let animationStyle = {};
131
-
132
118
  if (animation) {
133
119
  // By calling `css`, emotion injects the required CSS into the document head.
134
120
  // eslint-disable-next-line no-unused-expressions
@@ -137,7 +123,6 @@ const UncontrolledCollapsibleMotion = props => {
137
123
  animation: "".concat(animation.name, " 200ms forwards")
138
124
  };
139
125
  }
140
-
141
126
  return props.children({
142
127
  isOpen,
143
128
  containerStyles: _objectSpread(_objectSpread({}, containerStyles), animationStyle),
@@ -147,7 +132,6 @@ const UncontrolledCollapsibleMotion = props => {
147
132
  }
148
133
  });
149
134
  };
150
-
151
135
  UncontrolledCollapsibleMotion.propTypes = process.env.NODE_ENV !== "production" ? {
152
136
  children: _pt.func.isRequired,
153
137
  isClosed: _pt.bool,
@@ -157,17 +141,13 @@ UncontrolledCollapsibleMotion.propTypes = process.env.NODE_ENV !== "production"
157
141
  } : {};
158
142
  UncontrolledCollapsibleMotion.displayName = 'UncontrolledCollapsibleMotion';
159
143
  UncontrolledCollapsibleMotion.defaultProps = defaultProps;
160
-
161
144
  const CollapsibleMotion = props => {
162
145
  const isControlledComponent = !isNil(props.isClosed);
163
-
164
146
  if (isControlledComponent) {
165
147
  return jsx(ControlledCollapsibleMotion, _objectSpread({}, props));
166
148
  }
167
-
168
149
  return jsx(UncontrolledCollapsibleMotion, _objectSpread({}, props));
169
150
  };
170
-
171
151
  CollapsibleMotion.propTypes = process.env.NODE_ENV !== "production" ? {
172
152
  children: _pt.func.isRequired,
173
153
  isClosed: _pt.bool,
@@ -180,6 +160,6 @@ CollapsibleMotion.defaultProps = defaultProps;
180
160
  var CollapsibleMotion$1 = CollapsibleMotion;
181
161
 
182
162
  // NOTE: This string will be replaced on build time with the package version.
183
- var version = "16.0.0";
163
+ var version = "16.1.0";
184
164
 
185
165
  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": "16.0.0",
4
+ "version": "16.1.0",
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": "16.0.0",
25
- "@commercetools-uikit/utils": "16.0.0",
24
+ "@commercetools-uikit/hooks": "16.1.0",
25
+ "@commercetools-uikit/utils": "16.1.0",
26
26
  "@emotion/react": "^11.10.5",
27
27
  "@emotion/styled": "^11.10.5",
28
28
  "lodash": "4.17.21",