rsuite 5.53.1 → 5.54.0

package/esm/CheckTreePicker/CheckTreePicker.js

@@ -130,7 +130,7 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useClassNames = useClassNames(classPrefix),
     prefix = _useClassNames.prefix,
     merge = _useClassNames.merge;
-  var _useClassNames2 = useClassNames('check-tree'),
+  var _useClassNames2 = useClassNames(inline && classPrefix !== 'picker' ? classPrefix : 'check-tree'),
     checkTreePrefix = _useClassNames2.prefix,
     withCheckTreeClassPrefix = _useClassNames2.withClassPrefix;
   var _useControlled = useControlled(controlledValue, defaultValue),
@@ -602,8 +602,11 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }, nodeProps));
   };
   var renderCheckTree = function renderCheckTree() {
-    var _withCheckTreeClassPr, _merge2;
-    var classes = withCheckTreeClassPrefix((_withCheckTreeClassPr = {}, _withCheckTreeClassPr[className !== null && className !== void 0 ? className : ''] = inline, _withCheckTreeClassPr['without-children'] = !isSomeNodeHasChildren(data, childrenKey), _withCheckTreeClassPr.virtualized = virtualized, _withCheckTreeClassPr));
+    var _merge2, _merge3;
+    var classes = merge(withCheckTreeClassPrefix({
+      'without-children': !isSomeNodeHasChildren(data, childrenKey),
+      virtualized: virtualized
+    }), (_merge2 = {}, _merge2[className !== null && className !== void 0 ? className : ''] = inline, _merge2));
     var formattedNodes = getFormattedNodes(renderNode);
     if (!formattedNodes.some(function (v) {
       return v !== null;
@@ -612,18 +615,25 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
         className: prefix('none')
       }, locale.noResultsText);
     }
-    var treeNodesClass = merge(checkTreePrefix('root'), (_merge2 = {}, _merge2[checkTreePrefix('all-uncheckable')] = isEveryFirstLevelNodeUncheckable(flattenNodes, uncheckableItemValues, valueKey), _merge2));
-    return /*#__PURE__*/React.createElement(TreeView, {
-      ref: inline ? root : treeView,
+    var treeNodesClass = merge(checkTreePrefix('root'), (_merge3 = {}, _merge3[checkTreePrefix('all-uncheckable')] = isEveryFirstLevelNodeUncheckable(flattenNodes, uncheckableItemValues, valueKey), _merge3));
+    var treeViewProps = {
+      ref: treeView
+    };
+    if (inline) {
+      treeViewProps = _extends({
+        ref: root,
+        style: _extends({
+          height: height
+        }, style)
+      }, rest);
+    }
+    return /*#__PURE__*/React.createElement(TreeView, _extends({}, treeViewProps, {
       multiselectable: true,
       treeRootClassName: treeNodesClass,
       className: classes,
-      style: inline ? _extends({
-        height: height
-      }, style) : {},
       onScroll: onScroll,
       onKeyDown: inline ? handleTreeKeydown : undefined
-    }, virtualized ? /*#__PURE__*/React.createElement(AutoSizer, {
+    }), virtualized ? /*#__PURE__*/React.createElement(AutoSizer, {
       defaultHeight: inline ? height : menuMaxHeight,
       style: {
         width: 'auto',

package/esm/DatePicker/DatePicker.js

@@ -437,7 +437,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       locale: locale,
       disabledShortcut: disabledToolbarHandle,
       onShortcutClick: handleShortcutPageDate
-    }), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CalendarContainer, _extends({}, calendarProps, {
+    }), /*#__PURE__*/React.createElement(Stack.Item, null, /*#__PURE__*/React.createElement(CalendarContainer, _extends({}, calendarProps, {
       targetId: id,
       locale: locale,
       showWeekNumbers: showWeekNumbers,

package/esm/DateRangePicker/DateRangePicker.js

@@ -668,6 +668,11 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (!value) {
       return false;
     }
+
+    // If the value is an empty array, it is not an error value.
+    if (Array.isArray(value) && value.length === 0) {
+      return false;
+    }
     var startDate = value[0],
       endDate = value[1];
     if (!isValid(startDate) || !isValid(endDate)) {

package/esm/InlineEdit/EditableControls.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type StackProps } from '../Stack';
+interface EditableControlsProps extends StackProps {
+    onSave: () => void;
+    onCancel: () => void;
+}
+declare const EditableControls: React.ForwardRefExoticComponent<EditableControlsProps & React.RefAttributes<HTMLDivElement>>;
+export default EditableControls;

package/esm/InlineEdit/EditableControls.js

@@ -0,0 +1,28 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import CheckIcon from '@rsuite/icons/Check';
+import CloseIcon from '@rsuite/icons/Close';
+import IconButton from '../IconButton';
+import Stack from '../Stack';
+var EditableControls = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var onSave = props.onSave,
+    onCancel = props.onCancel,
+    rest = _objectWithoutPropertiesLoose(props, ["onSave", "onCancel"]);
+  return /*#__PURE__*/React.createElement(Stack, _extends({
+    ref: ref,
+    spacing: 6
+  }, rest), /*#__PURE__*/React.createElement(IconButton, {
+    size: "sm",
+    icon: /*#__PURE__*/React.createElement(CheckIcon, null),
+    "aria-label": "Save",
+    onClick: onSave
+  }), /*#__PURE__*/React.createElement(IconButton, {
+    size: "sm",
+    icon: /*#__PURE__*/React.createElement(CloseIcon, null),
+    "aria-label": "Cancel",
+    onClick: onCancel
+  }));
+});
+export default EditableControls;

package/esm/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/esm/InlineEdit/InlineEdit.js

@@ -0,0 +1,92 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useClassNames, mergeRefs } from '../utils';
+import { oneOf } from '../internals/propTypes';
+import EditableControls from './EditableControls';
+import useFocusEvent from './useFocusEvent';
+import useEditState from './useEditState';
+import { renderChildren, defaultRenderInput } from './renderChildren';
+var InlineEdit = /*#__PURE__*/React.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 ? 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 = _objectWithoutPropertiesLoose(props, ["as", "children", "classPrefix", "className", "disabled", "size", "showControls", "stateOnBlur", "placeholder"]);
+  var _useClassNames = useClassNames(classPrefix),
+    withClassPrefix = _useClassNames.withClassPrefix,
+    merge = _useClassNames.merge,
+    prefix = _useClassNames.prefix;
+  var _useEditState = useEditState(_extends({}, 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 = useFocusEvent({
+      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.createElement(Component, _extends({
+    ref: mergeRefs(root, ref),
+    tabIndex: 0,
+    className: merge(className, withClassPrefix(size, {
+      disabled: disabled
+    })),
+    onClick: onClick,
+    onKeyDown: onKeyDown
+  }, htmlProps), renderChildren(children, childrenProps, target), showControls && isEditing && /*#__PURE__*/React.createElement(EditableControls, {
+    className: prefix('controls'),
+    onSave: onSave,
+    onCancel: onCancel
+  }));
+});
+InlineEdit.displayName = 'InlineEdit';
+InlineEdit.propTypes = {
+  children: PropTypes.any,
+  classPrefix: PropTypes.string,
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  defaultValue: PropTypes.any,
+  value: PropTypes.any,
+  showControls: PropTypes.bool,
+  placeholder: PropTypes.string,
+  size: oneOf(['lg', 'md', 'sm', 'xs']),
+  stateOnBlur: oneOf(['save', 'cancel']),
+  onChange: PropTypes.func,
+  onCancel: PropTypes.func,
+  onSave: PropTypes.func,
+  onEdit: PropTypes.func
+};
+export default InlineEdit;

package/esm/InlineEdit/index.d.ts

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

package/esm/InlineEdit/index.js

@@ -0,0 +1,3 @@
+'use client';
+import InlineEdit from './InlineEdit';
+export default InlineEdit;

package/esm/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/esm/InlineEdit/renderChildren.js

@@ -0,0 +1,34 @@
+'use client';
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+import Input from '../Input';
+export function defaultRenderInput(props, ref) {
+  return /*#__PURE__*/React.createElement(Input, _extends({
+    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) || '';
+}
+export function renderChildren(children, props, ref) {
+  if (typeof children === 'function') {
+    return children(props, ref);
+  }
+  if (pickers.includes(getDisplayName(children))) {
+    var onBlur = props.onBlur,
+      rest = _objectWithoutPropertiesLoose(props, ["onBlur"]); // if the children is a picker, we should pass the onBlur to the onClose
+    return /*#__PURE__*/React.cloneElement(children, _extends({}, rest, {
+      onClose: onBlur,
+      ref: ref
+    }));
+  }
+  return /*#__PURE__*/React.cloneElement(children, _extends({}, props, {
+    ref: ref
+  }));
+}

package/esm/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/esm/InlineEdit/useEditState.js

@@ -0,0 +1,76 @@
+'use client';
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import { useState } from 'react';
+import { useEventCallback, useControlled } from '../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 = _objectWithoutPropertiesLoose(props, ["value", "defaultValue", "disabled", "onChange", "onEdit", "onCancel", "onSave", "onClick"]);
+  var _useState = useState(false),
+    isEditing = _useState[0],
+    setIsEditing = _useState[1];
+  var _useControlled = 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 = useState(),
+    resetValue = _useState2[0],
+    setResetValue = _useState2[1];
+  var handleClick = 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 = useEventCallback(function (value, event) {
+    setValue(value);
+    onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
+  });
+  var handleCancel = 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 = 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 = 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
+  };
+};
+export default useEditState;

package/esm/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/esm/InlineEdit/useFocusEvent.js

@@ -0,0 +1,56 @@
+'use client';
+import { useRef } from 'react';
+import { contains, ownerDocument } from 'dom-lib';
+import { useIsomorphicLayoutEffect, useUpdateEffect, useEventCallback } from '../utils';
+import { RSUITE_PICKER_TYPE } from '../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 = useRef(null);
+  var rootRef = useRef(null);
+  var isPicker = ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.type) === 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 = useEventCallback(function (event) {
+    if (event) {
+      var _event$relatedTarget;
+      var relatedTarget = (_event$relatedTarget = event.relatedTarget) !== null && _event$relatedTarget !== void 0 ? _event$relatedTarget : ownerDocument(event.currentTarget).activeElement;
+      if (rootRef.current && 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);
+    }
+  });
+  useIsomorphicLayoutEffect(function () {
+    if (isEditing) {
+      focus();
+    }
+  }, []);
+  useUpdateEffect(function () {
+    if (isEditing) {
+      focus();
+    }
+  }, [isEditing]);
+  return {
+    target: ref,
+    root: rootRef,
+    onBlur: handleBlur
+  };
+};
+export default useFocusEvent;

package/esm/Input/Input.js

@@ -29,13 +29,14 @@ var Input = /*#__PURE__*/React.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 = _objectWithoutPropertiesLoose(props, ["className", "classPrefix", "as", "type", "disabled", "value", "defaultValue", "inputRef", "id", "size", "htmlSize", "plaintext", "readOnly", "onPressEnter", "onFocus", "onBlur", "onKeyDown", "onChange"]);
+    rest = _objectWithoutPropertiesLoose(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 === KEY_VALUES.ENTER) {
       onPressEnter === null || onPressEnter === void 0 ? void 0 : onPressEnter(event);
@@ -60,7 +61,8 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
   if (plaintext) {
     return /*#__PURE__*/React.createElement(Plaintext, {
       ref: ref,
-      localeKey: "unfilled"
+      localeKey: "unfilled",
+      placeholder: placeholder
     }, typeof value === 'undefined' ? defaultValue : value);
   }
   var inputable = !disabled && !readOnly;
@@ -80,7 +82,8 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
     defaultValue: defaultValue,
     disabled: disabled,
     readOnly: readOnly,
-    size: htmlSize
+    size: htmlSize,
+    placeholder: placeholder
   }));
 });
 Input.displayName = 'Input';

package/esm/InputPicker/InputPicker.js

@@ -25,6 +25,7 @@ import Tag from '../Tag';
 import InputAutosize from './InputAutosize';
 import TextBox from './TextBox';
 import InputPickerContext from './InputPickerContext';
+import Stack from '../Stack';
 var convertSize = function convertSize(size) {
   switch (size) {
     case 'lg':
@@ -636,12 +637,12 @@ var InputPicker = /*#__PURE__*/React.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;
+      plaintextProps.spacing = 6;
+      plaintextProps.wrap = true;
+      plaintextProps.childrenRenderMode = 'clone';
     }
     return /*#__PURE__*/React.createElement(Plaintext, _extends({
       localeKey: "notSelected",

package/esm/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/esm/Slider/Slider.js

@@ -73,12 +73,13 @@ var Slider = /*#__PURE__*/React.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 = _objectWithoutPropertiesLoose(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 = _objectWithoutPropertiesLoose(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 = useRef(null);
   var _useClassNames = useClassNames(classPrefix),
     merge = _useClassNames.merge,
@@ -200,7 +201,8 @@ var Slider = /*#__PURE__*/React.forwardRef(function (props, ref) {
   if (plaintext) {
     return /*#__PURE__*/React.createElement(Plaintext, {
       localeKey: "notSelected",
-      ref: ref
+      ref: ref,
+      placeholder: placeholder
     }, value);
   }
   return /*#__PURE__*/React.createElement(Componnet, _extends({}, rest, {

package/esm/TreePicker/TreePicker.js

@@ -157,7 +157,7 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useClassNames = useClassNames(classPrefix),
     prefix = _useClassNames.prefix,
     merge = _useClassNames.merge;
-  var _useClassNames2 = useClassNames('tree'),
+  var _useClassNames2 = useClassNames(inline && classPrefix !== 'picker' ? classPrefix : 'tree'),
     treePrefix = _useClassNames2.prefix,
     withTreeClassPrefix = _useClassNames2.withClassPrefix;
   var _useTreeSearch = useTreeSearch({
@@ -584,18 +584,27 @@ var TreePicker = /*#__PURE__*/React.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.createElement(TreeView, {
+    var treeViewProps = {
+      ref: treeView
+    };
+    if (inline) {
+      treeViewProps = _extends({
+        ref: root,
+        style: _extends({
+          height: height
+        }, style),
+        onKeyDown: handleTreeKeyDown
+      }, rest);
+    }
+    return /*#__PURE__*/React.createElement(TreeView, _extends({}, treeViewProps, {
       treeRootClassName: treePrefix('root'),
-      ref: inline ? root : treeView,
-      className: classes,
-      style: inline ? _extends({
-        height: height
-      }, style) : {},
-      onKeyDown: inline ? handleTreeKeyDown : undefined
-    }, virtualized ? /*#__PURE__*/React.createElement(AutoSizer, {
+      className: classes
+    }), virtualized ? /*#__PURE__*/React.createElement(AutoSizer, {
       defaultHeight: inline ? height : menuMaxHeight,
       style: {
         width: 'auto',

package/esm/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';