rsuite 5.73.0 → 5.74.0-beta.0

package/cjs/CustomProvider/types.d.ts

@@ -0,0 +1,212 @@
+import type { AccordionProps } from '../Accordion';
+import type { AffixProps } from '../Affix';
+import type { BounceProps } from '../Animation/Bounce';
+import type { CollapseProps } from '../Animation/Collapse';
+import type { FadeProps } from '../Animation/Fade';
+import type { SlideProps } from '../Animation/Slide';
+import type { TransitionProps } from '../Animation/Transition';
+import type { AutoCompleteProps } from '../AutoComplete';
+import type { AvatarProps } from '../Avatar';
+import type { AvatarGroupProps } from '../AvatarGroup';
+import type { BadgeProps } from '../Badge';
+import type { BreadcrumbProps } from '../Breadcrumb';
+import type { ButtonProps } from '../Button';
+import type { ButtonGroupProps } from '../ButtonGroup';
+import type { ButtonToolbarProps } from '../ButtonToolbar';
+import type { CalendarProps } from '../Calendar';
+import type { CarouselProps } from '../Carousel';
+import type { CascadeTreeProps } from '../CascadeTree';
+import type { CascaderProps } from '../Cascader';
+import type { CheckPickerProps } from '../CheckPicker';
+import type { CheckTreeProps } from '../CheckTree';
+import type { CheckTreePickerProps } from '../CheckTreePicker';
+import type { CheckboxProps } from '../Checkbox';
+import type { CheckboxGroupProps } from '../CheckboxGroup';
+import type { ColProps } from '../Col';
+import type { ContainerProps } from '../Container';
+import type { ContentProps } from '../Content';
+import type { DateInputProps } from '../DateInput';
+import type { DatePickerProps } from '../DatePicker';
+import type { DateRangeInputProps } from '../DateRangeInput';
+import type { DateRangePickerProps } from '../DateRangePicker';
+import type { DividerProps } from '../Divider';
+import type { DrawerProps } from '../Drawer';
+import type { DropdownProps } from '../Dropdown';
+import type { FlexboxGridProps } from '../FlexboxGrid';
+import type { FooterProps } from '../Footer';
+import type { FormProps } from '../Form';
+import type { FormControlProps } from '../FormControl';
+import type { FormControlLabelProps } from '../FormControlLabel';
+import type { FormErrorMessageProps } from '../FormErrorMessage';
+import type { FormGroupProps } from '../FormGroup';
+import type { FormHelpTextProps } from '../FormHelpText';
+import type { GridProps } from '../Grid';
+import type { HeaderProps } from '../Header';
+import type { HeadingProps } from '../Heading';
+import type { HeadingGroupProps } from '../HeadingGroup';
+import type { HighlightProps } from '../Highlight';
+import type { IconButtonProps } from '../IconButton';
+import type { InlineEditProps } from '../InlineEdit';
+import type { InputProps } from '../Input';
+import type { InputGroupProps } from '../InputGroup';
+import type { InputNumberProps } from '../InputNumber';
+import type { InputPickerProps } from '../InputPicker';
+import type { ListProps } from '../List';
+import type { LoaderProps } from '../Loader';
+import type { MaskedInputProps } from '../MaskedInput';
+import type { MessageProps } from '../Message';
+import type { ModalProps } from '../Modal';
+import type { MultiCascadeTreeProps } from '../MultiCascadeTree';
+import type { MultiCascaderProps } from '../MultiCascader';
+import type { NavProps } from '../Nav';
+import type { NavbarProps } from '../Navbar';
+import type { NotificationProps } from '../Notification';
+import type { PaginationProps } from '../Pagination';
+import type { PanelProps } from '../Panel';
+import type { PanelGroupProps } from '../PanelGroup';
+import type { PlaceholderGraphProps } from '../Placeholder/PlaceholderGraph';
+import type { PlaceholderGridProps } from '../Placeholder/PlaceholderGrid';
+import type { PlaceholderParagraphProps } from '../Placeholder/PlaceholderParagraph';
+import type { PopoverProps } from '../Popover';
+import type { ProgressCircleProps } from '../Progress/ProgressCircle';
+import type { ProgressLineProps } from '../Progress/ProgressLine';
+import type { RadioProps } from '../Radio';
+import type { RadioGroupProps } from '../RadioGroup';
+import type { RadioTileProps } from '../RadioTile';
+import type { RadioTileGroupProps } from '../RadioTileGroup';
+import type { RangeSliderProps } from '../RangeSlider';
+import type { RateProps } from '../Rate';
+import type { RowProps } from '../Row';
+import type { SafeAnchorProps } from '../SafeAnchor';
+import type { SelectPickerProps } from '../SelectPicker';
+import type { SidebarProps } from '../Sidebar';
+import type { SidenavProps } from '../Sidenav';
+import type { SliderProps } from '../Slider';
+import type { StackProps } from '../Stack';
+import type { StepsProps } from '../Steps';
+import type { TableProps } from '../Table';
+import type { TabsProps } from '../Tabs';
+import type { TagProps } from '../Tag';
+import type { TagGroupProps } from '../TagGroup';
+import type { TagInputProps } from '../TagInput';
+import type { TagPickerProps } from '../TagPicker';
+import type { TextProps } from '../Text';
+import type { TimePickerProps } from '../TimePicker';
+import type { TimeRangePickerProps } from '../TimeRangePicker';
+import type { TimelineProps } from '../Timeline';
+import type { ToggleProps } from '../Toggle';
+import type { TooltipProps } from '../Tooltip';
+import type { TreeProps } from '../Tree';
+import type { TreePickerProps } from '../TreePicker';
+import type { UploaderProps } from '../Uploader';
+import type { VisuallyHiddenProps } from '../VisuallyHidden';
+import type { WhisperProps } from '../Whisper';
+interface ComponentProps<T> {
+    defaultProps: Partial<T>;
+}
+export interface ReactSuiteComponents {
+    Accordion: ComponentProps<AccordionProps>;
+    Affix: ComponentProps<AffixProps>;
+    Bounce: ComponentProps<BounceProps>;
+    Collapse: ComponentProps<CollapseProps>;
+    Fade: ComponentProps<FadeProps>;
+    Slide: ComponentProps<SlideProps>;
+    Transition: ComponentProps<TransitionProps>;
+    AutoComplete: ComponentProps<AutoCompleteProps>;
+    Avatar: ComponentProps<AvatarProps>;
+    AvatarGroup: ComponentProps<AvatarGroupProps>;
+    Badge: ComponentProps<BadgeProps>;
+    Breadcrumb: ComponentProps<BreadcrumbProps>;
+    Button: ComponentProps<ButtonProps>;
+    ButtonGroup: ComponentProps<ButtonGroupProps>;
+    ButtonToolbar: ComponentProps<ButtonToolbarProps>;
+    Calendar: ComponentProps<CalendarProps>;
+    Carousel: ComponentProps<CarouselProps>;
+    CascadeTree: ComponentProps<CascadeTreeProps>;
+    Cascader: ComponentProps<CascaderProps>;
+    CheckPicker: ComponentProps<CheckPickerProps>;
+    CheckTree: ComponentProps<CheckTreeProps>;
+    CheckTreePicker: ComponentProps<CheckTreePickerProps>;
+    Checkbox: ComponentProps<CheckboxProps>;
+    CheckboxGroup: ComponentProps<CheckboxGroupProps>;
+    Col: ComponentProps<ColProps>;
+    Container: ComponentProps<ContainerProps>;
+    Content: ComponentProps<ContentProps>;
+    DateInput: ComponentProps<DateInputProps>;
+    DatePicker: ComponentProps<DatePickerProps>;
+    DateRangeInput: ComponentProps<DateRangeInputProps>;
+    DateRangePicker: ComponentProps<DateRangePickerProps>;
+    Divider: ComponentProps<DividerProps>;
+    Drawer: ComponentProps<DrawerProps>;
+    Dropdown: ComponentProps<DropdownProps>;
+    FlexboxGrid: ComponentProps<FlexboxGridProps>;
+    Footer: ComponentProps<FooterProps>;
+    Form: ComponentProps<FormProps>;
+    FormControl: ComponentProps<FormControlProps>;
+    FormControlLabel: ComponentProps<FormControlLabelProps>;
+    FormErrorMessage: ComponentProps<FormErrorMessageProps>;
+    FormGroup: ComponentProps<FormGroupProps>;
+    FormHelpText: ComponentProps<FormHelpTextProps>;
+    Grid: ComponentProps<GridProps>;
+    Header: ComponentProps<HeaderProps>;
+    Heading: ComponentProps<HeadingProps>;
+    HeadingGroup: ComponentProps<HeadingGroupProps>;
+    Highlight: ComponentProps<HighlightProps>;
+    IconButton: ComponentProps<IconButtonProps>;
+    InlineEdit: ComponentProps<InlineEditProps>;
+    Input: ComponentProps<InputProps>;
+    InputGroup: ComponentProps<InputGroupProps>;
+    InputNumber: ComponentProps<InputNumberProps>;
+    InputPicker: ComponentProps<InputPickerProps>;
+    List: ComponentProps<ListProps>;
+    Loader: ComponentProps<LoaderProps>;
+    MaskedInput: ComponentProps<MaskedInputProps>;
+    Message: ComponentProps<MessageProps>;
+    Modal: ComponentProps<ModalProps>;
+    MultiCascadeTree: ComponentProps<MultiCascadeTreeProps>;
+    MultiCascader: ComponentProps<MultiCascaderProps>;
+    Nav: ComponentProps<NavProps>;
+    Navbar: ComponentProps<NavbarProps>;
+    Notification: ComponentProps<NotificationProps>;
+    Pagination: ComponentProps<PaginationProps>;
+    Panel: ComponentProps<PanelProps>;
+    PanelGroup: ComponentProps<PanelGroupProps>;
+    PlaceholderGraph: ComponentProps<PlaceholderGraphProps>;
+    PlaceholderGrid: ComponentProps<PlaceholderGridProps>;
+    PlaceholderParagraph: ComponentProps<PlaceholderParagraphProps>;
+    Popover: ComponentProps<PopoverProps>;
+    ProgressCircle: ComponentProps<ProgressCircleProps>;
+    ProgressLine: ComponentProps<ProgressLineProps>;
+    Radio: ComponentProps<RadioProps>;
+    RadioGroup: ComponentProps<RadioGroupProps>;
+    RadioTile: ComponentProps<RadioTileProps>;
+    RadioTileGroup: ComponentProps<RadioTileGroupProps>;
+    RangeSlider: ComponentProps<RangeSliderProps>;
+    Rate: ComponentProps<RateProps>;
+    Row: ComponentProps<RowProps>;
+    SafeAnchor: ComponentProps<SafeAnchorProps>;
+    SelectPicker: ComponentProps<SelectPickerProps>;
+    Sidebar: ComponentProps<SidebarProps>;
+    Sidenav: ComponentProps<SidenavProps>;
+    Slider: ComponentProps<SliderProps>;
+    Stack: ComponentProps<StackProps>;
+    Steps: ComponentProps<StepsProps>;
+    Table: ComponentProps<TableProps>;
+    Tabs: ComponentProps<TabsProps>;
+    Tag: ComponentProps<TagProps>;
+    TagGroup: ComponentProps<TagGroupProps>;
+    TagInput: ComponentProps<TagInputProps>;
+    TagPicker: ComponentProps<TagPickerProps>;
+    Text: ComponentProps<TextProps>;
+    TimePicker: ComponentProps<TimePickerProps>;
+    TimeRangePicker: ComponentProps<TimeRangePickerProps>;
+    Timeline: ComponentProps<TimelineProps>;
+    Toggle: ComponentProps<ToggleProps>;
+    Tooltip: ComponentProps<TooltipProps>;
+    Tree: ComponentProps<TreeProps>;
+    TreePicker: ComponentProps<TreePickerProps>;
+    Uploader: ComponentProps<UploaderProps>;
+    VisuallyHidden: ComponentProps<VisuallyHiddenProps>;
+    Whisper: ComponentProps<WhisperProps>;
+}
+export {};

