feat: add semantic for popup container

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', () => {