@neo4j-ndl/react 2.5.0 → 2.6.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Change Log
 
+## 2.6.0
+
+### Minor Changes
+
+- [#733](https://github.com/neo4j/needle/pull/733) [`6f374de548bbdb0f4fd32a76e49ec85c8118b351`](https://github.com/neo4j/needle/commit/6f374de548bbdb0f4fd32a76e49ec85c8118b351) Thanks [@konsalex](https://github.com/konsalex)! - add new slider component
+
+### Patch Changes
+
+- Updated dependencies [[`6f374de548bbdb0f4fd32a76e49ec85c8118b351`](https://github.com/neo4j/needle/commit/6f374de548bbdb0f4fd32a76e49ec85c8118b351)]:
+  - @neo4j-ndl/base@2.6.0
+
 ## 2.5.0
 
 ### Minor Changes

package/lib/LICENSES.txt

@@ -17001,7 +17001,7 @@ SOFTWARE.
 
 -----
 
-The following software may be included in this product: react-aria. A copy of the source code may be downloaded from https://github.com/adobe/react-spectrum. This software contains the following license and notice below:
+The following software may be included in this product: react-aria, react-stately. A copy of the source code may be downloaded from https://github.com/adobe/react-spectrum (react-aria), https://github.com/adobe/react-spectrum (react-stately). This software contains the following license and notice below:
 
 Apache License
                            Version 2.0, January 2004

package/lib/NOTICE.txt

@@ -333,7 +333,9 @@ Third-party licenses
 │  │  ├─ URL: https://github.com/krisk/Fuse.git
 │  │  ├─ VendorName: Kiro Risk
 │  │  └─ VendorUrl: http://fusejs.io
-│  ├─ react-aria@npm:3.31.1 [a2e03] (via npm:^3.25.0 [a2e03])
+│  ├─ react-aria@npm:3.31.0 [a2e03] (via npm:3.31.0 [a2e03])
+│  │  └─ URL: https://github.com/adobe/react-spectrum
+│  ├─ react-stately@npm:3.29.1 [a2e03] (via npm:3.29.1 [a2e03])
 │  │  └─ URL: https://github.com/adobe/react-spectrum
 │  ├─ style-dictionary@npm:3.9.2 (via npm:^3.0.3)
 │  │  ├─ URL: git://github.com/amzn/style-dictionary.git

package/lib/cjs/slider/Slider.js

@@ -0,0 +1,134 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Slider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  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/>.
+ */
+const defaultImports_1 = require("../_common/defaultImports");
+const react_1 = __importDefault(require("react"));
+const helpers_1 = require("../helpers");
+const tip_1 = require("../tip");
+const react_stately_1 = require("react-stately");
+const react_aria_1 = require("react-aria");
+exports.Slider = (0, helpers_1.forwardRef)(function SliderComponent(_a, ref) {
+    var { rootProps = {}, inputProps = {}, minValue = 0, maxValue = 100, isDisabled = false, showSteps = false, showValues = false, step = 1, type = 'single', onChange } = _a, restProps = __rest(_a, ["rootProps", "inputProps", "minValue", "maxValue", "isDisabled", "showSteps", "showValues", "step", "type", "onChange"]);
+    const trackRef = react_1.default.useRef(null);
+    const castedValue = type === 'range'
+        ? restProps.values
+        : restProps.value;
+    const castedOnChange = type === 'range'
+        ? onChange
+        : onChange;
+    const state = (0, react_stately_1.useSliderState)({
+        isDisabled,
+        minValue,
+        maxValue,
+        step,
+        defaultValue: castedValue,
+        numberFormatter: new Intl.NumberFormat('en-US'),
+        onChange: castedOnChange, // eslint-disable-line @typescript-eslint/no-explicit-any
+    });
+    const { groupProps, trackProps } = (0, react_aria_1.useSlider)({ 'aria-label': 'slider' }, state, trackRef);
+    const mergedProps = (0, react_aria_1.mergeProps)(groupProps, rootProps);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, mergedProps, { className: (0, defaultImports_1.classNames)('ndl-slider', rootProps.className), role: "presentation", ref: ref, children: (0, jsx_runtime_1.jsxs)("div", Object.assign({}, trackProps, { ref: trackRef, className: (0, defaultImports_1.classNames)('ndl-track', {
+                'ndl-is-disabled': state.isDisabled,
+            }), children: [showSteps && ((0, jsx_runtime_1.jsx)(TrackMarks, { state: state, min: minValue, max: maxValue })), (0, jsx_runtime_1.jsx)(FilledTrack, { state: state }), (0, jsx_runtime_1.jsx)(Thumb, { index: 0, state: state, trackRef: trackRef, showValues: showValues, inputForwardedProps: inputProps }), type === 'range' && ((0, jsx_runtime_1.jsx)(Thumb, { index: 1, state: state, trackRef: trackRef, showValues: showValues, inputForwardedProps: inputProps }))] })) })));
+});
+function FilledTrack({ state }) {
+    let width;
+    let left;
+    if (state.values.length === 1) {
+        width = state.getValuePercent(state.values[0]) * 100;
+        left = 0;
+    }
+    else {
+        width =
+            state.getValuePercent(state.values[1]) * 100 -
+                state.getValuePercent(state.values[0]) * 100;
+        left = state.getValuePercent(state.values[0]) * 100;
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { className: "ndl-filled-track", style: {
+            left: `${left}%`,
+            width: `${width}%`,
+        } }));
+}
+function TrackMarks({ state, max, min, }) {
+    const markNo = Math.round((max - min) / state.step);
+    return ((0, jsx_runtime_1.jsx)("div", { role: "presentation", className: "ndl-track-marks", children: Array.from({ length: markNo }).map((_, index) => {
+            const percent = (index / markNo) * 100;
+            let isFilled;
+            if (state.values.length === 1) {
+                isFilled = state.getValuePercent(state.values[0]) * 100 > percent;
+            }
+            else {
+                isFilled =
+                    state.getValuePercent(state.values[0]) * 100 < percent &&
+                        state.getValuePercent(state.values[1]) * 100 > percent;
+            }
+            return ((0, jsx_runtime_1.jsx)("div", { className: (0, defaultImports_1.classNames)('ndl-track-mark', {
+                    'ndl-on-active-track': isFilled,
+                }), style: {
+                    left: `${(index / markNo) * 100}%`,
+                } }, `track-mark-${index}`));
+        }) }));
+}
+function Thumb(props) {
+    const { state, trackRef, index, inputForwardedProps } = props;
+    const inputRef = react_1.default.useRef(null);
+    const { thumbProps, inputProps, isDragging } = (0, react_aria_1.useSliderThumb)({
+        index,
+        trackRef,
+        inputRef,
+        name: 'slider-thumb',
+    }, state);
+    const { focusProps, isFocusVisible } = (0, react_aria_1.useFocusRing)();
+    /**
+     * Solve issue with:
+     * Warning: Received NaN for the `value` attribute. If this is expected, cast the value to a string.
+     * Receiving NaN for other attributes also, like `max`. Waiting for a fix in react-aria.
+     * @see https://github.com/adobe/react-spectrum/issues/5859
+     * @see https://github.com/adobe/react-spectrum/pull/5861
+     */
+    const mergedProps = (0, react_aria_1.mergeProps)(inputProps, focusProps, 
+    // Omitting aria-valuetext double announcements, unless explicitly provided
+    { 'aria-valuetext': '' }, inputForwardedProps);
+    const value = mergedProps.value || mergedProps.value === 0 ? mergedProps.value : '';
+    return ((0, jsx_runtime_1.jsxs)(tip_1.Tip, { isDisabled: props.showValues !== true, isOpen: isDragging || undefined, allowedPlacements: ['top'], children: [(0, jsx_runtime_1.jsx)(tip_1.Tip.Trigger, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({}, thumbProps, { className: (0, defaultImports_1.classNames)('ndl-thumb', {
+                        'ndl-is-dragging': isDragging,
+                        'ndl-focus': isFocusVisible,
+                    }), children: (0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("input", Object.assign({ ref: inputRef }, mergedProps)) }) })) }), (0, jsx_runtime_1.jsx)(tip_1.Tip.Content, { children: (0, jsx_runtime_1.jsx)(tip_1.Tip.Body, { children: value }) })] }));
+}
+exports.default = exports.Slider;
+//# sourceMappingURL=Slider.js.map

