@sb1/ffe-collapse-react 100.12.4 → 101.0.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 (8) hide show
  1. package/css/collapse.css +2 -6
  2. package/es/Collapse.js +9 -32
  3. package/es/mergeRefs.js +2 -2
  4. package/es/usePreviousIsOpen.js +3 -3
  5. package/lib/Collapse.js +13 -36
  6. package/lib/mergeRefs.js +2 -2
  7. package/lib/usePreviousIsOpen.js +4 -4
  8. package/package.json +6 -6
package/css/collapse.css CHANGED
@@ -1,17 +1,13 @@
1
1
  .ffe-collapse {
2
- display: -ms-grid;
3
2
  display: grid;
4
- -ms-grid-rows: 0fr;
5
- grid-template-rows: 0fr;
3
+ grid-template-rows: 0fr;
6
4
  transition: grid-template-rows var(--ffe-transition-duration) var(--ffe-ease);
7
- transition: grid-template-rows var(--ffe-transition-duration) var(--ffe-ease), -ms-grid-rows var(--ffe-transition-duration) var(--ffe-ease);
8
5
  }
9
6
  .ffe-collapse--hidden {
10
7
  visibility: hidden;
11
8
  }
12
9
  .ffe-collapse--open {
13
- -ms-grid-rows: 1fr;
14
- grid-template-rows: 1fr;
10
+ grid-template-rows: 1fr;
15
11
  }
16
12
  .ffe-collapse__inner {
17
13
  overflow: hidden;
package/es/Collapse.js CHANGED
@@ -1,46 +1,23 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
- var __rest = (this && this.__rest) || function (s, e) {
13
- var t = {};
14
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
15
- t[p] = s[p];
16
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
17
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
18
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
19
- t[p[i]] = s[p[i]];
20
- }
21
- return t;
22
- };
23
1
  import React, { useRef, useEffect, useState, } from 'react';
24
2
  import classNames from 'classnames';
25
3
  import { mergeRefs } from './mergeRefs';
26
4
  import { usePreviousIsOpen } from './usePreviousIsOpen';
