@neo4j-ndl/react 4.18.5 → 4.18.7

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