rsuite 5.12.0 → 5.14.0

package/cjs/Sidenav/SidenavItem.js

@@ -31,11 +31,24 @@ var _omit = _interopRequireDefault(require("lodash/omit"));
 
 var _Sidenav = require("./Sidenav");
 
+var _Whisper = _interopRequireDefault(require("../Whisper"));
+
+var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+
+/**
+ * @private
+ */
 var SidenavItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);
+
+  if (!sidenav) {
+    throw new Error('<SidenavItem> component is not supposed to be used standalone. Use <Nav.Item> inside <Sidenav> instead.');
+  }
+
   var _props$as = props.as,
       Component = _props$as === void 0 ? _SafeAnchor.default : _props$as,
       activeProp = props.active,
-      _children = props.children,
+      children = props.children,
       className = props.className,
       disabled = props.disabled,
       _props$classPrefix = props.classPrefix,
@@ -47,16 +60,13 @@ var SidenavItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onSelect = props.onSelect,
       divider = props.divider,
       panel = props.panel,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "active", "children", "className", "disabled", "classPrefix", "icon", "eventKey", "style", "onClick", "onSelect", "divider", "panel"]);
-  var sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);
-
-  if (!sidenav) {
-    throw new Error('<SidenavItem> component is not supposed to be used standalone. Use <Nav.Item> inside <Sidenav> instead.');
-  }
+      _props$tooltip = props.tooltip,
+      tooltip = _props$tooltip === void 0 ? children : _props$tooltip,
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "active", "children", "className", "disabled", "classPrefix", "icon", "eventKey", "style", "onClick", "onSelect", "divider", "panel", "tooltip"]);
 
-  var _useContext = (0, _react.useContext)(_NavContext.default),
-      activeKey = _useContext.activeKey,
-      onSelectFromNav = _useContext.onSelect;
+  var _ref = (0, _react.useContext)(_NavContext.default),
+      activeKey = _ref.activeKey,
+      onSelectFromNav = _ref.onSelect;
 
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       merge = _useClassNames.merge,
@@ -72,31 +82,36 @@ var SidenavItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }, [disabled, onSelect, onSelectFromNav, eventKey, onClick]);
 
   if (!sidenav.expanded) {
-    return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
-      selected: selected,
-      disabled: disabled,
-      onActivate: handleClick
-    }, function (_ref, menuitemRef) {
-      var selected = _ref.selected,
-          active = _ref.active,
-          menuitem = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["selected", "active"]);
-      var classes = merge(className, withClassPrefix({
-        focus: active,
-        active: selected,
-        disabled: disabled
-      })); // Show tooltip when inside a collapse <Sidenav>
-
-      return (0, _utils.appendTooltip)({
-        children: function children(triggerProps, triggerRef) {
-          return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-            ref: (0, _utils.mergeRefs)((0, _utils.mergeRefs)(ref, menuitemRef), triggerRef),
-            disabled: Component === _SafeAnchor.default ? disabled : undefined,
-            className: classes,
-            "data-event-key": eventKey
-          }, (0, _omit.default)(rest, ['divider', 'panel']), triggerProps, menuitem), icon, _children, /*#__PURE__*/_react.default.createElement(_Ripple.default, null));
-        },
-        message: _children,
-        placement: 'right'
+    return /*#__PURE__*/_react.default.createElement(_Whisper.default, {
+      trigger: "hover",
+      speaker: /*#__PURE__*/_react.default.createElement(_Tooltip.default, null, tooltip),
+      placement: "right"
+    }, function (triggerProps, triggerRef) {
+      return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+        selected: selected,
+        disabled: disabled,
+        onActivate: handleClick
+      }, function (_ref2, menuitemRef) {
+        var selected = _ref2.selected,
+            active = _ref2.active,
+            menuitem = (0, _objectWithoutPropertiesLoose2.default)(_ref2, ["selected", "active"]);
+        var classes = merge(className, withClassPrefix({
+          focus: active,
+          active: selected,
+          disabled: disabled
+        })); // Show tooltip when inside a collapse <Sidenav>
+
+        return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+          ref: (0, _utils.mergeRefs)((0, _utils.mergeRefs)(ref, menuitemRef), triggerRef),
+          disabled: Component === _SafeAnchor.default ? disabled : undefined,
+          className: classes,
+          "data-event-key": eventKey
+        }, (0, _omit.default)(rest, ['divider', 'panel']), triggerProps, menuitem, {
+          onMouseOver: (0, _utils.createChainedFunction)(menuitem.onMouseOver, triggerProps.onMouseOver),
+          onMouseOut: (0, _utils.createChainedFunction)(menuitem.onMouseOut, triggerProps.onMouseOut)
+        }), icon && /*#__PURE__*/_react.default.cloneElement(icon, {
+          className: prefix('icon')
+        }), children, /*#__PURE__*/_react.default.createElement(_Ripple.default, null));
       });
     });
   }
