rsuite 5.73.1 → 5.74.0-beta.0

package/cjs/CustomProvider/CustomProvider.d.ts

@@ -1,60 +1,13 @@
 import React from 'react';
 import { Locale } from '../locales';
 import { ToastContainerInstance } from '../toaster/ToastContainer';
-import type { Locale as DateFnsLocale } from 'date-fns';
-import type { DateFns } from '../internals/types';
-export interface FormatDateOptions {
-    /**
-     * The locale object that contains the language and formatting rules for the date.
-     */
-    locale?: DateFnsLocale;
-    /**
-     * Defines which day of the week should be considered the start of the week.
-     *
-     * The value should be an integer from 0 to 6, where:
-     * - `0` represents Sunday,
-     * - `1` represents Monday,
-     * - `2` represents Tuesday,
-     * - `3` represents Wednesday,
-     * - `4` represents Thursday,
-     * - `5` represents Friday,
-     * - `6` represents Saturday.
-     *
-     * This option is important for functions that operate on weeks, such as calculating
-     * the start or end of a week, determining which week a date falls in, or generating
-     * calendar views. The default value varies depending on the locale, with Monday (`1`)
-     * being the default in most regions following ISO 8601, while Sunday (`0`) is often
-     * the default in regions like the United States.
-     */
-    weekStartsOn?: DateFns.Day;
-    /**
-     * `firstWeekContainsDate` is used to determine which week is considered the first week of the year.
-     *
-     * This option specifies the minimum day of January that must be included in the first week.
-     *
-     * The value can be set to:
-     * - `1`: The first week of the year must include January 1st.
-     * - `4`: The first week of the year must include January 4th, which is the default according to ISO 8601.
-     *
-     * The choice between `1` and `4` typically depends on the regional or business conventions for week numbering.
-     *
-     * Please note that this option only accepts `1` (Sunday) or `4` (Thursday), aligning with common international standards.
-     *
-     * For more detailed information, please refer to https://en.wikipedia.org/wiki/Week#Week_numbering.
-     */
-    firstWeekContainsDate?: DateFns.FirstWeekContainsDate;
-    /**
-     * If true, allows usage of the week-numbering year tokens `YY` and `YYYY`.
-     * See: https://date-fns.org/docs/Unicode-Tokens
-     **/
-    useAdditionalWeekYearTokens?: boolean;
+import type { FormatDateOptions } from '../internals/utils/date/types';
+import type { ReactSuiteComponents } from './types';
+export interface CustomValue<T = Locale> {
     /**
-     * If true, allows usage of the day of year tokens `D` and `DD`.
-     * See: https://date-fns.org/docs/Unicode-Tokens
+     * The prefix of the component CSS class
      */
-    useAdditionalDayOfYearTokens?: boolean;
-}
-export interface CustomValue<T = Locale> {
+    classPrefix?: string;
     /**
      * The locale object that contains the language and formatting rules for the date.
      */
@@ -106,10 +59,6 @@ export interface CustomProviderProps<T = Locale> extends Partial<CustomValue<T>>
      * Supported themes
      */
     theme?: 'light' | 'dark' | 'high-contrast';
-    /**
-     * The prefix of the component CSS class
-     */
-    classPrefix?: string;
     /**
      * The prefix of the icon CSS class
      */
@@ -134,8 +83,25 @@ export interface CustomProviderProps<T = Locale> extends Partial<CustomValue<T>>
      * @default false
      */
     disableInlineStyles?: boolean;
+    /**
+     * components allows setting default props for specific components globally.
+     * It accepts an object where each key represents a component name (e.g., 'Button', 'Input'),
+     * and the corresponding value is an object containing the `defaultProps` object.
+     * The `defaultProps` object defines the default props for that component.
+     * These props will be automatically applied to the component unless overridden by specific props
+     * passed in an individual component instance.
+     *
+     * @example
+     * ```js
+     * components={{
+     *   Button: { defaultProps: { appearance: 'primary', size: 'lg' } },
+     *   Input: { defaultProps: { placeholder: 'Enter text', size: 'lg' } }
+     * }}
+     * ```
+     */
+    components?: Partial<ReactSuiteComponents>;
 }
-declare const CustomContext: React.Context<CustomProviderProps<{
+export declare const CustomContext: React.Context<CustomProviderProps<{
     code?: string | undefined;
     common?: {
         loading: string;
@@ -158,6 +124,29 @@ declare const CustomContext: React.Context<CustomProviderProps<{
         total: string;
         skip: string;
     } | undefined;
+    DateTimeFormats?: {
+        sunday: string;
+        monday: string;
+        tuesday: string;
+        wednesday: string;
+        thursday: string;
+        friday: string;
+        saturday: string;
+        ok: string;
+        today: string;
+        yesterday: string;
+        now: string;
+        hours: string;
+        minutes: string;
+        seconds: string;
+        formattedMonthPattern: string;
+        formattedDayPattern: string;
+        shortDateFormat: string;
+        shortTimeFormat: string; /**
+         * The prefix of the component CSS class
+         */
+        dateLocale: any;
+    } | undefined;
     Calendar?: {
         sunday: string;
         monday: string;
@@ -176,7 +165,9 @@ declare const CustomContext: React.Context<CustomProviderProps<{
         formattedMonthPattern: string;
         formattedDayPattern: string;
         shortDateFormat: string;
-        shortTimeFormat: string;
+        shortTimeFormat: string; /**
+         * The prefix of the component CSS class
+         */
         dateLocale: any;
     } | undefined;
     DatePicker?: {
@@ -197,7 +188,9 @@ declare const CustomContext: React.Context<CustomProviderProps<{
         formattedMonthPattern: string;
         formattedDayPattern: string;
         shortDateFormat: string;
-        shortTimeFormat: string;
+        shortTimeFormat: string; /**
+         * The prefix of the component CSS class
+         */
         dateLocale: any;
     } | undefined;
     DateRangePicker?: {
@@ -219,10 +212,12 @@ declare const CustomContext: React.Context<CustomProviderProps<{
         formattedMonthPattern: string;
         formattedDayPattern: string;
         shortDateFormat: string;
-        shortTimeFormat: string;
+        shortTimeFormat: string; /**
+         * The prefix of the component CSS class
+         */
         dateLocale: any;
     } | undefined;
-    Picker?: {
+    Combobox?: {
         noResultsText: string;
         placeholder: string;
         searchPlaceholder: string;
@@ -231,6 +226,18 @@ declare const CustomContext: React.Context<CustomProviderProps<{
     InputPicker?: {
         newItem: string;
         createOption: string;
+        noResultsText: string;
+        placeholder: string;
+        searchPlaceholder: string;
+        checkAll: string;
+    } | undefined;
+    TagPicker?: {
+        newItem: string;
+        createOption: string;
+        noResultsText: string;
+        placeholder: string;
+        searchPlaceholder: string;
+        checkAll: string;
     } | undefined;
     Uploader?: {
         inited: string;
@@ -257,6 +264,4 @@ declare const CustomContext: React.Context<CustomProviderProps<{
  *
  * @see https://rsuitejs.com/components/custom-provider
  */
-declare const CustomProvider: (props: Omit<CustomProviderProps, 'toasters'>) => React.JSX.Element;
-export { CustomContext };
-export default CustomProvider;
+export default function CustomProvider(props: Omit<CustomProviderProps, 'toasters'>): React.JSX.Element;

package/cjs/CustomProvider/CustomProvider.js

@@ -3,7 +3,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.default = exports.CustomContext = void 0;
+exports.CustomContext = void 0;
+exports.default = CustomProvider;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
@@ -12,7 +13,7 @@ var _hooks = require("../internals/hooks");
 var _prefix = require("../internals/utils/prefix");
 var _DOMHelper = require("../DOMHelper");
 var _ToastContainer = _interopRequireWildcard(require("../toaster/ToastContainer"));
-var _excluded = ["children", "classPrefix", "iconClassPrefix", "theme", "toastContainer", "disableRipple", "csp", "disableInlineStyles"];
+var _excluded = ["children", "classPrefix", "components", "iconClassPrefix", "theme", "toastContainer", "disableRipple", "csp", "disableInlineStyles"];
 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 && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var CustomContext = exports.CustomContext = /*#__PURE__*/_react.default.createContext({});
@@ -23,10 +24,11 @@ var themes = ['light', 'dark', 'high-contrast'];
  *
  * @see https://rsuitejs.com/components/custom-provider
  */
-var CustomProvider = function CustomProvider(props) {
+function CustomProvider(props) {
   var children = props.children,
     _props$classPrefix = props.classPrefix,
     classPrefix = _props$classPrefix === void 0 ? (0, _prefix.getClassNamePrefix)() : _props$classPrefix,
+    components = props.components,
     _props$iconClassPrefi = props.iconClassPrefix,
     iconClassPrefix = _props$iconClassPrefi === void 0 ? classPrefix : _props$iconClassPrefi,
     theme = props.theme,
@@ -46,9 +48,10 @@ var CustomProvider = function CustomProvider(props) {
       classPrefix: classPrefix,
       theme: theme,
       toasters: toasters,
-      disableRipple: disableRipple
+      disableRipple: disableRipple,
+      components: components
     }, rest);
-  }, [classPrefix, theme, disableRipple, rest]);
+  }, [classPrefix, theme, disableRipple, components, rest]);
   var iconContext = (0, _react.useMemo)(function () {
     return {
       classPrefix: iconClassPrefix,
@@ -83,5 +86,4 @@ var CustomProvider = function CustomProvider(props) {
       }
     });
   })))));
-};
-var _default = exports.default = CustomProvider;
+}

package/cjs/CustomProvider/FormattedDate.js

@@ -5,11 +5,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _hooks = require("../internals/hooks");
+var _useCustom2 = require("./useCustom");
 function FormattedDate(_ref) {
   var date = _ref.date,
     formatStr = _ref.formatStr;
-  var _useCustom = (0, _hooks.useCustom)('Calendar'),
+  var _useCustom = (0, _useCustom2.useCustom)('Calendar'),
     formatDate = _useCustom.formatDate;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, formatDate(date, formatStr));
 }

package/cjs/CustomProvider/index.d.ts

@@ -1,5 +1,6 @@
 import CustomProvider, { CustomContext } from './CustomProvider';
 import FormattedDate from './FormattedDate';
 export { CustomContext, FormattedDate };
+export { useCustom } from './useCustom';
 export type { CustomProviderProps } from './CustomProvider';
 export default CustomProvider;

package/cjs/CustomProvider/index.js

@@ -3,11 +3,13 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.default = void 0;
+exports.useCustom = exports.default = void 0;
 var _CustomProvider = _interopRequireWildcard(require("./CustomProvider"));
 exports.CustomContext = _CustomProvider.CustomContext;
 var _FormattedDate = _interopRequireDefault(require("./FormattedDate"));
 exports.FormattedDate = _FormattedDate.default;
+var _useCustom = require("./useCustom");
+exports.useCustom = _useCustom.useCustom;
 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 && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var _default = exports.default = _CustomProvider.default;

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;