collapsible-react-component - npm Package Compare versions

Comparing version 2.1.2 to 3.0.0

dist/Collapsible.d.ts

@@ -1,4 +0,4 @@
-import * as React from 'react';
-import type { RevealType } from './RevealType';
-export declare type CollapsibleProps = {
+import { ReactNode } from 'react';
+import type { RevealType } from './revealTypes';
+export type CollapsibleProps = {
     open: boolean;
@@ -8,4 +8,5 @@ revealType?: RevealType;
     onTransitionEnd?: (open: boolean) => void;
-    children?: React.ReactNode;
+    children?: ReactNode;
+    alwaysKeepChildrenMounted?: boolean;
 };
 export declare const Collapsible: React.FunctionComponent<CollapsibleProps>;

dist/index.d.ts

 export * from './Collapsible';
-export * from './RevealType';
+export * from './revealTypes';

dist/index.js

@@ -1,63 +0,3 @@
-var React = require('react');
-
-var styles = {"wrapper":"_1I_qj","is_state_closed":"_1L6Gs","is_state_open":"_2mqKm","is_revealType_bottomFirst":"_2KsIP","in":"_VrGmt","is_revealType_topFirst":"_3DkiG","is_transitioning":"_12f0Z","content":"_2jwZj"};
-
-var transitioningProperty = 'grid-template-rows';
-var Collapsible = function Collapsible(_ref) {
-  var children = _ref.children,
-      open = _ref.open,
-      onTransitionEnd = _ref.onTransitionEnd,
-      onTransitionStart = _ref.onTransitionStart,
-      _ref$revealType = _ref.revealType,
-      revealType = _ref$revealType === void 0 ? 'bottomFirst' : _ref$revealType;
-  var wrapperRef = React.useRef(null);
-
-  var _React$useState = React.useState(false),
-      isTransitioning = _React$useState[0],
-      setIsTransitioning = _React$useState[1];
-
-  var _React$useState2 = React.useState(open),
-      isOpen = _React$useState2[0],
-      setIsOpen = _React$useState2[1];
-
-  var isOpenRef = React.useRef(open);
-  React.useEffect(function () {
-    if (isOpenRef.current === open) {
-      return;
-    }
-
-    isOpenRef.current = open;
-    onTransitionStart === null || onTransitionStart === void 0 ? void 0 : onTransitionStart(open);
-    setIsOpen(open);
-    setIsTransitioning(true);
-  }, [onTransitionStart, open]);
-  var handleTransitionEnd = React.useCallback(function (event) {
-    if (event.propertyName === transitioningProperty && event.target === wrapperRef.current) {
-      onTransitionEnd === null || onTransitionEnd === void 0 ? void 0 : onTransitionEnd(open);
-      setIsOpen(open);
-      setIsTransitioning(false);
-    }
-  }, [open, onTransitionEnd]);
-  var className = React.useMemo(function () {
-    var classNames = [styles.wrapper, isOpen ? styles.is_state_open : styles.is_state_closed, styles["is_revealType_" + revealType]];
-
-    if (isTransitioning) {
-      classNames.push(styles.is_transitioning);
-    }
-
-    return classNames.join(' ');
-  }, [isTransitioning, isOpen, revealType]);
-  return React.createElement("div", {
-    ref: wrapperRef,
-    className: className,
-    "aria-hidden": !open,
-    onTransitionEnd: handleTransitionEnd
-  }, React.createElement("div", {
-    className: styles["in"]
-  }, React.createElement("div", {
-    className: styles.content
-  }, children)));
-};
-
-exports.Collapsible = Collapsible;
+export { Collapsible } from './Collapsible.js';
+export { revealTypes } from './revealTypes.js';
 //# sourceMappingURL=index.js.map

package.json

 {
-  "name": "collapsible-react-component",
-  "version": "2.1.2",
-  "description": "Collapses and expands content with an animation.",
-  "author": "FilipChalupa",
-  "license": "MIT",
-  "repository": "FilipChalupa/collapsible-react-component",
-  "main": "dist/index.js",
-  "module": "dist/index.modern.js",
-  "source": "src/index.tsx",
-  "engines": {
-    "node": ">=16"
-  },
-  "scripts": {
-    "build": "microbundle-crl --no-compress --format modern,cjs",
-    "start": "microbundle-crl watch --no-compress --format modern,cjs",
-    "dev": "npm start",
-    "prepare": "run-s build",
-    "test": "run-s test:unit test:lint test:build",
-    "test:build": "run-s build",
-    "test:lint": "eslint .",
-    "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
-    "test:watch": "react-scripts test --env=jsdom",
-    "predeploy": "cd example && npm install && npm run build",
-    "deploy": "gh-pages -d example/build"
-  },
-  "peerDependencies": {
-    "react": "16 || 17 || 18 || 19"
-  },
-  "devDependencies": {
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.5.0",
-    "@testing-library/user-event": "^7.2.1",
-    "@types/jest": "^25.1.4",
-    "@types/node": "^12.12.38",
-    "@types/react": "^16.9.27",
-    "@types/react-dom": "^16.9.7",
-    "@typescript-eslint/eslint-plugin": "^2.26.0",
-    "@typescript-eslint/parser": "^2.26.0",
-    "babel-eslint": "^10.0.3",
-    "cross-env": "^7.0.2",
-    "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.7.0",
-    "eslint-config-standard": "^14.1.0",
-    "eslint-config-standard-react": "^9.2.0",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-node": "^11.0.0",
-    "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-react": "^7.17.0",
-    "eslint-plugin-standard": "^4.0.1",
-    "gh-pages": "^2.2.0",
-    "microbundle-crl": "^0.13.10",
-    "npm-run-all": "^4.1.5",
-    "prettier": "^2.0.4",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-scripts": "^3.4.1",
-    "typescript": "^3.7.5"
-  },
-  "keywords": [
-    "react",
-    "collapsible",
-    "collapse",
-    "expand",
-    "animation",
-    "react-component"
-  ],
-  "files": [
-    "dist"
-  ]
+	"name": "collapsible-react-component",
+	"version": "3.0.0",
+	"description": "Collapses and expands content with an animation.",
+	"type": "module",
+	"main": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"scripts": {
+		"start": "rollup -c -w",
+		"dev": "npm start",
+		"build": "rollup -c",
+		"prepare": "npm run build",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/FilipChalupa/collapsible-react-component.git"
+	},
+	"keywords": [
+		"react",
+		"collapsible",
+		"collapse",
+		"expand",
+		"animation",
+		"react-component"
+	],
+	"author": {
+		"name": "Filip Chalupa",
+		"email": "[e-mail]",
+		"url": "https://www.npmjs.com/~onset"
+	},
+	"license": "ISC",
+	"devDependencies": {
+		"@rollup/plugin-commonjs": "^25.0.7",
+		"@rollup/plugin-node-resolve": "^15.2.3",
+		"@storybook/addon-essentials": "^7.6.16",
+		"@storybook/addon-interactions": "^7.6.16",
+		"@storybook/addon-links": "^7.6.16",
+		"@storybook/addon-onboarding": "^1.0.11",
+		"@storybook/blocks": "^7.6.16",
+		"@storybook/react": "^7.6.16",
+		"@storybook/react-vite": "^7.6.16",
+		"@storybook/test": "^7.6.16",
+		"@tanstack/react-query": "^5.59.20",
+		"@types/react": "^18.2.57",
+		"@types/react-dom": "^18.2.19",
+		"prettier": "^3.0.3",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"rollup": "^4.2.0",
+		"rollup-plugin-delete": "^2.0.0",
+		"rollup-plugin-peer-deps-external": "^2.2.4",
+		"rollup-plugin-postcss": "^4.0.2",
+		"rollup-plugin-preserve-directives": "^0.3.1",
+		"rollup-plugin-typescript2": "^0.36.0",
+		"storybook": "^7.6.16",
+		"typescript": "^5.3.3",
+		"typescript-plugin-css-modules": "^5.0.2"
+	},
+	"peerDependencies": {
+		"react": "17 || 18 || 19"
+	},
+	"files": [
+		"/dist/"
+	]
 }

README.md

@@ -26,31 +26,31 @@ # Collapsible react component
 const Example = () => {
-  const [open, setOpen] = React.useState(true)
+	const [open, setOpen] = React.useState(true)
 
-  return (
-    <>
-      <button
-        type='button'
-        onClick={() => {
-          setOpen(!open)
-        }}
-      >
-        {open ? 'Close' : 'Open'}
-      </button>
-      <Collapsible
-        open={open}
-        onTransitionStart={(open) => {
-          console.log('Collapsible box used to be', open ? 'open' : 'closed')
-        }}
-        onTransitionEnd={(open) => {
-          console.log('Collapsible box is now', open ? 'open' : 'closed')
-        }}
-        revealType='bottomFirst'
-      >
-        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio, sed
-        labore? Autem laboriosam minima corrupti rem repellat odio reiciendis
-        nihil! Eum natus dolorem atque blanditiis ipsam aperiam. Voluptatem,
-        exercitationem fugit.
-      </Collapsible>
-    </>
-  )
+	return (
+		<>
+			<button
+				type="button"
+				onClick={() => {
+					setOpen(!open)
+				}}
+			>
+				{open ? 'Close' : 'Open'}
+			</button>
+			<Collapsible
+				open={open}
+				onTransitionStart={(open) => {
+					console.log('Collapsible box used to be', open ? 'open' : 'closed')
+				}}
+				onTransitionEnd={(open) => {
+					console.log('Collapsible box is now', open ? 'open' : 'closed')
+				}}
+				revealType="bottomFirst"
+			>
+				Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio, sed
+				labore? Autem laboriosam minima corrupti rem repellat odio reiciendis
+				nihil! Eum natus dolorem atque blanditiis ipsam aperiam. Voluptatem,
+				exercitationem fugit.
+			</Collapsible>
+		</>
+	)
 }
@@ -61,9 +61,10 @@ ```
 
-| Name                | Required | Default       | Type                      | Description                                                                          |
-| ------------------- | -------- | ------------- | ------------------------- | ------------------------------------------------------------------------------------ |
-| `open`              | ✅       | none          | `boolean`                 | Determines wheter the children content should be visible.                            |
-| `children`          | ✅       | none          | `ReactNode`               | Collapsible content.                                                                 |
-| `onTransitionStart` |          | noop          | `(open: boolean) => void` | Callback invoked when transition starts. `open` is the starting state.               |
-| `onTransitionEnd`   |          | noop          | `(open: boolean) => void` | Callback after content is fully expanded or fully closed. `open` is the final state. |
-| `revealType`        |          | `bottomFirst` | `bottomFirst \| topFirst` | Type of transition animation.                                                        |
+| Name                        | Required | Default       | Type                      | Description                                                                          |
+| --------------------------- | -------- | ------------- | ------------------------- | ------------------------------------------------------------------------------------ |
+| `open`                      | ✅       |               | `boolean`                 | Determines whether the children content should be visible.                           |
+| `children`                  | ✅       |               | `ReactNode`               | Collapsible content.                                                                 |
+| `onTransitionStart`         |          | noop          | `(open: boolean) => void` | Callback invoked when transition starts. `open` is the starting state.               |
+| `onTransitionEnd`           |          | noop          | `(open: boolean) => void` | Callback after content is fully expanded or fully closed. `open` is the final state. |
+| `revealType`                |          | `bottomFirst` | `bottomFirst \| topFirst` | Type of transition animation.                                                        |
+| `alwaysKeepChildrenMounted` |          | `false`       | `boolean`                 | If `true` then children won't be unmounted when collapsed.                           |
 
@@ -70,0 +71,0 @@ ## Development

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

25

decreased by-13.79%

Number of package files

15

increased by25%

Number of lines in readme file

85

increased by1.19%

Number of low supply chain risk alerts

0

decreased by-100%

Is type module

Yes

Worsened metrics

Total package byte prevSize

14944

decreased by-24.01%

Lines of code

114

decreased by-30.49%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes