rsuite 5.3.0 → 5.4.3

package/esm/Overlay/Modal.js

@@ -1,16 +1,16 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useRef, useEffect, useState, useCallback } from 'react';
+import React, { useRef, useEffect, useState, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import canUseDOM from 'dom-lib/canUseDOM';
 import contains from 'dom-lib/contains';
 import getContainer from 'dom-lib/getContainer';
 import on from 'dom-lib/on';
 import ModalManager from './ModalManager';
 import Fade from '../Animation/Fade';
 import { animationPropTypes } from '../Animation/utils';
-import { mergeRefs, usePortal, createChainedFunction, useWillUnmount, KEY_VALUES } from '../utils';
+import { mergeRefs, usePortal, createChainedFunction, useWillUnmount, useEventCallback, KEY_VALUES } from '../utils';
+import OverlayContext from './OverlayContext';
 var manager;
 
 function getManager() {
@@ -72,7 +72,6 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
       open = props.open,
       _props$autoFocus = props.autoFocus,
       autoFocus = _props$autoFocus === void 0 ? true : _props$autoFocus,
-      onBackdropClick = props.onBackdropClick,
       onEsc = props.onEsc,
       onExit = props.onExit,
       onExiting = props.onExiting,
@@ -82,7 +81,7 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onEntered = props.onEntered,
       onClose = props.onClose,
       onOpen = props.onOpen,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "children", "transition", "dialogTransitionTimeout", "style", "className", "container", "animationProps", "containerClassName", "keyboard", "enforceFocus", "backdrop", "backdropTransitionTimeout", "backdropStyle", "backdropClassName", "open", "autoFocus", "onBackdropClick", "onEsc", "onExit", "onExiting", "onExited", "onEnter", "onEntering", "onEntered", "onClose", "onOpen"]);
+      rest = _objectWithoutPropertiesLoose(props, ["as", "children", "transition", "dialogTransitionTimeout", "style", "className", "container", "animationProps", "containerClassName", "keyboard", "enforceFocus", "backdrop", "backdropTransitionTimeout", "backdropStyle", "backdropClassName", "open", "autoFocus", "onEsc", "onExit", "onExiting", "onExited", "onEnter", "onEntering", "onEntered", "onClose", "onOpen"]);
 
   var _useState = useState(!open),
       exited = _useState[0],
@@ -103,12 +102,12 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var mountModal = open || Transition && !exited;
   var lastFocus = useRef(null);
-  var handleDocumentKeyDown = useCallback(function (event) {
+  var handleDocumentKeyDown = useEventCallback(function (event) {
     if (keyboard && event.key === KEY_VALUES.ESC && modal.isTopModal()) {
       onEsc === null || onEsc === void 0 ? void 0 : onEsc(event);
       onClose === null || onClose === void 0 ? void 0 : onClose(event);
     }
-  }, [keyboard, modal, onEsc, onClose]);
+  });
   var restoreLastFocus = useCallback(function () {
     if (lastFocus.current) {
       var _lastFocus$current$fo, _lastFocus$current;
@@ -117,32 +116,31 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
       lastFocus.current = null;
     }
   }, []);
