react-animate-height - npm Package Compare versions

Comparing version 3.2.2 to 3.2.3

CHANGELOG.md

 # Changelog
 
-### v3.2.1
+### v3.2.3
 
+10.11.2023.
+
+**Added**
+
+- Added prop to disable `display: none` when height is set to zero [#16](https://github.com/Stanko/react-animate-height/issues/16).
+
+---
+
+### v3.2.1, v3.2.2
+
 11.07.2022.
@@ -9,3 +19,3 @@
 
-- Added `"type": "module"` to the package.json [#143](https://github.com/Stanko/react-animate-height/issues/143)
+- Added `"type": "module"` to the package.json [#143](https://github.com/Stanko/react-animate-height/issues/143) and hopefully fixed all import/require shenanigans.
 
@@ -12,0 +22,0 @@ ---

dist/cjs/index.d.ts

@@ -23,2 +23,3 @@ import React, { CSSProperties } from 'react';
     delay?: number;
+    disableDisplayNone?: boolean;
     duration?: number;
@@ -25,0 +26,0 @@ easing?: string;

dist/esm/index.d.ts

@@ -23,2 +23,3 @@ import React, { CSSProperties } from 'react';
     delay?: number;
+    disableDisplayNone?: boolean;
     duration?: number;
@@ -25,0 +26,0 @@ easing?: string;

dist/esm/index.js

@@ -13,6 +13,9 @@ import React, { useEffect, useRef, useState } from 'react';
 }
-function hideContent(element, height) {
+function hideContent(element, height, disableDisplayNone) {
     // Check for element?.style is added cause this would fail in tests (react-test-renderer)
     // Read more here: https://github.com/Stanko/react-animate-height/issues/17
-    if (height === 0 && (element === null || element === void 0 ? void 0 : element.style)) {
+    if (height === 0 &&
+        !disableDisplayNone &&
+        (element === null || element === void 0 ? void 0 : element.style) &&
+        (element === null || element === void 0 ? void 0 : element.children.length) > 0) {
         element.style.display = 'none';
@@ -68,2 +71,3 @@ }
     'style',
+    'disableDisplayNone',
 ];
@@ -73,3 +77,3 @@ const AnimateHeight = React.forwardRef((componentProps, ref) => {
     // const AnimateHeight: React.FC<AnimateHeightProps> = (componentProps) => {
-    const { animateOpacity = false, animationStateClasses = {}, applyInlineTransitions = true, children, className = '', contentClassName, delay: userDelay = 0, duration: userDuration = 500, easing = 'ease', height, onHeightAnimationEnd, onHeightAnimationStart, style, contentRef, } = componentProps;
+    const { animateOpacity = false, animationStateClasses = {}, applyInlineTransitions = true, children, className = '', contentClassName, delay: userDelay = 0, disableDisplayNone = false, duration: userDuration = 500, easing = 'ease', height, onHeightAnimationEnd, onHeightAnimationStart, style, contentRef, } = componentProps;
     const divProps = Object.assign({}, componentProps);
@@ -110,3 +114,3 @@ propsToOmitFromDiv.forEach((propKey) => {
         // Hide content if height is 0 (to prevent tabbing into it)
-        hideContent(contentElement.current, currentHeight);
+        hideContent(contentElement.current, currentHeight, disableDisplayNone);
         // This should be explicitly run only on mount
@@ -200,3 +204,3 @@ // eslint-disable-next-line react-hooks/exhaustive-deps
                     // Hide content if height is 0 (to prevent tabbing into it)
-                    hideContent(contentElement.current, timeoutHeight);
+                    hideContent(contentElement.current, timeoutHeight, disableDisplayNone);
                     // Run a callback if it exists
@@ -220,3 +224,3 @@ onHeightAnimationEnd === null || onHeightAnimationEnd === void 0 ? void 0 : onHeightAnimationEnd(timeoutHeight);
                         // Hide content if height is 0 (to prevent tabbing into it)
-                        hideContent(contentElement.current, newHeight); // TODO solve newHeight = 0
+                        hideContent(contentElement.current, newHeight, disableDisplayNone); // TODO solve newHeight = 0
                     }
@@ -223,0 +227,0 @@ // Run a callback if it exists

package.json

 {
   "name": "react-animate-height",
-  "version": "3.2.2",
+  "version": "3.2.3",
   "description": "Lightweight React component for animating height using CSS transitions.",
@@ -30,3 +30,2 @@ "main": "./dist/cjs/index.cjs",
     "build:docs": "esbuild docs/docs.tsx --bundle --tsconfig=tsconfig-demo.json --outdir=docs --minify --sourcemap",
-    "prepublishOnly": "npm run test && npm run build",
     "start:test": "esbuild test/test.tsx test/test.css --bundle --tsconfig=tsconfig-demo.json --serve=8080 --servedir=test --outdir=test/output",
@@ -33,0 +32,0 @@ "test": "node test.js",

README.md

@@ -191,2 +191,6 @@ # React Animate Height
 
+- **disableDisplayNone**: boolean, default: `false`
+
+  By default, library will set `display: none` when height is zero. This prop allows you to disable that behavior and handle it yourself. It is useful when using [auto height](#user-content-animate-height-on-content-change), check [this issue](https://github.com/Stanko/react-animate-height/issues/16) for more info. Please be careful not to break accessibility when using this prop.
+
 Additional props will be passed to the wrapper div, to make adding attrs like `aria-*` easier.
@@ -221,9 +225,7 @@
 
-You can achieve this by using [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
+It is not built in, but you can use `AnimateHeight` and [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to automatically animate height on content change. I created a small example for you here:
 
-Here is an example:
+- [Source code](./docs/auto-height.tsx)
+- [Demo](https://muffinman.io/react-animate-height/#demo-3)
 
-- [demo](https://muffinman.io/react-animate-height/#demo-3)
-- [code](./docs/auto-height.tsx)
-
 ## Gotchas
@@ -230,0 +232,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

47368

increased by2.86%

Lines of code

625

increased by1.63%

Number of lines in readme file

255

increased by0.79%

No dependency changes