rsuite 5.53.1 → 5.54.0

package/cjs/InlineEdit/InlineEdit.d.ts

@@ -0,0 +1,56 @@
+import React from 'react';
+import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
+import { type ChildrenProps } from './renderChildren';
+export interface InlineEditProps extends WithAsProps {
+    /**
+     * If true, the InlineEdit will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The initial value of the InlineEdit when it is not controlled.
+     */
+    defaultValue?: any;
+    /**
+     * The value of the InlineEdit.
+     */
+    value?: any;
+    /**
+     * show the control buttons when editing.
+     * @default true
+     */
+    showControls?: boolean;
+    /**
+     * The placeholder of the InlineEdit.
+     */
+    placeholder?: string;
+    /**
+     * The size of the InlineEdit.
+     */
+    size?: 'lg' | 'md' | 'sm' | 'xs';
+    /**
+     * The state of the InlineEdit when it is blurred.
+     */
+    stateOnBlur?: 'save' | 'cancel';
+    /**
+     * The callback function that is called when the value of the InlineEdit is changed.
+     */
+    onChange?: (value: any, event: React.ChangeEvent) => void;
+    /**
+     * The callback function that is called when the InlineEdit is canceled.
+     */
+    onCancel?: (event?: React.SyntheticEvent) => void;
+    /**
+     * The callback function that is called when the InlineEdit is saved.
+     */
+    onSave?: (event?: React.SyntheticEvent) => void;
+    /**
+     * The callback function that is called when the InlineEdit is clicked.
+     */
+    onEdit?: (event: React.SyntheticEvent) => void;
+    /**
+     * The render function of the InlineEdit.
+     */
+    children?: ((props: ChildrenProps, ref: React.Ref<any>) => React.ReactElement) | React.ReactElement;
+}
+declare const InlineEdit: RsRefForwardingComponent<'div', InlineEditProps>;
+export default InlineEdit;

package/cjs/InlineEdit/InlineEdit.js

@@ -0,0 +1,98 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _utils = require("../utils");
+var _propTypes2 = require("../internals/propTypes");
+var _EditableControls = _interopRequireDefault(require("./EditableControls"));
+var _useFocusEvent2 = _interopRequireDefault(require("./useFocusEvent"));
+var _useEditState2 = _interopRequireDefault(require("./useEditState"));
+var _renderChildren = require("./renderChildren");
+var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _props$as = props.as,
+    Component = _props$as === void 0 ? 'div' : _props$as,
+    _props$children = props.children,
+    children = _props$children === void 0 ? _renderChildren.defaultRenderInput : _props$children,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'inline-edit' : _props$classPrefix,
+    className = props.className,
+    disabled = props.disabled,
+    size = props.size,
+    _props$showControls = props.showControls,
+    showControls = _props$showControls === void 0 ? true : _props$showControls,
+    _props$stateOnBlur = props.stateOnBlur,
+    stateOnBlur = _props$stateOnBlur === void 0 ? 'save' : _props$stateOnBlur,
+    placeholder = props.placeholder,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "children", "classPrefix", "className", "disabled", "size", "showControls", "stateOnBlur", "placeholder"]);
+  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+    withClassPrefix = _useClassNames.withClassPrefix,
+    merge = _useClassNames.merge,
+    prefix = _useClassNames.prefix;
+  var _useEditState = (0, _useEditState2.default)((0, _extends2.default)({}, rest, {
+      disabled: disabled
+    })),
+    value = _useEditState.value,
+    isEditing = _useEditState.isEditing,
+    onSave = _useEditState.onSave,
+    onCancel = _useEditState.onCancel,
+    onChange = _useEditState.onChange,
+    onKeyDown = _useEditState.onKeyDown,
+    onClick = _useEditState.onClick,
+    htmlProps = _useEditState.htmlProps;
+  var _useFocusEvent = (0, _useFocusEvent2.default)({
+      isEditing: isEditing,
+      stateOnBlur: stateOnBlur,
+      onSave: onSave,
+      onCancel: onCancel
+    }),
+    target = _useFocusEvent.target,
+    root = _useFocusEvent.root,
+    onBlur = _useFocusEvent.onBlur;
+  var childrenProps = {
+    size: size,
+    value: value,
+    disabled: disabled,
+    placeholder: placeholder,
+    plaintext: !isEditing,
+    onChange: onChange,
+    onBlur: onBlur
+  };
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    ref: (0, _utils.mergeRefs)(root, ref),
+    tabIndex: 0,
+    className: merge(className, withClassPrefix(size, {
+      disabled: disabled
+    })),
+    onClick: onClick,
+    onKeyDown: onKeyDown
+  }, htmlProps), (0, _renderChildren.renderChildren)(children, childrenProps, target), showControls && isEditing && /*#__PURE__*/_react.default.createElement(_EditableControls.default, {
+    className: prefix('controls'),
+    onSave: onSave,
+    onCancel: onCancel
+  }));
+});
+InlineEdit.displayName = 'InlineEdit';
+InlineEdit.propTypes = {
+  children: _propTypes.default.any,
+  classPrefix: _propTypes.default.string,
+  className: _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  defaultValue: _propTypes.default.any,
+  value: _propTypes.default.any,
+  showControls: _propTypes.default.bool,
+  placeholder: _propTypes.default.string,
+  size: (0, _propTypes2.oneOf)(['lg', 'md', 'sm', 'xs']),
+  stateOnBlur: (0, _propTypes2.oneOf)(['save', 'cancel']),
+  onChange: _propTypes.default.func,
+  onCancel: _propTypes.default.func,
+  onSave: _propTypes.default.func,
+  onEdit: _propTypes.default.func
+};
+var _default = InlineEdit;
+exports.default = _default;

