@neo4j-ndl/react 4.18.4 → 4.18.6

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

@@ -9,7 +9,9 @@ Import: `import { ColorPicker } from '@neo4j-ndl/react'`
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `color` | `` HsvaColor \| RgbaColor \| `#${string}` `` | ✅ |  | The current color value. Can be provided in HSVA, RGBA, or Hex format. The component will automatically convert between formats as needed. |
+| `floatingStrategy` | `'absolute' \| 'fixed'` |  | `absolute` | The floating strategy to use for the menu. If not provided, the menu will be positioned absolutely. |
 | `onChange` | `` (newColor: { hex: `#${string}`; rgb: RgbaColor; hsva: HsvaColor; }) => void `` | ✅ |  | Callback function triggered when the color value changes. Receives an object containing the new color in all three formats (hex, rgb, hsva) for convenience. |
+| `portalTarget` | `HTMLElement \| null` |  |  | The target element to portal the menu to. If not provided, the menu will not be portaled. |
 | `shouldShowEyeDropper` | `boolean` |  | `true` | Whether to display the eye dropper tool that allows users to sample colors from anywhere on the screen. |
 | `swatches` | `` (HsvaColor \| RgbaColor \| `#${string}`)[] `` |  | `Object.values(tokens.graph).filter(validHex)` | Optional array of predefined color swatches for quick selection. Each swatch can be in HSVA, RGBA, or Hex format. |
 
@@ -103,6 +105,82 @@ const Component = () => {
 export default Component;
 ```
 
+### Dialog
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { ColorPicker, Dialog, FilledButton } from '@neo4j-ndl/react';
+import { useState } from 'react';
+
+const Component = () => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const handleClick = () => setIsOpen((prev) => !prev);
+  const handleClose = () => setIsOpen(false);
+
+  const [color, setColor] = useState({
+    a: 1,
+    b: 0,
+    g: 0,
+    r: 0,
+  });
+
+  return (
+    <div className="n-flex n-items-center n-justify-centern-w-full">
+      <FilledButton
+        onClick={handleClick}
+        htmlAttributes={{ 'aria-haspopup': 'dialog' }}
+      >
+        Open Dialog
+      </FilledButton>
+      <Dialog onClose={handleClose} isOpen={isOpen}>
+        <Dialog.Header>Header</Dialog.Header>
+        <Dialog.Content className="n-max-h-96 n-overflow-y-auto">
+          <ColorPicker
+            color={color}
+            onChange={(newColor) => setColor(newColor.rgb)}
+            floatingStrategy="fixed"
+          />
+        </Dialog.Content>
+      </Dialog>
+    </div>
+  );
+};
+
+export default Component;
+```
+
+### Popover
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { ColorPicker, FilledButton, Popover } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return (
+    <Popover>
+      <Popover.Trigger hasButtonWrapper>
+        <FilledButton>Open Popover</FilledButton>
+      </Popover.Trigger>
+      <Popover.Content className="n-overflow-y-auto n-overflow-x-hidden n-p-4 n-max-h-64">
+        Popover content
+        <ColorPicker
+          color="#ff0000"
+          onChange={() => {
+            console.info('color changed');
+          }}
+          floatingStrategy="fixed"
+          portalTarget={document.body}
+        />
+      </Popover.Content>
+    </Popover>
+  );
+};
+
+export default Component;
+```
+
 ### Without Eyedropper
 
 ```tsx

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