27
- export var Collapse = React.forwardRef(function (_a, ref) {
28
- var className = _a.className, isOpen = _a.isOpen, onRest = _a.onRest, children = _a.children, rest = __rest(_a, ["className", "isOpen", "onRest", "children"]);
29
- var internalRef = useRef(null);
30
- var _b = useState(!isOpen), isHidden = _b[0], setIsHidden = _b[1];
31
- var _c = useState(isOpen), overflowVisible = _c[0], setOverflowVisible = _c[1];
32
- var previousIsOpen = usePreviousIsOpen(isOpen);
33
- useEffect(function () {
5
+ export const Collapse = React.forwardRef(({ className, isOpen, onRest, children, ...rest }, ref) => {
6
+ const internalRef = useRef(null);
7
+ const [isHidden, setIsHidden] = useState(!isOpen);
8
+ const [overflowVisible, setOverflowVisible] = useState(isOpen);
9
+ const previousIsOpen = usePreviousIsOpen(isOpen);
10
+ useEffect(() => {
34
11
  if (typeof previousIsOpen === 'boolean' &&
35
12
  isOpen !== previousIsOpen) {
36
13
  setIsHidden(!isOpen);
37
14
  setOverflowVisible(false);
38
15
  }
39
16
  }, [previousIsOpen, isOpen]);
40
- return (React.createElement("div", __assign({}, rest, { ref: mergeRefs([internalRef, ref]), className: classNames('ffe-collapse', className, {
17
+ return (React.createElement("div", { ...rest, ref: mergeRefs([internalRef, ref]), className: classNames('ffe-collapse', className, {
41
18
  'ffe-collapse--open': isOpen,
42
19
  'ffe-collapse--hidden': isHidden,
43
- }), onTransitionEnd: function (e) {
20
+ }), onTransitionEnd: e => {
44
21
  if (e.target === internalRef.current &&
45
22
  e.propertyName === 'grid-template-rows') {
46
23
  setIsHidden(!isOpen);
@@ -49,7 +26,7 @@ export var Collapse = React.forwardRef(function (_a, ref) {
49
26
  }
50
27
  onRest === null || onRest === void 0 ? void 0 : onRest();
51
28
  }
52
- } }),
29
+ } },
53
30
  React.createElement("div", { className: classNames('ffe-collapse__inner', {
54
31
  'ffe-collapse__inner--visible': overflowVisible,
55
32
  }) }, children)));
package/es/mergeRefs.js CHANGED
@@ -1,6 +1,6 @@
1
1
  export function mergeRefs(refs) {
2
- return function (value) {
3
- refs.forEach(function (ref) {
2
+ return value => {
3
+ refs.forEach(ref => {
4
4
  if (typeof ref === 'function') {
5
5
  ref(value);
6
6
  }
package/es/usePreviousIsOpen.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { useEffect, useRef } from 'react';
2
- export var usePreviousIsOpen = function (isOpen) {
3
- var ref = useRef();
4
- useEffect(function () {
2
+ export const usePreviousIsOpen = (isOpen) => {
3
+ const ref = useRef();
4
+ useEffect(() => {
5
5
  ref.current = isOpen;
6
6
  });
7
7
  return ref.current;
package/lib/Collapse.js CHANGED
@@ -1,15 +1,4 @@
1
1
  "use strict";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
2
  var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
14
3
  if (k2 === undefined) k2 = k;
15
4
  var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -43,43 +32,31 @@ var __importStar = (this && this.__importStar) || (function () {
43
32
  return result;
44
33
  };
45
34
  })();
46
- var __rest = (this && this.__rest) || function (s, e) {
47
- var t = {};
48
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
49
- t[p] = s[p];
50
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
51
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
52
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
53
- t[p[i]] = s[p[i]];
54
- }
55
- return t;
56
- };
57
35
  var __importDefault = (this && this.__importDefault) || function (mod) {
58
36
  return (mod && mod.__esModule) ? mod : { "default": mod };
59
37
  };
60
38
  Object.defineProperty(exports, "__esModule", { value: true });
61
39
  exports.Collapse = void 0;
62
- var react_1 = __importStar(require("react"));
63
- var classnames_1 = __importDefault(require("classnames"));
64
- var mergeRefs_1 = require("./mergeRefs");
65
- var usePreviousIsOpen_1 = require("./usePreviousIsOpen");
66
- exports.Collapse = react_1.default.forwardRef(function (_a, ref) {
67
- var className = _a.className, isOpen = _a.isOpen, onRest = _a.onRest, children = _a.children, rest = __rest(_a, ["className", "isOpen", "onRest", "children"]);
68
- var internalRef = (0, react_1.useRef)(null);
69
- var _b = (0, react_1.useState)(!isOpen), isHidden = _b[0], setIsHidden = _b[1];
70
- var _c = (0, react_1.useState)(isOpen), overflowVisible = _c[0], setOverflowVisible = _c[1];
71
- var previousIsOpen = (0, usePreviousIsOpen_1.usePreviousIsOpen)(isOpen);
72
- (0, react_1.useEffect)(function () {
40
+ const react_1 = __importStar(require("react"));
41
+ const classnames_1 = __importDefault(require("classnames"));
42
+ const mergeRefs_1 = require("./mergeRefs");
43
+ const usePreviousIsOpen_1 = require("./usePreviousIsOpen");
44
+ exports.Collapse = react_1.default.forwardRef(({ className, isOpen, onRest, children, ...rest }, ref) => {
45
+ const internalRef = (0, react_1.useRef)(null);
46
+ const [isHidden, setIsHidden] = (0, react_1.useState)(!isOpen);
47
+ const [overflowVisible, setOverflowVisible] = (0, react_1.useState)(isOpen);
48
+ const previousIsOpen = (0, usePreviousIsOpen_1.usePreviousIsOpen)(isOpen);
49
+ (0, react_1.useEffect)(() => {
73
50
  if (typeof previousIsOpen === 'boolean' &&
74
51
  isOpen !== previousIsOpen) {
75
52
  setIsHidden(!isOpen);
76
53
  setOverflowVisible(false);
77
54
  }
78
55
  }, [previousIsOpen, isOpen]);
79
- return (react_1.default.createElement("div", __assign({}, rest, { ref: (0, mergeRefs_1.mergeRefs)([internalRef, ref]), className: (0, classnames_1.default)('ffe-collapse', className, {
56
+ return (react_1.default.createElement("div", { ...rest, ref: (0, mergeRefs_1.mergeRefs)([internalRef, ref]), className: (0, classnames_1.default)('ffe-collapse', className, {
80
57
  'ffe-collapse--open': isOpen,
81
58
  'ffe-collapse--hidden': isHidden,
82
- }), onTransitionEnd: function (e) {
59
+ }), onTransitionEnd: e => {
83
60
  if (e.target === internalRef.current &&
84
61
  e.propertyName === 'grid-template-rows') {
85
62
  setIsHidden(!isOpen);
@@ -88,7 +65,7 @@ exports.Collapse = react_1.default.forwardRef(function (_a, ref) {
88
65
  }
89
66
  onRest === null || onRest === void 0 ? void 0 : onRest();
90
67
  }
91
- } }),
68
+ } },
92
69
  react_1.default.createElement("div", { className: (0, classnames_1.default)('ffe-collapse__inner', {
93
70
  'ffe-collapse__inner--visible': overflowVisible,
94
71
  }) }, children)));
package/lib/mergeRefs.js CHANGED
@@ -2,8 +2,8 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.mergeRefs = mergeRefs;
4
4
  function mergeRefs(refs) {
5
- return function (value) {
6
- refs.forEach(function (ref) {
5
+ return value => {
6
+ refs.forEach(ref => {
7
7
  if (typeof ref === 'function') {
8
8
  ref(value);
9
9
  }
package/lib/usePreviousIsOpen.js CHANGED
@@ -1,10 +1,10 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.usePreviousIsOpen = void 0;
4
- var react_1 = require("react");
5
- var usePreviousIsOpen = function (isOpen) {
6
- var ref = (0, react_1.useRef)();
7
- (0, react_1.useEffect)(function () {
4
+ const react_1 = require("react");
5
+ const usePreviousIsOpen = (isOpen) => {
6
+ const ref = (0, react_1.useRef)();
7
+ (0, react_1.useEffect)(() => {
8
8
  ref.current = isOpen;
9
9
  });
10
10
  return ref.current;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-collapse-react",
3
- "version": "100.12.4",
3
+ "version": "101.0.0",
4
4
  "description": "React component for expand/collapse",
5
5
  "keywords": [
6
6
  "ffe"
@@ -30,12 +30,12 @@
30
30
  "test:watch": "ffe-buildtool jest --watch"
31
31
  },
32
32
  "dependencies": {
33
- "@sb1/ffe-core": "^100.12.4",
34
- "classnames": "^2.3.1"
33
+ "@sb1/ffe-core": "^101.0.0",
34
+ "classnames": "^2.5.1"
35
35
  },
36
36
  "devDependencies": {
37
- "@sb1/ffe-buildtool": "^100.12.4",
38
- "eslint": "^9.22.0",
37
+ "@sb1/ffe-buildtool": "^101.0.0",
38
+ "eslint": "^10.2.0",
39
39
  "react": "^18.2.0",
40
40
  "react-dom": "^18.2.0"
41
41
  },
@@ -45,5 +45,5 @@
45
45
  "publishConfig": {
46
46
  "access": "public"
47
47
  },
48
- "gitHead": "499c82bdc3f2680cf36cfd7cb77c550c623951f7"
48
+ "gitHead": "7714019dbb9001551cb5d1c262c58afd609d4fb0"
49
49
  }