@rc-component/picker 1.2.4 → 1.4.0

package/README.md

@@ -54,6 +54,7 @@ render(<Picker />, mountNode);
 | autoFocus | boolean | false | whether auto focus |
 | showTime | boolean \| Object | [showTime options](#showTime-options) | to provide an additional time selection |
 | picker | time \| date \| week \| month \| year |  | control which kind of panel should be shown |
+| previewValue | false \| hover | hover | When the user selects the date hover option, the value of the input field undergoes a temporary change |
 | format | String \| String[] | depends on whether you set timePicker and your locale | use to format/parse date(without time) value to/from input. When an array is provided, all values are used for parsing and first value for display |
 | use12Hours | boolean | false | 12 hours display mode |
 | value | moment |  | current value like input's value |
@@ -102,7 +103,7 @@ render(<Picker />, mountNode);
 ### RangePicker
 
 | Property | Type | Default | Description |
-| --- | --- | --- | --- |
+| --- | --- | --- | --- | --- |
 | prefixCls | String | rc-picker | prefixCls of this component |
 | className | String | '' | additional css class of root dom |
 | style | React.CSSProperties |  | additional style of root dom node |
@@ -112,6 +113,7 @@ render(<Picker />, mountNode);
 | defaultPickerValue | moment |  | Set default display picker view date |
 | separator | String | '~' | set separator between inputs |
 | picker | time \| date \| week \| month \| year |  | control which kind of panel |
+| previewValue | false \| hover | hover | When the user selects the date hover option, the value of the input field undergoes a temporary change |
 | placeholder | [String, String] |  | placeholder of date input |
 | showTime | boolean \| Object | [showTime options](#showTime-options) | to provide an additional time selection |
 | showTime.defaultValue | [moment, moment] |  | to set default time of selected date |

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,10 @@ 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,
+    previewValue = filledProps.previewValue,
     defaultValue = filledProps.defaultValue,
     value = filledProps.value,
     needConfirm = filledProps.needConfirm,
@@ -113,6 +117,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),
@@ -331,12 +341,18 @@ function RangePicker(props, ref) {
     _React$useState6 = _slicedToArray(_React$useState5, 2),
     activeInfo = _React$useState6[0],
     setActiveInfo = _React$useState6[1];
+  var onSetHover = function onSetHover(date, source) {
+    if (previewValue !== 'hover') {
+      return;
+    }
+    setInternalHoverValues(date);
+    setHoverSource(source);
+  };
 
   // ======================= Presets ========================
   var presetList = usePresets(presets, ranges);
   var onPresetHover = function onPresetHover(nextValues) {
-    setInternalHoverValues(nextValues);
-    setHoverSource('preset');
+    onSetHover(nextValues, 'preset');
   };
   var onPresetSubmit = function onPresetSubmit(nextValues) {
     var passed = triggerSubmitChange(nextValues);
@@ -352,8 +368,7 @@ function RangePicker(props, ref) {
 
   // ======================== Panel =========================
   var onPanelHover = function onPanelHover(date) {
-    setInternalHoverValues(date ? fillCalendarValue(date, activeIndex) : null);
-    setHoverSource('cell');
+    onSetHover(date ? fillCalendarValue(date, activeIndex) : null, 'cell');
   };
 
   // >>> Focus
@@ -401,7 +416,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 +540,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 +594,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 +608,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,18 +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 classNames from 'classnames';
+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,
-    iconClassNames = _React$useContext.classNames,
+    classNames = _React$useContext.classNames,
     styles = _React$useContext.styles;
   return icon ? /*#__PURE__*/React.createElement("span", _extends({
-    className: classNames("".concat(prefixCls, "-").concat(type), iconClassNames === null || iconClassNames === void 0 ? void 0 : iconClassNames.suffix),
-    style: styles === null || styles === void 0 ? void 0 : styles.suffix
+    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";
@@ -63,7 +63,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
     prefixCls = _React$useContext.prefixCls,
     _React$useContext$inp = _React$useContext.input,
     Component = _React$useContext$inp === void 0 ? 'input' : _React$useContext$inp,
-    inputClassNames = _React$useContext.classNames,
+    classNames = _React$useContext.classNames,
     styles = _React$useContext.styles;
   var inputPrefixCls = "".concat(prefixCls, "-input");
 
@@ -356,8 +356,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
   } : {};
   return /*#__PURE__*/React.createElement("div", {
     ref: holderRef,
-    className: classNames(inputPrefixCls, inputClassNames === null || inputClassNames === void 0 ? void 0 : inputClassNames.input, _defineProperty(_defineProperty({}, "".concat(inputPrefixCls, "-active"), active && showActiveCls), "".concat(inputPrefixCls, "-placeholder"), helped), className),
-    style: styles === null || styles === void 0 ? void 0 : styles.input
+    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,
@@ -369,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';
@@ -71,7 +71,7 @@ function RangeSelector(props, ref) {
   // ======================== Prefix ========================
   var _React$useContext = React.useContext(PickerContext),
     prefixCls = _React$useContext.prefixCls,
-    selectorClassNames = _React$useContext.classNames,
+    classNames = _React$useContext.classNames,
     styles = _React$useContext.styles;
 
   // ========================== Id ==========================
@@ -169,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;
@@ -187,8 +187,8 @@ function RangeSelector(props, ref) {
       _onMouseDown === null || _onMouseDown === void 0 || _onMouseDown(e);
     }
   }), prefix && /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(prefixCls, "-prefix"), selectorClassNames === null || selectorClassNames === void 0 ? void 0 : selectorClassNames.prefix),
-    style: styles === null || styles === void 0 ? void 0 : styles.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";
@@ -70,7 +70,7 @@ function SingleSelector(props, ref) {
   // ======================== Prefix ========================
   var _React$useContext = React.useContext(PickerContext),
     prefixCls = _React$useContext.prefixCls,
-    selectorClassNames = _React$useContext.classNames,
+    classNames = _React$useContext.classNames,
     styles = _React$useContext.styles;
 
   // ========================= Refs =========================
@@ -164,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
@@ -179,8 +179,8 @@ function SingleSelector(props, ref) {
       _onMouseDown === null || _onMouseDown === void 0 || _onMouseDown(e);
     }
   }), prefix && /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(prefixCls, "-prefix"), selectorClassNames === null || selectorClassNames === void 0 ? void 0 : selectorClassNames.prefix),
-    style: styles === null || styles === void 0 ? void 0 : styles.prefix
+    className: cls("".concat(prefixCls, "-prefix"), classNames.prefix),
+    style: styles.prefix
   }, prefix), selectorNode);
 }
 var RefSingleSelector = /*#__PURE__*/React.forwardRef(SingleSelector);

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,10 @@ 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,
+    previewValue = _ref.previewValue,
     order = _ref.order,
     defaultValue = _ref.defaultValue,
     value = _ref.value,
