rsuite 5.75.0 → 6.0.0-canary-20241227

package/esm/CustomProvider/CustomProvider.d.ts

@@ -21,8 +21,8 @@ export interface CustomValue<T = Locale> {
      *
      * Example:
      *
-     *  import format from 'date-fns/format';
-     *  import eo from 'date-fns/locale/eo'
+     *  import { format } from 'date-fns/format';
+     *  import { eo } from 'date-fns/locale/eo'
      *
      *  function formatDate(date, formatStr) {
      *    return format(date, formatStr, { locale: eo });
@@ -35,8 +35,8 @@ export interface CustomValue<T = Locale> {
      *
      * Example:
      *
-     *  import parse from 'date-fns/parse';
-     *  import eo from 'date-fns/locale/eo'
+     *  import { parse } from 'date-fns/parse';
+     *  import { eo } from 'date-fns/locale/eo'
      *
      *  function parseDate(date, formatStr) {
      *    return parse(date, formatStr, new Date(), { locale: eo });
@@ -142,9 +142,7 @@ export declare const CustomContext: React.Context<CustomProviderProps<{
         formattedMonthPattern: string;
         formattedDayPattern: string;
         shortDateFormat: string;
-        shortTimeFormat: string; /**
-         * The prefix of the component CSS class
-         */
+        shortTimeFormat: string;
         dateLocale: any;
     } | undefined;
     Calendar?: {
@@ -165,9 +163,7 @@ export declare const CustomContext: React.Context<CustomProviderProps<{
         formattedMonthPattern: string;
         formattedDayPattern: string;
         shortDateFormat: string;
-        shortTimeFormat: string; /**
-         * The prefix of the component CSS class
-         */
+        shortTimeFormat: string;
         dateLocale: any;
     } | undefined;
     DatePicker?: {
@@ -188,9 +184,7 @@ export declare const CustomContext: React.Context<CustomProviderProps<{
         formattedMonthPattern: string;
         formattedDayPattern: string;
         shortDateFormat: string;
-        shortTimeFormat: string; /**
-         * The prefix of the component CSS class
-         */
+        shortTimeFormat: string;
         dateLocale: any;
     } | undefined;
     DateRangePicker?: {
@@ -212,9 +206,7 @@ export declare const CustomContext: React.Context<CustomProviderProps<{
         formattedMonthPattern: string;
         formattedDayPattern: string;
         shortDateFormat: string;
-        shortTimeFormat: string; /**
-         * The prefix of the component CSS class
-         */
+        shortTimeFormat: string;
         dateLocale: any;
     } | undefined;
     Combobox?: {

package/esm/CustomProvider/CustomProvider.js

@@ -1,15 +1,12 @@
 'use client';
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["children", "classPrefix", "components", "iconClassPrefix", "theme", "toastContainer", "disableRipple", "csp", "disableInlineStyles"];
 import React, { useRef, useMemo } from 'react';
 import IconProvider from '@rsuite/icons/IconProvider';
 import { usePortal, useIsomorphicLayoutEffect } from "../internals/hooks/index.js";
 import { getClassNamePrefix, prefix } from "../internals/utils/prefix.js";
 import { addClass, removeClass, canUseDOM } from "../DOMHelper/index.js";
 import ToastContainer, { toastPlacements } from "../toaster/ToastContainer.js";
-export var CustomContext = /*#__PURE__*/React.createContext({});
-var themes = ['light', 'dark', 'high-contrast'];
+export const CustomContext = /*#__PURE__*/React.createContext({});
+const themes = ['light', 'dark', 'high-contrast'];
 
 /**
  * CustomProvider is used to provide global configuration, such as language, theme, etc.
@@ -17,48 +14,46 @@ var themes = ['light', 'dark', 'high-contrast'];
  * @see https://rsuitejs.com/components/custom-provider
  */
 export default function CustomProvider(props) {
-  var children = props.children,
-    _props$classPrefix = props.classPrefix,
-    classPrefix = _props$classPrefix === void 0 ? getClassNamePrefix() : _props$classPrefix,
-    components = props.components,
-    _props$iconClassPrefi = props.iconClassPrefix,
-    iconClassPrefix = _props$iconClassPrefi === void 0 ? classPrefix : _props$iconClassPrefi,
-    theme = props.theme,
-    container = props.toastContainer,
-    disableRipple = props.disableRipple,
-    csp = props.csp,
-    disableInlineStyles = props.disableInlineStyles,
-    rest = _objectWithoutPropertiesLoose(props, _excluded);
-  var toasters = useRef(new Map());
-  var _usePortal = usePortal({
-      container: container,
-      waitMount: true
-    }),
-    Portal = _usePortal.Portal;
-  var value = useMemo(function () {
-    return _extends({
-      classPrefix: classPrefix,
-      theme: theme,
-      toasters: toasters,
-      disableRipple: disableRipple,
-      components: components
-    }, rest);
-  }, [classPrefix, theme, disableRipple, components, rest]);
-  var iconContext = useMemo(function () {
-    return {
-      classPrefix: iconClassPrefix,
-      csp: csp,
-      disableInlineStyles: disableInlineStyles
-    };
-  }, [iconClassPrefix, csp, disableInlineStyles]);
-  useIsomorphicLayoutEffect(function () {
+  const {
+    children,
+    classPrefix = getClassNamePrefix(),
+    components,
+    iconClassPrefix = classPrefix,
+    theme,
+    toastContainer: container,
+    disableRipple,
+    csp,
+    disableInlineStyles,
+    ...rest
+  } = props;
+  const toasters = useRef(new Map());
+  const {
+    Portal
+  } = usePortal({
+    container,
+    waitMount: true
+  });
+  const value = useMemo(() => ({
+    classPrefix,
+    theme,
+    toasters,
+    disableRipple,
+    components,
+    ...rest
+  }), [classPrefix, theme, disableRipple, components, rest]);
+  const iconContext = useMemo(() => ({
+    classPrefix: iconClassPrefix,
+    csp,
+    disableInlineStyles
+  }), [iconClassPrefix, csp, disableInlineStyles]);
+  useIsomorphicLayoutEffect(() => {
     if (canUseDOM && theme) {
-      addClass(document.body, prefix(classPrefix, "theme-" + theme));
+      addClass(document.body, prefix(classPrefix, `theme-${theme}`));
 
       // Remove the className that will cause style conflicts
-      themes.forEach(function (t) {
+      themes.forEach(t => {
         if (t !== theme) {
-          removeClass(document.body, prefix(classPrefix, "theme-" + t));
+          removeClass(document.body, prefix(classPrefix, `theme-${t}`));
         }
       });
     }
@@ -68,14 +63,12 @@ export default function CustomProvider(props) {
   }, /*#__PURE__*/React.createElement(IconProvider, {
     value: iconContext
   }, children, /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "toast-provider"
-  }, toastPlacements.map(function (placement) {
-    return /*#__PURE__*/React.createElement(ToastContainer, {
-      key: placement,
-      placement: placement,
-      ref: function ref(_ref) {
-        toasters.current.set(placement, _ref);
-      }
-    });
-  })))));
+    className: `${classPrefix}toast-provider`
+  }, toastPlacements.map(placement => /*#__PURE__*/React.createElement(ToastContainer, {
+    key: placement,
+    placement: placement,
+    ref: ref => {
+      toasters.current.set(placement, ref);
+    }
+  }))))));
 }

package/esm/CustomProvider/FormattedDate.js

@@ -2,10 +2,13 @@
 import React from 'react';
 import { useCustom } from "./useCustom.js";
 export function FormattedDate(_ref) {
-  var date = _ref.date,
-    formatStr = _ref.formatStr;
-  var _useCustom = useCustom('Calendar'),
-    formatDate = _useCustom.formatDate;
+  let {
+    date,
+    formatStr
+  } = _ref;
+  const {
+    formatDate
+  } = useCustom('Calendar');
   return /*#__PURE__*/React.createElement(React.Fragment, null, formatDate(date, formatStr));
 }
 export default FormattedDate;

package/esm/CustomProvider/FormattedNumber.js

@@ -2,12 +2,13 @@
 import React, { useMemo } from 'react';
 import { useCustom } from "./useCustom.js";
 export function FormattedNumber(_ref) {
-  var value = _ref.value,
-    formatOptions = _ref.formatOptions;
-  var _useCustom = useCustom(),
-    code = _useCustom.code;
-  var formatter = useMemo(function () {
-    return new Intl.NumberFormat(code, formatOptions);
-  }, [code, formatOptions]);
+  let {
+    value,
+    formatOptions
+  } = _ref;
+  const {
+    code
+  } = useCustom();
+  const formatter = useMemo(() => new Intl.NumberFormat(code, formatOptions), [code, formatOptions]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, formatter.format(value));
 }

package/esm/CustomProvider/types.d.ts

@@ -53,6 +53,7 @@ import type { InputProps } from '../Input';
 import type { InputGroupProps } from '../InputGroup';
 import type { InputNumberProps } from '../InputNumber';
 import type { InputPickerProps } from '../InputPicker';
+import type { ImageProps } from '../Image';
 import type { ListProps } from '../List';
 import type { LoaderProps } from '../Loader';
 import type { MaskedInputProps } from '../MaskedInput';
@@ -164,6 +165,7 @@ export interface ReactSuiteComponents {
     InputGroup: ComponentProps<InputGroupProps>;
     InputNumber: ComponentProps<InputNumberProps>;
     InputPicker: ComponentProps<InputPickerProps>;
+    Image: ComponentProps<ImageProps>;
     List: ComponentProps<ListProps>;
     Loader: ComponentProps<LoaderProps>;
     MaskedInput: ComponentProps<MaskedInputProps>;

package/esm/CustomProvider/useCustom.js

@@ -1,7 +1,4 @@
 'use client';
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["locale"];
 import { useContext, useCallback, useMemo } from 'react';
 import assign from 'lodash/assign';
 import enGB from "../locales/en_GB.js";
@@ -11,7 +8,7 @@ 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'];
+  const Picker = ['Cascader', 'CheckTreePicker', 'MultiCascader', 'SelectPicker', 'TreePicker', 'CheckPicker', 'CheckTreePicker'];
   if (Picker.includes(componentName)) {
     return 'Combobox';
   }
@@ -25,62 +22,61 @@ function toLocaleKey(componentName) {
  */
 export function useCustom(componentName, componentProps) {
   var _globalLocale$DateTim;
-  var _useContext = useContext(CustomContext),
-    _useContext$component = _useContext.components,
-    components = _useContext$component === void 0 ? {} : _useContext$component,
-    _useContext$locale = _useContext.locale,
-    globalLocale = _useContext$locale === void 0 ? enGB : _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 = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var dateLocale = globalLocale === null || globalLocale === void 0 || (_globalLocale$DateTim = globalLocale.DateTimeFormats) === null || _globalLocale$DateTim === void 0 ? void 0 : _globalLocale$DateTim.dateLocale;
-  var code = globalLocale === null || globalLocale === void 0 ? void 0 : globalLocale.code;
-  var getLocale = useCallback(function (key, overrideLocale) {
+  const {
+    components = {},
+    locale: globalLocale = enGB,
+    rtl = getDefaultRTL(),
+    formatDate,
+    parseDate,
+    classPrefix,
+    toasters,
+    disableRipple
+  } = useContext(CustomContext);
+  const {
+    locale: componentLocale,
+    ...restProps
+  } = componentProps || {};
+  const dateLocale = globalLocale === null || globalLocale === void 0 || (_globalLocale$DateTim = globalLocale.DateTimeFormats) === null || _globalLocale$DateTim === void 0 ? void 0 : _globalLocale$DateTim.dateLocale;
+  const code = globalLocale === null || globalLocale === void 0 ? void 0 : globalLocale.code;
+  const getLocale = useCallback((key, overrideLocale) => {
     // Initialize with common locale
-    var publicLocale = (globalLocale === null || globalLocale === void 0 ? void 0 : globalLocale.common) || {};
+    const 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.apply(void 0, [{}].concat(key.map(function (k) {
-      return globalLocale === null || globalLocale === void 0 ? void 0 : globalLocale[k];
-    }))) : {};
+    const specificLocale = typeof key === 'string' ? globalLocale === null || globalLocale === void 0 ? void 0 : globalLocale[key] : Array.isArray(key) ? assign({}, ...key.map(k => globalLocale === null || globalLocale === void 0 ? void 0 : globalLocale[k])) : {};
 
     // Merge all parts: public locale, specific locale, custom component locale
     return assign({}, publicLocale, specificLocale, componentLocale, overrideLocale);
   }, [globalLocale, componentLocale]);
-  var propsWithDefaults = useMemo(function () {
+  const propsWithDefaults = useMemo(() => {
     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 = assign({}, globalDefaultProps, restProps);
-    var localeKey = toLocaleKey(componentName);
+    const globalDefaultProps = ((_components$component = components[componentName]) === null || _components$component === void 0 ? void 0 : _components$component.defaultProps) || {};
+    const mergedProps = assign({}, globalDefaultProps, restProps);
+    const localeKey = toLocaleKey(componentName);
 
     // If the default locale has the component name, then merge the locale.
     if (Object.keys(enGB).includes(localeKey)) {
-      return _extends({}, mergedProps, {
+      return {
+        ...mergedProps,
         locale: getLocale(localeKey)
-      });
+      };
     }
     return mergedProps;
   }, [componentName, components, getLocale, restProps]);
-  var _formatDate = useCallback(function (date, formatStr, options) {
+  const _formatDate = useCallback((date, formatStr, options) => {
     try {
       if (formatDate) {
         return formatDate(date, formatStr, options);
       }
-      return format(isValid(date) ? date : new Date(), formatStr, _extends({
-        locale: dateLocale
-      }, options));
+      return format(isValid(date) ? date : new Date(), formatStr, {
+        locale: dateLocale,
+        ...options
+      });
     } catch (error) {
       if (process.env.NODE_ENV === 'development') {
         console.error('Error: Invalid date format', error);
@@ -88,22 +84,23 @@ export function useCustom(componentName, componentProps) {
       return 'Error: Invalid date format';
     }
   }, [dateLocale, formatDate]);
-  var _parseDate = useCallback(function (dateString, formatString, referenceDate, options) {
+  const _parseDate = useCallback((dateString, formatString, referenceDate, options) => {
     if (parseDate) {
       return parseDate(dateString, formatString, referenceDate, options);
     }
-    return parse(dateString, formatString, referenceDate || new Date(), _extends({
-      locale: dateLocale
-    }, options));
+    return parse(dateString, formatString, referenceDate || new Date(), {
+      locale: dateLocale,
+      ...options
+    });
   }, [parseDate, dateLocale]);
   return {
-    code: code,
-    rtl: rtl,
-    toasters: toasters,
-    disableRipple: disableRipple,
-    classPrefix: classPrefix,
-    propsWithDefaults: propsWithDefaults,
-    getLocale: getLocale,
+    code,
+    rtl,
+    toasters,
+    disableRipple,
+    classPrefix,
+    propsWithDefaults,
+    getLocale,
     formatDate: _formatDate,
     parseDate: _parseDate
   };

package/esm/DOMHelper/index.js

@@ -1,5 +1,4 @@
 'use client';
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as helpers from 'dom-lib';
 import isElement from "./isElement.js";
 export * from 'dom-lib';
@@ -8,7 +7,8 @@ export * from 'dom-lib';
  * a wrapper of dom-lib with some custom methods.
  * @see https://rsuitejs.com/components/dom-helper/
  */
-var DOMHelper = _extends({}, helpers, {
-  isElement: isElement
-});
+const DOMHelper = {
+  ...helpers,
+  isElement
+};
 export default DOMHelper;

package/esm/DOMHelper/isElement.js

@@ -1,5 +1,5 @@
 'use client';
-var isElement = function isElement(value) {
+const isElement = value => {
   return (value === null || value === void 0 ? void 0 : value.nodeType) === 1 && typeof (value === null || value === void 0 ? void 0 : value.nodeName) === 'string';
 };
 export default isElement;