rsuite 5.2.4 → 5.4.2

package/esm/RangeSlider/RangeSlider.js

@@ -11,6 +11,7 @@ import ProgressBar from '../Slider/ProgressBar';
 import Handle from '../Slider/Handle';
 import Graduated from '../Slider/Graduated';
 import { precisionMath, checkValue } from '../Slider/utils';
+import { tupleType } from '../utils/propTypeChecker';
 var defaultDefaultValue = [0, 0];
 var RangeSlider = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var ariaLabel = props['aria-label'],
@@ -48,7 +49,7 @@ var RangeSlider = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onChangeCommitted = props.onChangeCommitted,
       rest = _objectWithoutPropertiesLoose(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 = useRef(); // Define the parameter position of the handle
+  var barRef = useRef(null); // Define the parameter position of the handle
 
   var handleIndexs = useRef([0, 1]);
 
@@ -264,7 +265,7 @@ var RangeSlider = /*#__PURE__*/React.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,
@@ -299,7 +300,7 @@ var RangeSlider = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 RangeSlider.displayName = 'RangeSlider';
 RangeSlider.propTypes = _extends({}, sliderPropTypes, {
-  value: PropTypes.arrayOf(PropTypes.number),
-  defaultValue: PropTypes.arrayOf(PropTypes.number)
+  value: tupleType(PropTypes.number.isRequired, PropTypes.number.isRequired),
+  defaultValue: tupleType(PropTypes.number.isRequired, PropTypes.number.isRequired)
 });
 export default RangeSlider;

package/esm/Rate/Character.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _isNil from "lodash/isNil";
 
 var _characterStatus;
 
@@ -33,8 +34,8 @@ var Character = /*#__PURE__*/React.forwardRef(function (props, ref) {
       prefix = _useClassNames.prefix,
       withClassPrefix = _useClassNames.withClassPrefix;
 
-  var beforeRef = useRef();
-  var classes = merge(className, withClassPrefix(characterStatus[status]));
+  var beforeRef = useRef(null);
+  var classes = merge(className, withClassPrefix(!_isNil(status) && characterStatus[status]));
   var handleMouseMove = useCallback(function (event) {
     onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(getKey(beforeRef.current, event.target), event);
   }, [onMouseMove]);

package/esm/Rate/Rate.js

@@ -24,7 +24,8 @@ var Rate = /*#__PURE__*/React.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,

package/esm/Ripple/Ripple.js

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

package/esm/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/esm/SelectPicker/SelectPicker.js

@@ -70,17 +70,17 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       renderExtraFooter = props.renderExtraFooter,
       rest = _objectWithoutPropertiesLoose(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 = useRef();
-  var targetRef = useRef();
-  var overlayRef = useRef();
-  var searchInputRef = useRef();
+  var triggerRef = useRef(null);
+  var targetRef = useRef(null);
+  var overlayRef = useRef(null);
+  var searchInputRef = useRef(null);
 
   var _useCustom = useCustom('Picker', overrideLocale),
       locale = _useCustom.locale;
 
-  var _useControlled = useControlled(valueProp, defaultValue),
-      value = _useControlled[0],
-      setValue = _useControlled[1]; // Used to hover the focus item  when trigger `onKeydown`
+  var _ref = useControlled(valueProp, defaultValue),
+      value = _ref[0],
+      setValue = _ref[1]; // Used to hover the focus item  when trigger `onKeydown`
 
 
   var _useFocusItemValue = useFocusItemValue(value, {
@@ -309,7 +309,7 @@ var SelectPicker = /*#__PURE__*/React.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/esm/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/esm/SelectPicker/test/SelectPicker.test.d.ts

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

package/esm/SelectPicker/test/SelectPicker.test.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { expectType } from 'ts-expect';
+import SelectPicker from '../SelectPicker'; // Infer value and onChange types from data
+
+var numberValuedData = [{
+  label: 'One',
+  value: 1
+}];
+
+/*#__PURE__*/
+React.createElement(SelectPicker, {
+  data: numberValuedData,
+  value: 1
+}); // @ts-expect-error should not accept string value
+
+/*#__PURE__*/
+React.createElement(SelectPicker, {
+  data: numberValuedData,
+  value: "1"
+});
+
+/*#__PURE__*/
+React.createElement(SelectPicker, {
+  data: numberValuedData,
+  onChange: function onChange(newValue) {
+    expectType(newValue);
+  }
+});
+var stringValuedData = [{
+  label: 'One',
+  value: 'One'
+}];
+
+/*#__PURE__*/
+React.createElement(SelectPicker, {
+  data: stringValuedData,
+  value: "1"
+}); // @ts-expect-error should not accept number value
+
+/*#__PURE__*/
+React.createElement(SelectPicker, {
+  data: stringValuedData,
+  value: 1
+});
+
+/*#__PURE__*/
+React.createElement(SelectPicker, {
+  data: stringValuedData,
+  onChange: function onChange(newValue) {
+    expectType(newValue);
+  }
+});

package/esm/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/esm/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/esm/Sidenav/Sidenav.js

@@ -11,6 +11,7 @@ import SidenavToggle from './SidenavToggle';
 import { useClassNames, useControlled, mergeRefs } from '../utils';
 import deprecatePropType from '../utils/deprecatePropType';
 export var SidenavContext = /*#__PURE__*/React.createContext(null);
+var emptyArray = [];
 var Sidenav = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
       Component = _props$as === void 0 ? 'nav' : _props$as,
@@ -21,8 +22,10 @@ var Sidenav = /*#__PURE__*/React.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/esm/Sidenav/SidenavDropdown.js

@@ -38,13 +38,8 @@ var SidenavDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onToggle = props.onToggle,
       rest = _objectWithoutPropertiesLoose(props, ["as", "title", "children", "className", "menuStyle", "disabled", "renderTitle", "renderToggle", "classPrefix", "placement", "toggleClassName", "icon", "eventKey", "toggleAs", "noCaret", "style", "onOpen", "onClose", "open", "onToggle"]);
 
-  var _useContext = useContext(SidenavContext),
-      _useContext$openKeys = _useContext.openKeys,
-      openKeys = _useContext$openKeys === void 0 ? [] : _useContext$openKeys,
-      onOpenChange = _useContext.onOpenChange;
-
-  var _useContext2 = useContext(DropdownContext),
-      hasSelectedItem = _useContext2.hasSelectedItem;
+  var sidenavContext = useContext(SidenavContext);
+  var dropdownContext = useContext(DropdownContext);
 
   var _useClassNames = useClassNames(classPrefix),
       merge = _useClassNames.merge,
@@ -52,6 +47,15 @@ var SidenavDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var internalId = useInternalId('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 = useCallback(function (open, event) {
     if (open) {
       onClose === null || onClose === void 0 ? void 0 : onClose();

package/esm/Sidenav/SidenavDropdownItem.js

@@ -33,12 +33,16 @@ var SidenavDropdownItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onSelect = props.onSelect,
       rest = _objectWithoutPropertiesLoose(props, ["as", "active", "children", "disabled", "divider", "panel", "className", "style", "classPrefix", "icon", "eventKey", "onClick", "onSelect"]);
 
-  var _useContext = useContext(SidenavContext),
-      activeKey = _useContext.activeKey,
-      onSidenavSelect = _useContext.onSelect;
+  var sidenavContext = useContext(SidenavContext);
+  var dropdown = useContext(DropdownContext);
+
+  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 = useContext(NavContext);
-  var dropdown = useContext(DropdownContext);
 
   var _useClassNames = useClassNames(classPrefix),
       merge = _useClassNames.merge,
@@ -52,9 +56,11 @@ var SidenavDropdownItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
     disabled: disabled
   }));
   var handleClick = 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/esm/Sidenav/SidenavDropdownMenu.js

@@ -46,12 +46,16 @@ var SidenavDropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
       withClassPrefix = _useClassNames.withClassPrefix,
       prefix = _useClassNames.prefix;
 
-  var _useContext = useContext(SidenavContext),
-      _useContext$openKeys = _useContext.openKeys,
-      openKeys = _useContext$openKeys === void 0 ? [] : _useContext$openKeys,
-      onOpenChange = _useContext.onOpenChange,
-      onSidenavSelect = _useContext.onSelect;
+  var sidenavContext = useContext(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 = useCallback(function (event) {
     if (disabled) return;
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(eventKey, event);

package/esm/Sidenav/SidenavItem.d.ts

@@ -11,7 +11,7 @@ export interface SidenavItemProps<T = any> extends WithAsProps, Omit<React.HTMLA
     /** The value of the current option */
     eventKey?: T;
     /** Selected callback function */
-    onSelect?: (eventKey: T, event: React.MouseEvent<HTMLElement>) => void;
+    onSelect?: (eventKey: T, event: React.MouseEvent) => void;
     divider?: boolean;
     panel?: boolean;
 }

package/esm/Sidenav/SidenavItem.js

@@ -30,6 +30,10 @@ var SidenavItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var sidenav = useContext(SidenavContext);
 
+  if (!sidenav) {
+    throw new Error('<SidenavItem> component is not supposed to be used standalone. Use <Nav.Item> inside <Sidenav> instead.');
+  }
+
   var _useContext = useContext(NavContext),
       activeKey = _useContext.activeKey,
       onSelectFromNav = _useContext.onSelect;

package/esm/Slider/Graduated.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
 import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
 export interface GraduatedProps extends WithAsProps {
-    step?: number;
-    min?: number;
-    max?: number;
-    count?: number;
-    value?: number | number[];
+    step: number;
+    min: number;
+    max: number;
+    count: number;
+    value: number | number[];
     renderMark?: (mark: number) => React.ReactNode;
 }
 declare const Graduated: RsRefForwardingComponent<'div', GraduatedProps>;

package/esm/Slider/Handle.d.ts

@@ -7,7 +7,7 @@ export interface HandleProps extends WithAsProps, React.HTMLAttributes<HTMLDivEl
     rtl?: boolean;
     position?: number;
     value?: number;
-    renderTooltip?: (value: number) => React.ReactNode;
+    renderTooltip?: (value: number | undefined) => React.ReactNode;
     onDragMove?: (event: React.DragEvent, dataset?: DOMStringMap) => void;
     onDragStart?: (event: React.MouseEvent) => void;
     onDragEnd?: (event: React.MouseEvent, dataset?: DOMStringMap) => void;

package/esm/Slider/Handle.js

@@ -39,7 +39,7 @@ var Handle = /*#__PURE__*/React.forwardRef(function (props, ref) {
       active = _useState[0],
       setActive = _useState[1];
 
-  var rootRef = useRef();
+  var rootRef = useRef(null);
   var horizontalKey = rtl ? 'right' : 'left';
   var direction = vertical ? 'bottom' : horizontalKey;
 
@@ -52,7 +52,7 @@ var Handle = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var handleClasses = merge(className, prefix('handle'), {
     active: active
   });
-  var tooltipRef = useRef();
+  var tooltipRef = useRef(null);
   var mouseMoveTracker = useRef();
   var releaseMouseMoves = useCallback(function () {
     var _mouseMoveTracker$cur;
@@ -72,20 +72,24 @@ var Handle = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var _mouseMoveTracker$cur2;
 
     if ((_mouseMoveTracker$cur2 = mouseMoveTracker.current) !== null && _mouseMoveTracker$cur2 !== void 0 && _mouseMoveTracker$cur2.isDragging()) {
-      onDragMove === null || onDragMove === void 0 ? void 0 : onDragMove(event, rootRef.current.dataset);
+      var _rootRef$current;
+
+      onDragMove === null || onDragMove === void 0 ? void 0 : onDragMove(event, (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.dataset);
       setTooltipPosition();
     }
   }, [onDragMove, setTooltipPosition]);
   var handleDragEnd = useCallback(function (event) {
+    var _rootRef$current2;
+
     setActive(false);
     releaseMouseMoves();
-    onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(event, rootRef.current.dataset);
+    onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(event, (_rootRef$current2 = rootRef.current) === null || _rootRef$current2 === void 0 ? void 0 : _rootRef$current2.dataset);
   }, [onDragEnd, releaseMouseMoves]);
   var getMouseMoveTracker = useCallback(function () {
     return mouseMoveTracker.current || new DOMMouseMoveTracker(handleDragMove, handleDragEnd, document.body);
   }, [handleDragEnd, handleDragMove]);
   var handleMouseDown = useCallback(function (event) {
-    var _mouseMoveTracker$cur3, _rootRef$current;
+    var _mouseMoveTracker$cur3, _rootRef$current3;
 
     if (disabled) {
       return;
@@ -93,7 +97,7 @@ var Handle = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
     mouseMoveTracker.current = getMouseMoveTracker();
     (_mouseMoveTracker$cur3 = mouseMoveTracker.current) === null || _mouseMoveTracker$cur3 === void 0 ? void 0 : _mouseMoveTracker$cur3.captureMouseMoves(event);
-    (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.focus();
+    (_rootRef$current3 = rootRef.current) === null || _rootRef$current3 === void 0 ? void 0 : _rootRef$current3.focus();
     setActive(true);
     onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(event);
   }, [disabled, getMouseMoveTracker, onDragStart]);

package/esm/Slider/Mark.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
 export interface MarkProps extends WithAsProps {
-    mark?: number;
+    mark: number;
     last?: boolean;
     renderMark?: (mark: number) => React.ReactNode;
 }

package/esm/Slider/Slider.d.ts

@@ -45,7 +45,7 @@ export interface SliderProps<T = number> extends WithAsProps, FormControlBasePro
     /** Customize labels on the render ruler */
     renderMark?: (mark: number) => React.ReactNode;
     /** Customize the content of the rendered Tooltip. */
-    renderTooltip?: (value: number) => React.ReactNode;
+    renderTooltip?: (value: number | undefined) => React.ReactNode;
     /** Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider. */
     getAriaValueText?: (value: number, eventKey?: 'start' | 'end') => string;
     /** Callback function that is fired when the mouseup is triggered. */

package/esm/Slider/Slider.js

@@ -73,7 +73,7 @@ var Slider = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onChangeCommitted = props.onChangeCommitted,
       rest = _objectWithoutPropertiesLoose(props, ["aria-label", "aria-labelledby", "aria-valuetext", "as", "graduated", "className", "barClassName", "progress", "vertical", "disabled", "readOnly", "plaintext", "classPrefix", "min", "handleClassName", "handleStyle", "handleTitle", "tooltip", "step", "defaultValue", "value", "max", "getAriaValueText", "renderTooltip", "renderMark", "onChange", "onChangeCommitted"]);
 
-  var barRef = useRef();
+  var barRef = useRef(null);
 
   var _useClassNames = useClassNames(classPrefix),
       merge = _useClassNames.merge,
@@ -242,7 +242,7 @@ var Slider = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onDragMove: handleChangeValue,
     onKeyDown: handleKeyDown,
     onDragEnd: handleChangeCommitted,
-    tabIndex: disabled || readOnly ? null : 0,
+    tabIndex: disabled || readOnly ? undefined : 0,
     "aria-orientation": vertical ? 'vertical' : 'horizontal',
     "aria-valuenow": value,
     "aria-disabled": disabled,

package/esm/Slider/utils.d.ts

@@ -1,2 +1,3 @@
 export declare const precisionMath: (value: any) => number;
-export declare const checkValue: (value: number, min: number, max: number) => number;
+declare function checkValue<T extends number | undefined>(value: T, min: number, max: number): T extends undefined ? undefined : number;
+export { checkValue };

package/esm/Slider/utils.js

@@ -1,7 +1,8 @@
 export var precisionMath = function precisionMath(value) {
   return parseFloat(value.toFixed(10));
 };
-export var checkValue = function checkValue(value, min, max) {
+
+function checkValue(value, min, max) {
   if (typeof value === 'undefined') {
     return value;
   }
@@ -15,4 +16,6 @@ export var checkValue = function checkValue(value, min, max) {
   }
 
   return value;
-};
+}
+
+export { checkValue };

package/esm/Stack/Stack.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { WithAsProps } from '../@types/common';
+export interface StackProps extends WithAsProps {
+    /**
+     * The direction of the children in the stack.
+     */
+    direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+    /**
+     * Define the alignment of the children in the stack on the cross axis
+     */
+    alignItems?: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
+    /**
+     *  Define the alignment of the children in the stack on the inline axis
+     */
+    justifyContent?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around';
+    /** Define the spacing between immediate children */
+    spacing?: number | string | (number | string)[];
+    /** Add an element between each child */
+    divider?: React.ReactNode;
+    /**
+     * Define whether the children in the stack are forced onto one line or can wrap onto multiple lines
+     */
+    wrap?: boolean;
+}
+declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLDivElement>>;
+export default Stack;

package/esm/Stack/Stack.js

@@ -0,0 +1,71 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useClassNames, useCustom, isIE } from '../utils';
+var Stack = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _itemStyles;
+
+  var _props$as = props.as,
+      Component = _props$as === void 0 ? 'div' : _props$as,
+      _props$alignItems = props.alignItems,
+      alignItems = _props$alignItems === void 0 ? 'center' : _props$alignItems,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'stack' : _props$classPrefix,
+      className = props.className,
+      children = props.children,
+      direction = props.direction,
+      justifyContent = props.justifyContent,
+      spacing = props.spacing,
+      divider = props.divider,
+      style = props.style,
+      wrap = props.wrap,
+      rest = _objectWithoutPropertiesLoose(props, ["as", "alignItems", "classPrefix", "className", "children", "direction", "justifyContent", "spacing", "divider", "style", "wrap"]);
+
+  var _useCustom = useCustom('Stack'),
+      rtl = _useCustom.rtl;
+
+  var _useClassNames = useClassNames(classPrefix),
+      withClassPrefix = _useClassNames.withClassPrefix,
+      merge = _useClassNames.merge,
+      prefix = _useClassNames.prefix;
+
+  var classes = merge(className, withClassPrefix());
+  var isSupportGridGap = !isIE();
+  var count = React.Children.count(children);
+  var gridGap = Array.isArray(spacing) ? spacing : [spacing, 0];
+  var itemStyles = (_itemStyles = {}, _itemStyles[rtl ? 'marginLeft' : 'marginRight'] = gridGap[0], _itemStyles.marginBottom = gridGap[1], _itemStyles);
+
+  var styles = _extends({
+    alignItems: alignItems,
+    justifyContent: justifyContent,
+    flexDirection: direction,
+    flexWrap: wrap ? 'wrap' : undefined,
+    gap: isSupportGridGap ? spacing : undefined
+  }, style);
+
+  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+    ref: ref,
+    className: classes,
+    style: styles
+  }), React.Children.map(children, function (child, index) {
+    var childNode = /*#__PURE__*/React.createElement("div", {
+      className: prefix('item'),
+      style: !isSupportGridGap ? itemStyles : undefined
+    }, child);
+    return [childNode, index < count - 1 ? divider : null];
+  }));
+});
+Stack.displayName = 'Stack';
+Stack.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+  classPrefix: PropTypes.string,
+  direction: PropTypes.oneOf(['row', 'row-reverse', 'column', 'column-reverse']),
+  alignItems: PropTypes.oneOf(['flex-start', 'center', 'flex-end', 'stretch', 'baseline']),
+  justifyContent: PropTypes.oneOf(['flex-start', 'center', 'flex-end', 'space-between', 'space-around']),
+  spacing: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array]),
+  divider: PropTypes.node,
+  wrap: PropTypes.bool
+};
+export default Stack;

package/esm/Stack/index.d.ts

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

package/esm/Stack/index.js

@@ -0,0 +1,2 @@
+import Stack from './Stack';
+export default Stack;

package/esm/Steps/StepItem.js

@@ -43,7 +43,7 @@ var StepItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var iconNode = /*#__PURE__*/React.createElement("span", {
     className: prefix('icon', "icon-" + status)
-  }, (_STEP_STATUS_ICON$sta = STEP_STATUS_ICON[status]) !== null && _STEP_STATUS_ICON$sta !== void 0 ? _STEP_STATUS_ICON$sta : stepNumber);
+  }, status ? (_STEP_STATUS_ICON$sta = STEP_STATUS_ICON[status]) !== null && _STEP_STATUS_ICON$sta !== void 0 ? _STEP_STATUS_ICON$sta : stepNumber : stepNumber);
 
   if (icon) {
     iconNode = /*#__PURE__*/React.createElement("span", {