@semcore/animation - npm Package Compare versions

Comparing version 1.6.2 to 1.7.0

CHANGELOG.md

@@ -5,2 +5,12 @@ # Changelog
 
+## [1.7.0] - 2022-10-21
+
+### Added
+
+- Added a property that removes the `overflow=hidden` setting.
+
+### Changed
+
+- Returning the original `overflow` after the animation has passed.
+
 ## [1.6.2] - 2022-10-20
@@ -7,0 +17,0 @@

lib/cjs/Animation.js

@@ -49,15 +49,15 @@ "use strict";
 /*__inner_css_start__*/
-".___SAnimation_pe1rk_gg_ {\n  animation-fill-mode: both;\n  animation-timing-function: ease-out;\n  animation-duration: var(--durationFinalize_pe1rk);\n  animation-delay: var(--delayFinalize_pe1rk);\n  animation-name: var(--keyframesFinalize_pe1rk);\n}\n.___SAnimation_pe1rk_gg_.__visible_pe1rk_gg_ {\n  animation-duration: var(--durationInitialize_pe1rk);\n  animation-delay: var(--delayInitialize_pe1rk);\n  animation-name: var(--keyframesInitialize_pe1rk);\n}\n@media (prefers-reduced-motion) {\n  .___SAnimation_pe1rk_gg_ {\n    animation-timing-function: step-end;\n    animation-iteration-count: 1;\n  }\n  .___SAnimation_pe1rk_gg_.__visible_pe1rk_gg_ {\n    animation-timing-function: step-end;\n    animation-iteration-count: 1;\n  }\n}\n"
+".___SAnimation_1repd_gg_ {\n  animation-fill-mode: both;\n  animation-timing-function: ease-out;\n  animation-duration: var(--durationFinalize_1repd);\n  animation-delay: var(--delayFinalize_1repd);\n  animation-name: var(--keyframesFinalize_1repd);\n}\n.___SAnimation_1repd_gg_.__visible_1repd_gg_ {\n  animation-duration: var(--durationInitialize_1repd);\n  animation-delay: var(--delayInitialize_1repd);\n  animation-name: var(--keyframesInitialize_1repd);\n}\n@media (prefers-reduced-motion) {\n  .___SAnimation_1repd_gg_ {\n    animation-timing-function: step-end;\n    animation-iteration-count: 1;\n  }\n  .___SAnimation_1repd_gg_.__visible_1repd_gg_ {\n    animation-timing-function: step-end;\n    animation-iteration-count: 1;\n  }\n}\n"
 /*__inner_css_end__*/
-, "pe1rk_gg_")
+, "1repd_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SAnimation": "___SAnimation_pe1rk_gg_",
-  "--durationFinalize": "--durationFinalize_pe1rk",
-  "--delayFinalize": "--delayFinalize_pe1rk",
-  "--keyframesFinalize": "--keyframesFinalize_pe1rk",
-  "_visible": "__visible_pe1rk_gg_",
-  "--durationInitialize": "--durationInitialize_pe1rk",
-  "--delayInitialize": "--delayInitialize_pe1rk",
-  "--keyframesInitialize": "--keyframesInitialize_pe1rk"
+  "__SAnimation": "___SAnimation_1repd_gg_",
+  "--durationFinalize": "--durationFinalize_1repd",
+  "--delayFinalize": "--delayFinalize_1repd",
+  "--keyframesFinalize": "--keyframesFinalize_1repd",
+  "_visible": "__visible_1repd_gg_",
+  "--durationInitialize": "--durationInitialize_1repd",
+  "--delayInitialize": "--delayInitialize_1repd",
+  "--keyframesInitialize": "--keyframesInitialize_1repd"
 });
@@ -64,0 +64,0 @@

lib/cjs/Collapse.js

@@ -24,3 +24,3 @@ "use strict";
 
-var _excluded = ["onAnimationStart", "onAnimationEnd"];
+var _excluded = ["onAnimationStart", "onAnimationEnd", "overflowHidden"];
 
@@ -39,10 +39,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 /*__inner_css_start__*/
-"\n  @keyframes enter_9m8uw {\n    from {\n      overflow: hidden;\n      height: 0;\n    }\n    to {\n      height: var(--height_9m8uw);\n    }\n  }\n\n  @keyframes exit_9m8uw {\n    from {\n      height: var(--height_9m8uw);\n    }\n    to {\n      height: 0;\n    }\n  }\n"
+"\n  @keyframes enter_1sf7d {\n    from {\n      overflow: hidden;\n      height: 0;\n    }\n    to {\n      height: var(--height_1sf7d);\n    }\n  }\n\n  @keyframes exit_1sf7d {\n    from {\n      height: var(--height_1sf7d);\n    }\n    to {\n      height: 0;\n    }\n  }\n"
 /*__inner_css_end__*/
