rsuite 5.60.1 → 5.61.0

package/TreePicker/styles/index.less

@@ -1,246 +1,16 @@
-@import '../../styles/common';
-@import '../../styles/mixins/listbox';
-@import '../../internals/Picker/styles/mixin';
-@import 'mixin';
-
-@custom-picker-tree-node-padding-vertical: @picker-tree-node-padding-vertical - 2px;
-// Tree Picker
-// ----------------------
-
-.rs-tree {
-  max-height: 360px;
-  height: 100%;
-  overflow-y: auto;
-  flex: 1 1 auto;
-
-  &.rs-tree-virtualized {
-    overflow: hidden;
-  }
-
-  &-drag-preview {
-    position: absolute;
-    top: 0;
-    color: var(--rs-text-primary);
-    background-color: var(--rs-bg-overlay);
-    display: inline-block;
-    margin: 0;
-    padding: @picker-tree-node-padding-vertical @picker-tree-node-padding-horizontal;
-    border-radius: 6px;
-    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);
-    z-index: -1;
-  }
-}
-
-.rs-tree-node {
-  position: relative;
-  // Clear host whitespace
-  font-size: 0;
-  text-align: left;
-  margin: 0 0 4px 0;
-
-  &-label {
-    position: relative;
-    margin: 0;
-    //text gap
-    padding: 1px 1px 1px (@picker-tree-arrow-down-width + 8px);
-    display: inline-block;
-    cursor: pointer;
-    font-size: @picker-tree-node-font-size;
-    line-height: @picker-tree-node-line-height;
-
-    &:focus-visible {
-      .rs-tree-node-label-content {
-        .focus-ring();
-      }
-    }
-
-    &-content {
-      padding: 6px 8px;
-      display: inline-block;
-      border-radius: 6px;
-
-      &:hover,
-      &:focus,
-      &&-focus {
-        .listbox-option-active();
-      }
-    }
-  }
-
-  &-active &-label-content {
-    .picker-item-active();
-
-    color: var(--rs-text-link);
-    background-color: var(--rs-listbox-option-selected-bg);
-  }
-
-  &-drag-over {
-    background-color: var(--rs-listbox-option-hover-bg);
-  }
-
-  &-dragging {
-    outline: 1px dashed var(--rs-primary-500);
-  }
-
-  &-drag-over-top {
-    &.rs-tree-node-label-content {
-      border-top: 2px solid var(--rs-text-link) !important;
-
-      &::after {
-        content: '';
-        position: absolute;
-        top: -2px;
-        left: 12px;
-        width: 0;
-        height: 0;
-        border-left: 6px solid var(--rs-text-link);
-        border-top: 3px solid transparent;
-        border-bottom: 3px solid transparent;
-      }
-    }
-  }
-
-  &-drag-over-bottom {
-    &.rs-tree-node-label-content {
-      border-bottom: 2px solid var(--rs-text-link) !important;
-
-      &::after {
-        content: '';
-        position: absolute;
-        bottom: -2px;
-        left: 12px;
-        width: 0;
-        height: 0;
-        border-left: 6px solid var(--rs-text-link);
-        border-top: 3px solid transparent;
-        border-bottom: 3px solid transparent;
-      }
-    }
-  }
-
-  &-drag-disabled {
-    &.rs-tree-node-label-content {
-      cursor: not-allowed;
-    }
-  }
-
-  &-disabled {
-    color: var(--rs-listbox-option-disabled-text);
-    cursor: @cursor-disabled;
-
-    > .rs-tree-node-label > .rs-tree-node-label-content {
-      cursor: @cursor-disabled;
-      color: var(--rs-listbox-option-disabled-text);
-
-      &,
-      &:hover {
-        background-color: transparent;
-      }
-    }
-  }
-
-  &-disabled&-active > .rs-tree-node-label > .rs-tree-node-label-content {
-    &,
-    &:hover {
-      color: var(--rs-listbox-option-disabled-selected-text);
-    }
-  }
-
-  &:not(&-disabled):focus > .rs-tree-node-label > .rs-tree-node-label-content {
-    background-color: var(--rs-listbox-option-selected-bg);
-  }
-
-  &:not(&-disabled) > .rs-tree-node-label:focus > .rs-tree-node-label-content {
-    background-color: var(--rs-listbox-option-selected-bg);
-  }
-}
-
-// expand icon
-.rs-tree-node-expand-icon-wrapper {
-  display: inline-block;
-  position: absolute;
-  cursor: pointer;
-  z-index: 1;
-
-  > .rs-tree-node-expand-icon {
-    display: inline-block;
-    padding: @picker-tree-node-padding-vertical 0;
-    padding-right: @picker-tree-arrow-down-gap;
-    height: 36px;
-    font-size: 16px;
-    line-height: @picker-tree-node-line-height;
-    transform: rotate(-90deg) /* rtl: rotate(90deg) translateX(-13px) translateY(-15px) */;
-    transform-origin: 1.5px 14px;
-    margin-top: 6px;
-    user-select: none;
-
-    // expand children tree
-    .rs-tree-open > .rs-tree-node & {
-      transform: rotate(0deg);
-      margin-left: 0;
-      margin-top: 0;
-    }
-  }
-
-  > .rs-tree-node-expanded {
-    transform: rotate(0deg);
-    margin-left: 0;
-    margin-top: 0;
-  }
-
-  > .rs-tree-node-custom-icon,
-  > .rs-tree-node-loading-icon {
-    .node-item-prepend-icon();
-  }
-}
-
-// node children
-.rs-tree-node-children {
-  > .rs-tree-group {
-    position: relative;
-    display: none;
-
-    .rs-tree-open& {
-      display: block;
-    }
-  }
-}
-
-.rs-tree-indent-line {
-  height: 100%;
-  width: 1px;
-  position: absolute;
-  top: 0;
-  margin-left: -13px;
-  border-left: 1px solid rgba(0, 0, 0, 0.1);
-}
+@import '../../Tree/styles/index.less';
 
 .rs-picker-popup {
   .rs-tree {
-    padding-right: @picker-menu-padding;
-
     &.rs-tree-virtualized {
       padding: 0;
     }
 
     &-node {
       margin: 0;
-
-      > .rs-tree-node-label > .rs-tree-node-label-content {
-        .ellipsis();
-
-        display: block;
-        line-height: @line-height-computed;
-      }
     }
   }
+  .rs-tree-view {
+    padding: 2px 4px;
+  }
 }
