rsuite 5.0.0-beta.5 → 5.0.0

package/cjs/Nav/NavItem.js

@@ -17,8 +17,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _isNil = _interopRequireDefault(require("lodash/isNil"));
 
-var _omit = _interopRequireDefault(require("lodash/omit"));
-
 var _Ripple = _interopRequireDefault(require("../Ripple"));
 
 var _SafeAnchor = _interopRequireDefault(require("../SafeAnchor"));
@@ -31,27 +29,24 @@ var _NavContext = _interopRequireDefault(require("./NavContext"));
 
 var _Navbar = require("../Navbar/Navbar");
 
-var _MenuItem = _interopRequireDefault(require("../Menu/MenuItem"));
-
 var _SidenavItem = _interopRequireDefault(require("../Sidenav/SidenavItem"));
 
-var defaultProps = {
-  classPrefix: 'nav-item',
-  as: _SafeAnchor.default
-};
+var _NavbarItem = _interopRequireDefault(require("../Navbar/NavbarItem"));
+
 /**
  * The <Nav.Item> API
  */
-
 var NavItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var Component = props.as,
+  var _props$as = props.as,
+      Component = _props$as === void 0 ? _SafeAnchor.default : _props$as,
       activeProp = props.active,
       disabled = props.disabled,
       eventKey = props.eventKey,
       className = props.className,
-      classPrefix = props.classPrefix,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'nav-item' : _props$classPrefix,
       style = props.style,
-      _children = props.children,
+      children = props.children,
       icon = props.icon,
       divider = props.divider,
       panel = props.panel,
@@ -87,47 +82,8 @@ var NavItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }
   }, [disabled, emitSelect, onClick]);
 
-  if (sidenav !== null && sidenav !== void 0 && sidenav.expanded) {
-    return /*#__PURE__*/_react.default.createElement(_SidenavItem.default, props);
-  } // If <Nav.Item> is inside collapsed <Sidenav>, render an ARIA `menuitem`
-
-
   if (sidenav) {
-    return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
-      selected: active,
-      disabled: disabled,
-      onActivate: emitSelect
-    }, 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
-      }));
-
-      var item = /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-        ref: (0, _utils.mergeRefs)(ref, menuitemRef),
-        disabled: Component === _SafeAnchor.default ? disabled : undefined,
-        className: classes,
-        "data-event-key": eventKey
-      }, menuitem, (0, _omit.default)(rest, ['divider', 'panel'])), icon, _children, /*#__PURE__*/_react.default.createElement(_Ripple.default, null)); // Show tooltip when inside a collapse <Sidenav>
-
-
-      return sidenav ? (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
-          }, menuitem, (0, _omit.default)(rest, ['divider', 'panel']), triggerProps), icon, _children, /*#__PURE__*/_react.default.createElement(_Ripple.default, null));
-        },
-        message: _children,
-        placement: 'right'
-      }) : item;
-    });
+    return /*#__PURE__*/_react.default.createElement(_SidenavItem.default, props);
   }
 
   if (divider) {
@@ -144,18 +100,11 @@ var NavItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       ref: ref,
       style: style,
       className: merge(className, prefix('panel'))
-    }, rest), _children);
+    }, rest), children);
   }
 
   if (navbar) {
-    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-      ref: ref,
-      "aria-selected": active || undefined
-    }, rest, {
-      className: classes,
-      onClick: handleClick,
-      style: style
-    }), icon, _children, /*#__PURE__*/_react.default.createElement(_Ripple.default, null));
+    return /*#__PURE__*/_react.default.createElement(_NavbarItem.default, props);
   }
 
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
@@ -166,10 +115,9 @@ var NavItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onClick: handleClick,
     style: style,
     "aria-selected": active || undefined
-  }), icon, _children, /*#__PURE__*/_react.default.createElement(_Ripple.default, null));
+  }), icon, children, /*#__PURE__*/_react.default.createElement(_Ripple.default, null));
 });
 
