rsuite 5.49.0 → 5.51.0

package/esm/@types/common.d.ts

@@ -77,6 +77,14 @@ export interface PickerBaseProps<LocaleType = any> extends WithAsProps, Animatio
     onOpen?: () => void;
     /** Called when Modal is closed */
     onClose?: () => void;
+    /**
+     * Called when the component is focused.
+     */
+    onFocus?: React.FocusEventHandler<any>;
+    /**
+     * Called when the component is blurred.
+     */
+    onBlur?: React.FocusEventHandler<any>;
     /** Custom render extra footer */
     renderExtraFooter?: () => React.ReactNode;
 }

package/esm/AutoComplete/AutoComplete.js

@@ -1,16 +1,16 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useState, useRef, useCallback } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import pick from 'lodash/pick';
 import omit from 'lodash/omit';
-import Input from '../Input';
-import { useClassNames, useControlled, PLACEMENT, mergeRefs, useIsMounted, partitionHTMLProps } from '../utils';
+import { useClassNames, useControlled, useIsMounted, useEventCallback, PLACEMENT, mergeRefs, partitionHTMLProps } from '../utils';
 import { animationPropTypes } from '../Animation/utils';
-import { PickerToggleTrigger, onMenuKeyDown, DropdownMenu, DropdownMenuItem, PickerOverlay, useFocusItemValue, usePublicMethods, pickTriggerPropKeys } from '../Picker';
+import { PickerToggleTrigger, onMenuKeyDown, Listbox, ListItem, PickerPopup, useFocusItemValue, usePickerRef, pickTriggerPropKeys } from '../Picker';
 import { transformData, shouldDisplay } from './utils';
 import Plaintext from '../Plaintext';
