rsuite 5.50.0 → 5.51.0

package/cjs/Picker/hooks/useToggleKeyDownEvent.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+interface ToggleKeyDownEventProps {
+    toggle?: boolean;
+    trigger: React.RefObject<any>;
+    target: React.RefObject<any>;
+    overlay?: React.RefObject<any>;
+    searchInput?: React.RefObject<any>;
+    active?: boolean;
+    readOnly?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    onExit?: (event: any) => void;
+    onKeyDown?: (event: any) => void;
+    onOpen?: () => void;
+    onClose?: () => void;
+    onMenuKeyDown?: (event: any) => void;
+    onMenuPressEnter?: (event: any) => void;
+    onMenuPressBackspace?: (event: any) => void;
+}
+/**
+ * A hook to control the toggle keyboard operation
+ * @param props
+ */
+declare const useToggleKeyDownEvent: (props: ToggleKeyDownEventProps) => (...args: any[]) => any;
+export default useToggleKeyDownEvent;

package/cjs/Picker/hooks/useToggleKeyDownEvent.js

@@ -0,0 +1,101 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _utils = require("../../utils");
+/**
+ * A hook to control the toggle keyboard operation
+ * @param props
+ */
+var useToggleKeyDownEvent = function useToggleKeyDownEvent(props) {
+  var _props$toggle = props.toggle,
+    toggle = _props$toggle === void 0 ? true : _props$toggle,
+    trigger = props.trigger,
+    target = props.target,
+    overlay = props.overlay,
+    searchInput = props.searchInput,
+    active = props.active,
+    readOnly = props.readOnly,
+    disabled = props.disabled,
+    loading = props.loading,
+    onExit = props.onExit,
+    onOpen = props.onOpen,
+    onClose = props.onClose,
+    onKeyDown = props.onKeyDown,
+    onMenuKeyDown = props.onMenuKeyDown,
+    onMenuPressEnter = props.onMenuPressEnter,
+    onMenuPressBackspace = props.onMenuPressBackspace;
+  var handleClose = (0, _utils.useEventCallback)(function () {
+    var _trigger$current, _trigger$current$clos, _trigger$current2, _trigger$current2$foc;
+    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : (_trigger$current$clos = _trigger$current.close) === null || _trigger$current$clos === void 0 ? void 0 : _trigger$current$clos.call(_trigger$current);
+
+    // The focus is on the trigger button after closing
+    (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : (_trigger$current2$foc = _trigger$current2.focus) === null || _trigger$current2$foc === void 0 ? void 0 : _trigger$current2$foc.call(_trigger$current2);
+    onClose === null || onClose === void 0 ? void 0 : onClose();
+  });
+  var handleOpen = (0, _utils.useEventCallback)(function () {
+    var _trigger$current3, _trigger$current3$ope;
+    (_trigger$current3 = trigger.current) === null || _trigger$current3 === void 0 ? void 0 : (_trigger$current3$ope = _trigger$current3.open) === null || _trigger$current3$ope === void 0 ? void 0 : _trigger$current3$ope.call(_trigger$current3);
+    onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+  });
+  var handleToggleDropdown = (0, _utils.useEventCallback)(function () {
+    if (active) {
+      handleClose();
+      return;
+    }
+    handleOpen();
+  });
+  var onToggle = (0, _utils.useEventCallback)(function (event) {
+    // Keyboard events should not be processed when readOnly and disabled are set.
+    if (readOnly || disabled || loading) {
+      return;
+    }
+    if (event.target === (target === null || target === void 0 ? void 0 : target.current)) {
+      // enter
+      if (toggle && event.key === _utils.KEY_VALUES.ENTER) {
+        handleToggleDropdown();
+      }
+
+      // delete
+      if (event.key === _utils.KEY_VALUES.BACKSPACE) {
+        onExit === null || onExit === void 0 ? void 0 : onExit(event);
+      }
+    }
+    if (overlay !== null && overlay !== void 0 && overlay.current) {
+      // The keyboard operation callback on the menu.
+      onMenuKeyDown === null || onMenuKeyDown === void 0 ? void 0 : onMenuKeyDown(event);
+      if (event.key === _utils.KEY_VALUES.ENTER) {
+        onMenuPressEnter === null || onMenuPressEnter === void 0 ? void 0 : onMenuPressEnter(event);
+      }
+
+      /**
+       * There is no callback when typing the Backspace key in the search box.
+       * The default is to remove search keywords
+       */
+      if (event.key === _utils.KEY_VALUES.BACKSPACE && event.target !== (searchInput === null || searchInput === void 0 ? void 0 : searchInput.current)) {
+        onMenuPressBackspace === null || onMenuPressBackspace === void 0 ? void 0 : onMenuPressBackspace(event);
+      }
+
+      // The search box gets focus when typing characters and numbers.
+      if (event.key.length === 1 && /\w/.test(event.key)) {
+        var _event$target;
+        // Exclude Input
+        // eg: <SelectPicker renderExtraFooter={() => <Input />} />
+        if (((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.tagName) !== 'INPUT') {
+          var _searchInput$current;
+          searchInput === null || searchInput === void 0 ? void 0 : (_searchInput$current = searchInput.current) === null || _searchInput$current === void 0 ? void 0 : _searchInput$current.focus();
+        }
+      }
+    }
+    if (event.key === _utils.KEY_VALUES.ESC || event.key === _utils.KEY_VALUES.TAB) {
+      handleClose();
+    }
+
+    // Native event callback
+    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+  });
+  return onToggle;
+};
+var _default = useToggleKeyDownEvent;
+exports.default = _default;

package/cjs/Picker/index.d.ts

@@ -1,19 +1,20 @@
 import { pickTriggerPropKeys, omitTriggerPropKeys, OverlayTriggerHandle, PositionChildProps } from './PickerToggleTrigger';
 import { PickerToggleProps } from './PickerToggle';
 import { PickerHandle, PickerComponent } from './types';
-export { default as DropdownMenu } from './DropdownMenu';
-export { default as DropdownMenuCheckItem } from './DropdownMenuCheckItem';
-export { default as DropdownMenuGroup } from './DropdownMenuGroup';
-export { default as DropdownMenuItem } from './DropdownMenuItem';
-export { default as PickerOverlay } from './PickerOverlay';
+export { default as TreeView } from './TreeView';
+export { default as Listbox } from './Listbox';
+export { default as ListItem } from './ListItem';
+export { default as ListItemGroup } from './ListItemGroup';
+export { default as ListCheckItem } from './ListCheckItem';
+export { default as PickerPopup } from './PickerPopup';
 export { default as PickerToggle } from './PickerToggle';
 export { default as PickerLabel } from './PickerLabel';
 export { default as PickerIndicator } from './PickerIndicator';
 export { default as PickerToggleTrigger } from './PickerToggleTrigger';
 export { default as SearchBar } from './SearchBar';
 export { default as SelectedElement } from './SelectedElement';
-export { default as usePickerRef } from './usePickerRef';
 export { pickTriggerPropKeys, omitTriggerPropKeys };
 export type { OverlayTriggerHandle, PositionChildProps, PickerHandle, PickerComponent, PickerToggleProps };
+export * from './hooks';
 export * from './utils';
 export * from './propTypes';

package/cjs/Picker/index.js

@@ -5,36 +5,38 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 exports.__esModule = true;
 var _exportNames = {
-  DropdownMenu: true,
-  DropdownMenuCheckItem: true,
-  DropdownMenuGroup: true,
-  DropdownMenuItem: true,
-  PickerOverlay: true,
+  TreeView: true,
+  Listbox: true,
+  ListItem: true,
+  ListItemGroup: true,
+  ListCheckItem: true,
+  PickerPopup: true,
   PickerToggle: true,
   PickerLabel: true,
   PickerIndicator: true,
   PickerToggleTrigger: true,
   SearchBar: true,
   SelectedElement: true,
-  usePickerRef: true,
   pickTriggerPropKeys: true,
   omitTriggerPropKeys: true
 };
-exports.usePickerRef = exports.SelectedElement = exports.SearchBar = exports.PickerToggleTrigger = exports.PickerIndicator = exports.PickerLabel = exports.PickerToggle = exports.PickerOverlay = exports.DropdownMenuItem = exports.DropdownMenuGroup = exports.DropdownMenuCheckItem = exports.DropdownMenu = void 0;
+exports.SelectedElement = exports.SearchBar = exports.PickerToggleTrigger = exports.PickerIndicator = exports.PickerLabel = exports.PickerToggle = exports.PickerPopup = exports.ListCheckItem = exports.ListItemGroup = exports.ListItem = exports.Listbox = exports.TreeView = void 0;
 var _PickerToggleTrigger = _interopRequireWildcard(require("./PickerToggleTrigger"));
 exports.pickTriggerPropKeys = _PickerToggleTrigger.pickTriggerPropKeys;
 exports.omitTriggerPropKeys = _PickerToggleTrigger.omitTriggerPropKeys;
 exports.PickerToggleTrigger = _PickerToggleTrigger.default;
-var _DropdownMenu = _interopRequireDefault(require("./DropdownMenu"));
-exports.DropdownMenu = _DropdownMenu.default;
-var _DropdownMenuCheckItem = _interopRequireDefault(require("./DropdownMenuCheckItem"));
-exports.DropdownMenuCheckItem = _DropdownMenuCheckItem.default;
-var _DropdownMenuGroup = _interopRequireDefault(require("./DropdownMenuGroup"));
-exports.DropdownMenuGroup = _DropdownMenuGroup.default;
-var _DropdownMenuItem = _interopRequireDefault(require("./DropdownMenuItem"));
-exports.DropdownMenuItem = _DropdownMenuItem.default;
-var _PickerOverlay = _interopRequireDefault(require("./PickerOverlay"));
-exports.PickerOverlay = _PickerOverlay.default;
+var _TreeView = _interopRequireDefault(require("./TreeView"));
+exports.TreeView = _TreeView.default;
+var _Listbox = _interopRequireDefault(require("./Listbox"));
+exports.Listbox = _Listbox.default;
+var _ListItem = _interopRequireDefault(require("./ListItem"));
+exports.ListItem = _ListItem.default;
+var _ListItemGroup = _interopRequireDefault(require("./ListItemGroup"));
+exports.ListItemGroup = _ListItemGroup.default;
+var _ListCheckItem = _interopRequireDefault(require("./ListCheckItem"));
+exports.ListCheckItem = _ListCheckItem.default;
+var _PickerPopup = _interopRequireDefault(require("./PickerPopup"));
+exports.PickerPopup = _PickerPopup.default;
 var _PickerToggle = _interopRequireDefault(require("./PickerToggle"));
 exports.PickerToggle = _PickerToggle.default;
 var _PickerLabel = _interopRequireDefault(require("./PickerLabel"));
@@ -45,8 +47,13 @@ var _SearchBar = _interopRequireDefault(require("./SearchBar"));
 exports.SearchBar = _SearchBar.default;
 var _SelectedElement = _interopRequireDefault(require("./SelectedElement"));
 exports.SelectedElement = _SelectedElement.default;
-var _usePickerRef = _interopRequireDefault(require("./usePickerRef"));
-exports.usePickerRef = _usePickerRef.default;
+var _hooks = require("./hooks");
+Object.keys(_hooks).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _hooks[key]) return;
+  exports[key] = _hooks[key];
+});
 var _utils = require("./utils");
 Object.keys(_utils).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/cjs/Picker/propTypes.d.ts