-NavItem.defaultProps = defaultProps;
 NavItem.displayName = 'Nav.Item';
 NavItem.propTypes = {
   as: _propTypes.default.elementType,

package/cjs/Navbar/NavbarItem.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { IconProps } from '@rsuite/icons/lib/Icon';
+import { RsRefForwardingComponent, WithAsProps } from '../@types/common';
+export interface NavItemProps<T = string> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
+    /** Activation status */
+    active?: boolean;
+    /** Disabled status */
+    disabled?: boolean;
+    /** Sets the icon for the component */
+    icon?: React.ReactElement<IconProps>;
+    /** The value of the current option */
+    eventKey?: T;
+    /** Providing a `href` will render an `<a>` element */
+    href?: string;
+    /** Select the callback function that the event triggers. */
+    onSelect?: (eventKey: T, event: React.SyntheticEvent) => void;
+}
+declare const NavbarItem: RsRefForwardingComponent<'a', NavItemProps>;
+export default NavbarItem;

package/cjs/Navbar/NavbarItem.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _isNil = _interopRequireDefault(require("lodash/isNil"));
+
+var _Ripple = _interopRequireDefault(require("../Ripple"));
+
+var _SafeAnchor = _interopRequireDefault(require("../SafeAnchor"));
+
+var _utils = require("../utils");
+
+var _NavContext = _interopRequireDefault(require("../Nav/NavContext"));
+
+var NavbarItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _props$as = props.as,
+      Component = _props$as === void 0 ? _SafeAnchor.default : _props$as,
+      activeProp = props.active,
+      disabled = props.disabled,
+      eventKey = props.eventKey,
+      className = props.className,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'navbar-item' : _props$classPrefix,
+      style = props.style,
+      children = props.children,
+      icon = props.icon,
+      onClick = props.onClick,
+      onSelectProp = props.onSelect,
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "active", "disabled", "eventKey", "className", "classPrefix", "style", "children", "icon", "onClick", "onSelect"]);
+
+  var _useContext = (0, _react.useContext)(_NavContext.default),
+      activeKey = _useContext.activeKey,
+      onSelectFromNav = _useContext.onSelect;
+
+  var active = activeProp !== null && activeProp !== void 0 ? activeProp : !(0, _isNil.default)(eventKey) && (0, _utils.shallowEqual)(eventKey, activeKey);
+  var emitSelect = (0, _react.useCallback)(function (event) {
+    onSelectProp === null || onSelectProp === void 0 ? void 0 : onSelectProp(eventKey, event);
+    onSelectFromNav === null || onSelectFromNav === void 0 ? void 0 : onSelectFromNav(eventKey, event);
+  }, [eventKey, onSelectProp, onSelectFromNav]);
+
+  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+      withClassPrefix = _useClassNames.withClassPrefix,
+      merge = _useClassNames.merge;
+
+  var classes = merge(className, withClassPrefix({
+    active: active,
+    disabled: disabled
+  }));
+  var handleClick = (0, _react.useCallback)(function (event) {
+    if (!disabled) {
+      emitSelect(event);
+      onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    }
+  }, [disabled, emitSelect, onClick]);
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    ref: ref,
+    "aria-selected": active || undefined
+  }, rest, {
+    className: classes,
+    onClick: handleClick,
+    style: style
+  }), icon, children, /*#__PURE__*/_react.default.createElement(_Ripple.default, null));
+});
+
+NavbarItem.displayName = 'Navbar.Item';
+NavbarItem.propTypes = {
+  as: _propTypes.default.elementType,
+  active: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  className: _propTypes.default.string,
+  classPrefix: _propTypes.default.string,
+  onClick: _propTypes.default.func,
+  style: _propTypes.default.object,
+  icon: _propTypes.default.node,
+  onSelect: _propTypes.default.func,
+  children: _propTypes.default.node,
+  eventKey: _propTypes.default.any
+};
+var _default = NavbarItem;
+exports.default = _default;

package/cjs/Pagination/Pagination.js

@@ -45,7 +45,7 @@ var defaultProps = {
   classPrefix: 'pagination',
   activePage: 1,
   pages: 1,
-  size: 'md'
+  size: 'xs'
 };
 
 var Pagination = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {

package/cjs/Picker/PickerToggle.js

@@ -186,10 +186,10 @@ var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
         ref: (0, _utils.mergeRefs)(inputRef, ref)
       }, props));
     }
-  }), /*#__PURE__*/_react.default.createElement("span", {
+  }), children ? /*#__PURE__*/_react.default.createElement("span", {
     className: prefix(hasValue ? 'value' : 'placeholder'),
     "aria-placeholder": typeof children === 'string' ? children : null
-  }, children), cleanable && /*#__PURE__*/_react.default.createElement(_CloseButton.default, {
+  }, children) : null, cleanable && /*#__PURE__*/_react.default.createElement(_CloseButton.default, {
     className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["clean"]))),
     tabIndex: -1,
     onClick: handleClean

