rsuite 5.23.2 → 5.23.3

package/esm/AutoComplete/utils.d.ts

@@ -1,3 +1,4 @@
-import { ItemDataType } from '../@types/common';
 export declare function transformData(data: any[]): any[];
-export declare const shouldDisplay: (filterBy: ((value: string, item: ItemDataType) => boolean) | undefined, value: any) => (item: any) => boolean;
+export declare const shouldDisplay: <TItem extends {
+    label: string;
+}>(filterBy: ((value: string, item: TItem) => boolean) | undefined, value: string) => (item: TItem) => boolean;

package/esm/AutoComplete/utils.js

@@ -27,7 +27,7 @@ export var shouldDisplay = function shouldDisplay(filterBy, value) {
       return false;
     }
 
-    var keyword = (value || '').toLocaleLowerCase();
+    var keyword = value.toLocaleLowerCase();
     return ("" + item.label).toLocaleLowerCase().indexOf(keyword) >= 0;
   };
 };

package/esm/ButtonToolbar/ButtonToolbar.d.ts

@@ -1,4 +1,5 @@
 import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
+import Stack from '../Stack';
 export interface ButtonToolbarProps extends WithAsProps {
     /**
      * The ARIA role describing the button toolbar. Generally the default
@@ -7,5 +8,5 @@ export interface ButtonToolbarProps extends WithAsProps {
      */
     role?: string;
 }
-declare const ButtonToolbar: RsRefForwardingComponent<'div', ButtonToolbarProps>;
+declare const ButtonToolbar: RsRefForwardingComponent<typeof Stack, ButtonToolbarProps>;
 export default ButtonToolbar;

package/esm/ButtonToolbar/ButtonToolbar.js

@@ -3,22 +3,29 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useClassNames } from '../utils';
+import Stack from '../Stack';
 var ButtonToolbar = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var className = props.className,
       _props$classPrefix = props.classPrefix,
       classPrefix = _props$classPrefix === void 0 ? 'btn-toolbar' : _props$classPrefix,
       _props$as = props.as,
-      Component = _props$as === void 0 ? 'div' : _props$as,
+      Component = _props$as === void 0 ? Stack : _props$as,
       _props$role = props.role,
       role = _props$role === void 0 ? 'toolbar' : _props$role,
       rest = _objectWithoutPropertiesLoose(props, ["className", "classPrefix", "as", "role"]);
 
+  var stackProps = Component === Stack ? {
+    wrap: true,
+    spacing: 10,
+    childrenRenderMode: 'clone'
+  } : null;
+
   var _useClassNames = useClassNames(classPrefix),
       withClassPrefix = _useClassNames.withClassPrefix,
       merge = _useClassNames.merge;
 
   var classes = merge(className, withClassPrefix());
