rsuite 5.23.2 → 5.24.0

package/ButtonToolbar/styles/index.less

@@ -8,8 +8,4 @@
 .rs-btn-toolbar {
   // Clear whitespace
   line-height: 0;
-
-  > :not(:first-child):not(.rs-btn-block) {
-    margin-left: 10px;
-  }
 }

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+# [5.24.0](https://github.com/rsuite/rsuite/compare/v5.23.3...v5.24.0) (2022-12-30)
+
+### Bug Fixes
+
+- **AutoComplete:** fix AutoComplete size property not working ([#2990](https://github.com/rsuite/rsuite/issues/2990)) ([add665b](https://github.com/rsuite/rsuite/commit/add665b82b9d2cbd21e07576bf77f74e18991e21))
+- **DatePicker:** fix inconsistency between month selectable state and ok button clickable state ([#2984](https://github.com/rsuite/rsuite/issues/2984)) ([70e6aba](https://github.com/rsuite/rsuite/commit/70e6aba0b7a3216c9f8b59b033826e55bebac1a1))
+- **Sidenav:** fix Sidenav multilevel Nav.Menu arrow icon exception ([#2986](https://github.com/rsuite/rsuite/issues/2986)) ([87f6748](https://github.com/rsuite/rsuite/commit/87f67482b60eae4ed445246fe3e6ac9b0cad0385))
+
+### Features
+
+- **Dropdown:** add Dropdown.Separator component ([#2979](https://github.com/rsuite/rsuite/issues/2979)) ([db6fcbb](https://github.com/rsuite/rsuite/commit/db6fcbbd88961e3506f6b2d2146cf43717d1e1db))
+
+## [5.23.3](https://github.com/rsuite/rsuite/compare/v5.23.2...v5.23.3) (2022-12-16)
+
+### Bug Fixes
+
+- **Modal:** fix close button alignment and color ([#2973](https://github.com/rsuite/rsuite/issues/2973)) ([b1eb5b4](https://github.com/rsuite/rsuite/commit/b1eb5b406a29788290a704414cc5a19b115690c7))
+
 ## [5.23.2](https://github.com/rsuite/rsuite/compare/v5.23.1...v5.23.2) (2022-12-09)
 
 ### Bug Fixes

package/Modal/styles/index.less

@@ -3,6 +3,7 @@
 
 //
 // Modals
+// Figma: https://www.figma.com/file/uEq9QBplcKUYZrcWWA3RK2/NXT-UI?node-id=0%3A1348&t=H5h3Dd3AnJVgbAbz-4
 // --------------------------------------------------
 
 // Modal background
@@ -100,17 +101,16 @@
   padding-right: @line-height-computed;
 
   .rs-modal-header-close {
-    // button width the same to height
-    @padding-right: 4px;
-
     position: absolute;
     right: @modal-content-padding;
     top: @modal-content-padding;
     font-size: @modal-close-btn-size;
-    line-height: @modal-close-btn-line-height;
     color: @modal-close-btn-color;
-    width: @line-height-computed;
-    padding: 0 @padding-right;
+    padding: 0;
+
+    &:hover {
+      color: @modal-close-btn-hover-color;
+    }
   }
 }
 

package/Sidenav/styles/index.less

@@ -76,14 +76,19 @@
         top: @sidenav-children-padding-vertical;
         // width: auto;
         // height: @sidenav-dropdown-toggle-caret-width;
-        transform: rotate(90deg);
+        // transform: rotate(90deg);
       }
     }
 
     // Expanded submenu toggle icon
-    .rs-dropdown-item-expand .rs-dropdown-item-toggle-icon {
+    .rs-dropdown-item-expand-icon {
       transform: rotate(270deg);
     }
+
+    // Collapse submenu toggle icon
+    .rs-dropdown-item-collapse-icon {
+      transform: rotate(90deg);
+    }
   }
 
   .high-contrast-mode({

package/cjs/AutoComplete/AutoComplete.d.ts

@@ -9,6 +9,8 @@ export interface AutoCompleteProps<T = ValueType> extends WithAsProps, FormContr
     placement?: TypeAttributes.Placement;
     /** When set to false, the Enter key selection function is invalid */
     selectOnEnter?: boolean;
+    /** A component can have different sizes */
+    size?: TypeAttributes.Size;
     /** Open the menu and control it */
     open?: boolean;
     /** Placeholder text */

package/cjs/AutoComplete/AutoComplete.js

@@ -52,6 +52,7 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       valueProp = props.value,
       open = props.open,
       style = props.style,
+      size = props.size,
       menuClassName = props.menuClassName,
       id = props.id,
       renderMenu = props.renderMenu,
@@ -65,7 +66,7 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       onFocus = props.onFocus,
       onBlur = props.onBlur,
       onMenuFocus = props.onMenuFocus,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "disabled", "className", "placement", "selectOnEnter", "classPrefix", "defaultValue", "menuAutoWidth", "data", "value", "open", "style", "menuClassName", "id", "renderMenu", "renderMenuItem", "onSelect", "filterBy", "onKeyDown", "onChange", "onClose", "onOpen", "onFocus", "onBlur", "onMenuFocus"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "disabled", "className", "placement", "selectOnEnter", "classPrefix", "defaultValue", "menuAutoWidth", "data", "value", "open", "style", "size", "menuClassName", "id", "renderMenu", "renderMenuItem", "onSelect", "filterBy", "onKeyDown", "onChange", "onClose", "onOpen", "onFocus", "onBlur", "onMenuFocus"]);
   var datalist = (0, _utils3.transformData)(data);
 
   var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue),
@@ -231,6 +232,7 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     id: id,
     disabled: disabled,
     value: value,
+    size: size,
     onBlur: handleInputBlur,
     onFocus: handleInputFocus,
     onChange: handleChange,
@@ -260,6 +262,7 @@ AutoComplete.propTypes = (0, _extends2.default)({}, _utils2.animationPropTypes,
   renderMenu: _propTypes.default.func,
   renderMenuItem: _propTypes.default.func,
   style: _propTypes.default.object,
+  size: _propTypes.default.oneOf(['lg', 'md', 'sm', 'xs']),
   open: _propTypes.default.bool,
   selectOnEnter: _propTypes.default.bool,
   filterBy: _propTypes.default.func

package/cjs/AutoComplete/utils.d.ts

@@ -1,3 +1,4 @@
-import { ItemDataType } from '../@types/common';
 export declare function transformData(data: any[]): any[];
-export declare const shouldDisplay: (filterBy: ((value: string, item: ItemDataType) => boolean) | undefined, value: any) => (item: any) => boolean;
+export declare const shouldDisplay: <TItem extends {
+    label: string;
+}>(filterBy: ((value: string, item: TItem) => boolean) | undefined, value: string) => (item: TItem) => boolean;

package/cjs/AutoComplete/utils.js

@@ -37,7 +37,7 @@ var shouldDisplay = function shouldDisplay(filterBy, value) {
       return false;
     }
 
-    var keyword = (value || '').toLocaleLowerCase();
+    var keyword = value.toLocaleLowerCase();
     return ("" + item.label).toLocaleLowerCase().indexOf(keyword) >= 0;
   };
 };

package/cjs/ButtonToolbar/ButtonToolbar.d.ts

@@ -1,4 +1,5 @@
 import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
+import Stack from '../Stack';
 export interface ButtonToolbarProps extends WithAsProps {
     /**
      * The ARIA role describing the button toolbar. Generally the default
@@ -7,5 +8,5 @@ export interface ButtonToolbarProps extends WithAsProps {
      */
     role?: string;
 }
-declare const ButtonToolbar: RsRefForwardingComponent<'div', ButtonToolbarProps>;
+declare const ButtonToolbar: RsRefForwardingComponent<typeof Stack, ButtonToolbarProps>;
 export default ButtonToolbar;

package/cjs/ButtonToolbar/ButtonToolbar.js

@@ -15,22 +15,29 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _utils = require("../utils");
 
+var _Stack = _interopRequireDefault(require("../Stack"));
+
 var ButtonToolbar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var className = props.className,
       _props$classPrefix = props.classPrefix,
       classPrefix = _props$classPrefix === void 0 ? 'btn-toolbar' : _props$classPrefix,
       _props$as = props.as,
-      Component = _props$as === void 0 ? 'div' : _props$as,
+      Component = _props$as === void 0 ? _Stack.default : _props$as,
       _props$role = props.role,
       role = _props$role === void 0 ? 'toolbar' : _props$role,
       rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["className", "classPrefix", "as", "role"]);
+  var stackProps = Component === _Stack.default ? {
+    wrap: true,
+    spacing: 10,
+    childrenRenderMode: 'clone'
+  } : null;
 
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       withClassPrefix = _useClassNames.withClassPrefix,
       merge = _useClassNames.merge;
 
   var classes = merge(className, withClassPrefix());
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, stackProps, rest, {
     role: role,
     ref: ref,
     className: classes

package/cjs/Calendar/MonthDropdown.d.ts

@@ -22,5 +22,6 @@ export interface RowProps {
     /** Style object to be applied to row (to position it); */
     style?: React.CSSProperties;
 }
+export declare function isEveryDateInMonth(year: number, month: number, predicate: (date: Date) => boolean): boolean;
 declare const MonthDropdown: RsRefForwardingComponent<'div', MonthDropdownProps>;
 export default MonthDropdown;

package/cjs/Calendar/MonthDropdown.js

@@ -5,6 +5,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
+exports.isEveryDateInMonth = isEveryDateInMonth;
 exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -25,6 +26,18 @@ var _CalendarContext = require("./CalendarContext");
 
 var monthMap = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
 
+function isEveryDateInMonth(year, month, predicate) {
+  var days = _utils.DateUtils.getDaysInMonth(new Date(year, month));
+
+  for (var i = 1; i <= days; i++) {
+    if (!predicate(new Date(year, month, i))) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
 var MonthDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
       Component = _props$as === void 0 ? 'div' : _props$as,
@@ -60,16 +73,7 @@ var MonthDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   }, [limitEndYear, startYear, thisYear]);
   var isMonthDisabled = (0, _react.useCallback)(function (year, month) {
     if (disabledMonth) {
-      var days = _utils.DateUtils.getDaysInMonth(new Date(year, month)); // If all dates in a month are disabled, disable the current month
-
-
-      for (var i = 1; i <= days; i++) {
-        if (!disabledMonth(new Date(year, month, i))) {
-          return false;
-        }
-      }
-
-      return true;
+      return isEveryDateInMonth(year, month, disabledMonth);
     }
 
     return false;

package/cjs/Cascader/Cascader.js

@@ -454,7 +454,8 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       classPrefix: 'picker-cascader-menu',
       cascadeData: columnData,
       cascadePaths: selectedPaths,
-      activeItemValue: value,
+      activeItemValue: value // FIXME make onSelect generic
+      ,
       onSelect: handleSelect,
       renderMenu: renderMenu,
       renderMenuItem: renderMenuItem

package/cjs/Cascader/utils.d.ts

@@ -1,18 +1,23 @@
 /// <reference types="react" />
-import { CascaderProps } from './Cascader';
-import { ItemDataType } from '../@types/common';
-export declare function getColumnsAndPaths<T extends ItemDataType>(data: T[], value: any, options: any): {
-    columns: ItemDataType<string | number>[][];
+export declare function getColumnsAndPaths<T extends Record<string, unknown>>(data: T[], value: any, options: any): {
+    columns: T[][];
     paths: T[];
 };
-export declare function usePaths(props: CascaderProps): {
+declare type UsePathsParams<T> = {
+    data: T[];
+    valueKey: string;
+    childrenKey: string;
+    value: unknown;
+};
+export declare function usePaths<T extends Record<string, unknown>>(params: UsePathsParams<T>): {
     enforceUpdate: (nextValue: any, isAttachChildren?: boolean) => void;
-    columnData: ItemDataType<string | number>[][];
-    valueToPaths: ItemDataType<string | number>[];
-    selectedPaths: ItemDataType<string | number>[];
-    setValueToPaths: import("react").Dispatch<import("react").SetStateAction<ItemDataType<string | number>[]>>;
-    setColumnData: import("react").Dispatch<import("react").SetStateAction<ItemDataType<string | number>[][]>>;
-    setSelectedPaths: import("react").Dispatch<import("react").SetStateAction<ItemDataType<string | number>[]>>;
-    addColumn: (column: ItemDataType[], index: number) => void;
+    columnData: T[][];
+    valueToPaths: T[];
+    selectedPaths: T[];
+    setValueToPaths: import("react").Dispatch<import("react").SetStateAction<T[]>>;
+    setColumnData: import("react").Dispatch<import("react").SetStateAction<T[][]>>;
+    setSelectedPaths: import("react").Dispatch<import("react").SetStateAction<T[]>>;
+    addColumn: (column: T[], index: number) => void;
     romoveColumnByIndex: (index: number) => void;
 };
+export {};

package/cjs/Cascader/utils.js

@@ -86,11 +86,11 @@ function getColumnsAndPaths(data, value, options) {
   };
 }
 
-function usePaths(props) {
-  var data = props.data,
-      valueKey = props.valueKey,
-      childrenKey = props.childrenKey,
-      value = props.value;
+function usePaths(params) {
+  var data = params.data,
+      valueKey = params.valueKey,
+      childrenKey = params.childrenKey,
+      value = params.value;
 
   var _useMemo = (0, _react.useMemo)(function () {
     return getColumnsAndPaths(data, value, {

package/cjs/DatePicker/DatePicker.d.ts

@@ -29,7 +29,11 @@ export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, Form
     showMeridian?: boolean;
     /** one tap to select */
     oneTap?: boolean;
-    /** Disabled date */
+    /**
+     * Whether to disable a date on the calendar view
+     *
+     * @returns date should be disabled (not selectable)
+     */
     disabledDate?: (date?: Date) => boolean;
     /** Disabled hours */
     disabledHours?: (hour: number, date: Date) => boolean;

package/cjs/DatePicker/DatePicker.js

@@ -29,6 +29,8 @@ var _CalendarContainer = _interopRequireDefault(require("../Calendar/CalendarCon
 
 var _useCalendarDate2 = _interopRequireDefault(require("../Calendar/useCalendarDate"));
 
+var _MonthDropdown = require("../Calendar/MonthDropdown");
+
 var _Toolbar = _interopRequireDefault(require("./Toolbar"));
 
 var _Stack = _interopRequireDefault(require("../Stack"));
@@ -336,6 +338,20 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
     return allowDate || allowTime;
   }, [disabledDateProp, props]);
+  /**
+   * Whether "OK" button is disabled
+   *
+   * - If format is date, disable ok button if selected date is disabled
+   * - If format is month, disable ok button if all dates in the month of selected date are disabled
+   */
+
+  var isOKButtonDisabled = (0, _react.useCallback)(function (selectedDate) {
+    if (_utils.DateUtils.shouldRenderMonth(formatStr) && !_utils.DateUtils.shouldRenderDate(formatStr)) {
+      return (0, _MonthDropdown.isEveryDateInMonth)(selectedDate.getFullYear(), selectedDate.getMonth(), disabledToolbarHandle);
+    }
+
+    return disabledToolbarHandle(selectedDate);
+  }, [disabledToolbarHandle, formatStr]);
   var calendarProps = (0, _react.useMemo)(function () {
     return (0, _mapValues.default)((0, _pick.default)(props, _utils.DateUtils.calendarOnlyProps), function (disabledOrHiddenTimeFunc) {
       return function (next, date) {
@@ -406,7 +422,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       locale: locale,
       ranges: bottomRanges,
       calendarDate: calendarDate,
-      disabledOkBtn: disabledToolbarHandle,
+      disabledOkBtn: isOKButtonDisabled,
       disabledShortcut: disabledToolbarHandle,
       onClickShortcut: handleShortcutPageDate,
       onOk: handleOK,

package/cjs/Dropdown/Dropdown.d.ts

@@ -4,6 +4,7 @@ import { TypeAttributes, WithAsProps, RsRefForwardingComponent } from '../@types
 import { IconProps } from '@rsuite/icons/lib/Icon';
 import DropdownItem from './DropdownItem';
 import Button from '../Button';
+import DropdownSeparator from './DropdownSeparator';
 export declare type DropdownTrigger = 'click' | 'hover' | 'contextMenu';
 export interface DropdownProps<T = any> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect' | 'title'> {
     /** Define the title as a submenu */
@@ -58,6 +59,7 @@ export interface DropdownComponent extends RsRefForwardingComponent<'div', Dropd
     } & React.ComponentProps<ToggleAs>, context: any): JSX.Element | null;
     Item: typeof DropdownItem;
     Menu: typeof DropdownMenu;
+    Separator: typeof DropdownSeparator;
 }
 /**
  * The <Dropdown> API

package/cjs/Dropdown/Dropdown.js

@@ -43,6 +43,8 @@ var _warnOnce = _interopRequireDefault(require("../utils/warnOnce"));
 
 var _Nav = _interopRequireDefault(require("../Nav"));
 
+var _DropdownSeparator = _interopRequireDefault(require("./DropdownSeparator"));
+
 /**
  * The <Dropdown> API
  * When used inside <Sidenav>, renders a <TreeviewRootItem>;
@@ -186,6 +188,7 @@ var Dropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
 Dropdown.Item = _DropdownItem.default;
 Dropdown.Menu = _DropdownMenu.default;
+Dropdown.Separator = _DropdownSeparator.default;
 Dropdown.displayName = 'Dropdown';
 Dropdown.propTypes = {
   activeKey: _propTypes.default.any,

package/cjs/Dropdown/DropdownItem.d.ts

@@ -8,7 +8,11 @@ export interface DropdownMenuItemProps<T = any> extends WithAsProps, Omit<React.
     children?: React.ReactNode;
     /** You can use a custom element for this component */
     as?: React.ElementType;
-    /** Whether to display the divider */
+    /**
+     * Whether to display the divider
+     *
+     * @deprecated Use dedicated <Dropdown.Separator> component instead
+     */
     divider?: boolean;
     /** Disable the current option */
     disabled?: boolean;

package/cjs/Dropdown/DropdownItem.js

@@ -11,11 +11,13 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
+var _pick2 = _interopRequireDefault(require("lodash/pick"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _deprecatePropType = _interopRequireDefault(require("../utils/deprecatePropType"));
+var _deprecatePropType = _interopRequireWildcard(require("../utils/deprecatePropType"));
 
 var _MenuItem = _interopRequireDefault(require("../Menu/MenuItem"));
 
@@ -37,6 +39,8 @@ var _warnOnce = _interopRequireDefault(require("../utils/warnOnce"));
 
 var _Nav = _interopRequireDefault(require("../Nav"));
 
+var _DropdownSeparator = _interopRequireDefault(require("./DropdownSeparator"));
+
 /**
  * The <Dropdown.Item> API
  * When used inside <Sidenav>, renders a <TreeviewItem>
@@ -106,11 +110,7 @@ var DropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   }
 
   if (divider) {
-    return renderDropdownItem((0, _extends2.default)({
-      ref: ref,
-      role: 'separator',
-      className: merge(prefix('divider'), className)
-    }, restProps));
+    return /*#__PURE__*/_react.default.createElement(_DropdownSeparator.default, (0, _pick2.default)(props, ['data-testid']));
   }
 
   if (panel) {
@@ -159,7 +159,7 @@ var DropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
 DropdownItem.displayName = 'Dropdown.Item';
 DropdownItem.propTypes = {
   as: _propTypes.default.elementType,
-  divider: _propTypes.default.bool,
+  divider: (0, _deprecatePropType.deprecatePropTypeNew)(_propTypes.default.bool, 'Use Dropdown.Separator component instead.'),
   panel: _propTypes.default.bool,
   trigger: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.oneOf(['click', 'hover'])]),
   open: (0, _deprecatePropType.default)(_propTypes.default.bool),

package/cjs/Dropdown/DropdownSeparator.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { RsRefForwardingComponent, WithAsProps } from '../@types/common';
+export interface DropdownSeparatorProps extends WithAsProps, React.HTMLAttributes<HTMLElement> {
+    /** You can use a custom element for this component */
+    as?: React.ElementType;
+}
+/**
+ * The <Dropdown.Separator> API
+ *
+ * Renders a non-focusable and non-interactive `separator`
+ * Per ARIA APG https://www.w3.org/WAI/ARIA/apg/patterns/menu/
+ */
+declare const DropdownSeparator: RsRefForwardingComponent<'li', DropdownSeparatorProps>;
+export default DropdownSeparator;

package/cjs/Dropdown/DropdownSeparator.js

@@ -0,0 +1,48 @@
+"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");
+
+/**
+ * The <Dropdown.Separator> API
+ *
+ * Renders a non-focusable and non-interactive `separator`
+ * Per ARIA APG https://www.w3.org/WAI/ARIA/apg/patterns/menu/
+ */
+var DropdownSeparator = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'dropdown-item-divider' : _props$classPrefix,
+      className = props.className,
+      _props$as = props.as,
+      Component = _props$as === void 0 ? 'li' : _props$as,
+      restProps = (0, _objectWithoutPropertiesLoose2.default)(props, ["classPrefix", "className", "as"]);
+
+  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+      merge = _useClassNames.merge,
+      withClassPrefix = _useClassNames.withClassPrefix;
+
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    ref: ref,
+    role: "separator",
+    className: merge(withClassPrefix(), className)
+  }, restProps));
+});
+
+DropdownSeparator.displayName = 'Dropdown.Separator';
+DropdownSeparator.propTypes = {
+  as: _propTypes.default.elementType
+};
+var _default = DropdownSeparator;
+exports.default = _default;

package/cjs/MultiCascader/utils.d.ts

@@ -9,25 +9,28 @@ interface ItemKeys {
     labelKey: string;
     childrenKey: string;
 }
+declare type MayHasParent<T extends Record<string, unknown>> = T & {
+    parent?: MayHasParent<T>;
+};
 /**
  * Get all parents of a node
  * @param node
  */
-export declare const getParents: (node: ItemType) => ItemType[];
+export declare const getParents: <T extends Record<string, unknown>>(node: MayHasParent<T>) => MayHasParent<T>[];
 /**
  * Check if any child nodes are selected.
  * @param node
  * @param value
  * @param itemKeys
  */
-export declare const isSomeChildChecked: (node: ItemDataType, value: ValueType, itemKeys: Omit<ItemKeys, 'labelKey'>) => any;
+export declare const isSomeChildChecked: <T extends Record<string, unknown>>(node: T, value: ValueType, itemKeys: Omit<ItemKeys, 'labelKey'>) => any;
 /**
  * Check if the parent is selected.
  * @param node
  * @param value
  * @param itemKeys
  */
-export declare const isSomeParentChecked: (node: ItemDataType, value: ValueType, itemKeys: Pick<ItemKeys, 'valueKey'>) => any;
+export declare const isSomeParentChecked: <T extends Record<string, unknown>>(node: MayHasParent<T>, value: ValueType, itemKeys: Pick<ItemKeys, 'valueKey'>) => any;
 export declare const getOtherItemValuesByUnselectChild: <T>(itemNode: ItemType, value: any, itemKeys: Omit<ItemKeys, 'labelKey'>) => T[];
 /**
  * Remove the values of all children.
@@ -37,20 +40,20 @@ export declare const removeAllChildrenValue: <T>(value: T[], item: ItemType, ite
  * A hook to flatten tree structure data
  * @param data
  */
-export declare function useFlattenData(data: ItemDataType[], itemKeys: ItemKeys): {
-    addFlattenData: (children: ItemDataType[], parent: ItemDataType) => void;
-    flattenData: ItemDataType<string | number>[];
+export declare function useFlattenData<T>(data: T[], itemKeys: ItemKeys): {
+    addFlattenData: (children: T[], parent: T) => void;
+    flattenData: T[];
 };
 /**
  * A hook for column data
  * @param flattenData
  */
-export declare function useColumnData(flattenData: ItemType[]): {
-    columnData: ItemDataType<string | number>[][];
-    addColumn: (column: ItemDataType[], index: number) => void;
+export declare function useColumnData<T extends MayHasParent<Record<string, unknown>>>(flattenData: T[]): {
+    columnData: T[][];
+    addColumn: (column: T[], index: number) => void;
     romoveColumnByIndex: (index: number) => void;
-    setColumnData: import("react").Dispatch<import("react").SetStateAction<ItemDataType<string | number>[][]>>;
-    enforceUpdateColumnData: (nextData: ItemDataType[]) => void;
+    setColumnData: import("react").Dispatch<import("react").SetStateAction<T[][]>>;
+    enforceUpdateColumnData: (nextData: T[]) => void;
 };
 /**
  * A hook that converts the value into a cascading value

package/cjs/Picker/utils.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { OverlayTriggerHandle } from './PickerToggleTrigger';
-import { TypeAttributes, ItemDataType } from '../@types/common';
+import { TypeAttributes } from '../@types/common';
 import type { ListHandle } from '../Windowing';
 export interface NodeKeys {
     valueKey: string;
@@ -86,24 +86,25 @@ export interface ToggleKeyDownEventProps {
  * @param props
  */
 export declare const useToggleKeyDownEvent: (props: ToggleKeyDownEventProps) => (event: React.KeyboardEvent) => void;
-export interface SearchProps {
+export interface SearchProps<TItem extends Record<string, unknown>, TLabel> {
     labelKey: string;
-    data: ItemDataType[];
-    searchBy?: (keyword: any, label: any, item: any) => boolean;
-    callback?: (keyword: string, data: ItemDataType[], event: React.SyntheticEvent) => void;
+    data: TItem[];
+    searchBy?: (keyword: string, label: TLabel, item: TItem) => boolean;
+    callback?: (keyword: string, data: TItem[], event: React.SyntheticEvent) => void;
 }
+declare type UseSearchResult<TItem extends Record<string, unknown>> = {
+    searchKeyword: string;
+    filteredData: TItem[];
+    updateFilteredData: (nextData: TItem[]) => void;
+    setSearchKeyword: (value: string) => void;
+    checkShouldDisplay: (item: TItem, keyword?: string) => boolean;
+    handleSearch: (searchKeyword: string, event: React.SyntheticEvent) => void;
+};
 /**
  * A hook that handles search filter options
  * @param props
  */
-export declare function useSearch(props: SearchProps): {
-    searchKeyword: string;
-    filteredData: import("../CheckTreePicker/utils").TreeNodeType[];
-    updateFilteredData: (nextData: ItemDataType[]) => void;
-    setSearchKeyword: React.Dispatch<React.SetStateAction<string>>;
-    checkShouldDisplay: (item: ItemDataType, keyword?: string) => boolean;
-    handleSearch: (searchKeyword: string, event: React.SyntheticEvent) => void;
-};
+export declare function useSearch<TItem extends Record<string, unknown>, TLabel>(props: SearchProps<TItem, TLabel>): UseSearchResult<TItem>;
 export interface PickerDependentParameters {
     triggerRef?: React.RefObject<OverlayTriggerHandle>;
     rootRef?: React.RefObject<HTMLElement>;
@@ -116,3 +117,4 @@ export interface PickerDependentParameters {
  * A hook of the exposed method of Picker
  */
 export declare function usePublicMethods(ref: any, parmas: PickerDependentParameters): void;
+export {};