@@ -116,7 +131,7 @@ var SidenavItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       role: "none presentation",
       style: style,
       className: merge(className, prefix('panel'))
-    }, rest), _children);
+    }, rest), children);
   }
 
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
@@ -129,7 +144,9 @@ var SidenavItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     style: style,
     "aria-selected": selected || undefined,
     "data-event-key": eventKey
-  }, rest), icon, _children, /*#__PURE__*/_react.default.createElement(_Ripple.default, null));
+  }, rest), icon && /*#__PURE__*/_react.default.cloneElement(icon, {
+    className: prefix('icon')
+  }), children, /*#__PURE__*/_react.default.createElement(_Ripple.default, null));
 });
 
 SidenavItem.displayName = 'Sidenav.Item';

package/cjs/Sidenav/SidenavToggle.d.ts

@@ -1,7 +1,11 @@
 import React from 'react';
 import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
 export interface SidenavToggleProps extends WithAsProps {
-    /** Expand then nav */
+    /**
+     * Expand then nav
+     *
+     * @deprecated Use <Sidenav expanded> instead.
+     */
     expanded?: boolean;
     /** Callback function for menu state switching */
     onToggle?: (expanded: boolean, event: React.MouseEvent) => void;

package/cjs/Sidenav/SidenavToggle.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
@@ -9,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -21,24 +23,37 @@ var _AngleLeft = _interopRequireDefault(require("@rsuite/icons/legacy/AngleLeft"
 
 var _AngleRight = _interopRequireDefault(require("@rsuite/icons/legacy/AngleRight"));
 
+var _deprecatePropType = _interopRequireDefault(require("../utils/deprecatePropType"));
+
+var _Sidenav = require("./Sidenav");
+
 var SidenavToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);
+
+  if (!sidenav) {
+    throw new Error('<Sidenav.Toggle> must be rendered within a <Sidenav>');
+  }
+
   var _props$as = props.as,
       Component = _props$as === void 0 ? 'div' : _props$as,
-      expanded = props.expanded,
+      DEPRECATED_expanded = props.expanded,
       className = props.className,
       _props$classPrefix = props.classPrefix,
       classPrefix = _props$classPrefix === void 0 ? 'sidenav-toggle' : _props$classPrefix,
       onToggle = props.onToggle,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "expanded", "className", "classPrefix", "onToggle"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "expanded", "className", "classPrefix", "onToggle"]); // if `expanded` prop is provided, it takes priority
+
+  var expanded = DEPRECATED_expanded !== null && DEPRECATED_expanded !== void 0 ? DEPRECATED_expanded : sidenav.expanded;
 
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       merge = _useClassNames.merge,
-      withClassPrefix = _useClassNames.withClassPrefix;
+      withClassPrefix = _useClassNames.withClassPrefix,
+      prefix = _useClassNames.prefix;
 
   var classes = merge(className, withClassPrefix({
     collapsed: !expanded
   }));
