[pickers] Add optional id attribute on shortcut items (mui#12976)

DungTiger · Jul 23, 2024 · 1359339 · 1359339
1 parent fe9b683
commit 1359339
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git 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
@@ -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,
     }),
   ),