package/cjs/InlineEdit/index.d.ts

@@ -0,0 +1,3 @@
+import InlineEdit from './InlineEdit';
+export type { InlineEditProps } from './InlineEdit';
+export default InlineEdit;

package/cjs/InlineEdit/index.js

@@ -0,0 +1,9 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _InlineEdit = _interopRequireDefault(require("./InlineEdit"));
+var _default = _InlineEdit.default;
+exports.default = _default;

package/cjs/InlineEdit/renderChildren.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface ChildrenProps {
+    size?: 'lg' | 'md' | 'sm' | 'xs';
+    disabled?: boolean;
+    placeholder?: string;
+    plaintext?: boolean;
+    value: any;
+    onChange: (value: any, event: React.SyntheticEvent) => void;
+    onBlur?: (event: React.SyntheticEvent) => void;
+}
+export declare function defaultRenderInput(props: ChildrenProps, ref: React.Ref<any>): JSX.Element;
+export declare function renderChildren(children: ((props: ChildrenProps, ref: React.Ref<any>) => React.ReactElement) | React.ReactElement, props: ChildrenProps, ref: React.Ref<any>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/cjs/InlineEdit/renderChildren.js

@@ -0,0 +1,40 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.defaultRenderInput = defaultRenderInput;
+exports.renderChildren = renderChildren;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _Input = _interopRequireDefault(require("../Input"));
+function defaultRenderInput(props, ref) {
+  return /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({
+    ref: ref
+  }, props));
+}
+var pickers = ['DatePicker', 'DateRangePicker', 'InputPicker', 'TagPicker', 'Cascader', 'MultiCascader', 'SelectPicker', 'CheckPicker', 'CheckTreePicker', 'TreePicker'];
+function getDisplayName(Component) {
+  var _Component$type;
+  if (typeof (Component === null || Component === void 0 ? void 0 : Component.type) === 'string') {
+    return Component === null || Component === void 0 ? void 0 : Component.type;
+  }
+  return (Component === null || Component === void 0 ? void 0 : (_Component$type = Component.type) === null || _Component$type === void 0 ? void 0 : _Component$type.displayName) || '';
+}
+function renderChildren(children, props, ref) {
+  if (typeof children === 'function') {
+    return children(props, ref);
+  }
+  if (pickers.includes(getDisplayName(children))) {
+    var onBlur = props.onBlur,
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["onBlur"]); // if the children is a picker, we should pass the onBlur to the onClose
+    return /*#__PURE__*/_react.default.cloneElement(children, (0, _extends2.default)({}, rest, {
+      onClose: onBlur,
+      ref: ref
+    }));
+  }
+  return /*#__PURE__*/_react.default.cloneElement(children, (0, _extends2.default)({}, props, {
+    ref: ref
+  }));
+}