-  var Icon = expanded ? _AngleRight.default : _AngleLeft.default;
+  var Icon = expanded ? _AngleLeft.default : _AngleRight.default;
 
   var handleToggle = function handleToggle(event) {
     onToggle === null || onToggle === void 0 ? void 0 : onToggle(!expanded, event);
@@ -48,17 +63,18 @@ var SidenavToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     ref: ref,
     className: classes
   }), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-    appearance: "default",
     icon: /*#__PURE__*/_react.default.createElement(Icon, null),
-    onClick: handleToggle
+    className: prefix('button'),
+    onClick: handleToggle,
+    "aria-label": expanded ? 'Collapse' : 'Expand'
   }));
 });
 
-SidenavToggle.displayName = 'SidenavToggle';
+SidenavToggle.displayName = 'Sidenav.Toggle';
 SidenavToggle.propTypes = {
   classPrefix: _propTypes.default.string,
   className: _propTypes.default.string,
-  expanded: _propTypes.default.bool,
+  expanded: (0, _deprecatePropType.default)(_propTypes.default.bool, 'Use <Sidenav expanded> instead.'),
   onToggle: _propTypes.default.func
 };
 var _default = SidenavToggle;

package/cjs/Toggle/Toggle.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { WithAsProps, TypeAttributes, RsRefForwardingComponent } from '../@types/common';
 import { ToggleLocale } from '../locales';
 export interface ToggleProps extends WithAsProps {
-    /** Wheather to disabled toggle */
+    /** Whether to disabled toggle */
     disabled?: boolean;
     /** Render the control as plain text */
     plaintext?: boolean;

package/cjs/Tooltip/Tooltip.d.ts

@@ -3,10 +3,12 @@ import { TypeAttributes, WithAsProps, RsRefForwardingComponent } from '../@types
 export interface TooltipProps extends WithAsProps {
     /** Dispaly placement */
     placement?: TypeAttributes.Placement;
-    /** Wheather visible */
+    /** Whether visible */
     visible?: boolean;
     /** Primary content */
     children?: React.ReactNode;
+    /** Whether show the arrow indicator */
+    arrow?: boolean;
 }
 declare const Tooltip: RsRefForwardingComponent<'div', TooltipProps>;
 export default Tooltip;

package/cjs/Tooltip/Tooltip.js

@@ -24,13 +24,17 @@ var Tooltip = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       children = props.children,
       style = props.style,
       visible = props.visible,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "children", "style", "visible"]);
+      _props$arrow = props.arrow,
+      arrow = _props$arrow === void 0 ? true : _props$arrow,
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "children", "style", "visible", "arrow"]);
 
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       merge = _useClassNames.merge,
       withClassPrefix = _useClassNames.withClassPrefix;
 
-  var classes = merge(className, withClassPrefix());
+  var classes = merge(className, withClassPrefix({
+    arrow: arrow
+  }));
   var styles = (0, _extends2.default)({
     opacity: visible ? 1 : undefined
   }, style);
@@ -49,7 +53,8 @@ Tooltip.propTypes = {
   classPrefix: _propTypes.default.string,
   className: _propTypes.default.string,
   style: _propTypes.default.object,
-  children: _propTypes.default.node
+  children: _propTypes.default.node,
+  arrow: _propTypes.default.bool
 };
 var _default = Tooltip;
 exports.default = _default;

package/cjs/Whisper/Whisper.d.ts

@@ -1,9 +1,7 @@
 import React from 'react';
+import { OverlayTriggerInstance } from '../Overlay/OverlayTrigger';
 import { OverlayTriggerProps } from '../Overlay/OverlayTrigger';
 export declare type WhisperProps = OverlayTriggerProps;
-export interface WhisperInstance extends React.Component<WhisperProps> {
-    open: (delay?: number) => void;
-    close: (delay?: number) => void;
-}
-declare const Whisper: React.ForwardRefExoticComponent<OverlayTriggerProps & React.RefAttributes<unknown>>;
+export declare type WhisperInstance = OverlayTriggerInstance;
+declare const Whisper: React.ForwardRefExoticComponent<OverlayTriggerProps & React.RefAttributes<OverlayTriggerInstance>>;
 export default Whisper;

package/cjs/Whisper/Whisper.js