package/cjs/CustomProvider/types.js

@@ -0,0 +1,4 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;

package/cjs/CustomProvider/useCustom.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import enGB from '../locales/en_GB';
+import type { FormatDateOptions } from '../internals/utils/date/types';
+import type { ReactSuiteComponents } from './types';
+type LocaleKey = keyof typeof enGB;
+/**
+ * A hook to get custom configuration of `<CustomProvider>`
+ * @param componentName - The name of the component
+ * @param componentProps - The props of the component
+ */
+export declare function useCustom<P = any>(componentName?: keyof ReactSuiteComponents, componentProps?: P): {
+    rtl: boolean;
+    toasters: import("react").MutableRefObject<Map<string, import("../toaster/ToastContainer").ToastContainerInstance>> | undefined;
+    disableRipple: boolean | undefined;
+    classPrefix: string | undefined;
+    propsWithDefaults: P;
+    getLocale: (key: LocaleKey | LocaleKey[], overrideLocale?: Record<string, any>) => any;
+    formatDate: (date: number | Date, formatStr: string, options?: FormatDateOptions) => string;
+    parseDate: (dateString: string, formatString: string, referenceDate?: Date | number, options?: any) => Date;
+};
+export default useCustom;

package/cjs/CustomProvider/useCustom.js

@@ -0,0 +1,115 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+exports.useCustom = useCustom;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = require("react");
+var _assign = _interopRequireDefault(require("lodash/assign"));
+var _en_GB = _interopRequireDefault(require("../locales/en_GB"));
+var _date = require("../internals/utils/date");
+var _CustomProvider = require("./CustomProvider");
+var _excluded = ["locale"];
+function getDefaultRTL() {
+  return typeof document !== 'undefined' && (document.body.getAttribute('dir') || document.dir) === 'rtl';
+}
+function toLocaleKey(componentName) {
+  var Picker = ['Cascader', 'CheckTreePicker', 'MultiCascader', 'SelectPicker', 'TreePicker', 'CheckPicker', 'CheckTreePicker'];
+  if (Picker.includes(componentName)) {
+    return 'Combobox';
+  }
+  return componentName;
+}
+
+/**
+ * A hook to get custom configuration of `<CustomProvider>`
+ * @param componentName - The name of the component
+ * @param componentProps - The props of the component
+ */
+function useCustom(componentName, componentProps) {
+  var _globalLocale$DateTim;
+  var _useContext = (0, _react.useContext)(_CustomProvider.CustomContext),
+    _useContext$component = _useContext.components,
+    components = _useContext$component === void 0 ? {} : _useContext$component,
+    _useContext$locale = _useContext.locale,
+    globalLocale = _useContext$locale === void 0 ? _en_GB.default : _useContext$locale,
+    _useContext$rtl = _useContext.rtl,
+    rtl = _useContext$rtl === void 0 ? getDefaultRTL() : _useContext$rtl,
+    formatDate = _useContext.formatDate,
+    parseDate = _useContext.parseDate,
+    classPrefix = _useContext.classPrefix,
+    toasters = _useContext.toasters,
+    disableRipple = _useContext.disableRipple;
+  var _ref = componentProps || {},
+    componentLocale = _ref.locale,
+    restProps = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  var dateLocale = globalLocale === null || globalLocale === void 0 ? void 0 : (_globalLocale$DateTim = globalLocale.DateTimeFormats) === null || _globalLocale$DateTim === void 0 ? void 0 : _globalLocale$DateTim.dateLocale;
+  var getLocale = (0, _react.useCallback)(function (key, overrideLocale) {
+    // Initialize with common locale
+    var publicLocale = (globalLocale === null || globalLocale === void 0 ? void 0 : globalLocale.common) || {};
+
+    // Merge component-specific locale(s) based on key type
+    var specificLocale = typeof key === 'string' ? globalLocale === null || globalLocale === void 0 ? void 0 : globalLocale[key] : Array.isArray(key) ? _assign.default.apply(void 0, [{}].concat(key.map(function (k) {
+      return globalLocale === null || globalLocale === void 0 ? void 0 : globalLocale[k];
+    }))) : {};
+
+    // Merge all parts: public locale, specific locale, custom component locale
+    return (0, _assign.default)({}, publicLocale, specificLocale, componentLocale, overrideLocale);
+  }, [globalLocale, componentLocale]);
+  var propsWithDefaults = (0, _react.useMemo)(function () {
+    var _components$component;
+    if (!componentName) {
+      return;
+    }
+
+    //Memoize the global default props based on component name
+    var globalDefaultProps = ((_components$component = components[componentName]) === null || _components$component === void 0 ? void 0 : _components$component.defaultProps) || {};
+    var mergedProps = (0, _assign.default)({}, globalDefaultProps, restProps);
+    var localeKey = toLocaleKey(componentName);
+
+    // If the default locale has the component name, then merge the locale.
+    if (Object.keys(_en_GB.default).includes(localeKey)) {
+      return (0, _extends2.default)({}, mergedProps, {
+        locale: getLocale(localeKey)
+      });
+    }
+    return mergedProps;
+  }, [componentName, components, getLocale, restProps]);
+  var _formatDate = (0, _react.useCallback)(function (date, formatStr, options) {
+    try {
+      if (formatDate) {
+        return formatDate(date, formatStr, options);
+      }
+      return (0, _date.format)((0, _date.isValid)(date) ? date : new Date(), formatStr, (0, _extends2.default)({
+        locale: dateLocale
+      }, options));
+    } catch (error) {
+      if (process.env.NODE_ENV === 'development') {
+        console.error('Error: Invalid date format', error);
+      }
+      return 'Error: Invalid date format';
+    }
+  }, [dateLocale, formatDate]);
+  var _parseDate = (0, _react.useCallback)(function (dateString, formatString, referenceDate, options) {
+    if (parseDate) {
+      return parseDate(dateString, formatString, referenceDate, options);
+    }
+    return (0, _date.parse)(dateString, formatString, referenceDate || new Date(), (0, _extends2.default)({
+      locale: dateLocale
+    }, options));
+  }, [parseDate, dateLocale]);
+  return {
+    rtl: rtl,
+    toasters: toasters,
+    disableRipple: disableRipple,
+    classPrefix: classPrefix,
+    propsWithDefaults: propsWithDefaults,
+    getLocale: getLocale,
+    formatDate: _formatDate,
+    parseDate: _parseDate
+  };
+}
+var _default = exports.default = useCustom;

