@neo4j-ndl/react 4.21.2-alpha.c774957.15.1 → 4.22.0

package/lib/types/next/tree-view/selection.d.ts

@@ -0,0 +1,78 @@
+/**
+ *
+ *  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 type SelectionMode = 'single' | 'multiple' | 'multiple-replace';
+export type SelectionEdge = 'top' | 'middle' | 'bottom';
+/** Modifier keys resolved from a pointer or keyboard event. */
+export type SelectionIntent = {
+    /** Shift: extend from the anchor to the target. */
+    isRange: boolean;
+    /**
+     * Cmd on Apple platforms, Ctrl elsewhere. Ignored in `multiple`, where an
+     * unmodified click already toggles.
+     */
+    isToggle: boolean;
+};
+/**
+ * Where a range is measured from.
+ *
+ * `baseSelectedIds` is the selection as it stood immediately after the anchor
+ * was placed. A `multiple-replace` range unions its visible members with the
+ * range so it can be grown and shrunk without losing earlier picks.
+ * `isSelected` is the state the anchor row was placed into, which a `multiple`
+ * range paints across its members.
+ */
+export type SelectionAnchor = {
+    baseSelectedIds: ReadonlySet<string>;
+    id: string;
+    isSelected: boolean;
+} | null;
+type ComputeNextSelectionInput = {
+    anchor: SelectionAnchor;
+    intent: SelectionIntent;
+    /** Ids of every selectable, non-disabled item, visible or not. */
+    selectableIds: ReadonlySet<string>;
+    /** Currently selected ids, including items inside collapsed groups. */
+    selectedIds: ReadonlySet<string>;
+    selectionMode: SelectionMode;
+    targetId: string;
+    /** Ids of the items the user can currently see, in visual order. */
+    visibleIds: readonly string[];
+    /** Maps an item id to the id of the item that owns its group. */
+    parentIdById: ReadonlyMap<string, string>;
+};
+type ComputeNextSelectionResult = {
+    anchor: SelectionAnchor;
+    selectedIds: Set<string>;
+};
+/**
+ * Resolves a selection gesture into the complete next selection. Pure: the
+ * caller supplies the current state and applies the result.
+ */
+export declare function computeNextSelection({ anchor, intent, parentIdById, selectableIds, selectedIds, selectionMode, targetId, visibleIds, }: ComputeNextSelectionInput): ComputeNextSelectionResult;
+/**
+ * Marks each selected item's position within its run of adjacent selected
+ * items, so a run can be styled as one block.
+ */
+export declare function computeSelectionEdges(visibleIds: readonly string[], selectedIds: ReadonlySet<string>): Map<string, SelectionEdge>;
+export declare function countChangedIds(previous: ReadonlySet<string>, next: ReadonlySet<string>): number;
+export declare function formatSelectionAnnouncement(selectedCount: number): string;
+export {};
+//# sourceMappingURL=selection.d.ts.map

package/lib/types/next/tree-view/selection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection.d.ts","sourceRoot":"","sources":["../../../../src/next/tree-view/selection.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,kBAAkB,CAAC;AAEvE,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAExD,+DAA+D;AAC/D,MAAM,MAAM,eAAe,GAAG;IAC5B,mDAAmD;IACnD,OAAO,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,eAAe,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,EAAE,OAAO,CAAC;CACrB,GAAG,IAAI,CAAC;AAET,KAAK,yBAAyB,GAAG;IAC/B,MAAM,EAAE,eAAe,CAAC;IACxB,MAAM,EAAE,eAAe,CAAC;IACxB,kEAAkE;IAClE,aAAa,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACnC,uEAAuE;IACvE,WAAW,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACjC,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,oEAAoE;IACpE,UAAU,EAAE,SAAS,MAAM,EAAE,CAAC;IAC9B,iEAAiE;IACjE,YAAY,EAAE,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC3C,CAAC;AAEF,KAAK,0BAA0B,GAAG;IAChC,MAAM,EAAE,eAAe,CAAC;IACxB,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CAC1B,CAAC;AA2EF;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,MAAM,EACN,YAAY,EACZ,aAAa,EACb,WAAW,EACX,aAAa,EACb,QAAQ,EACR,UAAU,GACX,EAAE,yBAAyB,GAAG,0BAA0B,CAiExD;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,UAAU,EAAE,SAAS,MAAM,EAAE,EAC7B,WAAW,EAAE,WAAW,CAAC,MAAM,CAAC,GAC/B,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,CAmB5B;AAED,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,EAC7B,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,GACxB,MAAM,CAaR;AAED,wBAAgB,2BAA2B,CAAC,aAAa,EAAE,MAAM,GAAG,MAAM,CAQzE"}

