rsuite 5.2.2 → 5.4.0

package/cjs/Picker/utils.js

@@ -21,6 +21,8 @@ var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
 
 var _trim = _interopRequireDefault(require("lodash/trim"));
 
+var _isNil = _interopRequireDefault(require("lodash/isNil"));
+
 var _isFunction = _interopRequireDefault(require("lodash/isFunction"));
 
 var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));
@@ -203,13 +205,11 @@ var useFocusItemValue = function useFocusItemValue(defaultFocusItemValue, props)
     var menu = (0, _isFunction.default)(target) ? target() : target;
     var currentKeys = keys;
 
-    if (currentKeys.length === 0) {
-      var _Array$from;
-
-      currentKeys = (_Array$from = Array.from(menu === null || menu === void 0 ? void 0 : menu.querySelectorAll(focusableQueryKey))) === null || _Array$from === void 0 ? void 0 : _Array$from.map(function (item) {
+    if (currentKeys.length === 0 && !(0, _isNil.default)(menu)) {
+      currentKeys = Array.from(menu.querySelectorAll(focusableQueryKey)).map(function (item) {
         var _item$dataset;
 
-        return item === null || item === void 0 ? void 0 : (_item$dataset = item.dataset) === null || _item$dataset === void 0 ? void 0 : _item$dataset.key;
+        return (_item$dataset = item.dataset) === null || _item$dataset === void 0 ? void 0 : _item$dataset.key;
       });
       setKeys(currentKeys);
     }
@@ -271,12 +271,12 @@ var useFocusItemValue = function useFocusItemValue(defaultFocusItemValue, props)
     var subMenu = menu === null || menu === void 0 ? void 0 : menu.querySelector("[data-layer=\"" + nextLayer + "\"]");
 
     if (subMenu) {
-      var _Array$from2;
+      var _Array$from;
 
-      return (_Array$from2 = Array.from(subMenu.querySelectorAll(focusableQueryKey))) === null || _Array$from2 === void 0 ? void 0 : _Array$from2.map(function (item) {
+      return (_Array$from = Array.from(subMenu.querySelectorAll(focusableQueryKey))) === null || _Array$from === void 0 ? void 0 : _Array$from.map(function (item) {
         var _item$dataset2;
 
-        return item === null || item === void 0 ? void 0 : (_item$dataset2 = item.dataset) === null || _item$dataset2 === void 0 ? void 0 : _item$dataset2.key;
+        return (_item$dataset2 = item.dataset) === null || _item$dataset2 === void 0 ? void 0 : _item$dataset2.key;
       });
     }
 
@@ -405,9 +405,15 @@ var useToggleKeyDownEvent = function useToggleKeyDownEvent(props) {
 
 
       if (event.key.length === 1 && /\w/.test(event.key)) {
-        var _searchInputRef$curre;
+        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 _searchInputRef$curre;
 
-        searchInputRef === null || searchInputRef === void 0 ? void 0 : (_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 ? void 0 : _searchInputRef$curre.focus();
+          searchInputRef === null || searchInputRef === void 0 ? void 0 : (_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 ? void 0 : _searchInputRef$curre.focus();
+        }
       }
     }
 
@@ -486,61 +492,80 @@ function useSearch(props) {
 
 /**
  * A hook of the exposed method of Picker
- *
- * {
- *   root: Element;
- *   overlay: Element;
- *   target?: Element;
- *   updatePosition:() => void;
- *   open:() => void;
- *   close:() => void;
- * }
- * @param ref
- * @param params
  */
-function usePublicMethods(ref, _ref, disabled) {
-  var triggerRef = _ref.triggerRef,
-      overlayRef = _ref.overlayRef,
-      targetRef = _ref.targetRef,
-      rootRef = _ref.rootRef;
+function usePublicMethods(ref, parmas) {
+  var triggerRef = parmas.triggerRef,
+      overlayRef = parmas.overlayRef,
+      targetRef = parmas.targetRef,
+      rootRef = parmas.rootRef,
+      listRef = parmas.listRef,
+      inline = parmas.inline;
   var handleOpen = (0, _react.useCallback)(function () {
     var _triggerRef$current3;
 
-    (_triggerRef$current3 = triggerRef.current) === null || _triggerRef$current3 === void 0 ? void 0 : _triggerRef$current3.open();
+    triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current3 = triggerRef.current) === null || _triggerRef$current3 === void 0 ? void 0 : _triggerRef$current3.open();
   }, [triggerRef]);
   var handleClose = (0, _react.useCallback)(function () {
     var _triggerRef$current4;
 
-    (_triggerRef$current4 = triggerRef.current) === null || _triggerRef$current4 === void 0 ? void 0 : _triggerRef$current4.close();
+    triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current4 = triggerRef.current) === null || _triggerRef$current4 === void 0 ? void 0 : _triggerRef$current4.close();
   }, [triggerRef]);
   var handleUpdatePosition = (0, _react.useCallback)(function () {
     var _triggerRef$current5;
 
-    (_triggerRef$current5 = triggerRef.current) === null || _triggerRef$current5 === void 0 ? void 0 : _triggerRef$current5.updatePosition();
+    triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current5 = triggerRef.current) === null || _triggerRef$current5 === void 0 ? void 0 : _triggerRef$current5.updatePosition();
   }, [triggerRef]);
-
-  if (!disabled) {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    (0, _react.useImperativeHandle)(ref, function () {
+  (0, _react.useImperativeHandle)(ref, function () {
+    // Tree and CheckTree
+    if (inline) {
       return {
         get root() {
-          var _triggerRef$current6;
+          var _triggerRef$current$r, _triggerRef$current6;
 
-          return rootRef !== null && rootRef !== void 0 && rootRef.current ? rootRef === null || rootRef === void 0 ? void 0 : rootRef.current : (_triggerRef$current6 = triggerRef.current) === null || _triggerRef$current6 === void 0 ? void 0 : _triggerRef$current6.root;
+          return rootRef !== null && rootRef !== void 0 && rootRef.current ? rootRef === null || rootRef === void 0 ? void 0 : rootRef.current : (_triggerRef$current$r = triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current6 = triggerRef.current) === null || _triggerRef$current6 === void 0 ? void 0 : _triggerRef$current6.root) !== null && _triggerRef$current$r !== void 0 ? _triggerRef$current$r : null;
         },
 
-        get overlay() {
-          return overlayRef.current;
-        },
+        get list() {
+          if (!(listRef !== null && listRef !== void 0 && listRef.current)) {
+            throw new Error('The list is not found, please set `virtualized` for the component.');
+          }
 
-        get target() {
-          return targetRef === null || targetRef === void 0 ? void 0 : targetRef.current;
-        },
+          return listRef === null || listRef === void 0 ? void 0 : listRef.current;
+        }
 
-        updatePosition: handleUpdatePosition,
-        open: handleOpen,
-        close: handleClose
       };
-    });
-  }
+    }
+
+    return {
+      get root() {
+        var _ref, _triggerRef$current7;
+
+        return (_ref = (rootRef === null || rootRef === void 0 ? void 0 : rootRef.current) || (triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current7 = triggerRef.current) === null || _triggerRef$current7 === void 0 ? void 0 : _triggerRef$current7.root)) !== null && _ref !== void 0 ? _ref : null;
+      },
+
+      get overlay() {
+        var _overlayRef$current;
+
+        return (_overlayRef$current = overlayRef === null || overlayRef === void 0 ? void 0 : overlayRef.current) !== null && _overlayRef$current !== void 0 ? _overlayRef$current : null;
+      },
+
+      get target() {
+        var _targetRef$current;
+
+        return (_targetRef$current = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) !== null && _targetRef$current !== void 0 ? _targetRef$current : null;
+      },
+
+      get list() {
+        if (!(listRef !== null && listRef !== void 0 && listRef.current)) {
+          throw new Error("\n            The list is not found.\n            1.Please set virtualized for the component.\n            2.Please confirm whether the picker is open.\n          ");
+        }
+
+        return listRef === null || listRef === void 0 ? void 0 : listRef.current;
+      },
+
+      updatePosition: handleUpdatePosition,
+      open: handleOpen,
+      close: handleClose
+    };
+  });
 }

package/cjs/Placeholder/PlaceholderGrid.js

@@ -62,7 +62,7 @@ var PlaceholderGrid = /*#__PURE__*/_react.default.forwardRef(function (props, re
         style: {
           width: widthPercent + "%",
           height: rowHeight,
-          marginTop: j > 0 ? rowMargin : null
+          marginTop: j > 0 ? rowMargin : undefined
         }
       }));
     }

package/cjs/Plaintext/Plaintext.js

@@ -26,7 +26,8 @@ var Plaintext = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       classPrefix = _props$classPrefix === void 0 ? 'plaintext' : _props$classPrefix,
       className = props.className,
       children = props.children,
-      localeKey = props.localeKey,
+      _props$localeKey = props.localeKey,
+      localeKey = _props$localeKey === void 0 ? '' : _props$localeKey,
       _props$placeholder = props.placeholder,
       placeholder = _props$placeholder === void 0 ? locale[localeKey] : _props$placeholder,
       rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "children", "localeKey", "placeholder"]);