@@ -107,6 +111,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),
@@ -280,6 +290,13 @@ function Picker(props, ref) {
       setInternalHoverValue(null);
     }
   }, [mergedOpen]);
+  var onSetHover = function onSetHover(date, source) {
+    if (previewValue !== 'hover') {
+      return;
+    }
+    setInternalHoverValue(date);
+    setHoverSource(source);
+  };
 
   // ========================================================
   // ==                       Panels                       ==
@@ -287,8 +304,7 @@ function Picker(props, ref) {
   // ======================= Presets ========================
   var presetList = usePresets(presets);
   var onPresetHover = function onPresetHover(nextValue) {
-    setInternalHoverValue(nextValue);
-    setHoverSource('preset');
+    onSetHover(nextValue, 'preset');
   };
 
   // TODO: handle this
@@ -307,8 +323,7 @@ function Picker(props, ref) {
 
   // ======================== Panel =========================
   var onPanelHover = function onPanelHover(date) {
-    setInternalHoverValue(date);
-    setHoverSource('cell');
+    onSetHover(date, 'cell');
   };
 
   // >>> Focus
@@ -350,7 +365,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 +462,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 +498,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 +509,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/PickerInput/hooks/useFilledProps.d.ts

@@ -2,7 +2,7 @@ import type { FormatType, InternalMode, PickerMode } from '../../interface';
 import type { RangePickerProps } from '../RangePicker';
 import useInvalidate from './useInvalidate';
 type UseInvalidate<DateType extends object = any> = typeof useInvalidate<DateType>;
-type PickedProps<DateType extends object = any> = Pick<RangePickerProps<DateType>, 'generateConfig' | 'locale' | 'picker' | 'prefixCls' | 'styles' | 'classNames' | 'order' | 'components' | 'inputRender' | 'clearIcon' | 'allowClear' | 'needConfirm' | 'format' | 'inputReadOnly' | 'disabledDate' | 'minDate' | 'maxDate' | 'defaultOpenValue'> & {
+type PickedProps<DateType extends object = any> = Pick<RangePickerProps<DateType>, 'generateConfig' | 'locale' | 'picker' | 'prefixCls' | 'styles' | 'classNames' | 'order' | 'components' | 'inputRender' | 'clearIcon' | 'allowClear' | 'needConfirm' | 'format' | 'inputReadOnly' | 'disabledDate' | 'minDate' | 'maxDate' | 'defaultOpenValue' | 'previewValue'> & {
     multiple?: boolean;
     showTime?: any;
     value?: any;

package/es/PickerInput/hooks/useFilledProps.js

@@ -45,6 +45,8 @@ export default function useFilledProps(props, updater) {
     picker = _props$picker === void 0 ? 'date' : _props$picker,
     _props$prefixCls = props.prefixCls,
     prefixCls = _props$prefixCls === void 0 ? 'rc-picker' : _props$prefixCls,
+    _props$previewValue = props.previewValue,
+    previewValue = _props$previewValue === void 0 ? 'hover' : _props$previewValue,
     _props$styles = props.styles,
     styles = _props$styles === void 0 ? {} : _props$styles,
     _props$classNames = props.classNames,
@@ -110,6 +112,7 @@ export default function useFilledProps(props, updater) {
   // ======================== Props =========================
   var filledProps = React.useMemo(function () {
     return _objectSpread(_objectSpread({}, props), {}, {
+      previewValue: previewValue,
       prefixCls: prefixCls,
       locale: mergedLocale,
       picker: picker,

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));