@@ -13,9 +13,6 @@ export declare const pickerPropTypes: {
     menuStyle: PropTypes.Requireable<object>;
     placeholder: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     placement: PropTypes.Requireable<"top" | "bottom" | "right" | "left" | "bottomStart" | "bottomEnd" | "topStart" | "topEnd" | "leftStart" | "rightStart" | "leftEnd" | "rightEnd" | "auto" | "autoVertical" | "autoVerticalStart" | "autoVerticalEnd" | "autoHorizontal" | "autoHorizontalStart" | "autoHorizontalEnd">;
-    /**
-     * Prevent floating element overflow
-     */
     preventOverflow: PropTypes.Requireable<boolean>;
     open: PropTypes.Requireable<boolean>;
     defaultOpen: PropTypes.Requireable<boolean>;
@@ -55,9 +52,6 @@ export declare const listPickerPropTypes: {
     menuStyle: PropTypes.Requireable<object>;
     placeholder: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     placement: PropTypes.Requireable<"top" | "bottom" | "right" | "left" | "bottomStart" | "bottomEnd" | "topStart" | "topEnd" | "leftStart" | "rightStart" | "leftEnd" | "rightEnd" | "auto" | "autoVertical" | "autoVerticalStart" | "autoVerticalEnd" | "autoHorizontal" | "autoHorizontalStart" | "autoHorizontalEnd">;
-    /**
-     * Prevent floating element overflow
-     */
     preventOverflow: PropTypes.Requireable<boolean>;
     open: PropTypes.Requireable<boolean>;
     defaultOpen: PropTypes.Requireable<boolean>;

package/cjs/Picker/propTypes.js

@@ -18,15 +18,10 @@ var pickerPropTypes = (0, _extends2.default)({}, _utils2.animationPropTypes, {
   containerPadding: _propTypes.default.number,
   container: _propTypes.default.oneOfType([_propTypes.default.any, _propTypes.default.func]),
   disabled: _propTypes.default.bool,
-  // PropTypes.elementType conflictin with React.ElementType
-  // toggleAs: PropTypes.elementType,
   menuClassName: _propTypes.default.string,
   menuStyle: _propTypes.default.object,
   placeholder: _propTypes.default.node,
   placement: _propTypes.default.oneOf(_utils.PLACEMENT),
-  /**
-   * Prevent floating element overflow
-   */
   preventOverflow: _propTypes.default.bool,
   open: _propTypes.default.bool,
   defaultOpen: _propTypes.default.bool,

package/cjs/Picker/utils.d.ts

@@ -1,33 +1,11 @@
 import React from 'react';
-import { OverlayTriggerHandle } from './PickerToggleTrigger';
-import { TypeAttributes } from '../@types/common';
-import type { ListHandle } from '../Windowing';
 export interface NodeKeys {
     valueKey: string;
     childrenKey: string;
 }
 export declare function createConcatChildrenFunction<T = any>(node: any, nodeValue?: any, nodeKeys?: NodeKeys): (data: T[], children: T[]) => T[];
 export declare function shouldDisplay(label: React.ReactNode, searchKeyword: string): boolean;
-export interface PickerClassNameProps {
-    name?: string;
-    classPrefix: string;
-    className?: string;
-    placement?: TypeAttributes.Placement;
-    appearance?: 'default' | 'subtle';
-    cleanable?: boolean;
-    block?: boolean;
-    disabled?: boolean;
-    countable?: boolean;
-    readOnly?: boolean;
-    plaintext?: boolean;
-    hasValue?: boolean;
-    classes?: any;
-}
-/**
- * The className of the assembled Toggle is on the Picker.
- */
-export declare function usePickerClassName(props: PickerClassNameProps): [string, string[]];
-export interface EventsProps {
+export interface KeyboardEvents {
     down?: React.KeyboardEventHandler;
     up?: React.KeyboardEventHandler;
     enter?: React.KeyboardEventHandler;
@@ -41,76 +19,4 @@ export interface EventsProps {
  * @param event Keyboard event object
  * @param events Event callback functions
  */
-export declare function onMenuKeyDown(event: React.KeyboardEvent, events: EventsProps): void;
-export interface FocusItemValueProps<T = unknown> {
-    target: HTMLElement | null | (() => HTMLElement | null);
-    data?: T[];
-    valueKey?: string;
-    focusableQueryKey?: string;
-    defaultLayer?: number;
-    rtl?: boolean;
-    callback?: (value: any, event: React.KeyboardEvent) => void;
-    getParent?: (node: T) => T | undefined;
-}
-/**
- * A hook that manages the focus state of the option.
- * @param defaultFocusItemValue
- * @param props
- */
-export declare const useFocusItemValue: <T, D>(defaultFocusItemValue: T | null | undefined, props: FocusItemValueProps<D>) => {
-    focusItemValue: T | null | undefined;
-    setFocusItemValue: React.Dispatch<React.SetStateAction<T | null | undefined>>;
-    layer: number;
-    setLayer: React.Dispatch<React.SetStateAction<number>>;
-    keys: any[];
-    setKeys: React.Dispatch<React.SetStateAction<any[]>>;
-    onKeyDown: (event: any) => void;
-};
-export interface ToggleKeyDownEventProps {
-    toggle?: boolean;
-    trigger: React.RefObject<any>;
-    target: React.RefObject<any>;
-    overlay?: React.RefObject<any>;
-    searchInput?: React.RefObject<any>;
-    active?: boolean;
-    readOnly?: boolean;
-    disabled?: boolean;
-    onExit?: (event: any) => void;
-    onKeyDown?: (event: any) => void;
-    onOpen?: () => void;
-    onClose?: () => void;
-    onMenuKeyDown?: (event: any) => void;
-    onMenuPressEnter?: (event: any) => void;
-    onMenuPressBackspace?: (event: any) => void;
-    [key: string]: any;
-}
-/**
- * A hook to control the toggle keyboard operation
- * @param props
- */
-export declare const useToggleKeyDownEvent: (props: ToggleKeyDownEventProps) => (...args: any[]) => any;
-interface SearchOptions<T> {
-    labelKey: string;
-    searchBy?: (keyword: string, label: any, item: T) => boolean;
-    callback?: (keyword: string, data: T[], event: React.SyntheticEvent) => void;
-}
-declare type UseSearchResult<T> = {
-    searchKeyword: string;
-    filteredData: T[];
-    checkShouldDisplay: (item: T, keyword?: string) => boolean;
-    handleSearch: (searchKeyword: string, event: React.SyntheticEvent) => void;
-    resetSearch: () => void;
-};
-/**
- * A hook that handles search filter options
- */
-export declare function useSearch<T>(data: readonly T[], props: SearchOptions<T>): UseSearchResult<T>;
-export interface PickerDependentParameters {
-    triggerRef?: React.RefObject<OverlayTriggerHandle>;
-    rootRef?: React.RefObject<HTMLElement>;
-    overlayRef?: React.RefObject<HTMLElement>;
-    targetRef?: React.RefObject<HTMLElement>;
-    listRef?: React.RefObject<ListHandle>;
-    inline?: boolean;
-}
-export {};
+export declare function onMenuKeyDown(event: React.KeyboardEvent, events: KeyboardEvents): void;