package/cjs/InlineEdit/useEditState.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+interface EditStateProps {
+    value?: any;
+    defaultValue?: any;
+    disabled?: boolean;
+    onChange?: (value: any, event: React.ChangeEvent) => void;
+    onEdit?: (event: React.SyntheticEvent) => void;
+    onCancel?: (event?: React.MouseEvent) => void;
+    onSave?: (event?: React.MouseEvent) => void;
+    onClick?: (event: React.SyntheticEvent) => void;
+}
+declare const useEditState: (props: EditStateProps) => {
+    isEditing: boolean;
+    value: any;
+    onClick: (...args: any[]) => any;
+    onChange: (...args: any[]) => any;
+    onCancel: (...args: any[]) => any;
+    onSave: (...args: any[]) => any;
+    onKeyDown: (...args: any[]) => any;
+    htmlProps: {};
+};
+export default useEditState;

package/cjs/InlineEdit/useEditState.js

@@ -0,0 +1,82 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = require("react");
+var _utils = require("../utils");
+var useEditState = function useEditState(props) {
+  var valueProp = props.value,
+    defaultValue = props.defaultValue,
+    disabled = props.disabled,
+    onChange = props.onChange,
+    onEdit = props.onEdit,
+    onCancel = props.onCancel,
+    onSave = props.onSave,
+    onClick = props.onClick,
+    htmlProps = (0, _objectWithoutPropertiesLoose2.default)(props, ["value", "defaultValue", "disabled", "onChange", "onEdit", "onCancel", "onSave", "onClick"]);
+  var _useState = (0, _react.useState)(false),
+    isEditing = _useState[0],
+    setIsEditing = _useState[1];
+  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue),
+    value = _useControlled[0],
+    setValue = _useControlled[1]; // When editing, the value is not updated, and the original value is restored when canceling
+  var _useState2 = (0, _react.useState)(),
+    resetValue = _useState2[0],
+    setResetValue = _useState2[1];
+  var handleClick = (0, _utils.useEventCallback)(function (event) {
+    if (disabled) {
+      return;
+    }
+    onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    onEdit === null || onEdit === void 0 ? void 0 : onEdit(event);
+    setIsEditing(true);
+    setResetValue(value);
+  });
+  var handleChange = (0, _utils.useEventCallback)(function (value, event) {
+    setValue(value);
+    onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
+  });
+  var handleCancel = (0, _utils.useEventCallback)(function (event) {
+    var _event$stopPropagatio;
+    setIsEditing(false);
+    setValue(resetValue);
+    onCancel === null || onCancel === void 0 ? void 0 : onCancel(event);
+    event === null || event === void 0 ? void 0 : (_event$stopPropagatio = event.stopPropagation) === null || _event$stopPropagatio === void 0 ? void 0 : _event$stopPropagatio.call(event);
+  });
+  var handleSave = (0, _utils.useEventCallback)(function (event) {
+    var _event$stopPropagatio2;
+    setIsEditing(false);
+    onSave === null || onSave === void 0 ? void 0 : onSave(event);
+    event === null || event === void 0 ? void 0 : (_event$stopPropagatio2 = event.stopPropagation) === null || _event$stopPropagatio2 === void 0 ? void 0 : _event$stopPropagatio2.call(event);
+  });
+  var handleKeyDown = (0, _utils.useEventCallback)(function (event) {
+    var _event$target;
+    if (isEditing) {
+      switch (event.key) {
+        case 'Enter':
+          if (((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.tagName) === 'INPUT') {
+            handleSave(event);
+          }
+          break;
+        case 'Escape':
+          handleCancel(event);
+          break;
+      }
+    }
+  });
+  return {
+    isEditing: isEditing,
+    value: value,
+    onClick: handleClick,
+    onChange: handleChange,
+    onCancel: handleCancel,
+    onSave: handleSave,
+    onKeyDown: handleKeyDown,
+    htmlProps: htmlProps
+  };
+};
+var _default = useEditState;
+exports.default = _default;

