rsuite 5.13.1 → 5.14.0

package/esm/toaster/useToaster.js

@@ -0,0 +1,34 @@
+import toaster from './toaster';
+import { useCustom } from '../utils';
+/**
+ * Hook to use the toaster
+ * @returns toaster { push, remove, clear }
+ */
+
+var useToaster = function useToaster() {
+  var _useCustom = useCustom(),
+      toasters = _useCustom.toasters;
+
+  return {
+    push: function push(message, options) {
+      var _toasters$current;
+
+      var customToaster = toasters === null || toasters === void 0 ? void 0 : (_toasters$current = toasters.current) === null || _toasters$current === void 0 ? void 0 : _toasters$current.get((options === null || options === void 0 ? void 0 : options.placement) || 'topCenter');
+      return customToaster ? customToaster.push(message) : toaster.push(message, options);
+    },
+    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: 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();
+    }
+  };
+};
+
+export default useToaster;

package/esm/utils/constants.d.ts

@@ -1,4 +1,5 @@
 export declare const SIZE: string[];
+export declare const COLUMN_SIZE: string[];
 export declare const STATUS: string[];
 export declare const COLOR: string[];
 export declare const PLACEMENT_4: readonly ["top", "bottom", "right", "left"];

package/esm/utils/constants.js

@@ -1,4 +1,5 @@
 export var SIZE = ['lg', 'md', 'sm', 'xs'];
+export var COLUMN_SIZE = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
 export var STATUS = ['success', 'warning', 'error', 'info'];
 export var COLOR = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'violet'];
 export var PLACEMENT_4 = ['top', 'bottom', 'right', 'left'];

package/esm/utils/stringToObject.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (value: any, labelKey?: string | undefined, valueKey?: string | undefined) => object | null;
+declare const _default: (value: any, labelKey?: string, valueKey?: string) => object | null;
 export default _default;

package/esm/utils/tplTransform.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-declare const _default: (pattern: string, ...data: any[]) => React.ReactNode;
 /**
  * tplTransform('Show {0} data', <i>100</i>);
  * output:
  * Show <span><i>100</i></span> data
  */
+declare const _default: (pattern: string, ...data: any[]) => React.ReactNode;
 export default _default;

package/esm/utils/treeUtils.d.ts

@@ -70,7 +70,7 @@ export declare function filterNodesOfTree(data: any, check: any): TreeNodeType[]
  * @param isSearching - component is in Searching
  * @returns
  */
