rsuite 5.76.0 → 6.0.0-canary-20241227

package/esm/toaster/ToastContainer.js

@@ -1,64 +1,54 @@
 'use client';
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["as", "className", "classPrefix", "placement", "callback"],
-  _excluded2 = ["className"],
-  _excluded3 = ["container"];
 import React, { useState, useImperativeHandle, useRef, useCallback } from 'react';
 import { createPortal } from 'react-dom';
-import PropTypes from 'prop-types';
 import kebabCase from 'lodash/kebabCase';
 import Transition from "../Animation/Transition.js";
 import { useClassNames } from "../internals/hooks/index.js";
 import { guid, createChainedFunction, render } from "../internals/utils/index.js";
 import ToastContext from "./ToastContext.js";
-export var toastPlacements = ['topCenter', 'bottomCenter', 'topStart', 'topEnd', 'bottomStart', 'bottomEnd'];
-var useMessages = function useMessages() {
-  var _useState = useState([]),
-    messages = _useState[0],
-    setMessages = _useState[1];
-  var getKey = useCallback(function (key) {
+export const toastPlacements = ['topCenter', 'bottomCenter', 'topStart', 'topEnd', 'bottomStart', 'bottomEnd'];
+const useMessages = () => {
+  const [messages, setMessages] = useState([]);
+  const getKey = useCallback(key => {
     if (typeof key === 'undefined' && messages.length) {
       return messages[messages.length - 1].key;
     }
     return key;
   }, [messages]);
-  var push = useCallback(function (message, options) {
-    var _ref = options || {},
-      duration = _ref.duration,
-      _ref$mouseReset = _ref.mouseReset,
-      mouseReset = _ref$mouseReset === void 0 ? true : _ref$mouseReset,
-      container = _ref.container;
-    var key = guid();
-    setMessages(function (prevMessages) {
-      return [].concat(prevMessages, [{
-        key: key,
-        visible: true,
-        node: message,
-        duration: duration,
-        mouseReset: mouseReset,
-        container: container
-      }]);
-    });
+  const push = useCallback((message, options) => {
+    const {
+      duration,
+      mouseReset = true,
+      container
+    } = options || {};
+    const key = guid();
+    setMessages(prevMessages => [...prevMessages, {
+      key,
+      visible: true,
+      node: message,
+      duration,
+      mouseReset,
+      container
+    }]);
     return key;
   }, []);
-  var clear = useCallback(function () {
+  const clear = useCallback(() => {
     // Set all existing messages to be invisible.
-    setMessages(messages.map(function (msg) {
-      return _extends({}, msg, {
-        visible: false
-      });
-    }));
+    setMessages(messages.map(msg => ({
+      ...msg,
+      visible: false
+    })));
 
     // Remove all invisible messages after 400ms.
     // The delay removal here is to preserve the animation.
-    setTimeout(function () {
+    setTimeout(() => {
       setMessages([]);
     }, 400);
   }, [messages]);
-  var remove = useCallback(function (key) {
+  const remove = useCallback(key => {
     // Set the message of the specified key to invisible.
-    setMessages(messages.map(function (n) {
+    setMessages(messages.map(n => {
       if (n.key === getKey(key)) {
         n.visible = false;
       }
@@ -66,112 +56,108 @@ var useMessages = function useMessages() {
     }));
 
     // Remove invisible messages after 400ms.
-    setTimeout(function () {
-      setMessages(messages.filter(function (msg) {
-        return msg.visible;
-      }));
+    setTimeout(() => {
+      setMessages(messages.filter(msg => msg.visible));
     }, 400);
   }, [messages, getKey]);
   return {
-    messages: messages,
-    push: push,
-    clear: clear,
-    remove: remove
+    messages,
+    push,
+    clear,
+    remove
   };
 };
-var ToastContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var rootRef = useRef();
-  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 ? 'toast-container' : _props$classPrefix,
-    _props$placement = props.placement,
-    placement = _props$placement === void 0 ? 'topCenter' : _props$placement,
-    callback = props.callback,
-    rest = _objectWithoutPropertiesLoose(props, _excluded);
-  var _useClassNames = useClassNames(classPrefix),
-    withClassPrefix = _useClassNames.withClassPrefix,
-    merge = _useClassNames.merge,
-    rootPrefix = _useClassNames.rootPrefix;
-  var classes = merge(className, withClassPrefix(kebabCase(placement)));
-  var _useMessages = useMessages(),
-    push = _useMessages.push,
-    clear = _useMessages.clear,
-    remove = _useMessages.remove,
-    messages = _useMessages.messages;
-  useImperativeHandle(ref, function () {
-    return {
-      root: rootRef.current,
-      push: push,
-      clear: clear,
-      remove: remove
-    };
-  });
-  var elements = messages.map(function (item) {
-    var mouseReset = item.mouseReset,
-      duration = item.duration,
-      node = item.node,
-      container = item.container;
-    var toastWithTransition = /*#__PURE__*/React.createElement(Transition, {
+const ToastContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const rootRef = useRef();
+  const {
+    as: Component = 'div',
+    className,
+    classPrefix = 'toast-container',
+    placement = 'topCenter',
+    callback,
+    ...rest
+  } = props;
+  const {
+    withClassPrefix,
+    merge,
+    rootPrefix
+  } = useClassNames(classPrefix);
+  const classes = merge(className, withClassPrefix(kebabCase(placement)));
+  const {
+    push,
+    clear,
+    remove,
+    messages
+  } = useMessages();
+  useImperativeHandle(ref, () => ({
+    root: rootRef.current,
+    push,
+    clear,
+    remove
+  }));
+  const elements = messages.map(item => {
+    const {
+      mouseReset,
+      duration,
+      node,
+      container
+    } = item;
+    const toastWithTransition = /*#__PURE__*/React.createElement(Transition, {
       in: item.visible,
       exitedClassName: rootPrefix('toast-fade-exited'),
       exitingClassName: rootPrefix('toast-fade-exiting'),
       enteringClassName: rootPrefix('toast-fade-entering'),
       enteredClassName: rootPrefix('toast-fade-entered'),
       timeout: 300
-    }, function (transitionProps, ref) {
+    }, (transitionProps, ref) => {
       var _node$props, _node$props2;
-      var transitionClassName = transitionProps.className,
-        rest = _objectWithoutPropertiesLoose(transitionProps, _excluded2);
-      return /*#__PURE__*/React.cloneElement(node, _extends({}, rest, {
-        ref: ref,
-        duration: duration,
-        onClose: createChainedFunction((_node$props = node.props) === null || _node$props === void 0 ? void 0 : _node$props.onClose, function () {
-          return remove(item.key);
-        }),
+      const {
+        className: transitionClassName,
+        ...rest
+      } = transitionProps;
+      return /*#__PURE__*/React.cloneElement(node, {
+        ...rest,
+        ref,
+        duration,
+        onClose: createChainedFunction((_node$props = node.props) === null || _node$props === void 0 ? void 0 : _node$props.onClose, () => remove(item.key)),
         className: merge(rootPrefix('toast'), (_node$props2 = node.props) === null || _node$props2 === void 0 ? void 0 : _node$props2.className, transitionClassName)
-      }));
+      });
     });
     return /*#__PURE__*/React.createElement(ToastContext.Provider, {
       value: {
         usedToaster: true,
-        mouseReset: mouseReset,
-        duration: duration
+        mouseReset,
+        duration
       },
       key: item.key
     }, container ? /*#__PURE__*/createPortal(toastWithTransition, typeof container === 'function' ? container() : container) : toastWithTransition);
   });
   return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
-    ref: function ref(selfRef) {
+    ref: selfRef => {
       rootRef.current = selfRef;
       callback === null || callback === void 0 || callback(selfRef);
     },
     className: classes
   }), elements);
 });
-ToastContainer.getInstance = function (props) {
-  var container = props.container,
-    rest = _objectWithoutPropertiesLoose(props, _excluded3);
-  var containerRef = /*#__PURE__*/React.createRef();
-  var containerElement = (typeof container === 'function' ? container() : container) || document.body;
-  return new Promise(function (resolve) {
-    var renderCallback = function renderCallback() {
+ToastContainer.getInstance = props => {
+  const {
+    container,
+    ...rest
+  } = props;
+  const containerRef = /*#__PURE__*/React.createRef();
+  const containerElement = (typeof container === 'function' ? container() : container) || document.body;
+  return new Promise(resolve => {
+    const renderCallback = () => {
       resolve([containerRef, unmount]);
     };
-    var _render = render(/*#__PURE__*/React.createElement(ToastContainer, _extends({}, rest, {
-        ref: containerRef,
-        callback: renderCallback
-      })), containerElement),
-      unmount = _render.unmount;
+    const {
+      unmount
+    } = render(/*#__PURE__*/React.createElement(ToastContainer, _extends({}, rest, {
+      ref: containerRef,
+      callback: renderCallback
+    })), containerElement);
   });
 };
 ToastContainer.displayName = 'ToastContainer';
-ToastContainer.propTypes = {
-  className: PropTypes.string,
-  classPrefix: PropTypes.string,
-  placement: PropTypes.elementType,
-  container: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  callback: PropTypes.func
-};
 export default ToastContainer;

package/esm/toaster/ToastContext.js

@@ -1,6 +1,6 @@
 'use client';
 import React from 'react';
-var ToastContext = /*#__PURE__*/React.createContext({
+const ToastContext = /*#__PURE__*/React.createContext({
   usedToaster: false
 });
 ToastContext.displayName = 'ToastContext';

package/esm/toaster/hooks/useDelayedClosure.js

@@ -7,27 +7,30 @@ import ToastContext from "../ToastContext.js";
  * A hook that delays the closure of the message box.
  */
 function useDelayedClosure(props) {
-  var onClose = props.onClose,
-    durationProp = props.duration,
-    targetRef = props.targetRef;
-  var _useContext = useContext(ToastContext),
-    usedToaster = _useContext.usedToaster,
-    _useContext$duration = _useContext.duration,
-    duration = _useContext$duration === void 0 ? durationProp : _useContext$duration,
-    mouseReset = _useContext.mouseReset;
-  var mouseEnterRef = useRef();
-  var mouseLeaveRef = useRef();
-  var _useTimeout = useTimeout(onClose, duration, usedToaster && duration > 0),
-    clear = _useTimeout.clear,
-    reset = _useTimeout.reset;
-  useMount(function () {
+  const {
+    onClose,
+    duration: durationProp,
+    targetRef
+  } = props;
+  const {
+    usedToaster,
+    duration = durationProp,
+    mouseReset
+  } = useContext(ToastContext);
+  const mouseEnterRef = useRef();
+  const mouseLeaveRef = useRef();
+  const {
+    clear,
+    reset
+  } = useTimeout(onClose, duration, usedToaster && duration > 0);
+  useMount(() => {
     if (targetRef !== null && targetRef !== void 0 && targetRef.current && mouseReset) {
       if (mouseEnterRef.current || mouseLeaveRef.current) {
         return;
       }
       mouseEnterRef.current = on(targetRef.current, 'mouseenter', clear);
       mouseLeaveRef.current = on(targetRef.current, 'mouseleave', reset);
-      return function () {
+      return () => {
         var _mouseEnterRef$curren, _mouseLeaveRef$curren;
         (_mouseEnterRef$curren = mouseEnterRef.current) === null || _mouseEnterRef$curren === void 0 || _mouseEnterRef$curren.off();
         (_mouseLeaveRef$curren = mouseLeaveRef.current) === null || _mouseLeaveRef$curren === void 0 || _mouseLeaveRef$curren.off();
@@ -35,8 +38,8 @@ function useDelayedClosure(props) {
     }
   });
   return {
-    clear: clear,
-    reset: reset
+    clear,
+    reset
   };
 }
 export default useDelayedClosure;

package/esm/toaster/toaster.js

@@ -1,80 +1,57 @@
 'use client';
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-var _excluded = ["placement"];
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import ToastContainer from "./ToastContainer.js";
-var defaultContainerId = 'default';
-var containers = new Map();
+const defaultContainerId = 'default';
+const containers = new Map();
 
 /**
  * Create a container by Id.
  * @param containerId
  * @param options
  */
-function createContainer(_x, _x2) {
-  return _createContainer.apply(this, arguments);
+async function createContainer(containerId, props) {
+  const [container] = await ToastContainer.getInstance(props);
+  containers.set(containerId || defaultContainerId, container);
+  return container;
 }
+
 /**
  * Get the container by ID. Use default ID when ID is not available.
  * @param containerId
  */
-function _createContainer() {
-  _createContainer = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(containerId, props) {
-    var _yield$ToastContainer, container;
-    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];
-          containers.set(containerId || defaultContainerId, container);
-          return _context.abrupt("return", container);
-        case 6:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee);
-  }));
-  return _createContainer.apply(this, arguments);
-}
 function getContainer(containerId) {
   if (containers.size == 0) {
     return null;
   }
   return containers.get(containerId || defaultContainerId);
 }
-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,
-    containerId = _options.placement,
-    restOptions = _objectWithoutPropertiesLoose(_options, _excluded);
-  var container = getContainer(containerId);
+  const {
+    placement: containerId,
+    ...restOptions
+  } = options;
+  const container = getContainer(containerId);
   if (container !== null && container !== void 0 && container.current) {
     return container.current.push(message, restOptions);
   }
-  return createContainer(containerId !== null && containerId !== void 0 ? containerId : '', options).then(function (ref) {
+  return createContainer(containerId !== null && containerId !== void 0 ? containerId : '', options).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,38 @@ 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),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [...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;