package/cjs/DateInput/DateInput.js

@@ -13,6 +13,7 @@ var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
 var _date = require("../internals/utils/date");
 var _utils2 = require("./utils");
+var _CustomProvider = require("../CustomProvider");
 var _useDateInputState2 = _interopRequireDefault(require("./hooks/useDateInputState"));
 var _useKeyboardInputEvent = _interopRequireDefault(require("./hooks/useKeyboardInputEvent"));
 var _useIsFocused2 = _interopRequireDefault(require("./hooks/useIsFocused"));
@@ -27,25 +28,28 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * @see https://rsuitejs.com/components/date-input/
  */
 var DateInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var _useCustom = (0, _hooks.useCustom)('Calendar'),
-    locale = _useCustom.locale,
-    parseDate = _useCustom.parseDate;
-  var _props$format = props.format,
-    formatStr = _props$format === void 0 ? locale.shortDateFormat : _props$format,
-    valueProp = props.value,
-    defaultValue = props.defaultValue,
-    placeholder = props.placeholder,
-    onChange = props.onChange,
-    onKeyDown = props.onKeyDown,
-    onBlur = props.onBlur,
-    onFocus = props.onFocus,
-    onPaste = props.onPaste,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  var _useCustom = (0, _CustomProvider.useCustom)('DateInput', props),
+    propsWithDefaults = _useCustom.propsWithDefaults,
+    parseDate = _useCustom.parseDate,
+    getLocale = _useCustom.getLocale;
+  var _getLocale = getLocale('DateTimeFormats'),
+    dateLocale = _getLocale.dateLocale,
+    shortDateFormat = _getLocale.shortDateFormat;
+  var _propsWithDefaults$fo = propsWithDefaults.format,
+    formatStr = _propsWithDefaults$fo === void 0 ? shortDateFormat : _propsWithDefaults$fo,
+    valueProp = propsWithDefaults.value,
+    defaultValue = propsWithDefaults.defaultValue,
+    placeholder = propsWithDefaults.placeholder,
+    onChange = propsWithDefaults.onChange,
+    onKeyDown = propsWithDefaults.onKeyDown,
+    onBlur = propsWithDefaults.onBlur,
+    onFocus = propsWithDefaults.onFocus,
+    onPaste = propsWithDefaults.onPaste,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(propsWithDefaults, _excluded);
   var inputRef = (0, _react.useRef)();
   var _useSelectedState = (0, _useSelectedState2.default)(),
     selectedState = _useSelectedState.selectedState,
     setSelectedState = _useSelectedState.setSelectedState;