package/cjs/InlineEdit/useFocusEvent.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { PickerHandle } from '../internals/Picker/types';
+interface FocusEventProps {
+    isEditing: boolean;
+    stateOnBlur?: 'save' | 'cancel';
+    onSave?: (event?: React.FocusEvent) => void;
+    onCancel?: (event?: React.FocusEvent) => void;
+}
+declare const useFocusEvent: ({ isEditing, stateOnBlur, onSave, onCancel }: FocusEventProps) => {
+    target: import("react").RefObject<HTMLInputElement | PickerHandle>;
+    root: import("react").RefObject<HTMLDivElement>;
+    onBlur: (...args: any[]) => any;
+};
+export default useFocusEvent;

package/cjs/InlineEdit/useFocusEvent.js

@@ -0,0 +1,61 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _react = require("react");
+var _domLib = require("dom-lib");
+var _utils = require("../utils");
+var _symbols = require("../internals/symbols");
+var useFocusEvent = function useFocusEvent(_ref) {
+  var _ref$current;
+  var isEditing = _ref.isEditing,
+    stateOnBlur = _ref.stateOnBlur,
+    onSave = _ref.onSave,
+    onCancel = _ref.onCancel;
+  var ref = (0, _react.useRef)(null);
+  var rootRef = (0, _react.useRef)(null);
+  var isPicker = ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.type) === _symbols.RSUITE_PICKER_TYPE;
+  var focus = function focus() {
+    if (isPicker) {
+      setTimeout(function () {
+        var _ref$current2, _ref$current2$target, _ref$current2$target$;
+        (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : (_ref$current2$target = _ref$current2.target) === null || _ref$current2$target === void 0 ? void 0 : (_ref$current2$target$ = _ref$current2$target.focus) === null || _ref$current2$target$ === void 0 ? void 0 : _ref$current2$target$.call(_ref$current2$target);
+      }, 100);
+    } else {
+      var _ref$current3, _ref$current3$focus;
+      (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : (_ref$current3$focus = _ref$current3.focus) === null || _ref$current3$focus === void 0 ? void 0 : _ref$current3$focus.call(_ref$current3);
+    }
+  };
+  var handleBlur = (0, _utils.useEventCallback)(function (event) {
+    if (event) {
+      var _event$relatedTarget;
+      var relatedTarget = (_event$relatedTarget = event.relatedTarget) !== null && _event$relatedTarget !== void 0 ? _event$relatedTarget : (0, _domLib.ownerDocument)(event.currentTarget).activeElement;
+      if (rootRef.current && (0, _domLib.contains)(rootRef.current, relatedTarget)) {
+        return;
+      }
+    }
+    if (stateOnBlur === 'save') {
+      onSave === null || onSave === void 0 ? void 0 : onSave(event);
+    } else if (stateOnBlur === 'cancel') {
+      onCancel === null || onCancel === void 0 ? void 0 : onCancel(event);
+    }
+  });
+  (0, _utils.useIsomorphicLayoutEffect)(function () {
+    if (isEditing) {
+      focus();
+    }
+  }, []);
+  (0, _utils.useUpdateEffect)(function () {
+    if (isEditing) {
+      focus();
+    }
+  }, [isEditing]);
+  return {
+    target: ref,
+    root: rootRef,
+    onBlur: handleBlur
+  };
+};
+var _default = useFocusEvent;
+exports.default = _default;

package/cjs/Input/Input.js

@@ -35,13 +35,14 @@ var Input = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     size = props.size,
     htmlSize = props.htmlSize,
     plaintext = props.plaintext,
+    placeholder = props.placeholder,
     readOnly = props.readOnly,
     onPressEnter = props.onPressEnter,
     onFocus = props.onFocus,
     onBlur = props.onBlur,
     onKeyDown = props.onKeyDown,
     onChange = props.onChange,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["className", "classPrefix", "as", "type", "disabled", "value", "defaultValue", "inputRef", "id", "size", "htmlSize", "plaintext", "readOnly", "onPressEnter", "onFocus", "onBlur", "onKeyDown", "onChange"]);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["className", "classPrefix", "as", "type", "disabled", "value", "defaultValue", "inputRef", "id", "size", "htmlSize", "plaintext", "placeholder", "readOnly", "onPressEnter", "onFocus", "onBlur", "onKeyDown", "onChange"]);
   var handleKeyDown = function handleKeyDown(event) {
     if (event.key === _utils.KEY_VALUES.ENTER) {
       onPressEnter === null || onPressEnter === void 0 ? void 0 : onPressEnter(event);
@@ -66,7 +67,8 @@ var Input = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   if (plaintext) {
     return /*#__PURE__*/_react.default.createElement(_Plaintext.default, {
       ref: ref,
-      localeKey: "unfilled"
+      localeKey: "unfilled",
+      placeholder: placeholder
     }, typeof value === 'undefined' ? defaultValue : value);
   }
   var inputable = !disabled && !readOnly;
@@ -86,7 +88,8 @@ var Input = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     defaultValue: defaultValue,
     disabled: disabled,
     readOnly: readOnly,
-    size: htmlSize
+    size: htmlSize,
+    placeholder: placeholder
   }));
 });
 Input.displayName = 'Input';