-, "9m8uw_gg_")
+, "1sf7d_gg_")
 /*__reshadow_css_end__*/
 , {
-  "@enter": "enter_9m8uw",
-  "--height": "--height_9m8uw",
-  "@exit": "exit_9m8uw"
+  "@enter": "enter_1sf7d",
+  "--height": "--height_1sf7d",
+  "@exit": "exit_1sf7d"
 });
@@ -55,2 +55,4 @@
       onAnimationEnd = _ref2.onAnimationEnd,
+      _ref2$overflowHidden = _ref2.overflowHidden,
+      overflowHidden = _ref2$overflowHidden === void 0 ? true : _ref2$overflowHidden,
       props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
@@ -64,6 +66,12 @@ var SCollapse = _Animation["default"];
 
+  var overflowRef = (0, _react.useRef)('initial');
   var handlerAnimationStart = (0, _react.useCallback)(function (e) {
     if (e.currentTarget !== e.target) return;
     if (onAnimationStart) onAnimationStart(e);
-    e.currentTarget.style.overflow = 'hidden';
+
+    if (overflowHidden) {
+      overflowRef.current = window.getComputedStyle(e.currentTarget).overflow;
+      e.currentTarget.style.overflow = 'hidden';
+    }
+
     setHeightVar(e.currentTarget.scrollHeight + 'px');
@@ -74,3 +82,7 @@ }, []);
     if (onAnimationEnd) onAnimationEnd(e);
-    e.currentTarget.style.overflow = 'initial';
+
+    if (overflowHidden) {
+      e.currentTarget.style.overflow = overflowRef.current;
+    }
+
     setHeightVar('auto');
@@ -77,0 +89,0 @@ }, []);

lib/cjs/FadeInOut.js

@@ -26,9 +26,9 @@ "use strict";
 /*__inner_css_start__*/
-"\n  @keyframes enter_6uw1n {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  @keyframes exit_6uw1n {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n"
+"\n  @keyframes enter_9zx6i {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  @keyframes exit_9zx6i {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n"
 /*__inner_css_end__*/
-, "6uw1n_gg_")
+, "9zx6i_gg_")
 /*__reshadow_css_end__*/
 , {
-  "@enter": "enter_6uw1n",
-  "@exit": "exit_6uw1n"
+  "@enter": "enter_9zx6i",
+  "@exit": "exit_9zx6i"
 });
@@ -35,0 +35,0 @@

lib/cjs/Transform.js

@@ -30,11 +30,11 @@ "use strict";
 /*__inner_css_start__*/
-"\n  @keyframes enter_bmzly {\n    from {\n      transform: var(--transformStart_bmzly);\n    }\n    to {\n      transform: var(--transformEnd_bmzly);\n    }\n  }\n  @keyframes exit_bmzly {\n    from {\n      transform: var(--transformEnd_bmzly);\n    }\n    to {\n      transform: var(--transformStart_bmzly);\n    }\n  }\n"
+"\n  @keyframes enter_8hhrk {\n    from {\n      transform: var(--transformStart_8hhrk);\n    }\n    to {\n      transform: var(--transformEnd_8hhrk);\n    }\n  }\n  @keyframes exit_8hhrk {\n    from {\n      transform: var(--transformEnd_8hhrk);\n    }\n    to {\n      transform: var(--transformStart_8hhrk);\n    }\n  }\n"
 /*__inner_css_end__*/
-, "bmzly_gg_")
+, "8hhrk_gg_")
 /*__reshadow_css_end__*/
 , {
-  "@enter": "enter_bmzly",
-  "--transformStart": "--transformStart_bmzly",
-  "--transformEnd": "--transformEnd_bmzly",
-  "@exit": "exit_bmzly"
+  "@enter": "enter_8hhrk",
+  "--transformStart": "--transformStart_8hhrk",
+  "--transformEnd": "--transformEnd_8hhrk",
+  "@exit": "exit_8hhrk"
 });
@@ -41,0 +41,0 @@

lib/es6/Animation.js