@@ -50,7 +50,12 @@ Whisper.propTypes = {
   /**
    * Prevent floating element overflow
    */
-  preventOverflow: _propTypes.default.bool
+  preventOverflow: _propTypes.default.bool,
+
+  /**
+   * Whether enable speaker follow cursor
+   */
+  followCursor: _propTypes.default.bool
 };
 var _default = Whisper;
 exports.default = _default;

package/cjs/Whisper/test/Whisper.test.d.ts

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

package/cjs/Whisper/test/Whisper.test.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Whisper = _interopRequireDefault(require("../Whisper"));
+
+var _whisperRef$current, _whisperRef$current2, _whisperRef$current3, _whisperRef$current4, _whisperRef$current5;
+
+var whisperRef = /*#__PURE__*/_react.default.createRef();
+
+/*#__PURE__*/
+_react.default.createElement(_Whisper.default, {
+  ref: whisperRef,
+  speaker: /*#__PURE__*/_react.default.createElement("div", null)
+}, /*#__PURE__*/_react.default.createElement("div", null));
+
+(_whisperRef$current = whisperRef.current) === null || _whisperRef$current === void 0 ? void 0 : _whisperRef$current.open();
+(_whisperRef$current2 = whisperRef.current) === null || _whisperRef$current2 === void 0 ? void 0 : _whisperRef$current2.open(300);
+(_whisperRef$current3 = whisperRef.current) === null || _whisperRef$current3 === void 0 ? void 0 : _whisperRef$current3.close();
+(_whisperRef$current4 = whisperRef.current) === null || _whisperRef$current4 === void 0 ? void 0 : _whisperRef$current4.close(300);
+(_whisperRef$current5 = whisperRef.current) === null || _whisperRef$current5 === void 0 ? void 0 : _whisperRef$current5.updatePosition();

package/cjs/index.d.ts

@@ -7,7 +7,7 @@ export type { ButtonToolbarProps } from './ButtonToolbar';
 export { default as ButtonGroup } from './ButtonGroup';
 export type { ButtonGroupProps } from './ButtonGroup';
 export { default as Whisper } from './Whisper';
-export type { WhisperProps } from './Whisper';
+export type { WhisperProps, WhisperInstance } from './Whisper';
 export { default as Tooltip } from './Tooltip';
 export type { TooltipProps } from './Tooltip';
 export { default as Popover } from './Popover';
@@ -32,7 +32,7 @@ export { default as Avatar } from './Avatar';
 export type { AvatarProps } from './Avatar';
 export { default as AvatarGroup } from './AvatarGroup';
 export type { AvatarGroupProps } from './AvatarGroup';
-export { default as toaster } from './toaster';
+export { default as toaster, useToaster } from './toaster';
 export type { Toaster } from './toaster';
 export { default as Dropdown } from './Dropdown';
 export type { DropdownProps, DropdownMenuItemProps, DropdownMenuProps } from './Dropdown';
@@ -51,7 +51,7 @@ export type { StepsProps, StepItemProps } from './Steps';
 export { default as Toggle } from './Toggle';
 export type { ToggleProps } from './Toggle';
 export { default as Form, useFormClassNames } from './Form';
-export type { FormProps, FormGroupProps, FormErrorMessageProps, FormControlLabelProps, FormHelpTextProps, FormControlProps } from './Form';
+export type { FormProps, FormInstance, FormGroupProps, FormErrorMessageProps, FormControlLabelProps, FormHelpTextProps, FormControlProps } from './Form';
 export { default as Input } from './Input';
 export type { InputProps } from './Input';
 export { default as MaskedInput } from './MaskedInput';

package/cjs/index.js

