@neo4j-ndl/react 2.0.18 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Change Log
 
+## 2.1.0
+
+### Minor Changes
+
+- [#695](https://github.com/neo4j/neo4j-design/pull/695) [`b8274f8`](https://github.com/neo4j/neo4j-design/commit/b8274f877b0d32ad40a12cd864df9287c4552cfc) Thanks [@konsalex](https://github.com/konsalex)! - added new shared react hooks and documentation inside Storybook
+
+### Patch Changes
+
+- Updated dependencies [[`b8274f8`](https://github.com/neo4j/neo4j-design/commit/b8274f877b0d32ad40a12cd864df9287c4552cfc)]:
+  - @neo4j-ndl/base@2.1.0
+
 ## 2.0.18
 
 ### Patch Changes

package/lib/LICENSES.txt

@@ -14639,6 +14639,32 @@ END OF TERMS AND CONDITIONS
 
 -----
 
+The following software may be included in this product: usehooks-ts. A copy of the source code may be downloaded from https://github.com/juliencrn/usehooks-ts. This software contains the following license and notice below:
+
+The MIT License (MIT)
+
+Copyright (c) 2020 Julien CARON
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+-----
+
 The following software may be included in this product: vite. A copy of the source code may be downloaded from git+https://github.com/vitejs/vite.git. This software contains the following license and notice below:
 
 # Vite core license

package/lib/NOTICE.txt

@@ -297,6 +297,10 @@ Third-party licenses
 │  │  ├─ URL: git://github.com/TypeStrong/ts-node.git
 │  │  ├─ VendorName: Blake Embrey
 │  │  └─ VendorUrl: https://typestrong.org/ts-node
+│  ├─ usehooks-ts@npm:2.9.1 [a2e03] (via npm:2.9.1 [a2e03])
+│  │  ├─ URL: https://github.com/juliencrn/usehooks-ts
+│  │  ├─ VendorName: Julien CARON
+│  │  └─ VendorUrl: https://usehooks-ts.com
 │  ├─ vite@npm:4.3.5 [d75d7] (via npm:^4.0.4 [d75d7])
 │  │  ├─ URL: git+https://github.com/vitejs/vite.git
 │  │  ├─ VendorName: Evan You

package/lib/cjs/hooks/index.js

@@ -0,0 +1,96 @@
+"use strict";
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRenderCount = exports.useEffectDebugger = exports.usePrevious = exports.useEventListener = exports.useLockedBody = exports.useCopyToClipboard = exports.useMediaQuery = exports.useInterval = exports.useOnClickOutside = exports.useWindowSize = exports.useDebounce = void 0;
+const react_1 = require("react");
+var usehooks_ts_1 = require("usehooks-ts");
+Object.defineProperty(exports, "useDebounce", { enumerable: true, get: function () { return usehooks_ts_1.useDebounce; } });
+Object.defineProperty(exports, "useWindowSize", { enumerable: true, get: function () { return usehooks_ts_1.useWindowSize; } });
+Object.defineProperty(exports, "useOnClickOutside", { enumerable: true, get: function () { return usehooks_ts_1.useOnClickOutside; } });
+Object.defineProperty(exports, "useInterval", { enumerable: true, get: function () { return usehooks_ts_1.useInterval; } });
+Object.defineProperty(exports, "useMediaQuery", { enumerable: true, get: function () { return usehooks_ts_1.useMediaQuery; } });
+Object.defineProperty(exports, "useCopyToClipboard", { enumerable: true, get: function () { return usehooks_ts_1.useCopyToClipboard; } });
+Object.defineProperty(exports, "useLockedBody", { enumerable: true, get: function () { return usehooks_ts_1.useLockedBody; } });
+Object.defineProperty(exports, "useEventListener", { enumerable: true, get: function () { return usehooks_ts_1.useEventListener; } });
+/**
+ * Below are hooks that cannot be found in `usehooks-ts`
+ * but are used in some projects.
+ * 1. usePrevious
+ * 2. useEffectDebugger
+ * 3. useRenderCount
+ */
+/**
+ * The `usePrevious` hook tracks a variable's previous value in a functional component,
+ * useful for comparing current and past values to trigger actions or render changes.
+ */
+function usePrevious(value) {
+    // The ref object is a generic container whose current property is mutable
+    // and can hold any value, similar to an instance property on a class
+    const ref = (0, react_1.useRef)();
+    // Store current value in ref
+    (0, react_1.useEffect)(() => {
+        ref.current = value;
+    }, [value]); // Only re-run if value changes
+    // Return previous value (happens before update in useEffect above)
+    return ref.current;
+}
+exports.usePrevious = usePrevious;
+/**
+ * The `useEffectDebugger` hook is a wrapper around the `useEffect` hook
+ * that logs the dependencies of the effect when they change.
+ *
+ * Uses the `usePrevious` hook.
+ *
+ * Source: https://stackoverflow.com/a/59843241/3247715
+ */
+function useEffectDebugger(effectHook, dependencies, dependencyNames = []) {
+    const previousDeps = usePrevious(dependencies);
+    const changedDeps = dependencies.reduce((accum, dependency, index) => {
+        if (previousDeps === undefined) {
+            return accum;
+        }
+        if (dependency !== previousDeps[index]) {
+            const keyName = dependencyNames[index] || index;
+            return Object.assign(Object.assign({}, accum), { [keyName]: {
+                    before: previousDeps[index],
+                    after: dependency,
+                } });
+        }
+        return accum;
+    }, {});
+    if (Object.keys(changedDeps).length) {
+        console.info('[use-effect-debugger] ', changedDeps);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    (0, react_1.useEffect)(effectHook, dependencies);
+}
+exports.useEffectDebugger = useEffectDebugger;
+/**
+ * The `useRenderCount` hook returns the number of times a component has rendered.
+ */
+function useRenderCount() {
+    const count = (0, react_1.useRef)(0);
+    count.current++;
+    return count.current;
+}
+exports.useRenderCount = useRenderCount;
+//# sourceMappingURL=index.js.map

package/lib/cjs/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;AAEH,iCAA0C;AAE1C,2CASqB;AARnB,0GAAA,WAAW,OAAA;AACX,4GAAA,aAAa,OAAA;AACb,gHAAA,iBAAiB,OAAA;AACjB,0GAAA,WAAW,OAAA;AACX,4GAAA,aAAa,OAAA;AACb,iHAAA,kBAAkB,OAAA;AAClB,4GAAA,aAAa,OAAA;AACb,+GAAA,gBAAgB,OAAA;AAGlB;;;;;;GAMG;AAEH;;;GAGG;AACH,SAAgB,WAAW,CAAI,KAAQ;IACrC,0EAA0E;IAC1E,qEAAqE;IACrE,MAAM,GAAG,GAAQ,IAAA,cAAM,GAAK,CAAC;IAC7B,6BAA6B;IAC7B,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,GAAG,CAAC,OAAO,GAAG,KAAK,CAAC;IACtB,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,+BAA+B;IAC5C,mEAAmE;IACnE,OAAO,GAAG,CAAC,OAAO,CAAC;AACrB,CAAC;AAVD,kCAUC;AAED;;;;;;;GAOG;AACH,SAAgB,iBAAiB,CAC/B,UAAmB,EACnB,YAAuB,EACvB,kBAA4B,EAAE;IAE9B,MAAM,YAAY,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;IAE/C,MAAM,WAAW,GAAQ,YAAY,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE;QACxE,IAAI,YAAY,KAAK,SAAS,EAAE;YAC9B,OAAO,KAAK,CAAC;SACd;QACD,IAAI,UAAU,KAAK,YAAY,CAAC,KAAK,CAAC,EAAE;YACtC,MAAM,OAAO,GAAG,eAAe,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC;YAChD,uCACM,KAAa,KACjB,CAAC,OAAO,CAAC,EAAE;oBACT,MAAM,EAAE,YAAY,CAAC,KAAK,CAAC;oBAC3B,KAAK,EAAE,UAAU;iBAClB,IACD;SACH;QAED,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,MAAM,EAAE;QACnC,OAAO,CAAC,IAAI,CAAC,wBAAwB,EAAE,WAAW,CAAC,CAAC;KACrD;IAED,uDAAuD;IACvD,IAAA,iBAAS,EAAC,UAAiB,EAAE,YAAY,CAAC,CAAC;AAC7C,CAAC;AA/BD,8CA+BC;AAED;;GAEG;AACH,SAAgB,cAAc;IAC5B,MAAM,KAAK,GAAG,IAAA,cAAM,EAAC,CAAC,CAAC,CAAC;IAExB,KAAK,CAAC,OAAO,EAAE,CAAC;IAEhB,OAAO,KAAK,CAAC,OAAO,CAAC;AACvB,CAAC;AAND,wCAMC"}

package/lib/esm/hooks/index.js

@@ -0,0 +1,82 @@
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { useEffect, useRef } from 'react';
+export { useDebounce, useWindowSize, useOnClickOutside, useInterval, useMediaQuery, useCopyToClipboard, useLockedBody, useEventListener, } from 'usehooks-ts';
+/**
+ * Below are hooks that cannot be found in `usehooks-ts`
+ * but are used in some projects.
+ * 1. usePrevious
+ * 2. useEffectDebugger
+ * 3. useRenderCount
+ */
+/**
+ * The `usePrevious` hook tracks a variable's previous value in a functional component,
+ * useful for comparing current and past values to trigger actions or render changes.
+ */
+export function usePrevious(value) {
+    // The ref object is a generic container whose current property is mutable
+    // and can hold any value, similar to an instance property on a class
+    const ref = useRef();
+    // Store current value in ref
+    useEffect(() => {
+        ref.current = value;
+    }, [value]); // Only re-run if value changes
+    // Return previous value (happens before update in useEffect above)
+    return ref.current;
+}
+/**
+ * The `useEffectDebugger` hook is a wrapper around the `useEffect` hook
+ * that logs the dependencies of the effect when they change.
+ *
+ * Uses the `usePrevious` hook.
+ *
+ * Source: https://stackoverflow.com/a/59843241/3247715
+ */
+export function useEffectDebugger(effectHook, dependencies, dependencyNames = []) {
+    const previousDeps = usePrevious(dependencies);
+    const changedDeps = dependencies.reduce((accum, dependency, index) => {
+        if (previousDeps === undefined) {
+            return accum;
+        }
+        if (dependency !== previousDeps[index]) {
+            const keyName = dependencyNames[index] || index;
+            return Object.assign(Object.assign({}, accum), { [keyName]: {
+                    before: previousDeps[index],
+                    after: dependency,
+                } });
+        }
+        return accum;
+    }, {});
+    if (Object.keys(changedDeps).length) {
+        console.info('[use-effect-debugger] ', changedDeps);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(effectHook, dependencies);
+}
+/**
+ * The `useRenderCount` hook returns the number of times a component has rendered.
+ */
+export function useRenderCount() {
+    const count = useRef(0);
+    count.current++;
+    return count.current;
+}
+//# sourceMappingURL=index.js.map

package/lib/esm/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EACL,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,WAAW,EACX,aAAa,EACb,kBAAkB,EAClB,aAAa,EACb,gBAAgB,GACjB,MAAM,aAAa,CAAC;AAErB;;;;;;GAMG;AAEH;;;GAGG;AACH,MAAM,UAAU,WAAW,CAAI,KAAQ;IACrC,0EAA0E;IAC1E,qEAAqE;IACrE,MAAM,GAAG,GAAQ,MAAM,EAAK,CAAC;IAC7B,6BAA6B;IAC7B,SAAS,CAAC,GAAG,EAAE;QACb,GAAG,CAAC,OAAO,GAAG,KAAK,CAAC;IACtB,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,+BAA+B;IAC5C,mEAAmE;IACnE,OAAO,GAAG,CAAC,OAAO,CAAC;AACrB,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,iBAAiB,CAC/B,UAAmB,EACnB,YAAuB,EACvB,kBAA4B,EAAE;IAE9B,MAAM,YAAY,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;IAE/C,MAAM,WAAW,GAAQ,YAAY,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE;QACxE,IAAI,YAAY,KAAK,SAAS,EAAE;YAC9B,OAAO,KAAK,CAAC;SACd;QACD,IAAI,UAAU,KAAK,YAAY,CAAC,KAAK,CAAC,EAAE;YACtC,MAAM,OAAO,GAAG,eAAe,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC;YAChD,uCACM,KAAa,KACjB,CAAC,OAAO,CAAC,EAAE;oBACT,MAAM,EAAE,YAAY,CAAC,KAAK,CAAC;oBAC3B,KAAK,EAAE,UAAU;iBAClB,IACD;SACH;QAED,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,MAAM,EAAE;QACnC,OAAO,CAAC,IAAI,CAAC,wBAAwB,EAAE,WAAW,CAAC,CAAC;KACrD;IAED,uDAAuD;IACvD,SAAS,CAAC,UAAiB,EAAE,YAAY,CAAC,CAAC;AAC7C,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,cAAc;IAC5B,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IAExB,KAAK,CAAC,OAAO,EAAE,CAAC;IAEhB,OAAO,KAAK,CAAC,OAAO,CAAC;AACvB,CAAC"}

package/lib/types/accordion/Accordion.d.ts

@@ -20,7 +20,7 @@
  */
 import React from 'react';
 import { type ElementBase } from '../helpers';
-export type AccordionItemId = string | number;
+export type AccordionItemId = string | number | undefined;
 export interface AccordionBase extends ElementBase<HTMLDivElement> {
     children: React.ReactNode | string;
     className?: string;

package/lib/types/hooks/index.d.ts

@@ -0,0 +1,46 @@
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+export { useDebounce, useWindowSize, useOnClickOutside, useInterval, useMediaQuery, useCopyToClipboard, useLockedBody, useEventListener, } from 'usehooks-ts';
+/**
+ * Below are hooks that cannot be found in `usehooks-ts`
+ * but are used in some projects.
+ * 1. usePrevious
+ * 2. useEffectDebugger
+ * 3. useRenderCount
+ */
+/**
+ * The `usePrevious` hook tracks a variable's previous value in a functional component,
+ * useful for comparing current and past values to trigger actions or render changes.
+ */
+export declare function usePrevious<T>(value: T): T;
+/**
+ * The `useEffectDebugger` hook is a wrapper around the `useEffect` hook
+ * that logs the dependencies of the effect when they change.
+ *
+ * Uses the `usePrevious` hook.
+ *
+ * Source: https://stackoverflow.com/a/59843241/3247715
+ */
+export declare function useEffectDebugger(effectHook: unknown, dependencies: unknown[], dependencyNames?: string[]): void;
+/**
+ * The `useRenderCount` hook returns the number of times a component has rendered.
+ */
+export declare function useRenderCount(): number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-ndl/react",
-  "version": "2.0.18",
+  "version": "2.1.0",
   "sideEffects": false,
   "description": "React implementation of Neo4j Design System",
   "keywords": [
@@ -93,7 +93,7 @@
     "@floating-ui/react": "0.25.1",
     "@heroicons/react": "2.0.13",
     "@neo4j-cypher/react-codemirror": "^1.0.1",
-    "@neo4j-ndl/base": "^2.0.9",
+    "@neo4j-ndl/base": "^2.1.0",
     "@table-nav/core": "0.0.7",
     "@table-nav/react": "0.0.7",
     "@tanstack/react-table": "^8.9.3",
@@ -109,7 +109,8 @@
     "react-syntax-highlighter": "^15.5.0",
     "react-table": "^7.7.0",
     "react-use": "^17.4.0",
-    "tinycolor2": "^1.4.2"
+    "tinycolor2": "^1.4.2",
+    "usehooks-ts": "2.9.1"
   },
   "resolutions": {
     "@types/react": "18.2.18",