@commercetools-uikit/collapsible-motion 15.15.0 → 16.0.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 (6) hide show
  1. package/dist/commercetools-uikit-collapsible-motion.cjs.d.ts +1 -0
  2. package/dist/commercetools-uikit-collapsible-motion.cjs.d.ts.map +1 -0
  3. package/dist/commercetools-uikit-collapsible-motion.cjs.dev.js +43 -47
  4. package/dist/commercetools-uikit-collapsible-motion.cjs.prod.js +43 -47
  5. package/dist/commercetools-uikit-collapsible-motion.esm.js +43 -47
  6. package/package.json +3 -3
package/dist/commercetools-uikit-collapsible-motion.cjs.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export * from "./declarations/src/index";
2
2
  export { default } from "./declarations/src/index";
3
+ //# sourceMappingURL=commercetools-uikit-collapsible-motion.cjs.d.ts.map
package/dist/commercetools-uikit-collapsible-motion.cjs.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"commercetools-uikit-collapsible-motion.cjs.d.ts","sourceRoot":"","sources":["./declarations/src/index.d.ts"],"names":[],"mappings":"AAAA"}
package/dist/commercetools-uikit-collapsible-motion.cjs.dev.js CHANGED
@@ -39,44 +39,40 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
39
39
  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
40
 
41
41
  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
