rsuite 5.53.2 → 5.55.0

package/esm/Calendar/CalendarContainer.d.ts

@@ -58,6 +58,10 @@ export interface CalendarProps extends WithAsProps, Omit<HTMLAttributes<HTMLDivE
     onSelect?: (date: Date, event: React.MouseEvent) => void;
     /** Custom rendering cell*/
     renderCell?: (date: Date) => React.ReactNode;
+    /**
+     * Custom rendering cell on the picker
+     */
+    renderCellOnPicker?: (date: Date) => React.ReactNode;
     /** Custom cell classes base on it's date */
     cellClassName?: (date: Date) => string | undefined;
     /** Called when opening the month view */

package/esm/Calendar/CalendarContainer.js

@@ -44,12 +44,13 @@ var CalendarContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
     calendarDateProp = props.calendarDate,
     cellClassName = props.cellClassName,
     renderCell = props.renderCell,
+    renderCellOnPicker = props.renderCellOnPicker,
     renderTitle = props.renderTitle,
     renderToolbar = props.renderToolbar,
     showMeridian = props.showMeridian,
     showWeekNumbers = props.showWeekNumbers,
     inline = props.inline,
-    rest = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "dateRange", "disabledBackward", "defaultState", "disabledDate", "disabledForward", "format", "hoverRangeValue", "isoWeek", "targetId", "limitEndYear", "limitStartYear", "locale", "onChangeMonth", "onChangeTime", "onMouseMove", "onMoveBackward", "onMoveForward", "onSelect", "onToggleMeridian", "onToggleMonthDropdown", "onToggleTimeDropdown", "calendarDate", "cellClassName", "renderCell", "renderTitle", "renderToolbar", "showMeridian", "showWeekNumbers", "inline"]);
+    rest = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "dateRange", "disabledBackward", "defaultState", "disabledDate", "disabledForward", "format", "hoverRangeValue", "isoWeek", "targetId", "limitEndYear", "limitStartYear", "locale", "onChangeMonth", "onChangeTime", "onMouseMove", "onMoveBackward", "onMoveForward", "onSelect", "onToggleMeridian", "onToggleMonthDropdown", "onToggleTimeDropdown", "calendarDate", "cellClassName", "renderCell", "renderCellOnPicker", "renderTitle", "renderToolbar", "showMeridian", "showWeekNumbers", "inline"]);
   var _useClassNames = useClassNames(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge,
@@ -134,6 +135,7 @@ var CalendarContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onSelect: onSelect,
     cellClassName: cellClassName,
     renderCell: renderCell,
+    renderCellOnPicker: renderCellOnPicker,
     showWeekNumbers: showWeekNumbers,
     inline: inline
   };

package/esm/Calendar/TableCell.js

@@ -3,8 +3,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React from 'react';
 import partial from 'lodash/partial';
-import { DateUtils, useClassNames, useCustom } from '../utils';
-import { isSameDay } from '../utils/dateUtils';
+import { useClassNames, useCustom } from '../utils';
+import { isSameDay, getDate } from '../utils/dateUtils';
 import { useCalendarContext } from './CalendarContext';
 import { getAriaLabel } from './utils';
 var TableCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -25,6 +25,7 @@ var TableCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onMouseMove = _useCalendarContext.onMouseMove,
     cellClassName = _useCalendarContext.cellClassName,
     renderCell = _useCalendarContext.renderCell,
+    renderCellOnPicker = _useCalendarContext.renderCellOnPicker,
     overrideLocale = _useCalendarContext.locale;
   var _useClassNames = useClassNames(classPrefix),
     prefix = _useClassNames.prefix,
