@commercetools-uikit/collapsible-motion 12.2.4 → 12.2.5

package/README.md

@@ -65,10 +65,24 @@ export default Example;
 
 ## Properties
 
-| Props             | Type     | Required | Default | Description                                                                                                                                                                                                                                                                                                                        |
-| ----------------- | -------- | :------: | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children`        | `func`   |    ✅    |         | A render function, called with the following named arguments: `isOpen` (boolean), `toggle` (function),&#xA;`containerStyles` (css-in-js object), `registerContentNode` (React reference to be used on the animated container).&#xA;<br/>&#xA;Siganture: `({ isOpen, containerStyles, toggle, registerContentNode }) => React.node` |
-| `isClosed`        | `bool`   |          |         | Determines the state of the toggle `isOpen`. Setting this prop will make the component **controlled**                                                                                                                                                                                                                              |
-| `onToggle`        | `func`   |          |         | A callback function called when the `toggle` function is called. This prop is required when the component is **controlled**.                                                                                                                                                                                                       |
-| `minHeight`       | `number` |          | `0`     | The minimal height of the container being animated.                                                                                                                                                                                                                                                                                |
-| `isDefaultClosed` | `bool`   |          |         | The initial value to the internal toggle state `isOpen`.                                                                                                                                                                                                                                                                           |
+| Props             | Type                                                 | Required | Default | Description                                                                                                                                                                                                                                                                                                                        |
+| ----------------- | ---------------------------------------------------- | :------: | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children`        | `Function`<br/>[See signature.](#signature-children) |    ✅    |         | A render function, called with the following named arguments: `isOpen` (boolean), `toggle` (function),&#xA;`containerStyles` (css-in-js object), `registerContentNode` (React reference to be used on the animated container).&#xA;<br/>&#xA;Siganture: `({ isOpen, containerStyles, toggle, registerContentNode }) => React.node` |
+| `isClosed`        | `boolean`                                            |          |         | Determines the state of the toggle `isOpen`. Setting this prop will make the component **controlled**                                                                                                                                                                                                                              |
+| `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**.                                                                                                                                                                                                       |
+| `minHeight`       | `number`                                             |          | `0`     | The minimal height of the container being animated.                                                                                                                                                                                                                                                                                |
+| `isDefaultClosed` | `boolean`                                            |          |         | The initial value to the internal toggle state `isOpen`.                                                                                                                                                                                                                                                                           |
+
+## Signatures
+
+### Signature `children`
+
+```ts
+(options: TRenderFunctionOptions) => ReactNode;
+```
+
+### Signature `onToggle`
+
+```ts
+() => void
+```

package/dist/commercetools-uikit-collapsible-motion.cjs.d.ts

@@ -0,0 +1,2 @@
+export * from "./declarations/src/index";
+export { default } from "./declarations/src/index";

package/dist/commercetools-uikit-collapsible-motion.cjs.dev.js

@@ -13,7 +13,7 @@ var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/obje
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
 var _taggedTemplateLiteral = require('@babel/runtime-corejs3/helpers/taggedTemplateLiteral');
-var PropTypes = require('prop-types');
+var _pt = require('prop-types');
 var react$1 = require('react');
 var utils = require('@commercetools-uikit/utils');
 var react = require('@emotion/react');
@@ -31,7 +31,7 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
 var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
 var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
 var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
-var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var _pt__default = /*#__PURE__*/_interopDefault(_pt);
 var isNil__default = /*#__PURE__*/_interopDefault(isNil);
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
@@ -39,38 +39,6 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 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; }
 
 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; }
-var collapsibleMotionPropTypes = process.env.NODE_ENV !== "production" ? {
-  /**
-   * 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`
-   */
-  children: PropTypes__default["default"].func.isRequired,
-
-  /**
-   * Determines the state of the toggle `isOpen`. Setting this prop will make the component **controlled**
-   */
-  // eslint-disable-next-line react/no-unused-prop-types
-  isClosed: PropTypes__default["default"].bool,
-
-  /**
-   * A callback function called when the `toggle` function is called. This prop is required when the component is **controlled**.
-   */
-  // eslint-disable-next-line react/no-unused-prop-types
-  onToggle: PropTypes__default["default"].func,
-
-  /**
-   * The minimal height of the container being animated.
-   */
-  minHeight: PropTypes__default["default"].number,
-
-  /**
-   *The initial value to the internal toggle state `isOpen`.
-   */
-  // eslint-disable-next-line react/no-unused-prop-types
-  isDefaultClosed: PropTypes__default["default"].bool
-} : {};
 var defaultProps = {
   minHeight: 0
 };
