@rc-component/picker 1.2.3 → 1.3.0

package/es/PickerPanel/index.js

@@ -25,7 +25,7 @@ import PickerContext from "../PickerInput/context";
 import useCellRender from "../PickerInput/hooks/useCellRender";
 import { isSame } from "../utils/dateUtil";
 import { pickProps, toArray } from "../utils/miscUtil";
-import { PickerHackContext } from "./context";
+import { PickerHackContext, SharedPanelContext } from "./context";
 import DatePanel from "./DatePanel";
 import DateTimePanel from "./DateTimePanel";
 import DecadePanel from "./DecadePanel";
@@ -255,16 +255,19 @@ function PickerPanel(props, ref) {
   var PanelComponent = components[internalMode] || DefaultComponents[internalMode] || DatePanel;
 
   // ======================== Context =========================
-  var mergedStyles = pickerStyles !== null && pickerStyles !== void 0 ? pickerStyles : panelStyles;
-  var mergedClassNames = pickerClassNames !== null && pickerClassNames !== void 0 ? pickerClassNames : panelClassNames;
+  var sharedPanelContext = React.useMemo(function () {
+    var _ref2, _pickerClassNames$pop, _ref3, _pickerStyles$popup;
+    return {
+      classNames: (_ref2 = (_pickerClassNames$pop = pickerClassNames === null || pickerClassNames === void 0 ? void 0 : pickerClassNames.popup) !== null && _pickerClassNames$pop !== void 0 ? _pickerClassNames$pop : panelClassNames) !== null && _ref2 !== void 0 ? _ref2 : {},
+      styles: (_ref3 = (_pickerStyles$popup = pickerStyles === null || pickerStyles === void 0 ? void 0 : pickerStyles.popup) !== null && _pickerStyles$popup !== void 0 ? _pickerStyles$popup : panelStyles) !== null && _ref3 !== void 0 ? _ref3 : {}
+    };
+  }, [pickerClassNames, panelClassNames, pickerStyles, panelStyles]);
   var parentHackContext = React.useContext(PickerHackContext);
   var pickerPanelContext = React.useMemo(function () {
     return _objectSpread(_objectSpread({}, parentHackContext), {}, {
-      hideHeader: hideHeader,
-      classNames: mergedClassNames,
-      styles: mergedStyles
+      hideHeader: hideHeader
     });
-  }, [parentHackContext, hideHeader, mergedClassNames, mergedStyles]);
+  }, [parentHackContext, hideHeader]);
 
   // ======================== Warnings ========================
   if (process.env.NODE_ENV !== 'production') {
@@ -284,7 +287,9 @@ function PickerPanel(props, ref) {
   'disabledDate', 'minDate', 'maxDate',
   // Hover
   'onHover']);
-  return /*#__PURE__*/React.createElement(PickerHackContext.Provider, {
+  return /*#__PURE__*/React.createElement(SharedPanelContext.Provider, {
+    value: sharedPanelContext
+  }, /*#__PURE__*/React.createElement(PickerHackContext.Provider, {
     value: pickerPanelContext
   }, /*#__PURE__*/React.createElement("div", {
     ref: rootRef,
@@ -317,7 +322,7 @@ function PickerPanel(props, ref) {
     ,
     hoverRangeValue: hoverRangeDate,
     hoverValue: hoverValue
-  }))));
+  })))));
 }
 var RefPanelPicker = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(PickerPanel));
 if (process.env.NODE_ENV !== 'production') {

package/es/hooks/useSemantic.d.ts

@@ -0,0 +1,13 @@
+import type { SharedPickerProps } from '../interface';
+export type FilledPanelClassNames = NonNullable<SharedPickerProps['classNames']>['popup'];
+export type FilledPanelStyles = NonNullable<SharedPickerProps['styles']>['popup'];
+export type FilledClassNames = NonNullable<SharedPickerProps['classNames']> & {
+    popup: FilledPanelClassNames;
+};
+export type FilledStyles = NonNullable<SharedPickerProps['styles']> & {
+    popup: FilledPanelStyles;
+};
+/**
+ * Convert `classNames` & `styles` to a fully filled object
+ */
+export default function useSemantic(classNames?: SharedPickerProps['classNames'], styles?: SharedPickerProps['styles']): readonly [FilledClassNames, FilledStyles];

package/es/hooks/useSemantic.js

@@ -0,0 +1,21 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { useMemo } from 'react';
+/**
+ * Convert `classNames` & `styles` to a fully filled object
+ */
+export default function useSemantic(classNames, styles) {
+  return useMemo(function () {
+    var mergedClassNames = _objectSpread(_objectSpread({}, classNames), {}, {
+      popup: (classNames === null || classNames === void 0 ? void 0 : classNames.popup) || {}
+    });
+    var mergedStyles = _objectSpread(_objectSpread({}, styles), {}, {
+      popup: (styles === null || styles === void 0 ? void 0 : styles.popup) || {}
+    });
+    return [mergedClassNames, mergedStyles];
+  }, [classNames, styles]);
+}

package/es/interface.d.ts

@@ -201,19 +201,25 @@ export type Components<DateType extends object = any> = Partial<Record<InternalM
     button?: React.ComponentType<any> | string;
     input?: React.ComponentType<any> | string;
 }>;