-  var dateLocale = locale.dateLocale;
   var _useControlled = (0, _hooks.useControlled)(valueProp, defaultValue),
     value = _useControlled[0],
     setValue = _useControlled[1],

package/cjs/DateInput/hooks/useDateInputState.js

@@ -5,17 +5,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 exports.useDateInputState = useDateInputState;
-var _react = require("react");
 var _startCase = _interopRequireDefault(require("lodash/startCase"));
+var _react = require("react");
 var _date = require("../../internals/utils/date");
-var _hooks = require("../../internals/hooks");
+var _CustomProvider = require("../../CustomProvider");
 var _DateField = require("../DateField");
 function useDateInputState(_ref) {
   var formatStr = _ref.formatStr,
     locale = _ref.locale,
     date = _ref.date,
     isControlledDate = _ref.isControlledDate;
-  var _useCustom = (0, _hooks.useCustom)(),
+  var _useCustom = (0, _CustomProvider.useCustom)(),
     formatDate = _useCustom.formatDate;
   var _useDateField = (0, _DateField.useDateField)(formatStr, locale.localize, date),
     dateField = _useDateField.dateField,

package/cjs/DatePicker/DatePicker.js

@@ -30,6 +30,7 @@ var _date = require("../internals/utils/date");
 var _Picker = require("../internals/Picker");
 var _OverlayTrigger = require("../internals/Overlay/OverlayTrigger");
 var _utils3 = require("./utils");
+var _CustomProvider = require("../CustomProvider");
 var _templateObject, _templateObject2;
 var _excluded = ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "caretAs", "editable", "defaultValue", "disabled", "readOnly", "plaintext", "format", "id", "isoWeek", "weekStart", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "appearance", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showMeridiem", "showWeekNumbers", "style", "size", "monthDropdownProps", "shouldDisableDate", "shouldDisableHour", "shouldDisableMinute", "shouldDisableSecond", "onChange", "onChangeCalendarDate", "onClean", "onEnter", "onExit", "onNextMonth", "onOk", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown", "onShortcutClick", "renderCell", "renderValue", "disabledDate", "disabledHours", "disabledMinutes", "disabledSeconds"];
 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); }