@@ -5,7 +5,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.useFormClassNames = exports.CustomProvider = exports.Affix = exports.DOMHelper = exports.Animation = exports.Schema = exports.Stack = exports.Divider = exports.Footer = exports.Sidebar = exports.Header = exports.Content = exports.Container = exports.FlexboxGrid = exports.Col = exports.Row = exports.Grid = exports.Carousel = exports.Calendar = exports.List = exports.TagGroup = exports.Tag = exports.Timeline = exports.Progress = exports.Table = exports.PanelGroup = exports.Panel = exports.CheckTree = exports.Tree = exports.Rate = exports.RangeSlider = exports.Slider = exports.Uploader = exports.AutoComplete = exports.DateRangePicker = exports.DatePicker = exports.MultiCascader = exports.Cascader = exports.CheckTreePicker = exports.TreePicker = exports.TagInput = exports.TagPicker = exports.InputPicker = exports.CheckPicker = exports.SelectPicker = exports.RadioGroup = exports.Radio = exports.CheckboxGroup = exports.Checkbox = exports.InputGroup = exports.InputNumber = exports.MaskedInput = exports.Input = exports.Form = exports.Toggle = exports.Steps = exports.Pagination = exports.Breadcrumb = exports.Sidenav = exports.Navbar = exports.Nav = exports.Dropdown = exports.toaster = exports.AvatarGroup = exports.Avatar = exports.Badge = exports.Placeholder = exports.SafeAnchor = exports.Loader = exports.Drawer = exports.Message = exports.Notification = exports.Modal = exports.Popover = exports.Tooltip = exports.Whisper = exports.ButtonGroup = exports.ButtonToolbar = exports.IconButton = exports.Button = void 0;
+exports.useFormClassNames = exports.useToaster = exports.CustomProvider = exports.Affix = exports.DOMHelper = exports.Animation = exports.Schema = exports.Stack = exports.Divider = exports.Footer = exports.Sidebar = exports.Header = exports.Content = exports.Container = exports.FlexboxGrid = exports.Col = exports.Row = exports.Grid = exports.Carousel = exports.Calendar = exports.List = exports.TagGroup = exports.Tag = exports.Timeline = exports.Progress = exports.Table = exports.PanelGroup = exports.Panel = exports.CheckTree = exports.Tree = exports.Rate = exports.RangeSlider = exports.Slider = exports.Uploader = exports.AutoComplete = exports.DateRangePicker = exports.DatePicker = exports.MultiCascader = exports.Cascader = exports.CheckTreePicker = exports.TreePicker = exports.TagInput = exports.TagPicker = exports.InputPicker = exports.CheckPicker = exports.SelectPicker = exports.RadioGroup = exports.Radio = exports.CheckboxGroup = exports.Checkbox = exports.InputGroup = exports.InputNumber = exports.MaskedInput = exports.Input = exports.Form = exports.Toggle = exports.Steps = exports.Pagination = exports.Breadcrumb = exports.Sidenav = exports.Navbar = exports.Nav = exports.Dropdown = exports.toaster = exports.AvatarGroup = exports.Avatar = exports.Badge = exports.Placeholder = exports.SafeAnchor = exports.Loader = exports.Drawer = exports.Message = exports.Notification = exports.Modal = exports.Popover = exports.Tooltip = exports.Whisper = exports.ButtonGroup = exports.ButtonToolbar = exports.IconButton = exports.Button = void 0;
 
 var _Button = _interopRequireDefault(require("./Button"));
 
@@ -75,9 +75,10 @@ var _AvatarGroup = _interopRequireDefault(require("./AvatarGroup"));
 
 exports.AvatarGroup = _AvatarGroup.default;
 
-var _toaster = _interopRequireDefault(require("./toaster"));
+var _toaster = _interopRequireWildcard(require("./toaster"));
 
 exports.toaster = _toaster.default;
+exports.useToaster = _toaster.useToaster;
 
 var _Dropdown = _interopRequireDefault(require("./Dropdown"));
 

package/cjs/toaster/ToastContainer.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
 export declare type PlacementType = 'topCenter' | 'bottomCenter' | 'topStart' | 'topEnd' | 'bottomStart' | 'bottomEnd';
