chore: update def

Author: zombieJ

src/PickerInput/RangePicker.tsx

@@ -35,6 +35,7 @@ import useRangeValue, { useInnerValue } from './hooks/useRangeValue';
 import useShowNow from './hooks/useShowNow';
 import Popup, { type PopupShowTimeConfig } from './Popup';
 import RangeSelector, { type SelectorIdType } from './Selector/RangeSelector';
+import useSemantic from '../hooks/useSemantic';
 
 function separateConfig<T>(config: T | [T, T] | null | undefined, defaultConfig: T): [T, T] {
   const singleConfig = config ?? defaultConfig;
@@ -158,8 +159,8 @@ function RangePicker<DateType extends object = any>(
   const {
     // Style
     prefixCls,
-    styles,
-    classNames,
+    styles: propStyles,
+    classNames: propClassNames,
 
     // Value
     defaultValue,
@@ -224,6 +225,9 @@ function RangePicker<DateType extends object = any>(
   // ========================= Refs =========================
   const selectorRef = usePickerRef(ref);
 
+  // ======================= Semantic =======================
+  const [mergedClassNames, mergedStyles] = useSemantic(propClassNames, propStyles);
+
   // ========================= Open =========================
   const [mergedOpen, setMergeOpen] = useOpen(open, defaultOpen, disabled, onOpenChange);
 
@@ -562,6 +566,8 @@ function RangePicker<DateType extends object = any>(
       'className',
       'onPanelChange',
       'disabledTime',
+      'classNames',
+      'styles',
     ]);
     return restProps;
   }, [filledProps]);
@@ -693,10 +699,18 @@ function RangePicker<DateType extends object = any>(
       generateConfig,
       button: components.button,
       input: components.input,
-      styles,
-      classNames,
+      classNames: mergedClassNames,
+      styles: mergedStyles,
     }),
-    [prefixCls, locale, generateConfig, components.button, components.input, classNames, styles],
+    [
+      prefixCls,
+      locale,
+      generateConfig,
+      components.button,
+      components.input,
+      mergedClassNames,
+      mergedStyles,
+    ],
   );
 
   // ======================== Effect ========================
@@ -755,8 +769,8 @@ function RangePicker<DateType extends object = any>(
       <PickerTrigger
         {...pickTriggerProps(filledProps)}
         popupElement={panel}
-        popupStyle={styles.popup}
-        popupClassName={classNames.popup}
+        popupStyle={mergedStyles.popup.root}
+        popupClassName={mergedClassNames.popup.root}
         // Visible
         visible={mergedOpen}
         onClose={onPopupClose}

src/PickerInput/SinglePicker.tsx

@@ -31,6 +31,7 @@ import useRangeValue, { useInnerValue } from './hooks/useRangeValue';
 import useShowNow from './hooks/useShowNow';
 import Popup from './Popup';
 import SingleSelector from './Selector/SingleSelector';
+import useSemantic from '../hooks/useSemantic';
 
 // TODO: isInvalidateDate with showTime.disabledTime should not provide `range` prop
 
@@ -122,8 +123,8 @@ function Picker<DateType extends object = any>(
   const {
     // Style
     prefixCls,
-    styles,
-    classNames,
+    styles: propStyles,
+    classNames: propClassNames,
 
     // Value
     order,
@@ -202,6 +203,9 @@ function Picker<DateType extends object = any>(
 
   const toggleDates = useToggleDates(generateConfig, locale, internalPicker);
 
+  // ======================= Semantic =======================
+  const [mergedClassNames, mergedStyles] = useSemantic(propClassNames, propStyles);
+
   // ========================= Open =========================
   const [mergedOpen, triggerOpen] = useOpen(open, defaultOpen, [disabled], onOpenChange);
 
@@ -478,6 +482,8 @@ function Picker<DateType extends object = any>(
       'style',
       'className',
       'onPanelChange',
+      'classNames',
+      'styles',
     ]);
     return {
       ...restProps,
@@ -577,10 +583,18 @@ function Picker<DateType extends object = any>(
       generateConfig,
       button: components.button,
       input: components.input,
-      styles,
-      classNames,
+      classNames: mergedClassNames,
+      styles: mergedStyles,
     }),
-    [prefixCls, locale, generateConfig, components.button, components.input, styles, classNames],
+    [
+      prefixCls,
+      locale,
+      generateConfig,
+      components.button,
+      components.input,
+      mergedClassNames,
+      mergedStyles,
+    ],
   );
 
   // ======================== Effect ========================
@@ -615,8 +629,8 @@ function Picker<DateType extends object = any>(
       <PickerTrigger
         {...pickTriggerProps(filledProps)}
         popupElement={panel}
-        popupStyle={styles.popup}
-        popupClassName={classNames.popup}
+        popupStyle={mergedStyles.popup.root}
+        popupClassName={mergedClassNames.popup.root}
         // Visible
         visible={mergedOpen}
         onClose={onPopupClose}

src/PickerInput/context.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import type { GenerateConfig } from '../generate';
-import type { Components, Locale, SemanticStructure } from '../interface';
+import type { Components, Locale } from '../interface';
+import type { FilledClassNames, FilledStyles } from '../hooks/useSemantic';
 
 export interface PickerContextProps<DateType = any> {
   prefixCls: string;
@@ -9,8 +10,8 @@ export interface PickerContextProps<DateType = any> {
   /** Customize button component */
   button?: Components['button'];
   input?: Components['input'];
-  styles?: Partial<Record<SemanticStructure, React.CSSProperties>>;
-  classNames?: Partial<Record<SemanticStructure, string>>;
+  classNames: FilledClassNames;
+  styles: FilledStyles;
 }
 
 const PickerContext = React.createContext<PickerContextProps>(null!);

src/hooks/useSemantic.ts

@@ -0,0 +1,32 @@
+import { useMemo } from 'react';
+import type { SharedPickerProps } from '../interface';
+
+export type FilledClassNames = NonNullable<SharedPickerProps['classNames']> & {
+  popup: NonNullable<SharedPickerProps['classNames']>['popup'];
+};
+
+export type FilledStyles = NonNullable<SharedPickerProps['styles']> & {
+  popup: NonNullable<SharedPickerProps['styles']>['popup'];
+};
+
+/**
+ * Convert `classNames` & `styles` to a fully filled object
+ */
+export default function useSemantic(
+  classNames?: SharedPickerProps['classNames'],
+  styles?: SharedPickerProps['styles'],
+) {
+  return useMemo(() => {
+    const mergedClassNames: FilledClassNames = {
+      ...classNames,
+      popup: classNames?.popup || {},
+    };
+
+    const mergedStyles: FilledStyles = {
+      ...styles,
+      popup: styles?.popup || {},
+    };
+
+    return [mergedClassNames, mergedStyles] as const;
+  }, [classNames, styles]);
+}