From ea5d597d37cf01638a847ccfe5f18f121537a097 Mon Sep 17 00:00:00 2001
From: thinkasany <480968828@qq.com>
Date: Thu, 20 Mar 2025 16:06:13 +0800
Subject: [PATCH] feat: support popupItem

---
 src/PickerPanel/PanelBody.tsx |  3 ++-
 src/PickerPanel/index.tsx     |  2 +-
 src/interface.tsx             |  2 +-
 tests/picker.spec.tsx         | 10 ++++++++++
 4 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/PickerPanel/PanelBody.tsx b/src/PickerPanel/PanelBody.tsx
index f8969aebb..395cdde1f 100644
--- a/src/PickerPanel/PanelBody.tsx
+++ b/src/PickerPanel/PanelBody.tsx
@@ -127,7 +127,7 @@ export default function PanelBody<DateType extends object = any>(props: PanelBod
         <td
           key={col}
           title={title}
-          className={classNames(cellPrefixCls, {
+          className={classNames(cellPrefixCls, pickerClassNames?.popupItem, {
             [`${cellPrefixCls}-disabled`]: disabled,
             [`${cellPrefixCls}-hover`]: (hoverValue || []).some((date) =>
               isSame(generateConfig, locale, currentDate, date, type),
@@ -142,6 +142,7 @@ export default function PanelBody<DateType extends object = any>(props: PanelBod
               matchValues(currentDate),
             ...getCellClassName(currentDate),
           })}
+          style={styles?.popupItem}
           onClick={() => {
             if (!disabled) {
               onSelect(currentDate);
diff --git a/src/PickerPanel/index.tsx b/src/PickerPanel/index.tsx
index 08bd18802..68c0f5652 100644
--- a/src/PickerPanel/index.tsx
+++ b/src/PickerPanel/index.tsx
@@ -127,7 +127,7 @@ export interface SinglePickerPanelProps<DateType extends object = any>
   onChange?: (date: DateType) => void;
 }
 
-type PanelSemanticName = 'popupBody' | 'popupContent';
+type PanelSemanticName = 'popupBody' | 'popupContent' | 'popupItem';
 export type PickerPanelProps<DateType extends object = any> = BasePickerPanelProps<DateType> & {
   /** multiple selection. Not support time or datetime picker */
   multiple?: boolean;
diff --git a/src/interface.tsx b/src/interface.tsx
index 570698114..7370427c9 100644
--- a/src/interface.tsx
+++ b/src/interface.tsx
@@ -281,7 +281,7 @@ export type Components<DateType extends object = any> = Partial<
 >;
 
 // ========================= Picker =========================
-export type SemanticStructure = 'popup' | 'popupBody' | 'popupContent';
+export type SemanticStructure = 'popup' | 'popupBody' | 'popupContent' | 'popupItem';
 
 export type CustomFormat<DateType> = (value: DateType) => string;
 
diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx
index d8d51bad7..7143e803a 100644
--- a/tests/picker.spec.tsx
+++ b/tests/picker.spec.tsx
@@ -1355,11 +1355,13 @@ describe('Picker.Basic', () => {
       popup: 'custom-popup',
       popupBody: 'custom-body',
       popupContent: 'custom-content',
+      popupItem: 'custom-item',
     };
     const customStyles = {
       popup: { color: 'red' },
       popupBody: { color: 'green' },
       popupContent: { color: 'blue' },
+      popupItem: { color: 'yellow' },
     };
     render(<DayPicker classNames={customClassNames} styles={customStyles} open />);
 
@@ -1367,19 +1369,24 @@ describe('Picker.Basic', () => {
     expect(document.querySelector('.rc-picker-dropdown')).toHaveStyle(customStyles.popup);
     const content = document.querySelector('.rc-picker-content');
     const body = document.querySelector('.rc-picker-body');
+    const item = document.querySelector('.rc-picker-cell');
     expect(content).toHaveClass(customClassNames.popupContent);
     expect(content).toHaveStyle(customStyles.popupContent);
     expect(body).toHaveClass(customClassNames.popupBody);
     expect(body).toHaveStyle(customStyles.popupBody);
+    expect(item).toHaveClass(customClassNames.popupItem);
+    expect(item).toHaveStyle(customStyles.popupItem);
   });
   it('support classNames and styles for panel', () => {
     const customClassNames = {
       popupBody: 'custom-body',
       popupContent: 'custom-content',
+      popupItem: 'custom-item',
     };
     const customStyles = {
       popupBody: { color: 'green' },
       popupContent: { color: 'blue' },
+      popupItem: { color: 'yellow' },
     };
     render(
       <PickerPanel
@@ -1391,10 +1398,13 @@ describe('Picker.Basic', () => {
     );
     const content = document.querySelector('.rc-picker-content');
     const body = document.querySelector('.rc-picker-body');
+    const item = document.querySelector('.rc-picker-cell');
     expect(content).toHaveClass(customClassNames.popupContent);
     expect(content).toHaveStyle(customStyles.popupContent);
     expect(body).toHaveClass(customClassNames.popupBody);
     expect(body).toHaveStyle(customStyles.popupBody);
+    expect(item).toHaveClass(customClassNames.popupItem);
+    expect(item).toHaveStyle(customStyles.popupItem);
   });
   it('showTime config should have format', () => {
     render(