-
-/* rtl:begin:ignore */
-
-[dir='rtl'] .rs-tree-node-expand-icon-wrapper {
-  right: 0;
-  padding-right: inherit;
-}
-
-/* rtl:end:ignore */

package/Uploader/styles/index.css

@@ -51,7 +51,7 @@
   --rs-btn-default-active-bg: var(--rs-gray-300);
   --rs-btn-default-active-text: var(--rs-gray-900);
   --rs-btn-default-disabled-bg: var(--rs-gray-50);
-  --rs-btn-default-disabled-text: var(--rs-gray-400);
+  --rs-btn-default-disabled-text: var(--rs-gray-600);
   --rs-btn-primary-bg: var(--rs-primary-500);
   --rs-btn-primary-text: var(--rs-gray-0);
   --rs-btn-primary-hover-bg: var(--rs-primary-600);
@@ -236,7 +236,8 @@
   --rs-btn-default-active-bg: transparent;
   --rs-btn-default-active-text: var(--rs-primary-200);
   --rs-btn-default-disabled-bg: transparent;
-  --rs-btn-default-disabled-text: var(--rs-primary-500);
+  --rs-btn-default-disabled-text: var(--rs-primary-900);
+  --rs-btn-default-disabled-boreder-color: var(--rs-gray-100);
   --rs-btn-primary-bg: var(--rs-primary-500);
   --rs-btn-primary-text: var(--rs-gray-900);
   --rs-btn-primary-hover-bg: var(--rs-primary-400);