@@ -28,15 +28,15 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 /*__inner_css_start__*/
-".___SAnimation_pe1rk_gg_ {\n  animation-fill-mode: both;\n  animation-timing-function: ease-out;\n  animation-duration: var(--durationFinalize_pe1rk);\n  animation-delay: var(--delayFinalize_pe1rk);\n  animation-name: var(--keyframesFinalize_pe1rk);\n}\n.___SAnimation_pe1rk_gg_.__visible_pe1rk_gg_ {\n  animation-duration: var(--durationInitialize_pe1rk);\n  animation-delay: var(--delayInitialize_pe1rk);\n  animation-name: var(--keyframesInitialize_pe1rk);\n}\n@media (prefers-reduced-motion) {\n  .___SAnimation_pe1rk_gg_ {\n    animation-timing-function: step-end;\n    animation-iteration-count: 1;\n  }\n  .___SAnimation_pe1rk_gg_.__visible_pe1rk_gg_ {\n    animation-timing-function: step-end;\n    animation-iteration-count: 1;\n  }\n}\n"
+".___SAnimation_1repd_gg_ {\n  animation-fill-mode: both;\n  animation-timing-function: ease-out;\n  animation-duration: var(--durationFinalize_1repd);\n  animation-delay: var(--delayFinalize_1repd);\n  animation-name: var(--keyframesFinalize_1repd);\n}\n.___SAnimation_1repd_gg_.__visible_1repd_gg_ {\n  animation-duration: var(--durationInitialize_1repd);\n  animation-delay: var(--delayInitialize_1repd);\n  animation-name: var(--keyframesInitialize_1repd);\n}\n@media (prefers-reduced-motion) {\n  .___SAnimation_1repd_gg_ {\n    animation-timing-function: step-end;\n    animation-iteration-count: 1;\n  }\n  .___SAnimation_1repd_gg_.__visible_1repd_gg_ {\n    animation-timing-function: step-end;\n    animation-iteration-count: 1;\n  }\n}\n"
 /*__inner_css_end__*/
-, "pe1rk_gg_")
+, "1repd_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SAnimation": "___SAnimation_pe1rk_gg_",
-  "--durationFinalize": "--durationFinalize_pe1rk",
-  "--delayFinalize": "--delayFinalize_pe1rk",
-  "--keyframesFinalize": "--keyframesFinalize_pe1rk",
-  "_visible": "__visible_pe1rk_gg_",
-  "--durationInitialize": "--durationInitialize_pe1rk",
-  "--delayInitialize": "--delayInitialize_pe1rk",
-  "--keyframesInitialize": "--keyframesInitialize_pe1rk"
+  "__SAnimation": "___SAnimation_1repd_gg_",
+  "--durationFinalize": "--durationFinalize_1repd",
+  "--delayFinalize": "--delayFinalize_1repd",
+  "--keyframesFinalize": "--keyframesFinalize_1repd",
+  "_visible": "__visible_1repd_gg_",
+  "--durationInitialize": "--durationInitialize_1repd",
+  "--delayInitialize": "--delayInitialize_1repd",
+  "--keyframesInitialize": "--keyframesInitialize_1repd"
 });
@@ -43,0 +43,0 @@

lib/es6/Collapse.js

 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["onAnimationStart", "onAnimationEnd"];
+var _excluded = ["onAnimationStart", "onAnimationEnd", "overflowHidden"];
 
@@ -10,3 +10,3 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, useRef } from 'react';
 import { createBaseComponent, sstyled } from '@semcore/core';
@@ -18,10 +18,10 @@ import Animation from './Animation';
 /*__inner_css_start__*/
-"\n  @keyframes enter_9m8uw {\n    from {\n      overflow: hidden;\n      height: 0;\n    }\n    to {\n      height: var(--height_9m8uw);\n    }\n  }\n\n  @keyframes exit_9m8uw {\n    from {\n      height: var(--height_9m8uw);\n    }\n    to {\n      height: 0;\n    }\n  }\n"
+"\n  @keyframes enter_1sf7d {\n    from {\n      overflow: hidden;\n      height: 0;\n    }\n    to {\n      height: var(--height_1sf7d);\n    }\n  }\n\n  @keyframes exit_1sf7d {\n    from {\n      height: var(--height_1sf7d);\n    }\n    to {\n      height: 0;\n    }\n  }\n"
 /*__inner_css_end__*/
-, "9m8uw_gg_")
+, "1sf7d_gg_")
 /*__reshadow_css_end__*/
 , {
-  "@enter": "enter_9m8uw",
-  "--height": "--height_9m8uw",
-  "@exit": "exit_9m8uw"
+  "@enter": "enter_1sf7d",
+  "--height": "--height_1sf7d",
+  "@exit": "exit_1sf7d"
 });