@@ -41,82 +42,82 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  */
 var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _merge;
-  var _props$as = props.as,
-    Component = _props$as === void 0 ? 'div' : _props$as,
-    className = props.className,
-    _props$classPrefix = props.classPrefix,
-    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,
-    calendarDefaultDate = props.calendarDefaultDate,
-    _props$cleanable = props.cleanable,
-    cleanable = _props$cleanable === void 0 ? true : _props$cleanable,
-    caretAsProp = props.caretAs,
-    _props$editable = props.editable,
-    editable = _props$editable === void 0 ? true : _props$editable,
-    defaultValue = props.defaultValue,
-    disabled = props.disabled,
-    readOnly = props.readOnly,
-    plaintext = props.plaintext,
-    format = props.format,
-    idProp = props.id,
-    isoWeek = props.isoWeek,
-    _props$weekStart = props.weekStart,
-    weekStart = _props$weekStart === void 0 ? 0 : _props$weekStart,
-    _props$limitEndYear = props.limitEndYear,
-    limitEndYear = _props$limitEndYear === void 0 ? 1000 : _props$limitEndYear,
-    limitStartYear = props.limitStartYear,
-    overrideLocale = props.locale,
-    loading = props.loading,
-    label = props.label,
-    menuClassName = props.menuClassName,
-    menuStyle = props.menuStyle,
-    _props$appearance = props.appearance,
-    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
-    _props$placement = props.placement,
-    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,
-    oneTap = props.oneTap,
-    _props$placeholder = props.placeholder,
-    placeholder = _props$placeholder === void 0 ? '' : _props$placeholder,
-    ranges = props.ranges,
-    valueProp = props.value,
-    DEPRECATED_showMeridian = props.showMeridian,
-    _props$showMeridiem = props.showMeridiem,
-    showMeridiem = _props$showMeridiem === void 0 ? DEPRECATED_showMeridian : _props$showMeridiem,
-    showWeekNumbers = props.showWeekNumbers,
-    style = props.style,
-    size = props.size,
-    monthDropdownProps = props.monthDropdownProps,
-    shouldDisableDate = props.shouldDisableDate,
-    shouldDisableHour = props.shouldDisableHour,
-    shouldDisableMinute = props.shouldDisableMinute,
-    shouldDisableSecond = props.shouldDisableSecond,
-    onChange = props.onChange,
-    onChangeCalendarDate = props.onChangeCalendarDate,
-    onClean = props.onClean,
-    onEnter = props.onEnter,
-    onExit = props.onExit,
-    onNextMonth = props.onNextMonth,
-    onOk = props.onOk,
-    onPrevMonth = props.onPrevMonth,
-    onSelect = props.onSelect,
-    onToggleMonthDropdown = props.onToggleMonthDropdown,
-    onToggleTimeDropdown = props.onToggleTimeDropdown,
-    onShortcutClick = props.onShortcutClick,
-    renderCell = props.renderCell,
-    renderValue = props.renderValue,
-    DEPRECATED_disabledDate = props.disabledDate,
-    DEPRECATED_disabledHours = props.disabledHours,
-    DEPRECATED_disabledMinutes = props.disabledMinutes,
-    DEPRECATED_disabledSeconds = props.disabledSeconds,
-    restProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  var _useCustom = (0, _CustomProvider.useCustom)('DatePicker', props),
+    propsWithDefaults = _useCustom.propsWithDefaults;
+  var _propsWithDefaults$as = propsWithDefaults.as,
+    Component = _propsWithDefaults$as === void 0 ? 'div' : _propsWithDefaults$as,
+    className = propsWithDefaults.className,
+    _propsWithDefaults$cl = propsWithDefaults.classPrefix,
+    classPrefix = _propsWithDefaults$cl === void 0 ? 'picker' : _propsWithDefaults$cl,
+    calendarDefaultDate = propsWithDefaults.calendarDefaultDate,
+    _propsWithDefaults$cl2 = propsWithDefaults.cleanable,
+    cleanable = _propsWithDefaults$cl2 === void 0 ? true : _propsWithDefaults$cl2,
+    caretAsProp = propsWithDefaults.caretAs,
+    _propsWithDefaults$ed = propsWithDefaults.editable,
+    editable = _propsWithDefaults$ed === void 0 ? true : _propsWithDefaults$ed,
+    defaultValue = propsWithDefaults.defaultValue,
+    disabled = propsWithDefaults.disabled,
+    readOnly = propsWithDefaults.readOnly,
+    plaintext = propsWithDefaults.plaintext,
+    format = propsWithDefaults.format,
+    idProp = propsWithDefaults.id,
+    isoWeek = propsWithDefaults.isoWeek,
+    _propsWithDefaults$we = propsWithDefaults.weekStart,
+    weekStart = _propsWithDefaults$we === void 0 ? 0 : _propsWithDefaults$we,
+    _propsWithDefaults$li = propsWithDefaults.limitEndYear,
+    limitEndYear = _propsWithDefaults$li === void 0 ? 1000 : _propsWithDefaults$li,
+    limitStartYear = propsWithDefaults.limitStartYear,
+    locale = propsWithDefaults.locale,
+    loading = propsWithDefaults.loading,
+    label = propsWithDefaults.label,
+    menuClassName = propsWithDefaults.menuClassName,
+    menuStyle = propsWithDefaults.menuStyle,
+    _propsWithDefaults$ap = propsWithDefaults.appearance,
+    appearance = _propsWithDefaults$ap === void 0 ? 'default' : _propsWithDefaults$ap,
+    _propsWithDefaults$pl = propsWithDefaults.placement,
+    placement = _propsWithDefaults$pl === void 0 ? 'bottomStart' : _propsWithDefaults$pl,
+    oneTap = propsWithDefaults.oneTap,
+    _propsWithDefaults$pl2 = propsWithDefaults.placeholder,
+    placeholder = _propsWithDefaults$pl2 === void 0 ? '' : _propsWithDefaults$pl2,
+    ranges = propsWithDefaults.ranges,
+    valueProp = propsWithDefaults.value,
+    DEPRECATED_showMeridian = propsWithDefaults.showMeridian,
+    _propsWithDefaults$sh = propsWithDefaults.showMeridiem,
+    showMeridiem = _propsWithDefaults$sh === void 0 ? DEPRECATED_showMeridian : _propsWithDefaults$sh,
+    showWeekNumbers = propsWithDefaults.showWeekNumbers,
+    style = propsWithDefaults.style,
+    size = propsWithDefaults.size,
+    monthDropdownProps = propsWithDefaults.monthDropdownProps,
+    shouldDisableDate = propsWithDefaults.shouldDisableDate,
+    shouldDisableHour = propsWithDefaults.shouldDisableHour,
+    shouldDisableMinute = propsWithDefaults.shouldDisableMinute,
+    shouldDisableSecond = propsWithDefaults.shouldDisableSecond,
+    onChange = propsWithDefaults.onChange,
+    onChangeCalendarDate = propsWithDefaults.onChangeCalendarDate,
+    onClean = propsWithDefaults.onClean,
+    onEnter = propsWithDefaults.onEnter,
+    onExit = propsWithDefaults.onExit,
+    onNextMonth = propsWithDefaults.onNextMonth,
+    onOk = propsWithDefaults.onOk,
+    onPrevMonth = propsWithDefaults.onPrevMonth,
+    onSelect = propsWithDefaults.onSelect,
+    onToggleMonthDropdown = propsWithDefaults.onToggleMonthDropdown,
+    onToggleTimeDropdown = propsWithDefaults.onToggleTimeDropdown,
+    onShortcutClick = propsWithDefaults.onShortcutClick,
+    renderCell = propsWithDefaults.renderCell,
+    renderValue = propsWithDefaults.renderValue,
+    DEPRECATED_disabledDate = propsWithDefaults.disabledDate,
+    DEPRECATED_disabledHours = propsWithDefaults.disabledHours,
+    DEPRECATED_disabledMinutes = propsWithDefaults.disabledMinutes,
+    DEPRECATED_disabledSeconds = propsWithDefaults.disabledSeconds,
+    restProps = (0, _objectWithoutPropertiesLoose2.default)(propsWithDefaults, _excluded);
   var id = (0, _hooks2.useUniqueId)('rs-', idProp);
   var _usePickerRef = (0, _Picker.usePickerRef)(ref),
     trigger = _usePickerRef.trigger,
     root = _usePickerRef.root,
     target = _usePickerRef.target,
     overlay = _usePickerRef.overlay;
