feat: add semantic for popup container (#945)

* feat: add semantic for popup container

* feat: adjust code

Author: meet-student

docs/examples/basic.tsx

@@ -59,6 +59,17 @@ export default () => {
             className="little"
             classNames={{
               root: 'light',
+              popup: {
+                container: 'popup-c',
+              },
+            }}
+            open
+            styles={{
+              popup: {
+                container: {
+                  backgroundColor: 'red',
+                },
+              },
             }}
           />
           <Picker<Moment> {...sharedProps} locale={enUS} />

package.json

@@ -40,7 +40,7 @@
   },
   "dependencies": {
     "@rc-component/resize-observer": "^1.0.0",
-    "@rc-component/trigger": "^3.0.0",
+    "@rc-component/trigger": "^3.6.15",
     "@rc-component/util": "^1.3.0",
     "clsx": "^2.1.1",
     "rc-overflow": "^1.3.2"

src/PickerInput/Popup/index.tsx

@@ -45,6 +45,9 @@ export interface PopupProps<DateType extends object = any, PresetValue = DateTyp
   onOk: VoidFunction;
 
   onPanelMouseDown?: React.MouseEventHandler<HTMLDivElement>;
+
+  classNames?: SharedPickerProps['classNames'];
+  styles?: SharedPickerProps['styles'];
 }
 
 export default function Popup<DateType extends object = any>(props: PopupProps<DateType>) {
@@ -79,6 +82,8 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
     defaultOpenValue,
     onOk,
     onSubmit,
+    classNames,
+    styles,
   } = props;
 
   const { prefixCls } = React.useContext(PickerContext);
@@ -217,10 +222,12 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
         containerPrefixCls,
         // Used for Today Button style, safe to remove if no need
         `${prefixCls}-${internalMode}-panel-container`,
+        classNames?.popup?.container,
       )}
       style={{
         [rtl ? marginRight : marginLeft]: containerOffset,
         [rtl ? marginLeft : marginRight]: 'auto',
+        ...styles?.popup?.container,
       }}
       // Still wish not to lose focus on mouse down
       // onMouseDown={(e) => {

src/PickerInput/RangePicker.tsx

@@ -626,6 +626,9 @@ function RangePicker<DateType extends object = any>(
       onNow={onNow}
       // Render
       cellRender={onInternalCellRender}
+      // Styles
+      classNames={mergedClassNames}
+      styles={mergedStyles}
     />
   );
 

src/PickerInput/SinglePicker.tsx

@@ -540,6 +540,9 @@ function Picker<DateType extends object = any>(
       onNow={onNow}
       // Render
       cellRender={onInternalCellRender}
+      // Styles
+      classNames={mergedClassNames}
+      styles={mergedStyles}
     />
   );
 

src/interface.tsx

@@ -315,7 +315,14 @@ export type SemanticName = 'root' | 'prefix' | 'input' | 'suffix';
 
 export type PreviewValueType = 'hover';
 
-export type PanelSemanticName = 'root' | 'header' | 'body' | 'content' | 'item' | 'footer';
+export type PanelSemanticName =
+  | 'root'
+  | 'header'
+  | 'body'
+  | 'content'
+  | 'item'
+  | 'footer'
+  | 'container';
 
 export interface SharedPickerProps<DateType extends object = any>
   extends SharedHTMLAttrs,

tests/picker.spec.tsx

@@ -1358,8 +1358,10 @@ describe('Picker.Basic', () => {
       content: 'custom-content',
       item: 'custom-item',
       footer: 'custom-footer',
+      container: 'custom-container',
     };
     const popupStyles = {
+      container: { backgroundColor: 'red' },
       root: { color: 'red' },
       header: { color: 'purple' },
       body: { color: 'green' },
@@ -1387,6 +1389,7 @@ describe('Picker.Basic', () => {
     const content = document.querySelector('.rc-picker-content');
     const item = document.querySelector('.rc-picker-cell');
     const footer = document.querySelector('.rc-picker-footer');
+    const container = document.querySelector('.rc-picker-panel-container');
 
     expect(header).toHaveClass(popupClassNames.header);
     expect(header).toHaveStyle(popupStyles.header);
@@ -1398,6 +1401,8 @@ describe('Picker.Basic', () => {
     expect(item).toHaveStyle(popupStyles.item);
     expect(footer).toHaveClass(popupClassNames.footer);
     expect(footer).toHaveStyle(popupStyles.footer);
+    expect(container).toHaveClass(popupClassNames.container);
+    expect(container).toHaveStyle(popupStyles.container);
   });
 
   it('support classNames and styles for panel', () => {