@rc-component/picker 1.2.3 → 1.3.0

package/es/PickerInput/Popup/Footer.js

@@ -4,7 +4,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import classNames from 'classnames';
+import cls from 'classnames';
 import * as React from 'react';
 import useTimeInfo from "../../hooks/useTimeInfo";
 import PickerContext from "../context";
@@ -24,7 +24,9 @@ export default 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();
@@ -50,7 +52,7 @@ export default function Footer(props) {
   var presetNode = showNow && /*#__PURE__*/React.createElement("li", {
     className: nowPrefixCls
   }, /*#__PURE__*/React.createElement("a", {
-    className: classNames(nowBtnPrefixCls, nowDisabled && "".concat(nowBtnPrefixCls, "-disabled")),
+    className: cls(nowBtnPrefixCls, nowDisabled && "".concat(nowBtnPrefixCls, "-disabled")),
     "aria-disabled": nowDisabled,
     onClick: onInternalNow
   }, internalMode === 'date' ? locale.today : locale.now));
@@ -71,7 +73,8 @@ export default function Footer(props) {
     return null;
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-footer")
+    className: cls("".concat(prefixCls, "-footer"), classNames.popup.footer),
+    style: styles.popup.footer
   }, extraNode && /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-footer-extra")
   }, extraNode), rangeNode);

package/es/PickerInput/RangePicker.js

@@ -16,6 +16,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { useEvent, useMergedState } from '@rc-component/util';
+import cls from 'classnames';
 import useLayoutEffect from "@rc-component/util/es/hooks/useLayoutEffect";
 import omit from "@rc-component/util/es/omit";
 import pickAttrs from "@rc-component/util/es/pickAttrs";
@@ -38,6 +39,7 @@ import useRangeValue, { useInnerValue } from "./hooks/useRangeValue";
 import useShowNow from "./hooks/useShowNow";
 import Popup from "./Popup";
 import RangeSelector from "./Selector/RangeSelector";