-export type SemanticStructure = 'popup' | 'popupBody' | 'popupContent' | 'popupItem';
 export type CustomFormat<DateType> = (value: DateType) => string;
 export type FormatType<DateType = any> = string | CustomFormat<DateType>;
 export type SharedHTMLAttrs = Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange' | 'placeholder' | 'id' | 'onInvalid' | 'disabled' | 'onFocus' | 'onBlur' | 'onSelect' | 'min' | 'max' | 'onKeyDown' | 'size' | 'prefix'>;
 export type PickerFocusEventHandler = (e: React.FocusEvent<HTMLElement>, info: BaseInfo) => void;
 export type LegacyOnKeyDown = (event: React.KeyboardEvent<HTMLElement>, preventDefault: VoidFunction) => void;
+export type SemanticName = 'root' | 'prefix' | 'input' | 'suffix';
+export type PanelSemanticName = 'root' | 'header' | 'body' | 'content' | 'item' | 'footer';
 export interface SharedPickerProps<DateType extends object = any> extends SharedHTMLAttrs, Pick<SharedPanelProps<DateType>, 'prevIcon' | 'nextIcon' | 'superPrevIcon' | 'superNextIcon'> {
     direction?: 'ltr' | 'rtl';
     prefixCls?: string;
     className?: string;
     style?: React.CSSProperties;
-    styles?: Partial<Record<SemanticStructure, React.CSSProperties>>;
-    classNames?: Partial<Record<SemanticStructure, string>>;
+    rootClassName?: string;
+    styles?: Partial<Record<SemanticName, React.CSSProperties>> & {
+        popup?: Partial<Record<PanelSemanticName, React.CSSProperties>>;
+    };
+    classNames?: Partial<Record<SemanticName, string>> & {
+        popup?: Partial<Record<PanelSemanticName, string>>;
+    };
     locale: Locale;
     generateConfig: GenerateConfig<DateType>;
     picker?: PickerMode;

package/es/utils/getClearIcon.d.ts

@@ -2,4 +2,4 @@ import type { ReactNode } from "react";
 import React from "react";
 export declare function getClearIcon(prefixCls: string, allowClear?: boolean | {
     clearIcon?: ReactNode;
-}, clearIcon?: ReactNode): string | number | true | Iterable<ReactNode> | React.JSX.Element;
+}, clearIcon?: ReactNode): string | number | true | React.JSX.Element | Iterable<ReactNode>;

package/lib/PickerInput/Popup/Footer.js

@@ -34,7 +34,9 @@ function Footer(props) {
     prefixCls = _React$useContext.prefixCls,
     locale = _React$useContext.locale,
     _React$useContext$but = _React$useContext.button,
-    Button = _React$useContext$but === void 0 ? 'button' : _React$useContext$but;
+    Button = _React$useContext$but === void 0 ? 'button' : _React$useContext$but,
+    classNames = _React$useContext.classNames,
+    styles = _React$useContext.styles;
 
   // >>> Now
   var now = generateConfig.getNow();
@@ -81,7 +83,8 @@ function Footer(props) {
     return null;
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-footer")
+    className: (0, _classnames.default)("".concat(prefixCls, "-footer"), classNames.popup.footer),
+    style: styles.popup.footer
   }, extraNode && /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-footer-extra")
   }, extraNode), rangeNode);

