rsuite 5.24.1 → 5.26.0

package/Breadcrumb/styles/index.less

@@ -16,6 +16,10 @@
     &:focus {
       .tab-focus();
     }
+
+    &-active {
+      color: var(--rs-breadcrumb-item-active-text);
+    }
   }
 
   // Separator has gap with text

package/Button/styles/index.less

@@ -135,6 +135,7 @@
     color: var(--rs-btn-ghost-hover-text);
     background-color: transparent;
     border-color: var(--rs-btn-ghost-hover-border);
+    box-shadow: 0 0 0 1px var(--rs-btn-ghost-hover-border);
   });
 
   .button-pressed({
@@ -147,12 +148,15 @@
     color: var(--rs-btn-ghost-text);
     background-color: transparent;
     opacity: 0.3;
+    border-color: var(--rs-btn-ghost-border);
+    box-shadow:none;
   });
 }
 
 // Spectrum buttons
 each(@spectrum, .(@color) {
   @C200: var(~'--rs-@{color}-200');
+  @C300: var(~'--rs-@{color}-300');
   @C400: var(~'--rs-@{color}-400');
   @C500: var(~'--rs-@{color}-500');
   @C600: var(~'--rs-@{color}-600');
@@ -162,15 +166,15 @@ each(@spectrum, .(@color) {
 
   .rs-btn-@{color} {
     --rs-btn-primary-bg: @C500;
-    --rs-btn-primary-hover-bg: @C600;
-    --rs-btn-primary-active-bg: @C700;
+    --rs-btn-primary-hover-bg: @C700;
+    --rs-btn-primary-active-bg: @C800;
     --rs-btn-subtle-hover-bg: @C500;
-    --rs-btn-subtle-hover-text: #fff;
+    --rs-btn-subtle-hover-text: @B200;
     --rs-btn-subtle-active-bg: @C600;
-    --rs-btn-subtle-active-text: #fff;
+    --rs-btn-subtle-active-text: @B800;
     --rs-btn-ghost-border: @C700;
     --rs-btn-ghost-text: @C700;
-    --rs-btn-ghost-hover-border: @C800;
+    --rs-btn-ghost-hover-border: @C900;
     --rs-btn-ghost-hover-text: @C800;
     --rs-btn-ghost-active-border: @C900;
     --rs-btn-ghost-active-text: @C900;
@@ -178,12 +182,12 @@ each(@spectrum, .(@color) {
     --rs-btn-link-hover-text: @C800;
     --rs-btn-link-active-text: @C900;
     --rs-iconbtn-primary-addon: @C600;
-    --rs-iconbtn-primary-activated-addon: @C700;
-    --rs-iconbtn-primary-pressed-addon: @C800;
+    --rs-iconbtn-primary-activated-addon: @C800;
+    --rs-iconbtn-primary-pressed-addon: @C900;
 
     .dark-mode({
       --rs-btn-primary-bg: @C700;
-      --rs-btn-primary-hover-bg: @C600;
+      --rs-btn-primary-hover-bg: @C500;
       --rs-btn-primary-active-bg: @C400;
       --rs-btn-subtle-hover-bg: @C600;
       --rs-btn-subtle-hover-text: #fff;
@@ -199,8 +203,8 @@ each(@spectrum, .(@color) {
       --rs-btn-link-hover-text: @C400;
       --rs-btn-link-active-text: @C200;
       --rs-iconbtn-primary-addon: @C600;
-      --rs-iconbtn-primary-activated-addon: @C500;
-      --rs-iconbtn-primary-pressed-addon: @C400;
+      --rs-iconbtn-primary-activated-addon: @C400;
+      --rs-iconbtn-primary-pressed-addon: @C300;
     });
 
     .high-contrast-mode({

package/CHANGELOG.md

@@ -1,3 +1,33 @@
+# [5.26.0](https://github.com/rsuite/rsuite/compare/v5.25.0...v5.26.0) (2023-02-03)
+
+### Bug Fixes
+
+- **DatePicker:** fix uncontrolled default date on calendar ([#3045](https://github.com/rsuite/rsuite/issues/3045)) ([c530b25](https://github.com/rsuite/rsuite/commit/c530b2550c62a8343eb759b60942858a0921c2a2))
+- **Form.Control:** fix `acceptor` prop can not accept `Toggle` ([#3048](https://github.com/rsuite/rsuite/issues/3048)) ([43a413a](https://github.com/rsuite/rsuite/commit/43a413a0b96b3adb88deea54e41b56c582d4e3b6))
+- **Nav.Menu:** open with hover trigger in Navbar ([#3041](https://github.com/rsuite/rsuite/issues/3041)) ([ddbc325](https://github.com/rsuite/rsuite/commit/ddbc3253d5e714d03c5a43daa7bd2c52adec5638))
+
+### Features
+
+- **i18n:** added Dutch locale (nl_NL) ([#3035](https://github.com/rsuite/rsuite/issues/3035)) ([47342c9](https://github.com/rsuite/rsuite/commit/47342c9373c02ce9393fd03693d9e45cc601a186))
+
+# [5.25.0](https://github.com/rsuite/rsuite/compare/v5.24.1...v5.25.0) (2023-01-20)
+
+### Bug Fixes
+
+- **Breadcrumb:** improve font color for active item ([#3028](https://github.com/rsuite/rsuite/issues/3028)) ([1efcbf9](https://github.com/rsuite/rsuite/commit/1efcbf90a345ee93928ca13c181c103d247e869d))
+- **Breadcrumb:** rendered breadcrumbs as span when href is not specified ([#3027](https://github.com/rsuite/rsuite/issues/3027)) ([8ad16e4](https://github.com/rsuite/rsuite/commit/8ad16e4d572b55892a50c0cad747554039b43398))
+- **Button:** fix disabled icon button bug in dark mode ([#3020](https://github.com/rsuite/rsuite/issues/3020)) ([8975eff](https://github.com/rsuite/rsuite/commit/8975eff6b6e9a4ec9c2ed4c58cfbdf4f23e5d94a))
+- **DatePicker:** fix first click not working on month selection ([#3019](https://github.com/rsuite/rsuite/issues/3019)) ([42eeaa3](https://github.com/rsuite/rsuite/commit/42eeaa3cc5e19442157f771f02dab850f257c2dc))
+- **Whisper:** add type checking for child components ([#3012](https://github.com/rsuite/rsuite/issues/3012)) ([c189119](https://github.com/rsuite/rsuite/commit/c18911903141423d79eb79d5313bc47dd974705e))
+
+### Features
+
+- **CustomProvider:** add support for disableRipple on `<CustomProvider>` ([#3030](https://github.com/rsuite/rsuite/issues/3030)) ([c6bb7ad](https://github.com/rsuite/rsuite/commit/c6bb7ade76ea843b43e799c5cb797b6b5e69d98f))
+
+### Performance Improvements
+
+- **Button:** improved button color when hovered and activated ([#3022](https://github.com/rsuite/rsuite/issues/3022)) ([7973696](https://github.com/rsuite/rsuite/commit/7973696c2854d7199fc27d040dffe45dc356dc9a))
+
 ## [5.24.1](https://github.com/rsuite/rsuite/compare/v5.24.0...v5.24.1) (2023-01-12)
 
 ### Bug Fixes

package/Picker/styles/index.less

@@ -233,14 +233,6 @@
 
   .rs-picker-cleanable.rs-picker-has-value & {
     padding-right: (@dropdown-toggle-padding-right + @picker-toggle-clean-width);
-
-    .rs-@{date-picker-prefix}&,
-    .rs-@{date-range-picker-prefix}& {
-      padding-right: (
-        @dropdown-toggle-padding-right + @picker-toggle-clean-width +
-          @picker-item-content-padding-vertical
-      );
-    }
   }
 }
 
@@ -261,6 +253,11 @@
     color: var(--rs-state-error);
   }
 
+  &:hover svg path {
+    stroke: var(--rs-state-error);
+    stroke-width: 1;
+  }
+
   .rs-@{date-picker-prefix} &,
   .rs-@{date-range-picker-prefix} & {
     right: (@picker-toggle-clean-right + @picker-item-content-padding-vertical);

package/Picker/styles/mixin.less

@@ -99,28 +99,18 @@
   }
 
   .rs-picker-has-value.rs-picker-cleanable & {
-    padding-right: (
-      @padding-horizontal + @dropdown-caret-width + @dropdown-caret-padding + @clean-btn-width +
-        @clean-btn-margin
-    );
+    padding-right: (@padding-horizontal + @dropdown-caret-width + @dropdown-caret-padding);
   }
 
   .rs-picker-toggle-caret,
   .rs-picker-toggle-clean {
     top: @padding-vertical;
+    right: @padding-horizontal;
 
     .rs-picker-default & {
       top: @padding-vertical - @picker-default-toggle-border-width;
     }
   }
-
-  .rs-picker-toggle-caret {
-    right: @padding-horizontal;
-  }
-
-  .rs-picker-toggle-clean {
-    right: (@dropdown-caret-width + @padding-horizontal + @clean-btn-width - @clean-btn-margin);
-  }
 }
 
 .picker-button-caret-lg() {
@@ -156,19 +146,12 @@
   .rs-picker-toggle-clean,
   .rs-picker-toggle-caret {
     top: @top;
+    right: @padding-horizontal;
 
     .rs-picker-subtle & {
       top: @top - @picker-default-toggle-border-width;
     }
   }
-
-  .rs-picker-toggle-caret {
-    right: @padding-horizontal;
-  }
-
-  .rs-picker-toggle-clean {
-    right: (@padding-horizontal + @toggle-clean-padding + @calendar-caret-width);
-  }
 }
 
 .date-picker-button-caret-lg() {

package/cjs/@types/global.d.ts

@@ -1 +1,7 @@
 declare const __DEV__: boolean;
+
+declare namespace Chai {
+  interface Assertion {
+    toHaveError(expectedMessage?: string): Assertion;
+  }
+}

package/cjs/Breadcrumb/BreadcrumbItem.js

@@ -19,7 +19,7 @@ var _utils = require("../utils");
 
 var BreadcrumbItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
-      Component = _props$as === void 0 ? _SafeAnchor.default : _props$as,
+      Component = _props$as === void 0 ? props.href ? _SafeAnchor.default : 'span' : _props$as,
       href = props.href,
       _props$classPrefix = props.classPrefix,
       classPrefix = _props$classPrefix === void 0 ? 'breadcrumb-item' : _props$classPrefix,

package/cjs/Calendar/MonthDropdown.js

@@ -78,8 +78,7 @@ var MonthDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
 
     return false;
   }, [disabledMonth]);
-
-  var rowRenderer = function rowRenderer(_ref) {
+  var rowRenderer = (0, _react.useCallback)(function (_ref) {
     var index = _ref.index,
         style = _ref.style;
 
@@ -115,8 +114,7 @@ var MonthDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
         year: year
       });
     })));
-  };
-
+  }, [date, isMonthDisabled, merge, prefix, rowCount, startYear]);
   var classes = merge(className, withClassPrefix(), {
     show: show
   });

package/cjs/Calendar/useCalendarDate.d.ts

@@ -1,6 +1,6 @@
 declare const useCalendarDate: (value: Date | null | undefined, defaultDate: Date | undefined) => {
     calendarDate: Date;
     setCalendarDate: (date: Date | undefined) => void;
-    resetCalendarDate: () => void;
+    resetCalendarDate: (nextValue?: any) => void;
 };
 export default useCalendarDate;

package/cjs/Calendar/useCalendarDate.js

@@ -21,19 +21,25 @@ var useCalendarDate = function useCalendarDate(value, defaultDate) {
       setValue(date);
     }
   }, [calendarDate]);
-  var resetCalendarDate = (0, _react.useCallback)(function () {
-    var _ref2;
+  var resetCalendarDate = (0, _react.useCallback)(function (nextValue) {
+    var _ref2, _nextValue;
 
-    setValue((_ref2 = value !== null && value !== void 0 ? value : defaultDate) !== null && _ref2 !== void 0 ? _ref2 : new Date());
+    if (nextValue === void 0) {
+      nextValue = value;
+    }
+
+    setValue((_ref2 = (_nextValue = nextValue) !== null && _nextValue !== void 0 ? _nextValue : defaultDate) !== null && _ref2 !== void 0 ? _ref2 : new Date());
   }, [defaultDate, value]);
   (0, _utils.useUpdateEffect)(function () {
     var _valueRef$current;
 
     if ((value === null || value === void 0 ? void 0 : value.valueOf()) !== ((_valueRef$current = valueRef.current) === null || _valueRef$current === void 0 ? void 0 : _valueRef$current.valueOf())) {
-      setCalendarDate(value !== null && value !== void 0 ? value : new Date());
+      var _ref3;
+
+      setCalendarDate((_ref3 = value !== null && value !== void 0 ? value : defaultDate) !== null && _ref3 !== void 0 ? _ref3 : new Date());
       valueRef.current = value;
     }
-  }, [value]);
+  }, [value, defaultDate]);
   return {
     calendarDate: calendarDate,
     setCalendarDate: setCalendarDate,

package/cjs/CustomProvider/CustomProvider.d.ts

@@ -38,6 +38,8 @@ export interface CustomValue<T = Locale> {
      * A Map of toast containers
      */
     toasters?: React.MutableRefObject<Map<string, ToastContainerInstance>>;
+    /** If true, the ripple effect is disabled. Affected components include: Button, Nav.Item, Pagination. */
+    disableRipple?: boolean;
 }
 export interface CustomProviderProps<T = Locale> extends Partial<CustomValue<T>> {
     /** Supported themes */

package/cjs/CustomProvider/CustomProvider.js

@@ -32,7 +32,8 @@ var CustomProvider = function CustomProvider(props) {
       classPrefix = _props$classPrefix === void 0 ? (0, _prefix.getClassNamePrefix)() : _props$classPrefix,
       theme = props.theme,
       container = props.toastContainer,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["children", "classPrefix", "theme", "toastContainer"]);
+      disableRipple = props.disableRipple,
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["children", "classPrefix", "theme", "toastContainer", "disableRipple"]);
 
   var toasters = _react.default.useRef(new Map());
 
@@ -46,9 +47,10 @@ var CustomProvider = function CustomProvider(props) {
     return (0, _extends2.default)({
       classPrefix: classPrefix,
       theme: theme,
-      toasters: toasters
+      toasters: toasters,
+      disableRipple: disableRipple
     }, rest);
-  }, [classPrefix, theme, rest]);
+  }, [classPrefix, theme, disableRipple, rest]);
 
   (0, _react.useEffect)(function () {
     if (_DOMHelper.canUseDOM && theme) {

package/cjs/DatePicker/DatePicker.js

@@ -222,7 +222,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
   var handleClean = (0, _react.useCallback)(function (event) {
     updateValue(event, null);
-    resetCalendarDate();
+    resetCalendarDate(null);
   }, [resetCalendarDate, updateValue]);
   /**
    * Handle keyboard events.

package/cjs/FormControl/FormControl.js

@@ -31,9 +31,13 @@ var _FormGroup = require("../FormGroup/FormGroup");
 
 var _useRegisterModel = _interopRequireDefault(require("./useRegisterModel"));
 
+var _Toggle = _interopRequireDefault(require("../Toggle"));
+
 var _templateObject;
 
 var FormControl = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _accepterProps;
+
   var _useContext = (0, _react.useContext)(_FormContext.default),
       readOnlyContext = _useContext.readOnly,
       plaintextContext = _useContext.plaintext,
@@ -157,6 +161,15 @@ var FormControl = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var ariaDescribedby = controlId ? controlId + "-help-text" : null;
   var fieldHasError = Boolean(messageNode);
   var ariaErrormessage = fieldHasError && controlId ? controlId + "-error-message" : undefined;
+  var valueKey = 'value';
+  var defaultValueKey = 'defaultValue'; // Toggle component is a special case that uses `checked` and `defaultChecked` instead of `value` and `defaultValue` props.
+
+  if (AccepterComponent === _Toggle.default) {
+    valueKey = 'checked';
+    defaultValueKey = 'defaultChecked';
+  }
+
+  var accepterProps = (_accepterProps = {}, _accepterProps[valueKey] = val, _accepterProps[defaultValueKey] = defaultValue !== null && defaultValue !== void 0 ? defaultValue : formDefaultValue[name], _accepterProps);
   return /*#__PURE__*/_react.default.createElement(Component, {
     className: classes,
     ref: ref
@@ -166,15 +179,13 @@ var FormControl = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     "aria-describedby": ariaDescribedby,
     "aria-invalid": fieldHasError || undefined,
     "aria-errormessage": ariaErrormessage
-  }, rest, {
+  }, rest, accepterProps, {
     readOnly: readOnly,
     plaintext: plaintext,
     disabled: disabled,
     name: name,
     onChange: handleFieldChange,
-    onBlur: handleFieldBlur,
-    defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : formDefaultValue[name],
-    value: val
+    onBlur: handleFieldBlur
   })), /*#__PURE__*/_react.default.createElement(_FormErrorMessage.default, {
     id: controlId + "-error-message",
     role: "alert",

package/cjs/InputPicker/InputPicker.js

@@ -470,9 +470,15 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     setValue(null);
     setFocusItemValue(null);
     setSearchKeyword('');
-    handleChange(null, event);
+
+    if (multi) {
+      handleChange([], event);
+    } else {
+      handleChange(null, event);
+    }
+
     onClean === null || onClean === void 0 ? void 0 : onClean(event);
-  }, [disabled, searchKeyword, onClean, handleChange, setValue, setFocusItemValue, setSearchKeyword]);
+  }, [disabled, searchKeyword, setValue, setFocusItemValue, setSearchKeyword, multi, onClean, handleChange]);
   var events = {
     onMenuPressBackspace: multi ? removeLastItem : handleClean,
     onMenuKeyDown: onKeyDown,

package/cjs/Navbar/NavbarDropdown.js

@@ -15,6 +15,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _castArray = _interopRequireDefault(require("lodash/castArray"));
+
 var _omit = _interopRequireDefault(require("lodash/omit"));
 
 var _utils = require("../utils");
@@ -73,7 +75,7 @@ var NavbarDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref
       mergeMenuClassName = _useClassNames2.merge;
 
   return /*#__PURE__*/_react.default.createElement(_Disclosure.default, {
-    trigger: trigger,
+    trigger: (0, _castArray.default)(trigger),
     hideOnClickOutside: true,
     onToggle: function onToggle(open) {
       _onToggle === null || _onToggle === void 0 ? void 0 : _onToggle(open);
@@ -87,13 +89,14 @@ var NavbarDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref
   }, function (_ref, containerRef) {
     var _withClassPrefix;
 
-    var open = _ref.open;
+    var open = _ref.open,
+        props = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["open"]);
     var classes = merge(className, withClassPrefix((_withClassPrefix = {}, _withClassPrefix["placement-" + (0, _kebabCase.default)((0, _utils.placementPolyfill)(placement))] = !!placement, _withClassPrefix.disabled = disabled, _withClassPrefix.open = open, _withClassPrefix)));
-    return /*#__PURE__*/_react.default.createElement(Component, {
+    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
       ref: (0, _utils.mergeRefs)(ref, containerRef),
       className: classes,
       style: style
-    }, /*#__PURE__*/_react.default.createElement(_Disclosure.default.Button, null, function (buttonProps, buttonRef) {
+    }, props), /*#__PURE__*/_react.default.createElement(_Disclosure.default.Button, null, function (buttonProps, buttonRef) {
       return /*#__PURE__*/_react.default.createElement(_NavbarDropdownToggle.default, (0, _extends2.default)({
         ref: buttonRef,
         as: toggleAs,

package/cjs/Overlay/OverlayTrigger.js

@@ -393,6 +393,10 @@ var OverlayTrigger = /*#__PURE__*/_react.default.forwardRef(function (props, ref
     } : speaker);
   };
 
+  if (typeof children === 'object' && children.type === _react.default.Fragment || typeof children === 'string') {
+    console.error('[rsuite] The OverlayTrigger component does not accept strings or Fragments as child.');
+  }
+
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, typeof children === 'function' ? children(triggerEvents, triggerRef) : /*#__PURE__*/_react.default.cloneElement(children, (0, _extends2.default)({
     ref: triggerRef,
     'aria-describedby': controlId

package/cjs/Picker/PickerToggle.js

@@ -247,7 +247,7 @@ var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       closeLabel: 'Clear'
     },
     onClick: handleClean
-  }), caret && /*#__PURE__*/_react.default.createElement(Caret, {
+  }), caret && !showCleanButton && /*#__PURE__*/_react.default.createElement(Caret, {
     className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["caret"])))
   })));
 });

package/cjs/Picker/PickerToggleTrigger.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
@@ -11,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _pick = _interopRequireDefault(require("lodash/pick"));
 
@@ -19,8 +17,6 @@ var _OverlayTrigger = _interopRequireDefault(require("../Overlay/OverlayTrigger"
 
 var _utils = require("../utils");
 
-var _CustomProvider = require("../CustomProvider");
-
 var omitTriggerPropKeys = ['onEntered', 'onExited', 'onEnter', 'onEntering', 'onExit', 'onExiting', 'open', 'defaultOpen', 'onHide', 'container', 'containerPadding', 'preventOverflow'];
 exports.omitTriggerPropKeys = omitTriggerPropKeys;
 var pickTriggerPropKeys = [].concat(omitTriggerPropKeys, ['disabled', 'plaintext', 'readOnly', 'loading']);
@@ -34,12 +30,15 @@ var PickerToggleTrigger = /*#__PURE__*/_react.default.forwardRef(function (props
       trigger = _props$trigger === void 0 ? 'click' : _props$trigger,
       rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["pickerProps", "speaker", "placement", "trigger"]);
   var pickerTriggerProps = (0, _pick.default)(pickerProps, pickTriggerPropKeys);
-  var context = (0, _react.useContext)(_CustomProvider.CustomContext);
+
+  var _useCustom = (0, _utils.useCustom)(),
+      rtl = _useCustom.rtl;
+
   return /*#__PURE__*/_react.default.createElement(_OverlayTrigger.default, (0, _extends2.default)({}, rest, pickerTriggerProps, {
     disabled: pickerTriggerProps.disabled || pickerTriggerProps.loading,
     ref: ref,
     trigger: trigger,
-    placement: (0, _utils.placementPolyfill)(placement, context === null || context === void 0 ? void 0 : context.rtl),
+    placement: (0, _utils.placementPolyfill)(placement, rtl),
     speaker: speaker
   }));
 });

package/cjs/Ripple/Ripple.js

@@ -39,6 +39,9 @@ var getPosition = function getPosition(target, event) {
 };
 
 var Ripple = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _useCustom = (0, _utils.useCustom)(),
+      disableRipple = _useCustom.disableRipple;
+
   var _props$as = props.as,
       Component = _props$as === void 0 ? 'span' : _props$as,
       className = props.className,
@@ -88,6 +91,11 @@ var Ripple = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       };
     }
   }, [handleMouseDown]);
+
+  if (disableRipple) {
+    return null;
+  }
+
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     className: classes,
     ref: (0, _utils.mergeRefs)(triggerRef, ref)

package/cjs/TagInput/index.d.ts

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

package/cjs/locales/index.d.ts

@@ -10,6 +10,7 @@ export { default as fiFI } from './fi_FI';
 export { default as itIT } from './it_IT';
 export { default as kkKZ } from './kk_KZ';
 export { default as koKR } from './ko_KR';
+export { default as nlNL } from './nl_NL';
 export { default as ptBR } from './pt_BR';
 export { default as ruRU } from './ru_RU';
 export { default as svSE } from './sv_SE';

package/cjs/locales/index.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.frFR = exports.faIR = exports.zhTw = exports.zhCN = exports.trTR = exports.svSE = exports.ruRU = exports.ptBR = exports.koKR = exports.kkKZ = exports.itIT = exports.fiFI = exports.esES = exports.esAR = exports.enUS = exports.enGB = exports.deDE = exports.daDK = exports.arEG = void 0;
+exports.frFR = exports.faIR = exports.zhTw = exports.zhCN = exports.trTR = exports.svSE = exports.ruRU = exports.ptBR = exports.nlNL = exports.koKR = exports.kkKZ = exports.itIT = exports.fiFI = exports.esES = exports.esAR = exports.enUS = exports.enGB = exports.deDE = exports.daDK = exports.arEG = void 0;
 
 var _ar_EG = _interopRequireDefault(require("./ar_EG"));
 
@@ -49,6 +49,10 @@ var _ko_KR = _interopRequireDefault(require("./ko_KR"));
 
 exports.koKR = _ko_KR.default;
 
+var _nl_NL = _interopRequireDefault(require("./nl_NL"));
+
+exports.nlNL = _nl_NL.default;
+
 var _pt_BR = _interopRequireDefault(require("./pt_BR"));
 
 exports.ptBR = _pt_BR.default;