-  var handleEnforceFocus = useCallback(function () {
-    if (!enforceFocus || !modal.isTopModal()) {
-      return;
-    }
+  /**
+   * Determines if the currently focused element is inside the dialog,
+   * and if not, returns the focus to the dialog.
+   *
+   */
 
+  var handleFocusDialog = useEventCallback(function (onBeforeFocusCallback) {
     var currentActiveElement = document.activeElement;
     var dialog = modal.dialog;
 
-    if (dialog && dialog !== currentActiveElement && !contains(dialog, currentActiveElement)) {
+    if (dialog && currentActiveElement && !contains(dialog, currentActiveElement)) {
+      onBeforeFocusCallback === null || onBeforeFocusCallback === void 0 ? void 0 : onBeforeFocusCallback();
       dialog.focus();
     }
-  }, [enforceFocus, modal]);
-  var handleBackdropClick = useCallback(function (event) {
-    if (event.target !== event.currentTarget) {
+  });
+  var handleEnforceFocus = useEventCallback(function () {
+    if (!enforceFocus || !modal.isTopModal()) {
       return;
     }
 
-    onBackdropClick === null || onBackdropClick === void 0 ? void 0 : onBackdropClick(event);
-
-    if (backdrop === true) {
-      onClose === null || onClose === void 0 ? void 0 : onClose(event);
-    }
-  }, [backdrop, onBackdropClick, onClose]);
+    handleFocusDialog();
+  });
   var documentKeyDownListener = useRef();
   var documentFocusListener = useRef();
-  var handleOpen = useCallback(function () {
+  var handleOpen = useEventCallback(function () {
     var containerElement = getContainer(container, document.body);
     modal.add(containerElement, containerClassName);
 
@@ -154,19 +152,15 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
       documentFocusListener.current = on(document, 'focus', handleEnforceFocus, true);
     }
 
-    if (canUseDOM) {
-      lastFocus.current = document.activeElement;
-    }
-
     if (autoFocus) {
-      var _modal$dialog;
-
-      (_modal$dialog = modal.dialog) === null || _modal$dialog === void 0 ? void 0 : _modal$dialog.focus();
+      handleFocusDialog(function () {
+        lastFocus.current = document.activeElement;
+      });
     }
 
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-  }, [autoFocus, container, containerClassName, handleDocumentKeyDown, handleEnforceFocus, modal, onOpen]);
-  var handleClose = useCallback(function () {
+  });
+  var handleClose = useEventCallback(function () {
     var _documentKeyDownListe, _documentFocusListene;
 
     modal.remove();
@@ -175,7 +169,7 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
     (_documentFocusListene = documentFocusListener.current) === null || _documentFocusListene === void 0 ? void 0 : _documentFocusListene.off();
     documentFocusListener.current = null;
     restoreLastFocus();
-  }, [modal, restoreLastFocus]);
+  });
   useEffect(function () {
     if (!open) {
       return;
@@ -196,17 +190,19 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var handleExited = useCallback(function () {
     setExited(true);
   }, []);
+  var contextValue = useMemo(function () {
+    return {
+      overlayContainer: function overlayContainer() {
+        return modal.dialog;
+      }
+    };
+  }, [modal.dialog]);
 
   if (!mountModal) {
     return null;
   }
 
   var renderBackdrop = function renderBackdrop() {
-    var backdropPorps = {
-      style: backdropStyle,
-      onClick: handleBackdropClick
-    };
-
     if (Transition) {
       return /*#__PURE__*/React.createElement(Fade, {
         transitionAppear: true,
@@ -218,18 +214,19 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
         return /*#__PURE__*/React.createElement("div", _extends({
           "aria-hidden": true
-        }, rest, backdropPorps, {
+        }, rest, {
+          style: backdropStyle,
           ref: mergeRefs(modal.setBackdropRef, ref),
           className: classNames(backdropClassName, className)
         }));
       });
     }
 
-    return /*#__PURE__*/React.createElement("div", _extends({
-      "aria-hidden": true
-    }, backdropPorps, {
+    return /*#__PURE__*/React.createElement("div", {
+      "aria-hidden": true,
+      style: backdropStyle,
       className: backdropClassName
-    }));
+    });
   };
 
   var dialogElement = Transition ? /*#__PURE__*/React.createElement(Transition, _extends({}, animationProps, {
@@ -244,12 +241,14 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onEntering: onEntering,
     onEntered: onEntered
   }), children) : children;
-  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(OverlayContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(Portal, null, backdrop && renderBackdrop(), /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: mergeRefs(modal.setDialogRef, ref),
     style: style,
     className: className,
     tabIndex: -1
-  }), backdrop && renderBackdrop(), dialogElement));
+  }), dialogElement)));
 });
 export var modalPropTypes = {
   as: PropTypes.elementType,
@@ -274,7 +273,6 @@ Modal.propTypes = _extends({}, animationPropTypes, modalPropTypes, {
   dialogTransitionTimeout: PropTypes.number,
   backdropTransitionTimeout: PropTypes.number,
   transition: PropTypes.any,
-  onEsc: PropTypes.func,
-  onBackdropClick: PropTypes.func
+  onEsc: PropTypes.func
 });
 export default Modal;

package/esm/Overlay/Overlay.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { TypeAttributes, AnimationEventProps } from '../@types/common';
 export interface OverlayProps extends AnimationEventProps {
-    container?: HTMLElement | (() => HTMLElement);
+    container?: HTMLElement | (() => HTMLElement | null) | null;
     children: React.ReactElement | ((props: any, ref: any) => React.ReactElement);
     childrenProps?: React.HTMLAttributes<HTMLElement>;
     className?: string;

package/esm/Overlay/Overlay.js

@@ -1,10 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { useState, useRef, useCallback } from 'react';
+import React, { useState, useRef, useCallback, useContext } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import Position from './Position';
 import { mergeRefs, useRootClose } from '../utils';
 import Fade from '../Animation/Fade';
+import OverlayContext from './OverlayContext';
 export var overlayPropTypes = {
   container: PropTypes.any,
   children: PropTypes.any,
@@ -26,7 +27,11 @@ export var overlayPropTypes = {
   onExited: PropTypes.func
 };
 var Overlay = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var container = props.container,
+  var _useContext = useContext(OverlayContext),
+      overlayContainer = _useContext.overlayContainer;
+
+  var _props$container = props.container,
+      container = _props$container === void 0 ? overlayContainer : _props$container,
       containerPadding = props.containerPadding,
       placement = props.placement,
       rootClose = props.rootClose,

package/esm/Overlay/OverlayContext.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface OverlayContextProps {
+    overlayContainer?: () => HTMLElement | null;
+}
+declare const OverlayContext: React.Context<OverlayContextProps>;
+export default OverlayContext;

package/esm/Overlay/OverlayContext.js

@@ -0,0 +1,4 @@
+import React from 'react';
+var OverlayContext = /*#__PURE__*/React.createContext({});
+OverlayContext.displayName = 'OverlayContext';
+export default OverlayContext;

package/esm/Overlay/OverlayTrigger.js

@@ -1,13 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _isUndefined from "lodash/isUndefined";
-import React, { useRef, useEffect, useImperativeHandle, useCallback } from 'react';
+import React, { useRef, useEffect, useImperativeHandle, useCallback, useContext } from 'react';
 import get from 'lodash/get';
 import isNil from 'lodash/isNil';
 import contains from 'dom-lib/contains';
 import Overlay from './Overlay';
 import { createChainedFunction, usePortal, useControlled } from '../utils';
 import isOneOf from '../utils/isOneOf';
+import OverlayContext from './OverlayContext';
 
 function mergeEvents(events, props) {
   if (events === void 0) {
@@ -47,8 +48,12 @@ function onMouseEventHandler(handler, event, delay) {
 
 var defaultTrigger = ['hover', 'focus'];
 var OverlayTrigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _useContext = useContext(OverlayContext),
+      overlayContainer = _useContext.overlayContainer;
+
   var children = props.children,
-      container = props.container,
+      _props$container = props.container,
+      container = _props$container === void 0 ? overlayContainer : _props$container,
       controlId = props.controlId,
       defaultOpen = props.defaultOpen,
       _props$trigger = props.trigger,

package/esm/Overlay/Position.d.ts

@@ -8,7 +8,7 @@ export interface PositionChildProps {
 export interface PositionProps {
     children: (props: PositionChildProps, ref: any) => React.ReactElement;
     className?: string;
-    container?: HTMLElement | (() => HTMLElement);
+    container?: HTMLElement | (() => HTMLElement | null) | null;
     containerPadding?: number;
     placement?: TypeAttributes.Placement;
     preventOverflow?: boolean;

package/esm/PanelGroup/PanelGroup.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useClassNames, useControlled } from '../utils';
 export var PanelGroupContext = /*#__PURE__*/React.createContext({});
@@ -34,16 +34,19 @@ var PanelGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setActiveKey(activeKey);
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(activeKey, event);
   }, [onSelect, setActiveKey]);
+  var contextValue = useMemo(function () {
+    return {
+      accordion: accordion,
+      activeKey: activeKey,
+      onGroupSelect: handleSelect
+    };
+  }, [accordion, activeKey, handleSelect]);
   return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: ref,
     role: accordion ? 'tablist' : undefined,
     className: classes
   }), /*#__PURE__*/React.createElement(PanelGroupContext.Provider, {
-    value: {
-      accordion: accordion,
-      activeKey: activeKey,
-      onGroupSelect: handleSelect
-    }
+    value: contextValue
   }, children));
 });
 PanelGroup.displayName = 'PanelGroup';

