@commercetools-uikit/collapsible-motion 20.4.0 → 20.6.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 (5) hide show
  1. package/README.md +3 -3
  2. package/dist/commercetools-uikit-collapsible-motion.cjs.dev.js +21 -10
  3. package/dist/commercetools-uikit-collapsible-motion.cjs.prod.js +21 -10
  4. package/dist/commercetools-uikit-collapsible-motion.esm.js +21 -10
  5. package/package.json +17 -8
package/README.md CHANGED
@@ -1,5 +1,5 @@
1
1
  <!-- THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -->
2
- <!-- This file is created by the `yarn generate-readme` script. -->
2
+ <!-- This file is created by the `pnpm generate-readme` script. -->
3
3
 
4
4
  # CollapsibleMotion
5
5
 
@@ -21,7 +21,7 @@ Technically, we need to dynamically create the keyframes for this animation.
21
21
  ## Installation
22
22
 
23
23
  ```
24
- yarn add @commercetools-uikit/collapsible-motion
24
+ pnpm add @commercetools-uikit/collapsible-motion
25
25
  ```
26
26
 
27
27
  ```
@@ -31,7 +31,7 @@ npm --save install @commercetools-uikit/collapsible-motion
31
31
  Additionally install the peer dependencies (if not present)
32
32
 
33
33
  ```
34
- yarn add react
34
+ pnpm add react
35
35
  ```
36
36
 
37
37
  ```
package/dist/commercetools-uikit-collapsible-motion.cjs.dev.js CHANGED
@@ -15,7 +15,6 @@ 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');
19
18
  var react$1 = require('react');
20
19
  var utils = require('@commercetools-uikit/utils');
21
20
  var react = require('@emotion/react');
@@ -36,18 +35,24 @@ var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defin
36
35
  var isNil__default = /*#__PURE__*/_interopDefault(isNil);
37
36
 
38
37
  const _excluded = ["minHeight"];
39
- var _templateObject, _templateObject2, _templateObject3, _templateObject4;
40
38
  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; }
41
39
  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; }
42
- const getMinHeight = minHeight => minHeight !== 0 ? "".concat(minHeight, "px") : minHeight;
40
+ const getMinHeight = minHeight => minHeight !== 0 ? `${minHeight}px` : minHeight;
43
41
  const getVisibility = height => height === 0 ? 'hidden' : 'visible';
44
42
  const createOpeningAnimation = function (height) {
45
43
  let minHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
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);
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
+ `;
47
49
  };
48
50
  const createClosingAnimation = function (height) {
49
51
  let minHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
50
- return react.keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n from { height: ", "px; }\n to { height: ", "; overflow: hidden; visibility: ", "; }\n "])), height, getMinHeight(minHeight), getVisibility(minHeight));
52
+ return react.keyframes`
53
+ from { height: ${height}px; }
54
+ to { height: ${getMinHeight(minHeight)}; overflow: hidden; visibility: ${getVisibility(minHeight)}; }
55
+ `;
51
56
  };
52
57
  const useToggleAnimation = function (isOpen, toggle) {
53
58
  let minHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
@@ -94,9 +99,12 @@ const ControlledCollapsibleMotion = props => {
94
99
  if (animation) {
95
100
  // By calling `css`, emotion injects the required CSS into the document head.
96
101
  // eslint-disable-next-line no-unused-expressions
97
- css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n animation: ", " 200ms\n forwards;\n "])), animation);
102
+ css`
103
+ animation: ${animation} 200ms
104
+ forwards;
105
+ `;
98
106
  animationStyle = {
99
- animation: "".concat(animation.name, " 200ms forwards")
107
+ animation: `${animation.name} 200ms forwards`
100
108
  };
101
109
  }
102
110
  return props.children({
@@ -130,9 +138,12 @@ const UncontrolledCollapsibleMotion = _ref2 => {
130
138
  if (animation) {
131
139
  // By calling `css`, emotion injects the required CSS into the document head.
132
140
  // eslint-disable-next-line no-unused-expressions
133
- css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n animation: ", " 200ms\n forwards;\n "])), animation);
141
+ css`
142
+ animation: ${animation} 200ms
143
+ forwards;
144
+ `;
134
145
  animationStyle = {
135
- animation: "".concat(animation.name, " 200ms forwards")
146
+ animation: `${animation.name} 200ms forwards`
136
147
  };
137
148
  }
138
149
  return props.children({
@@ -157,7 +168,7 @@ CollapsibleMotion.displayName = 'CollapsibleMotion';
157
168
  var CollapsibleMotion$1 = CollapsibleMotion;
158
169
 
159
170
  // NOTE: This string will be replaced on build time with the package version.
160
- var version = "20.4.0";
171
+ var version = "20.6.0";
161
172
 
162
173
  exports["default"] = CollapsibleMotion$1;
163
174
  exports.version = version;
package/dist/commercetools-uikit-collapsible-motion.cjs.prod.js CHANGED
@@ -15,7 +15,6 @@ 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');
19
18
  var react$1 = require('react');
20
19
  require('@commercetools-uikit/utils');
21
20
  var react = require('@emotion/react');
@@ -36,18 +35,24 @@ var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defin
36
35
  var isNil__default = /*#__PURE__*/_interopDefault(isNil);
37
36
 
38
37
  const _excluded = ["minHeight"];
39
- var _templateObject, _templateObject2, _templateObject3, _templateObject4;
40
38
  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; }
41
39
  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; }
42
- const getMinHeight = minHeight => minHeight !== 0 ? "".concat(minHeight, "px") : minHeight;
40
+ const getMinHeight = minHeight => minHeight !== 0 ? `${minHeight}px` : minHeight;
43
41
  const getVisibility = height => height === 0 ? 'hidden' : 'visible';
44
42
  const createOpeningAnimation = function (height) {
45
43
  let minHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
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);
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
+ `;
47
49
  };
