rsuite 5.76.2 → 6.0.0-canary-20250103

package/esm/toaster/toaster.js

@@ -1,92 +1,66 @@
 'use client';
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-var _excluded = ["placement", "container"];
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import ToastContainer, { defaultToasterContainer } from "./ToastContainer.js";
-import { toasterKeyOfContainerElement } from "./render.js";
-var containers = new Map();
+import { RSUITE_TOASTER_ID } from "../internals/symbols.js";
+const containers = new Map();
 
 /**
  * Create a container instance.
  * @param placement
  * @param props
  */
-function createContainer(_x, _x2) {
-  return _createContainer.apply(this, arguments);
+async function createContainer(placement, props) {
+  const [container, containerId] = await ToastContainer.getInstance(props);
+  containers.set(`${containerId}_${placement}`, container);
+  return container;
 }
+
 /**
  * Get the container by ID. Use default ID when ID is not available.
  * @param containerId
  * @param placement
  */
-function _createContainer() {
-  _createContainer = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(placement, props) {
-    var _yield$ToastContainer, container, containerId;
-    return _regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          _context.next = 2;
-          return ToastContainer.getInstance(props);
-        case 2:
-          _yield$ToastContainer = _context.sent;
-          container = _yield$ToastContainer[0];
-          containerId = _yield$ToastContainer[1];
-          containers.set(containerId + "_" + placement, container);
-          return _context.abrupt("return", container);
-        case 7:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee);
-  }));
-  return _createContainer.apply(this, arguments);
-}
 function getContainer(containerId, placement) {
-  return containers.get(containerId + "_" + placement);
+  return containers.get(`${containerId}_${placement}`);
 }
