rsuite 5.48.1 → 5.49.0

package/cjs/DatePicker/PickerIndicator.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface PickerIndicatorProps {
+    loading?: boolean;
+    caretAs?: React.ElementType | null;
+    onClose?: () => void;
+    showCleanButton?: boolean;
+    as?: React.ElementType;
+}
+declare const PickerIndicator: ({ loading, caretAs, onClose, showCleanButton, as: Component }: PickerIndicatorProps) => JSX.Element;
+export default PickerIndicator;

package/cjs/DatePicker/PickerIndicator.js

@@ -0,0 +1,48 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _icons = require("@rsuite/icons");
+var _utils = require("../utils");
+var _InputGroup = _interopRequireDefault(require("../InputGroup"));
+var _CloseButton = _interopRequireDefault(require("../CloseButton"));
+var _Loader = _interopRequireDefault(require("../Loader"));
+var PickerIndicator = function PickerIndicator(_ref) {
+  var loading = _ref.loading,
+    caretAs = _ref.caretAs,
+    onClose = _ref.onClose,
+    showCleanButton = _ref.showCleanButton,
+    _ref$as = _ref.as,
+    Component = _ref$as === void 0 ? _InputGroup.default.Addon : _ref$as;
+  var _useCustom = (0, _utils.useCustom)(),
+    locale = _useCustom.locale;
+  var _useClassNames = (0, _utils.useClassNames)('picker'),
+    prefix = _useClassNames.prefix;
+  var addon = function addon() {
+    if (loading) {
+      return /*#__PURE__*/_react.default.createElement(_Loader.default, {
+        className: prefix('loader'),
+        "data-testid": "spinner"
+      });
+    }
+    if (showCleanButton) {
+      return /*#__PURE__*/_react.default.createElement(_CloseButton.default, {
+        className: prefix('clean'),
+        tabIndex: -1,
+        locale: {
+          closeLabel: locale === null || locale === void 0 ? void 0 : locale.clear
+        },
+        onClick: onClose
+      });
+    }
+    return caretAs && /*#__PURE__*/_react.default.createElement(_icons.Icon, {
+      as: caretAs
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(Component, null, addon());
+};
+var _default = PickerIndicator;
+exports.default = _default;

package/cjs/DatePicker/PickerLabel.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface PickerLabelProps {
+    id: string;
+    className?: string;
+    children?: React.ReactNode;
+    as?: React.ElementType;
+}
+declare const PickerLabel: ({ children, className, as: Component, ...rest }: PickerLabelProps) => JSX.Element | null;
+export default PickerLabel;

package/cjs/DatePicker/PickerLabel.js

@@ -0,0 +1,23 @@
+'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 _InputGroup = _interopRequireDefault(require("../InputGroup"));
+var PickerLabel = function PickerLabel(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    _ref$as = _ref.as,
+    Component = _ref$as === void 0 ? _InputGroup.default.Addon : _ref$as,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["children", "className", "as"]);
+  return children ? /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    "data-testid": "picker-label",
+    className: className
+  }, rest), children) : null;
+};
+var _default = PickerLabel;
+exports.default = _default;

package/cjs/DatePicker/Toolbar.js

