@neo4j-ndl/react 5.0.1 → 5.1.0

package/lib/types/operational-tag/stories/operational-tag-default.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=operational-tag-default.story.d.ts.map

package/lib/types/operational-tag/stories/operational-tag-default.story.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"operational-tag-default.story.d.ts","sourceRoot":"","sources":["../../../../src/operational-tag/stories/operational-tag-default.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAIjD,QAAA,MAAM,SAAS,+CAEd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/types/operational-tag/stories/operational-tag-disabled.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=operational-tag-disabled.story.d.ts.map

package/lib/types/operational-tag/stories/operational-tag-disabled.story.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"operational-tag-disabled.story.d.ts","sourceRoot":"","sources":["../../../../src/operational-tag/stories/operational-tag-disabled.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAIjD,QAAA,MAAM,SAAS,+CAEd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/types/operational-tag/stories/operational-tag-sizes.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=operational-tag-sizes.story.d.ts.map

package/lib/types/operational-tag/stories/operational-tag-sizes.story.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"operational-tag-sizes.story.d.ts","sourceRoot":"","sources":["../../../../src/operational-tag/stories/operational-tag-sizes.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAIjD,QAAA,MAAM,SAAS,+CASd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/types/operational-tag/stories/operational-tag-truncation.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=operational-tag-truncation.story.d.ts.map

package/lib/types/operational-tag/stories/operational-tag-truncation.story.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"operational-tag-truncation.story.d.ts","sourceRoot":"","sources":["../../../../src/operational-tag/stories/operational-tag-truncation.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAOjD,QAAA,MAAM,SAAS,+CAWd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/types/operational-tag/stories/operational-tag-with-leading-color.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=operational-tag-with-leading-color.story.d.ts.map

package/lib/types/operational-tag/stories/operational-tag-with-leading-color.story.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"operational-tag-with-leading-color.story.d.ts","sourceRoot":"","sources":["../../../../src/operational-tag/stories/operational-tag-with-leading-color.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAIjD,QAAA,MAAM,SAAS,+CAMd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/types/operational-tag/stories/operational-tag-with-leading-icon.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=operational-tag-with-leading-icon.story.d.ts.map

package/lib/types/operational-tag/stories/operational-tag-with-leading-icon.story.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"operational-tag-with-leading-icon.story.d.ts","sourceRoot":"","sources":["../../../../src/operational-tag/stories/operational-tag-with-leading-icon.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAKjD,QAAA,MAAM,SAAS,+CAMd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/types/tag-base/stories/tag-variants.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tag-variants.story.d.ts","sourceRoot":"","sources":["../../../../src/tag-base/stories/tag-variants.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAKjD,QAAA,MAAM,SAAS,+CAmBd,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"tag-variants.story.d.ts","sourceRoot":"","sources":["../../../../src/tag-base/stories/tag-variants.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAUjD,QAAA,MAAM,SAAS,+CAsBd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-ndl/react",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "sideEffects": false,
   "description": "React implementation of Neo4j Design System",
   "keywords": [
@@ -217,6 +217,11 @@
       "require": "./lib/cjs/next/index.js",
       "import": "./lib/esm/next/index.js"
     },
+    "./operational-tag": {
+      "types": "./lib/types/operational-tag/index.d.ts",
+      "require": "./lib/cjs/operational-tag/index.js",
+      "import": "./lib/esm/operational-tag/index.js"
+    },
     "./outlined-button": {
       "types": "./lib/types/outlined-button/index.d.ts",
       "require": "./lib/cjs/outlined-button/index.js",
@@ -424,7 +429,7 @@
     "@tanstack/react-table": "8.21.3",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
-    "@neo4j-ndl/base": "^5.0.1"
+    "@neo4j-ndl/base": "^5.1.0"
   },
   "dependencies": {
     "@dnd-kit/core": "6.3.1",

package/skills/ndl-react/SKILL.md

@@ -2,7 +2,7 @@
 name: ndl-react
 metadata:
   package: '@neo4j-ndl/react'
-  version: '5.0.1'
+  version: '5.1.0'
 description: >-
   Build and edit UI with the Neo4j Needle React design system
   (@neo4j-ndl/react). Use when adding, composing, or modifying Needle components
@@ -15,7 +15,7 @@ description: >-
 
 # Neo4j Needle (@neo4j-ndl/react)
 
-> 📌 Shipped with `@neo4j-ndl/react` v5.0.1. Once installed into your repo (e.g. via
+> 📌 Shipped with `@neo4j-ndl/react` v5.1.0. Once installed into your repo (e.g. via
 > `npx skills add`) this folder is detached from the package — the installed
 > package (TypeScript types in `node_modules/@neo4j-ndl/react`) is the source of
 > truth.
@@ -121,7 +121,7 @@ not a lookalike you now own.
 Each button variant is a distinct component with its own visual language.
 Don't take a `FilledButton` and restyle it to look like an `OutlinedButton` —
 use `OutlinedButton` directly. Same for tags (`Tag`, `SelectableTag`,
-`DismissibleTag`, `ReadOnlyTag`), and any other variant family.
+`DismissibleTag`, `ReadOnlyTag`, `OperationalTag`), and any other variant family.
 
 ## How to use this skill
 
@@ -175,6 +175,7 @@ Import from `@neo4j-ndl/react`.
 | `Logo` | [components/logo.md](components/logo.md) |  | 3 |
 | `Menu` | [components/menu.md](components/menu.md) | ✅ | 13 |
 | `Modal` | [components/modal.md](components/modal.md) | ✅ | 0 |
+| `OperationalTag` | [components/operational-tag.md](components/operational-tag.md) | ✅ | 7 |
 | `OutlinedButton` | [components/outlined-button.md](components/outlined-button.md) |  | 0 |
 | `Popover` | [components/popover.md](components/popover.md) | ✅ | 6 |
 | `ProgressBar` | [components/progress-bar.md](components/progress-bar.md) | ✅ | 3 |

package/skills/ndl-react/components/operational-tag.md

@@ -0,0 +1,187 @@
+[//]: # (This file is auto-generated by the docs:generate-skills script, do not edit it manually)
+
+# OperationalTag
+
+Import: `import { OperationalTag } from '@neo4j-ndl/react'`
+
+## Props
+
+### OperationalTag
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `ReactNode` |  |  | The content of the tag |
+| `isActive` | `boolean` |  |  | Whether the tag is in an active (pressed) state |
+| `isDisabled` | `boolean` |  | `false` | Whether the tag is disabled |
+| `leadingColor` | `Color` |  |  | Decorative color shown before the content to help users recognize the item. It carries no meaning of its own and is hidden from assistive technology, so the tag text must identify the item. Accepts a CSS variable or a hex color. |
+| `leadingVisual` | `ReactNode` |  |  | Icon to display before the content |
+| `onClick` | `MouseEventHandler<HTMLButtonElement>` |  |  | Callback fired when the tag is clicked |
+| `ref` | `Ref<HTMLButtonElement>` |  |  | A ref to apply to the root element. |
+| `size` | `'large' \| 'medium' \| 'small' \| 'x-small'` |  | `medium` | Size of the tag |
+
+Clickable tag for actions and for identifying an item with a color or icon.
+For choosing from a set of options, use `SelectableTag`.
+
+## Accessibility
+
+## Keyboard interactions
+
+The tag renders as a native `<button>` so it uses standard button keyboard behavior.
+
+| Key           | Description                                     |
+| ------------- | ----------------------------------------------- |
+| `Tab`         | Moves focus to the tag                          |
+| `Shift + Tab` | Moves focus to the previous focusable element   |
+| `Enter`       | Activates the tag (calls `onClick` if provided) |
+| `Space`       | Activates the tag (calls `onClick` if provided) |
+
+A disabled tag (`isDisabled`) uses the native `disabled` attribute. It is removed from the tab order and cannot be activated.
+
+## WAI-ARIA roles and attributes
+
+- The root is a `<button type="button">` which gives it the `button` role and an accessible name from its text content.
+- `aria-pressed` is only set when `isActive` is explicitly provided: `true` when active, `false` when `isActive={false}`. It is omitted when `isActive` is not passed, so a plain action tag is not announced as a toggle button.
+- The leading color dot is decorative and has `aria-hidden="true"`. It is not announced by screen readers.
+- The leading visual is not given a label by the component. Provide meaning through the tag text, or make sure the icon is decorative.
+
+## Implementation guidelines
+
+- `leadingColor` is a recognition aid, not a way to convey information. Use it for things like a color a user has picked for a database or instance. The tag text must always identify the item, because the color is hidden from assistive technology and can't be perceived by everyone, including people with color vision deficiency. Do not use it to show status, category, or any other meaning.
+- Choose custom colors with enough contrast against the tag background in both themes. A color close to the background (for example white on white) can make the dot invisible. Prefer a design token (for example `var(--categorical-1)`), which is defined for each theme.
+- Only pass `isActive` when the tag represents a toggled state (a selected filter). Otherwise leave it out so it is not announced as pressed or not pressed.
+- Text that is truncated is cut with an ellipsis. Make sure the full text is available elsewhere (for example in a tooltip) when it carries meaning (see the Truncation story).
+
+### Related WCAG criteria
+
+- [1.4.1 Use of Color](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html) (A): The leading color must not be the only means of conveying information.
+- [1.4.11 Non-text Contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html) (AA): Custom leading colors need sufficient contrast against the tag background.
+- [2.1.1 Keyboard](https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html) (A): The tag is a native button and fully keyboard operable.
+- [4.1.2 Name, Role, Value](https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html) (A): The role comes from the native `<button>`, the name from the text content, and `aria-pressed` conveys the active state.
+
+## Examples
+
+### Default
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { OperationalTag } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return <OperationalTag>Operational Tag</OperationalTag>;
+};
+
+export default Component;
+```
+
+### Active
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { OperationalTag } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return <OperationalTag isActive>Active operational tag</OperationalTag>;
+};
+
+export default Component;
+```
+
+### Disabled
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { OperationalTag } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return <OperationalTag isDisabled>Disabled operational tag</OperationalTag>;
+};
+
+export default Component;
+```
+
+### Sizes
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { OperationalTag } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return (
+    <div className="flex flex-row gap-token-8">
+      <OperationalTag size="x-small">X-Small</OperationalTag>
+      <OperationalTag size="small">Small</OperationalTag>
+      <OperationalTag size="medium">Medium</OperationalTag>
+      <OperationalTag size="large">Large</OperationalTag>
+    </div>
+  );
+};
+
+export default Component;
+```
+
+### Truncation
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { OperationalTag, Tooltip } from '@neo4j-ndl/react';
+
+const label =
+  'This is a very very very long tag label that should be truncated';
+
+const Component = () => {
+  return (
+    <div style={{ maxWidth: 200 }}>
+      <Tooltip type="simple">
+        <Tooltip.Trigger hasButtonWrapper>
+          <OperationalTag>{label}</OperationalTag>
+        </Tooltip.Trigger>
+        <Tooltip.Content>{label}</Tooltip.Content>
+      </Tooltip>
+    </div>
+  );
+};
+
+export default Component;
+```
+
+### With Leading Color
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { OperationalTag } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return (
+    <OperationalTag leadingColor="var(--categorical-1)">
+      Operational Tag with leading color
+    </OperationalTag>
+  );
+};
+
+export default Component;
+```
+
+### With Leading Icon
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { OperationalTag } from '@neo4j-ndl/react';
+import { DatabasePlusIcon } from '@neo4j-ndl/react/icons';
+
+const Component = () => {
+  return (
+    <OperationalTag leadingVisual={<DatabasePlusIcon />}>
+      Operational Tag with leading icon
+    </OperationalTag>
+  );
+};
+
+export default Component;
+```