rsuite 5.53.2 → 5.55.0

package/cjs/DOMHelper/index.d.ts

@@ -11,43 +11,34 @@ declare const DOMHelper: {
     off: typeof helpers.off;
     WheelHandler: typeof helpers.WheelHandler;
     DOMMouseMoveTracker: typeof helpers.DOMMouseMoveTracker;
-    addClass: (target: Element, className: string) => Element;
-    removeClass: (target: Element, className: string) => Element;
-    hasClass: (target: Element, className: string) => boolean;
-    toggleClass: (target: Element, className: string) => Element;
-    cancelAnimationFramePolyfill: typeof cancelAnimationFrame | typeof clearTimeout;
+    PointerMoveTracker: typeof helpers.PointerMoveTracker;
+    addClass: typeof helpers.addClass;
+    removeClass: typeof helpers.removeClass;
+    hasClass: typeof helpers.hasClass;
+    toggleClass: typeof helpers.toggleClass;
+    cancelAnimationFramePolyfill: typeof cancelAnimationFrame;
     requestAnimationFramePolyfill: typeof requestAnimationFrame | ((callback: (t: number) => void) => NodeJS.Timeout);
     getAnimationEnd: typeof helpers.getAnimationEnd;
-    ownerDocument: (node: Element | null) => Document;
-    ownerWindow: (componentOrElement: Element) => Window;
-    getWindow: (node: any) => Window;
-    getContainer: (container: Element | (() => Element | null) | null, defaultContainer?: Element | undefined) => Element;
+    ownerDocument: typeof helpers.ownerDocument;
+    ownerWindow: typeof helpers.ownerWindow;
+    getWindow: typeof helpers.getWindow;
+    getContainer: typeof helpers.getContainer;
     canUseDOM: boolean;
     contains: (context: Element, node: Node & ParentNode) => boolean;
-    scrollTop: (node: Element, val?: number | undefined) => number;
-    scrollLeft: (node: Element, val?: number | undefined) => number;
-    getOffset: (node: Element | null) => {
-        top: number;
-        left: number;
-        height: number;
-        width: number;
-    } | DOMRect | null;
-    nodeName: (node: Element) => string;
-    getOffsetParent: (node: Element) => Element;
-    getPosition: (node: Element, offsetParent?: Element | undefined, calcMargin?: boolean | undefined) => DOMRect | {
-        top: number;
-        left: number;
-        height: number;
-        width: number;
-    } | null;
-    isOverflowing: (container: Element) => boolean;
-    getScrollbarSize: (recalc?: boolean | undefined) => number | void;
-    getHeight: (node: Element | Window, client?: Element | undefined) => number;
-    getWidth: (node: Element | Window, client?: Element | undefined) => number;
+    scrollTop: typeof helpers.scrollTop;
+    scrollLeft: typeof helpers.scrollLeft;
+    getOffset: typeof helpers.getOffset;
+    nodeName: typeof helpers.nodeName;
+    getOffsetParent: typeof helpers.getOffsetParent;
+    getPosition: typeof helpers.getPosition;
+    isOverflowing: typeof helpers.isOverflowing;
+    getScrollbarSize: typeof helpers.getScrollbarSize;
+    getHeight: typeof helpers.getHeight;
+    getWidth: typeof helpers.getWidth;
     isFocusable: typeof helpers.isFocusable;
-    getStyle: (node: Element, property?: string | undefined) => string | CSSStyleDeclaration;
-    removeStyle: (node: Element, keys: string | string[]) => void;
-    addStyle: (node: Element, property: string | Partial<import("dom-lib/esm/addStyle").CSSProperty>, value?: string | number | undefined) => void;
+    getStyle: typeof helpers.getStyle;
+    removeStyle: typeof helpers.removeStyle;
+    addStyle: typeof helpers.addStyle;
     translateDOMPositionXY: (style: CSSStyleDeclaration, x?: number | undefined, y?: number | undefined) => CSSStyleDeclaration;
 };
 export default DOMHelper;

package/cjs/DatePicker/DatePicker.d.ts

@@ -117,6 +117,12 @@ export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, Form
      * @deprecated
      */
     renderValue?: (value: Date, format: string) => string;