package/esm/Picker/propTypes.d.ts

@@ -9,7 +9,6 @@ export declare const pickerPropTypes: {
     containerPadding: PropTypes.Requireable<number>;
     container: PropTypes.Requireable<any>;
     disabled: PropTypes.Requireable<boolean>;
-    toggleAs: PropTypes.Requireable<PropTypes.ReactComponentLike>;
     menuClassName: PropTypes.Requireable<string>;
     menuStyle: PropTypes.Requireable<object>;
     placeholder: PropTypes.Requireable<PropTypes.ReactNodeLike>;
@@ -26,7 +25,7 @@ export declare const pickerPropTypes: {
     onOpen: PropTypes.Requireable<(...args: any[]) => any>;
     onClose: PropTypes.Requireable<(...args: any[]) => any>;
     onClean: PropTypes.Requireable<(...args: any[]) => any>;
-    listProps: PropTypes.Requireable<object>;
+    listProps: PropTypes.Requireable<any>;
     onEnter: PropTypes.Requireable<(...args: any[]) => any>;
     onEntering: PropTypes.Requireable<(...args: any[]) => any>;
     onEntered: PropTypes.Requireable<(...args: any[]) => any>;
@@ -35,7 +34,7 @@ export declare const pickerPropTypes: {
     onExited: PropTypes.Requireable<(...args: any[]) => any>;
 };
 export declare const listPickerPropTypes: {
-    data: PropTypes.Requireable<any[]>;
+    data: PropTypes.Validator<any[]>;
     valueKey: PropTypes.Requireable<string>;
     labelKey: PropTypes.Requireable<string>;
     childrenKey: PropTypes.Requireable<string>;
@@ -52,7 +51,6 @@ export declare const listPickerPropTypes: {
     containerPadding: PropTypes.Requireable<number>;
     container: PropTypes.Requireable<any>;
     disabled: PropTypes.Requireable<boolean>;
-    toggleAs: PropTypes.Requireable<PropTypes.ReactComponentLike>;
     menuClassName: PropTypes.Requireable<string>;
     menuStyle: PropTypes.Requireable<object>;
     placeholder: PropTypes.Requireable<PropTypes.ReactNodeLike>;
@@ -69,7 +67,7 @@ export declare const listPickerPropTypes: {
     onOpen: PropTypes.Requireable<(...args: any[]) => any>;
     onClose: PropTypes.Requireable<(...args: any[]) => any>;
     onClean: PropTypes.Requireable<(...args: any[]) => any>;
-    listProps: PropTypes.Requireable<object>;
+    listProps: PropTypes.Requireable<any>;
     onEnter: PropTypes.Requireable<(...args: any[]) => any>;
     onEntering: PropTypes.Requireable<(...args: any[]) => any>;
     onEntered: PropTypes.Requireable<(...args: any[]) => any>;

package/esm/Picker/propTypes.js

@@ -12,7 +12,8 @@ export var pickerPropTypes = _extends({}, animationPropTypes, {
   containerPadding: PropTypes.number,
   container: PropTypes.oneOfType([PropTypes.any, PropTypes.func]),
   disabled: PropTypes.bool,
-  toggleAs: PropTypes.elementType,
+  // PropTypes.elementType conflictin with React.ElementType
+  // toggleAs: PropTypes.elementType,
   menuClassName: PropTypes.string,
   menuStyle: PropTypes.object,
   placeholder: PropTypes.node,
@@ -30,10 +31,10 @@ export var pickerPropTypes = _extends({}, animationPropTypes, {
   onOpen: PropTypes.func,
   onClose: PropTypes.func,
   onClean: PropTypes.func,
-  listProps: PropTypes.object
+  listProps: PropTypes.any
 });
 export var listPickerPropTypes = _extends({}, pickerPropTypes, {
-  data: PropTypes.array,
+  data: PropTypes.array.isRequired,
   valueKey: PropTypes.string,
   labelKey: PropTypes.string,
   childrenKey: PropTypes.string,

package/esm/Picker/utils.d.ts

@@ -56,13 +56,13 @@ interface FocusItemValueProps {
  * @param defaultFocusItemValue
  * @param props
  */
-export declare const useFocusItemValue: <T extends string | number>(defaultFocusItemValue: T | null | undefined, props: FocusItemValueProps) => {
+export declare const useFocusItemValue: <T>(defaultFocusItemValue: T | null | undefined, props: FocusItemValueProps) => {
     focusItemValue: T | null | undefined;
     setFocusItemValue: React.Dispatch<React.SetStateAction<T | null | undefined>>;
     layer: number;
     setLayer: React.Dispatch<React.SetStateAction<number>>;
-    keys: (string | undefined)[];
-    setKeys: React.Dispatch<React.SetStateAction<(string | undefined)[]>>;
+    keys: any[];
+    setKeys: React.Dispatch<React.SetStateAction<any[]>>;
     onKeyDown: (event: any) => void;
 };
 interface ToggleKeyDownEventProps {

package/esm/SelectPicker/SelectPicker.d.ts

@@ -1,10 +1,9 @@
-import React from 'react';
+import React, { Ref } from 'react';
 import { PickerLocale } from '../locales';
-import { PickerComponent } from '../Picker';
+import { PickerInstance } 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 +36,18 @@ 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> & {
+        ref?: Ref<PickerInstance>;
+    }): 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

@@ -78,9 +78,9 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   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,59 @@
+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);
+  }
+});
+var pickerRef = /*#__PURE__*/React.createRef();
+
+/*#__PURE__*/
+React.createElement(SelectPicker, {
+  ref: pickerRef,
+  data: []
+});

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;