@neo4j-ndl/react 4.18.1 → 4.18.3

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

@@ -26,6 +26,12 @@ Where `TextInputProps` is defined in the `TextInput` component and `TimePickerPr
 
 You must provide an `aria-label` or label via the `textInputProps` prop to the underlying input element for accessibility. Use the `htmlAttributes` prop in the `textInputProps` prop to add additional attributes to the input element, not the `htmlAttributes` prop on the root level of the DatePicker component.
 
+## Keyboard interaction
+
+`Escape` closes the calendar and returns focus to the input. The key press is consumed by the date picker, so a surrounding `Dialog`, `Popover` or `Modal` stays open; a second `Escape` dismisses that ancestor.
+
+When `isClearable` is set and the input has a value, the same key press also clears the input.
+
 ## Examples
 
 ### Default
@@ -233,6 +239,54 @@ const Component = () => {
 export default Component;
 ```
 
+### In Popover Dialog
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { DatePicker, Dialog, FilledButton, Popover } from '@neo4j-ndl/react';
+import { useState } from 'react';
+
+const Component = () => {
+  const [selectedDate, setSelectedDate] = useState<Date | null>(
+    new Date('2023-05-27'),
+  );
+  const handleOnChange = (date: Date | null) => {
+    setSelectedDate(date);
+  };
+
+  return (
+    <Dialog isOpen={true} aria-label="Dialog">
+      <Dialog.Header>
+        Using Date 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">
+            <DatePicker
+              reactDatePickerProps={{
+                onChange: handleOnChange,
+                selected: selectedDate,
+              }}
+              textInputProps={{
+                htmlAttributes: {
+                  'aria-label': 'Date picker input',
+                },
+              }}
+            />
+          </Popover.Content>
+        </Popover>
+      </Dialog.Description>
+    </Dialog>
+  );
+};
+
+export default Component;
+```
+
 ### Min Max Date
 
 ```tsx