+    /**
+     * Custom rendering calendar cell content.
+     *
+     * @version 5.54.0
+     */
+    renderCell?: (date: Date) => React.ReactNode;
 }
 /**
  * A date picker allows users to select a date from a calendar.

package/cjs/DatePicker/DatePicker.js

@@ -101,7 +101,8 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onToggleMonthDropdown = props.onToggleMonthDropdown,
     onToggleTimeDropdown = props.onToggleTimeDropdown,
     onShortcutClick = props.onShortcutClick,
-    restProps = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "editable", "defaultValue", "disabled", "readOnly", "plaintext", "format", "id", "isoWeek", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "appearance", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showWeekNumbers", "style", "size", "caretAs", "disabledDate", "disabledHours", "disabledMinutes", "disabledSeconds", "shouldDisableDate", "shouldDisableHour", "shouldDisableMinute", "shouldDisableSecond", "onChange", "onChangeCalendarDate", "onClean", "onClose", "onEntered", "onExited", "onNextMonth", "onOk", "onOpen", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown", "onShortcutClick"]);
+    renderCell = props.renderCell,
+    restProps = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "editable", "defaultValue", "disabled", "readOnly", "plaintext", "format", "id", "isoWeek", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "appearance", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showWeekNumbers", "style", "size", "caretAs", "disabledDate", "disabledHours", "disabledMinutes", "disabledSeconds", "shouldDisableDate", "shouldDisableHour", "shouldDisableMinute", "shouldDisableSecond", "onChange", "onChangeCalendarDate", "onClean", "onClose", "onEntered", "onExited", "onNextMonth", "onOk", "onOpen", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown", "onShortcutClick", "renderCell"]);
   var id = (0, _utils.useUniqueId)('rs-', idProp);
   var _usePickerRef = (0, _Picker.usePickerRef)(ref),
     trigger = _usePickerRef.trigger,
@@ -443,7 +444,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       locale: locale,
       disabledShortcut: disabledToolbarHandle,
       onShortcutClick: handleShortcutPageDate
-    }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CalendarContainer.default, (0, _extends2.default)({}, calendarProps, {
+    }), /*#__PURE__*/_react.default.createElement(_Stack.default.Item, null, /*#__PURE__*/_react.default.createElement(_CalendarContainer.default, (0, _extends2.default)({}, calendarProps, {
       targetId: id,
       locale: locale,
       showWeekNumbers: showWeekNumbers,
@@ -457,6 +458,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       format: formatStr,
       isoWeek: isoWeek,
       calendarDate: calendarDate,
+      renderCellOnPicker: renderCell,
       onMoveForward: handleMoveForward,
       onMoveBackward: handleMoveBackward,
       onSelect: handleSelect,
@@ -582,7 +584,6 @@ DatePicker.propTypes = (0, _extends2.default)({}, _Picker.pickerPropTypes, {
   onToggleMonthDropdown: _propTypes.default.func,
   onToggleTimeDropdown: _propTypes.default.func,
   oneTap: _propTypes.default.bool,
-  panelContainerRef: _propTypes.default.any,
   ranges: _propTypes.default.array,
   showMeridian: _propTypes.default.bool,
   showWeekNumbers: _propTypes.default.bool,

package/cjs/DateRangePicker/DateRangePicker.js

@@ -172,7 +172,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     var nextValue = dateRange;
 
     // The time should remain the same when the dates in the date range are changed.
-    if ((0, _dateUtils.shouldRenderTime)(formatStr) && dateRange !== null && dateRange !== void 0 && dateRange.length && eventName !== 'changeTime') {
+    if ((0, _dateUtils.shouldRenderTime)(formatStr) && dateRange !== null && dateRange !== void 0 && dateRange.length && eventName !== 'changeTime' && eventName !== 'shortcutSelection') {
       var _startDate = (0, _dateUtils.copyTime)({
         from: getCalendarDatetime('start'),
         to: dateRange[0]
@@ -447,7 +447,8 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     }
     var value = range.value;
     setCalendarDateRange({
-      dateRange: value
+      dateRange: value,
+      eventName: 'shortcutSelection'
     });
     if (closeOverlay) {
       setDateRange(event, value, closeOverlay);
@@ -674,6 +675,11 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     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 (!(0, _dateUtils.isValid)(startDate) || !(0, _dateUtils.isValid)(endDate)) {

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

@@ -0,0 +1,34 @@
+'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 _Check = _interopRequireDefault(require("@rsuite/icons/Check"));
+var _Close = _interopRequireDefault(require("@rsuite/icons/Close"));
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+var _Stack = _interopRequireDefault(require("../Stack"));
+var EditableControls = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var onSave = props.onSave,
+    onCancel = props.onCancel,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["onSave", "onCancel"]);
+  return /*#__PURE__*/_react.default.createElement(_Stack.default, (0, _extends2.default)({
+    ref: ref,
+    spacing: 6
+  }, rest), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    size: "sm",
+    icon: /*#__PURE__*/_react.default.createElement(_Check.default, null),
+    "aria-label": "Save",
+    onClick: onSave
+  }), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    size: "sm",
+    icon: /*#__PURE__*/_react.default.createElement(_Close.default, null),
+    "aria-label": "Cancel",
+    onClick: onCancel
+  }));
+});
+var _default = EditableControls;
+exports.default = _default;

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';