package/lib/types/next/tree-view/stories/index.d.ts

@@ -18,18 +18,24 @@
  *  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 { default as TreeViewLarge } from './tree-view-large.story';
 export { default as TreeViewLazyLoading } from './tree-view-lazy.story';
 export { default as TreeViewMultiSelect } from './tree-view-multi.story';
+export { default as TreeViewMultipleReplace } from './tree-view-multiple-replace.story';
 export { default as TreeViewNonSelectableFolders } from './tree-view-non-selectable-folders.story';
+export { default as TreeViewRootSelection } from './tree-view-root-selection.story';
 export { default as TreeViewSingleSelect } from './tree-view-single.story';
 export { default as TreeViewWithActions } from './tree-view-actions.story';
 export { default as TreeViewUncontrolledExpansion } from './tree-view-uncontrolled.story';
 export { default as TreeViewWithTrailingContent } from './tree-view-trailing.story';
 export { default as TreeViewWithTooltip } from './tree-view-tooltip.story';
 export declare const TreeViewActionsSrc: string;
+export declare const TreeViewLargeSrc: string;
 export declare const TreeViewLazyLoadingSrc: string;
 export declare const TreeViewMultiSelectSrc: string;
+export declare const TreeViewMultipleReplaceSrc: string;
 export declare const TreeViewNonSelectableFoldersSrc: string;
+export declare const TreeViewRootSelectionSrc: string;
 export declare const TreeViewSingleSelectSrc: string;
 export declare const TreeViewTrailingContentSrc: string;
 export declare const TreeViewTooltipSrc: string;

package/lib/types/next/tree-view/stories/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/next/tree-view/stories/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,4BAA4B,EAAE,MAAM,0CAA0C,CAAC;AACnG,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,6BAA6B,EAAE,MAAM,gCAAgC,CAAC;AAC1F,OAAO,EAAE,OAAO,IAAI,2BAA2B,EAAE,MAAM,4BAA4B,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAY3E,eAAO,MAAM,kBAAkB,QAA6C,CAAC;AAC7E,eAAO,MAAM,sBAAsB,QAElC,CAAC;AACF,eAAO,MAAM,sBAAsB,QAElC,CAAC;AACF,eAAO,MAAM,+BAA+B,QAE3C,CAAC;AACF,eAAO,MAAM,uBAAuB,QAEnC,CAAC;AACF,eAAO,MAAM,0BAA0B,QAEtC,CAAC;AACF,eAAO,MAAM,kBAAkB,QAA6C,CAAC;AAC7E,eAAO,MAAM,gCAAgC,QAE5C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/next/tree-view/stories/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AACxF,OAAO,EAAE,OAAO,IAAI,4BAA4B,EAAE,MAAM,0CAA0C,CAAC;AACnG,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,6BAA6B,EAAE,MAAM,gCAAgC,CAAC;AAC1F,OAAO,EAAE,OAAO,IAAI,2BAA2B,EAAE,MAAM,4BAA4B,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAe3E,eAAO,MAAM,kBAAkB,QAA6C,CAAC;AAC7E,eAAO,MAAM,gBAAgB,QAA2C,CAAC;AACzE,eAAO,MAAM,sBAAsB,QAElC,CAAC;AACF,eAAO,MAAM,sBAAsB,QAElC,CAAC;AACF,eAAO,MAAM,0BAA0B,QAEtC,CAAC;AACF,eAAO,MAAM,+BAA+B,QAE3C,CAAC;AACF,eAAO,MAAM,wBAAwB,QAEpC,CAAC;AACF,eAAO,MAAM,uBAAuB,QAEnC,CAAC;AACF,eAAO,MAAM,0BAA0B,QAEtC,CAAC;AACF,eAAO,MAAM,kBAAkB,QAA6C,CAAC;AAC7E,eAAO,MAAM,gCAAgC,QAE5C,CAAC"}

