rsuite 5.13.1 → 5.14.0

package/cjs/Sidenav/SidenavItem.js

@@ -31,6 +31,10 @@ var _omit = _interopRequireDefault(require("lodash/omit"));
 
 var _Sidenav = require("./Sidenav");
 
+var _Whisper = _interopRequireDefault(require("../Whisper"));
+
+var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+
 /**
  * @private
  */
@@ -44,7 +48,7 @@ var SidenavItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   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,
@@ -56,7 +60,9 @@ 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"]);
+      _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 _ref = (0, _react.useContext)(_NavContext.default),
       activeKey = _ref.activeKey,
@@ -76,33 +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 (_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 (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 && /*#__PURE__*/_react.default.cloneElement(icon, {
-            className: prefix('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));
       });
     });
   }
@@ -122,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)({
@@ -137,7 +146,7 @@ var SidenavItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     "data-event-key": eventKey
   }, rest), icon && /*#__PURE__*/_react.default.cloneElement(icon, {
     className: prefix('icon')
-  }), _children, /*#__PURE__*/_react.default.createElement(_Ripple.default, null));
+  }), children, /*#__PURE__*/_react.default.createElement(_Ripple.default, null));
 });
 
 SidenavItem.displayName = 'Sidenav.Item';

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.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/index.d.ts

@@ -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/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;

package/cjs/utils/treeUtils.d.ts

@@ -70,7 +70,7 @@ export declare function filterNodesOfTree(data: any, check: any): TreeNodeType[]
  * @param isSearching - component is in Searching
  * @returns
  */
-export declare const getFocusableItems: (filteredData: ItemDataType[], props: Required<Pick<PartialTreeProps, 'disabledItemValues' | 'valueKey' | 'childrenKey' | 'expandItemValues'>>, isSearching?: boolean | undefined) => TreeNodeType[];
+export declare const getFocusableItems: (filteredData: ItemDataType[], props: Required<Pick<PartialTreeProps, 'disabledItemValues' | 'valueKey' | 'childrenKey' | 'expandItemValues'>>, isSearching?: boolean) => TreeNodeType[];
 /**
  * return all focusable Item and active Element index
  * @param focusItemValue
@@ -190,7 +190,7 @@ interface UnSerializeListProps {
 export declare function useFlattenTreeData({ data, labelKey, valueKey, childrenKey, uncheckableItemValues, callback }: FlattenTreeDataProps): {
     forceUpdate: () => void;
     flattenNodes: TreeNodesType;
-    flattenTreeData: (treeData: TreeNodeType[], ref: string, parent?: TreeNodeType | undefined, layer?: any) => never[] | undefined;
+    flattenTreeData: (treeData: TreeNodeType[], ref: string, parent?: TreeNodeType, layer?: any) => never[] | undefined;
     serializeListOnlyParent: (nodes: TreeNodesType, key: string) => (string | number)[];
     unSerializeList: ({ nodes, key, value, cascade, uncheckableItemValues }: UnSerializeListProps) => void;
     formatVirtualizedTreeData: (nodes: TreeNodesType, data: any[], expandItemValues: ItemDataType[], options: {
@@ -203,7 +203,7 @@ export declare function useFlattenTreeData({ data, labelKey, valueKey, childrenK
  */
 export declare function useTreeNodeRefs(): {
     treeNodesRefs: {};
-    saveTreeNodeRef: (ref: React.Ref<any>, refKey?: string | undefined) => void;
+    saveTreeNodeRef: (ref: React.Ref<any>, refKey?: string) => void;
 };
 interface TreeSearchProps {
     labelKey: string;

package/cjs/utils/useCustom.d.ts

@@ -3,5 +3,5 @@ import { CustomValue } from '../CustomProvider/CustomProvider';
  * A hook to get custom configuration of `<CustomProvider>`
  * @param keys
  */
-declare function useCustom<T = any>(keys: string | string[], overrideLocale?: any): CustomValue<T>;
+declare function useCustom<T = any>(keys?: string | string[], overrideLocale?: any): CustomValue<T>;
 export default useCustom;

package/cjs/utils/useCustom.js

@@ -40,11 +40,12 @@ function useCustom(keys, overrideLocale) {
       _useContext$rtl = _useContext.rtl,
       rtl = _useContext$rtl === void 0 ? getDefaultRTL() : _useContext$rtl,
       formatDate = _useContext.formatDate,
-      parseDate = _useContext.parseDate;
+      parseDate = _useContext.parseDate,
+      toasters = _useContext.toasters;
 
-  var componentLocale = (0, _extends2.default)({}, locale === null || locale === void 0 ? void 0 : locale.common, typeof keys === 'string' ? locale === null || locale === void 0 ? void 0 : locale[keys] : mergeObject(keys.map(function (key) {
+  var componentLocale = (0, _extends2.default)({}, locale === null || locale === void 0 ? void 0 : locale.common, typeof keys === 'string' ? locale === null || locale === void 0 ? void 0 : locale[keys] : typeof keys === 'object' ? mergeObject(keys.map(function (key) {
     return locale === null || locale === void 0 ? void 0 : locale[key];
-  }))); // Component custom locale
+  })) : {}); // Component custom locale
 
   if (overrideLocale) {
     componentLocale = mergeObject([componentLocale, overrideLocale]);
@@ -67,6 +68,7 @@ function useCustom(keys, overrideLocale) {
   return {
     locale: componentLocale,
     rtl: rtl,
+    toasters: toasters,
     formatDate: formatDate || defaultFormatDate,
     parseDate: parseDate || defaultParseDate
   };

package/cjs/utils/useFocus.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 export default function useFocus<E extends HTMLElement>(elementRef: React.RefObject<E>): {
     grab: () => void;
-    release: (options?: FocusOptions | undefined) => void;
+    release: (options?: FocusOptions) => void;
 };