feat: support popupItem (#924)

Author: thinkasany

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);

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;

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;
 

tests/picker.spec.tsx

@@ -1355,31 +1355,38 @@ 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 />);
 
     expect(document.querySelector('.rc-picker-dropdown')).toHaveClass(customClassNames.popup);
     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(