- var defaultProps = {
42
+ const defaultProps = {
43
43
  minHeight: 0
44
44
  };
45
45
 
46
- var getMinHeight = function getMinHeight(minHeight) {
47
- return minHeight !== 0 ? "".concat(minHeight, "px") : minHeight;
48
- };
46
+ const getMinHeight = minHeight => minHeight !== 0 ? "".concat(minHeight, "px") : minHeight;
49
47
 
50
- var getVisibility = function getVisibility(height) {
51
- return height === 0 ? 'hidden' : 'visible';
52
- };
48
+ const getVisibility = height => height === 0 ? 'hidden' : 'visible';
53
49
 
54
- var createOpeningAnimation = function createOpeningAnimation(height) {
55
- var minHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
50
+ const createOpeningAnimation = function (height) {
51
+ let minHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
56
52
  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);
57
53
  };
58
54
 
59
- var createClosingAnimation = function createClosingAnimation(height) {
60
- var minHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
55
+ const createClosingAnimation = function (height) {
56
+ let minHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
61
57
  return react.keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n from { height: ", "px; }\n to { height: ", "; overflow: hidden; visibility: ", "; }\n "])), height, getMinHeight(minHeight), getVisibility(minHeight));
62
58
  };
63
59
 
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);
68
- var prevIsOpen = hooks.usePrevious(isOpen);
69
- react$1.useEffect(function () {
60
+ const useToggleAnimation = function (isOpen, toggle) {
61
+ let minHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
62
+ const nodeRef = react$1.useRef();
63
+ const animationRef = react$1.useRef(null);
64
+ const prevIsOpen = hooks.usePrevious(isOpen);
65
+ react$1.useEffect(() => {
70
66
  process.env.NODE_ENV !== "production" ? utils.warning(nodeRef.current, 'You need to call `registerContentNode` in order to use this component') : void 0;
71
67
  }, // to match the componentDidMount behaviour
72
68
  [nodeRef]);
73
- var handleToggle = react$1.useCallback(function () {
69
+ const handleToggle = react$1.useCallback(() => {
74
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,
75
71
  // so we can animate between the height and 0
76
72
 
77
73
  toggle && toggle();
78
74
  }, [nodeRef, toggle]);
79
- var containerStyles = isOpen ? {
75
+ const containerStyles = isOpen ? {
80
76
  height: 'auto'
81
77
  } : {
82
78
  height: getMinHeight(minHeight),
@@ -91,18 +87,18 @@ var useToggleAnimation = function useToggleAnimation(isOpen, toggle) {
91
87
  return [animationRef.current, containerStyles, handleToggle, nodeRef];
92
88
  };
93
89
 
94
- var ControlledCollapsibleMotion = function ControlledCollapsibleMotion(props) {
95
- var _useToggleAnimation = useToggleAnimation(!props.isClosed, props.onToggle, props.minHeight),
96
- _useToggleAnimation2 = _slicedToArray(_useToggleAnimation, 4),
97
- animation = _useToggleAnimation2[0],
98
- containerStyles = _useToggleAnimation2[1],
99
- animationToggle = _useToggleAnimation2[2],
100
- registerContentNode = _useToggleAnimation2[3];
90
+ const ControlledCollapsibleMotion = props => {
91
+ 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];
101
97
 
102
98
  return jsxRuntime.jsx(react.ClassNames, {
103
- children: function children(_ref) {
104
- var css = _ref.css;
105
- var animationStyle = {};
99
+ children: _ref => {
100
+ let css = _ref.css;
101
+ let animationStyle = {};
106
102
 
107
103
  if (animation) {
108
104
  // By calling `css`, emotion injects the required CSS into the document head.
@@ -132,23 +128,23 @@ ControlledCollapsibleMotion.propTypes = process.env.NODE_ENV !== "production" ?
132
128
  } : {};
133
129
  ControlledCollapsibleMotion.displayName = 'ControlledCollapsibleMotion';
134
130
 
135
- var UncontrolledCollapsibleMotion = function UncontrolledCollapsibleMotion(props) {
136
- var _useToggleState = hooks.useToggleState(!props.isDefaultClosed),
137
- _useToggleState2 = _slicedToArray(_useToggleState, 2),
138
- isOpen = _useToggleState2[0],
139
- toggle = _useToggleState2[1];
131
+ const UncontrolledCollapsibleMotion = props => {
132
+ const _useToggleState = hooks.useToggleState(!props.isDefaultClosed),
133
+ _useToggleState2 = _slicedToArray(_useToggleState, 2),
134
+ isOpen = _useToggleState2[0],
135
+ toggle = _useToggleState2[1];
140
136
 
141
- var _useToggleAnimation3 = useToggleAnimation(isOpen, toggle, props.minHeight),
142
- _useToggleAnimation4 = _slicedToArray(_useToggleAnimation3, 4),
143
- animation = _useToggleAnimation4[0],
144
- containerStyles = _useToggleAnimation4[1],
145
- animationToggle = _useToggleAnimation4[2],
146
- registerContentNode = _useToggleAnimation4[3];
137
+ 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];
147
143
 
148
144
  return jsxRuntime.jsx(react.ClassNames, {
149
- children: function children(_ref2) {
150
- var css = _ref2.css;
151
- var animationStyle = {};
145
+ children: _ref2 => {
146
+ let css = _ref2.css;
147
+ let animationStyle = {};
152
148
 
153
149
  if (animation) {
154
150
  // By calling `css`, emotion injects the required CSS into the document head.
@@ -160,7 +156,7 @@ var UncontrolledCollapsibleMotion = function UncontrolledCollapsibleMotion(props
160
156
  }
161
157
 
162
158
  return props.children({
163
- isOpen: isOpen,
159
+ isOpen,
164
160
  containerStyles: _objectSpread(_objectSpread({}, containerStyles), animationStyle),
165
161
  toggle: animationToggle,
166
162
  registerContentNode: registerContentNode
@@ -179,8 +175,8 @@ UncontrolledCollapsibleMotion.propTypes = process.env.NODE_ENV !== "production"
179
175
  UncontrolledCollapsibleMotion.displayName = 'UncontrolledCollapsibleMotion';
180
176
  UncontrolledCollapsibleMotion.defaultProps = defaultProps;
181
177
 
182
- var CollapsibleMotion = function CollapsibleMotion(props) {
183
- var isControlledComponent = !isNil__default["default"](props.isClosed);
178
+ const CollapsibleMotion = props => {
179
+ const isControlledComponent = !isNil__default["default"](props.isClosed);
184
180
 
185
181
  if (isControlledComponent) {
186
182
  return jsxRuntime.jsx(ControlledCollapsibleMotion, _objectSpread({}, props));
@@ -201,7 +197,7 @@ CollapsibleMotion.defaultProps = defaultProps;
201
197
  var CollapsibleMotion$1 = CollapsibleMotion;
202
198
 
203
199
  // NOTE: This string will be replaced on build time with the package version.
204
- var version = "15.15.0";
200
+ var version = "16.0.0";
205
201
 
206
202
  exports["default"] = CollapsibleMotion$1;
207
203
  exports.version = version;
package/dist/commercetools-uikit-collapsible-motion.cjs.prod.js CHANGED
@@ -38,42 +38,38 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
38
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; }
39
39
 
40
40
  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
- var defaultProps = {
41
+ const defaultProps = {
42
42
  minHeight: 0
43
43
  };
44
44
 
45
- var getMinHeight = function getMinHeight(minHeight) {
46
- return minHeight !== 0 ? "".concat(minHeight, "px") : minHeight;
47
- };
45
+ const getMinHeight = minHeight => minHeight !== 0 ? "".concat(minHeight, "px") : minHeight;
48
46
 
49
- var getVisibility = function getVisibility(height) {
50
- return height === 0 ? 'hidden' : 'visible';
51
- };
47
+ const getVisibility = height => height === 0 ? 'hidden' : 'visible';
52
48
 
53
- var createOpeningAnimation = function createOpeningAnimation(height) {
54
- var minHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
49
+ const createOpeningAnimation = function (height) {
50
+ let minHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
55
51
  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
52
  };
57
53
 
58
- var createClosingAnimation = function createClosingAnimation(height) {
59
- var minHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
54
+ const createClosingAnimation = function (height) {
55
+ let minHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
60
56
  return react.keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n from { height: ", "px; }\n to { height: ", "; overflow: hidden; visibility: ", "; }\n "])), height, getMinHeight(minHeight), getVisibility(minHeight));
61
57
  };
62
58
 
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);
67
- var prevIsOpen = hooks.usePrevious(isOpen);
68
- react$1.useEffect(function () {
59
+ const useToggleAnimation = function (isOpen, toggle) {
60
+ let minHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
61
+ const nodeRef = react$1.useRef();
62
+ const animationRef = react$1.useRef(null);
63
+ const prevIsOpen = hooks.usePrevious(isOpen);
64
+ react$1.useEffect(() => {
69
65
  }, // to match the componentDidMount behaviour
70
66
  [nodeRef]);
71
- var handleToggle = react$1.useCallback(function () {
67
+ const handleToggle = react$1.useCallback(() => {
72
68
  // so we can animate between the height and 0
73
69
 
74
70
  toggle && toggle();
75
71
  }, [nodeRef, toggle]);
76
- var containerStyles = isOpen ? {
72
+ const containerStyles = isOpen ? {
77
73
  height: 'auto'
78
74
  } : {
79
75
  height: getMinHeight(minHeight),
@@ -88,18 +84,18 @@ var useToggleAnimation = function useToggleAnimation(isOpen, toggle) {
88
84
  return [animationRef.current, containerStyles, handleToggle, nodeRef];
89
85
  };
90
86
 
91
- var ControlledCollapsibleMotion = function ControlledCollapsibleMotion(props) {
92
- var _useToggleAnimation = useToggleAnimation(!props.isClosed, props.onToggle, props.minHeight),
93
- _useToggleAnimation2 = _slicedToArray(_useToggleAnimation, 4),
94
- animation = _useToggleAnimation2[0],
95
- containerStyles = _useToggleAnimation2[1],
96
- animationToggle = _useToggleAnimation2[2],
97
- registerContentNode = _useToggleAnimation2[3];
87
+ const ControlledCollapsibleMotion = props => {
88
+ 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];
98
94
 
99
95
  return jsxRuntime.jsx(react.ClassNames, {
100
- children: function children(_ref) {
101
- var css = _ref.css;
102
- var animationStyle = {};
96
+ children: _ref => {
97
+ let css = _ref.css;
98
+ let animationStyle = {};
103
99
 
104
100
  if (animation) {
105
101
  // By calling `css`, emotion injects the required CSS into the document head.
@@ -123,23 +119,23 @@ var ControlledCollapsibleMotion = function ControlledCollapsibleMotion(props) {
123
119
  ControlledCollapsibleMotion.propTypes = {};
124
120
  ControlledCollapsibleMotion.displayName = 'ControlledCollapsibleMotion';
125
121
 
126
- var UncontrolledCollapsibleMotion = function UncontrolledCollapsibleMotion(props) {
127
- var _useToggleState = hooks.useToggleState(!props.isDefaultClosed),
128
- _useToggleState2 = _slicedToArray(_useToggleState, 2),
129
- isOpen = _useToggleState2[0],
130
- toggle = _useToggleState2[1];
122
+ const UncontrolledCollapsibleMotion = props => {
123
+ const _useToggleState = hooks.useToggleState(!props.isDefaultClosed),
124
+ _useToggleState2 = _slicedToArray(_useToggleState, 2),
125
+ isOpen = _useToggleState2[0],
126
+ toggle = _useToggleState2[1];
131
127
 
132
- var _useToggleAnimation3 = useToggleAnimation(isOpen, toggle, props.minHeight),
133
- _useToggleAnimation4 = _slicedToArray(_useToggleAnimation3, 4),
134
- animation = _useToggleAnimation4[0],
135
- containerStyles = _useToggleAnimation4[1],
136
- animationToggle = _useToggleAnimation4[2],
137
- registerContentNode = _useToggleAnimation4[3];
128
+ 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];
138
134
 
139
135
  return jsxRuntime.jsx(react.ClassNames, {
140
- children: function children(_ref2) {
141
- var css = _ref2.css;
142
- var animationStyle = {};
136
+ children: _ref2 => {
137
+ let css = _ref2.css;
138
+ let animationStyle = {};
143
139
 
144
140
  if (animation) {
145
141
  // By calling `css`, emotion injects the required CSS into the document head.
@@ -151,7 +147,7 @@ var UncontrolledCollapsibleMotion = function UncontrolledCollapsibleMotion(props
151
147
  }
152
148
 
153
149
  return props.children({
154
- isOpen: isOpen,
150
+ isOpen,
155
151
  containerStyles: _objectSpread(_objectSpread({}, containerStyles), animationStyle),
156
152
  toggle: animationToggle,
157
153
  registerContentNode: registerContentNode
@@ -164,8 +160,8 @@ UncontrolledCollapsibleMotion.propTypes = {};
164
160
  UncontrolledCollapsibleMotion.displayName = 'UncontrolledCollapsibleMotion';
165
161
  UncontrolledCollapsibleMotion.defaultProps = defaultProps;
166
162
 
167
- var CollapsibleMotion = function CollapsibleMotion(props) {
168
- var isControlledComponent = !isNil__default["default"](props.isClosed);
163
+ const CollapsibleMotion = props => {
164
+ const isControlledComponent = !isNil__default["default"](props.isClosed);
169
165
 
170
166
  if (isControlledComponent) {
171
167
  return jsxRuntime.jsx(ControlledCollapsibleMotion, _objectSpread({}, props));
@@ -180,7 +176,7 @@ CollapsibleMotion.defaultProps = defaultProps;
180
176
  var CollapsibleMotion$1 = CollapsibleMotion;
181
177
 
182
178
  // NOTE: This string will be replaced on build time with the package version.
183
- var version = "15.15.0";
179
+ var version = "16.0.0";
184
180
 
185
181
  exports["default"] = CollapsibleMotion$1;
186
182
  exports.version = version;
package/dist/commercetools-uikit-collapsible-motion.esm.js CHANGED
@@ -22,44 +22,40 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
22
22
  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
23
 
24
24
  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
- var defaultProps = {
25
+ const defaultProps = {
26
26
  minHeight: 0
27
27
  };
28
28
 
29
- var getMinHeight = function getMinHeight(minHeight) {
30
- return minHeight !== 0 ? "".concat(minHeight, "px") : minHeight;
31
- };
29
+ const getMinHeight = minHeight => minHeight !== 0 ? "".concat(minHeight, "px") : minHeight;
32
30
 
33
- var getVisibility = function getVisibility(height) {
34
- return height === 0 ? 'hidden' : 'visible';
35
- };
31
+ const getVisibility = height => height === 0 ? 'hidden' : 'visible';
36
32
 
37
- var createOpeningAnimation = function createOpeningAnimation(height) {
38
- var minHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
33
+ const createOpeningAnimation = function (height) {
34
+ let minHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
39
35
  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);
40
36
  };
41
37
 
42
- var createClosingAnimation = function createClosingAnimation(height) {
43
- var minHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
38
+ const createClosingAnimation = function (height) {
39
+ let minHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
44
40
  return keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n from { height: ", "px; }\n to { height: ", "; overflow: hidden; visibility: ", "; }\n "])), height, getMinHeight(minHeight), getVisibility(minHeight));
45
41
  };
46
42
 
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);
51
- var prevIsOpen = usePrevious(isOpen);
52
- useEffect(function () {
43
+ const useToggleAnimation = function (isOpen, toggle) {
44
+ let minHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
45
+ const nodeRef = useRef();
46
+ const animationRef = useRef(null);
47
+ const prevIsOpen = usePrevious(isOpen);
48
+ useEffect(() => {
53
49
  process.env.NODE_ENV !== "production" ? warning(nodeRef.current, 'You need to call `registerContentNode` in order to use this component') : void 0;
54
50
  }, // to match the componentDidMount behaviour
55
51
  [nodeRef]);
56
- var handleToggle = useCallback(function () {
52
+ const handleToggle = useCallback(() => {
57
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,
58
54
  // so we can animate between the height and 0
59
55
 
60
56
  toggle && toggle();
61
57
  }, [nodeRef, toggle]);
62
- var containerStyles = isOpen ? {
58
+ const containerStyles = isOpen ? {
63
59
  height: 'auto'
64
60
  } : {
65
61
  height: getMinHeight(minHeight),
@@ -74,18 +70,18 @@ var useToggleAnimation = function useToggleAnimation(isOpen, toggle) {
74
70
  return [animationRef.current, containerStyles, handleToggle, nodeRef];
75
71
  };
76
72
 
77
- var ControlledCollapsibleMotion = function ControlledCollapsibleMotion(props) {
78
- var _useToggleAnimation = useToggleAnimation(!props.isClosed, props.onToggle, props.minHeight),
79
- _useToggleAnimation2 = _slicedToArray(_useToggleAnimation, 4),
80
- animation = _useToggleAnimation2[0],
81
- containerStyles = _useToggleAnimation2[1],
82
- animationToggle = _useToggleAnimation2[2],
83
- registerContentNode = _useToggleAnimation2[3];
73
+ const ControlledCollapsibleMotion = props => {
74
+ 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];
84
80
 
85
81
  return jsx(ClassNames, {
86
- children: function children(_ref) {
87
- var css = _ref.css;
88
- var animationStyle = {};
82
+ children: _ref => {
83
+ let css = _ref.css;
84
+ let animationStyle = {};
89
85
 
90
86
  if (animation) {
91
87
  // By calling `css`, emotion injects the required CSS into the document head.
@@ -115,23 +111,23 @@ ControlledCollapsibleMotion.propTypes = process.env.NODE_ENV !== "production" ?
115
111
  } : {};
116
112
  ControlledCollapsibleMotion.displayName = 'ControlledCollapsibleMotion';
117
113
 
118
- var UncontrolledCollapsibleMotion = function UncontrolledCollapsibleMotion(props) {
119
- var _useToggleState = useToggleState(!props.isDefaultClosed),
120
- _useToggleState2 = _slicedToArray(_useToggleState, 2),
121
- isOpen = _useToggleState2[0],
122
- toggle = _useToggleState2[1];
114
+ const UncontrolledCollapsibleMotion = props => {
115
+ const _useToggleState = useToggleState(!props.isDefaultClosed),
116
+ _useToggleState2 = _slicedToArray(_useToggleState, 2),
117
+ isOpen = _useToggleState2[0],
118
+ toggle = _useToggleState2[1];
123
119
 
124
- var _useToggleAnimation3 = useToggleAnimation(isOpen, toggle, props.minHeight),
125
- _useToggleAnimation4 = _slicedToArray(_useToggleAnimation3, 4),
126
- animation = _useToggleAnimation4[0],
127
- containerStyles = _useToggleAnimation4[1],
128
- animationToggle = _useToggleAnimation4[2],
129
- registerContentNode = _useToggleAnimation4[3];
120
+ 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];
130
126
 
131
127
  return jsx(ClassNames, {
132
- children: function children(_ref2) {
133
- var css = _ref2.css;
134
- var animationStyle = {};
128
+ children: _ref2 => {
129
+ let css = _ref2.css;
130
+ let animationStyle = {};
135
131
 
136
132
  if (animation) {
137
133
  // By calling `css`, emotion injects the required CSS into the document head.
@@ -143,7 +139,7 @@ var UncontrolledCollapsibleMotion = function UncontrolledCollapsibleMotion(props
143
139
  }
144
140
 
145
141
  return props.children({
146
- isOpen: isOpen,
142
+ isOpen,
147
143
  containerStyles: _objectSpread(_objectSpread({}, containerStyles), animationStyle),
148
144
  toggle: animationToggle,
149
145
  registerContentNode: registerContentNode
@@ -162,8 +158,8 @@ UncontrolledCollapsibleMotion.propTypes = process.env.NODE_ENV !== "production"
162
158
  UncontrolledCollapsibleMotion.displayName = 'UncontrolledCollapsibleMotion';
163
159
  UncontrolledCollapsibleMotion.defaultProps = defaultProps;
164
160
 
165
- var CollapsibleMotion = function CollapsibleMotion(props) {
166
- var isControlledComponent = !isNil(props.isClosed);
161
+ const CollapsibleMotion = props => {
162
+ const isControlledComponent = !isNil(props.isClosed);
167
163
 
168
164
  if (isControlledComponent) {
169
165
  return jsx(ControlledCollapsibleMotion, _objectSpread({}, props));
@@ -184,6 +180,6 @@ CollapsibleMotion.defaultProps = defaultProps;
184
180
  var CollapsibleMotion$1 = CollapsibleMotion;
185
181
 
186
182
  // NOTE: This string will be replaced on build time with the package version.
187
- var version = "15.15.0";
183
+ var version = "16.0.0";
188
184
 
189
185
  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": "15.15.0",
4
+ "version": "16.0.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": "15.15.0",
25
- "@commercetools-uikit/utils": "15.15.0",
24
+ "@commercetools-uikit/hooks": "16.0.0",
25
+ "@commercetools-uikit/utils": "16.0.0",
26
26
  "@emotion/react": "^11.10.5",
27
27
  "@emotion/styled": "^11.10.5",
28
28
  "lodash": "4.17.21",