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