+import useSemantic from "../hooks/useSemantic";
 function separateConfig(config, defaultConfig) {
   var singleConfig = config !== null && config !== void 0 ? config : defaultConfig;
   if (Array.isArray(singleConfig)) {
@@ -71,8 +73,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,
@@ -113,6 +116,12 @@ function RangePicker(props, ref) {
   // ========================= Refs =========================
   var selectorRef = usePickerRef(ref);
 
+  // ======================= Semantic =======================
+  var _useSemantic = useSemantic(propClassNames, propStyles),
+    _useSemantic2 = _slicedToArray(_useSemantic, 2),
+    mergedClassNames = _useSemantic2[0],
+    mergedStyles = _useSemantic2[1];
+
   // ========================= Open =========================
   var _useOpen = useOpen(open, defaultOpen, disabled, onOpenChange),
     _useOpen2 = _slicedToArray(_useOpen, 2),
@@ -401,7 +410,7 @@ function RangePicker(props, ref) {
   });
   var panelProps = React.useMemo(function () {
     var domProps = pickAttrs(filledProps, false);
-    var restProps = omit(filledProps, [].concat(_toConsumableArray(Object.keys(domProps)), ['onChange', 'onCalendarChange', 'style', 'className', 'onPanelChange', 'disabledTime']));
+    var restProps = omit(filledProps, [].concat(_toConsumableArray(Object.keys(domProps)), ['onChange', 'onCalendarChange', 'style', 'className', 'onPanelChange', 'disabledTime', 'classNames', 'styles']));
     return restProps;
   }, [filledProps]);
 
@@ -525,10 +534,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
@@ -579,8 +588,8 @@ function RangePicker(props, ref) {
     value: context
   }, /*#__PURE__*/React.createElement(PickerTrigger, _extends({}, pickTriggerProps(filledProps), {
     popupElement: panel,
-    popupStyle: styles.popup,
-    popupClassName: classNames.popup
+    popupStyle: mergedStyles.popup.root,
+    popupClassName: cls(rootClassName, mergedClassNames.popup.root)
     // Visible
     ,
     visible: mergedOpen,
@@ -593,6 +602,10 @@ function RangePicker(props, ref) {
   , _extends({}, filledProps, {
     // Ref
     ref: selectorRef
+    // Style
+    ,
+    className: cls(filledProps.className, rootClassName, mergedClassNames.root),
+    style: _objectSpread(_objectSpread({}, mergedStyles.root), filledProps.style)
     // Icon
     ,
     suffixIcon: suffixIcon

package/es/PickerInput/Selector/Icon.js

@@ -5,14 +5,18 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import * as React from 'react';
 import PickerContext from "../context";
+import cls from 'classnames';
 export default function Icon(props) {
   var icon = props.icon,
     type = props.type,
     restProps = _objectWithoutProperties(props, _excluded);
   var _React$useContext = React.useContext(PickerContext),
-    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: cls("".concat(prefixCls, "-").concat(type), classNames.suffix),
+    style: styles.suffix
   }, restProps), icon) : null;
 }
 export function ClearIcon(_ref) {

package/es/PickerInput/Selector/Input.js

@@ -12,7 +12,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import classNames from 'classnames';
+import cls from 'classnames';
 import { useEvent } from '@rc-component/util';
 import useLayoutEffect from "@rc-component/util/es/hooks/useLayoutEffect";
 import raf from "@rc-component/util/es/raf";
@@ -62,7 +62,9 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _React$useContext = React.useContext(PickerContext),
     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 =========================
@@ -354,7 +356,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
   } : {};
   return /*#__PURE__*/React.createElement("div", {
     ref: holderRef,
-    className: classNames(inputPrefixCls, _defineProperty(_defineProperty({}, "".concat(inputPrefixCls, "-active"), active && showActiveCls), "".concat(inputPrefixCls, "-placeholder"), helped), className)
+    className: cls(inputPrefixCls, _defineProperty(_defineProperty({}, "".concat(inputPrefixCls, "-active"), active && showActiveCls), "".concat(inputPrefixCls, "-placeholder"), helped), className)
   }, /*#__PURE__*/React.createElement(Component, _extends({
     ref: inputRef,
     "aria-invalid": invalid,
@@ -366,7 +368,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, {
     type: "suffix",
     icon: suffixIcon

package/es/PickerInput/Selector/RangeSelector.js

@@ -15,7 +15,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import classNames from 'classnames';
+import cls from 'classnames';
 import ResizeObserver from '@rc-component/resize-observer';
 import { useEvent } from '@rc-component/util';
 import * as React from 'react';
@@ -70,7 +70,9 @@ function RangeSelector(props, ref) {
 
   // ======================== Prefix ========================
   var _React$useContext = React.useContext(PickerContext),
-    prefixCls = _React$useContext.prefixCls;
+    prefixCls = _React$useContext.prefixCls,
+    classNames = _React$useContext.classNames,
+    styles = _React$useContext.styles;
 
   // ========================== Id ==========================
   var ids = React.useMemo(function () {
@@ -167,7 +169,7 @@ function RangeSelector(props, ref) {
   return /*#__PURE__*/React.createElement(ResizeObserver, {
     onResize: syncActiveOffset
   }, /*#__PURE__*/React.createElement("div", _extends({}, rootProps, {
-    className: classNames(prefixCls, "".concat(prefixCls, "-range"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-focused"), focused), "".concat(prefixCls, "-disabled"), disabled.every(function (i) {
+    className: cls(prefixCls, "".concat(prefixCls, "-range"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-focused"), focused), "".concat(prefixCls, "-disabled"), disabled.every(function (i) {
       return i;
     })), "".concat(prefixCls, "-invalid"), invalid.some(function (i) {
       return i;
@@ -185,7 +187,8 @@ function RangeSelector(props, ref) {
       _onMouseDown === null || _onMouseDown === void 0 || _onMouseDown(e);
     }
   }), prefix && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-prefix")
+    className: cls("".concat(prefixCls, "-prefix"), classNames.prefix),
+    style: styles.prefix
   }, prefix), /*#__PURE__*/React.createElement(Input, _extends({
     ref: inputStartRef
   }, getInputProps(0), {

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

@@ -14,7 +14,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import classNames from 'classnames';
+import cls from 'classnames';
 import * as React from 'react';
 import { isSame } from "../../../utils/dateUtil";
 import PickerContext from "../../context";
@@ -69,7 +69,9 @@ function SingleSelector(props, ref) {
 
   // ======================== Prefix ========================
   var _React$useContext = React.useContext(PickerContext),
-    prefixCls = _React$useContext.prefixCls;
+    prefixCls = _React$useContext.prefixCls,
+    classNames = _React$useContext.classNames,
+    styles = _React$useContext.styles;
 
   // ========================= Refs =========================
   var rootRef = React.useRef();
@@ -162,7 +164,7 @@ function SingleSelector(props, ref) {
 
   // ======================== Render ========================
   return /*#__PURE__*/React.createElement("div", _extends({}, rootProps, {
-    className: classNames(prefixCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-multiple"), multiple), "".concat(prefixCls, "-focused"), focused), "".concat(prefixCls, "-disabled"), disabled), "".concat(prefixCls, "-invalid"), invalid), "".concat(prefixCls, "-rtl"), rtl), className),
+    className: cls(prefixCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-multiple"), multiple), "".concat(prefixCls, "-focused"), focused), "".concat(prefixCls, "-disabled"), disabled), "".concat(prefixCls, "-invalid"), invalid), "".concat(prefixCls, "-rtl"), rtl), className),
     style: style,
     ref: rootRef,
     onClick: onClick
@@ -177,7 +179,8 @@ function SingleSelector(props, ref) {
       _onMouseDown === null || _onMouseDown === void 0 || _onMouseDown(e);
     }
   }), prefix && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-prefix")
+    className: cls("".concat(prefixCls, "-prefix"), classNames.prefix),
+    style: styles.prefix
   }, prefix), selectorNode);
 }
 var RefSingleSelector = /*#__PURE__*/React.forwardRef(SingleSelector);

package/es/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/es/PickerInput/SinglePicker.js

@@ -16,6 +16,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { useEvent, useMergedState } from '@rc-component/util';
+import cls from 'classnames';
 import useLayoutEffect from "@rc-component/util/es/hooks/useLayoutEffect";
 import omit from "@rc-component/util/es/omit";
 import pickAttrs from "@rc-component/util/es/pickAttrs";
@@ -37,6 +38,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
 
@@ -54,8 +56,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,
@@ -107,6 +110,12 @@ function Picker(props, ref) {
   }
   var toggleDates = useToggleDates(generateConfig, locale, internalPicker);
 
+  // ======================= Semantic =======================
+  var _useSemantic = useSemantic(propClassNames, propStyles),
+    _useSemantic2 = _slicedToArray(_useSemantic, 2),
+    mergedClassNames = _useSemantic2[0],
+    mergedStyles = _useSemantic2[1];
+
   // ========================= Open =========================
   var _useOpen = useOpen(open, defaultOpen, [disabled], onOpenChange),
     _useOpen2 = _slicedToArray(_useOpen, 2),
@@ -350,7 +359,7 @@ function Picker(props, ref) {
 
   var panelProps = React.useMemo(function () {
     var domProps = pickAttrs(filledProps, false);
-    var restProps = omit(filledProps, [].concat(_toConsumableArray(Object.keys(domProps)), ['onChange', 'onCalendarChange', 'style', 'className', 'onPanelChange']));
+    var restProps = omit(filledProps, [].concat(_toConsumableArray(Object.keys(domProps)), ['onChange', 'onCalendarChange', 'style', 'className', 'onPanelChange', 'classNames', 'styles']));
     return _objectSpread(_objectSpread({}, restProps), {}, {
       multiple: filledProps.multiple
     });
@@ -447,10 +456,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
@@ -483,8 +492,8 @@ function Picker(props, ref) {
     value: context
   }, /*#__PURE__*/React.createElement(PickerTrigger, _extends({}, pickTriggerProps(filledProps), {
     popupElement: panel,
-    popupStyle: styles.popup,
-    popupClassName: classNames.popup
+    popupStyle: mergedStyles.popup.root,
+    popupClassName: cls(rootClassName, mergedClassNames.popup.root)
     // Visible
     ,
     visible: mergedOpen,
@@ -494,6 +503,10 @@ function Picker(props, ref) {
   , _extends({}, filledProps, {
     // Ref
     ref: selectorRef
+    // Style
+    ,
+    className: cls(filledProps.className, rootClassName, mergedClassNames.root),
+    style: _objectSpread(_objectSpread({}, mergedStyles.root), filledProps.style)
     // Icon
     ,
     suffixIcon: suffixIcon,

package/es/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/es/PickerPanel/PanelBody.js

@@ -10,7 +10,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import classNames from 'classnames';
+import cls from 'classnames';
 import * as React from 'react';
 import { formatValue, isInRange, isSame } from "../utils/dateUtil";
 import { PickerHackContext, usePanelContext } from "./context";
@@ -30,6 +30,8 @@ export default function PanelBody(props) {
     disabledDate = props.disabledDate;
   var _usePanelContext = usePanelContext(),
     prefixCls = _usePanelContext.prefixCls,
+    classNames = _usePanelContext.classNames,
+    styles = _usePanelContext.styles,
     type = _usePanelContext.panelType,
     now = _usePanelContext.now,
     contextDisabledDate = _usePanelContext.disabledDate,
@@ -46,9 +48,7 @@ export default function PanelBody(props) {
 
   // ============================= Context ==============================
   var _React$useContext = React.useContext(PickerHackContext),
-    onCellDblClick = _React$useContext.onCellDblClick,
-    pickerClassNames = _React$useContext.classNames,
-    styles = _React$useContext.styles;
+    onCellDblClick = _React$useContext.onCellDblClick;
 
   // ============================== Value ===============================
   var matchValues = function matchValues(date) {
@@ -104,12 +104,12 @@ export default function PanelBody(props) {
       rowNode.push( /*#__PURE__*/React.createElement("td", {
         key: col,
         title: title,
-        className: classNames(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: cls(cellPrefixCls, classNames.item, _objectSpread(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(cellPrefixCls, "-disabled"), disabled), "".concat(cellPrefixCls, "-hover"), (hoverValue || []).some(function (date) {
           return 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);
@@ -149,10 +149,10 @@ export default function PanelBody(props) {
 
   // ============================== Render ==============================
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(prefixCls, "-body"), pickerClassNames === null || pickerClassNames === void 0 ? void 0 : pickerClassNames.popupBody),
-    style: styles === null || styles === void 0 ? void 0 : styles.popupBody
+    className: cls("".concat(prefixCls, "-body"), classNames.body),
+    style: styles.body
   }, /*#__PURE__*/React.createElement("table", {
-    className: classNames("".concat(prefixCls, "-content"), pickerClassNames === null || pickerClassNames === void 0 ? void 0 : pickerClassNames.popupContent),
-    style: styles === null || styles === void 0 ? void 0 : styles.popupContent
+    className: cls("".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/es/PickerPanel/PanelHeader.js

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import cls from 'classnames';
 import * as React from 'react';
 import { isSameOrAfter } from "../utils/dateUtil";
 import { PickerHackContext, usePanelContext } from "./context";
@@ -14,6 +14,8 @@ function PanelHeader(props) {
     children = props.children;
   var _usePanelContext = 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,
@@ -85,7 +87,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: cls(headerPrefixCls, classNames.header),
+    style: styles.header
   }, superOffset && /*#__PURE__*/React.createElement("button", {
     type: "button",
     "aria-label": locale.previousYear,
@@ -93,7 +96,7 @@ function PanelHeader(props) {
       return onSuperOffset(-1);
     },
     tabIndex: -1,
-    className: classNames(superPrevBtnCls, disabledSuperOffsetPrev && "".concat(superPrevBtnCls, "-disabled")),
+    className: cls(superPrevBtnCls, disabledSuperOffsetPrev && "".concat(superPrevBtnCls, "-disabled")),
     disabled: disabledSuperOffsetPrev,
     style: hidePrev ? HIDDEN_STYLE : {}
   }, superPrevIcon), offset && /*#__PURE__*/React.createElement("button", {
@@ -103,7 +106,7 @@ function PanelHeader(props) {
       return onOffset(-1);
     },
     tabIndex: -1,
-    className: classNames(prevBtnCls, disabledOffsetPrev && "".concat(prevBtnCls, "-disabled")),
+    className: cls(prevBtnCls, disabledOffsetPrev && "".concat(prevBtnCls, "-disabled")),
     disabled: disabledOffsetPrev,
     style: hidePrev ? HIDDEN_STYLE : {}
   }, prevIcon), /*#__PURE__*/React.createElement("div", {
@@ -115,7 +118,7 @@ function PanelHeader(props) {
       return onOffset(1);
     },
     tabIndex: -1,
-    className: classNames(nextBtnCls, disabledOffsetNext && "".concat(nextBtnCls, "-disabled")),
+    className: cls(nextBtnCls, disabledOffsetNext && "".concat(nextBtnCls, "-disabled")),
     disabled: disabledOffsetNext,
     style: hideNext ? HIDDEN_STYLE : {}
   }, nextIcon), superOffset && /*#__PURE__*/React.createElement("button", {
@@ -125,7 +128,7 @@ function PanelHeader(props) {
       return onSuperOffset(1);
     },
     tabIndex: -1,
-    className: classNames(superNextBtnCls, disabledSuperOffsetNext && "".concat(superNextBtnCls, "-disabled")),
+    className: cls(superNextBtnCls, disabledSuperOffsetNext && "".concat(superNextBtnCls, "-disabled")),
     disabled: disabledSuperOffsetNext,
     style: hideNext ? HIDDEN_STYLE : {}
   }, superNextIcon));

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

@@ -12,7 +12,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import classNames from 'classnames';
+import cls from 'classnames';
 import useLayoutEffect from "@rc-component/util/es/hooks/useLayoutEffect";
 import * as React from 'react';
 import { usePanelContext } from "../../context";
@@ -40,7 +40,9 @@ export default 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");
 
@@ -119,7 +121,8 @@ export default function TimeColumn(props) {
     }, label);
     return /*#__PURE__*/React.createElement("li", {
       key: unitValue,
-      className: classNames(cellPrefixCls, _defineProperty(_defineProperty({}, "".concat(cellPrefixCls, "-selected"), value === unitValue), "".concat(cellPrefixCls, "-disabled"), disabled)),
+      style: styles.item,
+      className: cls(cellPrefixCls, classNames.item, _defineProperty(_defineProperty({}, "".concat(cellPrefixCls, "-selected"), value === unitValue), "".concat(cellPrefixCls, "-disabled"), disabled)),
       onClick: function onClick() {
         if (!disabled) {
           onChange(unitValue);

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

@@ -10,6 +10,7 @@ import useTimeInfo from "../../../hooks/useTimeInfo";
 import { formatValue } from "../../../utils/dateUtil";
 import { PickerHackContext, usePanelContext } from "../../context";
 import TimeColumn from "./TimeColumn";
+import cls from 'classnames';
 function isAM(hour) {
   return hour < 12;
 }
@@ -22,6 +23,8 @@ export default function TimePanelBody(props) {
     changeOnScroll = props.changeOnScroll;
   var _usePanelContext = usePanelContext(),
     prefixCls = _usePanelContext.prefixCls,
+    classNames = _usePanelContext.classNames,
+    styles = _usePanelContext.styles,
     values = _usePanelContext.values,
     generateConfig = _usePanelContext.generateConfig,
     locale = _usePanelContext.locale,
@@ -244,7 +247,8 @@ export default function TimePanelBody(props) {
     changeOnScroll: changeOnScroll
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-content")
+    className: cls("".concat(prefixCls, "-content"), classNames.content),
+    style: styles.content
   }, showHour && /*#__PURE__*/React.createElement(TimeColumn, _extends({
     units: hourUnits,
     value: hour,

package/es/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/es/PickerPanel/context.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+export var SharedPanelContext = /*#__PURE__*/React.createContext(null);
 /** Used for each single Panel. e.g. DatePanel */
 export var PanelContext = /*#__PURE__*/React.createContext(null);
 export function usePanelContext() {
@@ -9,6 +10,8 @@ export function usePanelContext() {
  * Get shared props for the SharedPanelProps interface.
  */
 export 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,
@@ -27,6 +30,11 @@ export 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();
 
@@ -36,6 +44,8 @@ export function useInfo(props, panelType) {
     values: values,
     pickerValue: pickerValue,
     prefixCls: prefixCls,
+    classNames: classNames,
+    styles: styles,
     disabledDate: disabledDate,
     minDate: minDate,
     maxDate: maxDate,

package/es/PickerPanel/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { CellRender, Components, Locale, OnPanelChange, PanelMode, PickerMode, SharedPanelProps, SharedTimeProps } from '../interface';
+import type { CellRender, Components, Locale, OnPanelChange, PanelMode, PanelSemanticName, PickerMode, SharedPanelProps, SharedTimeProps } from '../interface';
 export interface PickerPanelRef {
     nativeElement: HTMLDivElement;
 }
@@ -43,7 +43,6 @@ export interface SinglePickerPanelProps<DateType extends object = any> extends B
     value?: DateType | null;
     onChange?: (date: DateType) => void;
 }
-type PanelSemanticName = 'popupBody' | 'popupContent' | 'popupItem';
 export type PickerPanelProps<DateType extends object = any> = BasePickerPanelProps<DateType> & {
     /** multiple selection. Not support time or datetime picker */
     multiple?: boolean;