@@ -34,2 +34,4 @@
       onAnimationEnd = _ref2.onAnimationEnd,
+      _ref2$overflowHidden = _ref2.overflowHidden,
+      overflowHidden = _ref2$overflowHidden === void 0 ? true : _ref2$overflowHidden,
       props = _objectWithoutProperties(_ref2, _excluded);
@@ -44,6 +46,12 @@
 
+  var overflowRef = useRef('initial');
   var handlerAnimationStart = useCallback(function (e) {
     if (e.currentTarget !== e.target) return;
     if (onAnimationStart) onAnimationStart(e);
-    e.currentTarget.style.overflow = 'hidden';
+
+    if (overflowHidden) {
+      overflowRef.current = window.getComputedStyle(e.currentTarget).overflow;
+      e.currentTarget.style.overflow = 'hidden';
+    }
+
     setHeightVar(e.currentTarget.scrollHeight + 'px');
@@ -54,3 +62,7 @@ }, []);
     if (onAnimationEnd) onAnimationEnd(e);
-    e.currentTarget.style.overflow = 'initial';
+
+    if (overflowHidden) {
+      e.currentTarget.style.overflow = overflowRef.current;
+    }
+
     setHeightVar('auto');
@@ -57,0 +69,0 @@ }, []);

lib/es6/FadeInOut.js

@@ -14,9 +14,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /*__inner_css_start__*/
-"\n  @keyframes enter_6uw1n {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  @keyframes exit_6uw1n {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n"
+"\n  @keyframes enter_9zx6i {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  @keyframes exit_9zx6i {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n"
 /*__inner_css_end__*/
-, "6uw1n_gg_")
+, "9zx6i_gg_")
 /*__reshadow_css_end__*/
 , {
-  "@enter": "enter_6uw1n",
-  "@exit": "exit_6uw1n"
+  "@enter": "enter_9zx6i",
+  "@exit": "exit_9zx6i"
 });
@@ -23,0 +23,0 @@

lib/es6/Transform.js

@@ -16,11 +16,11 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /*__inner_css_start__*/
-"\n  @keyframes enter_bmzly {\n    from {\n      transform: var(--transformStart_bmzly);\n    }\n    to {\n      transform: var(--transformEnd_bmzly);\n    }\n  }\n  @keyframes exit_bmzly {\n    from {\n      transform: var(--transformEnd_bmzly);\n    }\n    to {\n      transform: var(--transformStart_bmzly);\n    }\n  }\n"
+"\n  @keyframes enter_8hhrk {\n    from {\n      transform: var(--transformStart_8hhrk);\n    }\n    to {\n      transform: var(--transformEnd_8hhrk);\n    }\n  }\n  @keyframes exit_8hhrk {\n    from {\n      transform: var(--transformEnd_8hhrk);\n    }\n    to {\n      transform: var(--transformStart_8hhrk);\n    }\n  }\n"
 /*__inner_css_end__*/
-, "bmzly_gg_")
+, "8hhrk_gg_")
 /*__reshadow_css_end__*/
 , {
-  "@enter": "enter_bmzly",
-  "--transformStart": "--transformStart_bmzly",
-  "--transformEnd": "--transformEnd_bmzly",
-  "@exit": "exit_bmzly"
+  "@enter": "enter_8hhrk",
+  "--transformStart": "--transformStart_8hhrk",
+  "--transformEnd": "--transformEnd_8hhrk",
+  "@exit": "exit_8hhrk"
 });
@@ -27,0 +27,0 @@

lib/types/index.d.ts

@@ -21,3 +21,9 @@ import { CProps, ReturnEl } from '@semcore/core';
 
-export interface ICollapseProps extends IAnimationProps {}
+export interface ICollapseProps extends IAnimationProps {
+  /**
+   * Add overflow=hidden when passing animation
+   * @default true
+   * */
+  overflowHidden?: boolean;
+}
 
@@ -24,0 +30,0 @@ export interface IFadeInOutProps extends IAnimationProps {}

package.json

 {
   "name": "@semcore/animation",
   "description": "Semrush Animation Component",
-  "version": "1.6.2",
+  "version": "1.7.0",
   "main": "lib/cjs/index.js",
@@ -6,0 +6,0 @@ "module": "lib/es6/index.js",

No alert changes

Improved metrics

Total package byte prevSize

68985

increased by3.61%

Lines of code

672

increased by3.38%

No dependency changes