-var _toaster = function toaster(message) {
-  return _toaster.push(message);
-};
-_toaster.push = function (message, options) {
+const toaster = message => toaster.push(message);
+toaster.push = function (message, options) {
   if (options === void 0) {
     options = {};
   }
-  var _options = options,
-    _options$placement = _options.placement,
-    placement = _options$placement === void 0 ? 'topCenter' : _options$placement,
-    _options$container = _options.container,
-    container = _options$container === void 0 ? defaultToasterContainer : _options$container,
-    restOptions = _objectWithoutPropertiesLoose(_options, _excluded);
-  var containerElement = typeof container === 'function' ? container() : container;
-  var containerElementId = containerElement ? containerElement[toasterKeyOfContainerElement] : null;
+  const {
+    placement = 'topCenter',
+    container = defaultToasterContainer,
+    ...restOptions
+  } = options;
+  const containerElement = typeof container === 'function' ? container() : container;
+  const containerElementId = containerElement ? containerElement[RSUITE_TOASTER_ID] : null;
   if (containerElementId) {
-    var existedContainer = getContainer(containerElementId, placement);
+    const existedContainer = getContainer(containerElementId, placement);
     if (existedContainer) {
       var _existedContainer$cur;
       return (_existedContainer$cur = existedContainer.current) === null || _existedContainer$cur === void 0 ? void 0 : _existedContainer$cur.push(message, restOptions);
     }
   }
-  var newOptions = _extends({}, options, {
+  const newOptions = {
+    ...options,
     container: containerElement,
-    placement: placement
-  });
-  return createContainer(placement, newOptions).then(function (ref) {
+    placement
+  };
+  return createContainer(placement, newOptions).then(ref => {
     var _ref$current;
     return (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.push(message, restOptions);
   });
 };
-_toaster.remove = function (key) {
-  containers.forEach(function (c) {
+toaster.remove = key => {
+  containers.forEach(c => {
     var _c$current;
     return (_c$current = c.current) === null || _c$current === void 0 ? void 0 : _c$current.remove(key);
   });
 };
-_toaster.clear = function () {
-  containers.forEach(function (c) {
+toaster.clear = () => {
+  containers.forEach(c => {
     var _c$current2;
     return (_c$current2 = c.current) === null || _c$current2 === void 0 ? void 0 : _c$current2.clear();
   });
 };
-export default _toaster;
+export default toaster;

package/esm/useBreakpointValue/useBreakpointValue.js

@@ -14,12 +14,13 @@ import useMediaQuery from "../useMediaQuery/index.js";
  *
  */
 export function useBreakpointValue(breakpoints, options) {
-  var _ref = options || {},
-    defaultValue = _ref.defaultValue;
-  var keys = Object.keys(breakpoints);
-  var values = Object.values(breakpoints);
-  var matches = useMediaQuery(keys);
-  var index = matches.indexOf(true);
+  const {
+    defaultValue
+  } = options || {};
+  const keys = Object.keys(breakpoints);
+  const values = Object.values(breakpoints);
+  const matches = useMediaQuery(keys);
+  const index = matches.indexOf(true);
   return index !== -1 ? values[index] : defaultValue;
 }
 export default useBreakpointValue;

package/esm/useMediaQuery/useMediaQuery.d.ts

@@ -10,11 +10,6 @@ export declare const mediaQuerySizeMap: {
  * The type of the query parameter.
  */
 export type Query = string | keyof typeof mediaQuerySizeMap;
-/**
- * React hook that tracks state of a CSS media query.
- * @see https://rsuitejs.com/components/use-media-query
- */
-export declare function useMediaQueryOld(query: Query | Query[]): boolean[];
 /**
  * React hook that tracks state of a CSS media query
  * @version 5.48.0
@@ -22,5 +17,4 @@ export declare function useMediaQueryOld(query: Query | Query[]): boolean[];
  * @see https://rsuitejs.com/components/use-media-query
  */
 export declare function useMediaQuery(query: Query | Query[]): boolean[];
-declare const _default: typeof useMediaQuery;
-export default _default;
+export default useMediaQuery;

package/esm/useMediaQuery/useMediaQuery.js

@@ -1,9 +1,7 @@
 'use client';
-import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { useEffect, useState, useCallback, useRef, useMemo } from 'react';
+import { useSyncExternalStore, useCallback, useRef, useMemo } from 'react';
 import canUseDOM from 'dom-lib/canUseDOM';
-import pick from 'lodash/pick';
-export var mediaQuerySizeMap = {
+export const mediaQuerySizeMap = {
   xs: '(max-width: 575px)',
   sm: '(min-width: 576px)',
   md: '(min-width: 768px)',
@@ -16,7 +14,7 @@ export var mediaQuerySizeMap = {
  * The type of the query parameter.
  */
 
-var matchMedia = function matchMedia(query) {
+const matchMedia = query => {
   if (canUseDOM) {
     return window.matchMedia(query);
   }
@@ -26,52 +24,6 @@ var matchMedia = function matchMedia(query) {
   };
 };
 
-/**
- * React hook that tracks state of a CSS media query.
- * @see https://rsuitejs.com/components/use-media-query
- */
-export function useMediaQueryOld(query) {
-  var queries = Array.isArray(query) ? query : [query];
-  var mediaQueries = useMemo(function () {
-    return queries.map(function (query) {
-      return mediaQuerySizeMap[query] || query;
-    });
-  }, // eslint-disable-next-line react-hooks/exhaustive-deps
-  [].concat(queries));
-  var _useState = useState(function () {
-      return mediaQueries.map(function (query) {
-        return pick(matchMedia(query), ['matches', 'media']);
-      });
-    }),
-    mediaQueryArray = _useState[0],
-    setMediaQueryArray = _useState[1];
-  function handleChange(event) {
-    setMediaQueryArray(function (prevMediaQueryArray) {
-      return prevMediaQueryArray.map(function (item) {
-        return item.media === event.media ? _extends({}, item, {
-          matches: event.matches
-        }) : item;
-      });
-    });
-  }
-  useEffect(function () {
-    var mediaQueryList = mediaQueries.map(function (query) {
-      return matchMedia(query);
-    });
-    mediaQueryList.forEach(function (query) {
-      query.addEventListener('change', handleChange);
-    });
-    return function () {
-      mediaQueryList.forEach(function (query) {
-        query.removeEventListener('change', handleChange);
-      });
-    };
-  }, [mediaQueries]);
-  return mediaQueryArray.map(function (query) {
-    return query.matches;
-  });
-}
-
 /**
  * React hook that tracks state of a CSS media query
  * @version 5.48.0
@@ -79,48 +31,36 @@ export function useMediaQueryOld(query) {
  * @see https://rsuitejs.com/components/use-media-query
  */
 export function useMediaQuery(query) {
-  var _React$useSyncExterna;
-  var queries = Array.isArray(query) ? query : [query];
-  var mediaQueries = useMemo(function () {
-    return queries.map(function (query) {
-      return mediaQuerySizeMap[query] || query;
-    });
-  }, // eslint-disable-next-line react-hooks/exhaustive-deps
-  [].concat(queries));
-  var mediaQueryArray = useRef(mediaQueries.map(function (query) {
-    return matchMedia(query).matches;
-  }));
-  var subscribe = useCallback(function (callback) {
-    var list = mediaQueries.map(function (query) {
-      return matchMedia(query);
-    });
-    var handleChange = function handleChange(event) {
-      var index = list.findIndex(function (item) {
-        return item.media === event.media;
-      });
+  const queries = Array.isArray(query) ? query : [query];
+  const mediaQueries = useMemo(() => queries.map(query => mediaQuerySizeMap[query] || query), [...queries]);
+  const mediaQueryArray = useRef(mediaQueries.map(query => matchMedia(query).matches));
+  const subscribe = useCallback(callback => {
+    const list = mediaQueries.map(query => matchMedia(query));
+    const handleChange = event => {
+      const index = list.findIndex(item => item.media === event.media);
       if (index !== -1) {
         // The store snapshot returned by getSnapshot must be immutable. So we need to create a new array.
-        var nextMediaQueryArray = mediaQueryArray.current.slice();
+        const nextMediaQueryArray = mediaQueryArray.current.slice();
         nextMediaQueryArray[index] = event.matches;
         mediaQueryArray.current = nextMediaQueryArray;
       }
       callback();
     };
-    list.forEach(function (query) {
+    list.forEach(query => {
       query.addEventListener('change', handleChange);
     });
-    return function () {
-      list.forEach(function (query) {
+    return () => {
+      list.forEach(query => {
         query.removeEventListener('change', handleChange);
       });
     };
   }, [mediaQueries]);
-  var getSnapshot = useCallback(function () {
+  const getSnapshot = useCallback(() => {
     return mediaQueryArray.current;
   }, []);
-  var getServerSnapshot = useCallback(function () {
+  const getServerSnapshot = useCallback(() => {
     return mediaQueryArray.current;
   }, []);
-  return (_React$useSyncExterna = React['useSyncExternalStore']) === null || _React$useSyncExterna === void 0 ? void 0 : _React$useSyncExterna.call(React, subscribe, getSnapshot, getServerSnapshot);
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 }
-export default typeof React['useSyncExternalStore'] === 'function' ? useMediaQuery : useMediaQueryOld;
+export default useMediaQuery;

package/esm/useToaster/useToaster.js

@@ -11,49 +11,48 @@ import { CustomContext } from "../CustomProvider/CustomProvider.js";
  *
  * @see https://rsuitejs.com/components/use-toaster/
  */
-var useToaster = function useToaster() {
-  var _useContext = useContext(CustomContext),
-    toasters = _useContext.toasters,
-    toastContainer = _useContext.toastContainer;
-  return useMemo(function () {
-    return {
-      /**
-       * Push a toast message.
-       * @param message The message to be displayed.
-       *                eg: `<Message type="success" description="Success" />` or `<Notification type="success" closable>Success</Notification>`
-       * @param options The options of the toast message. (optional)
-       *                eg: `{ placement: 'topCenter', duration: 5000 }`
-       * @returns The key of the toast message.
-       */
-      push: function push(message, options) {
-        var container = (typeof (options === null || options === void 0 ? void 0 : options.container) === 'function' ? options === null || options === void 0 ? void 0 : options.container() : options === null || options === void 0 ? void 0 : options.container) || toastContainer;
-        if (container === toastContainer) {
-          var _toasters$current;
-          return toasters === null || toasters === void 0 || (_toasters$current = toasters.current) === null || _toasters$current === void 0 || (_toasters$current = _toasters$current.get((options === null || options === void 0 ? void 0 : options.placement) || 'topCenter')) === null || _toasters$current === void 0 ? void 0 : _toasters$current.push(message, options);
-        } else {
-          return toaster.push(message, options);
-        }
-      },
-      /**
-       * Remove a toast message.
-       * @param key  The key of the toast message.
-       */
-      remove: function remove(key) {
-        toasters ? Array.from(toasters.current).forEach(function (_ref) {
-          var c = _ref[1];
-          return c === null || c === void 0 ? void 0 : c.remove(key);
-        }) : toaster.remove(key);
-      },
-      /**
-       * Clear all toast messages.
-       */
-      clear: function clear() {
-        toasters ? Array.from(toasters.current).forEach(function (_ref2) {
-          var c = _ref2[1];
-          return c === null || c === void 0 ? void 0 : c.clear();
-        }) : toaster.clear();
+const useToaster = () => {
+  const {
+    toasters,
+    toastContainer
+  } = useContext(CustomContext);
+  return useMemo(() => ({
+    /**
+     * Push a toast message.
+     * @param message The message to be displayed.
+     *                eg: `<Message type="success" description="Success" />` or `<Notification type="success" closable>Success</Notification>`
+     * @param options The options of the toast message. (optional)
+     *                eg: `{ placement: 'topCenter', duration: 5000 }`
+     * @returns The key of the toast message.
+     */
+    push: (message, options) => {
+      const container = (typeof (options === null || options === void 0 ? void 0 : options.container) === 'function' ? options === null || options === void 0 ? void 0 : options.container() : options === null || options === void 0 ? void 0 : options.container) || toastContainer;
+      if (container === toastContainer) {
+        var _toasters$current;
+        return toasters === null || toasters === void 0 || (_toasters$current = toasters.current) === null || _toasters$current === void 0 || (_toasters$current = _toasters$current.get((options === null || options === void 0 ? void 0 : options.placement) || 'topCenter')) === null || _toasters$current === void 0 ? void 0 : _toasters$current.push(message, options);
+      } else {
+        return toaster.push(message, options);
       }
-    };
-  }, [toastContainer, toasters]);
+    },
+    /**
+     * Remove a toast message.
+     * @param key  The key of the toast message.
+     */
+    remove: key => {
+      toasters ? Array.from(toasters.current).forEach(_ref => {
+        let [, c] = _ref;
+        return c === null || c === void 0 ? void 0 : c.remove(key);
+      }) : toaster.remove(key);
+    },
+    /**
+     * Clear all toast messages.
+     */
+    clear: () => {
+      toasters ? Array.from(toasters.current).forEach(_ref2 => {
+        let [, c] = _ref2;
+        return c === null || c === void 0 ? void 0 : c.clear();
+      }) : toaster.clear();
+    }
+  }), [toastContainer, toasters]);
 };
 export default useToaster;

package/internals/Picker/styles/index.less

@@ -4,11 +4,11 @@
 @import '../../../styles/mixins/combobox.less';
 @import '../../../Stack/styles/index.less';
 @import '../../../Form/styles/mixin.less';
-@import '../../CloseButton/styles/index.less';
 @import '../../../Loader/styles/index.less';
 @import '../../../Input/styles/index.less';
 @import '../../../InputGroup/styles/index.less';
 @import '../../../Highlight/styles/index.less';
+@import '../../CloseButton/styles/index.less';
 @import './mixin.less';
 
 //
@@ -72,7 +72,6 @@
   &-value-list {
     flex: 0 1 auto;
     .ellipsis-basic();
-    .ie11-max-width(100%);
   }
 
   &-value-count {
@@ -198,16 +197,15 @@
 /* stylelint-disable-next-line */ // Custom button sizes
 .rs-picker-toggle.rs-btn {
   .picker-button-caret-md();
+  .picker-button-size(base);
   .date-picker-button-caret-md();
-  .date-picker-button-size(base);
 
   &-lg {
+    .button-size-lg();
     .picker-button-caret-lg();
+    .picker-button-size(large);
     .picker-default-button-reset-padding-left(large);
     .date-picker-button-caret-lg();
-    .date-picker-button-size(large);
-
-    .button-size-lg();
 
     .rs-picker-value-count {
       line-height: @line-height-large-computed;
@@ -216,27 +214,25 @@
 
   &-md {
     .picker-button-caret-md();
+    .picker-button-size(base);
     .picker-default-button-reset-padding-left(base);
     .date-picker-button-caret-md();
-    .date-picker-button-size(base);
   }
 
   &-sm {
     .button-size-sm();
-
     .picker-button-caret-sm();
+    .picker-button-size(small);
     .picker-default-button-reset-padding-left(small);
     .date-picker-button-caret-sm();
-    .date-picker-button-size(small);
   }
 
   &-xs {
     .button-size-xs();
-
     .picker-button-caret-xs();
+    .picker-button-size(extra-small);
     .picker-default-button-reset-padding-left(extra-small);
     .date-picker-button-caret-xs();
-    .date-picker-button-size(extra-small);
   }
 }
 

package/internals/Picker/styles/mixin.less

@@ -201,8 +201,10 @@
   }
 }
 
-.date-picker-button-size(@size) {
-  @padding-name: 'padding-@{size}-vertical';
+.picker-button-size(@size) {
+  .map-size(@size);
+
+  @padding-name: 'padding-y@{suffix}';
   @padding-vertical: @@padding-name;
 
   .rs-picker-default & {
@@ -211,7 +213,8 @@
 }
 
 .picker-default-button-reset-padding-left(@size) {
-  @padding-name: 'padding-@{size}-horizontal';
+  .map-size(@size);
+  @padding-name: 'padding-x@{suffix}';
   @padding-horizontal: @@padding-name;
 
   .rs-picker-default & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "5.76.2",
+  "version": "6.0.0-canary-20250103",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -10,7 +10,7 @@
     "lib": "cjs/"
   },
   "scripts": {
-    "prepublishOnly": "../node_modules/mocha/bin/mocha ../test/validateBuilds.js"
+    "prepublishOnly": "../node_modules/mocha/bin/_mocha ../test/validateBuilds.js"
   },
   "keywords": [
     "react",
@@ -25,33 +25,29 @@
     "url": "git@github.com:rsuite/rsuite.git"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.1",
+    "@babel/runtime": "^7.26.0",
     "@juggle/resize-observer": "^3.4.0",
     "@rsuite/icons": "^1.3.0",
     "@types/lodash": "^4.14.184",
-    "@types/prop-types": "^15.7.5",
-    "@types/react-window": "^1.8.5",
+    "@types/react-window": "^1.8.8",
     "classnames": "^2.3.1",
-    "date-fns": "^2.29.3",
+    "date-fns": "^4.1.0",
     "dom-lib": "^3.3.1",
     "lodash": "^4.17.11",
-    "prop-types": "^15.8.1",
     "react-use-set": "^1.0.0",
-    "react-window": "^1.8.8",
+    "react-window": "^1.8.11",
     "rsuite-table": "^5.19.1",
     "schema-typed": "^2.2.2"
   },
   "peerDependencies": {
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react": ">=18",
+    "react-dom": ">=18"
   },
   "overrides": {
     "aria-query@>5.1.3": "5.1.3"
   },
   "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not ie <11"
+    "defaults"
   ],
   "sideEffects": [
     "cjs/**/styles/*",
@@ -59,5 +55,12 @@
     "dist/*",
     "*.less",
     "*.css"
+  ],
+  "size-limit": [
+    {
+      "path": "lib/dist/rsuite.min.js",
+      "limit": "256 kB",
+      "gzip": true
+    }
   ]
 }

package/styles/color-modes/dark.less

@@ -326,6 +326,7 @@
   // Badge
   --rs-badge-bg: var(--rs-color-red);
   --rs-badge-text: var(--rs-gray-0);
+  --rs-badge-border: var(--rs-gray-900);
 
   // Close Button
   --rs-close-button-hover-color: var(--rs-color-red);

package/styles/color-modes/high-contrast.less

@@ -334,6 +334,7 @@
   // Badge
   --rs-badge-bg: var(--rs-red-500);
   --rs-badge-text: var(--rs-gray-0);
+  --rs-badge-border: var(--rs-gray-900);
 
   // Close Button
   --rs-close-button-hover-color: var(--rs-color-red);

package/styles/color-modes/light.less

@@ -349,6 +349,7 @@
   // Badge
   --rs-badge-bg: var(--rs-color-red);
   --rs-badge-text: var(--rs-gray-0);
+  --rs-badge-border: var(--rs-gray-0);
 
   // Close Button
   --rs-close-button-hover-color: var(--rs-color-red);

package/styles/common.less

@@ -11,4 +11,5 @@
 //       but otherwise it breaks tests
 @import 'color-modes.less';
 
+// Normalize
 @import 'normalize.less';

package/styles/mixins/hacks.less

@@ -1,46 +1,5 @@
 // All hacks syntax for all kinds of browsers
 
-// IE 11
-// ---------------------
-.ie11-max-width(@value) when (@enable-ie-polyfill = true) {
-  // IE 11
-  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-    & {
-      max-width: @value;
-    }
-  }
-}
-
-.ie11-height(@value) when (@enable-ie-polyfill = true) {
-  // IE 11
-  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-    & {
-      height: @value;
-    }
-  }
-}
-
-.ie11-z-index(@value) when (@enable-ie-polyfill = true) {
-  // IE 11
-  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-    & {
-      z-index: @value;
-    }
-  }
-}
-
-.ie11-position(@value) when (@enable-ie-polyfill = true) {
-  // IE 11
-  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-    & {
-      position: @value;
-    }
-  }
-}
-
-.ie-box-shadow(@value) when (@enable-ie-polyfill = true) {
-  box-shadow: @value;
-}
 
 // Safari
 // ---------------------
@@ -71,35 +30,3 @@
     }
   }
 }
-
-// IE && Edge
-// ---------------------
-.ie11-edge-width(@value) when (@enable-ie-polyfill = true) {
-  // IE 11
-  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-    & {
-      width: @value;
-    }
-  }
-
-  @supports (-ms-ime-align: auto) {
-    & {
-      width: @value;
-    }
-  }
-}
-
-.ie11-edge-direction(@direction ,@value) {
-  // IE 11
-  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-    & {
-      @{direction}: @value;
-    }
-  }
-  // edge
-  @supports (-ms-ime-align: auto) {
-    & {
-      @{direction}: @value;
-    }
-  }
-}