rsuite 5.53.1 → 5.54.0

package/cjs/internals/Picker/Listbox.js

@@ -24,6 +24,7 @@ var _utils = require("../../utils");
 var _ListItemGroup = _interopRequireDefault(require("./ListItemGroup"));
 var _getDataGroupBy = require("../../utils/getDataGroupBy");
 var _useCombobox2 = _interopRequireDefault(require("./hooks/useCombobox"));
+var _symbols = require("../../internals/symbols");
 var _this = void 0;
 var Listbox = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$data = props.data,
@@ -92,7 +93,7 @@ var Listbox = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   });
   var getRowHeight = function getRowHeight(list, index) {
     var item = list[index];
-    if (group && item[_getDataGroupBy.KEY_GROUP] && index !== 0) {
+    if (group && item[_symbols.RSUITE_PICKER_GROUP_KEY] && index !== 0) {
       return rowGroupHeight;
     }
     return rowHeight;
@@ -121,7 +122,7 @@ var Listbox = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var filteredItems = group ? data.filter(function (item) {
     var _item$parent;
     // Display group title items
-    if (item[_getDataGroupBy.KEY_GROUP]) return true;
+    if (item[_symbols.RSUITE_PICKER_GROUP_KEY]) return true;
 
     // Display items under the unfolded group
     // FIXME-Doma
@@ -145,7 +146,7 @@ var Listbox = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     var item = itemData || data[index];
     var value = item[valueKey];
     var label = item[labelKey];
-    if ((0, _isUndefined.default)(label) && !item[_getDataGroupBy.KEY_GROUP]) {
+    if ((0, _isUndefined.default)(label) && !item[_symbols.RSUITE_PICKER_GROUP_KEY]) {
       throw Error("labelKey \"" + labelKey + "\" is not defined in \"data\" : " + index);
     }
 
@@ -156,7 +157,7 @@ var Listbox = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
      * Render <ListboxGroup>
      * when if `group` is enabled
      */
-    if (group && item[_getDataGroupBy.KEY_GROUP]) {
+    if (group && item[_symbols.RSUITE_PICKER_GROUP_KEY]) {
       var groupValue = item[_getDataGroupBy.KEY_GROUP_TITLE];
       // TODO: grouped options should be owned by group
       return /*#__PURE__*/_react.default.createElement(_ListItemGroup.default, {
@@ -170,7 +171,7 @@ var Listbox = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
         key: "group-" + groupValue,
         onClick: handleGroupTitleClick.bind(null, groupValue)
       }, renderMenuGroup ? renderMenuGroup(groupValue, item) : groupValue);
-    } else if ((0, _isUndefined.default)(value) && !(0, _isUndefined.default)(item[_getDataGroupBy.KEY_GROUP])) {
+    } else if ((0, _isUndefined.default)(value) && !(0, _isUndefined.default)(item[_symbols.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/cjs/internals/Picker/hooks/usePickerRef.js

@@ -6,6 +6,7 @@ exports.__esModule = true;
 exports.default = void 0;
 var _react = require("react");
 var _useEventCallback = _interopRequireDefault(require("../../../utils/useEventCallback"));
+var _symbols = require("../../../internals/symbols");
 /**
  * A hook of the exposed method of Picker
  */
@@ -69,6 +70,7 @@ function usePickerRef(ref, parmas) {
         }
         return list === null || list === void 0 ? void 0 : list.current;
       },
+      type: _symbols.RSUITE_PICKER_TYPE,
       updatePosition: handleUpdatePosition,
       open: handleOpen,
       close: handleClose

package/cjs/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/cjs/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/cjs/internals/symbols.js

@@ -0,0 +1,9 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.RSUITE_PICKER_GROUP_KEY = exports.RSUITE_PICKER_TYPE = void 0;
+var RSUITE_PICKER_TYPE = Symbol.for('rsuite.picker');
+exports.RSUITE_PICKER_TYPE = RSUITE_PICKER_TYPE;
+var RSUITE_PICKER_GROUP_KEY = Symbol.for('rsuite.picker_group_key');
+exports.RSUITE_PICKER_GROUP_KEY = RSUITE_PICKER_GROUP_KEY;

package/cjs/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/cjs/utils/getDataGroupBy.js

@@ -4,12 +4,10 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.getDataGroupBy = getDataGroupBy;
-exports.KEY_GROUP_TITLE = exports.KEY_GROUP = void 0;
+exports.KEY_GROUP_TITLE = void 0;
 var _groupBy2 = _interopRequireDefault(require("lodash/groupBy"));
 var _treeUtils = require("../utils/treeUtils");
-var hasSymbol = typeof Symbol === 'function';
-var KEY_GROUP = hasSymbol ? Symbol('_$grouped') : '_$grouped';
-exports.KEY_GROUP = KEY_GROUP;
+var _symbols = require("../internals/symbols");
 var KEY_GROUP_TITLE = 'groupTitle';
 exports.KEY_GROUP_TITLE = KEY_GROUP_TITLE;
 function getDataGroupBy(data, key, sort) {
@@ -21,7 +19,7 @@ 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[_symbols.RSUITE_PICKER_GROUP_KEY] = true, _ref2;
   });
   if (isSort) {
     groups.sort(sort(true));

package/dist/rsuite-no-reset-rtl.css

@@ -264,6 +264,7 @@
   --rs-input-bg: var(--rs-gray-0);
   --rs-input-focus-border: var(--rs-primary-500);
   --rs-input-disabled-bg: var(--rs-gray-50);
+  --rs-inline-edit-hover-bg: var(--rs-gray-200);
   --rs-listbox-option-hover-bg: rgb(from var(--rs-primary-100) r g b / 50%);
   --rs-listbox-option-hover-text: var(--rs-primary-700);
   --rs-listbox-option-selected-text: var(--rs-primary-700);
@@ -634,6 +635,7 @@
   --rs-input-bg: var(--rs-gray-800);
   --rs-input-focus-border: var(--rs-primary-500);
   --rs-input-disabled-bg: var(--rs-gray-700);
+  --rs-inline-edit-hover-bg: var(--rs-gray-500);
   --rs-listbox-option-hover-bg: var(--rs-gray-600);
   --rs-listbox-option-hover-text: currentColor;
   --rs-listbox-option-selected-text: var(--rs-primary-500);
@@ -999,6 +1001,7 @@
   --rs-input-bg: var(--rs-gray-800);
   --rs-input-focus-border: var(--rs-primary-500);
   --rs-input-disabled-bg: var(--rs-gray-700);
+  --rs-inline-edit-hover-bg: transparent;
   --rs-listbox-option-hover-bg: transparent;
   --rs-listbox-option-hover-text: var(--rs-primary-500);
   --rs-listbox-option-selected-text: var(--rs-primary-500);
@@ -5543,6 +5546,9 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
 .rs-form-inline .rs-form-group .rs-sr-only + .rs-form-control-wrapper {
   margin-right: 0;
 }
+.rs-form-group {
+  position: relative;
+}
 .rs-form:not(.rs-form-inline) .rs-form-group:not(:last-child) {
   margin-bottom: 24px;
 }
@@ -8056,7 +8062,6 @@ textarea.rs-input-sm {
   width: 100%;
   border: none;
   outline: none;
-  padding-left: 36px;
 }
 .rs-input-group.rs-input-group-inside .rs-input-group-btn,
 .rs-input-group.rs-input-group-inside .rs-input-group-addon {
@@ -8071,7 +8076,6 @@ textarea.rs-input-sm {
   background-color: transparent;
   border: none;
   color: inherit;
-  position: absolute;
   height: 34px;
   padding: 7px 11px;
   border-radius: 6px 0 0 6px;
@@ -8697,6 +8701,90 @@ textarea.rs-picker-search-input {
 .rs-picker-focused .rs-picker-search-input {
   z-index: 6;
 }
+.rs-inline-edit {
+  position: relative;
+  display: inline-block;
+}
+.rs-inline-edit .rs-plaintext {
+  /* stylelint-disable */
+  padding: 7px 11px;
+  font-size: 14px;
+  line-height: 1.42857143;
+  /* stylelint-enable */
+  border-radius: 6px;
+}
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .rs-inline-edit .rs-plaintext {
+    height: 36px;
+  }
+}
+textarea.rs-inline-edit .rs-plaintext {
+  height: auto;
+}
+.rs-inline-edit .rs-plaintext:hover {
+  background-color: #e5e5ea;
+  background-color: var(--rs-inline-edit-hover-bg);
+}
+.rs-inline-edit-disabled .rs-plaintext:hover {
+  background-color: transparent;
+}
+.rs-inline-edit-controls {
+  position: absolute;
+  inset-block-start: 100%;
+  inset-inline-end: 0px;
+  -webkit-margin-before: 6px;
+          margin-block-start: 6px;
+  z-index: 7;
+}
+.rs-inline-edit-controls .rs-btn {
+  -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+          box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+}
+.rs-inline-edit-xs .rs-plaintext {
+  /* stylelint-disable */
+  padding: 1px 11px;
+  font-size: 12px;
+  line-height: 1.66666667;
+  /* stylelint-enable */
+}
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .rs-inline-edit-xs .rs-plaintext {
+    height: 24px;
+  }
+}
+textarea.rs-inline-edit-xs .rs-plaintext {
+  height: auto;
+}
+.rs-inline-edit-lg .rs-plaintext {
+  /* stylelint-disable */
+  padding: 9px 11px;
+  font-size: 16px;
+  line-height: 1.375;
+  /* stylelint-enable */
+}
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .rs-inline-edit-lg .rs-plaintext {
+    height: 42px;
+  }
+}
+textarea.rs-inline-edit-lg .rs-plaintext {
+  height: auto;
+}
+.rs-inline-edit-sm .rs-plaintext {
+  /* stylelint-disable */
+  padding: 4px 11px;
+  font-size: 14px;
+  line-height: 1.42857143;
+  /* stylelint-enable */
+}
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .rs-inline-edit-sm .rs-plaintext {
+    height: 30px;
+  }
+}
+textarea.rs-inline-edit-sm .rs-plaintext {
+  height: auto;
+}
 .rs-list {
   position: relative;
   -webkit-box-shadow: 0 1px 0 #e5e5ea, 0 -1px 0 #e5e5ea;
@@ -13714,8 +13802,7 @@ textarea.rs-picker-search-input {
   display: contents;
 }
 .rs-plaintext .rs-tag {
-  margin-right: 6px;
-  margin-bottom: 6px;
+  margin: 0;
 }
 .rs-picker-disabled-options .rs-picker-toggle {
   padding-left: 32px !important;