+export declare const toastPlacements: PlacementType[];
 export interface ToastContainerProps extends WithAsProps {
     /** The placement of the message box */
     placement?: PlacementType;

package/cjs/toaster/ToastContainer.js

@@ -5,7 +5,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.default = void 0;
+exports.default = exports.toastPlacements = void 0;
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
@@ -23,6 +23,9 @@ var _Transition = _interopRequireDefault(require("../Animation/Transition"));
 
 var _utils = require("../utils");
 
+var toastPlacements = ['topCenter', 'bottomCenter', 'topStart', 'topEnd', 'bottomStart', 'bottomEnd'];
+exports.toastPlacements = toastPlacements;
+
 var useMessages = function useMessages() {
   var _useState = (0, _react.useState)([]),
       messages = _useState[0],

package/cjs/toaster/index.d.ts

@@ -1,3 +1,4 @@
 import toaster from './toaster';
 export type { Toaster } from './toaster';
+export { default as useToaster } from './useToaster';
 export default toaster;

package/cjs/toaster/index.js

@@ -3,9 +3,12 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.default = void 0;
+exports.default = exports.useToaster = void 0;
 
 var _toaster = _interopRequireDefault(require("./toaster"));
 
+var _useToaster = _interopRequireDefault(require("./useToaster"));
+
+exports.useToaster = _useToaster.default;
 var _default = _toaster.default;
 exports.default = _default;

package/cjs/toaster/toaster.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { ToastContainerProps } from './ToastContainer';
-export declare type PlacementType = 'topStart' | 'topEnd' | 'bottomStart' | 'bottomEnd';
 export interface Toaster {
     /**
      * Add a message to the container.

package/cjs/toaster/useToaster.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ToastContainerProps } from './ToastContainer';
+/**
+ * Hook to use the toaster
+ * @returns toaster { push, remove, clear }
+ */
+declare const useToaster: () => {
+    push: (message: React.ReactNode, options?: ToastContainerProps) => string | undefined;
+    remove: (key: string) => void;
+    clear: () => void;
+};
+export default useToaster;

package/cjs/toaster/useToaster.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _toaster = _interopRequireDefault(require("./toaster"));
+
+var _utils = require("../utils");
+
+/**
+ * Hook to use the toaster
+ * @returns toaster { push, remove, clear }
+ */
+var useToaster = function useToaster() {
+  var _useCustom = (0, _utils.useCustom)(),
+      toasters = _useCustom.toasters;
+
+  return {
+    push: function push(message, options) {
+      var _toasters$current;
+
+      var customToaster = toasters === null || toasters === void 0 ? void 0 : (_toasters$current = toasters.current) === null || _toasters$current === void 0 ? void 0 : _toasters$current.get((options === null || options === void 0 ? void 0 : options.placement) || 'topCenter');
+      return customToaster ? customToaster.push(message) : _toaster.default.push(message, options);
+    },
+    remove: function remove(key) {
+      toasters ? Array.from(toasters.current).forEach(function (_ref) {
+        var c = _ref[1];
+        return c === null || c === void 0 ? void 0 : c.remove(key);
+      }) : _toaster.default.remove(key);
+    },
+    clear: function clear() {
+      toasters ? Array.from(toasters.current).forEach(function (_ref2) {
+        var c = _ref2[1];
+        return c === null || c === void 0 ? void 0 : c.clear();
+      }) : _toaster.default.clear();
+    }
+  };
+};
+
+var _default = useToaster;
+exports.default = _default;

package/cjs/utils/constants.d.ts

@@ -1,4 +1,5 @@
 export declare const SIZE: string[];
+export declare const COLUMN_SIZE: string[];
 export declare const STATUS: string[];
 export declare const COLOR: string[];
 export declare const PLACEMENT_4: readonly ["top", "bottom", "right", "left"];

package/cjs/utils/constants.js

@@ -1,9 +1,11 @@
 "use strict";
 
 exports.__esModule = true;
-exports.DATERANGE_DISABLED_TARGET = exports.KEY_VALUES = exports.TREE_NODE_DROP_POSITION = exports.TREE_NODE_ROOT_PADDING = exports.TREE_NODE_PADDING = exports.CHECK_STATE = exports.PLACEMENT = exports.PLACEMENT_AUTO = exports.PLACEMENT_8 = exports.PLACEMENT_4 = exports.COLOR = exports.STATUS = exports.SIZE = void 0;
+exports.DATERANGE_DISABLED_TARGET = exports.KEY_VALUES = exports.TREE_NODE_DROP_POSITION = exports.TREE_NODE_ROOT_PADDING = exports.TREE_NODE_PADDING = exports.CHECK_STATE = exports.PLACEMENT = exports.PLACEMENT_AUTO = exports.PLACEMENT_8 = exports.PLACEMENT_4 = exports.COLOR = exports.STATUS = exports.COLUMN_SIZE = exports.SIZE = void 0;
 var SIZE = ['lg', 'md', 'sm', 'xs'];
 exports.SIZE = SIZE;
+var COLUMN_SIZE = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
+exports.COLUMN_SIZE = COLUMN_SIZE;
 var STATUS = ['success', 'warning', 'error', 'info'];
 exports.STATUS = STATUS;
 var COLOR = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'violet'];

package/cjs/utils/deprecateComponent.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
@@ -9,7 +7,9 @@ exports.default = deprecateComponent;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
+
+var _warnOnce = _interopRequireDefault(require("./warnOnce"));
 
 /**
  * HOC for display a deprecation message from a deprecated component
@@ -21,9 +21,7 @@ function deprecateComponent(Component, message) {
   var componentDisplayName = (_Component$displayNam = Component.displayName) !== null && _Component$displayNam !== void 0 ? _Component$displayNam : Component.name;
 
   var Deprecated = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-    (0, _react.useEffect)(function () {
-      console.warn(message);
-    }, []);
+    (0, _warnOnce.default)(message);
     return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
       ref: ref
     }, props));

package/cjs/utils/deprecatePropType.d.ts

@@ -1,6 +1,2 @@
 import * as PropTypes from 'prop-types';
-declare function deprecatePropType<T extends PropTypes.Validator<any>>(propType: T, explanation?: string): typeof propType;
-declare namespace deprecatePropType {
-    var _resetWarned: () => void;
-}
-export default deprecatePropType;
+export default function deprecatePropType<T extends PropTypes.Validator<any>>(propType: T, explanation?: string): typeof propType;

package/cjs/utils/deprecatePropType.js

@@ -1,20 +1,19 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.default = deprecatePropType;
-// Ref: https://github.com/thefrontside/deprecated-prop-type/blob/master/deprecated.js
-var warned = {};
 
+var _warnOnce = _interopRequireDefault(require("./warnOnce"));
+
+// Ref: https://github.com/thefrontside/deprecated-prop-type/blob/master/deprecated.js
 function deprecatePropType(propType, explanation) {
   return function validate(props, propName, componentName) {
     // Note ...rest here
     if (props[propName] != null) {
       var message = "\"" + propName + "\" property of \"" + componentName + "\" has been deprecated.\n" + explanation;
-
-      if (!warned[message]) {
-        console.warn(message);
-        warned[message] = true;
-      }
+      (0, _warnOnce.default)(message);
     }
 
     for (var _len = arguments.length, rest = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
@@ -23,10 +22,4 @@ function deprecatePropType(propType, explanation) {
 
     return propType.apply(void 0, [props, propName, componentName].concat(rest)); // and here
   };
-}
-
-function _resetWarned() {
-  warned = {};
-}
-
-deprecatePropType._resetWarned = _resetWarned;
+}

package/cjs/utils/stringToObject.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (value: any, labelKey?: string | undefined, valueKey?: string | undefined) => object | null;
+declare const _default: (value: any, labelKey?: string, valueKey?: string) => object | null;
 export default _default;

package/cjs/utils/tplTransform.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-declare const _default: (pattern: string, ...data: any[]) => React.ReactNode;
 /**
  * tplTransform('Show {0} data', <i>100</i>);
  * output:
  * Show <span><i>100</i></span> data
  */
+declare const _default: (pattern: string, ...data: any[]) => React.ReactNode;
 export default _default;