48
50
  const createClosingAnimation = function (height) {
49
51
  let minHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
50
- return react.keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n from { height: ", "px; }\n to { height: ", "; overflow: hidden; visibility: ", "; }\n "])), height, getMinHeight(minHeight), getVisibility(minHeight));
52
+ return react.keyframes`
53
+ from { height: ${height}px; }
54
+ to { height: ${getMinHeight(minHeight)}; overflow: hidden; visibility: ${getVisibility(minHeight)}; }
55
+ `;
51
56
  };
52
57
  const useToggleAnimation = function (isOpen, toggle) {
53
58
  let minHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
@@ -92,9 +97,12 @@ const ControlledCollapsibleMotion = props => {
92
97
  if (animation) {
93
98
  // By calling `css`, emotion injects the required CSS into the document head.
94
99
  // eslint-disable-next-line no-unused-expressions
95
- css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n animation: ", " 200ms\n forwards;\n "])), animation);
100
+ css`
101
+ animation: ${animation} 200ms
102
+ forwards;
103
+ `;
96
104
  animationStyle = {
97
- animation: "".concat(animation.name, " 200ms forwards")
105
+ animation: `${animation.name} 200ms forwards`
98
106
  };
99
107
  }
100
108
  return props.children({
@@ -128,9 +136,12 @@ const UncontrolledCollapsibleMotion = _ref2 => {
128
136
  if (animation) {
129
137
  // By calling `css`, emotion injects the required CSS into the document head.
130
138
  // eslint-disable-next-line no-unused-expressions
131
- css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n animation: ", " 200ms\n forwards;\n "])), animation);
139
+ css`
140
+ animation: ${animation} 200ms
141
+ forwards;
142
+ `;
132
143
  animationStyle = {
133
- animation: "".concat(animation.name, " 200ms forwards")
144
+ animation: `${animation.name} 200ms forwards`
134
145
  };
135
146
  }
136
147
  return props.children({
@@ -155,7 +166,7 @@ CollapsibleMotion.displayName = 'CollapsibleMotion';
155
166
  var CollapsibleMotion$1 = CollapsibleMotion;
156
167
 
157
168
  // NOTE: This string will be replaced on build time with the package version.
158
- var version = "20.4.0";
169
+ var version = "20.6.0";
159
170
 
160
171
  exports["default"] = CollapsibleMotion$1;
161
172
  exports.version = version;
package/dist/commercetools-uikit-collapsible-motion.esm.js CHANGED
@@ -11,7 +11,6 @@ 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';
15
14
  import { useRef, useEffect, useCallback } from 'react';
16
15
  import { warning } from '@commercetools-uikit/utils';
17
16
  import { ClassNames, keyframes } from '@emotion/react';
@@ -20,18 +19,24 @@ import { useToggleState, usePrevious } from '@commercetools-uikit/hooks';
20
19
  import { jsx } from '@emotion/react/jsx-runtime';
21
20
 
22
21
  const _excluded = ["minHeight"];
23
- var _templateObject, _templateObject2, _templateObject3, _templateObject4;
24
22
  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; }
25
23
  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; }
26
- const getMinHeight = minHeight => minHeight !== 0 ? "".concat(minHeight, "px") : minHeight;
24
+ const getMinHeight = minHeight => minHeight !== 0 ? `${minHeight}px` : minHeight;
27
25
  const getVisibility = height => height === 0 ? 'hidden' : 'visible';
28
26
  const createOpeningAnimation = function (height) {
29
27
  let minHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
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);
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
+ `;
31
33
  };
32
34
  const createClosingAnimation = function (height) {
33
35
  let minHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
34
- return keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n from { height: ", "px; }\n to { height: ", "; overflow: hidden; visibility: ", "; }\n "])), height, getMinHeight(minHeight), getVisibility(minHeight));
36
+ return keyframes`
37
+ from { height: ${height}px; }
38
+ to { height: ${getMinHeight(minHeight)}; overflow: hidden; visibility: ${getVisibility(minHeight)}; }
39
+ `;
35
40
  };
36
41
  const useToggleAnimation = function (isOpen, toggle) {
37
42
  let minHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
@@ -78,9 +83,12 @@ const ControlledCollapsibleMotion = props => {
78
83
  if (animation) {
79
84
  // By calling `css`, emotion injects the required CSS into the document head.
80
85
  // eslint-disable-next-line no-unused-expressions
81
- css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n animation: ", " 200ms\n forwards;\n "])), animation);
86
+ css`
87
+ animation: ${animation} 200ms
88
+ forwards;
89
+ `;
82
90
  animationStyle = {
83
- animation: "".concat(animation.name, " 200ms forwards")
91
+ animation: `${animation.name} 200ms forwards`
84
92
  };
85
93
  }
86
94
  return props.children({
@@ -114,9 +122,12 @@ const UncontrolledCollapsibleMotion = _ref2 => {
114
122
  if (animation) {
115
123
  // By calling `css`, emotion injects the required CSS into the document head.
116
124
  // eslint-disable-next-line no-unused-expressions
117
- css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n animation: ", " 200ms\n forwards;\n "])), animation);
125
+ css`
126
+ animation: ${animation} 200ms
127
+ forwards;
128
+ `;
118
129
  animationStyle = {
119
- animation: "".concat(animation.name, " 200ms forwards")
130
+ animation: `${animation.name} 200ms forwards`
120
131
  };
121
132
  }
122
133
  return props.children({
@@ -141,6 +152,6 @@ CollapsibleMotion.displayName = 'CollapsibleMotion';
141
152
  var CollapsibleMotion$1 = CollapsibleMotion;
142
153
 
143
154
  // NOTE: This string will be replaced on build time with the package version.
144
- var version = "20.4.0";
155
+ var version = "20.6.0";
145
156
 
146
157
  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.4.0",
4
+ "version": "20.6.0",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -9,7 +9,13 @@
9
9
  "directory": "packages/components/collapsible-motion"
10
10
  },
11
11
  "homepage": "https://uikit.commercetools.com",
12
- "keywords": ["javascript", "typescript", "design-system", "react", "uikit"],
12
+ "keywords": [
13
+ "javascript",
14
+ "typescript",
15
+ "design-system",
16
+ "react",
17
+ "uikit"
18
+ ],
13
19
  "license": "MIT",
14
20
  "publishConfig": {
15
21
  "access": "public"
@@ -17,20 +23,23 @@
17
23
  "sideEffects": false,
18
24
  "main": "dist/commercetools-uikit-collapsible-motion.cjs.js",
19
25
  "module": "dist/commercetools-uikit-collapsible-motion.esm.js",
20
- "files": ["dist"],
26
+ "files": [
27
+ "dist"
28
+ ],
21
29
  "dependencies": {
22
30
  "@babel/runtime": "^7.20.13",
23
31
  "@babel/runtime-corejs3": "^7.20.13",
24
- "@commercetools-uikit/hooks": "20.4.0",
25
- "@commercetools-uikit/utils": "20.4.0",
26
32
  "@emotion/react": "^11.10.5",
27
33
  "@emotion/styled": "^11.10.5",
28
- "lodash": "4.17.23"
34
+ "lodash": "4.18.1",
35
+ "@commercetools-uikit/hooks": "^20.6.0",
36
+ "@commercetools-uikit/utils": "^20.6.0"
29
37
  },
30
38
  "devDependencies": {
31
- "react": "19.2.0"
39
+ "react": "19.2.0",
40
+ "@commercetools-uikit/primary-button": "^20.6.0"
32
41
  },
33
42
  "peerDependencies": {
34
43
  "react": "19.x"
35
44
  }
36
- }
45
+ }