package/lib/cjs/slider/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../src/slider/Slider.tsx"],"names":[],"mappings":"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"}

package/lib/cjs/slider/index.js

@@ -0,0 +1,38 @@
+"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/>.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Slider"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/slider/index.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;;;;;;;;;;;;;;AAEH,2CAAyB"}

package/lib/esm/slider/Slider.js

@@ -0,0 +1,128 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ *
+ *  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 { classNames } from '../_common/defaultImports';
+import React from 'react';
+import { forwardRef } from '../helpers';
+import { Tip } from '../tip';
+import { useSliderState } from 'react-stately';
+import { mergeProps, useFocusRing, useSlider, useSliderThumb, VisuallyHidden, } from 'react-aria';
+export const Slider = forwardRef(function SliderComponent(_a, ref) {
+    var { rootProps = {}, inputProps = {}, minValue = 0, maxValue = 100, isDisabled = false, showSteps = false, showValues = false, step = 1, type = 'single', onChange } = _a, restProps = __rest(_a, ["rootProps", "inputProps", "minValue", "maxValue", "isDisabled", "showSteps", "showValues", "step", "type", "onChange"]);
+    const trackRef = React.useRef(null);
+    const castedValue = type === 'range'
+        ? restProps.values
+        : restProps.value;
+    const castedOnChange = type === 'range'
+        ? onChange
+        : onChange;
+    const state = useSliderState({
+        isDisabled,
+        minValue,
+        maxValue,
+        step,
+        defaultValue: castedValue,
+        numberFormatter: new Intl.NumberFormat('en-US'),
+        onChange: castedOnChange, // eslint-disable-line @typescript-eslint/no-explicit-any
+    });
+    const { groupProps, trackProps } = useSlider({ 'aria-label': 'slider' }, state, trackRef);
+    const mergedProps = mergeProps(groupProps, rootProps);
+    return (_jsx("div", Object.assign({}, mergedProps, { className: classNames('ndl-slider', rootProps.className), role: "presentation", ref: ref, children: _jsxs("div", Object.assign({}, trackProps, { ref: trackRef, className: classNames('ndl-track', {
+                'ndl-is-disabled': state.isDisabled,
+            }), children: [showSteps && (_jsx(TrackMarks, { state: state, min: minValue, max: maxValue })), _jsx(FilledTrack, { state: state }), _jsx(Thumb, { index: 0, state: state, trackRef: trackRef, showValues: showValues, inputForwardedProps: inputProps }), type === 'range' && (_jsx(Thumb, { index: 1, state: state, trackRef: trackRef, showValues: showValues, inputForwardedProps: inputProps }))] })) })));
+});
+function FilledTrack({ state }) {
+    let width;
+    let left;
+    if (state.values.length === 1) {
+        width = state.getValuePercent(state.values[0]) * 100;
+        left = 0;
+    }
+    else {
+        width =
+            state.getValuePercent(state.values[1]) * 100 -
+                state.getValuePercent(state.values[0]) * 100;
+        left = state.getValuePercent(state.values[0]) * 100;
+    }
+    return (_jsx("div", { className: "ndl-filled-track", style: {
+            left: `${left}%`,
+            width: `${width}%`,
+        } }));
+}
+function TrackMarks({ state, max, min, }) {
+    const markNo = Math.round((max - min) / state.step);
+    return (_jsx("div", { role: "presentation", className: "ndl-track-marks", children: Array.from({ length: markNo }).map((_, index) => {
+            const percent = (index / markNo) * 100;
+            let isFilled;
+            if (state.values.length === 1) {
+                isFilled = state.getValuePercent(state.values[0]) * 100 > percent;
+            }
+            else {
+                isFilled =
+                    state.getValuePercent(state.values[0]) * 100 < percent &&
+                        state.getValuePercent(state.values[1]) * 100 > percent;
+            }
+            return (_jsx("div", { className: classNames('ndl-track-mark', {
+                    'ndl-on-active-track': isFilled,
+                }), style: {
+                    left: `${(index / markNo) * 100}%`,
+                } }, `track-mark-${index}`));
+        }) }));
+}
+function Thumb(props) {
+    const { state, trackRef, index, inputForwardedProps } = props;
+    const inputRef = React.useRef(null);
+    const { thumbProps, inputProps, isDragging } = useSliderThumb({
+        index,
+        trackRef,
+        inputRef,
+        name: 'slider-thumb',
+    }, state);
+    const { focusProps, isFocusVisible } = useFocusRing();
+    /**
+     * Solve issue with:
+     * Warning: Received NaN for the `value` attribute. If this is expected, cast the value to a string.
+     * Receiving NaN for other attributes also, like `max`. Waiting for a fix in react-aria.
+     * @see https://github.com/adobe/react-spectrum/issues/5859
+     * @see https://github.com/adobe/react-spectrum/pull/5861
+     */
+    const mergedProps = mergeProps(inputProps, focusProps, 
+    // Omitting aria-valuetext double announcements, unless explicitly provided
+    { 'aria-valuetext': '' }, inputForwardedProps);
+    const value = mergedProps.value || mergedProps.value === 0 ? mergedProps.value : '';
+    return (_jsxs(Tip, { isDisabled: props.showValues !== true, isOpen: isDragging || undefined, allowedPlacements: ['top'], children: [_jsx(Tip.Trigger, { children: _jsx("div", Object.assign({}, thumbProps, { className: classNames('ndl-thumb', {
+                        'ndl-is-dragging': isDragging,
+                        'ndl-focus': isFocusVisible,
+                    }), children: _jsx(VisuallyHidden, { children: _jsx("input", Object.assign({ ref: inputRef }, mergedProps)) }) })) }), _jsx(Tip.Content, { children: _jsx(Tip.Body, { children: value }) })] }));
+}
+export default Slider;
+//# sourceMappingURL=Slider.js.map