@@ -7,20 +7,15 @@ 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 _Button = _interopRequireDefault(require("../Button"));
 var _utils = require("../utils");
 var _PredefinedRanges = _interopRequireDefault(require("./PredefinedRanges"));
 var _Stack = _interopRequireDefault(require("../Stack"));
 var SubmitButton = function SubmitButton(_ref) {
-  var hide = _ref.hide,
-    disabledOkBtn = _ref.disabledOkBtn,
+  var disabledOkBtn = _ref.disabledOkBtn,
     calendarDate = _ref.calendarDate,
     onOk = _ref.onOk,
     children = _ref.children;
-  if (hide) {
-    return null;
-  }
   var disabled = disabledOkBtn === null || disabledOkBtn === void 0 ? void 0 : disabledOkBtn(calendarDate);
   return /*#__PURE__*/_react.default.createElement(_Button.default, {
     appearance: "primary",
@@ -33,7 +28,7 @@ var SubmitButton = function SubmitButton(_ref) {
 /**
  * Toolbar for DatePicker and DateRangePicker
  */
-var Toolbar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+var Toolbar = /*#__PURE__*/_react.default.forwardRef(function Toolbar(props, ref) {
   var className = props.className,
     _props$classPrefix = props.classPrefix,
     classPrefix = _props$classPrefix === void 0 ? 'picker-toolbar' : _props$classPrefix,
@@ -69,24 +64,11 @@ var Toolbar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onShortcutClick: onShortcutClick
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: prefix('right')
-  }, /*#__PURE__*/_react.default.createElement(SubmitButton, {
+  }, !hideOkBtn && /*#__PURE__*/_react.default.createElement(SubmitButton, {
     disabledOkBtn: disabledOkBtn,
-    hide: hideOkBtn,
     calendarDate: calendarDate,
     onOk: onOk
   }, locale === null || locale === void 0 ? void 0 : locale.ok)));
 });
-Toolbar.displayName = 'Toolbar';
-Toolbar.propTypes = {
-  ranges: _propTypes.default.array,
-  className: _propTypes.default.string,
-  classPrefix: _propTypes.default.string,
-  calendarDate: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date))]).isRequired,
-  onShortcutClick: _propTypes.default.func,
-  onOk: _propTypes.default.func,
-  disabledShortcut: _propTypes.default.func,
-  disabledOkBtn: _propTypes.default.func,
-  hideOkBtn: _propTypes.default.bool
-};
 var _default = Toolbar;
 exports.default = _default;

package/cjs/DatePicker/utils.d.ts

@@ -1,5 +1,5 @@
 import { ToolbarProps } from './Toolbar';
-import { InnerRange } from './types';
+import { InnerRange, RangeType } from './types';
 import { DateRange } from '../DateRangePicker/types';
 export declare function getDefaultRanges<T extends Date | DateRange>(value: T): InnerRange<T>[];
 /**
@@ -8,3 +8,7 @@ export declare function getDefaultRanges<T extends Date | DateRange>(value: T):
  * @param calendarDate
  */
 export declare const getRanges: <T extends Date | DateRange>({ ranges, calendarDate }: Pick<ToolbarProps<T, T>, "calendarDate" | "ranges">) => InnerRange<T>[];
+export declare function splitRanges(ranges?: RangeType<Date>[]): {
+    sideRanges: RangeType<Date>[];
+    bottomRanges: RangeType<Date>[];
+};

package/cjs/DatePicker/utils.js

@@ -4,6 +4,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.getDefaultRanges = getDefaultRanges;
+exports.splitRanges = splitRanges;
 exports.getRanges = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
@@ -58,4 +59,19 @@ var getRanges = function getRanges(_ref3) {
     calendarDate: calendarDate
   }));
 };
-exports.getRanges = getRanges;
+exports.getRanges = getRanges;
+function splitRanges(ranges) {
+  // The shortcut option on the left side of the calendar panel
+  var sideRanges = (ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {
+    return (range === null || range === void 0 ? void 0 : range.placement) === 'left';
+  })) || [];
+
+  // The shortcut option on the bottom of the calendar panel
+  var bottomRanges = (ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {
+    return (range === null || range === void 0 ? void 0 : range.placement) === 'bottom' || (range === null || range === void 0 ? void 0 : range.placement) === undefined;
+  })) || [];
+  return {
+    sideRanges: sideRanges,
+    bottomRanges: bottomRanges
+  };
+}

package/cjs/DateRangeInput/DateRangeInput.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { InputProps } from '../Input';
+import { FormControlBaseProps } from '../@types/common';
+declare type ValueType = [Date | null, Date | null] | null;
+export interface DateRangeInputProps extends Omit<InputProps, 'value' | 'onChange' | 'defaultValue'>, FormControlBaseProps<ValueType> {
+    /**
+     * The character between the start and end dates.
+     * @default ' ~ '
+     **/
+    character?: string;
+    /**
+     * Format of the date when rendered in the input. Format of the string is based on Unicode Technical Standard.
+     *
+     * @see https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table
+     * @default 'yyyy-MM-dd'
+     **/
+    format?: string;
+    /**
+     * The `placeholder` prop defines the text displayed in a form control when the control has no value.
+     */
+    placeholder?: string;
+}
+/**
+ * The DateRangeInput component lets users select a date with the keyboard.
+ * @version 5.59.0
+ * @see https://rsuitejs.com/components/date-range-input/
+ */
+declare const DateRangeInput: React.ForwardRefExoticComponent<DateRangeInputProps & React.RefAttributes<unknown>>;
+export default DateRangeInput;