package/lib/PickerInput/RangePicker.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _util = require("@rc-component/util");
+var _classnames = _interopRequireDefault(require("classnames"));
 var _useLayoutEffect = _interopRequireDefault(require("@rc-component/util/lib/hooks/useLayoutEffect"));
 var _omit = _interopRequireDefault(require("@rc-component/util/lib/omit"));
 var _pickAttrs = _interopRequireDefault(require("@rc-component/util/lib/pickAttrs"));
@@ -28,6 +29,7 @@ var _useRangeValue3 = _interopRequireWildcard(require("./hooks/useRangeValue"));
 var _useShowNow = _interopRequireDefault(require("./hooks/useShowNow"));
 var _Popup = _interopRequireDefault(require("./Popup"));
 var _RangeSelector = _interopRequireDefault(require("./Selector/RangeSelector"));
+var _useSemantic3 = _interopRequireDefault(require("../hooks/useSemantic"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -80,8 +82,9 @@ function RangePicker(props, ref) {
     maskFormat = _useFilledProps2[4],
     isInvalidateDate = _useFilledProps2[5];
   var prefixCls = filledProps.prefixCls,
-    styles = filledProps.styles,
-    classNames = filledProps.classNames,
+    rootClassName = filledProps.rootClassName,
+    propStyles = filledProps.styles,
+    propClassNames = filledProps.classNames,
     defaultValue = filledProps.defaultValue,
     value = filledProps.value,
     needConfirm = filledProps.needConfirm,
@@ -122,6 +125,12 @@ function RangePicker(props, ref) {
   // ========================= Refs =========================
   var selectorRef = (0, _usePickerRef.default)(ref);
 
+  // ======================= Semantic =======================
+  var _useSemantic = (0, _useSemantic3.default)(propClassNames, propStyles),
+    _useSemantic2 = _slicedToArray(_useSemantic, 2),
+    mergedClassNames = _useSemantic2[0],
+    mergedStyles = _useSemantic2[1];
+
   // ========================= Open =========================
   var _useOpen = (0, _useOpen3.default)(open, defaultOpen, disabled, onOpenChange),
     _useOpen2 = _slicedToArray(_useOpen, 2),
@@ -410,7 +419,7 @@ function RangePicker(props, ref) {
   });
   var panelProps = React.useMemo(function () {
     var domProps = (0, _pickAttrs.default)(filledProps, false);
-    var restProps = (0, _omit.default)(filledProps, [].concat(_toConsumableArray(Object.keys(domProps)), ['onChange', 'onCalendarChange', 'style', 'className', 'onPanelChange', 'disabledTime']));
+    var restProps = (0, _omit.default)(filledProps, [].concat(_toConsumableArray(Object.keys(domProps)), ['onChange', 'onCalendarChange', 'style', 'className', 'onPanelChange', 'disabledTime', 'classNames', 'styles']));
     return restProps;
   }, [filledProps]);
 
@@ -534,10 +543,10 @@ function RangePicker(props, ref) {
       generateConfig: generateConfig,
       button: components.button,
       input: components.input,
-      styles: styles,
-      classNames: classNames
+      classNames: mergedClassNames,
+      styles: mergedStyles
     };
-  }, [prefixCls, locale, generateConfig, components.button, components.input, classNames, styles]);
+  }, [prefixCls, locale, generateConfig, components.button, components.input, mergedClassNames, mergedStyles]);
 
   // ======================== Effect ========================
   // >>> Mode
