rsuite 5.53.1 → 5.54.0

package/esm/index.js

@@ -57,6 +57,7 @@ export { default as Uploader } from './Uploader';
 export { default as Slider } from './Slider';
 export { default as RangeSlider } from './RangeSlider';
 export { default as Rate } from './Rate';
+export { default as InlineEdit } from './InlineEdit';
 // Data display
 export { default as Tree } from './Tree';
 export { default as CheckTree } from './CheckTree';

package/esm/internals/Picker/ListCheckItem.js

@@ -65,7 +65,6 @@ var ListCheckItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onClick: handleSelectItem,
     onCheckboxClick: handleCheck
   };
-  console.log(className, 'className');
   return /*#__PURE__*/React.createElement(Component, _extends({
     role: "option",
     "aria-selected": active,

package/esm/internals/Picker/Listbox.d.ts

@@ -1,9 +1,13 @@
 import React from 'react';
 import { ListProps, ListHandle } from '../../internals/Windowing';
 import { StandardProps, ItemDataType } from '../../@types/common';
+import { RSUITE_PICKER_GROUP_KEY } from '../../internals/symbols';
+interface InnerItemDataType extends ItemDataType {
+    [RSUITE_PICKER_GROUP_KEY]?: boolean;
+}
 export interface ListboxProps<Multiple = false> extends StandardProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
     classPrefix: string;
-    data?: ItemDataType[];
+    data?: InnerItemDataType[];
     group?: boolean;
     groupBy?: string;
     disabledItemValues?: any[];

package/esm/internals/Picker/Listbox.js

@@ -17,8 +17,9 @@ import { List, AutoSizer, VariableSizeList } from '../../internals/Windowing';
 import shallowEqual from '../../utils/shallowEqual';
 import { mergeRefs, useClassNames, useMount, useEventCallback } from '../../utils';
 import ListItemGroup from './ListItemGroup';
-import { KEY_GROUP, KEY_GROUP_TITLE } from '../../utils/getDataGroupBy';
+import { KEY_GROUP_TITLE } from '../../utils/getDataGroupBy';
 import useCombobox from './hooks/useCombobox';
+import { RSUITE_PICKER_GROUP_KEY } from '../../internals/symbols';
 var Listbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$data = props.data,
     data = _props$data === void 0 ? [] : _props$data,
@@ -86,7 +87,7 @@ var Listbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
   });
   var getRowHeight = function getRowHeight(list, index) {
     var item = list[index];
-    if (group && item[KEY_GROUP] && index !== 0) {
+    if (group && item[RSUITE_PICKER_GROUP_KEY] && index !== 0) {
       return rowGroupHeight;
     }
     return rowHeight;
@@ -115,7 +116,7 @@ var Listbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var filteredItems = group ? data.filter(function (item) {
     var _item$parent;
     // Display group title items
-    if (item[KEY_GROUP]) return true;
+    if (item[RSUITE_PICKER_GROUP_KEY]) return true;
 
     // Display items under the unfolded group
     // FIXME-Doma
@@ -139,7 +140,7 @@ var Listbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var item = itemData || data[index];
     var value = item[valueKey];
     var label = item[labelKey];
-    if (isUndefined(label) && !item[KEY_GROUP]) {
+    if (isUndefined(label) && !item[RSUITE_PICKER_GROUP_KEY]) {
       throw Error("labelKey \"" + labelKey + "\" is not defined in \"data\" : " + index);
     }
 
@@ -150,7 +151,7 @@ var Listbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
      * Render <ListboxGroup>
      * when if `group` is enabled
      */
-    if (group && item[KEY_GROUP]) {
+    if (group && item[RSUITE_PICKER_GROUP_KEY]) {
       var groupValue = item[KEY_GROUP_TITLE];
       // TODO: grouped options should be owned by group
       return /*#__PURE__*/React.createElement(ListItemGroup, {
@@ -164,7 +165,7 @@ var Listbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
         key: "group-" + groupValue,
         onClick: handleGroupTitleClick.bind(null, groupValue)
       }, renderMenuGroup ? renderMenuGroup(groupValue, item) : groupValue);
-    } else if (isUndefined(value) && !isUndefined(item[KEY_GROUP])) {
+    } else if (isUndefined(value) && !isUndefined(item[RSUITE_PICKER_GROUP_KEY])) {
       throw Error("valueKey \"" + valueKey + "\" is not defined in \"data\" : " + index + " ");
     }
     var disabled = disabledItemValues === null || disabledItemValues === void 0 ? void 0 : disabledItemValues.some(function (disabledValue) {

package/esm/internals/Picker/hooks/usePickerRef.js

@@ -1,6 +1,7 @@
 'use client';
 import { useImperativeHandle, useRef } from 'react';
 import useEventCallback from '../../../utils/useEventCallback';
+import { RSUITE_PICKER_TYPE } from '../../../internals/symbols';
 /**
  * A hook of the exposed method of Picker
  */
@@ -64,6 +65,7 @@ function usePickerRef(ref, parmas) {
         }
         return list === null || list === void 0 ? void 0 : list.current;
       },
+      type: RSUITE_PICKER_TYPE,
       updatePosition: handleUpdatePosition,
       open: handleOpen,
       close: handleClose

package/esm/internals/Picker/types.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
 import { RsRefForwardingComponent } from '../../@types/common';
 import type { ListHandle } from '../../internals/Windowing';
+import { RSUITE_PICKER_TYPE } from '../../internals/symbols';
 export interface PickerHandle {
+    type?: typeof RSUITE_PICKER_TYPE;
     root: HTMLElement | null;
     list?: ListHandle;
     overlay?: HTMLElement | null;

package/esm/internals/symbols.d.ts

@@ -0,0 +1,2 @@
+export declare const RSUITE_PICKER_TYPE: symbol;
+export declare const RSUITE_PICKER_GROUP_KEY: unique symbol;

package/esm/internals/symbols.js

@@ -0,0 +1,3 @@
+'use client';
+export var RSUITE_PICKER_TYPE = Symbol.for('rsuite.picker');
+export var RSUITE_PICKER_GROUP_KEY = Symbol.for('rsuite.picker_group_key');

package/esm/utils/getDataGroupBy.d.ts

@@ -1,4 +1,3 @@
-export declare const KEY_GROUP: string | symbol;
 export declare const KEY_GROUP_TITLE = "groupTitle";
 export declare function getDataGroupBy<T>(data: readonly T[], key: string, sort?: (isGroup: boolean) => <T>(a: T, b: T) => number): (T | {
     groupTitle: string;

package/esm/utils/getDataGroupBy.js

@@ -1,8 +1,7 @@
 'use client';
 import _groupBy from "lodash/groupBy";
 import { WalkTreeStrategy, flattenTree } from '../utils/treeUtils';
-var hasSymbol = typeof Symbol === 'function';
-export var KEY_GROUP = hasSymbol ? Symbol('_$grouped') : '_$grouped';
+import { RSUITE_PICKER_GROUP_KEY } from '../internals/symbols';
 export var KEY_GROUP_TITLE = 'groupTitle';
 export function getDataGroupBy(data, key, sort) {
   var groupMap = _groupBy(data, key);
@@ -13,7 +12,7 @@ export function getDataGroupBy(data, key, sort) {
       children = _ref[1];
     return _ref2 = {
       children: isSort ? children.sort(sort(false)) : children
-    }, _ref2[KEY_GROUP_TITLE] = groupTitle, _ref2[KEY_GROUP] = true, _ref2;
+    }, _ref2[KEY_GROUP_TITLE] = groupTitle, _ref2[RSUITE_PICKER_GROUP_KEY] = true, _ref2;
   });
   if (isSort) {
     groups.sort(sort(true));

package/package.json

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

package/styles/color-modes/dark.less

@@ -242,6 +242,9 @@
   --rs-input-focus-border: var(--rs-primary-500);
   --rs-input-disabled-bg: var(--rs-gray-700);
 
+  // InlineEdit
+  --rs-inline-edit-hover-bg: var(--rs-gray-500);
+
   // ARIA Listboxes
   --rs-listbox-option-hover-bg: var(--rs-gray-600);
   --rs-listbox-option-hover-text: currentColor;

package/styles/color-modes/high-contrast.less

@@ -247,6 +247,9 @@
   --rs-input-focus-border: var(--rs-primary-500);
   --rs-input-disabled-bg: var(--rs-gray-700);
 
+  // InlineEdit
+  --rs-inline-edit-hover-bg: transparent;
+
   // ARIA Listboxes
   --rs-listbox-option-hover-bg: transparent;
   --rs-listbox-option-hover-text: var(--rs-primary-500);

package/styles/color-modes/light.less

@@ -253,6 +253,9 @@
   --rs-input-focus-border: var(--rs-primary-500);
   --rs-input-disabled-bg: var(--rs-gray-50);
 
+  // InlineEdit
+  --rs-inline-edit-hover-bg: var(--rs-gray-200);
+
   // ARIA Listboxes
   --rs-listbox-option-hover-bg: rgb(from var(--rs-primary-100) r g b / 50%);
   --rs-listbox-option-hover-text: var(--rs-primary-700);

package/styles/index.less

@@ -41,6 +41,7 @@
 @import '../InputGroup/styles/index';
 @import '../InputNumber/styles/index';
 @import '../InputPicker/styles/index';
+@import '../InlineEdit/styles/index';
 @import '../List/styles/index';
 @import '../Loader/styles/index';
 @import '../Message/styles/index';