@@ -111,7 +111,7 @@ Implements the keyboard interactions defined in the [WAI-ARIA menu pattern](http
 | `Space` | Activates the focused menu item |
 | `Tab` | Closes the menu and moves focus to the next focusable element on the page |
 | `Shift + Tab` | Closes the menu and moves focus to the previous focusable element on the page |
-| `Escape` | Closes the menu and returns focus to the trigger |
+| `Escape` | Closes the full menu tree and returns focus to the trigger. The event does not propagate beyond the root menu, so enclosing overlays remain open |
 | Type-ahead | Typing a character moves focus to the next item starting with that character |
 
 ## WAI-ARIA roles and attributes
@@ -301,50 +301,51 @@ const Component = () => {
         isOpen={isModalOpen}
         onClose={handleClose}
       >
-        <div className="n-flex n-justify-center">
-          <FilledButton
-            onClick={handleMenuClick}
-            ref={anchorEl}
-            aria-haspopup="menu"
-            aria-expanded={isOpen}
-          >
-            Open Menu
-          </FilledButton>
-        </div>
-        <Menu
-          isOpen={isOpen}
-          anchorRef={anchorEl}
-          onClose={(event, _data) => {
-            setIsOpen(false);
-            event?.preventDefault();
-            event?.stopPropagation();
-          }}
-          portalTarget={document.getElementById('modal-root')}
-          htmlAttributes={{ id: 'dialog-menu' }}
-        >
-          <Menu.Item title="Undo" onClick={() => alert('Undo')} />
-          <Menu.Item title="Redo" isDisabled />
-          <Menu.Item title="Cut" description="Copy and remove" />
+        <Dialog.Header>Menu in Dialog</Dialog.Header>
+        <Dialog.Content>
+          <div className="n-flex n-justify-center">
+            <FilledButton
+              onClick={handleMenuClick}
+              ref={anchorEl}
+              aria-haspopup="menu"
+              aria-expanded={isOpen}
+            >
+              Open Menu
+            </FilledButton>
+          </div>
           <Menu
-            title="Copy as"
-            description="Copying as something"
-            icon={<Square2StackIconOutline />}
+            isOpen={isOpen}
+            anchorRef={anchorEl}
+            onClose={(_event, _data) => {
+              setIsOpen(false);
+            }}
+            portalTarget={document.getElementById('modal-root')}
+            htmlAttributes={{ id: 'dialog-menu' }}
           >
-            <Menu.Item title="Text" />
-            <Menu.Item title="Video" />
-            <Menu title="Image">
-              <Menu.Item title=".png" />
-              <Menu.Item title=".jpg" />
-              <Menu.Item title=".svg" />
-              <Menu.Item title=".gif" />
-            </Menu>
-            <Menu.Item title="Audio" />
-            <Menu title="Share">
-              <Menu.Item title="Mail" />
-              <Menu.Item title="Instagram" />
+            <Menu.Item title="Undo" onClick={() => alert('Undo')} />
+            <Menu.Item title="Redo" isDisabled />
+            <Menu.Item title="Cut" description="Copy and remove" />
+            <Menu
+              title="Copy as"
+              description="Copying as something"
+              icon={<Square2StackIconOutline />}
+            >
+              <Menu.Item title="Text" />
+              <Menu.Item title="Video" />
+              <Menu title="Image">
+                <Menu.Item title=".png" />
+                <Menu.Item title=".jpg" />
+                <Menu.Item title=".svg" />
+                <Menu.Item title=".gif" />
+              </Menu>
+              <Menu.Item title="Audio" />
+              <Menu title="Share">
+                <Menu.Item title="Mail" />
+                <Menu.Item title="Instagram" />
+              </Menu>
             </Menu>
           </Menu>
-        </Menu>
+        </Dialog.Content>
       </Dialog>
     </>
   );

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

@@ -109,6 +109,50 @@ const Component = () => {
 export default Component;
 ```
 
+### In Popover Dialog
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import {
+  Dialog,
+  FilledButton,
+  type NeedleTime,
+  Popover,
+  TimePicker,
+} from '@neo4j-ndl/react';
+import { useState } from 'react';
+
+const Component = () => {
+  const [selectedTime, setSelectedTime] = useState<NeedleTime>();
+
+  return (
+    <Dialog isOpen={true} aria-label="Dialog">
+      <Dialog.Header>
+        Using Time Picker inside a popover in a dialog
+      </Dialog.Header>
+      <Dialog.Description className="n-flex n-flex-col n-gap-token-32">
+        <Popover>
+          <Popover.Trigger hasButtonWrapper>
+            <FilledButton>Open Popover</FilledButton>
+          </Popover.Trigger>
+          <Popover.Content className="n-p-token-16">
+            <TimePicker
+              label="Select Time"
+              value={selectedTime}
+              onChange={(time) => setSelectedTime(time)}
+              htmlAttributes={{ id: 'time-picker-input' }}
+            />
+          </Popover.Content>
+        </Popover>
+      </Dialog.Description>
+    </Dialog>
+  );
+};
+
+export default Component;
+```
+
 ### With Seconds
 
 ```tsx

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

@@ -382,6 +382,49 @@ const Component = () => {
 export default Component;
 ```
 
+### In Popover Dialog
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import {
+  Dialog,
+  FilledButton,
+  Popover,
+  TimeZonePicker,
+} from '@neo4j-ndl/react';
+import { useState } from 'react';
+
+const Component = () => {
+  const [selectedTimeZone, setSelectedTimeZone] = useState<string>('UTC');
+
+  return (
+    <Dialog isOpen={true} aria-label="Dialog">
+      <Dialog.Header>
+        Using Timezone Picker inside a popover in a dialog
+      </Dialog.Header>
+      <Dialog.Description className="n-flex n-flex-col n-gap-token-32">
+        <Popover>
+          <Popover.Trigger hasButtonWrapper>
+            <FilledButton>Open Popover</FilledButton>
+          </Popover.Trigger>
+          <Popover.Content className="n-p-token-16">
+            <TimeZonePicker
+              label="Timezone"
+              value={selectedTimeZone}
+              onChange={setSelectedTimeZone}
+              htmlAttributes={{ id: 'time-zone-input' }}
+            />
+          </Popover.Content>
+        </Popover>
+      </Dialog.Description>
+    </Dialog>
+  );
+};
+
+export default Component;
+```
+
 ### Sizes
 
 ```tsx