package/lib/esm/slider/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../src/slider/Slider.tsx"],"names":[],"mappings":"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"}

package/lib/esm/slider/index.js

@@ -0,0 +1,22 @@
+/**
+ *
+ *  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 * from './Slider';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/slider/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,cAAc,UAAU,CAAC"}

package/lib/types/slider/Slider.d.ts

@@ -0,0 +1,77 @@
+/**
+ *
+ *  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 React from 'react';
+import { type ComponentPropsWithoutRefAsObj } from '../helpers';
+export interface SliderPropsBase {
+    as?: string | React.ComponentType<any>;
+    /** Forwards the props to the slider container's wrapper */
+    rootProps?: ComponentPropsWithoutRefAsObj<'div'>;
+    /** Forwards the input element(s) of the slider */
+    inputProps?: ComponentPropsWithoutRefAsObj<'input'>;
+    /**
+     * Which value interval will be added or removed from
+     * the current value when moving the slider button.
+     *
+     * @default 1
+     */
+    step?: number;
+    isDisabled?: boolean;
+    /**
+     * The minimum value possible to choose.
+     * @default 0
+     */
+    minValue?: number;
+    /**
+     * The maximum value possible to choose.
+     * @default 100
+     */
+    maxValue?: number;
+    /**
+     * Displays a tooltip with the current
+     * value for a brief second.
+     */
+    showValues?: boolean;
+    /**
+     * Displays visual indicators for each
+     * of the steps in the slider.
+     */
+    showSteps?: boolean;
+}
+type SingleSlider = SliderPropsBase & {
+    type?: 'single' | undefined;
+    /**
+     * Current value of the single slider.
+     */
+    value: number;
+    onChange: (value: number) => void;
+};
+type RangeSlider = SliderPropsBase & {
+    type: 'range';
+    /**
+     * Current values of the range slider.
+     */
+    values: [number, number];
+    onChange: (value: [number, number]) => void;
+};
+export type SliderProps = SingleSlider | RangeSlider;
+export declare const Slider: (props: SliderProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export default Slider;

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

@@ -0,0 +1,21 @@
+/**
+ *
+ *  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 * from './Slider';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-ndl/react",
-  "version": "2.5.0",
+  "version": "2.6.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.5.0",
+    "@neo4j-ndl/base": "^2.6.0",
     "@table-nav/core": "0.0.7",
     "@table-nav/react": "0.0.7",
     "@tanstack/react-table": "^8.9.3",
@@ -101,11 +101,12 @@
     "date-fns": "^2.30.0",
     "detect-browser": "^5.3.0",
     "re-resizable": "^6.9.11",
-    "react-aria": "^3.25.0",
+    "react-aria": "3.31.0",
     "react-datepicker": "^4.14.1",
     "react-dropzone": "^14.0.0",
     "react-focus-lock": "^2.9.4",
     "react-select": "5.7.0",
+    "react-stately": "3.29.1",
     "react-syntax-highlighter": "^15.5.0",
     "react-table": "^7.7.0",
     "react-use": "^17.4.0",