-  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Component, _extends({}, stackProps, rest, {
     role: role,
     ref: ref,
     className: classes

package/esm/Cascader/Cascader.js

@@ -432,7 +432,8 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       classPrefix: 'picker-cascader-menu',
       cascadeData: columnData,
       cascadePaths: selectedPaths,
-      activeItemValue: value,
+      activeItemValue: value // FIXME make onSelect generic
+      ,
       onSelect: handleSelect,
       renderMenu: renderMenu,
       renderMenuItem: renderMenuItem

package/esm/Cascader/utils.d.ts

@@ -1,18 +1,23 @@
 /// <reference types="react" />
-import { CascaderProps } from './Cascader';
-import { ItemDataType } from '../@types/common';
-export declare function getColumnsAndPaths<T extends ItemDataType>(data: T[], value: any, options: any): {
-    columns: ItemDataType<string | number>[][];
+export declare function getColumnsAndPaths<T extends Record<string, unknown>>(data: T[], value: any, options: any): {
+    columns: T[][];
     paths: T[];
 };
-export declare function usePaths(props: CascaderProps): {
+declare type UsePathsParams<T> = {
+    data: T[];
+    valueKey: string;
+    childrenKey: string;
+    value: unknown;
+};
+export declare function usePaths<T extends Record<string, unknown>>(params: UsePathsParams<T>): {
     enforceUpdate: (nextValue: any, isAttachChildren?: boolean) => void;
-    columnData: ItemDataType<string | number>[][];
-    valueToPaths: ItemDataType<string | number>[];
-    selectedPaths: ItemDataType<string | number>[];
-    setValueToPaths: import("react").Dispatch<import("react").SetStateAction<ItemDataType<string | number>[]>>;
-    setColumnData: import("react").Dispatch<import("react").SetStateAction<ItemDataType<string | number>[][]>>;
-    setSelectedPaths: import("react").Dispatch<import("react").SetStateAction<ItemDataType<string | number>[]>>;
-    addColumn: (column: ItemDataType[], index: number) => void;
+    columnData: T[][];
+    valueToPaths: T[];
+    selectedPaths: T[];
+    setValueToPaths: import("react").Dispatch<import("react").SetStateAction<T[]>>;
+    setColumnData: import("react").Dispatch<import("react").SetStateAction<T[][]>>;
+    setSelectedPaths: import("react").Dispatch<import("react").SetStateAction<T[]>>;
+    addColumn: (column: T[], index: number) => void;
     romoveColumnByIndex: (index: number) => void;
 };
+export {};

package/esm/Cascader/utils.js

@@ -72,11 +72,11 @@ export function getColumnsAndPaths(data, value, options) {
     paths: paths
   };
 }
-export function usePaths(props) {
-  var data = props.data,
-      valueKey = props.valueKey,
-      childrenKey = props.childrenKey,
-      value = props.value;
+export function usePaths(params) {
+  var data = params.data,
+      valueKey = params.valueKey,
+      childrenKey = params.childrenKey,
+      value = params.value;
 
   var _useMemo = useMemo(function () {
     return getColumnsAndPaths(data, value, {

package/esm/MultiCascader/utils.d.ts

@@ -9,25 +9,28 @@ interface ItemKeys {
     labelKey: string;
     childrenKey: string;
 }
+declare type MayHasParent<T extends Record<string, unknown>> = T & {
+    parent?: MayHasParent<T>;
+};
 /**
  * Get all parents of a node
  * @param node
  */
-export declare const getParents: (node: ItemType) => ItemType[];
+export declare const getParents: <T extends Record<string, unknown>>(node: MayHasParent<T>) => MayHasParent<T>[];
 /**
  * Check if any child nodes are selected.
  * @param node
  * @param value
  * @param itemKeys
  */
-export declare const isSomeChildChecked: (node: ItemDataType, value: ValueType, itemKeys: Omit<ItemKeys, 'labelKey'>) => any;
+export declare const isSomeChildChecked: <T extends Record<string, unknown>>(node: T, value: ValueType, itemKeys: Omit<ItemKeys, 'labelKey'>) => any;
 /**
  * Check if the parent is selected.
  * @param node
  * @param value
  * @param itemKeys
  */
-export declare const isSomeParentChecked: (node: ItemDataType, value: ValueType, itemKeys: Pick<ItemKeys, 'valueKey'>) => any;
+export declare const isSomeParentChecked: <T extends Record<string, unknown>>(node: MayHasParent<T>, value: ValueType, itemKeys: Pick<ItemKeys, 'valueKey'>) => any;
 export declare const getOtherItemValuesByUnselectChild: <T>(itemNode: ItemType, value: any, itemKeys: Omit<ItemKeys, 'labelKey'>) => T[];
 /**
  * Remove the values of all children.
@@ -37,20 +40,20 @@ export declare const removeAllChildrenValue: <T>(value: T[], item: ItemType, ite
  * A hook to flatten tree structure data
  * @param data
  */
-export declare function useFlattenData(data: ItemDataType[], itemKeys: ItemKeys): {
-    addFlattenData: (children: ItemDataType[], parent: ItemDataType) => void;
-    flattenData: ItemDataType<string | number>[];
+export declare function useFlattenData<T>(data: T[], itemKeys: ItemKeys): {
+    addFlattenData: (children: T[], parent: T) => void;
+    flattenData: T[];
 };
 /**
  * A hook for column data
  * @param flattenData
  */
-export declare function useColumnData(flattenData: ItemType[]): {
-    columnData: ItemDataType<string | number>[][];
-    addColumn: (column: ItemDataType[], index: number) => void;
+export declare function useColumnData<T extends MayHasParent<Record<string, unknown>>>(flattenData: T[]): {
+    columnData: T[][];
+    addColumn: (column: T[], index: number) => void;
     romoveColumnByIndex: (index: number) => void;
-    setColumnData: import("react").Dispatch<import("react").SetStateAction<ItemDataType<string | number>[][]>>;
-    enforceUpdateColumnData: (nextData: ItemDataType[]) => void;
+    setColumnData: import("react").Dispatch<import("react").SetStateAction<T[][]>>;
+    enforceUpdateColumnData: (nextData: T[]) => void;
 };
 /**
  * A hook that converts the value into a cascading value

package/esm/Picker/utils.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { OverlayTriggerHandle } from './PickerToggleTrigger';
-import { TypeAttributes, ItemDataType } from '../@types/common';
+import { TypeAttributes } from '../@types/common';
 import type { ListHandle } from '../Windowing';
 export interface NodeKeys {
     valueKey: string;
@@ -86,24 +86,25 @@ export interface ToggleKeyDownEventProps {
  * @param props
  */
 export declare const useToggleKeyDownEvent: (props: ToggleKeyDownEventProps) => (event: React.KeyboardEvent) => void;
-export interface SearchProps {
+export interface SearchProps<TItem extends Record<string, unknown>, TLabel> {
     labelKey: string;
-    data: ItemDataType[];
-    searchBy?: (keyword: any, label: any, item: any) => boolean;
-    callback?: (keyword: string, data: ItemDataType[], event: React.SyntheticEvent) => void;
+    data: TItem[];
+    searchBy?: (keyword: string, label: TLabel, item: TItem) => boolean;
+    callback?: (keyword: string, data: TItem[], event: React.SyntheticEvent) => void;
 }
+declare type UseSearchResult<TItem extends Record<string, unknown>> = {
+    searchKeyword: string;
+    filteredData: TItem[];
+    updateFilteredData: (nextData: TItem[]) => void;
+    setSearchKeyword: (value: string) => void;
+    checkShouldDisplay: (item: TItem, keyword?: string) => boolean;
+    handleSearch: (searchKeyword: string, event: React.SyntheticEvent) => void;
+};
 /**
  * A hook that handles search filter options
  * @param props
  */
-export declare function useSearch(props: SearchProps): {
-    searchKeyword: string;
-    filteredData: import("../CheckTreePicker/utils").TreeNodeType[];
-    updateFilteredData: (nextData: ItemDataType[]) => void;
-    setSearchKeyword: React.Dispatch<React.SetStateAction<string>>;
-    checkShouldDisplay: (item: ItemDataType, keyword?: string) => boolean;
-    handleSearch: (searchKeyword: string, event: React.SyntheticEvent) => void;
-};
+export declare function useSearch<TItem extends Record<string, unknown>, TLabel>(props: SearchProps<TItem, TLabel>): UseSearchResult<TItem>;
 export interface PickerDependentParameters {
     triggerRef?: React.RefObject<OverlayTriggerHandle>;
     rootRef?: React.RefObject<HTMLElement>;
@@ -116,3 +117,4 @@ export interface PickerDependentParameters {
  * A hook of the exposed method of Picker
  */
 export declare function usePublicMethods(ref: any, parmas: PickerDependentParameters): void;
+export {};

package/esm/Stack/Stack.d.ts

@@ -22,6 +22,10 @@ export interface StackProps extends WithAsProps {
      * Define whether the children in the stack are forced onto one line or can wrap onto multiple lines
      */
     wrap?: boolean;
+    /**
+     * The render mode of the children.
+     */
+    childrenRenderMode?: 'clone' | 'wrap';
 }
 export interface StackComponent extends RsRefForwardingComponent<'div', StackProps> {
     Item: typeof StackItem;

package/esm/Stack/Stack.js

@@ -13,6 +13,8 @@ var Stack = /*#__PURE__*/React.forwardRef(function (props, ref) {
       alignItems = _props$alignItems === void 0 ? 'center' : _props$alignItems,
       _props$classPrefix = props.classPrefix,
       classPrefix = _props$classPrefix === void 0 ? 'stack' : _props$classPrefix,
+      _props$childrenRender = props.childrenRenderMode,
+      childrenRenderMode = _props$childrenRender === void 0 ? 'wrap' : _props$childrenRender,
       className = props.className,
       children = props.children,
       direction = props.direction,
@@ -21,7 +23,7 @@ var Stack = /*#__PURE__*/React.forwardRef(function (props, ref) {
       divider = props.divider,
       style = props.style,
       wrap = props.wrap,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "alignItems", "classPrefix", "className", "children", "direction", "justifyContent", "spacing", "divider", "style", "wrap"]);
+      rest = _objectWithoutPropertiesLoose(props, ["as", "alignItems", "classPrefix", "childrenRenderMode", "className", "children", "direction", "justifyContent", "spacing", "divider", "style", "wrap"]);
 
   var _useCustom = useCustom('Stack'),
       rtl = _useCustom.rtl;
@@ -32,16 +34,16 @@ var Stack = /*#__PURE__*/React.forwardRef(function (props, ref) {
       prefix = _useClassNames.prefix;
 
   var classes = merge(className, withClassPrefix());
-  var isSupportGridGap = isSupportFlexGap();
-  var gridGap = Array.isArray(spacing) ? spacing : [spacing, 0];
-  var itemStyles = (_itemStyles = {}, _itemStyles[rtl ? 'marginLeft' : 'marginRight'] = gridGap[0], _itemStyles.marginBottom = gridGap[1], _itemStyles);
+  var isSupportGap = isSupportFlexGap();
+  var flexGap = Array.isArray(spacing) ? spacing : [spacing, spacing];
+  var itemStyles = (_itemStyles = {}, _itemStyles[rtl ? 'marginLeft' : 'marginRight'] = flexGap[0], _itemStyles.marginBottom = flexGap[1], _itemStyles);
 
   var styles = _extends({
     alignItems: alignItems,
     justifyContent: justifyContent,
     flexDirection: direction,
     flexWrap: wrap ? 'wrap' : undefined,
-    gap: isSupportGridGap ? spacing : undefined
+    gap: isSupportGap ? spacing : undefined
   }, style);
   /*
    * toArray remove undefined, null and boolean
@@ -55,13 +57,13 @@ var Stack = /*#__PURE__*/React.forwardRef(function (props, ref) {
     className: classes,
     style: styles
   }), React.Children.map(filterChildren, function (child, index) {
-    var childNode = child.type !== StackItem ? /*#__PURE__*/React.createElement(StackItem, {
+    var childNode = childrenRenderMode === 'wrap' && child.type !== StackItem ? /*#__PURE__*/React.createElement(StackItem, {
       key: index,
       className: prefix('item'),
-      style: !isSupportGridGap ? itemStyles : undefined
+      style: !isSupportGap ? itemStyles : undefined
     }, child) : /*#__PURE__*/React.cloneElement(child, {
       className: merge(prefix('item'), child.props.className),
-      style: !isSupportGridGap ? _extends({}, itemStyles, child.props.style) : child.props.style
+      style: !isSupportGap ? _extends({}, itemStyles, child.props.style) : child.props.style
     });
     return [childNode, index < count - 1 ? divider : null];
   }));

package/esm/utils/treeUtils.d.ts

@@ -2,7 +2,6 @@ import React from 'react';
 import { TreeNodeType, TreeNodesType } from '../CheckTreePicker/utils';
 import { TREE_NODE_DROP_POSITION } from '../utils';
 import { CheckTreePickerProps } from '../CheckTreePicker/CheckTreePicker';
-import { ItemDataType } from '../@types/common';
 import { TreePickerProps } from '../TreePicker/TreePicker';
 import { ListHandle } from '../Windowing';
 declare type PartialTreeProps = Partial<TreePickerProps | CheckTreePickerProps>;
@@ -11,14 +10,14 @@ declare type PartialTreeProps = Partial<TreePickerProps | CheckTreePickerProps>;
  * @param {*} expandItemValues
  * @param {*} parentKeys
  */
-export declare function shouldShowNodeByParentExpanded(expandItemValues?: any[], parentKeys?: any[]): boolean;
+export declare function shouldShowNodeByParentExpanded<T>(expandItemValues?: T[], parentKeys?: T[]): boolean;
 /**
  * flatten tree structure to array
  * @param {*} tree
  * @param {*} childrenKey
  * @param {*} executor
  */
-export declare function flattenTree(tree: any[], childrenKey?: string, executor?: (node: any, index: number) => any): any[];
+export declare function flattenTree<TItem>(tree: TItem[], childrenKey?: string, executor?: (node: any, index: number) => any): TItem[];
 /**
  * get all ancestor nodes of given node
  * @param {*} node
@@ -30,7 +29,7 @@ export declare function getNodeParents(node: any, parentKey?: string, valueKey?:
  * @param node
  * @param valueKey
  */
-export declare function getNodeParentKeys(nodes: TreeNodesType, node: TreeNodeType, valueKey: string): TreeNodeType[];
+export declare function getNodeParentKeys<T>(nodes: TreeNodesType, node: TreeNodeType, valueKey: string): T[];
 export declare function hasVisibleChildren(node: TreeNodeType, childrenKey: string): any;
 /**
  * shallow equal array
@@ -38,7 +37,7 @@ export declare function hasVisibleChildren(node: TreeNodeType, childrenKey: stri
  * @param b
  */
 export declare function compareArray(a: any[], b: any[]): boolean;
-export declare function getDefaultExpandItemValues(data: ItemDataType[], props: Required<Pick<TreePickerProps, 'defaultExpandAll' | 'valueKey' | 'childrenKey' | 'defaultExpandItemValues'>>): any[];
+export declare function getDefaultExpandItemValues<TItem>(data: TItem[], props: Required<Pick<TreePickerProps, 'defaultExpandAll' | 'valueKey' | 'childrenKey' | 'defaultExpandItemValues'>>): any[];
 /**
  * 获取 expandItemValues 的 value
  * @param props
@@ -61,7 +60,10 @@ export declare function createUpdateTreeDataFunction(params: any, { valueKey, ch
     childrenKey: any;
 }): (tree: any[]) => any[];
 export declare function findNodeOfTree(data: any, check: any): any;
-export declare function filterNodesOfTree(data: any, check: any): TreeNodeType[];
+declare type HasChildren<T extends Record<string, unknown>> = T & {
+    children?: readonly HasChildren<T>[];
+};
+export declare function filterNodesOfTree<TItem extends HasChildren<Record<string, unknown>>>(data: readonly TItem[], check: (item: TItem) => boolean): TItem[];
 /**
  * get all focusable items
  * exclude not visible and disabled node
@@ -70,7 +72,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) => TreeNodeType[];
+export declare const getFocusableItems: <TItem extends TreeNodeType>(filteredData: TItem[], props: Required<Pick<PartialTreeProps, 'disabledItemValues' | 'valueKey' | 'childrenKey' | 'expandItemValues'>>, isSearching?: boolean) => TItem[];
 /**
  * return all focusable Item and active Element index
  * @param focusItemValue
@@ -150,7 +152,13 @@ export { getTreeActiveNode };
  * toggle tree node
  * @param param0
  */
-export declare function toggleExpand({ node, isExpand, expandItemValues, valueKey }: any): ItemDataType<string | number>[];
+export declare function toggleExpand<T>({ node, isExpand, expandItemValues, valueKey }: ToggleExpandOptions<T>): T[];
+declare type ToggleExpandOptions<T> = {
+    node: Record<string, unknown>;
+    isExpand: boolean;
+    expandItemValues: T[];
+    valueKey: string;
+};
 export declare function getTreeNodeTitle(label: any): string | undefined;
 /**
  * get all children from flattenNodes object by given parent node
@@ -158,12 +166,12 @@ export declare function getTreeNodeTitle(label: any): string | undefined;
  * @param parent
  */
 export declare function getChildrenByFlattenNodes(nodes: TreeNodesType, parent: TreeNodeType): TreeNodeType[];
-export declare function useTreeDrag(): {
-    dragNode: ItemDataType<string | number> | null;
+export declare function useTreeDrag<T>(): {
+    dragNode: T | null;
     dragOverNodeKey: null;
     dragNodeKeys: (string | number)[];
     dropNodePosition: TREE_NODE_DROP_POSITION | null;
-    setDragNode: (node: ItemDataType | null) => void;
+    setDragNode: (node: T | null) => void;
     setDragOverNodeKey: React.Dispatch<React.SetStateAction<null>>;
     setDragNodeKeys: React.Dispatch<React.SetStateAction<(string | number)[]>>;
     setDropNodePosition: React.Dispatch<React.SetStateAction<TREE_NODE_DROP_POSITION | null>>;
@@ -193,7 +201,7 @@ export declare function useFlattenTreeData({ data, labelKey, valueKey, childrenK
     flattenTreeData: (treeData: TreeNodeType[], 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: {
+    formatVirtualizedTreeData: (nodes: TreeNodesType, data: any[], expandItemValues: unknown[], options: {
         cascade?: boolean;
         searchKeyword?: string;
     }) => TreeNodeType[];
@@ -205,28 +213,28 @@ export declare function useTreeNodeRefs(): {
     treeNodesRefs: {};
     saveTreeNodeRef: (ref: React.Ref<any>, refKey?: string) => void;
 };
-interface TreeSearchProps {
+interface TreeSearchProps<T> {
     labelKey: string;
     childrenKey: string;
     searchKeyword?: string;
-    data: ItemDataType[];
+    data: T[];
     searchBy?: (keyword: any, label: any, item: any) => boolean;
-    callback?: (keyword: string, data: ItemDataType[], event: React.SyntheticEvent) => void;
+    callback?: (keyword: string, data: T[], event: React.SyntheticEvent) => void;
 }
 /**
  * A hook that handles tree search filter options
  * @param props
  */
-export declare function useTreeSearch<T extends HTMLElement = HTMLInputElement>(props: TreeSearchProps): {
+export declare function useTreeSearch<T>(props: TreeSearchProps<T>): {
     searchKeywordState: string;
-    filteredData: ItemDataType<string | number>[];
-    setFilteredData: (data: ItemDataType[], searchKeyword: string) => void;
+    filteredData: T[];
+    setFilteredData: (data: T[], searchKeyword: string) => void;
     setSearchKeyword: React.Dispatch<React.SetStateAction<string>>;
-    handleSearch: (searchKeyword: string, event: React.ChangeEvent<T>) => void;
+    handleSearch: (searchKeyword: string, event: React.ChangeEvent) => void;
 };
-export declare function useGetTreeNodeChildren(treeData: ItemDataType[], valueKey: string, childrenKey: string): {
-    data: ItemDataType<string | number>[];
-    setData: React.Dispatch<React.SetStateAction<ItemDataType<string | number>[]>>;
+export declare function useGetTreeNodeChildren<T extends Record<string, unknown>>(treeData: T[], valueKey: string, childrenKey: string): {
+    data: T[];
+    setData: React.Dispatch<React.SetStateAction<T[]>>;
     loadingNodeValues: never[];
     loadChildren: (node: any, getChildren: any) => void;
 };

package/package.json

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

package/styles/variables.less

@@ -520,7 +520,8 @@
 
 @modal-close-btn-size:          @font-size-small;
 @modal-close-btn-line-height:   @line-height-small;
-@modal-close-btn-color:         var(--rs-text-primary);
+@modal-close-btn-color:         var(--rs-text-secondary);
+@modal-close-btn-hover-color:   var(--rs-text-primary);
 
 // Modal sizes
 @modal-lg: 968px;
@@ -540,7 +541,7 @@
 
 @drawer-close-btn-size:         @font-size-small;
 @drawer-close-btn-line-height:  @line-height-small;
-@drawer-close-btn-color:        @modal-close-btn-color;
+@drawer-close-btn-color:        var(--rs-text-primary);
 
 // Drawer sizes
 @drawer-horizontal-lg: @modal-lg;