package/cjs/DateRangeInput/DateRangeInput.js

@@ -0,0 +1,244 @@
+'use client';
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+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 = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Input = _interopRequireDefault(require("../Input"));
+var _utils = require("../utils");
+var _DateInput = require("../DateInput");
+var _utils2 = require("./utils");
+/**
+ * The DateRangeInput component lets users select a date with the keyboard.
+ * @version 5.59.0
+ * @see https://rsuitejs.com/components/date-range-input/
+ */
+var DateRangeInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var className = props.className,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'date-range-input' : _props$classPrefix,
+    _props$character = props.character,
+    character = _props$character === void 0 ? ' ~ ' : _props$character,
+    _props$format = props.format,
+    formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,
+    valueProp = props.value,
+    _props$defaultValue = props.defaultValue,
+    defaultValue = _props$defaultValue === void 0 ? [] : _props$defaultValue,
+    placeholder = props.placeholder,
+    onChange = props.onChange,
+    onKeyDown = props.onKeyDown,
+    onBlur = props.onBlur,
+    onFocus = props.onFocus,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["className", "classPrefix", "character", "format", "value", "defaultValue", "placeholder", "onChange", "onKeyDown", "onBlur", "onFocus"]);
+  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+    withClassPrefix = _useClassNames.withClassPrefix,
+    merge = _useClassNames.merge;
+  var classes = merge(className, withClassPrefix());
+  var inputRef = (0, _react.useRef)();
+  var _useState = (0, _react.useState)({
+      selectedPattern: 'y',
+      selectionStart: 0,
+      selectionEnd: 0
+    }),
+    selectedState = _useState[0],
+    setSelectedState = _useState[1];
+  var _useCustom = (0, _utils.useCustom)('Calendar'),
+    locale = _useCustom.locale;
+  var rangeFormatStr = "" + formatStr + character + formatStr;
+  var dateLocale = locale.dateLocale;
+  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue),
+    value = _useControlled[0],
+    setValue = _useControlled[1],
+    isControlled = _useControlled[2];
+  var _useState2 = (0, _react.useState)(_utils2.DateType.Start),
+    dateType = _useState2[0],
+    setDateType = _useState2[1];
+  var dateInputOptions = {
+    formatStr: formatStr,
+    locale: dateLocale,
+    isControlledDate: isControlled
+  };
+  var startDateState = (0, _DateInput.useDateInputState)((0, _extends2.default)({}, dateInputOptions, {
+    date: value === null || value === void 0 ? void 0 : value[0]
+  }));
+  var endDateState = (0, _DateInput.useDateInputState)((0, _extends2.default)({}, dateInputOptions, {
+    date: value === null || value === void 0 ? void 0 : value[1]
+  }));
+  var getActiveState = function getActiveState(type) {
+    if (type === void 0) {
+      type = dateType;
+    }
+    return type === _utils2.DateType.Start ? startDateState : endDateState;
+  };
+  var _useIsFocused = (0, _DateInput.useIsFocused)({
+      onBlur: onBlur,
+      onFocus: onFocus
+    }),
+    focused = _useIsFocused[0],
+    focusEventProps = _useIsFocused[1];
+  var renderedValue = (0, _react.useMemo)(function () {
+    var dateString = startDateState.toDateString() + character + endDateState.toDateString();
+    if (!startDateState.isEmptyValue() || !endDateState.isEmptyValue()) {
+      return dateString;
+    }
+    return !focused ? '' : dateString;
+  }, [character, endDateState, focused, startDateState]);
+  var keyPressOptions = {
+    formatStr: formatStr,
+    rangeFormatStr: rangeFormatStr,
+    localize: dateLocale.localize,
+    selectedMonth: getActiveState().dateField.month,
+    dateString: renderedValue,
+    dateType: dateType,
+    character: character
+  };
+  var setSelectionRange = (0, _DateInput.useInputSelection)(inputRef);
+  var handleChange = (0, _utils.useEventCallback)(function (date, event) {
+    var nextValue = dateType === _utils2.DateType.Start ? [date, value === null || value === void 0 ? void 0 : value[1]] : [value === null || value === void 0 ? void 0 : value[0], date];
+    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
+    setValue(nextValue);
+  });
+  var onSegmentChange = (0, _utils.useEventCallback)(function (event, nextDirection) {
+    var input = event.target;
+    var key = event.key;
+    var direction = nextDirection || (key === 'ArrowRight' ? 'right' : 'left');
+    if (input.selectionEnd === null || input.selectionStart === null) {
+      return;
+    }
+    var cursorIndex = direction === 'right' ? input.selectionEnd : input.selectionStart;
+    var nextDateType = dateType;
+    if ((0, _utils2.isSwitchDateType)(renderedValue, character, cursorIndex, direction)) {
+      nextDateType = dateType === _utils2.DateType.Start ? _utils2.DateType.End : _utils2.DateType.Start;
+      setDateType(nextDateType);
+    }
+    var state = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {
+      dateType: nextDateType,
+      selectedMonth: getActiveState(nextDateType).dateField.month,
+      input: input,
+      direction: direction
+    }));
+    setSelectionRange(state.selectionStart, state.selectionEnd);
+    setSelectedState(state);
+  });
+  var onSegmentValueChange = (0, _utils.useEventCallback)(function (event) {
+    var input = event.target;
+    var key = event.key;
+    var offset = key === 'ArrowUp' ? 1 : -1;
+    var state = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {
+      input: input,
+      valueOffset: offset
+    }));
+    setSelectedState(state);
+    getActiveState().setDateOffset(state.selectedPattern, offset, function (date) {
+      return handleChange(date, event);
+    });
+    setSelectionRange(state.selectionStart, state.selectionEnd);
+  });
+  var onSegmentValueChangeWithNumericKeys = (0, _utils.useEventCallback)(function (event) {
+    var input = event.target;
+    var key = event.key;
+    var pattern = selectedState.selectedPattern;
+    if (!pattern) {
+      return;
+    }
+    var field = getActiveState().getDateField(pattern);
+    var value = parseInt(key, 10);
+    var padValue = parseInt("" + (field.value || '') + key, 10);
+    var newValue = value;
+
+    // Check if the value entered by the user is a valid date
+    if ((0, _DateInput.validateDateTime)(field.name, padValue)) {
+      newValue = padValue;
+    }
+    if (pattern === 'M') {
+      // Month cannot be less than 1.
+      newValue = Math.max(1, newValue);
+    }
+    getActiveState().setDateField(pattern, newValue, function (date) {
+      return handleChange(date, event);
+    });
+
+    // The currently selected month will be retained as a parameter of getInputSelectedState,
+    // but if the user enters a month, the month value will be replaced with the value entered by the user.
+    var selectedMonth = pattern === 'M' ? newValue : getActiveState().dateField.month;
+    var nextState = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {
+      input: input,
+      selectedMonth: selectedMonth
+    }));
+    setSelectedState(nextState);
+    setSelectionRange(nextState.selectionStart, nextState.selectionEnd);
+
+    // If the field is full value, move the cursor to the next field
+    if ((0, _DateInput.isFieldFullValue)(formatStr, newValue, pattern) && input.selectionEnd !== input.value.length) {
+      onSegmentChange(event, 'right');
+    }
+  });
+  var onSegmentValueRemove = (0, _utils.useEventCallback)(function (event) {
+    var input = event.target;
+    if (selectedState.selectedPattern) {
+      var nextState = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {
+        input: input,
+        valueOffset: null
+      }));
+      setSelectedState(nextState);
+      setSelectionRange(nextState.selectionStart, nextState.selectionEnd);
+      getActiveState().setDateField(selectedState.selectedPattern, null, function (date) {
+        return handleChange(date, event);
+      });
+    }
+  });
+  var handleClick = (0, _utils.useEventCallback)(function (event) {
+    var input = event.target;
+    if (input.selectionStart === null) {
+      return;
+    }
+    var cursorIndex = input.selectionStart === renderedValue.length ? 0 : input.selectionStart;
+    var dateType = (0, _utils2.getDateType)(renderedValue, character, cursorIndex);
+    var state = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {
+      dateType: dateType,
+      selectedMonth: getActiveState(dateType).dateField.month,
+      input: input
+    }));
+    setDateType(dateType);
+    setSelectedState(state);
+    setSelectionRange(state.selectionStart, state.selectionEnd);
+  });
+  var onKeyboardInput = (0, _DateInput.useKeyboardInputEvent)({
+    onSegmentChange: onSegmentChange,
+    onSegmentValueChange: onSegmentValueChange,
+    onSegmentValueChangeWithNumericKeys: onSegmentValueChangeWithNumericKeys,
+    onSegmentValueRemove: onSegmentValueRemove,
+    onKeyDown: onKeyDown
+  });
+  return /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({
+    inputMode: focused ? 'numeric' : 'text',
+    autoComplete: "off",
+    autoCorrect: "off",
+    spellCheck: false,
+    className: classes,
+    ref: (0, _utils.mergeRefs)(inputRef, ref),
+    onKeyDown: onKeyboardInput,
+    onClick: handleClick,
+    value: renderedValue,
+    placeholder: placeholder || rangeFormatStr
+  }, focusEventProps, rest));
+});
+DateRangeInput.displayName = 'DateRangeInput';
+DateRangeInput.propTypes = {
+  character: _propTypes.default.string,
+  className: _propTypes.default.string,
+  classPrefix: _propTypes.default.string,
+  format: _propTypes.default.string,
+  placeholder: _propTypes.default.string,
+  onChange: _propTypes.default.func,
+  onKeyDown: _propTypes.default.func,
+  onFocus: _propTypes.default.func,
+  onBlur: _propTypes.default.func
+};
+var _default = DateRangeInput;
+exports.default = _default;