@@ -58,9 +59,9 @@ var TableCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onClick: onSelect ? partial(onSelect, date, disabled) : undefined
   }, rest), /*#__PURE__*/React.createElement("div", {
     className: prefix('cell-content')
-  }, /*#__PURE__*/React.createElement("span", {
+  }, renderCellOnPicker ? renderCellOnPicker(date) : /*#__PURE__*/React.createElement("span", {
     className: prefix('cell-day')
-  }, DateUtils.getDate(date)), renderCell === null || renderCell === void 0 ? void 0 : renderCell(date)));
+  }, getDate(date)), renderCell === null || renderCell === void 0 ? void 0 : renderCell(date)));
 });
 TableCell.displayName = 'CalendarTableCell';
 export default TableCell;

package/esm/Calendar/types.d.ts

@@ -13,6 +13,7 @@ export interface CalendarInnerContextValue {
     onMouseMove?: (date: Date) => void;
     onSelect?: (date: Date, event: React.MouseEvent) => void;
     renderCell?: (date: Date) => React.ReactNode;
+    renderCellOnPicker?: (date: Date) => React.ReactNode;
     cellClassName?: (date: Date) => string | undefined;
     showWeekNumbers?: boolean;
     inline?: boolean;

package/esm/Cascader/DropdownMenu.js

@@ -65,7 +65,9 @@ var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
       if (activeItem) {
         var position = getPosition(activeItem, column);
         // Let the active option scroll into view.
-        scrollTop(column, position === null || position === void 0 ? void 0 : position.top);
+        if (position !== null && position !== void 0 && position.top) {
+          scrollTop(column, position === null || position === void 0 ? void 0 : position.top);
+        }
       }
     });
   }, [prefix]);

package/esm/Cascader/TreeView.js

@@ -65,7 +65,9 @@ var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
       if (activeItem) {
         var position = getPosition(activeItem, column);
         // Let the active option scroll into view.
-        scrollTop(column, position === null || position === void 0 ? void 0 : position.top);
+        if (position !== null && position !== void 0 && position.top) {
+          scrollTop(column, position === null || position === void 0 ? void 0 : position.top);
+        }
       }
     });
   }, [prefix]);

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

@@ -95,7 +95,8 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onToggleMonthDropdown = props.onToggleMonthDropdown,
     onToggleTimeDropdown = props.onToggleTimeDropdown,
     onShortcutClick = props.onShortcutClick,
-    restProps = _objectWithoutPropertiesLoose(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 = _objectWithoutPropertiesLoose(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 = useUniqueId('rs-', idProp);
   var _usePickerRef = usePickerRef(ref),
     trigger = _usePickerRef.trigger,
@@ -437,7 +438,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,
@@ -451,6 +452,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       format: formatStr,
       isoWeek: isoWeek,
       calendarDate: calendarDate,
+      renderCellOnPicker: renderCell,
       onMoveForward: handleMoveForward,
       onMoveBackward: handleMoveBackward,
       onSelect: handleSelect,
@@ -576,7 +578,6 @@ DatePicker.propTypes = _extends({}, pickerPropTypes, {
   onToggleMonthDropdown: PropTypes.func,
   onToggleTimeDropdown: PropTypes.func,
   oneTap: PropTypes.bool,
-  panelContainerRef: PropTypes.any,
   ranges: PropTypes.array,
   showMeridian: PropTypes.bool,
   showWeekNumbers: PropTypes.bool,

package/esm/DateRangePicker/DateRangePicker.js

@@ -166,7 +166,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var nextValue = dateRange;
 
     // The time should remain the same when the dates in the date range are changed.
-    if (shouldRenderTime(formatStr) && dateRange !== null && dateRange !== void 0 && dateRange.length && eventName !== 'changeTime') {
+    if (shouldRenderTime(formatStr) && dateRange !== null && dateRange !== void 0 && dateRange.length && eventName !== 'changeTime' && eventName !== 'shortcutSelection') {
       var _startDate = copyTime({
         from: getCalendarDatetime('start'),
         to: dateRange[0]
@@ -441,7 +441,8 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     var value = range.value;
     setCalendarDateRange({
-      dateRange: value
+      dateRange: value,
+      eventName: 'shortcutSelection'
     });
     if (closeOverlay) {
       setDateRange(event, value, closeOverlay);
@@ -668,6 +669,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;