@rc-component/picker 1.2.4 → 1.4.0

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

@@ -12,10 +12,10 @@ 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 { PickerHackContext, usePanelContext } from "../../context";
+import { usePanelContext } from "../../context";
 import useScrollTo from "./useScrollTo";
 var SCROLL_DELAY = 300;
 // Not use JSON.stringify to avoid dead loop
@@ -40,10 +40,9 @@ export default function TimeColumn(props) {
     prefixCls = _usePanelContext.prefixCls,
     cellRender = _usePanelContext.cellRender,
     now = _usePanelContext.now,
-    locale = _usePanelContext.locale;
-  var _React$useContext = React.useContext(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");
 
@@ -122,8 +121,8 @@ export default function TimeColumn(props) {
     }, label);
     return /*#__PURE__*/React.createElement("li", {
       key: unitValue,
-      style: styles === null || styles === void 0 ? void 0 : styles.popupItem,
-      className: classNames(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: 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,7 +10,7 @@ import useTimeInfo from "../../../hooks/useTimeInfo";
 import { formatValue } from "../../../utils/dateUtil";
 import { PickerHackContext, usePanelContext } from "../../context";
 import TimeColumn from "./TimeColumn";
-import classNames from 'classnames';
+import cls from 'classnames';
 function isAM(hour) {
   return hour < 12;
 }
@@ -23,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,
@@ -32,9 +34,7 @@ export default function TimePanelBody(props) {
     pickerValue = _usePanelContext.pickerValue;
   var value = (values === null || values === void 0 ? void 0 : values[0]) || null;
   var _React$useContext = React.useContext(PickerHackContext),
-    onCellDblClick = _React$useContext.onCellDblClick,
-    pickerClassNames = _React$useContext.classNames,
-    styles = _React$useContext.styles;
+    onCellDblClick = _React$useContext.onCellDblClick;
 
   // ========================== Info ==========================
   var _useTimeInfo = useTimeInfo(generateConfig, props, value),
@@ -247,8 +247,8 @@ export default function TimePanelBody(props) {
     changeOnScroll: changeOnScroll
   };
   return /*#__PURE__*/React.createElement("div", {
-    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
   }, 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;
@@ -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/es/PickerPanel/index.js

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

package/es/hooks/useSemantic.d.ts

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

package/es/hooks/useSemantic.js

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

package/es/interface.d.ts

@@ -201,19 +201,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/es/locale/te_IN.d.ts

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

package/es/locale/te_IN.js

@@ -0,0 +1,33 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { commonLocale } from "./common";
+var locale = _objectSpread(_objectSpread({}, 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: 'తదుపరి శతాబ్దం'
+});
+export default locale;

package/lib/PickerInput/Popup/Footer.js

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

package/lib/PickerInput/RangePicker.js

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

package/lib/PickerInput/Selector/Icon.js

@@ -23,11 +23,11 @@ function Icon(props) {
     restProps = _objectWithoutProperties(props, _excluded);
   var _React$useContext = React.useContext(_context.default),
     prefixCls = _React$useContext.prefixCls,
-    iconClassNames = _React$useContext.classNames,
+    classNames = _React$useContext.classNames,
     styles = _React$useContext.styles;
   return icon ? /*#__PURE__*/React.createElement("span", _extends({
-    className: (0, _classnames.default)("".concat(prefixCls, "-").concat(type), iconClassNames === null || iconClassNames === void 0 ? void 0 : iconClassNames.suffix),
-    style: styles === null || styles === void 0 ? void 0 : styles.suffix
+    className: (0, _classnames.default)("".concat(prefixCls, "-").concat(type), classNames.suffix),
+    style: styles.suffix
   }, restProps), icon) : null;
 }
 function ClearIcon(_ref) {

package/lib/PickerInput/Selector/Input.js

@@ -71,7 +71,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");
 
@@ -364,8 +364,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
   } : {};
   return /*#__PURE__*/React.createElement("div", {
     ref: holderRef,
-    className: (0, _classnames.default)(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: (0, _classnames.default)(inputPrefixCls, _defineProperty(_defineProperty({}, "".concat(inputPrefixCls, "-active"), active && showActiveCls), "".concat(inputPrefixCls, "-placeholder"), helped), className)
   }, /*#__PURE__*/React.createElement(Component, _extends({
     ref: inputRef,
     "aria-invalid": invalid,
@@ -377,7 +376,9 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, inputProps, {
     // Value
     value: inputValue,
-    onChange: onInternalChange
+    onChange: onInternalChange,
+    className: classNames.input,
+    style: styles.input
   })), /*#__PURE__*/React.createElement(_Icon.default, {
     type: "suffix",
     icon: suffixIcon

package/lib/PickerInput/Selector/RangeSelector.js

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

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

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