@@ -588,8 +597,8 @@ function RangePicker(props, ref) {
     value: context
   }, /*#__PURE__*/React.createElement(_PickerTrigger.default, _extends({}, (0, _util2.pickTriggerProps)(filledProps), {
     popupElement: panel,
-    popupStyle: styles.popup,
-    popupClassName: classNames.popup
+    popupStyle: mergedStyles.popup.root,
+    popupClassName: (0, _classnames.default)(rootClassName, mergedClassNames.popup.root)
     // Visible
     ,
     visible: mergedOpen,
@@ -602,6 +611,10 @@ function RangePicker(props, ref) {
   , _extends({}, filledProps, {
     // Ref
     ref: selectorRef
+    // Style
+    ,
+    className: (0, _classnames.default)(filledProps.className, rootClassName, mergedClassNames.root),
+    style: _objectSpread(_objectSpread({}, mergedStyles.root), filledProps.style)
     // Icon
     ,
     suffixIcon: suffixIcon

package/lib/PickerInput/Selector/Icon.js

@@ -8,6 +8,7 @@ exports.ClearIcon = ClearIcon;
 exports.default = Icon;
 var React = _interopRequireWildcard(require("react"));
 var _context = _interopRequireDefault(require("../context"));
+var _classnames = _interopRequireDefault(require("classnames"));
 var _excluded = ["icon", "type"],
   _excluded2 = ["onClear"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -21,9 +22,12 @@ function Icon(props) {
     type = props.type,
     restProps = _objectWithoutProperties(props, _excluded);
   var _React$useContext = React.useContext(_context.default),
-    prefixCls = _React$useContext.prefixCls;
+    prefixCls = _React$useContext.prefixCls,
+    classNames = _React$useContext.classNames,
+    styles = _React$useContext.styles;
   return icon ? /*#__PURE__*/React.createElement("span", _extends({
-    className: "".concat(prefixCls, "-").concat(type)
+    className: (0, _classnames.default)("".concat(prefixCls, "-").concat(type), classNames.suffix),
+    style: styles.suffix
   }, restProps), icon) : null;
 }
 function ClearIcon(_ref) {

package/lib/PickerInput/Selector/Input.js

@@ -70,7 +70,9 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _React$useContext = React.useContext(_context.default),
     prefixCls = _React$useContext.prefixCls,
     _React$useContext$inp = _React$useContext.input,
-    Component = _React$useContext$inp === void 0 ? 'input' : _React$useContext$inp;
+    Component = _React$useContext$inp === void 0 ? 'input' : _React$useContext$inp,
+    classNames = _React$useContext.classNames,
+    styles = _React$useContext.styles;
   var inputPrefixCls = "".concat(prefixCls, "-input");
 
   // ======================== Value =========================
@@ -374,7 +376,9 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, inputProps, {
     // Value
     value: inputValue,
-    onChange: onInternalChange
+    onChange: onInternalChange,
+    className: classNames.input,
+    style: styles.input
   })), /*#__PURE__*/React.createElement(_Icon.default, {
     type: "suffix",
     icon: suffixIcon

package/lib/PickerInput/Selector/RangeSelector.js

@@ -79,7 +79,9 @@ function RangeSelector(props, ref) {
 
   // ======================== Prefix ========================
   var _React$useContext = React.useContext(_context.default),
-    prefixCls = _React$useContext.prefixCls;
+    prefixCls = _React$useContext.prefixCls,
+    classNames = _React$useContext.classNames,
+    styles = _React$useContext.styles;
 
   // ========================== Id ==========================
   var ids = React.useMemo(function () {
@@ -194,7 +196,8 @@ function RangeSelector(props, ref) {
       _onMouseDown === null || _onMouseDown === void 0 || _onMouseDown(e);
     }
   }), prefix && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-prefix")
+    className: (0, _classnames.default)("".concat(prefixCls, "-prefix"), classNames.prefix),
+    style: styles.prefix
   }, prefix), /*#__PURE__*/React.createElement(_Input.default, _extends({
     ref: inputStartRef
   }, getInputProps(0), {

package/lib/PickerInput/Selector/SingleSelector/index.js

@@ -78,7 +78,9 @@ function SingleSelector(props, ref) {
 
   // ======================== Prefix ========================
   var _React$useContext = React.useContext(_context.default),
-    prefixCls = _React$useContext.prefixCls;
+    prefixCls = _React$useContext.prefixCls,
+    classNames = _React$useContext.classNames,
+    styles = _React$useContext.styles;
 
   // ========================= Refs =========================
   var rootRef = React.useRef();
@@ -186,7 +188,8 @@ function SingleSelector(props, ref) {
       _onMouseDown === null || _onMouseDown === void 0 || _onMouseDown(e);
     }
   }), prefix && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-prefix")
+    className: (0, _classnames.default)("".concat(prefixCls, "-prefix"), classNames.prefix),
+    style: styles.prefix
   }, prefix), selectorNode);
 }
 var RefSingleSelector = /*#__PURE__*/React.forwardRef(SingleSelector);

package/lib/PickerInput/Selector/hooks/useClearIcon.d.ts

@@ -5,4 +5,4 @@ import * as React from 'react';
  */
 export declare function fillClearIcon(prefixCls: string, allowClear?: boolean | {
     clearIcon?: ReactNode;
-}, clearIcon?: ReactNode): string | number | true | Iterable<ReactNode> | React.JSX.Element;
+}, clearIcon?: ReactNode): string | number | true | React.JSX.Element | Iterable<ReactNode>;

package/lib/PickerInput/SinglePicker.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _util = require("@rc-component/util");
+var _classnames = _interopRequireDefault(require("classnames"));
 var _useLayoutEffect = _interopRequireDefault(require("@rc-component/util/lib/hooks/useLayoutEffect"));
 var _omit = _interopRequireDefault(require("@rc-component/util/lib/omit"));
 var _pickAttrs = _interopRequireDefault(require("@rc-component/util/lib/pickAttrs"));
@@ -27,6 +28,7 @@ var _useRangeValue3 = _interopRequireWildcard(require("./hooks/useRangeValue"));
 var _useShowNow = _interopRequireDefault(require("./hooks/useShowNow"));
 var _Popup = _interopRequireDefault(require("./Popup"));
 var _SingleSelector = _interopRequireDefault(require("./Selector/SingleSelector"));
+var _useSemantic3 = _interopRequireDefault(require("../hooks/useSemantic"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -62,8 +64,9 @@ function Picker(props, ref) {
     isInvalidateDate = _useFilledProps2[5];
   var _ref = filledProps,
     prefixCls = _ref.prefixCls,
-    styles = _ref.styles,
-    classNames = _ref.classNames,
+    rootClassName = _ref.rootClassName,
+    propStyles = _ref.styles,
+    propClassNames = _ref.classNames,
     order = _ref.order,
     defaultValue = _ref.defaultValue,
     value = _ref.value,
@@ -115,6 +118,12 @@ function Picker(props, ref) {
   }
   var toggleDates = (0, _useToggleDates.default)(generateConfig, locale, internalPicker);
 
+  // ======================= Semantic =======================
+  var _useSemantic = (0, _useSemantic3.default)(propClassNames, propStyles),
+    _useSemantic2 = _slicedToArray(_useSemantic, 2),
+    mergedClassNames = _useSemantic2[0],
+    mergedStyles = _useSemantic2[1];
+
   // ========================= Open =========================
   var _useOpen = (0, _useOpen3.default)(open, defaultOpen, [disabled], onOpenChange),
     _useOpen2 = _slicedToArray(_useOpen, 2),
@@ -358,7 +367,7 @@ function Picker(props, ref) {
 
   var panelProps = React.useMemo(function () {
     var domProps = (0, _pickAttrs.default)(filledProps, false);
-    var restProps = (0, _omit.default)(filledProps, [].concat(_toConsumableArray(Object.keys(domProps)), ['onChange', 'onCalendarChange', 'style', 'className', 'onPanelChange']));
+    var restProps = (0, _omit.default)(filledProps, [].concat(_toConsumableArray(Object.keys(domProps)), ['onChange', 'onCalendarChange', 'style', 'className', 'onPanelChange', 'classNames', 'styles']));
     return _objectSpread(_objectSpread({}, restProps), {}, {
       multiple: filledProps.multiple
     });
@@ -455,10 +464,10 @@ function Picker(props, ref) {
       generateConfig: generateConfig,
       button: components.button,
       input: components.input,
-      styles: styles,
-      classNames: classNames
+      classNames: mergedClassNames,
+      styles: mergedStyles
     };
-  }, [prefixCls, locale, generateConfig, components.button, components.input, styles, classNames]);
+  }, [prefixCls, locale, generateConfig, components.button, components.input, mergedClassNames, mergedStyles]);
 
   // ======================== Effect ========================
   // >>> Mode
@@ -491,8 +500,8 @@ function Picker(props, ref) {
     value: context
   }, /*#__PURE__*/React.createElement(_PickerTrigger.default, _extends({}, (0, _util2.pickTriggerProps)(filledProps), {
     popupElement: panel,
-    popupStyle: styles.popup,
-    popupClassName: classNames.popup
+    popupStyle: mergedStyles.popup.root,
+    popupClassName: (0, _classnames.default)(rootClassName, mergedClassNames.popup.root)
     // Visible
     ,
     visible: mergedOpen,
@@ -502,6 +511,10 @@ function Picker(props, ref) {
   , _extends({}, filledProps, {
     // Ref
     ref: selectorRef
+    // Style
+    ,
+    className: (0, _classnames.default)(filledProps.className, rootClassName, mergedClassNames.root),
+    style: _objectSpread(_objectSpread({}, mergedStyles.root), filledProps.style)
     // Icon
     ,
     suffixIcon: suffixIcon,

package/lib/PickerInput/context.d.ts

@@ -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;
     locale: Locale;
@@ -8,8 +9,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;
 }
 declare const PickerContext: React.Context<PickerContextProps<any>>;
 export default PickerContext;

package/lib/PickerPanel/PanelBody.js

@@ -39,6 +39,8 @@ function PanelBody(props) {
     disabledDate = props.disabledDate;
   var _usePanelContext = (0, _context.usePanelContext)(),
     prefixCls = _usePanelContext.prefixCls,
+    classNames = _usePanelContext.classNames,
+    styles = _usePanelContext.styles,
     type = _usePanelContext.panelType,
     now = _usePanelContext.now,
     contextDisabledDate = _usePanelContext.disabledDate,
@@ -55,9 +57,7 @@ function PanelBody(props) {
 
   // ============================= Context ==============================
   var _React$useContext = React.useContext(_context.PickerHackContext),
-    onCellDblClick = _React$useContext.onCellDblClick,
-    pickerClassNames = _React$useContext.classNames,
-    styles = _React$useContext.styles;
+    onCellDblClick = _React$useContext.onCellDblClick;
 
   // ============================== Value ===============================
   var matchValues = function matchValues(date) {
@@ -113,12 +113,12 @@ function PanelBody(props) {
       rowNode.push( /*#__PURE__*/React.createElement("td", {
         key: col,
         title: title,
-        className: (0, _classnames.default)(cellPrefixCls, pickerClassNames === null || pickerClassNames === void 0 ? void 0 : pickerClassNames.popupItem, _objectSpread(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(cellPrefixCls, "-disabled"), disabled), "".concat(cellPrefixCls, "-hover"), (hoverValue || []).some(function (date) {
+        className: (0, _classnames.default)(cellPrefixCls, classNames.item, _objectSpread(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(cellPrefixCls, "-disabled"), disabled), "".concat(cellPrefixCls, "-hover"), (hoverValue || []).some(function (date) {
           return (0, _dateUtil.isSame)(generateConfig, locale, currentDate, date, type);
         })), "".concat(cellPrefixCls, "-in-range"), inRange && !rangeStart && !rangeEnd), "".concat(cellPrefixCls, "-range-start"), rangeStart), "".concat(cellPrefixCls, "-range-end"), rangeEnd), "".concat(prefixCls, "-cell-selected"), !hoverRangeValue &&
         // WeekPicker use row instead
         type !== 'week' && matchValues(currentDate)), getCellClassName(currentDate))),
-        style: styles === null || styles === void 0 ? void 0 : styles.popupItem,
+        style: styles.item,
         onClick: function onClick() {
           if (!disabled) {
             onSelect(currentDate);
@@ -158,10 +158,10 @@ function PanelBody(props) {
 
   // ============================== Render ==============================
   return /*#__PURE__*/React.createElement("div", {
-    className: (0, _classnames.default)("".concat(prefixCls, "-body"), pickerClassNames === null || pickerClassNames === void 0 ? void 0 : pickerClassNames.popupBody),
-    style: styles === null || styles === void 0 ? void 0 : styles.popupBody
+    className: (0, _classnames.default)("".concat(prefixCls, "-body"), classNames.body),
+    style: styles.body
   }, /*#__PURE__*/React.createElement("table", {
-    className: (0, _classnames.default)("".concat(prefixCls, "-content"), pickerClassNames === null || pickerClassNames === void 0 ? void 0 : pickerClassNames.popupContent),
-    style: styles === null || styles === void 0 ? void 0 : styles.popupContent
+    className: (0, _classnames.default)("".concat(prefixCls, "-content"), classNames.content),
+    style: styles.content
   }, headerCells && /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, headerCells)), /*#__PURE__*/React.createElement("tbody", null, rows)));
 }

package/lib/PickerPanel/PanelHeader.js

@@ -24,6 +24,8 @@ function PanelHeader(props) {
     children = props.children;
   var _usePanelContext = (0, _context.usePanelContext)(),
     prefixCls = _usePanelContext.prefixCls,
+    classNames = _usePanelContext.classNames,
+    styles = _usePanelContext.styles,
     _usePanelContext$prev = _usePanelContext.prevIcon,
     prevIcon = _usePanelContext$prev === void 0 ? "\u2039" : _usePanelContext$prev,
     _usePanelContext$next = _usePanelContext.nextIcon,
@@ -95,7 +97,8 @@ function PanelHeader(props) {
   var superPrevBtnCls = "".concat(headerPrefixCls, "-super-prev-btn");
   var superNextBtnCls = "".concat(headerPrefixCls, "-super-next-btn");
   return /*#__PURE__*/React.createElement("div", {
-    className: headerPrefixCls
+    className: (0, _classnames.default)(headerPrefixCls, classNames.header),
+    style: styles.header
   }, superOffset && /*#__PURE__*/React.createElement("button", {
     type: "button",
     "aria-label": locale.previousYear,

package/lib/PickerPanel/TimePanel/TimePanelBody/TimeColumn.js

@@ -49,7 +49,9 @@ function TimeColumn(props) {
     prefixCls = _usePanelContext.prefixCls,
     cellRender = _usePanelContext.cellRender,
     now = _usePanelContext.now,
-    locale = _usePanelContext.locale;
+    locale = _usePanelContext.locale,
+    classNames = _usePanelContext.classNames,
+    styles = _usePanelContext.styles;
   var panelPrefixCls = "".concat(prefixCls, "-time-panel");
   var cellPrefixCls = "".concat(prefixCls, "-time-panel-cell");
 
@@ -128,7 +130,8 @@ function TimeColumn(props) {
     }, label);
     return /*#__PURE__*/React.createElement("li", {
       key: unitValue,
-      className: (0, _classnames.default)(cellPrefixCls, _defineProperty(_defineProperty({}, "".concat(cellPrefixCls, "-selected"), value === unitValue), "".concat(cellPrefixCls, "-disabled"), disabled)),
+      style: styles.item,
+      className: (0, _classnames.default)(cellPrefixCls, classNames.item, _defineProperty(_defineProperty({}, "".concat(cellPrefixCls, "-selected"), value === unitValue), "".concat(cellPrefixCls, "-disabled"), disabled)),
       onClick: function onClick() {
         if (!disabled) {
           onChange(unitValue);

package/lib/PickerPanel/TimePanel/TimePanelBody/index.js

@@ -10,6 +10,7 @@ var _useTimeInfo3 = _interopRequireDefault(require("../../../hooks/useTimeInfo")
 var _dateUtil = require("../../../utils/dateUtil");
 var _context = require("../../context");
 var _TimeColumn = _interopRequireDefault(require("./TimeColumn"));
+var _classnames = _interopRequireDefault(require("classnames"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -32,6 +33,8 @@ function TimePanelBody(props) {
     changeOnScroll = props.changeOnScroll;
   var _usePanelContext = (0, _context.usePanelContext)(),
     prefixCls = _usePanelContext.prefixCls,
+    classNames = _usePanelContext.classNames,
+    styles = _usePanelContext.styles,
     values = _usePanelContext.values,
     generateConfig = _usePanelContext.generateConfig,
     locale = _usePanelContext.locale,
@@ -254,7 +257,8 @@ function TimePanelBody(props) {
     changeOnScroll: changeOnScroll
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-content")
+    className: (0, _classnames.default)("".concat(prefixCls, "-content"), classNames.content),
+    style: styles.content
   }, showHour && /*#__PURE__*/React.createElement(_TimeColumn.default, _extends({
     units: hourUnits,
     value: hour,

package/lib/PickerPanel/context.d.ts

@@ -1,9 +1,17 @@
 import * as React from 'react';
-import type { PanelMode, SemanticStructure, SharedPanelProps } from '../interface';
+import type { PanelMode, SharedPanelProps } from '../interface';
+import type { FilledPanelClassNames, FilledPanelStyles } from '../hooks/useSemantic';
+export interface SharedPanelContextProps {
+    classNames: FilledPanelClassNames;
+    styles: FilledPanelStyles;
+}
+export declare const SharedPanelContext: React.Context<SharedPanelContextProps>;
 export interface PanelContextProps<DateType extends object = any> extends Pick<SharedPanelProps<DateType>, 'prefixCls' | 'cellRender' | 'generateConfig' | 'locale' | 'onSelect' | 'hoverValue' | 'hoverRangeValue' | 'onHover' | 'values' | 'pickerValue' | 'disabledDate' | 'minDate' | 'maxDate' | 'prevIcon' | 'nextIcon' | 'superPrevIcon' | 'superNextIcon'> {
     /** Tell current panel type */
     panelType: PanelMode;
     now: DateType;
+    classNames: FilledPanelClassNames;
+    styles: FilledPanelStyles;
 }
 /** Used for each single Panel. e.g. DatePanel */
 export declare const PanelContext: React.Context<PanelContextProps<any>>;
@@ -17,8 +25,6 @@ export interface PickerHackContextProps {
     hideNext?: boolean;
     hideHeader?: boolean;
     onCellDblClick?: () => void;
-    styles?: Partial<Record<SemanticStructure, React.CSSProperties>>;
-    classNames?: Partial<Record<SemanticStructure, string>>;
 }
 /**
  * Internal usage for RangePicker to not to show the operation arrow

package/lib/PickerPanel/context.js

@@ -4,12 +4,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PickerHackContext = exports.PanelContext = void 0;
+exports.SharedPanelContext = exports.PickerHackContext = exports.PanelContext = void 0;
 exports.useInfo = useInfo;
 exports.usePanelContext = usePanelContext;
 var React = _interopRequireWildcard(require("react"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var SharedPanelContext = exports.SharedPanelContext = /*#__PURE__*/React.createContext(null);
 /** Used for each single Panel. e.g. DatePanel */
 var PanelContext = exports.PanelContext = /*#__PURE__*/React.createContext(null);
 function usePanelContext() {
@@ -20,6 +21,8 @@ function usePanelContext() {
  * Get shared props for the SharedPanelProps interface.
  */
 function useInfo(props, panelType) {
+  // TODO: this is not good to get from each props.
+  // Should move to `SharedPanelContext` instead.
   var prefixCls = props.prefixCls,
     generateConfig = props.generateConfig,
     locale = props.locale,
@@ -38,6 +41,11 @@ function useInfo(props, panelType) {
     superPrevIcon = props.superPrevIcon,
     superNextIcon = props.superNextIcon;
 
+  // ======================= Context ========================
+  var _React$useContext = React.useContext(SharedPanelContext),
+    classNames = _React$useContext.classNames,
+    styles = _React$useContext.styles;
+
   // ========================= MISC =========================
   var now = generateConfig.getNow();
 
@@ -47,6 +55,8 @@ function useInfo(props, panelType) {
     values: values,
     pickerValue: pickerValue,
     prefixCls: prefixCls,
+    classNames: classNames,
+    styles: styles,
     disabledDate: disabledDate,
     minDate: minDate,
     maxDate: maxDate,