@@ -88,24 +56,25 @@ var createOpeningAnimation = function createOpeningAnimation(height) {
   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);
 };
 
-var createClosingAnimation = function createClosingAnimation(height, minHeight) {
+var createClosingAnimation = function createClosingAnimation(height) {
+  var minHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
   return react.keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    from { height: ", "px; }\n    to { height: ", "; overflow: hidden; visibility: ", "; }\n  "])), height, getMinHeight(minHeight), getVisibility(minHeight));
 };
 
-var useToggleAnimation = function useToggleAnimation(isOpen, toggle, minHeight) {
+var useToggleAnimation = function useToggleAnimation(isOpen, toggle) {
+  var minHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
   var nodeRef = react$1.useRef();
   var animationRef = react$1.useRef(null);
   var prevIsOpen = hooks.usePrevious(isOpen);
   react$1.useEffect(function () {
     process.env.NODE_ENV !== "production" ? utils.warning(nodeRef.current, 'You need to call `registerContentNode` in order to use this component') : void 0;
   }, // to match the componentDidMount behaviour
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   [nodeRef]);
   var handleToggle = react$1.useCallback(function () {
     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,
     // so we can animate between the height and 0
 
-    toggle();
+    toggle && toggle();
   }, [nodeRef, toggle]);
   var containerStyles = isOpen ? {
     height: 'auto'
@@ -115,7 +84,7 @@ var useToggleAnimation = function useToggleAnimation(isOpen, toggle, minHeight)
     visibility: getVisibility(minHeight)
   }; // if state has changed
 
-  if (typeof prevIsOpen !== 'undefined' && prevIsOpen !== isOpen) {
+  if (typeof prevIsOpen !== 'undefined' && prevIsOpen !== isOpen && nodeRef.current) {
     animationRef.current = isOpen ? createOpeningAnimation(nodeRef.current.clientHeight, minHeight) : createClosingAnimation(nodeRef.current.clientHeight, minHeight);
   }
 
@@ -138,7 +107,7 @@ var ControlledCollapsibleMotion = function ControlledCollapsibleMotion(props) {
       if (animation) {
         // By calling `css`, emotion injects the required CSS into the document head.
         // eslint-disable-next-line no-unused-expressions
-        css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            animation: ", " 200ms forwards;\n          "])), animation);
+        css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            animation: ", " 200ms\n              forwards;\n          "])), animation);
         animationStyle = {
           animation: "".concat(animation.name, " 200ms forwards")
         };
@@ -154,8 +123,14 @@ var ControlledCollapsibleMotion = function ControlledCollapsibleMotion(props) {
   });
 };
 
+ControlledCollapsibleMotion.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: _pt__default["default"].func.isRequired,
+  isClosed: _pt__default["default"].bool,
+  onToggle: _pt__default["default"].func,
+  minHeight: _pt__default["default"].number,
+  isDefaultClosed: _pt__default["default"].bool
+} : {};
 ControlledCollapsibleMotion.displayName = 'ControlledCollapsibleMotion';
-ControlledCollapsibleMotion.propTypes = process.env.NODE_ENV !== "production" ? collapsibleMotionPropTypes : {};
 
 var UncontrolledCollapsibleMotion = function UncontrolledCollapsibleMotion(props) {
   var _useToggleState = hooks.useToggleState(!props.isDefaultClosed),
@@ -178,7 +153,7 @@ var UncontrolledCollapsibleMotion = function UncontrolledCollapsibleMotion(props
       if (animation) {
         // By calling `css`, emotion injects the required CSS into the document head.
         // eslint-disable-next-line no-unused-expressions
-        css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n            animation: ", " 200ms forwards;\n          "])), animation);
+        css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n            animation: ", " 200ms\n              forwards;\n          "])), animation);
         animationStyle = {
           animation: "".concat(animation.name, " 200ms forwards")
         };
@@ -194,9 +169,15 @@ var UncontrolledCollapsibleMotion = function UncontrolledCollapsibleMotion(props
   });
 };
 
+UncontrolledCollapsibleMotion.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: _pt__default["default"].func.isRequired,
+  isClosed: _pt__default["default"].bool,
+  onToggle: _pt__default["default"].func,
+  minHeight: _pt__default["default"].number,
+  isDefaultClosed: _pt__default["default"].bool
+} : {};
 UncontrolledCollapsibleMotion.displayName = 'UncontrolledCollapsibleMotion';
 UncontrolledCollapsibleMotion.defaultProps = defaultProps;
-UncontrolledCollapsibleMotion.propTypes = process.env.NODE_ENV !== "production" ? collapsibleMotionPropTypes : {};
 
 var CollapsibleMotion = function CollapsibleMotion(props) {
   var isControlledComponent = !isNil__default["default"](props.isClosed);
@@ -208,13 +189,19 @@ var CollapsibleMotion = function CollapsibleMotion(props) {
   return jsxRuntime.jsx(UncontrolledCollapsibleMotion, _objectSpread({}, props));
 };
 
+CollapsibleMotion.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: _pt__default["default"].func.isRequired,
+  isClosed: _pt__default["default"].bool,
+  onToggle: _pt__default["default"].func,
+  minHeight: _pt__default["default"].number,
+  isDefaultClosed: _pt__default["default"].bool
+} : {};
 CollapsibleMotion.displayName = 'CollapsibleMotion';
 CollapsibleMotion.defaultProps = defaultProps;
-CollapsibleMotion.propTypes = process.env.NODE_ENV !== "production" ? collapsibleMotionPropTypes : {};
 var CollapsibleMotion$1 = CollapsibleMotion;
 
-// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
-var version = '12.2.4';
+// NOTE: This string will be replaced on build time with the package version.
+var version = "12.2.5";
 
 exports["default"] = CollapsibleMotion$1;
 exports.version = version;

package/dist/commercetools-uikit-collapsible-motion.cjs.prod.js

@@ -55,22 +55,23 @@ var createOpeningAnimation = function createOpeningAnimation(height) {
   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);
 };
 
-var createClosingAnimation = function createClosingAnimation(height, minHeight) {
+var createClosingAnimation = function createClosingAnimation(height) {
+  var minHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
   return react.keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    from { height: ", "px; }\n    to { height: ", "; overflow: hidden; visibility: ", "; }\n  "])), height, getMinHeight(minHeight), getVisibility(minHeight));
 };
 
-var useToggleAnimation = function useToggleAnimation(isOpen, toggle, minHeight) {
+var useToggleAnimation = function useToggleAnimation(isOpen, toggle) {
+  var minHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
   var nodeRef = react$1.useRef();
   var animationRef = react$1.useRef(null);
   var prevIsOpen = hooks.usePrevious(isOpen);
   react$1.useEffect(function () {
   }, // to match the componentDidMount behaviour
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   [nodeRef]);
   var handleToggle = react$1.useCallback(function () {
     // so we can animate between the height and 0
 
-    toggle();
+    toggle && toggle();
   }, [nodeRef, toggle]);
   var containerStyles = isOpen ? {
     height: 'auto'
@@ -80,7 +81,7 @@ var useToggleAnimation = function useToggleAnimation(isOpen, toggle, minHeight)
     visibility: getVisibility(minHeight)
   }; // if state has changed
 
-  if (typeof prevIsOpen !== 'undefined' && prevIsOpen !== isOpen) {
+  if (typeof prevIsOpen !== 'undefined' && prevIsOpen !== isOpen && nodeRef.current) {
     animationRef.current = isOpen ? createOpeningAnimation(nodeRef.current.clientHeight, minHeight) : createClosingAnimation(nodeRef.current.clientHeight, minHeight);
   }
 
@@ -103,7 +104,7 @@ var ControlledCollapsibleMotion = function ControlledCollapsibleMotion(props) {
       if (animation) {
         // By calling `css`, emotion injects the required CSS into the document head.
         // eslint-disable-next-line no-unused-expressions
-        css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            animation: ", " 200ms forwards;\n          "])), animation);
+        css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            animation: ", " 200ms\n              forwards;\n          "])), animation);
         animationStyle = {
           animation: "".concat(animation.name, " 200ms forwards")
         };
@@ -119,8 +120,8 @@ var ControlledCollapsibleMotion = function ControlledCollapsibleMotion(props) {
   });
 };
 
-ControlledCollapsibleMotion.displayName = 'ControlledCollapsibleMotion';
 ControlledCollapsibleMotion.propTypes = {};
+ControlledCollapsibleMotion.displayName = 'ControlledCollapsibleMotion';
 
 var UncontrolledCollapsibleMotion = function UncontrolledCollapsibleMotion(props) {
   var _useToggleState = hooks.useToggleState(!props.isDefaultClosed),
@@ -143,7 +144,7 @@ var UncontrolledCollapsibleMotion = function UncontrolledCollapsibleMotion(props
       if (animation) {
         // By calling `css`, emotion injects the required CSS into the document head.
         // eslint-disable-next-line no-unused-expressions
-        css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n            animation: ", " 200ms forwards;\n          "])), animation);
+        css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n            animation: ", " 200ms\n              forwards;\n          "])), animation);
         animationStyle = {
           animation: "".concat(animation.name, " 200ms forwards")
         };
@@ -159,9 +160,9 @@ var UncontrolledCollapsibleMotion = function UncontrolledCollapsibleMotion(props
   });
 };
 
+UncontrolledCollapsibleMotion.propTypes = {};
 UncontrolledCollapsibleMotion.displayName = 'UncontrolledCollapsibleMotion';
 UncontrolledCollapsibleMotion.defaultProps = defaultProps;
-UncontrolledCollapsibleMotion.propTypes = {};
 
 var CollapsibleMotion = function CollapsibleMotion(props) {
   var isControlledComponent = !isNil__default["default"](props.isClosed);
@@ -173,13 +174,13 @@ var CollapsibleMotion = function CollapsibleMotion(props) {
   return jsxRuntime.jsx(UncontrolledCollapsibleMotion, _objectSpread({}, props));
 };
 
+CollapsibleMotion.propTypes = {};
 CollapsibleMotion.displayName = 'CollapsibleMotion';
 CollapsibleMotion.defaultProps = defaultProps;
-CollapsibleMotion.propTypes = {};
 var CollapsibleMotion$1 = CollapsibleMotion;
 
-// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
-var version = '12.2.4';
+// NOTE: This string will be replaced on build time with the package version.
+var version = "12.2.5";
 
 exports["default"] = CollapsibleMotion$1;
 exports.version = version;

package/dist/commercetools-uikit-collapsible-motion.esm.js

@@ -9,7 +9,7 @@ import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object
 import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
 import _slicedToArray from '@babel/runtime-corejs3/helpers/esm/slicedToArray';
 import _taggedTemplateLiteral from '@babel/runtime-corejs3/helpers/esm/taggedTemplateLiteral';
-import PropTypes from 'prop-types';
+import _pt from 'prop-types';
 import { useRef, useEffect, useCallback } from 'react';
 import { warning } from '@commercetools-uikit/utils';
 import { ClassNames, keyframes } from '@emotion/react';
@@ -22,38 +22,6 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 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; }
 
 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; }
-var collapsibleMotionPropTypes = process.env.NODE_ENV !== "production" ? {
-  /**
-   * 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`
-   */
-  children: PropTypes.func.isRequired,
-
-  /**
-   * Determines the state of the toggle `isOpen`. Setting this prop will make the component **controlled**
-   */
-  // eslint-disable-next-line react/no-unused-prop-types
-  isClosed: PropTypes.bool,
-
-  /**
-   * A callback function called when the `toggle` function is called. This prop is required when the component is **controlled**.
-   */
-  // eslint-disable-next-line react/no-unused-prop-types
-  onToggle: PropTypes.func,
-
-  /**
-   * The minimal height of the container being animated.
-   */
-  minHeight: PropTypes.number,
-
-  /**
-   *The initial value to the internal toggle state `isOpen`.
-   */
-  // eslint-disable-next-line react/no-unused-prop-types
-  isDefaultClosed: PropTypes.bool
-} : {};
 var defaultProps = {
   minHeight: 0
 };
@@ -71,24 +39,25 @@ var createOpeningAnimation = function createOpeningAnimation(height) {
   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);
 };
 
-var createClosingAnimation = function createClosingAnimation(height, minHeight) {
+var createClosingAnimation = function createClosingAnimation(height) {
+  var minHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
   return keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    from { height: ", "px; }\n    to { height: ", "; overflow: hidden; visibility: ", "; }\n  "])), height, getMinHeight(minHeight), getVisibility(minHeight));
 };
 
-var useToggleAnimation = function useToggleAnimation(isOpen, toggle, minHeight) {
+var useToggleAnimation = function useToggleAnimation(isOpen, toggle) {
+  var minHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
   var nodeRef = useRef();
   var animationRef = useRef(null);
   var prevIsOpen = usePrevious(isOpen);
   useEffect(function () {
     process.env.NODE_ENV !== "production" ? warning(nodeRef.current, 'You need to call `registerContentNode` in order to use this component') : void 0;
   }, // to match the componentDidMount behaviour
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   [nodeRef]);
   var handleToggle = useCallback(function () {
     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,
     // so we can animate between the height and 0
 
-    toggle();
+    toggle && toggle();
   }, [nodeRef, toggle]);
   var containerStyles = isOpen ? {
     height: 'auto'
@@ -98,7 +67,7 @@ var useToggleAnimation = function useToggleAnimation(isOpen, toggle, minHeight)
     visibility: getVisibility(minHeight)
   }; // if state has changed
 
-  if (typeof prevIsOpen !== 'undefined' && prevIsOpen !== isOpen) {
+  if (typeof prevIsOpen !== 'undefined' && prevIsOpen !== isOpen && nodeRef.current) {
     animationRef.current = isOpen ? createOpeningAnimation(nodeRef.current.clientHeight, minHeight) : createClosingAnimation(nodeRef.current.clientHeight, minHeight);
   }
 
@@ -121,7 +90,7 @@ var ControlledCollapsibleMotion = function ControlledCollapsibleMotion(props) {
       if (animation) {
         // By calling `css`, emotion injects the required CSS into the document head.
         // eslint-disable-next-line no-unused-expressions
-        css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            animation: ", " 200ms forwards;\n          "])), animation);
+        css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            animation: ", " 200ms\n              forwards;\n          "])), animation);
         animationStyle = {
           animation: "".concat(animation.name, " 200ms forwards")
         };
@@ -137,8 +106,14 @@ var ControlledCollapsibleMotion = function ControlledCollapsibleMotion(props) {
   });
 };
 
+ControlledCollapsibleMotion.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: _pt.func.isRequired,
+  isClosed: _pt.bool,
+  onToggle: _pt.func,
+  minHeight: _pt.number,
+  isDefaultClosed: _pt.bool
+} : {};
 ControlledCollapsibleMotion.displayName = 'ControlledCollapsibleMotion';
-ControlledCollapsibleMotion.propTypes = process.env.NODE_ENV !== "production" ? collapsibleMotionPropTypes : {};
 
 var UncontrolledCollapsibleMotion = function UncontrolledCollapsibleMotion(props) {
   var _useToggleState = useToggleState(!props.isDefaultClosed),
@@ -161,7 +136,7 @@ var UncontrolledCollapsibleMotion = function UncontrolledCollapsibleMotion(props
       if (animation) {
         // By calling `css`, emotion injects the required CSS into the document head.
         // eslint-disable-next-line no-unused-expressions
-        css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n            animation: ", " 200ms forwards;\n          "])), animation);
+        css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n            animation: ", " 200ms\n              forwards;\n          "])), animation);
         animationStyle = {
           animation: "".concat(animation.name, " 200ms forwards")
         };
@@ -177,9 +152,15 @@ var UncontrolledCollapsibleMotion = function UncontrolledCollapsibleMotion(props
   });
 };
 
+UncontrolledCollapsibleMotion.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: _pt.func.isRequired,
+  isClosed: _pt.bool,
+  onToggle: _pt.func,
+  minHeight: _pt.number,
+  isDefaultClosed: _pt.bool
+} : {};
 UncontrolledCollapsibleMotion.displayName = 'UncontrolledCollapsibleMotion';
 UncontrolledCollapsibleMotion.defaultProps = defaultProps;
-UncontrolledCollapsibleMotion.propTypes = process.env.NODE_ENV !== "production" ? collapsibleMotionPropTypes : {};
 
 var CollapsibleMotion = function CollapsibleMotion(props) {
   var isControlledComponent = !isNil(props.isClosed);
@@ -191,12 +172,18 @@ var CollapsibleMotion = function CollapsibleMotion(props) {
   return jsx(UncontrolledCollapsibleMotion, _objectSpread({}, props));
 };
 
+CollapsibleMotion.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: _pt.func.isRequired,
+  isClosed: _pt.bool,
+  onToggle: _pt.func,
+  minHeight: _pt.number,
+  isDefaultClosed: _pt.bool
+} : {};
 CollapsibleMotion.displayName = 'CollapsibleMotion';
 CollapsibleMotion.defaultProps = defaultProps;
-CollapsibleMotion.propTypes = process.env.NODE_ENV !== "production" ? collapsibleMotionPropTypes : {};
 var CollapsibleMotion$1 = CollapsibleMotion;
 
-// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
-var version = '12.2.4';
+// NOTE: This string will be replaced on build time with the package version.
+var version = "12.2.5";
 
 export { CollapsibleMotion$1 as default, version };

package/dist/declarations/src/collapsible-motion.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode, CSSProperties, LegacyRef } from 'react';
+declare type TContainerStyles = {
+    height?: string | number;
+    overflow?: string;
+    visibility?: string;
+    name?: string;
+    animation?: string;
+} & CSSProperties;
+declare type TRenderFunctionOptions = {
+    isOpen: boolean;
+    containerStyles: TContainerStyles;
+    toggle: () => void;
+    registerContentNode: TNodeRefObject;
+};
+export declare type TCollapsibleMotionProps = {
+    children: (options: TRenderFunctionOptions) => ReactNode;
+    isClosed?: boolean;
+    onToggle?: () => void;
+    minHeight?: number;
+    isDefaultClosed?: boolean;
+};
+declare type TNodeRefObject = {
+    clientHeight: number;
+} & LegacyRef<HTMLDivElement>;
+declare const CollapsibleMotion: {
+    (props: TCollapsibleMotionProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+    defaultProps: Pick<TCollapsibleMotionProps, "minHeight">;
+};
+export default CollapsibleMotion;

package/dist/declarations/src/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './collapsible-motion';
+export { default as version } from './version';

package/dist/declarations/src/version.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "__@UI_KIT_PACKAGE/VERSION_OF_RELEASE__";
+export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/collapsible-motion",
   "description": "A component which allows building collapsible elements with an arbitrary height.",
-  "version": "12.2.4",
+  "version": "12.2.5",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -9,24 +9,27 @@
     "directory": "packages/components/collapsible-motion"
   },
   "homepage": "https://uikit.commercetools.com",
-  "keywords": ["javascript", "design system", "react", "uikit"],
+  "keywords": [
+    "javascript",
+    "design system",
+    "react",
+    "uikit"
+  ],
   "license": "MIT",
-  "private": false,
   "publishConfig": {
     "access": "public"
   },
   "sideEffects": false,
   "main": "dist/commercetools-uikit-collapsible-motion.cjs.js",
   "module": "dist/commercetools-uikit-collapsible-motion.esm.js",
-  "files": ["dist"],
-  "scripts": {
-    "prepare": "../../../scripts/version.js replace"
-  },
+  "files": [
+    "dist"
+  ],
   "dependencies": {
-    "@babel/runtime": "7.15.4",
-    "@babel/runtime-corejs3": "7.15.4",
-    "@commercetools-uikit/hooks": "12.2.3",
-    "@commercetools-uikit/utils": "12.2.0",
+    "@babel/runtime": "7.16.3",
+    "@babel/runtime-corejs3": "7.16.3",
+    "@commercetools-uikit/hooks": "12.2.5",
+    "@commercetools-uikit/utils": "12.2.5",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
     "lodash": "4.17.21",