@@ -383,14 +384,14 @@
 .rs-btn:disabled,
 .rs-btn.rs-btn-disabled {
   cursor: not-allowed;
-  color: #c5c6c7;
+  color: #8e8e93;
   color: var(--rs-btn-default-disabled-text);
   background-color: #f7f7fa;
   background-color: var(--rs-btn-default-disabled-bg);
 }
 .rs-theme-high-contrast .rs-btn:disabled,
 .rs-theme-high-contrast .rs-btn.rs-btn-disabled {
-  opacity: 0.5;
+  border-color: var(--rs-btn-default-disabled-boreder-color);
 }
 @media not all and (min-resolution: 0.001dpcm) {
   .rs-btn {
@@ -438,7 +439,7 @@
 }
 .rs-theme-high-contrast .rs-btn-primary:disabled,
 .rs-theme-high-contrast .rs-btn-primary.rs-btn-disabled {
-  opacity: 0.5;
+  border-color: var(--rs-btn-default-disabled-boreder-color);
 }
 .rs-btn-subtle {
   color: #575757;
@@ -468,7 +469,7 @@
 }
 .rs-theme-high-contrast .rs-btn-subtle:disabled,
 .rs-theme-high-contrast .rs-btn-subtle.rs-btn-disabled {
-  opacity: 0.5;
+  border-color: var(--rs-btn-default-disabled-boreder-color);
 }
 .rs-btn-link {
   color: #1675e0;
@@ -499,7 +500,7 @@
 }
 .rs-theme-high-contrast .rs-btn-link:disabled,
 .rs-theme-high-contrast .rs-btn-link.rs-btn-disabled {
-  opacity: 0.5;
+  border-color: var(--rs-btn-default-disabled-boreder-color);
 }
 .rs-btn-ghost {
   color: #1675e0;
@@ -541,7 +542,7 @@
 }
 .rs-theme-high-contrast .rs-btn-ghost:disabled,
 .rs-theme-high-contrast .rs-btn-ghost.rs-btn-disabled {
-  opacity: 0.5;
+  border-color: var(--rs-btn-default-disabled-boreder-color);
 }
 .rs-btn-red {
   --rs-btn-primary-bg: var(--rs-red-500);
@@ -1439,14 +1440,14 @@
 .rs-uploader-picture .rs-uploader-trigger-btn:disabled,
 .rs-uploader-picture .rs-uploader-trigger-btn.rs-btn-disabled {
   cursor: not-allowed;
-  color: #c5c6c7;
+  color: #8e8e93;
   color: var(--rs-btn-default-disabled-text);
   background-color: #f7f7fa;
   background-color: var(--rs-btn-default-disabled-bg);
 }
 .rs-theme-high-contrast .rs-uploader-picture .rs-uploader-trigger-btn:disabled,
 .rs-theme-high-contrast .rs-uploader-picture .rs-uploader-trigger-btn.rs-btn-disabled {
-  opacity: 0.5;
+  border-color: var(--rs-btn-default-disabled-boreder-color);
 }
 @media not all and (min-resolution: 0.001dpcm) {
   .rs-uploader-picture .rs-uploader-trigger-btn {
@@ -1477,7 +1478,7 @@
 }
 .rs-theme-high-contrast .rs-uploader-picture .rs-uploader-trigger-btn:disabled,
 .rs-theme-high-contrast .rs-uploader-picture .rs-uploader-trigger-btn.rs-btn-disabled {
-  opacity: 0.5;
+  border-color: var(--rs-btn-default-disabled-boreder-color);
 }
 .rs-uploader-picture .rs-uploader-trigger.rs-uploader-trigger-disabled .rs-uploader-trigger-btn {
   color: #575757 !important;

package/cjs/@types/common.d.ts

@@ -88,6 +88,29 @@ export interface PickerBaseProps<L = any> extends WithAsProps, AnimationEventPro
     /** Custom render extra footer */
     renderExtraFooter?: () => React.ReactNode;
 }
+export interface DeprecatedPickerProps {
+    /**
+     * Custom menu class name
+     * @deprecated Use `popupClassName` instead
+     */
+    menuClassName?: string;
+    /**
+     * Custom menu style
+     * @deprecated Use `popupStyle` instead
+     */
+    menuStyle?: React.CSSProperties;
+    /**
+     * Picker menu auto width
+     *
+     * @deprecated Use `popupAutoWidth` instead
+     */
+    menuAutoWidth?: boolean;
+    /**
+     * Custom render tree
+     * @deprecated Use `renderTree` instead
+     */
+    renderMenu?: (menu: React.ReactNode) => React.ReactNode;
+}
 export interface FormControlBaseProps<ValueType = React.InputHTMLAttributes<HTMLInputElement>['value']> {
     /** Name of the form field */
     name?: string;
@@ -109,14 +132,28 @@ export interface FormControlBaseProps<ValueType = React.InputHTMLAttributes<HTML
     readOnly?: boolean;
 }
 export declare type ToArray<V> = V extends any[] ? V : V[];
+/**
+ * Represents the data properties for a component.
+ */
 export interface DataProps<TData> {
-    /** The data of component */
+    /**
+     * The data of the component.
+     */
     data: TData[];
-    /** Set option value 'key' in 'data' */
+    /**
+     * The key to use for setting the option value in the data.
+     * @default value
+     */
     valueKey?: string;
-    /** Set options to display the 'key' in 'data' */
+    /**
+     * The key to use for displaying the options in the data.
+     * @default label
+     */
     labelKey?: string;
-    /** Set children key in data */
+    /**
+     * The key to use for setting the children in the data.
+     * @default children
+     */
     childrenKey?: string;
 }
 export interface FormControlPickerProps<T = any, L = any, D = Record<string, any>, I = T> extends PickerBaseProps<L>, FormControlBaseProps<T>, DataProps<D> {

package/cjs/AutoComplete/AutoComplete.js

@@ -178,7 +178,8 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       onSelect: handleItemSelect,
       renderMenuItem: renderMenuItem,
       data: items,
-      className: menuClassName
+      className: menuClassName,
+      query: value
     });
     return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {
       ref: (0, _utils.mergeRefs)(overlay, speakerRef),

package/cjs/CascadeTree/CascadeTree.js

@@ -8,8 +8,9 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
-var _treeUtils = require("../utils/treeUtils");
-var _utils = require("../utils");
+var _utils = require("../internals/Tree/utils");
+var _utils2 = require("../Tree/utils");
+var _utils3 = require("../utils");
 var _useMap = require("../utils/useMap");
 var _TreeView = _interopRequireDefault(require("./TreeView"));
 var _SearchView = _interopRequireDefault(require("./SearchView"));
@@ -47,14 +48,14 @@ var CascadeTree = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onChange = props.onChange,
     getChildren = props.getChildren,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "data", "defaultValue", "className", "classPrefix", "childrenKey", "valueKey", "labelKey", "value", "disabledItemValues", "columnWidth", "columnHeight", "searchable", "renderTreeNode", "renderColumn", "onSelect", "onSearch", "onChange", "getChildren"]);
-  var _ref = (0, _utils.useControlled)(valueProp, defaultValue),
+  var _ref = (0, _utils3.useControlled)(valueProp, defaultValue),
     value = _ref[0],
     setValue = _ref[1]; // Store the children of each node
   var childrenMap = (0, _useMap.useMap)();
 
   // Store the parent of each node
   var parentMap = (0, _react.useMemo)(function () {
-    return (0, _treeUtils.getParentMap)(data, function (item) {
+    return (0, _utils.getParentMap)(data, function (item) {
       var _childrenMap$get;
       return (_childrenMap$get = childrenMap.get(item)) !== null && _childrenMap$get !== void 0 ? _childrenMap$get : item[childrenKey];
     });
@@ -62,7 +63,7 @@ var CascadeTree = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
   // Flatten the tree data
   var flattenedData = (0, _react.useMemo)(function () {
-    return (0, _treeUtils.flattenTree)(data, function (item) {
+    return (0, _utils2.flattenTree)(data, function (item) {
       var _childrenMap$get2;
       return (_childrenMap$get2 = childrenMap.get(item)) !== null && _childrenMap$get2 !== void 0 ? _childrenMap$get2 : item[childrenKey];
     });
@@ -111,7 +112,7 @@ var CascadeTree = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }),
     columns = _usePaths.columns,
     pathTowardsActiveItem = _usePaths.pathTowardsActiveItem;
-  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+  var _useClassNames = (0, _utils3.useClassNames)(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge;
   var classes = merge(className, withClassPrefix());
@@ -129,7 +130,7 @@ var CascadeTree = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     searchKeyword = _useSearch.searchKeyword,
     setSearchKeyword = _useSearch.setSearchKeyword,
     handleSearch = _useSearch.handleSearch;
-  var handleSearchRowSelect = (0, _utils.useEventCallback)(function (item, items, event) {
+  var handleSearchRowSelect = (0, _utils3.useEventCallback)(function (item, items, event) {
     var _item$childrenKey;
     var node = {
       itemData: item,

package/cjs/CascadeTree/SearchView.js

@@ -8,8 +8,8 @@ var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireDefault(require("react"));
 var _utils = require("../utils");
-var _treeUtils = require("../utils/treeUtils");
-var _utils2 = require("./utils");
+var _utils2 = require("../internals/Tree/utils");
+var _Highlight = _interopRequireDefault(require("../Highlight"));
 var _SearchBox = _interopRequireDefault(require("../internals/SearchBox"));
 function SearchView(props) {
   var _props$as = props.as,
@@ -38,22 +38,15 @@ function SearchView(props) {
   var _useCustom = (0, _utils.useCustom)('Picker'),
     locale = _useCustom.locale;
   var renderSearchRow = function renderSearchRow(item, key) {
-    var items = (0, _treeUtils.getPathTowardsItem)(item, function (item) {
+    var items = (0, _utils2.getPathTowardsItem)(item, function (item) {
       return parentMap.get(item);
     });
     var formattedNodes = items.map(function (itemData) {
       var _extends2;
-      var label = (0, _utils2.highlightLabel)({
-        item: itemData,
-        labelKey: labelKey,
-        searchKeyword: searchKeyword,
-        render: function render(patch, index) {
-          return /*#__PURE__*/_react.default.createElement("span", {
-            key: index,
-            className: prefix('match')
-          }, patch);
-        }
-      });
+      var label = /*#__PURE__*/_react.default.createElement(_Highlight.default, {
+        as: "span",
+        query: searchKeyword
+      }, itemData[labelKey]);
       return (0, _extends3.default)({}, itemData, (_extends2 = {}, _extends2[labelKey] = label, _extends2));
     });
     var disabled = disabledItemValues.some(function (value) {

package/cjs/CascadeTree/hooks/usePaths.js

@@ -5,8 +5,8 @@ exports.__esModule = true;
 exports.usePaths = usePaths;
 exports.default = void 0;
 var _react = require("react");
-var _treeUtils = require("../../utils/treeUtils");
-var _utils = require("../utils");
+var _utils = require("../../internals/Tree/utils");
+var _utils2 = require("../utils");
 /**
  * A Hook to get the selected path of Tree.
  *
@@ -22,10 +22,10 @@ function usePaths(_ref) {
     getParent = _ref.getParent,
     getChildren = _ref.getChildren;
   var pathTowardsSelectedItem = (0, _react.useMemo)(function () {
-    return (0, _treeUtils.getPathTowardsItem)(selectedItem, getParent);
+    return (0, _utils.getPathTowardsItem)(selectedItem, getParent);
   }, [getParent, selectedItem]);
   var _useMemo = (0, _react.useMemo)(function () {
-      return (0, _utils.getColumnsAndPaths)(data, activeItem, {
+      return (0, _utils2.getColumnsAndPaths)(data, activeItem, {
         getParent: getParent,
         getChildren: getChildren
       });

package/cjs/CascadeTree/hooks/useSearch.js

@@ -5,6 +5,7 @@ exports.__esModule = true;
 exports.default = void 0;
 var _react = require("react");
 var _utils = require("../../utils");
+var _utils2 = require("../../internals/utils");
 function useSearch(props) {
   var _useState = (0, _react.useState)(''),
     searchKeyword = _useState[0],
@@ -16,7 +17,7 @@ function useSearch(props) {
     parentSelectable = props.parentSelectable,
     onSearch = props.onSearch;
   var someKeyword = function someKeyword(item, keyword) {
-    if (item[labelKey].match(new RegExp((0, _utils.getSafeRegExpString)(keyword || searchKeyword), 'i'))) {
+    if (item[labelKey].match(new RegExp((0, _utils2.getSafeRegExpString)(keyword || searchKeyword), 'i'))) {
       return true;
     }
     var parent = parentMap.get(item);

package/cjs/CascadeTree/utils.d.ts

@@ -1,5 +1,3 @@
-/// <reference types="react" />
-import { ItemDataType } from '../@types/common';
 declare type GetColumnsAndPathsOptions<T> = {
     getParent: (item: T) => T | undefined;
     getChildren: (item: T) => readonly T[] | undefined;
@@ -20,13 +18,4 @@ export declare function getColumnsAndPaths<T extends Record<string, unknown>>(it
     columns: (readonly T[])[];
     path: T[];
 };
-/**
- * Highlight the search keyword in the label
- */
-export declare function highlightLabel<T>(props: {
-    item: ItemDataType<T>;
-    labelKey: string;
-    searchKeyword: string;
-    render: (patch: React.ReactNode, index: number) => React.ReactNode;
-}): import("react").ReactNode[];
 export {};

package/cjs/CascadeTree/utils.js

@@ -3,8 +3,6 @@
 
 exports.__esModule = true;
 exports.getColumnsAndPaths = getColumnsAndPaths;
-exports.highlightLabel = highlightLabel;
-var _utils = require("../utils");
 /**
  * Calculate columns to be displayed:
  *
@@ -42,25 +40,4 @@ function getColumnsAndPaths(items, pathTarget, options) {
     columns: columns,
     path: path
   };
-}
-
-/**
- * Highlight the search keyword in the label
- */
-function highlightLabel(props) {
-  var item = props.item,
-    searchKeyword = props.searchKeyword,
-    labelKey = props.labelKey,
-    render = props.render;
-  var regx = new RegExp((0, _utils.getSafeRegExpString)(searchKeyword), 'ig');
-  var labelElements = [];
-  var strArr = item[labelKey].split(regx);
-  var highStrArr = item[labelKey].match(regx);
-  for (var i = 0; i < strArr.length; i++) {
-    labelElements.push(strArr[i]);
-    if (highStrArr !== null && highStrArr !== void 0 && highStrArr[i]) {
-      labelElements.push(render(highStrArr[i], i));
-    }
-  }
-  return labelElements;
 }