package/lib/types/next/tree-view/stories/tree-view-large.story.d.ts

@@ -0,0 +1,24 @@
+/**
+ *
+ *  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 '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+declare const Component: () => import("react/jsx-runtime").JSX.Element;
+export default Component;
+//# sourceMappingURL=tree-view-large.story.d.ts.map

package/lib/types/next/tree-view/stories/tree-view-large.story.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-large.story.d.ts","sourceRoot":"","sources":["../../../../../src/next/tree-view/stories/tree-view-large.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAqCjD,QAAA,MAAM,SAAS,+CAoCd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/types/next/tree-view/stories/tree-view-lazy.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tree-view-lazy.story.d.ts","sourceRoot":"","sources":["../../../../../src/next/tree-view/stories/tree-view-lazy.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AA0LjD,QAAA,MAAM,SAAS,+CAcd,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"tree-view-lazy.story.d.ts","sourceRoot":"","sources":["../../../../../src/next/tree-view/stories/tree-view-lazy.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AA+LjD,QAAA,MAAM,SAAS,+CAcd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/types/next/tree-view/stories/tree-view-multi.story.d.ts

@@ -19,6 +19,16 @@
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+/**
+ * Every row owns its own checkbox: `onSelectedChange` reports the state the row
+ * should end up in, and the story stores exactly that. Folders are ordinary
+ * selectable rows here, unrelated to what sits inside them.
+ *
+ * Deriving a folder's state from its children instead needs the tree to own the
+ * selection, since a Shift range moves several rows at once and a cascade has
+ * to be applied to the whole set in one pass. See the root-managed selection
+ * story for that.
+ */
 declare const Component: () => import("react/jsx-runtime").JSX.Element;
 export default Component;
 //# sourceMappingURL=tree-view-multi.story.d.ts.map

