rsuite 5.40.0 → 5.42.0

package/esm/utils/useClassNames.js

@@ -1,8 +1,12 @@
+'use client';
 import { useCallback, useContext } from 'react';
 import classNames from 'classnames';
 import { prefix as addPrefix } from './prefix';
 import { CustomContext } from '../CustomProvider/CustomProvider';
 
+// This is the only way I found to break circular references between ClassArray and ClassValue
+// https://github.com/Microsoft/TypeScript/issues/3496#issuecomment-128553540
+//eslint-disable-line @typescript-eslint/no-empty-interface
 /**
  * Add a prefix to all classNames.
  *
@@ -16,17 +20,16 @@ import { CustomContext } from '../CustomProvider/CustomProvider';
  */
 function useClassNames(str) {
   var _ref = useContext(CustomContext) || {},
-      _ref$classPrefix = _ref.classPrefix,
-      classPrefix = _ref$classPrefix === void 0 ? 'rs' : _ref$classPrefix;
-
+    _ref$classPrefix = _ref.classPrefix,
+    classPrefix = _ref$classPrefix === void 0 ? 'rs' : _ref$classPrefix;
   var componentName = addPrefix(classPrefix, str);
+
   /**
    * @example
    *
    * if str = 'button':
    * prefix('red', { active: true }) => 'rs-button-red rs-button-active'
    */
-
   var prefix = useCallback(function () {
     var mergeClasses = arguments.length ? classNames.apply(void 0, arguments).split(' ').map(function (item) {
       return addPrefix(componentName, item);
@@ -35,27 +38,26 @@ function useClassNames(str) {
       return cls;
     }).join(' ');
   }, [componentName]);
+
   /**
    * @example
    *
    * if str = 'button':
    * withClassPrefix('red', { active: true }) => 'rs-button rs-button-red rs-button-active'
    */
-
   var withClassPrefix = useCallback(function () {
     for (var _len = arguments.length, classes = new Array(_len), _key = 0; _key < _len; _key++) {
       classes[_key] = arguments[_key];
     }
-
     var mergeClasses = prefix(classes);
     return mergeClasses ? componentName + " " + mergeClasses : componentName;
   }, [componentName, prefix]);
+
   /**
    * @example
    * rootPrefix('btn') => 'rs-btn'
    * rootPrefix('btn', { active: true }) => 'rs-btn rs-active'
    */
-
   var rootPrefix = function rootPrefix() {
     var mergeClasses = arguments.length ? classNames.apply(void 0, arguments).split(' ').map(function (item) {
       return addPrefix(classPrefix, item);
@@ -64,7 +66,6 @@ function useClassNames(str) {
       return cls;
     }).join(' ');
   };
-
   return {
     withClassPrefix: withClassPrefix,
     merge: classNames,
@@ -72,5 +73,4 @@ function useClassNames(str) {
     rootPrefix: rootPrefix
   };
 }
-
 export default useClassNames;

package/esm/utils/useClickOutside.js

@@ -1,9 +1,10 @@
+'use client';
 import { useEffect, useRef } from 'react';
 export default function useClickOutside(_ref) {
   var _ref$enabled = _ref.enabled,
-      enabled = _ref$enabled === void 0 ? true : _ref$enabled,
-      isOutside = _ref.isOutside,
-      handle = _ref.handle;
+    enabled = _ref$enabled === void 0 ? true : _ref$enabled,
+    isOutside = _ref.isOutside,
+    handle = _ref.handle;
   var isOutsideRef = useRef(isOutside);
   var handleRef = useRef(handle);
   useEffect(function () {
@@ -14,14 +15,11 @@ export default function useClickOutside(_ref) {
     if (enabled) {
       var eventHandler = function eventHandler(event) {
         var _isOutsideRef$current;
-
         if ((_isOutsideRef$current = isOutsideRef.current) !== null && _isOutsideRef$current !== void 0 && _isOutsideRef$current.call(isOutsideRef, event)) {
           var _handleRef$current;
-
           (_handleRef$current = handleRef.current) === null || _handleRef$current === void 0 ? void 0 : _handleRef$current.call(handleRef, event);
         }
       };
-
       window.addEventListener('mousedown', eventHandler);
       return function () {
         window.removeEventListener('mousedown', eventHandler);

package/esm/utils/useControlled.js

@@ -1,14 +1,21 @@
+'use client';
 import { useRef, useState, useCallback } from 'react';
 
+/**
+ * A hook for controlled value management.
+ * In the case of passing the controlled value, the controlled value is returned, otherwise the value in state is returned.
+ * Generally used for a component including controlled and uncontrolled modes.
+ * @param controlledValue
+ * @param defaultValue
+ * @param formatValue
+ */
+
 function useControlled(controlledValue, defaultValue) {
   var controlledRef = useRef(false);
   controlledRef.current = controlledValue !== undefined;
-
   var _useState = useState(defaultValue),
-      uncontrolledValue = _useState[0],
-      setUncontrolledValue = _useState[1]; // If it is controlled, this directly returns the attribute value.
-
-
+    uncontrolledValue = _useState[0],
+    setUncontrolledValue = _useState[1]; // If it is controlled, this directly returns the attribute value.
   var value = controlledRef.current ? controlledValue : uncontrolledValue;
   var setValue = useCallback(function (nextValue) {
     // Only update the value in state when it is not under control.
@@ -18,5 +25,4 @@ function useControlled(controlledValue, defaultValue) {
   }, [controlledRef]);
   return [value, setValue, controlledRef.current];
 }
-
 export default useControlled;

package/esm/utils/useCustom.js

@@ -1,57 +1,50 @@
+'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { useContext, useCallback } from 'react';
 import defaultLocale from '../locales/default';
 import { CustomContext } from '../CustomProvider/CustomProvider';
 import { format, parse } from '../utils/dateUtils';
-
 var mergeObject = function mergeObject(list) {
   return list.reduce(function (a, b) {
     a = _extends({}, a, b);
     return a;
   }, {});
 };
-
 var getDefaultRTL = function getDefaultRTL() {
   return typeof window !== 'undefined' && (document.body.getAttribute('dir') || document.dir) === 'rtl';
 };
+
 /**
  * A hook to get custom configuration of `<CustomProvider>`
  * @param keys
  */
-
-
 function useCustom(keys, overrideLocale) {
   var _locale$Calendar2, _locale$Calendar4;
-
   var _useContext = useContext(CustomContext),
-      _useContext$locale = _useContext.locale,
-      locale = _useContext$locale === void 0 ? defaultLocale : _useContext$locale,
-      _useContext$rtl = _useContext.rtl,
-      rtl = _useContext$rtl === void 0 ? getDefaultRTL() : _useContext$rtl,
-      formatDate = _useContext.formatDate,
-      parseDate = _useContext.parseDate,
-      toasters = _useContext.toasters,
-      disableRipple = _useContext.disableRipple;
-
+    _useContext$locale = _useContext.locale,
+    locale = _useContext$locale === void 0 ? defaultLocale : _useContext$locale,
+    _useContext$rtl = _useContext.rtl,
+    rtl = _useContext$rtl === void 0 ? getDefaultRTL() : _useContext$rtl,
+    formatDate = _useContext.formatDate,
+    parseDate = _useContext.parseDate,
+    toasters = _useContext.toasters,
+    disableRipple = _useContext.disableRipple;
   var componentLocale = _extends({}, locale === null || locale === void 0 ? void 0 : locale.common, typeof keys === 'string' ? locale === null || locale === void 0 ? void 0 : locale[keys] : typeof keys === 'object' ? mergeObject(keys.map(function (key) {
     return locale === null || locale === void 0 ? void 0 : locale[key];
-  })) : {}); // Component custom locale
-
+  })) : {});
 
+  // Component custom locale
   if (overrideLocale) {
     componentLocale = mergeObject([componentLocale, overrideLocale]);
   }
-
   var defaultFormatDate = useCallback(function (date, formatStr) {
     var _locale$Calendar;
-
     return format(date, formatStr, {
       locale: locale === null || locale === void 0 ? void 0 : (_locale$Calendar = locale.Calendar) === null || _locale$Calendar === void 0 ? void 0 : _locale$Calendar.dateLocale
     });
   }, [(_locale$Calendar2 = locale.Calendar) === null || _locale$Calendar2 === void 0 ? void 0 : _locale$Calendar2.dateLocale]);
   var defaultParseDate = useCallback(function (dateString, formatString) {
     var _locale$Calendar3;
-
     return parse(dateString, formatString, new Date(), {
       locale: locale === null || locale === void 0 ? void 0 : (_locale$Calendar3 = locale.Calendar) === null || _locale$Calendar3 === void 0 ? void 0 : _locale$Calendar3.dateLocale
     });
@@ -65,5 +58,4 @@ function useCustom(keys, overrideLocale) {
     parseDate: parseDate || defaultParseDate
   };
 }
-
 export default useCustom;

package/esm/utils/useElementResize.js

@@ -1,5 +1,7 @@
+'use client';
 import { useEffect, useRef } from 'react';
 import { ResizeObserver } from '@juggle/resize-observer';
+
 /**
  * Attach the event handler directly to the specified DOM element,
  * and it will be triggered when the size of the DOM element is changed.
@@ -7,22 +9,18 @@ import { ResizeObserver } from '@juggle/resize-observer';
  * @param eventTarget The target to listen for events on
  * @param listener An event handler
  */
-
 export default function useElementResize(eventTarget, listener) {
   var resizeObserver = useRef();
   useEffect(function () {
     if (!resizeObserver.current) {
       var target = typeof eventTarget === 'function' ? eventTarget() : eventTarget;
-
       if (target) {
         resizeObserver.current = new ResizeObserver(listener);
         resizeObserver.current.observe(target);
       }
     }
-
     return function () {
       var _resizeObserver$curre;
-
       (_resizeObserver$curre = resizeObserver.current) === null || _resizeObserver$curre === void 0 ? void 0 : _resizeObserver$curre.disconnect();
     };
   }, [eventTarget, listener]);

package/esm/utils/useEnsuredRef.js

@@ -1,4 +1,6 @@
+'use client';
 import { useRef } from 'react';
+
 /**
  * Used in forwardRef components to ensure ref exists
  * so that calling ref.current shall not throw error
@@ -20,13 +22,10 @@ import { useRef } from 'react';
  * });
  *
  */
-
 export default function useEnsuredRef(ref) {
   var dumpRef = useRef();
-
   if (ref) {
     return ref;
   }
-
   return dumpRef;
 }

package/esm/utils/useEventCallback.js

@@ -1,9 +1,10 @@
+'use client';
 import { useEffect, useCallback, useRef } from 'react';
+
 /**
  * https://github.com/facebook/react/issues/14099#issuecomment-440013892
  * @param {function} fn
  */
-
 export default function useEventCallback(fn) {
   var ref = useRef(fn);
   useEffect(function () {
@@ -11,11 +12,9 @@ export default function useEventCallback(fn) {
   });
   return useCallback(function () {
     var _ref$current;
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     return (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.call.apply(_ref$current, [ref].concat(args));
   }, []);
 }

package/esm/utils/useEventListener.js

@@ -1,5 +1,7 @@
+'use client';
 import { useEffect } from 'react';
 import on from 'dom-lib/on';
+
 /**
  * Attach the event handler directly to the specified DOM element.
  *
@@ -8,12 +10,10 @@ import on from 'dom-lib/on';
  * @param handler An event handler
  * @param capture Whether or not to listen during the capture event phase
  */
-
 export default function useEventListener(eventTarget, event, listener, capture) {
   if (capture === void 0) {
     capture = false;
   }
-
   useEffect(function () {
     var target = typeof eventTarget === 'function' ? eventTarget() : eventTarget;
     var controller = target ? on(target, event, listener, capture) : null;

package/esm/utils/useFocus.js

@@ -1,24 +1,25 @@
+'use client';
 import { useCallback, useRef } from 'react';
 export default function useFocus(elementRef) {
   // When grabbing focus, keep track of previous activeElement
   // so that we can return focus later
-  var previousActiveElementRef = useRef(null); // Focus the element itself
+  var previousActiveElementRef = useRef(null);
 
+  // Focus the element itself
   var grab = useCallback(function () {
     requestAnimationFrame(function () {
       if (document.activeElement !== elementRef.current) {
         var _elementRef$current;
-
         previousActiveElementRef.current = document.activeElement;
         (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.focus();
       }
     });
-  }, [elementRef]); // Return focus to previous active element
+  }, [elementRef]);
 
+  // Return focus to previous active element
   var release = useCallback(function (options) {
     requestAnimationFrame(function () {
       var _previousActiveElemen;
-
       (_previousActiveElemen = previousActiveElementRef.current) === null || _previousActiveElemen === void 0 ? void 0 : _previousActiveElemen.focus(options);
     });
   }, []);

package/esm/utils/useInternalId.js

@@ -1,16 +1,15 @@
+'use client';
 import { useDebugValue, useRef } from 'react';
 import uniqueId from 'lodash/uniqueId';
+
 /**
  * Used for generating unique ID for DOM elements
  */
-
 export default function useInternalId(namespace) {
   var idRef = useRef();
-
   if (!idRef.current) {
     idRef.current = uniqueId("internal://" + namespace);
   }
-
   useDebugValue(idRef.current);
   return idRef.current;
 }

package/esm/utils/useIsMounted.js

@@ -1,5 +1,5 @@
+'use client';
 import { useCallback, useEffect, useRef } from 'react';
-
 function useIsMounted() {
   var isMounted = useRef(false);
   useEffect(function () {
@@ -12,5 +12,4 @@ function useIsMounted() {
     return isMounted.current;
   }, []);
 }
-
 export default useIsMounted;

package/esm/utils/useMap.js

@@ -1,11 +1,11 @@
+'use client';
 import { useMemo, useState } from 'react';
 export function useMap() {
   var _useState = useState(function () {
-    return new Map();
-  }),
-      map = _useState[0],
-      setMap = _useState[1];
-
+      return new Map();
+    }),
+    map = _useState[0],
+    setMap = _useState[1];
   return useMemo(function () {
     return {
       has: function has(key) {

package/esm/utils/useMount.js

@@ -1,13 +1,11 @@
+'use client';
 import { useEffect, useRef } from 'react';
-
 var useMount = function useMount(callback) {
   var mountRef = useRef(callback);
   mountRef.current = callback;
   useEffect(function () {
     var _mountRef$current;
-
     (_mountRef$current = mountRef.current) === null || _mountRef$current === void 0 ? void 0 : _mountRef$current.call(mountRef);
   }, []);
 };
-
 export default useMount;

package/esm/utils/usePortal.js

@@ -1,35 +1,30 @@
+'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useEffect, useState, useCallback, useMemo } from 'react';
 import { createPortal } from 'react-dom';
 import canUseDOM from 'dom-lib/canUseDOM';
 var MountedPortal = /*#__PURE__*/React.memo(function (_ref) {
   var children = _ref.children,
-      container = _ref.container;
-
+    container = _ref.container;
   var _useState = useState(false),
-      mounted = _useState[0],
-      setMounted = _useState[1];
-
+    mounted = _useState[0],
+    setMounted = _useState[1];
   useEffect(function () {
     return setMounted(true);
   }, []);
-
   if (container && mounted) {
     return /*#__PURE__*/createPortal(children, container);
   }
-
   return null;
 });
-
 function usePortal(props) {
   if (props === void 0) {
     props = {};
   }
-
   var _props = props,
-      container = _props.container,
-      _props$waitMount = _props.waitMount,
-      waitMount = _props$waitMount === void 0 ? false : _props$waitMount;
+    container = _props.container,
+    _props$waitMount = _props.waitMount,
+    waitMount = _props$waitMount === void 0 ? false : _props$waitMount;
   var containerElement = typeof container === 'function' ? container() : container;
   var rootElement = useMemo(function () {
     return canUseDOM ? containerElement || document.body : null;
@@ -48,5 +43,4 @@ function usePortal(props) {
     Portal: waitMount ? WaitMountPortal : Portal
   };
 }
-
 export default usePortal;

package/esm/utils/useRootClose.js

@@ -1,17 +1,15 @@
+'use client';
 import { useEffect, useCallback } from 'react';
 import contains from 'dom-lib/contains';
 import ownerDocument from 'dom-lib/ownerDocument';
 import on from 'dom-lib/on';
 import { getDOMNode, KEY_VALUES } from './';
-
 function isLeftClickEvent(event) {
   return (event === null || event === void 0 ? void 0 : event.button) === 0;
 }
-
 function isModifiedEvent(event) {
   return !!(event.metaKey || event.altKey || event.ctrlKey || event !== null && event !== void 0 && event.shiftKey);
 }
-
 /**
  * A hook that listens to the document click event and closes the overlay.
  * @param onRootClose
@@ -20,10 +18,10 @@ function isModifiedEvent(event) {
  */
 function useRootClose(onRootClose, _ref) {
   var disabled = _ref.disabled,
-      triggerTarget = _ref.triggerTarget,
-      overlayTarget = _ref.overlayTarget,
-      _ref$listenEscape = _ref.listenEscape,
-      listenEscape = _ref$listenEscape === void 0 ? true : _ref$listenEscape;
+    triggerTarget = _ref.triggerTarget,
+    overlayTarget = _ref.overlayTarget,
+    _ref$listenEscape = _ref.listenEscape,
+    listenEscape = _ref$listenEscape === void 0 ? true : _ref$listenEscape;
   var handleDocumentKeyUp = useCallback(function (event) {
     if (listenEscape && event.key === KEY_VALUES.ESC) {
       onRootClose === null || onRootClose === void 0 ? void 0 : onRootClose(event);
@@ -31,21 +29,20 @@ function useRootClose(onRootClose, _ref) {
   }, [listenEscape, onRootClose]);
   var handleDocumentMouseDown = useCallback(function (event) {
     var triggerElement = getDOMNode(triggerTarget);
-    var overlayElement = getDOMNode(overlayTarget); // Check if the clicked element is a trigger.
+    var overlayElement = getDOMNode(overlayTarget);
 
+    // Check if the clicked element is a trigger.
     if (triggerElement && contains(triggerElement, event.target)) {
       return;
-    } // Check if the clicked element is a overlay.
-
+    }
 
+    // Check if the clicked element is a overlay.
     if (overlayElement && contains(overlayElement, event.target)) {
       return;
     }
-
     if (isModifiedEvent(event) || !isLeftClickEvent(event)) {
       return;
     }
-
     onRootClose === null || onRootClose === void 0 ? void 0 : onRootClose(event);
   }, [onRootClose, triggerTarget, overlayTarget]);
   useEffect(function () {
@@ -60,5 +57,4 @@ function useRootClose(onRootClose, _ref) {
     };
   }, [triggerTarget, disabled, onRootClose, handleDocumentMouseDown, handleDocumentKeyUp]);
 }
-
 export default useRootClose;

package/esm/utils/useTimeout.js

@@ -1,5 +1,5 @@
+'use client';
 import { useEffect, useRef, useCallback } from 'react';
-
 /**
  * A timer hook
  * @param fn Timer callback function
@@ -10,11 +10,9 @@ function useTimeout(fn, ms, enabled) {
   if (ms === void 0) {
     ms = 0;
   }
-
   if (enabled === void 0) {
     enabled = true;
   }
-
   var timeout = useRef();
   var callback = useRef(fn);
   var clear = useCallback(function () {
@@ -22,16 +20,15 @@ function useTimeout(fn, ms, enabled) {
   }, []);
   var set = useCallback(function () {
     timeout.current && clearTimeout(timeout.current);
-
     if (enabled) {
       timeout.current = setTimeout(function () {
         var _callback$current;
-
         (_callback$current = callback.current) === null || _callback$current === void 0 ? void 0 : _callback$current.call(callback);
       }, ms);
     }
-  }, [ms, enabled]); // update ref when function changes
+  }, [ms, enabled]);
 
+  // update ref when function changes
   useEffect(function () {
     callback.current = fn;
   }, [fn]);
@@ -44,5 +41,4 @@ function useTimeout(fn, ms, enabled) {
     reset: set
   };
 }
-
 export default useTimeout;

package/esm/utils/useToggleCaret.js

@@ -1,30 +1,25 @@
+'use client';
 import { useMemo } from 'react';
 import AngleDownIcon from '@rsuite/icons/legacy/AngleDown';
 import AngleUpIcon from '@rsuite/icons/legacy/AngleUp';
 import AngleLeftIcon from '@rsuite/icons/legacy/AngleLeft';
 import AngleRightIcon from '@rsuite/icons/legacy/AngleRight';
 import useCustom from './useCustom';
-
 function useToggleCaret(placement) {
   var _useCustom = useCustom('Dropdown'),
-      rtl = _useCustom.rtl;
-
+    rtl = _useCustom.rtl;
   return useMemo(function () {
     switch (true) {
       case /^top/.test(placement):
         return AngleUpIcon;
-
       case /^right/.test(placement):
         return rtl ? AngleLeftIcon : AngleRightIcon;
-
       case /^left/.test(placement):
         return rtl ? AngleRightIcon : AngleLeftIcon;
-
       case /^bottom/.test(placement):
       default:
         return AngleDownIcon;
     }
   }, [placement, rtl]);
 }
-
 export default useToggleCaret;

package/esm/utils/useUniqueId.js

@@ -1,22 +1,20 @@
+'use client';
 import * as React from 'react';
 import uniqueId from 'lodash/uniqueId';
 var reactUseId = React['useId' + ''];
+
 /**
  * Used for generating unique ID for DOM elements
  *
  * @param idProp If id is provided, it will be used instead of generating a new one
  */
-
 export default function useUniqueId(prefix, idProp) {
   var idRef = React.useRef();
-
   if (reactUseId !== undefined) {
     return idProp !== null && idProp !== void 0 ? idProp : "" + prefix + reactUseId();
   }
-
   if (!idRef.current) {
     idRef.current = uniqueId(prefix);
   }
-
   return idProp !== null && idProp !== void 0 ? idProp : idRef.current;
 }

package/esm/utils/useUpdateEffect.js

@@ -1,5 +1,5 @@
+'use client';
 import { useEffect, useRef } from 'react';
-
 var useUpdateEffect = function useUpdateEffect(effect, deps) {
   var isMounting = useRef(true);
   useEffect(function () {
@@ -7,9 +7,8 @@ var useUpdateEffect = function useUpdateEffect(effect, deps) {
       isMounting.current = false;
       return;
     }
-
-    effect(); // eslint-disable-next-line react-hooks/exhaustive-deps
+    effect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, deps);
 };
-
 export default useUpdateEffect;

package/esm/utils/useUpdatedRef.js

@@ -1,11 +1,12 @@
+'use client';
 import { useRef } from 'react';
+
 /**
  * Returns a ref that is immediately updated with the new value
  *
  * @param value The Ref value
  * @category refs
  */
-
 export default function useUpdatedRef(value) {
   var valueRef = useRef(value);
   valueRef.current = value;