package/cjs/DateRangeInput/index.d.ts

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

package/cjs/DateRangeInput/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 _DateRangeInput = _interopRequireDefault(require("./DateRangeInput"));
+var _default = _DateRangeInput.default;
+exports.default = _default;

package/cjs/DateRangeInput/utils.d.ts

@@ -0,0 +1,61 @@
+import { type Locale } from 'date-fns';
+export declare enum DateType {
+    Start = "Start",
+    End = "End"
+}
+interface SelectedStateOptions {
+    /**
+     * The input element
+     */
+    input: HTMLInputElement;
+    /**
+     * The direction of the arrow key, left or right
+     */
+    direction?: 'left' | 'right';
+    /**
+     * Format of the string is based on Unicode Technical Standard.
+     * @see https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table
+     */
+    formatStr: string;
+    /**
+     * The format string of the range, which is used to calculate the selection range.
+     */
+    rangeFormatStr: string;
+    /**
+     * The locale object, date-fns locale object
+     */
+    localize: Locale['localize'];
+    /**
+     * The selected month, used to calculate the offset of the character selection range
+     */
+    selectedMonth: number | null;
+    /**
+     * The offset of the value, which is used to calculate the month.
+     * This value will be changed when pressing the up and down arrow keys.
+     */
+    valueOffset?: number | null;
+    /**
+     * The date is rendered in string format according to format
+     */
+    dateString: string;
+    /**
+     * The character that separates two dates
+     *
+     * Only for `DateRangeInput`
+     **/
+    character: string;
+    /**
+     * The date type, start or end
+     *
+     * Only for `DateRangeInput`
+     */
+    dateType: DateType;
+}
+export declare function getInputSelectedState(options: SelectedStateOptions): {
+    selectionStart: number;
+    selectionEnd: number;
+    selectedPattern: string;
+};
+export declare function getDateType(dateString: string, character: string, cursorIndex: number): DateType;
+export declare function isSwitchDateType(dateString: string, character: string, cursorIndex: number, direction: 'right' | 'left'): boolean;
+export {};