From 135933990c5412681575baf7977b5adbec87cf75 Mon Sep 17 00:00:00 2001
From: Nora <72460825+noraleonte@users.noreply.github.com>
Date: Mon, 6 May 2024 13:51:47 +0300
Subject: [PATCH] [pickers] Add optional `id` attribute on shortcut items
 (#12976)

---
 docs/pages/x/api/date-pickers/pickers-shortcuts.json     | 2 +-
 .../src/PickersShortcuts/PickersShortcuts.tsx            | 9 ++++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/docs/pages/x/api/date-pickers/pickers-shortcuts.json b/docs/pages/x/api/date-pickers/pickers-shortcuts.json
index dd402f9066e1c..5aff32c051480 100644
--- a/docs/pages/x/api/date-pickers/pickers-shortcuts.json
+++ b/docs/pages/x/api/date-pickers/pickers-shortcuts.json
@@ -9,7 +9,7 @@
     "items": {
       "type": {
         "name": "arrayOf",
-        "description": "Array&lt;{ getValue: func, label: string }&gt;"
+        "description": "Array&lt;{ getValue: func, id?: string, label: string }&gt;"
       },
       "default": "[]"
     },
diff --git a/packages/x-date-pickers/src/PickersShortcuts/PickersShortcuts.tsx b/packages/x-date-pickers/src/PickersShortcuts/PickersShortcuts.tsx
index 85d88255963bb..b0b943ef46d13 100644
--- a/packages/x-date-pickers/src/PickersShortcuts/PickersShortcuts.tsx
+++ b/packages/x-date-pickers/src/PickersShortcuts/PickersShortcuts.tsx
@@ -12,6 +12,11 @@ interface PickersShortcutsItemGetValueParams<TValue> {
 export interface PickersShortcutsItem<TValue> {
   label: string;
   getValue: (params: PickersShortcutsItemGetValueParams<TValue>) => TValue;
+  /**
+   * Identifier of the shortcut.
+   * If provided, it will be used as the key of the shortcut.
+   */
+  id?: string;
 }
 
 export type PickersShortcutsItemContext = Omit<PickersShortcutsItem<unknown>, 'getValue'>;
@@ -64,6 +69,7 @@ function PickersShortcuts<TValue>(props: PickersShortcutsProps<TValue>) {
     const newValue = getValue({ isValid });
 
     return {
+      ...item,
       label: item.label,
       onClick: () => {
         onChange(newValue, changeImportance, item);
@@ -87,7 +93,7 @@ function PickersShortcuts<TValue>(props: PickersShortcutsProps<TValue>) {
     >
       {resolvedItems.map((item) => {
         return (
-          <ListItem key={item.label}>
+          <ListItem key={item.id ?? item.label}>
             <Chip {...item} />
           </ListItem>
         );
@@ -132,6 +138,7 @@ PickersShortcuts.propTypes = {
   items: PropTypes.arrayOf(
     PropTypes.shape({
       getValue: PropTypes.func.isRequired,
+      id: PropTypes.string,
       label: PropTypes.string.isRequired,
     }),
   ),