@rc-component/picker 1.2.4 → 1.4.0

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,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,
@@ -115,6 +119,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),
@@ -288,6 +298,13 @@ function Picker(props, ref) {
       setInternalHoverValue(null);
     }
   }, [mergedOpen]);
+  var onSetHover = function onSetHover(date, source) {
+    if (previewValue !== 'hover') {
+      return;
+    }
+    setInternalHoverValue(date);
+    setHoverSource(source);
+  };
 
   // ========================================================
   // ==                       Panels                       ==
@@ -295,8 +312,7 @@ function Picker(props, ref) {
   // ======================= Presets ========================
   var presetList = (0, _usePresets.default)(presets);
   var onPresetHover = function onPresetHover(nextValue) {
-    setInternalHoverValue(nextValue);
-    setHoverSource('preset');
+    onSetHover(nextValue, 'preset');
   };
 
   // TODO: handle this
@@ -315,8 +331,7 @@ function Picker(props, ref) {
 
   // ======================== Panel =========================
   var onPanelHover = function onPanelHover(date) {
-    setInternalHoverValue(date);
-    setHoverSource('cell');
+    onSetHover(date, 'cell');
   };
 
   // >>> Focus
@@ -358,7 +373,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 +470,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 +506,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 +517,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/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/lib/PickerInput/hooks/useFilledProps.js

@@ -54,6 +54,8 @@ 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,
@@ -119,6 +121,7 @@ function useFilledProps(props, updater) {
   // ======================== Props =========================
   var filledProps = React.useMemo(function () {
     return _objectSpread(_objectSpread({}, props), {}, {
+      previewValue: previewValue,
       prefixCls: prefixCls,
       locale: mergedLocale,
       picker: picker,

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,10 +49,9 @@ function TimeColumn(props) {
     prefixCls = _usePanelContext.prefixCls,
     cellRender = _usePanelContext.cellRender,
     now = _usePanelContext.now,
-    locale = _usePanelContext.locale;
-  var _React$useContext = React.useContext(_context.PickerHackContext),
-    pickerClassNames = _React$useContext.classNames,
-    styles = _React$useContext.styles;
+    locale = _usePanelContext.locale,
+    classNames = _usePanelContext.classNames,
+    styles = _usePanelContext.styles;
   var panelPrefixCls = "".concat(prefixCls, "-time-panel");
   var cellPrefixCls = "".concat(prefixCls, "-time-panel-cell");
 
@@ -131,8 +130,8 @@ function TimeColumn(props) {
     }, label);
     return /*#__PURE__*/React.createElement("li", {
       key: unitValue,
-      style: styles === null || styles === void 0 ? void 0 : styles.popupItem,
-      className: (0, _classnames.default)(cellPrefixCls, pickerClassNames === null || pickerClassNames === void 0 ? void 0 : pickerClassNames.popupItem, _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

@@ -33,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,
@@ -42,9 +44,7 @@ function TimePanelBody(props) {
     pickerValue = _usePanelContext.pickerValue;
   var value = (values === null || values === void 0 ? void 0 : values[0]) || null;
   var _React$useContext = React.useContext(_context.PickerHackContext),
-    onCellDblClick = _React$useContext.onCellDblClick,
-    pickerClassNames = _React$useContext.classNames,
-    styles = _React$useContext.styles;
+    onCellDblClick = _React$useContext.onCellDblClick;
 
   // ========================== Info ==========================
   var _useTimeInfo = (0, _useTimeInfo3.default)(generateConfig, props, value),
@@ -257,8 +257,8 @@ function TimePanelBody(props) {
     changeOnScroll: changeOnScroll
   };
   return /*#__PURE__*/React.createElement("div", {
-    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
   }, 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,

package/lib/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;
@@ -53,13 +52,5 @@ export type PickerPanelProps<DateType extends object = any> = BasePickerPanelPro
     styles?: Partial<Record<PanelSemanticName, React.CSSProperties>>;
     classNames?: Partial<Record<PanelSemanticName, string>>;
 };
-declare const _default: <DateType extends object = any>(props: BasePickerPanelProps<DateType> & {
-    /** multiple selection. Not support time or datetime picker */
-    multiple?: boolean;
-    defaultValue?: DateType | DateType[];
-    value?: DateType | DateType[];
-    onChange?: (date: DateType | DateType[]) => void;
-    styles?: Partial<Record<PanelSemanticName, React.CSSProperties>>;
-    classNames?: Partial<Record<PanelSemanticName, string>>;
-} & React.RefAttributes<PickerPanelRef>) => React.ReactElement;
+declare const _default: <DateType extends object = any>(props: PickerPanelProps<DateType> & React.RefAttributes<PickerPanelRef>) => React.ReactElement;
 export default _default;

package/lib/PickerPanel/index.js

@@ -264,16 +264,19 @@ function PickerPanel(props, ref) {
   var PanelComponent = components[internalMode] || DefaultComponents[internalMode] || _DatePanel.default;
 
   // ======================== 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(_context2.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') {
@@ -293,7 +296,9 @@ function PickerPanel(props, ref) {
   'disabledDate', 'minDate', 'maxDate',
   // Hover
   'onHover']);
-  return /*#__PURE__*/React.createElement(_context2.PickerHackContext.Provider, {
+  return /*#__PURE__*/React.createElement(_context2.SharedPanelContext.Provider, {
+    value: sharedPanelContext
+  }, /*#__PURE__*/React.createElement(_context2.PickerHackContext.Provider, {
     value: pickerPanelContext
   }, /*#__PURE__*/React.createElement("div", {
     ref: rootRef,
@@ -326,7 +331,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/lib/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/lib/hooks/useSemantic.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useSemantic;
+var _react = require("react");
+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); }
+/**
+ * Convert `classNames` & `styles` to a fully filled object
+ */
+function useSemantic(classNames, styles) {
+  return (0, _react.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/lib/interface.d.ts

@@ -201,19 +201,26 @@ 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' | 'suffix' | 'prefix' | 'input';
 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 PreviewValueType = 'hover';
+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;
@@ -275,6 +282,12 @@ export interface SharedPickerProps<DateType extends object = any> extends Shared
      * This is only used for strong a11y requirement which do not want modify after blur.
      */
     preserveInvalidOnBlur?: boolean;
+    /**
+     * When the user selects the date hover option, the value of the input field undergoes a temporary change.
+     * `false` will not preview value.
+     * `hover` will preview value when hover.
+     */
+    previewValue?: false | PreviewValueType;
     transitionName?: string;
     components?: Components<DateType>;
     /** @deprecated Please use `components.input` instead. */

package/lib/locale/te_IN.d.ts

@@ -0,0 +1,3 @@
+import type { Locale } from '../interface';
+declare const locale: Locale;
+export default locale;

package/lib/locale/te_IN.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _common = require("./common");
+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); }
+var locale = _objectSpread(_objectSpread({}, _common.commonLocale), {}, {
+  locale: 'te_IN',
+  today: 'నేడు',
+  now: 'ఇప్పుడు',
+  backToToday: 'తిరిగి నేటికి',
+  ok: 'సరే',
+  clear: 'స్పష్టమైన',
+  week: 'వారం',
+  month: 'నెల',
+  year: 'సంవత్సరం',
+  timeSelect: 'సమయం ఎంపిక',
+  dateSelect: 'తేదీ ఎంపిక',
+  weekSelect: 'వారం ఎంపిక',
+  monthSelect: 'నెల ఎంపిక',
+  yearSelect: 'సంవత్సరం ఎంపిక',
+  decadeSelect: 'దశాబ్దం ఎంపిక',
+  previousMonth: 'మునుపటి నెల',
+  nextMonth: 'వచ్చే నెల',
+  previousYear: 'మునుపటి సంవత్సరం',
+  nextYear: 'తదుపరి సంవత్సరం',
+  previousDecade: 'మునుపటి దశాబ్దం',
+  nextDecade: 'తదుపరి దశాబ్దం',
+  previousCentury: 'మునుపటి శతాబ్దం',
+  nextCentury: 'తదుపరి శతాబ్దం'
+});
+var _default = exports.default = locale;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/picker",
-  "version": "1.2.4",
+  "version": "1.4.0",
   "description": "React date & time picker",
   "keywords": [
     "react",