package/cjs/Radio/Radio.d.ts

@@ -27,7 +27,7 @@ export interface RadioProps<T = ValueType> extends WithAsProps, Omit<React.HTMLA
     /** Primary content */
     children?: React.ReactNode;
     /** Callback function with value changed */
-    onChange?: (value: T, checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (value: T | undefined, checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 declare const Radio: React.ForwardRefExoticComponent<RadioProps<ValueType> & React.RefAttributes<unknown>>;
 export default Radio;

package/cjs/RadioGroup/RadioGroup.d.ts

@@ -4,12 +4,12 @@ import { ValueType } from '../Radio';
 export interface RadioContextProps {
     inline?: boolean;
     name?: string;
-    value?: ValueType;
+    value?: ValueType | null;
     controlled?: boolean;
     disabled?: boolean;
     readOnly?: boolean;
     plaintext?: boolean;
-    onChange?: (value: ValueType, event: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (value: ValueType | undefined, event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 export interface RadioGroupProps<T = ValueType> extends WithAsProps, FormControlBaseProps<T> {
     /** A radio group can have different appearances */

package/cjs/RadioGroup/RadioGroup.js

@@ -57,7 +57,7 @@ var RadioGroup = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
   var handleChange = (0, _react.useCallback)(function (nextValue, event) {
     setValue(nextValue);
-    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
+    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue !== null && nextValue !== void 0 ? nextValue : '', event);
   }, [onChange, setValue]);
   var contextValue = (0, _react.useMemo)(function () {
     return {
@@ -73,10 +73,10 @@ var RadioGroup = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }, [disabled, handleChange, inline, isControlled, name, plaintext, readOnly, value]);
   return /*#__PURE__*/_react.default.createElement(RadioContext.Provider, {
     value: contextValue
-  }, plaintext ? /*#__PURE__*/_react.default.createElement(_Plaintext.default, {
+  }, plaintext ? /*#__PURE__*/_react.default.createElement(_Plaintext.default, (0, _extends2.default)({
     ref: ref,
     localeKey: "notSelected"
-  }, value ? children : null) : /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  }, rest), value ? children : null) : /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     role: "radiogroup"
   }, rest, {
     ref: ref,

package/cjs/RangeSlider/RangeSlider.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { SliderProps } from '../Slider';
-export declare type ValueType = number[];
-export declare type RangeSliderProps = SliderProps<ValueType>;
+export declare type Range = [number, number];
+export declare type RangeSliderProps = SliderProps<Range>;
 declare const RangeSlider: React.ForwardRefExoticComponent<RangeSliderProps & React.RefAttributes<unknown>>;
 export default RangeSlider;

package/cjs/RangeSlider/RangeSlider.js

@@ -33,6 +33,8 @@ var _Graduated = _interopRequireDefault(require("../Slider/Graduated"));
 
 var _utils2 = require("../Slider/utils");
 
+var _propTypeChecker = require("../utils/propTypeChecker");
+
 var defaultDefaultValue = [0, 0];
 
 var RangeSlider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
@@ -70,7 +72,7 @@ var RangeSlider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onChange = props.onChange,
       onChangeCommitted = props.onChangeCommitted,
       rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["aria-label", "aria-labelledby", "aria-valuetext", "as", "barClassName", "className", "defaultValue", "graduated", "progress", "vertical", "disabled", "classPrefix", "min", "max", "step", "value", "handleClassName", "handleStyle", "handleTitle", "tooltip", "getAriaValueText", "renderTooltip", "renderMark", "onChange", "onChangeCommitted"]);
-  var barRef = (0, _react.useRef)(); // Define the parameter position of the handle
+  var barRef = (0, _react.useRef)(null); // Define the parameter position of the handle
 
   var handleIndexs = (0, _react.useRef)([0, 1]);
 
@@ -286,7 +288,7 @@ var RangeSlider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onDragMove: handleDragMove,
     onDragEnd: handleChangeCommitted,
     onKeyDown: handleKeyDown,
-    tabIndex: disabled ? null : 0,
+    tabIndex: disabled ? undefined : 0,
     'aria-orientation': vertical ? 'vertical' : 'horizontal',
     'aria-disabled': disabled,
     'aria-valuemax': max,
@@ -322,8 +324,8 @@ var RangeSlider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
 RangeSlider.displayName = 'RangeSlider';
 RangeSlider.propTypes = (0, _extends2.default)({}, _Slider.sliderPropTypes, {
-  value: _propTypes.default.arrayOf(_propTypes.default.number),
-  defaultValue: _propTypes.default.arrayOf(_propTypes.default.number)
+  value: (0, _propTypeChecker.tupleType)(_propTypes.default.number.isRequired, _propTypes.default.number.isRequired),
+  defaultValue: (0, _propTypeChecker.tupleType)(_propTypes.default.number.isRequired, _propTypes.default.number.isRequired)
 });
 var _default = RangeSlider;
 exports.default = _default;

package/cjs/Rate/Character.js

@@ -11,6 +11,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
+var _isNil2 = _interopRequireDefault(require("lodash/isNil"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -47,8 +49,8 @@ var Character = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       prefix = _useClassNames.prefix,
       withClassPrefix = _useClassNames.withClassPrefix;
 
-  var beforeRef = (0, _react.useRef)();
-  var classes = merge(className, withClassPrefix(characterStatus[status]));
+  var beforeRef = (0, _react.useRef)(null);
+  var classes = merge(className, withClassPrefix(!(0, _isNil2.default)(status) && characterStatus[status]));
   var handleMouseMove = (0, _react.useCallback)(function (event) {
     onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(getKey(beforeRef.current, event.target), event);
   }, [onMouseMove]);

package/cjs/Rate/Rate.js

@@ -15,6 +15,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _isNil = _interopRequireDefault(require("lodash/isNil"));
+
 var _Star = _interopRequireDefault(require("@rsuite/icons/legacy/Star"));
 
 var _utils = require("../utils");
@@ -41,7 +43,8 @@ var Rate = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       _props$size = props.size,
       size = _props$size === void 0 ? 'md' : _props$size,
       color = props.color,
-      allowHalf = props.allowHalf,
+      _props$allowHalf = props.allowHalf,
+      allowHalf = _props$allowHalf === void 0 ? false : _props$allowHalf,
       valueProp = props.value,
       _props$defaultValue = props.defaultValue,
       defaultValue = _props$defaultValue === void 0 ? 0 : _props$defaultValue,
@@ -138,7 +141,7 @@ var Rate = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     return /*#__PURE__*/_react.default.createElement(_Plaintext.default, {
       localeKey: "notSelected",
       className: className
-    }, value + "(" + max + ")");
+    }, !(0, _isNil.default)(value) ? value + "(" + max + ")" : null);
   }
 
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({

package/cjs/Ripple/Ripple.js

@@ -53,7 +53,7 @@ var Ripple = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       withClassPrefix = _useClassNames.withClassPrefix;
 
   var classes = merge(className, prefix('pond'));
-  var triggerRef = (0, _react.useRef)();
+  var triggerRef = (0, _react.useRef)(null);
 
   var _useState = (0, _react.useState)(false),
       rippling = _useState[0],

package/cjs/SelectPicker/SelectPicker.d.ts

@@ -1,10 +1,8 @@
 import React from 'react';
 import { PickerLocale } from '../locales';
-import { PickerComponent } from '../Picker';
 import { FormControlPickerProps, ItemDataType } from '../@types/common';
 import { ListProps } from 'react-virtualized/dist/commonjs/List';
-export declare type ValueType = number | string;
-export interface SelectProps<T = ValueType> {
+export interface SelectProps<T> {
     /** Set group condition key in data */
     groupBy?: string;
     /** Whether dispaly search input box */
@@ -37,7 +35,16 @@ export interface SelectProps<T = ValueType> {
     /** Called when clean */
     onClean?: (event: React.SyntheticEvent) => void;
 }
-export interface SelectPickerProps<T = ValueType> extends FormControlPickerProps<T, PickerLocale, ItemDataType>, SelectProps<T> {
+export interface MultipleSelectProps<T> extends Omit<SelectProps<T>, 'renderValue'> {
+    /** Custom render selected items */
+    renderValue?: (value: T[], item: ItemDataType<T>[], selectedElement: React.ReactNode) => React.ReactNode;
+}
+export interface SelectPickerProps<T> extends FormControlPickerProps<T, PickerLocale, ItemDataType<T>>, SelectProps<T> {
+}
+export interface SelectPickerComponent {
+    <T>(props: SelectPickerProps<T>): JSX.Element | null;
+    displayName?: string;
+    propTypes?: React.WeakValidationMap<SelectPickerProps<any>>;
 }
-declare const SelectPicker: PickerComponent<SelectPickerProps>;
+declare const SelectPicker: SelectPickerComponent;
 export default SelectPicker;

package/cjs/SelectPicker/SelectPicker.js

@@ -90,17 +90,17 @@ var SelectPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       renderMenuItem = props.renderMenuItem,
       renderExtraFooter = props.renderExtraFooter,
       rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "appearance", "data", "valueKey", "labelKey", "value", "classPrefix", "placeholder", "defaultValue", "disabled", "cleanable", "placement", "menuClassName", "menuAutoWidth", "menuMaxHeight", "menuStyle", "groupBy", "locale", "toggleAs", "style", "searchable", "disabledItemValues", "virtualized", "listProps", "id", "onGroupTitleClick", "searchBy", "onEntered", "onExited", "onClean", "onChange", "onSelect", "onSearch", "onClose", "onOpen", "sort", "renderValue", "renderMenu", "renderMenuGroup", "renderMenuItem", "renderExtraFooter"]);
-  var triggerRef = (0, _react.useRef)();
-  var targetRef = (0, _react.useRef)();
-  var overlayRef = (0, _react.useRef)();
-  var searchInputRef = (0, _react.useRef)();
+  var triggerRef = (0, _react.useRef)(null);
+  var targetRef = (0, _react.useRef)(null);
+  var overlayRef = (0, _react.useRef)(null);
+  var searchInputRef = (0, _react.useRef)(null);
 
   var _useCustom = (0, _utils.useCustom)('Picker', overrideLocale),
       locale = _useCustom.locale;
 
-  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue),
-      value = _useControlled[0],
-      setValue = _useControlled[1]; // Used to hover the focus item  when trigger `onKeydown`
+  var _ref = (0, _utils.useControlled)(valueProp, defaultValue),
+      value = _ref[0],
+      setValue = _ref[1]; // Used to hover the focus item  when trigger `onKeydown`
 
 
   var _useFocusItemValue = (0, _Picker.useFocusItemValue)(value, {
@@ -327,7 +327,7 @@ var SelectPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     disabled: disabled,
     cleanable: cleanable && !disabled,
     hasValue: hasValue,
-    inputValue: value,
+    inputValue: value !== null && value !== void 0 ? value : '',
     active: active,
     placement: placement
   }), selectedElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder))));

package/cjs/SelectPicker/index.d.ts

@@ -1,3 +1,3 @@
 import SelectPicker from './SelectPicker';
-export type { SelectProps, SelectPickerProps } from './SelectPicker';
+export type { SelectProps, MultipleSelectProps, SelectPickerProps } from './SelectPicker';
 export default SelectPicker;

package/cjs/SelectPicker/test/SelectPicker.test.d.ts

@@ -0,0 +1 @@
+export {};

package/cjs/SelectPicker/test/SelectPicker.test.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _tsExpect = require("ts-expect");
+
+var _SelectPicker = _interopRequireDefault(require("../SelectPicker"));
+
+// Infer value and onChange types from data
+var numberValuedData = [{
+  label: 'One',
+  value: 1
+}];
+
+/*#__PURE__*/
+_react.default.createElement(_SelectPicker.default, {
+  data: numberValuedData,
+  value: 1
+}); // @ts-expect-error should not accept string value
+
+
+/*#__PURE__*/
+_react.default.createElement(_SelectPicker.default, {
+  data: numberValuedData,
+  value: "1"
+});
+
+/*#__PURE__*/
+_react.default.createElement(_SelectPicker.default, {
+  data: numberValuedData,
+  onChange: function onChange(newValue) {
+    (0, _tsExpect.expectType)(newValue);
+  }
+});
+
+var stringValuedData = [{
+  label: 'One',
+  value: 'One'
+}];
+
+/*#__PURE__*/
+_react.default.createElement(_SelectPicker.default, {
+  data: stringValuedData,
+  value: "1"
+}); // @ts-expect-error should not accept number value
+
+
+/*#__PURE__*/
+_react.default.createElement(_SelectPicker.default, {
+  data: stringValuedData,
+  value: 1
+});
+
+/*#__PURE__*/
+_react.default.createElement(_SelectPicker.default, {
+  data: stringValuedData,
+  onChange: function onChange(newValue) {
+    (0, _tsExpect.expectType)(newValue);
+  }
+});

package/cjs/Sidenav/Node.d.ts

@@ -4,7 +4,7 @@
  * Ref: https://developer.mozilla.org/zh-CN/docs/Web/API/Node
  */
 export declare class Node {
-    id: string;
+    id: string | null;
     nodeValue: string | null;
     parent: string | null;
     parentNode: Node | null;

package/cjs/Sidenav/Sidenav.d.ts

@@ -23,16 +23,16 @@ export interface SidenavProps<T = string> extends WithAsProps {
      * Select the callback function for the menu
      * @deprecated Use <Sidenav onSelect> instead
      */
-    onSelect?: (eventKey: T, event: React.SyntheticEvent) => void;
+    onSelect?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;
 }
-export declare const SidenavContext: React.Context<SidenavContextType<string>>;
+export declare const SidenavContext: React.Context<SidenavContextType<string> | null>;
 export interface SidenavContextType<T = string> {
     openKeys: T[];
-    activeKey: T;
+    activeKey: T | null;
     sidenav: boolean;
     expanded: boolean;
     onOpenChange: (eventKey: T, event: React.SyntheticEvent) => void;
-    onSelect?: (eventKey: T, event: React.SyntheticEvent) => void;
+    onSelect?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;
 }
 export interface SidenavComponent extends RsRefForwardingComponent<'div', SidenavProps> {
     Header: typeof SidenavHeader;

package/cjs/Sidenav/Sidenav.js

@@ -34,6 +34,7 @@ var _deprecatePropType = _interopRequireDefault(require("../utils/deprecatePropT
 var SidenavContext = /*#__PURE__*/_react.default.createContext(null);
 
 exports.SidenavContext = SidenavContext;
+var emptyArray = [];
 
 var Sidenav = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
@@ -45,8 +46,10 @@ var Sidenav = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
       _props$expanded = props.expanded,
       expanded = _props$expanded === void 0 ? true : _props$expanded,
-      activeKey = props.activeKey,
-      defaultOpenKeys = props.defaultOpenKeys,
+      _props$activeKey = props.activeKey,
+      activeKey = _props$activeKey === void 0 ? null : _props$activeKey,
+      _props$defaultOpenKey = props.defaultOpenKeys,
+      defaultOpenKeys = _props$defaultOpenKey === void 0 ? emptyArray : _props$defaultOpenKey,
       openKeysProp = props.openKeys,
       onSelect = props.onSelect,
       onOpenChange = props.onOpenChange,

package/cjs/Sidenav/SidenavDropdown.js

@@ -60,14 +60,8 @@ var SidenavDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, re
       openProp = props.open,
       onToggle = props.onToggle,
       rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "title", "children", "className", "menuStyle", "disabled", "renderTitle", "renderToggle", "classPrefix", "placement", "toggleClassName", "icon", "eventKey", "toggleAs", "noCaret", "style", "onOpen", "onClose", "open", "onToggle"]);
-
-  var _useContext = (0, _react.useContext)(_Sidenav.SidenavContext),
-      _useContext$openKeys = _useContext.openKeys,
-      openKeys = _useContext$openKeys === void 0 ? [] : _useContext$openKeys,
-      onOpenChange = _useContext.onOpenChange;
-
-  var _useContext2 = (0, _react.useContext)(_DropdownContext.default),
-      hasSelectedItem = _useContext2.hasSelectedItem;
+  var sidenavContext = (0, _react.useContext)(_Sidenav.SidenavContext);
+  var dropdownContext = (0, _react.useContext)(_DropdownContext.default);
 
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       merge = _useClassNames.merge,
@@ -75,6 +69,15 @@ var SidenavDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, re
 
   var internalId = (0, _useInternalId.default)('SidenavDropdown');
   var uniqueKey = eventKey !== null && eventKey !== void 0 ? eventKey : internalId;
+
+  if (!sidenavContext || !dropdownContext) {
+    throw new Error('<SidenavDropdown> component is not supposed to be used standalone. Use <Dropdown> inside <Sidenav> instead.');
+  }
+
+  var _sidenavContext$openK = sidenavContext.openKeys,
+      openKeys = _sidenavContext$openK === void 0 ? [] : _sidenavContext$openK,
+      onOpenChange = sidenavContext.onOpenChange;
+  var hasSelectedItem = dropdownContext.hasSelectedItem;
   var handleToggleDisclosure = (0, _react.useCallback)(function (open, event) {
     if (open) {
       onClose === null || onClose === void 0 ? void 0 : onClose();

package/cjs/Sidenav/SidenavDropdownItem.js

@@ -52,13 +52,16 @@ var SidenavDropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props
       onClick = props.onClick,
       onSelect = props.onSelect,
       rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "active", "children", "disabled", "divider", "panel", "className", "style", "classPrefix", "icon", "eventKey", "onClick", "onSelect"]);
+  var sidenavContext = (0, _react.useContext)(_Sidenav.SidenavContext);
+  var dropdown = (0, _react.useContext)(_DropdownContext.default);
 
-  var _useContext = (0, _react.useContext)(_Sidenav.SidenavContext),
-      activeKey = _useContext.activeKey,
-      onSidenavSelect = _useContext.onSelect;
+  if (!sidenavContext || !dropdown) {
+    throw new Error('<SidenavDropdownItem> component is not supposed to be used standalone. Use <Dropdown.Item> within <Sidenav> instead.');
+  }
 
+  var activeKey = sidenavContext.activeKey,
+      onSidenavSelect = sidenavContext.onSelect;
   var nav = (0, _react.useContext)(_NavContext.default);
-  var dropdown = (0, _react.useContext)(_DropdownContext.default);
 
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       merge = _useClassNames.merge,
@@ -72,9 +75,11 @@ var SidenavDropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props
     disabled: disabled
   }));
   var handleClick = (0, _react.useCallback)(function (event) {
+    var _dropdown$onSelect;
+
     if (disabled) return;
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(eventKey, event);
-    dropdown === null || dropdown === void 0 ? void 0 : dropdown.onSelect(eventKey, event);
+    (_dropdown$onSelect = dropdown.onSelect) === null || _dropdown$onSelect === void 0 ? void 0 : _dropdown$onSelect.call(dropdown, eventKey, event);
     onSidenavSelect === null || onSidenavSelect === void 0 ? void 0 : onSidenavSelect(eventKey, event);
   }, [disabled, onSelect, onSidenavSelect, eventKey, dropdown]);
   var menuitemEventHandlers = {

package/cjs/Sidenav/SidenavDropdownMenu.js

@@ -68,12 +68,16 @@ var SidenavDropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props
       withClassPrefix = _useClassNames.withClassPrefix,
       prefix = _useClassNames.prefix;
 
-  var _useContext = (0, _react.useContext)(_Sidenav.SidenavContext),
-      _useContext$openKeys = _useContext.openKeys,
-      openKeys = _useContext$openKeys === void 0 ? [] : _useContext$openKeys,
-      onOpenChange = _useContext.onOpenChange,
-      onSidenavSelect = _useContext.onSelect;
+  var sidenavContext = (0, _react.useContext)(_Sidenav.SidenavContext);
 
+  if (!sidenavContext) {
+    throw new Error('<SidenavDropdownMenu> component is not supposed to be used standalone. Use <Dropdown.Item> inside <Sidenav> instead.');
+  }
+
+  var _sidenavContext$openK = sidenavContext.openKeys,
+      openKeys = _sidenavContext$openK === void 0 ? [] : _sidenavContext$openK,
+      onOpenChange = sidenavContext.onOpenChange,
+      onSidenavSelect = sidenavContext.onSelect;
   var handleClick = (0, _react.useCallback)(function (event) {
     if (disabled) return;
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(eventKey, event);