-  var _useCustom = (0, _hooks2.useCustom)('DatePicker', overrideLocale),
-    locale = _useCustom.locale;
-  var formatStr = format || locale.shortDateFormat || 'yyyy-MM-dd';
+  var formatStr = format || (locale === null || locale === void 0 ? void 0 : locale.shortDateFormat) || 'yyyy-MM-dd';
   var _useClassNames = (0, _hooks2.useClassNames)(classPrefix),
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix;

package/cjs/DatePicker/PredefinedRanges.d.ts

@@ -5,7 +5,7 @@ import { CalendarLocale } from '../locales';
 export interface PredefinedRangesProps<T = any, Shortcut = T> extends StackProps {
     ranges?: RangeType<Shortcut>[];
     calendarDate: T;
-    locale: CalendarLocale;
+    locale?: CalendarLocale;
     disableShortcut?: (value: T) => boolean;
     onShortcutClick?: (range: InnerRange<Shortcut>, closeOverlay: boolean, event: React.MouseEvent) => void;
 }

package/cjs/DatePicker/hooks/useFocus.js

@@ -8,6 +8,7 @@ var _delay = _interopRequireDefault(require("lodash/delay"));
 var _addMonths = _interopRequireDefault(require("date-fns/addMonths"));
 var _addDays = _interopRequireDefault(require("date-fns/addDays"));
 var _hooks = require("../../internals/hooks");