package/cjs/InputPicker/InputPicker.js

@@ -30,6 +30,7 @@ var _Tag = _interopRequireDefault(require("../Tag"));
 var _InputAutosize = _interopRequireDefault(require("./InputAutosize"));
 var _TextBox = _interopRequireDefault(require("./TextBox"));
 var _InputPickerContext = _interopRequireDefault(require("./InputPickerContext"));
+var _Stack = _interopRequireDefault(require("../Stack"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 var convertSize = function convertSize(size) {
   switch (size) {
@@ -642,12 +643,12 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   if (plaintext) {
     var plaintextProps = {};
 
-    // TagPicker has -6px margin-left on the plaintext wrapper
-    // for fixing margin-left on tags from 2nd line on
+    // When multiple selection, the tag is displayed in a stack layout.
     if (multi && hasValue) {
-      plaintextProps.style = {
-        marginLeft: -6
-      };
+      plaintextProps.as = _Stack.default;
+      plaintextProps.spacing = 6;
+      plaintextProps.wrap = true;
+      plaintextProps.childrenRenderMode = 'clone';
     }
     return /*#__PURE__*/_react.default.createElement(_Plaintext.default, (0, _extends2.default)({
       localeKey: "notSelected",

package/cjs/Slider/Slider.d.ts

@@ -40,6 +40,8 @@ export interface SliderProps<T = number> extends WithAsProps, FormControlBasePro
     tooltip?: boolean;
     /** Show sliding progress bar */
     progress?: boolean;
+    /** Placeholder text */
+    placeholder?: React.ReactNode;
     /** Vertical Slide */
     vertical?: boolean;
     /** Customize labels on the render ruler */

package/cjs/Slider/Slider.js

@@ -80,12 +80,13 @@ var Slider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     valueProp = props.value,
     _props$max = props.max,
     maxProp = _props$max === void 0 ? 100 : _props$max,
+    placeholder = props.placeholder,
     getAriaValueText = props.getAriaValueText,
     renderTooltip = props.renderTooltip,
     renderMark = props.renderMark,
     onChange = props.onChange,
     onChangeCommitted = props.onChangeCommitted,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["aria-label", "aria-labelledby", "aria-valuetext", "as", "graduated", "className", "barClassName", "progress", "vertical", "disabled", "readOnly", "plaintext", "classPrefix", "min", "handleClassName", "handleStyle", "handleTitle", "tooltip", "step", "defaultValue", "value", "max", "getAriaValueText", "renderTooltip", "renderMark", "onChange", "onChangeCommitted"]);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["aria-label", "aria-labelledby", "aria-valuetext", "as", "graduated", "className", "barClassName", "progress", "vertical", "disabled", "readOnly", "plaintext", "classPrefix", "min", "handleClassName", "handleStyle", "handleTitle", "tooltip", "step", "defaultValue", "value", "max", "placeholder", "getAriaValueText", "renderTooltip", "renderMark", "onChange", "onChangeCommitted"]);
   var barRef = (0, _react.useRef)(null);
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     merge = _useClassNames.merge,
@@ -207,7 +208,8 @@ var Slider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   if (plaintext) {
     return /*#__PURE__*/_react.default.createElement(_Plaintext.default, {
       localeKey: "notSelected",
-      ref: ref
+      ref: ref,
+      placeholder: placeholder
     }, value);
   }
   return /*#__PURE__*/_react.default.createElement(Componnet, (0, _extends2.default)({}, rest, {

package/cjs/TreePicker/TreePicker.js

@@ -162,7 +162,7 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     prefix = _useClassNames.prefix,
     merge = _useClassNames.merge;
-  var _useClassNames2 = (0, _utils.useClassNames)('tree'),
+  var _useClassNames2 = (0, _utils.useClassNames)(inline && classPrefix !== 'picker' ? classPrefix : 'tree'),
     treePrefix = _useClassNames2.prefix,
     withTreeClassPrefix = _useClassNames2.withClassPrefix;
   var _useTreeSearch = (0, _treeUtils.useTreeSearch)({
@@ -589,18 +589,27 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }, nodeProps));
   };
   var renderTree = function renderTree() {
-    var _withTreeClassPrefix;
-    var classes = withTreeClassPrefix((_withTreeClassPrefix = {}, _withTreeClassPrefix[className !== null && className !== void 0 ? className : ''] = inline, _withTreeClassPrefix.virtualized = virtualized, _withTreeClassPrefix));
+    var _merge2;
+    var classes = merge(withTreeClassPrefix({
+      virtualized: virtualized
+    }), (_merge2 = {}, _merge2[className !== null && className !== void 0 ? className : ''] = inline, _merge2));
     var formattedNodes = getFormattedNodes(renderNode);
-    return /*#__PURE__*/_react.default.createElement(_Picker.TreeView, {
+    var treeViewProps = {
+      ref: treeView
+    };
+    if (inline) {
+      treeViewProps = (0, _extends2.default)({
+        ref: root,
+        style: (0, _extends2.default)({
+          height: height
+        }, style),
+        onKeyDown: handleTreeKeyDown
+      }, rest);
+    }
+    return /*#__PURE__*/_react.default.createElement(_Picker.TreeView, (0, _extends2.default)({}, treeViewProps, {
       treeRootClassName: treePrefix('root'),
-      ref: inline ? root : treeView,
-      className: classes,
-      style: inline ? (0, _extends2.default)({
-        height: height
-      }, style) : {},
-      onKeyDown: inline ? handleTreeKeyDown : undefined
-    }, virtualized ? /*#__PURE__*/_react.default.createElement(_Windowing.AutoSizer, {
+      className: classes
+    }), virtualized ? /*#__PURE__*/_react.default.createElement(_Windowing.AutoSizer, {
       defaultHeight: inline ? height : menuMaxHeight,
       style: {
         width: 'auto',

package/cjs/index.d.ts

@@ -108,6 +108,8 @@ export { default as RangeSlider } from './RangeSlider';
 export type { RangeSliderProps } from './RangeSlider';
 export { default as Rate } from './Rate';
 export type { RateProps } from './Rate';
+export { default as InlineEdit } from './InlineEdit';
+export type { InlineEditProps } from './InlineEdit';
 export { default as Tree } from './Tree';
 export type { TreeProps } from './Tree';
 export { default as CheckTree } from './CheckTree';

package/cjs/index.js

@@ -4,7 +4,7 @@
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.useFormClassNames = exports.useToaster = exports.VisuallyHidden = exports.useMediaQuery = exports.CustomProvider = exports.Affix = exports.DOMHelper = exports.Animation = exports.Schema = exports.Stack = exports.Divider = exports.Footer = exports.Sidebar = exports.Header = exports.Content = exports.Container = exports.FlexboxGrid = exports.Col = exports.Row = exports.Grid = exports.Carousel = exports.Calendar = exports.List = exports.TagGroup = exports.Tag = exports.Timeline = exports.Progress = exports.Table = exports.Tabs = exports.PanelGroup = exports.Accordion = exports.Panel = exports.CheckTree = exports.Tree = exports.Rate = exports.RangeSlider = exports.Slider = exports.Uploader = exports.AutoComplete = exports.DateRangePicker = exports.DateRangeInput = exports.DatePicker = exports.DateInput = exports.MultiCascader = exports.Cascader = exports.CheckTreePicker = exports.TreePicker = exports.TagInput = exports.TagPicker = exports.InputPicker = exports.CheckPicker = exports.SelectPicker = exports.RadioTileGroup = exports.RadioTile = exports.RadioGroup = exports.Radio = exports.CheckboxGroup = exports.Checkbox = exports.InputGroup = exports.InputNumber = exports.MaskedInput = exports.Input = exports.Form = exports.Toggle = exports.Steps = exports.Pagination = exports.Breadcrumb = exports.Sidenav = exports.Navbar = exports.Nav = exports.Dropdown = exports.toaster = exports.AvatarGroup = exports.Avatar = exports.Badge = exports.Placeholder = exports.SafeAnchor = exports.Loader = exports.Drawer = exports.Message = exports.Notification = exports.Modal = exports.Popover = exports.Tooltip = exports.Whisper = exports.ButtonGroup = exports.ButtonToolbar = exports.IconButton = exports.Button = void 0;
+exports.useFormClassNames = exports.useToaster = exports.VisuallyHidden = exports.useMediaQuery = exports.CustomProvider = exports.Affix = exports.DOMHelper = exports.Animation = exports.Schema = exports.Stack = exports.Divider = exports.Footer = exports.Sidebar = exports.Header = exports.Content = exports.Container = exports.FlexboxGrid = exports.Col = exports.Row = exports.Grid = exports.Carousel = exports.Calendar = exports.List = exports.TagGroup = exports.Tag = exports.Timeline = exports.Progress = exports.Table = exports.Tabs = exports.PanelGroup = exports.Accordion = exports.Panel = exports.CheckTree = exports.Tree = exports.InlineEdit = exports.Rate = exports.RangeSlider = exports.Slider = exports.Uploader = exports.AutoComplete = exports.DateRangePicker = exports.DateRangeInput = exports.DatePicker = exports.DateInput = exports.MultiCascader = exports.Cascader = exports.CheckTreePicker = exports.TreePicker = exports.TagInput = exports.TagPicker = exports.InputPicker = exports.CheckPicker = exports.SelectPicker = exports.RadioTileGroup = exports.RadioTile = exports.RadioGroup = exports.Radio = exports.CheckboxGroup = exports.Checkbox = exports.InputGroup = exports.InputNumber = exports.MaskedInput = exports.Input = exports.Form = exports.Toggle = exports.Steps = exports.Pagination = exports.Breadcrumb = exports.Sidenav = exports.Navbar = exports.Nav = exports.Dropdown = exports.toaster = exports.AvatarGroup = exports.Avatar = exports.Badge = exports.Placeholder = exports.SafeAnchor = exports.Loader = exports.Drawer = exports.Message = exports.Notification = exports.Modal = exports.Popover = exports.Tooltip = exports.Whisper = exports.ButtonGroup = exports.ButtonToolbar = exports.IconButton = exports.Button = void 0;
 var _Button = _interopRequireDefault(require("./Button"));
 exports.Button = _Button.default;
 var _IconButton = _interopRequireDefault(require("./IconButton"));
@@ -117,6 +117,8 @@ var _RangeSlider = _interopRequireDefault(require("./RangeSlider"));
 exports.RangeSlider = _RangeSlider.default;
 var _Rate = _interopRequireDefault(require("./Rate"));
 exports.Rate = _Rate.default;
+var _InlineEdit = _interopRequireDefault(require("./InlineEdit"));
+exports.InlineEdit = _InlineEdit.default;
 var _Tree = _interopRequireDefault(require("./Tree"));
 exports.Tree = _Tree.default;
 var _CheckTree = _interopRequireDefault(require("./CheckTree"));

package/cjs/internals/Picker/ListCheckItem.js

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

package/cjs/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[];