+import Combobox from './Combobox';
 /**
  * Autocomplete function of input field.
  * @see https://rsuitejs.com/components/auto-complete
@@ -63,22 +63,26 @@ var AutoComplete = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setFocus = _useState[1];
   var items = (datalist === null || datalist === void 0 ? void 0 : datalist.filter(shouldDisplay(filterBy, value))) || [];
   var hasItems = items.length > 0;
-  var overlayRef = useRef(null);
+  var _usePickerRef = usePickerRef(ref),
+    trigger = _usePickerRef.trigger,
+    overlay = _usePickerRef.overlay,
+    root = _usePickerRef.root;
   var isMounted = useIsMounted();
 
   // Used to hover the focuse item  when trigger `onKeydown`
   var _useFocusItemValue = useFocusItemValue(value, {
       data: datalist,
+      focusToOption: false,
       callback: onMenuFocus,
       target: function target() {
-        return overlayRef.current;
+        return overlay.current;
       }
     }),
     focusItemValue = _useFocusItemValue.focusItemValue,
     setFocusItemValue = _useFocusItemValue.setFocusItemValue,
     handleKeyDown = _useFocusItemValue.onKeyDown;
   var handleKeyDownEvent = function handleKeyDownEvent(event) {
-    if (!overlayRef.current) {
+    if (!overlay.current) {
       return;
     }
     onMenuKeyDown(event, {
@@ -103,29 +107,29 @@ var AutoComplete = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     handleClose();
   };
-  var handleSelect = useCallback(function (item, event) {
+  var handleSelect = useEventCallback(function (item, event) {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(item.value, item, event);
-  }, [onSelect]);
-  var handleChangeValue = useCallback(function (value, event) {
+  });
+  var handleChangeValue = useEventCallback(function (value, event) {
     onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
-  }, [onChange]);
+  });
   var handleChange = function handleChange(value, event) {
     setFocusItemValue('');
     setValue(value);
     setFocus(true);
     handleChangeValue(value, event);
   };
-  var handleClose = useCallback(function () {
+  var handleClose = useEventCallback(function () {
     if (isMounted()) {
       setFocus(false);
       onClose === null || onClose === void 0 ? void 0 : onClose();
     }
-  }, [isMounted, onClose]);
-  var handleOpen = useCallback(function () {
+  });
+  var handleOpen = useEventCallback(function () {
     setFocus(true);
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-  }, [onOpen]);
-  var handleItemSelect = useCallback(function (nextItemValue, item, event) {
+  });
+  var handleItemSelect = useEventCallback(function (nextItemValue, item, event) {
     setValue(nextItemValue);
     setFocusItemValue(nextItemValue);
     handleSelect(item, event);
@@ -133,30 +137,25 @@ var AutoComplete = /*#__PURE__*/React.forwardRef(function (props, ref) {
       handleChangeValue(nextItemValue, event);
     }
     handleClose();
-  }, [value, setValue, handleSelect, handleChangeValue, handleClose, setFocusItemValue]);
-  var handleInputFocus = useCallback(function (event) {
+  });
+  var handleInputFocus = useEventCallback(function (event) {
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
     handleOpen();
-  }, [onFocus, handleOpen]);
-  var handleInputBlur = useCallback(function (event) {
+  });
+  var handleInputBlur = useEventCallback(function (event) {
     setTimeout(handleClose, 300);
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
-  }, [onBlur, handleClose]);
+  });
   var _useClassNames = useClassNames(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge;
   var classes = merge(className, withClassPrefix({
     disabled: disabled
   }));
-  var triggerRef = useRef(null);
   var _partitionHTMLProps = partitionHTMLProps(omit(rest, pickTriggerPropKeys)),
     htmlInputProps = _partitionHTMLProps[0],
     restProps = _partitionHTMLProps[1];
-  usePublicMethods(ref, {
-    triggerRef: triggerRef,
-    overlayRef: overlayRef
-  });
-  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {
+  var renderPopup = function renderPopup(positionProps, speakerRef) {
     var left = positionProps.left,
       top = positionProps.top,
       className = positionProps.className;
@@ -164,23 +163,22 @@ var AutoComplete = /*#__PURE__*/React.forwardRef(function (props, ref) {
       left: left,
       top: top
     };
-    var menu = /*#__PURE__*/React.createElement(DropdownMenu, {
-      id: id ? id + "-listbox" : undefined,
+    var menu = /*#__PURE__*/React.createElement(Listbox, {
       classPrefix: "auto-complete-menu",
-      dropdownMenuItemClassPrefix: "auto-complete-item",
-      dropdownMenuItemAs: DropdownMenuItem,
+      listItemClassPrefix: "auto-complete-item",
+      listItemAs: ListItem,
       focusItemValue: focusItemValue,
       onSelect: handleItemSelect,
       renderMenuItem: renderMenuItem,
       data: items,
       className: menuClassName
     });
-    return /*#__PURE__*/React.createElement(PickerOverlay, {
-      ref: mergeRefs(overlayRef, speakerRef),
+    return /*#__PURE__*/React.createElement(PickerPopup, {
+      ref: mergeRefs(overlay, speakerRef),
       style: styles,
       className: className,
       onKeyDown: handleKeyDownEvent,
-      target: triggerRef,
+      target: trigger,
       autoWidth: menuAutoWidth
     }, renderMenu ? renderMenu(menu) : menu);
   };
@@ -190,22 +188,26 @@ var AutoComplete = /*#__PURE__*/React.forwardRef(function (props, ref) {
       localeKey: "unfilled"
     }, typeof value === 'undefined' ? defaultValue : value);
   }
+  var expanded = open || focus && hasItems;
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
-    ref: triggerRef,
+    id: id,
+    ref: trigger,
     placement: placement,
     pickerProps: pick(props, pickTriggerPropKeys),
     trigger: ['click', 'focus'],
-    open: open || focus && hasItems,
-    speaker: renderDropdownMenu
+    open: expanded,
+    speaker: renderPopup
   }, /*#__PURE__*/React.createElement(Component, _extends({
     className: classes,
-    style: style
-  }, restProps), /*#__PURE__*/React.createElement(Input, _extends({}, htmlInputProps, {
-    id: id,
+    style: style,
+    ref: root
+  }, restProps), /*#__PURE__*/React.createElement(Combobox, _extends({}, htmlInputProps, {
     disabled: disabled,
     value: value,
     size: size,
     readOnly: readOnly,
+    expanded: expanded,
+    focusItemValue: focusItemValue,
     onBlur: handleInputBlur,
     onFocus: handleInputFocus,
     onChange: handleChange,

package/esm/AutoComplete/Combobox.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type InputProps } from '../Input';
+interface ComboboxProps extends InputProps {
+    expanded?: boolean;
+    focusItemValue?: string | null;
+}
+declare const Combobox: React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<HTMLInputElement>>;
+export default Combobox;

package/esm/AutoComplete/Combobox.js

@@ -0,0 +1,25 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import { useCombobox } from '../Picker';
+import Input from '../Input';
+var Combobox = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _useCombobox = useCombobox(),
+    id = _useCombobox.id,
+    popupType = _useCombobox.popupType;
+  var expanded = props.expanded,
+    focusItemValue = props.focusItemValue,
+    rest = _objectWithoutPropertiesLoose(props, ["expanded", "focusItemValue"]);
+  return /*#__PURE__*/React.createElement(Input, _extends({
+    role: "combobox",
+    "aria-autocomplete": "list",
+    "aria-haspopup": popupType,
+    "aria-expanded": expanded,
+    "aria-activedescendant": focusItemValue ? id + "-opt-" + focusItemValue : undefined,
+    autoComplete: "off",
+    id: id,
+    ref: ref
+  }, rest));
+});
+export default Combobox;

package/esm/Calendar/Calendar.d.ts

@@ -7,7 +7,11 @@ export interface CalendarProps extends WithAsProps {
     value?: Date;
     /** Default value  */
     defaultValue?: Date;
-    /** ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day  */
+    /**
+     * ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day
+     *
+     * @see https://en.wikipedia.org/wiki/ISO_week_date
+     */
     isoWeek?: boolean;
     /** Display a compact calendar   */
     compact?: boolean;

package/esm/Calendar/CalendarContainer.d.ts

@@ -32,7 +32,11 @@ export interface CalendarProps extends WithAsProps, Omit<HTMLAttributes<HTMLDivE
     hideSeconds?: (second: number, date: Date) => boolean;
     /** The value that mouse hover on in range selection */
     hoverRangeValue?: [Date, Date];
-    /** ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day */
+    /**
+     * ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day
+     *
+     * @see https://en.wikipedia.org/wiki/ISO_week_date
+     */
     isoWeek?: boolean;
     /** Limit showing how many years in the future */
     limitEndYear?: number;

package/esm/Calendar/CalendarContainer.js

@@ -1,14 +1,14 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useCallback, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import pick from 'lodash/pick';
 import MonthDropdown from './MonthDropdown';
 import TimeDropdown from './TimeDropdown';
 import CalendarBody from './CalendarBody';
 import CalendarHeader from './CalendarHeader';
-import { useClassNames } from '../utils';
+import { useClassNames, useEventCallback } from '../utils';
 import { disabledTime, addMonths, shouldRenderDate, shouldRenderTime, shouldRenderMonth, isSameMonth, calendarOnlyProps, omitHideDisabledProps, isValid } from '../utils/dateUtils';
 import { CalendarProvider } from './CalendarContext';
 import useCalendarState, { CalendarState } from './useCalendarState';
@@ -62,42 +62,42 @@ var CalendarContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var calendarDate = useMemo(function () {
     return isValid(calendarDateProp) ? calendarDateProp : new Date();
   }, [calendarDateProp]);
-  var isDisabledDate = useCallback(function (date) {
+  var isDisabledDate = useEventCallback(function (date) {
     var _disabledDate;
     return (_disabledDate = disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(date)) !== null && _disabledDate !== void 0 ? _disabledDate : false;
-  }, [disabledDate]);
+  });
   var isTimeDisabled = function isTimeDisabled(date) {
     return disabledTime(props, date);
   };
-  var handleMoveForward = useCallback(function () {
+  var handleMoveForward = useEventCallback(function () {
     onMoveForward === null || onMoveForward === void 0 ? void 0 : onMoveForward(addMonths(calendarDate, 1));
-  }, [onMoveForward, calendarDate]);
-  var handleMoveBackward = useCallback(function () {
+  });
+  var handleMoveBackward = useEventCallback(function () {
     onMoveBackward === null || onMoveBackward === void 0 ? void 0 : onMoveBackward(addMonths(calendarDate, -1));
-  }, [onMoveBackward, calendarDate]);
+  });
 
   // It is displayed as the month to be selected.
-  var toggleMonthView = useCallback(function () {
+  var toggleMonthView = useEventCallback(function () {
     if (calendarState === CalendarState.MONTH) {
       reset();
     } else {
       openMonth();
     }
     onToggleMonthDropdown === null || onToggleMonthDropdown === void 0 ? void 0 : onToggleMonthDropdown(calendarState !== CalendarState.MONTH);
-  }, [calendarState, onToggleMonthDropdown, openMonth, reset]);
+  });
 
   // It is displayed as a time to be selected.
-  var toggleTimeView = useCallback(function () {
+  var toggleTimeView = useEventCallback(function () {
     if (calendarState === CalendarState.TIME) {
       reset();
     } else {
       openTime();
     }
     onToggleTimeDropdown === null || onToggleTimeDropdown === void 0 ? void 0 : onToggleTimeDropdown(calendarState !== CalendarState.TIME);
-  }, [calendarState, onToggleTimeDropdown, openTime, reset]);
-  var handleCloseDropdown = useCallback(function () {
+  });
+  var handleCloseDropdown = useEventCallback(function () {
     return reset();
-  }, [reset]);
+  });
   var renderDate = shouldRenderDate(format);
   var renderTime = shouldRenderTime(format);
   var renderMonth = shouldRenderMonth(format);
@@ -105,40 +105,38 @@ var CalendarContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var onlyShowMonth = renderMonth && !renderDate && !renderTime;
   var showTime = calendarState === CalendarState.TIME || onlyShowTime;
   var showMonth = calendarState === CalendarState.MONTH || onlyShowMonth;
-  var inSameThisMonthDate = useCallback(function (date) {
+  var inSameThisMonthDate = useEventCallback(function (date) {
     return isSameMonth(calendarDate, date);
-  }, [calendarDate]);
+  });
   var calendarClasses = merge(className, withClassPrefix({
     'time-view': showTime,
     'month-view': showMonth,
     'show-week-numbers': showWeekNumbers
   }));
   var timeDropdownProps = pick(rest, calendarOnlyProps);
-  var handleChangeMonth = useCallback(function (date, event) {
+  var handleChangeMonth = useEventCallback(function (date, event) {
     reset();
     onChangeMonth === null || onChangeMonth === void 0 ? void 0 : onChangeMonth(date, event);
-  }, [onChangeMonth, reset]);
-  var contextValue = useMemo(function () {
-    return {
-      date: calendarDate,
-      dateRange: dateRange,
-      disabledDate: isDisabledDate,
-      format: format,
-      hoverRangeValue: hoverRangeValue,
-      inSameMonth: inSameThisMonthDate,
-      isoWeek: isoWeek,
-      targetId: targetId,
-      locale: locale,
-      onChangeMonth: handleChangeMonth,
-      onChangeTime: onChangeTime,
-      onMouseMove: onMouseMove,
-      onSelect: onSelect,
-      cellClassName: cellClassName,
-      renderCell: renderCell,
-      showWeekNumbers: showWeekNumbers,
-      inline: inline
-    };
-  }, [calendarDate, dateRange, format, handleChangeMonth, hoverRangeValue, inSameThisMonthDate, inline, isDisabledDate, isoWeek, targetId, locale, onChangeTime, onMouseMove, onSelect, cellClassName, renderCell, showWeekNumbers]);
+  });
+  var contextValue = {
+    date: calendarDate,
+    dateRange: dateRange,
+    disabledDate: isDisabledDate,
+    format: format,
+    hoverRangeValue: hoverRangeValue,
+    inSameMonth: inSameThisMonthDate,
+    isoWeek: isoWeek,
+    targetId: targetId,
+    locale: locale,
+    onChangeMonth: handleChangeMonth,
+    onChangeTime: onChangeTime,
+    onMouseMove: onMouseMove,
+    onSelect: onSelect,
+    cellClassName: cellClassName,
+    renderCell: renderCell,
+    showWeekNumbers: showWeekNumbers,
+    inline: inline
+  };
   return /*#__PURE__*/React.createElement(CalendarProvider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement(Component, _extends({