+var _CustomProvider = require("../../CustomProvider");
 var _utils = require("../../Calendar/utils");
 var _utils2 = require("../../internals/Picker/utils");
 function useFocus(props) {
@@ -15,9 +16,12 @@ function useFocus(props) {
     showMonth = props.showMonth,
     id = props.id,
     localeProp = props.locale;
-  var _useCustom = (0, _hooks.useCustom)('DatePicker', localeProp),
-    locale = _useCustom.locale,
+  var _useCustom = (0, _CustomProvider.useCustom)(),
+    getLocale = _useCustom.getLocale,
     formatDate = _useCustom.formatDate;
+  var _getLocale = getLocale('DateTimeFormats', localeProp),
+    formattedMonthPattern = _getLocale.formattedMonthPattern,
+    formattedDayPattern = _getLocale.formattedDayPattern;
 
   /**
    * Get the corresponding container based on date selection and month selection
@@ -30,7 +34,7 @@ function useFocus(props) {
    * Check whether the date is focusable
    */
   var checkFocusable = function checkFocusable(date) {
-    var formatStr = showMonth ? locale.formattedMonthPattern : locale.formattedDayPattern;
+    var formatStr = showMonth ? formattedMonthPattern : formattedDayPattern;
     var ariaLabel = (0, _utils.getAriaLabel)(date, formatStr, formatDate);
     var container = getOverlayContainer();
     var dateElement = container === null || container === void 0 ? void 0 : container.querySelector("[aria-label=\"" + ariaLabel + "\"]");