package/lib/types/next/tree-view/stories/tree-view-multi.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tree-view-multi.story.d.ts","sourceRoot":"","sources":["../../../../../src/next/tree-view/stories/tree-view-multi.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAmCjD,QAAA,MAAM,SAAS,+CAsGd,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"tree-view-multi.story.d.ts","sourceRoot":"","sources":["../../../../../src/next/tree-view/stories/tree-view-multi.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAUjD;;;;;;;;;GASG;AACH,QAAA,MAAM,SAAS,+CAsFd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/types/next/tree-view/stories/tree-view-multiple-replace.story.d.ts

@@ -0,0 +1,29 @@
+/**
+ *
+ *  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 '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+/**
+ * Letting the tree own the selection keeps the items declarative: they carry an
+ * `id` and nothing else, and a Shift range that moves several rows at once
+ * arrives as a single `onSelectedIdsChange`.
+ */
+declare const Component: () => import("react/jsx-runtime").JSX.Element;
+export default Component;
+//# sourceMappingURL=tree-view-multiple-replace.story.d.ts.map

package/lib/types/next/tree-view/stories/tree-view-multiple-replace.story.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-multiple-replace.story.d.ts","sourceRoot":"","sources":["../../../../../src/next/tree-view/stories/tree-view-multiple-replace.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAUjD;;;;GAIG;AACH,QAAA,MAAM,SAAS,+CA6Dd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/types/next/tree-view/stories/tree-view-non-selectable-folders.story.d.ts

@@ -19,6 +19,11 @@
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+/**
+ * Folders here are pure containers: `isSelectable={false}` makes them expand on
+ * click without ever becoming part of the selection, and screen readers
+ * announce them as non-selectable rather than as unselected rows.
+ */
 declare const Component: () => import("react/jsx-runtime").JSX.Element;
 export default Component;
 //# sourceMappingURL=tree-view-non-selectable-folders.story.d.ts.map

package/lib/types/next/tree-view/stories/tree-view-non-selectable-folders.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tree-view-non-selectable-folders.story.d.ts","sourceRoot":"","sources":["../../../../../src/next/tree-view/stories/tree-view-non-selectable-folders.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAMjD,QAAA,MAAM,SAAS,+CAiEd,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"tree-view-non-selectable-folders.story.d.ts","sourceRoot":"","sources":["../../../../../src/next/tree-view/stories/tree-view-non-selectable-folders.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAMjD;;;;GAIG;AACH,QAAA,MAAM,SAAS,+CA4Dd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/types/next/tree-view/stories/tree-view-root-selection.story.d.ts

@@ -0,0 +1,24 @@
+/**
+ *
+ *  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 '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+declare const Component: () => import("react/jsx-runtime").JSX.Element;
+export default Component;
+//# sourceMappingURL=tree-view-root-selection.story.d.ts.map

package/lib/types/next/tree-view/stories/tree-view-root-selection.story.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-root-selection.story.d.ts","sourceRoot":"","sources":["../../../../../src/next/tree-view/stories/tree-view-root-selection.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAqEjD,QAAA,MAAM,SAAS,+CAuEd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/types/typography/Typography.d.ts

@@ -22,12 +22,7 @@ import { type tokens } from '@neo4j-ndl/base';
 import { type PolymorphicCommonProps } from '../_common/types';
 export type TypographyVariants = keyof typeof tokens.typography;
 type TypographyProps = {
-    /**
-     * The typography variant to use for the text.
-     *
-     * `label` is deprecated: it is identical to `title-4`, which should be used
-     * instead.
-     */
+    /** The typography variant to use for the text. */
     variant: TypographyVariants;
     /** Content displayed inside the component */
     children?: React.ReactNode;

package/lib/types/typography/Typography.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../../src/typography/Typography.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAG9C,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAE/D,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,MAAM,CAAC,UAAU,CAAC;AAEhE,KAAK,eAAe,GAAG;IACrB;;;;;OAKG;IACH,OAAO,EAAE,kBAAkB,CAAC;IAC5B,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,EAC7D,OAAO,sBAAsB,CAAC,CAAC,EAAE,eAAe,CAAC,KAChD,KAAK,CAAC,YAAY,GAAG,IAmBvB,CAAC"}
+{"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../../src/typography/Typography.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAG9C,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAE/D,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,MAAM,CAAC,UAAU,CAAC;AAEhE,KAAK,eAAe,GAAG;IACrB,kDAAkD;IAClD,OAAO,EAAE,kBAAkB,CAAC;IAC5B,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,EAC7D,OAAO,sBAAsB,CAAC,CAAC,EAAE,eAAe,CAAC,KAChD,KAAK,CAAC,YAAY,GAAG,IAmBvB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-ndl/react",
-  "version": "4.21.2-alpha.c774957.15.1",
+  "version": "4.22.0",
   "sideEffects": false,
   "description": "React implementation of Neo4j Design System",
   "keywords": [
@@ -404,7 +404,7 @@
     "@tanstack/react-table": "8.21.3",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
-    "@neo4j-ndl/base": "^4.20.2-alpha.c774957.15.1"
+    "@neo4j-ndl/base": "^4.21.0"
   },
   "dependencies": {
     "@dnd-kit/core": "6.3.1",
@@ -432,8 +432,7 @@
     "temporal-polyfill": "1.0.1",
     "tinycolor2": "1.6.0",
     "usehooks-ts": "3.1.1",
-    "zod": "4.3.6",
-    "@neo4j-ndl/base": "4.20.2-alpha.c774957.15.1"
+    "zod": "4.3.6"
   },
   "scripts": {
     "generate-component": "node ./scripts/component-generator.js",

package/skills/ndl-react/SKILL.md

@@ -198,7 +198,7 @@ Next-generation components, imported from the `@neo4j-ndl/react/next` subpath. A
 
 | Component | Docs | Accessibility | Examples |
 |-----------|------|---------------|----------|
-| `TreeView` | [components/next/tree-view.md](components/next/tree-view.md) | ✅ | 8 |
+| `TreeView` | [components/next/tree-view.md](components/next/tree-view.md) | ✅ | 10 |
 
 ## AI components
 

package/skills/ndl-react/components/clean-icon-button.md

@@ -242,19 +242,19 @@ const Component = () => {
         <CleanIconButton description="Search" size="small">
           <MagnifyingGlassIconOutline />
         </CleanIconButton>
-        <Typography variant="title-4"> Small</Typography>
+        <Typography variant="label"> Small</Typography>
       </div>
       <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
         <CleanIconButton description="Search" size="medium">
           <MagnifyingGlassIconOutline />
         </CleanIconButton>
-        <Typography variant="title-4"> Medium</Typography>
+        <Typography variant="label"> Medium</Typography>
       </div>
       <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
         <CleanIconButton description="Search" size="large">
           <MagnifyingGlassIconOutline />
         </CleanIconButton>
-        <Typography variant="title-4"> Large</Typography>
+        <Typography variant="label"> Large</Typography>
       </div>
     </div>
   );
@@ -278,13 +278,13 @@ const Component = () => {
         <CleanIconButton description="Search" variant="neutral">
           <MagnifyingGlassIconOutline />
         </CleanIconButton>
-        <Typography variant="title-4">Default</Typography>
+        <Typography variant="label">Default</Typography>
       </div>
       <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
         <CleanIconButton description="Search" variant="danger">
           <MagnifyingGlassIconOutline />
         </CleanIconButton>
-        <Typography variant="title-4">Danger</Typography>
+        <Typography variant="label">Danger</Typography>
       </div>
     </div>
   );

package/skills/ndl-react/components/color-picker.md

@@ -36,10 +36,10 @@ import { ColorPicker } from '../ColorPicker';
 
 const Component = () => {
   const [color, setColor] = useState({
-    a: 1, // oxlint-disable-line id-length
-    b: 0, // oxlint-disable-line id-length
-    g: 0, // oxlint-disable-line id-length
-    r: 0, // oxlint-disable-line id-length
+    a: 1,
+    b: 0,
+    g: 0,
+    r: 0,
   });
 
   return (
@@ -62,10 +62,10 @@ import { ColorPicker } from '../ColorPicker';
 
 const Component = () => {
   const [color, setColor] = useState({
-    a: 1, // oxlint-disable-line id-length
-    b: 0, // oxlint-disable-line id-length
-    g: 0, // oxlint-disable-line id-length
-    r: 0, // oxlint-disable-line id-length
+    a: 1,
+    b: 0,
+    g: 0,
+    r: 0,
   });
 
   return (
@@ -74,28 +74,28 @@ const Component = () => {
       onChange={(newColor) => setColor(newColor.rgb)}
       swatches={[
         {
-          a: 1, // oxlint-disable-line id-length
-          b: 0, // oxlint-disable-line id-length
-          g: 0, // oxlint-disable-line id-length
-          r: 0, // oxlint-disable-line id-length
+          a: 1,
+          b: 0,
+          g: 0,
+          r: 0,
         },
         {
-          a: 1, // oxlint-disable-line id-length
-          b: 255, // oxlint-disable-line id-length
-          g: 0, // oxlint-disable-line id-length
-          r: 0, // oxlint-disable-line id-length
+          a: 1,
+          b: 255,
+          g: 0,
+          r: 0,
         },
         {
-          a: 1, // oxlint-disable-line id-length
-          b: 0, // oxlint-disable-line id-length
-          g: 255, // oxlint-disable-line id-length
-          r: 0, // oxlint-disable-line id-length
+          a: 1,
+          b: 0,
+          g: 255,
+          r: 0,
         },
         {
-          a: 1, // oxlint-disable-line id-length
-          b: 0, // oxlint-disable-line id-length
-          g: 0, // oxlint-disable-line id-length
-          r: 255, // oxlint-disable-line id-length
+          a: 1,
+          b: 0,
+          g: 0,
+          r: 255,
         },
       ]}
     />
@@ -119,10 +119,10 @@ const Component = () => {
   const handleClose = () => setIsOpen(false);
 
   const [color, setColor] = useState({
-    a: 1, // oxlint-disable-line id-length
-    b: 0, // oxlint-disable-line id-length
-    g: 0, // oxlint-disable-line id-length
-    r: 0, // oxlint-disable-line id-length
+    a: 1,
+    b: 0,
+    g: 0,
+    r: 0,
   });
 
   return (
@@ -190,10 +190,10 @@ import { ColorPicker } from '../ColorPicker';
 
 const Component = () => {
   const [color, setColor] = useState({
-    a: 1, // oxlint-disable-line id-length
-    b: 0, // oxlint-disable-line id-length
-    g: 0, // oxlint-disable-line id-length
-    r: 0, // oxlint-disable-line id-length
+    a: 1,
+    b: 0,
+    g: 0,
+    r: 0,
   });
 
   return (

package/skills/ndl-react/components/date-picker.md

@@ -689,7 +689,7 @@ export const DatePickerWithTimeZoneBothMode = () => {
           padding: '16px',
         }}
       >
-        <Typography variant="title-4">Selected Values:</Typography>
+        <Typography variant="label">Selected Values:</Typography>
         <Typography variant="body-small">
           <strong>Date: </strong>
           {selectedDate?.toISOString() ?? 'None'}

package/skills/ndl-react/components/dropzone.md

@@ -157,11 +157,11 @@ import {
 
 // Configuration constants
 const CONFIG = {
-  ACCEPTED_EXTENSIONS: ['.txt', '.json'] as string[],
-  MAX_FILE_SIZE: 5 * 1024 * 1024, // 5MB
   MAX_FILES: 3,
+  MAX_FILE_SIZE: 5 * 1024 * 1024, // 5MB
   PROGRESS_INCREMENT: 5,
   UPDATE_INTERVAL: 100,
+  ACCEPTED_EXTENSIONS: ['.txt', '.json'] as string[],
 } as const;
 
 enum UploadState {
@@ -198,9 +198,9 @@ const Component = () => {
   const simulateUpload = useCallback((files: File[]) => {
     setUploadData((prev) => ({
       ...prev,
+      state: UploadState.Uploading,
       files,
       progress: 0,
-      state: UploadState.Uploading,
     }));
 
     const interval = setInterval(() => {
@@ -244,7 +244,7 @@ const Component = () => {
         (file) =>
           `${file.file.name}: ${file.errors.map((error) => error.message).join(', ')}`,
       );
-      setUploadData((prev) => ({ ...prev, errors, state: UploadState.Error }));
+      setUploadData((prev) => ({ ...prev, state: UploadState.Error, errors }));
     },
     [],
   );
@@ -253,8 +253,8 @@ const Component = () => {
     console.error('Dropzone error:', error);
     setUploadData((prev) => ({
       ...prev,
-      errors: [error.message],
       state: UploadState.Error,
+      errors: [error.message],
     }));
   }, []);
 
@@ -296,7 +296,7 @@ const Component = () => {
               {errors.map((message, index) => (
                 <Typography
                   key={index}
-                  variant="title-4"
+                  variant="label"
                   className="n-text-danger-text n-font-semibold"
                   htmlAttributes={{ role: 'alert' }}
                 >

package/skills/ndl-react/components/icon-button.md

@@ -141,19 +141,19 @@ const Component = () => {
         <IconButton description="Search" size="small">
           <MagnifyingGlassIconOutline />
         </IconButton>
-        <Typography variant="title-4"> Small</Typography>
+        <Typography variant="label"> Small</Typography>
       </div>
       <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
         <IconButton description="Search" size="medium">
           <MagnifyingGlassIconOutline />
         </IconButton>
-        <Typography variant="title-4"> Medium</Typography>
+        <Typography variant="label"> Medium</Typography>
       </div>
       <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
         <IconButton description="Search" size="large">
           <MagnifyingGlassIconOutline />
         </IconButton>
-        <Typography variant="title-4"> Large</Typography>
+        <Typography variant="label"> Large</Typography>
       </div>
     </div>
   );
@@ -177,13 +177,13 @@ const Component = () => {
         <IconButton description="Search" variant="neutral">
           <MagnifyingGlassIconOutline />
         </IconButton>
-        <Typography variant="title-4">Default</Typography>
+        <Typography variant="label">Default</Typography>
       </div>
       <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
         <IconButton description="Search" variant="danger">
           <MagnifyingGlassIconOutline />
         </IconButton>
-        <Typography variant="title-4">Danger</Typography>
+        <Typography variant="label">Danger</Typography>
       </div>
     </div>
   );