@rc-component/picker 1.5.1 → 1.6.0

package/es/PickerInput/Popup/Footer.js

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

package/es/PickerInput/Popup/index.d.ts

@@ -16,5 +16,7 @@ export interface PopupProps<DateType extends object = any, PresetValue = DateTyp
     isInvalid: (date: DateType | DateType[]) => boolean;
     onOk: VoidFunction;
     onPanelMouseDown?: React.MouseEventHandler<HTMLDivElement>;
+    classNames?: SharedPickerProps['classNames'];
+    styles?: SharedPickerProps['styles'];
 }
 export default function Popup<DateType extends object = any>(props: PopupProps<DateType>): React.JSX.Element;

package/es/PickerInput/Popup/index.js

@@ -1,4 +1,6 @@
 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); }
@@ -9,7 +11,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 { clsx } from 'clsx';
 import ResizeObserver from '@rc-component/resize-observer';
 import * as React from 'react';
 import { toArray } from "../../utils/miscUtil";
@@ -18,6 +20,7 @@ import Footer from "./Footer";
 import PopupPanel from "./PopupPanel";
 import PresetPanel from "./PresetPanel";
 export default function Popup(props) {
+  var _classNames$popup, _styles$popup;
   var panelRender = props.panelRender,
     internalMode = props.internalMode,
     picker = props.picker,
@@ -38,7 +41,9 @@ export default function Popup(props) {
     isInvalid = props.isInvalid,
     defaultOpenValue = props.defaultOpenValue,
     onOk = props.onOk,
-    onSubmit = props.onSubmit;
+    onSubmit = props.onSubmit,
+    classNames = props.classNames,
+    styles = props.styles;
   var _React$useContext = React.useContext(PickerContext),
     prefixCls = _React$useContext.prefixCls;
   var panelPrefixCls = "".concat(prefixCls, "-panel");
@@ -168,9 +173,9 @@ export default function Popup(props) {
   var renderNode = /*#__PURE__*/React.createElement("div", {
     onMouseDown: onPanelMouseDown,
     tabIndex: -1,
-    className: classNames(containerPrefixCls, // Used for Today Button style, safe to remove if no need
-    "".concat(prefixCls, "-").concat(internalMode, "-panel-container")),
-    style: _defineProperty(_defineProperty({}, rtl ? marginRight : marginLeft, containerOffset), rtl ? marginLeft : marginRight, 'auto')
+    className: clsx(containerPrefixCls, // Used for Today Button style, safe to remove if no need
+    "".concat(prefixCls, "-").concat(internalMode, "-panel-container"), classNames === null || classNames === void 0 || (_classNames$popup = classNames.popup) === null || _classNames$popup === void 0 ? void 0 : _classNames$popup.container),
+    style: _objectSpread(_defineProperty(_defineProperty({}, rtl ? marginRight : marginLeft, containerOffset), rtl ? marginLeft : marginRight, 'auto'), styles === null || styles === void 0 || (_styles$popup = styles.popup) === null || _styles$popup === void 0 ? void 0 : _styles$popup.container)
     // Still wish not to lose focus on mouse down
     // onMouseDown={(e) => {
     //   // e.preventDefault();
@@ -183,7 +188,7 @@ export default function Popup(props) {
     renderNode = /*#__PURE__*/React.createElement("div", {
       onMouseDown: onPanelMouseDown,
       ref: wrapperRef,
-      className: classNames("".concat(prefixCls, "-range-wrapper"), "".concat(prefixCls, "-").concat(picker, "-range-wrapper"))
+      className: clsx("".concat(prefixCls, "-range-wrapper"), "".concat(prefixCls, "-").concat(picker, "-range-wrapper"))
     }, /*#__PURE__*/React.createElement("div", {
       ref: arrowRef,
       className: "".concat(prefixCls, "-range-arrow"),

package/es/PickerInput/RangePicker.js

@@ -16,7 +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, useControlledState } from '@rc-component/util';
-import cls from 'classnames';
+import { clsx } from 'clsx';
 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";
@@ -473,6 +473,10 @@ function RangePicker(props, ref) {
     // Render
     ,
     cellRender: onInternalCellRender
+    // Styles
+    ,
+    classNames: mergedClassNames,
+    styles: mergedStyles
   }));
 
   // ========================================================
@@ -593,7 +597,7 @@ function RangePicker(props, ref) {
   }, /*#__PURE__*/React.createElement(PickerTrigger, _extends({}, pickTriggerProps(filledProps), {
     popupElement: panel,
     popupStyle: mergedStyles.popup.root,
-    popupClassName: cls(rootClassName, mergedClassNames.popup.root)
+    popupClassName: clsx(rootClassName, mergedClassNames.popup.root)
     // Visible
     ,
     visible: mergedOpen,
@@ -608,7 +612,7 @@ function RangePicker(props, ref) {
     ref: selectorRef
     // Style
     ,
-    className: cls(filledProps.className, rootClassName, mergedClassNames.root),
+    className: clsx(filledProps.className, rootClassName, mergedClassNames.root),
     style: _objectSpread(_objectSpread({}, mergedStyles.root), filledProps.style)
     // Icon
     ,

package/es/PickerInput/Selector/Icon.js

@@ -5,7 +5,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import * as React from 'react';
 import PickerContext from "../context";
-import cls from 'classnames';
+import { clsx } from 'clsx';
 export default function Icon(props) {
   var icon = props.icon,
     type = props.type,
@@ -15,7 +15,7 @@ export default function Icon(props) {
     classNames = _React$useContext.classNames,
     styles = _React$useContext.styles;
   return icon ? /*#__PURE__*/React.createElement("span", _extends({
-    className: cls("".concat(prefixCls, "-").concat(type), classNames.suffix),
+    className: clsx("".concat(prefixCls, "-").concat(type), classNames.suffix),
     style: styles.suffix
   }, restProps), icon) : null;
 }

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 cls from 'classnames';
+import { clsx } from 'clsx';
 import { useEvent } from '@rc-component/util';
 import useLayoutEffect from "@rc-component/util/es/hooks/useLayoutEffect";
 import raf from "@rc-component/util/es/raf";
@@ -96,8 +96,8 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, [value]);
 
   // ========================= Refs =========================
-  var holderRef = React.useRef();
-  var inputRef = React.useRef();
+  var holderRef = React.useRef(null);
+  var inputRef = React.useRef(null);
   React.useImperativeHandle(ref, function () {
     return {
       nativeElement: holderRef.current,
@@ -356,7 +356,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
   } : {};
   return /*#__PURE__*/React.createElement("div", {
     ref: holderRef,
-    className: cls(inputPrefixCls, _defineProperty(_defineProperty({}, "".concat(inputPrefixCls, "-active"), active && showActiveCls), "".concat(inputPrefixCls, "-placeholder"), helped), className)
+    className: clsx(inputPrefixCls, _defineProperty(_defineProperty({}, "".concat(inputPrefixCls, "-active"), active && showActiveCls), "".concat(inputPrefixCls, "-placeholder"), helped), className)
   }, /*#__PURE__*/React.createElement(Component, _extends({
     ref: inputRef,
     "aria-invalid": invalid,

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 cls from 'classnames';
+import { clsx } from 'clsx';
 import ResizeObserver from '@rc-component/resize-observer';
 import { useEvent } from '@rc-component/util';
 import * as React from 'react';
@@ -169,7 +169,7 @@ function RangeSelector(props, ref) {
   return /*#__PURE__*/React.createElement(ResizeObserver, {
     onResize: syncActiveOffset
   }, /*#__PURE__*/React.createElement("div", _extends({}, rootProps, {
-    className: cls(prefixCls, "".concat(prefixCls, "-range"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-focused"), focused), "".concat(prefixCls, "-disabled"), disabled.every(function (i) {
+    className: clsx(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,7 +187,7 @@ function RangeSelector(props, ref) {
       _onMouseDown === null || _onMouseDown === void 0 || _onMouseDown(e);
     }
   }), prefix && /*#__PURE__*/React.createElement("div", {
-    className: cls("".concat(prefixCls, "-prefix"), classNames.prefix),
+    className: clsx("".concat(prefixCls, "-prefix"), classNames.prefix),
     style: styles.prefix
   }, prefix), /*#__PURE__*/React.createElement(Input, _extends({
     ref: inputStartRef

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

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import Overflow from 'rc-overflow';
 import * as React from 'react';
 export default function MultipleDates(props) {
@@ -18,7 +18,7 @@ export default function MultipleDates(props) {
   // ========================= Item =========================
   function renderSelector(content, onClose) {
     return /*#__PURE__*/React.createElement("span", {
-      className: classNames("".concat(selectionCls, "-item")),
+      className: clsx("".concat(selectionCls, "-item")),
       title: typeof content === 'string' ? content : null
     }, /*#__PURE__*/React.createElement("span", {
       className: "".concat(selectionCls, "-item-content")

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 cls from 'classnames';
+import { clsx } from 'clsx';
 import * as React from 'react';
 import { isSame } from "../../../utils/dateUtil";
 import PickerContext from "../../context";
@@ -164,7 +164,7 @@ function SingleSelector(props, ref) {
 
   // ======================== Render ========================
   return /*#__PURE__*/React.createElement("div", _extends({}, rootProps, {
-    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),
+    className: clsx(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,7 +179,7 @@ function SingleSelector(props, ref) {
       _onMouseDown === null || _onMouseDown === void 0 || _onMouseDown(e);
     }
   }), prefix && /*#__PURE__*/React.createElement("div", {
-    className: cls("".concat(prefixCls, "-prefix"), classNames.prefix),
+    className: clsx("".concat(prefixCls, "-prefix"), classNames.prefix),
     style: styles.prefix
   }, prefix), selectorNode);
 }

package/es/PickerInput/SinglePicker.js

@@ -16,7 +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, useControlledState } from '@rc-component/util';
-import cls from 'classnames';
+import { clsx } from 'clsx';
 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";
@@ -416,6 +416,10 @@ function Picker(props, ref) {
     // Render
     ,
     cellRender: onInternalCellRender
+    // Styles
+    ,
+    classNames: mergedClassNames,
+    styles: mergedStyles
   }));
 
   // ========================================================
@@ -497,7 +501,7 @@ function Picker(props, ref) {
   }, /*#__PURE__*/React.createElement(PickerTrigger, _extends({}, pickTriggerProps(filledProps), {
     popupElement: panel,
     popupStyle: mergedStyles.popup.root,
-    popupClassName: cls(rootClassName, mergedClassNames.popup.root)
+    popupClassName: clsx(rootClassName, mergedClassNames.popup.root)
     // Visible
     ,
     visible: mergedOpen,
@@ -509,7 +513,7 @@ function Picker(props, ref) {
     ref: selectorRef
     // Style
     ,
-    className: cls(filledProps.className, rootClassName, mergedClassNames.root),
+    className: clsx(filledProps.className, rootClassName, mergedClassNames.root),
     style: _objectSpread(_objectSpread({}, mergedStyles.root), filledProps.style)
     // Icon
     ,

package/es/PickerPanel/DatePanel/index.js

@@ -9,7 +9,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 { clsx } from 'clsx';
 import * as React from 'react';
 import { formatValue, getWeekStartDate, isSameDate, isSameMonth, WEEK_DAY_COUNT } from "../../utils/dateUtil";
 import { PanelContext, useInfo } from "../context";
@@ -53,7 +53,7 @@ export default function DatePanel(props) {
     });
     return /*#__PURE__*/React.createElement("td", {
       key: "week",
-      className: classNames(cellPrefixCls, "".concat(cellPrefixCls, "-week"), _defineProperty({}, "".concat(cellPrefixCls, "-disabled"), disabled))
+      className: clsx(cellPrefixCls, "".concat(cellPrefixCls, "-week"), _defineProperty({}, "".concat(cellPrefixCls, "-disabled"), disabled))
       // Operation: Same as code in PanelBody
       ,
       onClick: function onClick() {
@@ -151,7 +151,7 @@ export default function DatePanel(props) {
   return /*#__PURE__*/React.createElement(PanelContext.Provider, {
     value: info
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(panelPrefixCls, showWeek && "".concat(panelPrefixCls, "-show-week"))
+    className: clsx(panelPrefixCls, showWeek && "".concat(panelPrefixCls, "-show-week"))
   }, /*#__PURE__*/React.createElement(PanelHeader, {
     offset: function offset(distance) {
       return generateConfig.addMonth(pickerValue, distance);

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 cls from 'classnames';
+import { clsx } from 'clsx';
 import * as React from 'react';
 import { formatValue, isInRange, isSame } from "../utils/dateUtil";
 import { PickerHackContext, usePanelContext } from "./context";
@@ -104,7 +104,7 @@ export default function PanelBody(props) {
       rowNode.push( /*#__PURE__*/React.createElement("td", {
         key: col,
         title: title,
-        className: cls(cellPrefixCls, classNames.item, _objectSpread(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(cellPrefixCls, "-disabled"), disabled), "".concat(cellPrefixCls, "-hover"), (hoverValue || []).some(function (date) {
+        className: clsx(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
@@ -149,10 +149,10 @@ export default function PanelBody(props) {
 
   // ============================== Render ==============================
   return /*#__PURE__*/React.createElement("div", {
-    className: cls("".concat(prefixCls, "-body"), classNames.body),
+    className: clsx("".concat(prefixCls, "-body"), classNames.body),
     style: styles.body
   }, /*#__PURE__*/React.createElement("table", {
-    className: cls("".concat(prefixCls, "-content"), classNames.content),
+    className: clsx("".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 cls from 'classnames';
+import { clsx } from 'clsx';
 import * as React from 'react';
 import { isSameOrAfter } from "../utils/dateUtil";
 import { PickerHackContext, usePanelContext } from "./context";
@@ -87,7 +87,7 @@ function PanelHeader(props) {
   var superPrevBtnCls = "".concat(headerPrefixCls, "-super-prev-btn");
   var superNextBtnCls = "".concat(headerPrefixCls, "-super-next-btn");
   return /*#__PURE__*/React.createElement("div", {
-    className: cls(headerPrefixCls, classNames.header),
+    className: clsx(headerPrefixCls, classNames.header),
     style: styles.header
   }, superOffset && /*#__PURE__*/React.createElement("button", {
     type: "button",
@@ -96,7 +96,7 @@ function PanelHeader(props) {
       return onSuperOffset(-1);
     },
     tabIndex: -1,
-    className: cls(superPrevBtnCls, disabledSuperOffsetPrev && "".concat(superPrevBtnCls, "-disabled")),
+    className: clsx(superPrevBtnCls, disabledSuperOffsetPrev && "".concat(superPrevBtnCls, "-disabled")),
     disabled: disabledSuperOffsetPrev,
     style: hidePrev ? HIDDEN_STYLE : {}
   }, superPrevIcon), offset && /*#__PURE__*/React.createElement("button", {
@@ -106,7 +106,7 @@ function PanelHeader(props) {
       return onOffset(-1);
     },
     tabIndex: -1,
-    className: cls(prevBtnCls, disabledOffsetPrev && "".concat(prevBtnCls, "-disabled")),
+    className: clsx(prevBtnCls, disabledOffsetPrev && "".concat(prevBtnCls, "-disabled")),
     disabled: disabledOffsetPrev,
     style: hidePrev ? HIDDEN_STYLE : {}
   }, prevIcon), /*#__PURE__*/React.createElement("div", {
@@ -118,7 +118,7 @@ function PanelHeader(props) {
       return onOffset(1);
     },
     tabIndex: -1,
-    className: cls(nextBtnCls, disabledOffsetNext && "".concat(nextBtnCls, "-disabled")),
+    className: clsx(nextBtnCls, disabledOffsetNext && "".concat(nextBtnCls, "-disabled")),
     disabled: disabledOffsetNext,
     style: hideNext ? HIDDEN_STYLE : {}
   }, nextIcon), superOffset && /*#__PURE__*/React.createElement("button", {
@@ -128,7 +128,7 @@ function PanelHeader(props) {
       return onSuperOffset(1);
     },
     tabIndex: -1,
-    className: cls(superNextBtnCls, disabledSuperOffsetNext && "".concat(superNextBtnCls, "-disabled")),
+    className: clsx(superNextBtnCls, disabledSuperOffsetNext && "".concat(superNextBtnCls, "-disabled")),
     disabled: disabledSuperOffsetNext,
     style: hideNext ? HIDDEN_STYLE : {}
   }, superNextIcon));

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

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

package/es/PickerPanel/TimePanel/index.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 { clsx } from 'clsx';
 import * as React from 'react';
 import { formatValue } from "../../utils/dateUtil";
 import { PanelContext, useInfo } from "../context";
@@ -29,7 +29,7 @@ export default function TimePanel(props) {
   return /*#__PURE__*/React.createElement(PanelContext.Provider, {
     value: info
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(panelPrefixCls)
+    className: clsx(panelPrefixCls)
   }, /*#__PURE__*/React.createElement(PanelHeader, null, value ? formatValue(value, {
     locale: locale,
     format: format,

package/es/PickerPanel/WeekPanel/index.js

@@ -9,7 +9,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 { clsx } from 'clsx';
 import * as React from 'react';
 import { isInRange, isSameWeek } from "../../utils/dateUtil";
 import DatePanel from "../DatePanel";
@@ -41,7 +41,7 @@ export default function WeekPanel(props) {
         return isSameWeek(generateConfig, localeName, currentDate, date);
       });
     }
-    return classNames(rowPrefixCls, _defineProperty({}, "".concat(rowPrefixCls, "-selected"), !hoverRangeValue && isSameWeek(generateConfig, localeName, value, currentDate)),
+    return clsx(rowPrefixCls, _defineProperty({}, "".concat(rowPrefixCls, "-selected"), !hoverRangeValue && isSameWeek(generateConfig, localeName, value, currentDate)),
     // Patch for hover range
     rangeCls);
   };

package/es/PickerPanel/index.js

@@ -15,7 +15,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 { clsx } from 'clsx';
 import { useEvent, useControlledState, warning } from '@rc-component/util';
 import * as React from 'react';
 import useLocale from "../hooks/useLocale";
@@ -285,7 +285,7 @@ function PickerPanel(props, ref) {
   }, /*#__PURE__*/React.createElement("div", {
     ref: rootRef,
     tabIndex: tabIndex,
-    className: classNames(panelCls, _defineProperty({}, "".concat(panelCls, "-rtl"), direction === 'rtl'))
+    className: clsx(panelCls, _defineProperty({}, "".concat(panelCls, "-rtl"), direction === 'rtl'))
   }, /*#__PURE__*/React.createElement(PanelComponent, _extends({}, panelProps, {
     // Time
     showTime: mergedShowTime

package/es/PickerTrigger/index.js

@@ -3,7 +3,7 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 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 Trigger from '@rc-component/trigger';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import * as React from 'react';
 import { getRealPlacement } from "../utils/uiUtil";
 import PickerContext from "../PickerInput/context";
@@ -72,7 +72,7 @@ function PickerTrigger(_ref) {
     popup: popupElement,
     popupAlign: popupAlign,
     popupVisible: visible,
-    popupClassName: classNames(popupClassName, _defineProperty(_defineProperty({}, "".concat(dropdownPrefixCls, "-range"), range), "".concat(dropdownPrefixCls, "-rtl"), direction === 'rtl')),
+    popupClassName: clsx(popupClassName, _defineProperty(_defineProperty({}, "".concat(dropdownPrefixCls, "-range"), range), "".concat(dropdownPrefixCls, "-rtl"), direction === 'rtl')),
     popupStyle: popupStyle,
     stretch: "minWidth",
     getPopupContainer: getPopupContainer,

package/es/interface.d.ts

@@ -208,7 +208,7 @@ export type PickerFocusEventHandler = (e: React.FocusEvent<HTMLElement>, info: B
 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 type PanelSemanticName = 'root' | 'header' | 'body' | 'content' | 'item' | 'footer' | 'container';
 export interface SharedPickerProps<DateType extends object = any> extends SharedHTMLAttrs, Pick<SharedPanelProps<DateType>, 'prevIcon' | 'nextIcon' | 'superPrevIcon' | 'superNextIcon'> {
     direction?: 'ltr' | 'rtl';
     prefixCls?: string;

package/lib/PickerInput/Popup/Footer.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Footer;
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var React = _interopRequireWildcard(require("react"));
 var _useTimeInfo3 = _interopRequireDefault(require("../../hooks/useTimeInfo"));
 var _context = _interopRequireDefault(require("../context"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -62,7 +62,7 @@ function Footer(props) {
   var presetNode = showNow && /*#__PURE__*/React.createElement("li", {
     className: nowPrefixCls
   }, /*#__PURE__*/React.createElement("a", {
-    className: (0, _classnames.default)(nowBtnPrefixCls, nowDisabled && "".concat(nowBtnPrefixCls, "-disabled")),
+    className: (0, _clsx.clsx)(nowBtnPrefixCls, nowDisabled && "".concat(nowBtnPrefixCls, "-disabled")),
     "aria-disabled": nowDisabled,
     onClick: onInternalNow
   }, internalMode === 'date' ? locale.today : locale.now));
@@ -83,7 +83,7 @@ function Footer(props) {
     return null;
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: (0, _classnames.default)("".concat(prefixCls, "-footer"), classNames.popup.footer),
+    className: (0, _clsx.clsx)("".concat(prefixCls, "-footer"), classNames.popup.footer),
     style: styles.popup.footer
   }, extraNode && /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-footer-extra")

package/lib/PickerInput/Popup/index.d.ts

@@ -16,5 +16,7 @@ export interface PopupProps<DateType extends object = any, PresetValue = DateTyp
     isInvalid: (date: DateType | DateType[]) => boolean;
     onOk: VoidFunction;
     onPanelMouseDown?: React.MouseEventHandler<HTMLDivElement>;
+    classNames?: SharedPickerProps['classNames'];
+    styles?: SharedPickerProps['styles'];
 }
 export default function Popup<DateType extends object = any>(props: PopupProps<DateType>): React.JSX.Element;