-export declare const getFocusableItems: (filteredData: ItemDataType[], props: Required<Pick<PartialTreeProps, 'disabledItemValues' | 'valueKey' | 'childrenKey' | 'expandItemValues'>>, isSearching?: boolean | undefined) => TreeNodeType[];
+export declare const getFocusableItems: (filteredData: ItemDataType[], props: Required<Pick<PartialTreeProps, 'disabledItemValues' | 'valueKey' | 'childrenKey' | 'expandItemValues'>>, isSearching?: boolean) => TreeNodeType[];
 /**
  * return all focusable Item and active Element index
  * @param focusItemValue
@@ -190,7 +190,7 @@ interface UnSerializeListProps {
 export declare function useFlattenTreeData({ data, labelKey, valueKey, childrenKey, uncheckableItemValues, callback }: FlattenTreeDataProps): {
     forceUpdate: () => void;
     flattenNodes: TreeNodesType;
-    flattenTreeData: (treeData: TreeNodeType[], ref: string, parent?: TreeNodeType | undefined, layer?: any) => never[] | undefined;
+    flattenTreeData: (treeData: TreeNodeType[], ref: string, parent?: TreeNodeType, layer?: any) => never[] | undefined;
     serializeListOnlyParent: (nodes: TreeNodesType, key: string) => (string | number)[];
     unSerializeList: ({ nodes, key, value, cascade, uncheckableItemValues }: UnSerializeListProps) => void;
     formatVirtualizedTreeData: (nodes: TreeNodesType, data: any[], expandItemValues: ItemDataType[], options: {
@@ -203,7 +203,7 @@ export declare function useFlattenTreeData({ data, labelKey, valueKey, childrenK
  */
 export declare function useTreeNodeRefs(): {
     treeNodesRefs: {};
-    saveTreeNodeRef: (ref: React.Ref<any>, refKey?: string | undefined) => void;
+    saveTreeNodeRef: (ref: React.Ref<any>, refKey?: string) => void;
 };
 interface TreeSearchProps {
     labelKey: string;

package/esm/utils/useCustom.d.ts

@@ -3,5 +3,5 @@ import { CustomValue } from '../CustomProvider/CustomProvider';
  * A hook to get custom configuration of `<CustomProvider>`
  * @param keys
  */
-declare function useCustom<T = any>(keys: string | string[], overrideLocale?: any): CustomValue<T>;
+declare function useCustom<T = any>(keys?: string | string[], overrideLocale?: any): CustomValue<T>;
 export default useCustom;

package/esm/utils/useCustom.js

@@ -29,11 +29,12 @@ function useCustom(keys, overrideLocale) {
       _useContext$rtl = _useContext.rtl,
       rtl = _useContext$rtl === void 0 ? getDefaultRTL() : _useContext$rtl,
       formatDate = _useContext.formatDate,
-      parseDate = _useContext.parseDate;
+      parseDate = _useContext.parseDate,
+      toasters = _useContext.toasters;
 
-  var componentLocale = _extends({}, locale === null || locale === void 0 ? void 0 : locale.common, typeof keys === 'string' ? locale === null || locale === void 0 ? void 0 : locale[keys] : mergeObject(keys.map(function (key) {
+  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) {
@@ -57,6 +58,7 @@ function useCustom(keys, overrideLocale) {
   return {
     locale: componentLocale,
     rtl: rtl,
+    toasters: toasters,
     formatDate: formatDate || defaultFormatDate,
     parseDate: parseDate || defaultParseDate
   };

package/esm/utils/useFocus.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 export default function useFocus<E extends HTMLElement>(elementRef: React.RefObject<E>): {
     grab: () => void;
-    release: (options?: FocusOptions | undefined) => void;
+    release: (options?: FocusOptions) => void;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "5.13.1",
+  "version": "5.14.0",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",

package/styles/color-modes/light.less

@@ -120,8 +120,8 @@
 
   // Dropdown
   --rs-dropdown-divider: @B200;
-  --rs-dropdown-item-bg-hover: @H050;
-  --rs-dropdown-item-bg-active: fade(@H050, 50);
+  --rs-dropdown-item-bg-hover: fade(@H100, 50%);
+  --rs-dropdown-item-bg-active: @H050;
   --rs-dropdown-item-text-active: @H700;
   --rs-dropdown-header-text: @B500;
   --rs-dropdown-shadow: 0 0 10px rgba(0, 0, 0, 0.06), 0 4px 4px rgba(0, 0, 0, 0.12);

package/styles/variables.less

@@ -23,17 +23,25 @@
 // Media queries breakpoints
 // Define the breakpoints at which your layout will change, adapting to different screen sizes.
 
-// Extra small screen / phone
-// @screen-xs
-@screen-phone:        480px;
+// Small screen / phone
+// @screen-sm
+@screen-sm:      576px;
 
 // Medium screen / desktop
 // @screen-md
-@screen-desktop:      992px;
+@screen-md:      768px;
 
 // Large screen / wide desktop
 // @screen-lg
-@screen-lg-desktop:   1200px;
+@screen-lg:      992px;
+
+// Extra large devices / extra wide desktop
+// @screen-xl
+@screen-xl:      1200px;
+
+// Extra extra large devices / ultra wide desktop
+// @screen-xxl
+@screen-xxl:     1400px;
 
 
 // Grid system
@@ -48,16 +56,24 @@
 // Define the maximum width of `.container` for different screen sizes.
 
 // Small screen / phone / tablet
-@container-phone:         (480px + @grid-gutter-width);
-@container-sm:            @container-phone;
+@container-phone:                      (540px + @grid-gutter-width);
+@container-sm:                         @container-phone;
 
 // Medium screen / desktop
-@container-desktop:       (940px + @grid-gutter-width);
-@container-md:            @container-desktop;
+@container-desktop:                    (720px + @grid-gutter-width);
+@container-md:                         @container-desktop;
 
 // Large screen / wide desktop
-@container-large-desktop: (1140px + @grid-gutter-width);
-@container-lg:            @container-large-desktop;
+@container-large-desktop:              (960px + @grid-gutter-width);
+@container-lg:                         @container-large-desktop;
+
+// Extra large devices / ultra wide desktop
+@container-extra-large-desktop:        (1140px + @grid-gutter-width);
+@container-xl:                         @container-large-desktop;
+
+// Extra large devices / ultra wide desktop
+@container-extra-extra-large-desktop:  (1320px + @grid-gutter-width);
+@container-xxl:                        @container-large-desktop;
 
 // Color system
 
@@ -199,7 +215,6 @@
 @table-header-sort-wrapper-margin-left: 5px;
 
 @table-column-resize-spanner-width:                 3px;
-@table-column-resize-spanner-gap-width:             3px;
 @table-column-resize-spanner-triangle-side-length:  3px;
 
 @table-body-content-padding-vertical:   13px; // @deprecated use @table-cell-padding-y instead
@@ -323,6 +338,9 @@
 @dropdown-divider-bg:         @divider-border-color;
 @dropdown-shadow:             0 0 10px rgba(0, 0, 0, 0.06), 0 4px 4px rgba(0, 0, 0, 0.12);
 
+@dropdown-menu-radius:              @border-radius;
+@dropdown-menu-padding-y:           @dropdown-menu-radius;
+
 @dropdown-item-padding-vertical:    8px; // @deprecated use @dropdown-item-padding-y instead
 @dropdown-item-padding-horizontal:  12px; // @deprecated use @dropdown-item-padding-x instead