package/cjs/Picker/utils.d.ts

@@ -123,5 +123,5 @@ interface Refs {
  * @param ref
  * @param params
  */
-export declare function usePublicMethods(ref: any, { triggerRef, overlayRef, targetRef, rootRef }: Refs): void;
+export declare function usePublicMethods(ref: any, { triggerRef, overlayRef, targetRef, rootRef }: Refs, disabled?: boolean): void;
 export {};

package/cjs/Picker/utils.js

@@ -493,7 +493,7 @@ function useSearch(props) {
  * @param ref
  * @param params
  */
-function usePublicMethods(ref, _ref) {
+function usePublicMethods(ref, _ref, disabled) {
   var triggerRef = _ref.triggerRef,
       overlayRef = _ref.overlayRef,
       targetRef = _ref.targetRef,
@@ -513,25 +513,29 @@ function usePublicMethods(ref, _ref) {
 
     (_triggerRef$current5 = triggerRef.current) === null || _triggerRef$current5 === void 0 ? void 0 : _triggerRef$current5.updatePosition();
   }, [triggerRef]);
-  (0, _react.useImperativeHandle)(ref, function () {
-    return {
-      get root() {
-        var _triggerRef$current6;
-
-        return rootRef !== null && rootRef !== void 0 && rootRef.current ? rootRef === null || rootRef === void 0 ? void 0 : rootRef.current : (_triggerRef$current6 = triggerRef.current) === null || _triggerRef$current6 === void 0 ? void 0 : _triggerRef$current6.root;
-      },
-
-      get overlay() {
-        return overlayRef.current;
-      },
-
-      get target() {
-        return targetRef === null || targetRef === void 0 ? void 0 : targetRef.current;
-      },
-
-      updatePosition: handleUpdatePosition,
-      open: handleOpen,
-      close: handleClose
-    };
-  });
+
+  if (!disabled) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    (0, _react.useImperativeHandle)(ref, function () {
+      return {
+        get root() {
+          var _triggerRef$current6;
+
+          return rootRef !== null && rootRef !== void 0 && rootRef.current ? rootRef === null || rootRef === void 0 ? void 0 : rootRef.current : (_triggerRef$current6 = triggerRef.current) === null || _triggerRef$current6 === void 0 ? void 0 : _triggerRef$current6.root;
+        },
+
+        get overlay() {
+          return overlayRef.current;
+        },
+
+        get target() {
+          return targetRef === null || targetRef === void 0 ? void 0 : targetRef.current;
+        },
+
+        updatePosition: handleUpdatePosition,
+        open: handleOpen,
+        close: handleClose
+      };
+    });
+  }
 }

package/cjs/Progress/ProgressCircle.js

@@ -49,35 +49,35 @@ var ProgressCircle = /*#__PURE__*/_react.default.forwardRef(function (props, ref
       rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "strokeWidth", "trailWidth", "percent", "strokeLinecap", "className", "showInfo", "status", "classPrefix", "style", "gapDegree", "gapPosition", "trailColor", "strokeColor"]);
   var getPathStyles = (0, _react.useCallback)(function () {
     var radius = 50 - strokeWidth / 2;
-    var beginPositionX = 0;
-    var beginPositionY = -radius;
-    var endPositionX = 0;
-    var endPositionY = -2 * radius;
+    var x1 = 0;
+    var y1 = -radius;
+    var x2 = 0;
+    var y2 = -2 * radius;
 
     switch (gapPosition) {
       case 'left':
-        beginPositionX = -radius;
-        beginPositionY = 0;
-        endPositionX = 2 * radius;
-        endPositionY = 0;
+        x1 = -radius;
+        y1 = 0;
+        x2 = 2 * radius;
+        y2 = 0;
         break;
 
       case 'right':
-        beginPositionX = radius;
-        beginPositionY = 0;
-        endPositionX = -2 * radius;
-        endPositionY = 0;
+        x1 = radius;
+        y1 = 0;
+        x2 = -2 * radius;
+        y2 = 0;
         break;
 
       case 'bottom':
-        beginPositionY = radius;
-        endPositionY = 2 * radius;
+        y1 = radius;
+        y2 = 2 * radius;
         break;
 
       default:
     }
 
-    var pathString = "M 50,50 m " + beginPositionX + "," + beginPositionY + "\n       a " + radius + "," + radius + " 0 1 1 " + endPositionX + "," + -endPositionY + "\n       a " + radius + "," + radius + " 0 1 1 " + -endPositionX + "," + endPositionY;
+    var pathString = "M 50,50 m " + x1 + "," + y1 + " a " + radius + "," + radius + " 0 1 1 " + x2 + "," + -y2 + " a " + radius + "," + radius + " 0 1 1 " + -x2 + "," + y2;
     var len = Math.PI * 2 * radius;
     var trailPathStyle = {
       stroke: trailColor,

package/cjs/SelectPicker/SelectPicker.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { PickerLocale } from '../locales';
 import { PickerComponent } from '../Picker';
-import { TypeAttributes, FormControlPickerProps, ItemDataType } from '../@types/common';
+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> {
@@ -16,8 +16,6 @@ export interface SelectProps<T = ValueType> {
      * https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md#prop-types
      */
     listProps?: ListProps;
-    /** A picker can have different sizes */
-    size?: TypeAttributes.Size;
     /** Custom search rules. */
     searchBy?: (keyword: string, label: React.ReactNode, item: ItemDataType) => boolean;
     /** Sort options */

package/cjs/Sidenav/SidenavDropdown.js

@@ -33,6 +33,8 @@ var _SidenavDropdownCollapse = _interopRequireDefault(require("./SidenavDropdown
 
 var _Disclosure = _interopRequireDefault(require("../Disclosure/Disclosure"));
 
+var _DropdownContext = _interopRequireDefault(require("../Dropdown/DropdownContext"));
+
 var defaultProps = {
   as: 'div',
   classPrefix: 'dropdown',
@@ -66,6 +68,9 @@ var SidenavDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, re
       openKeys = _useContext$openKeys === void 0 ? [] : _useContext$openKeys,
       onOpenChange = _useContext.onOpenChange;
 
+  var _useContext2 = (0, _react.useContext)(_DropdownContext.default),
+      hasSelectedItem = _useContext2.hasSelectedItem;
+
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       merge = _useClassNames.merge,
       withClassPrefix = _useClassNames.withClassPrefix;
@@ -88,7 +93,7 @@ var SidenavDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, re
     var _withClassPrefix;
 
     var open = _ref.open;
-    var classes = merge(className, withClassPrefix((_withClassPrefix = {}, _withClassPrefix["placement-" + (0, _kebabCase.default)((0, _utils.placementPolyfill)(placement))] = placement, _withClassPrefix[open ? 'expand' : 'collapse'] = true, _withClassPrefix.disabled = disabled, _withClassPrefix['no-caret'] = noCaret, _withClassPrefix)));
+    var classes = merge(className, withClassPrefix((_withClassPrefix = {}, _withClassPrefix["placement-" + (0, _kebabCase.default)((0, _utils.placementPolyfill)(placement))] = placement, _withClassPrefix[open ? 'expand' : 'collapse'] = true, _withClassPrefix.disabled = disabled, _withClassPrefix['selected-within'] = hasSelectedItem, _withClassPrefix['no-caret'] = noCaret, _withClassPrefix)));
     return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
       ref: (0, _utils.mergeRefs)(ref, containerRef),
       style: style,

package/cjs/Sidenav/SidenavItem.js

@@ -25,17 +25,21 @@ var _SafeAnchor = _interopRequireDefault(require("../SafeAnchor"));
 
 var _NavContext = _interopRequireDefault(require("../Nav/NavContext"));
 
-var defaultProps = {
-  as: 'div',
-  classPrefix: 'dropdown'
-};
+var _MenuItem = _interopRequireDefault(require("../Menu/MenuItem"));
+
+var _omit = _interopRequireDefault(require("lodash/omit"));
+
+var _Sidenav = require("./Sidenav");
 
 var SidenavItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var activeProp = props.active,
-      children = props.children,
+  var _props$as = props.as,
+      Component = _props$as === void 0 ? _SafeAnchor.default : _props$as,
+      activeProp = props.active,
+      _children = props.children,
       className = props.className,
       disabled = props.disabled,
-      classPrefix = props.classPrefix,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'sidenav-item' : _props$classPrefix,
       icon = props.icon,
       eventKey = props.eventKey,
       style = props.style,
@@ -43,7 +47,8 @@ var SidenavItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onSelect = props.onSelect,
       divider = props.divider,
       panel = props.panel,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["active", "children", "className", "disabled", "classPrefix", "icon", "eventKey", "style", "onClick", "onSelect", "divider", "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);
 
   var _useContext = (0, _react.useContext)(_NavContext.default),
       activeKey = _useContext.activeKey,
@@ -62,6 +67,36 @@ var SidenavItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onClick === null || onClick === void 0 ? void 0 : onClick(event);
   }, [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'
+      });
+    });
+  }
+
   if (divider) {
     return /*#__PURE__*/_react.default.createElement("li", (0, _extends2.default)({
       ref: ref,
@@ -77,10 +112,10 @@ 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(_SafeAnchor.default, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     ref: ref,
     className: merge(className, withClassPrefix({
       active: selected,
@@ -90,11 +125,10 @@ 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, _children, /*#__PURE__*/_react.default.createElement(_Ripple.default, null));
 });
 
 SidenavItem.displayName = 'Sidenav.Item';
-SidenavItem.defaultProps = defaultProps;
 SidenavItem.propTypes = {
   classPrefix: _propTypes.default.string,
   disabled: _propTypes.default.bool,

package/cjs/Slider/Slider.js

@@ -229,7 +229,8 @@ var Slider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
   if (plaintext) {
     return /*#__PURE__*/_react.default.createElement(_Plaintext.default, {
-      localeKey: "notSelected"
+      localeKey: "notSelected",
+      ref: ref
     }, value);
   }
 

package/cjs/TagInput/index.d.ts

@@ -0,0 +1,13 @@
+import { InputPickerProps, TriggerType } from '../InputPicker/InputPicker';
+import type { PickerComponent } from '../Picker/types';
+import type { TagProps } from '../Tag';
+export interface TagInputProps extends InputPickerProps {
+    /**  Tag related props. */
+    tagProps?: TagProps;
+    /**
+     * Set the trigger for creating tags. only valid when creatable
+     */
+    trigger: TriggerType | TriggerType[];
+}
+declare const TagInput: PickerComponent<TagInputProps>;
+export default TagInput;

package/cjs/TagInput/index.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _InputPicker = _interopRequireWildcard(require("../InputPicker/InputPicker"));
+
+var TagInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var tagProps = props.tagProps,
+      trigger = props.trigger,
+      value = props.value,
+      defaultValue = props.defaultValue,
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["tagProps", "trigger", "value", "defaultValue"]);
+  var contextValue = (0, _react.useMemo)(function () {
+    return {
+      multi: true,
+      disabledOptions: true,
+      trigger: trigger,
+      tagProps: tagProps
+    };
+  }, [tagProps, trigger]);
+  var data = (0, _react.useMemo)(function () {
+    return (value || defaultValue || []).map(function (v) {
+      return {
+        value: v,
+        label: v
+      };
+    });
+  }, [defaultValue, value]);
+  return /*#__PURE__*/_react.default.createElement(_InputPicker.InputPickerContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/_react.default.createElement(_InputPicker.default, (0, _extends2.default)({}, rest, {
+    value: value,
+    defaultValue: defaultValue,
+    data: data,
+    placement: null,
+    creatable: true,
+    ref: ref
+  })));
+});
+
+TagInput.defaultProps = {
+  trigger: 'Enter',
+  tagProps: {}
+};
+TagInput.displayName = 'TagInput';
+var _default = TagInput;
+exports.default = _default;

package/cjs/TagPicker/index.d.ts

@@ -1,5 +1,13 @@
-import { InputPickerProps } from '../InputPicker/InputPicker';
+import { InputPickerProps, TriggerType } from '../InputPicker/InputPicker';
 import type { PickerComponent } from '../Picker/types';
-export declare type TagPickerProps = InputPickerProps;
+import type { TagProps } from '../Tag';
+export interface TagPickerProps extends InputPickerProps {
+    /**  Tag related props. */
+    tagProps?: TagProps;
+    /**
+     * Set the trigger for creating tags. only valid when creatable
+     */
+    trigger: TriggerType | TriggerType[];
+}
 declare const TagPicker: PickerComponent<TagPickerProps>;
 export default TagPicker;