rsuite 5.41.0 → 5.43.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [5.43.0](https://github.com/rsuite/rsuite/compare/5.42.0...5.43.0) (2023-11-03)
+
+### Bug Fixes
+
+- **AutoComplete:** fix AutoComplete plaintext mode not working ([#3436](https://github.com/rsuite/rsuite/issues/3436)) ([72b79e7](https://github.com/rsuite/rsuite/commit/72b79e7b6dfb90ec23bb81b1145db125f8b827cd))
+- **Drawer:** change Drawer title font-size to 18px ([#3430](https://github.com/rsuite/rsuite/issues/3430)) ([3eff439](https://github.com/rsuite/rsuite/commit/3eff439a0fa28e5349e306b6b2ded8eb9e847f95))
+
+### Features
+
+- **CSS:** use CSS custom properties instead of less variables ([#3428](https://github.com/rsuite/rsuite/issues/3428)) ([f6474e4](https://github.com/rsuite/rsuite/commit/f6474e490036cd8faf228332e2b7bd6b85902671))
+
+# [5.42.0](https://github.com/rsuite/rsuite/compare/v5.41.0...v5.42.0) (2023-10-29)
+
+### Bug Fixes
+
+- **form:** form doesn't pass correct formValue to context ([#3426](https://github.com/rsuite/rsuite/issues/3426)) ([0ade0dc](https://github.com/rsuite/rsuite/commit/0ade0dc60e25857120eb38047cec1c7e78f8df11))
+
+### Features
+
+- **TagPicker,TagInput:** add support for onTagRemove ([#3413](https://github.com/rsuite/rsuite/issues/3413)) ([96f96ab](https://github.com/rsuite/rsuite/commit/96f96abc974fb8b0200c0cc715275fcdcaee3736))
+
 # [5.41.0](https://github.com/rsuite/rsuite/compare/v5.38.0...v5.41.0) (2023-10-20)
 
 ### Bug Fixes

package/Placeholder/styles/index.less

@@ -111,7 +111,7 @@
         var(--rs-placeholder) 63%
       );
       background-size: 400% 100% !important;
-      animation: placeholder-active 3s ease infinite;
+      animation: placeholder-active 1.5s ease infinite;
     }
   }
 

package/cjs/AutoComplete/AutoComplete.js

@@ -16,6 +16,7 @@ var _utils = require("../utils");
 var _utils2 = require("../Animation/utils");
 var _Picker = require("../Picker");
 var _utils3 = require("./utils");
+var _Plaintext = _interopRequireDefault(require("../Plaintext"));
 /**
  * TODO: Remove unnecessary .rs-auto-complete element
  * TODO: role=combobox and aria-autocomplete on input element
@@ -43,6 +44,7 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     menuClassName = props.menuClassName,
     id = props.id,
     readOnly = props.readOnly,
+    plaintext = props.plaintext,
     renderMenu = props.renderMenu,
     renderMenuItem = props.renderMenuItem,
     onSelect = props.onSelect,
@@ -54,7 +56,7 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     onFocus = props.onFocus,
     onBlur = props.onBlur,
     onMenuFocus = props.onMenuFocus,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "disabled", "className", "placement", "selectOnEnter", "classPrefix", "defaultValue", "menuAutoWidth", "data", "value", "open", "style", "size", "menuClassName", "id", "readOnly", "renderMenu", "renderMenuItem", "onSelect", "filterBy", "onKeyDown", "onChange", "onClose", "onOpen", "onFocus", "onBlur", "onMenuFocus"]);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "disabled", "className", "placement", "selectOnEnter", "classPrefix", "defaultValue", "menuAutoWidth", "data", "value", "open", "style", "size", "menuClassName", "id", "readOnly", "plaintext", "renderMenu", "renderMenuItem", "onSelect", "filterBy", "onKeyDown", "onChange", "onClose", "onOpen", "onFocus", "onBlur", "onMenuFocus"]);
   var datalist = (0, _utils3.transformData)(data);
   var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue),
     value = _useControlled[0],
@@ -185,6 +187,12 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       autoWidth: menuAutoWidth
     }, renderMenu ? renderMenu(menu) : menu);
   };
+  if (plaintext) {
+    return /*#__PURE__*/_react.default.createElement(_Plaintext.default, {
+      ref: ref,
+      localeKey: "unfilled"
+    }, typeof value === 'undefined' ? defaultValue : value);
+  }
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
     ref: triggerRef,
     placement: placement,

package/cjs/Form/Form.js

@@ -243,7 +243,6 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     return {
       getCombinedModel: getCombinedModel,
       checkTrigger: checkTrigger,
-      formDefaultValue: formDefaultValue,
       errorFromContext: errorFromContext,
       readOnly: readOnly,
       plaintext: plaintext,
@@ -257,7 +256,7 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onFieldError: handleFieldError,
       onFieldSuccess: handleFieldSuccess
     };
-  }, [getCombinedModel, checkTrigger, formDefaultValue, errorFromContext, readOnly, plaintext, disabled, realFormError, removeFieldValue, removeFieldError, pushFieldRule, removeFieldRule, handleFieldChange, handleFieldError, handleFieldSuccess]);
+  }, [getCombinedModel, checkTrigger, errorFromContext, readOnly, plaintext, disabled, realFormError, removeFieldValue, removeFieldError, pushFieldRule, removeFieldRule, handleFieldChange, handleFieldError, handleFieldSuccess]);
   return /*#__PURE__*/_react.default.createElement("form", (0, _extends6.default)({}, rest, {
     ref: rootRef,
     onSubmit: handleSubmit,
@@ -265,7 +264,7 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }), /*#__PURE__*/_react.default.createElement(_FormContext.default.Provider, {
     value: formContextValue
   }, /*#__PURE__*/_react.default.createElement(_FormContext.FormValueContext.Provider, {
-    value: formValue
+    value: realFormValue
   }, children)));
 });
 Form.Control = _FormControl.default;

package/cjs/Form/FormContext.d.ts

@@ -15,16 +15,15 @@ interface TrulyFormContextValue<T = Record<string, any>, errorMsgType = any, E =
     onFieldError: (name: string, errorMessage: string) => void;
     onFieldSuccess: (name: string) => void;
 }
-declare type ExternalPropsContextValue<T> = {
+declare type ExternalPropsContextValue = {
     checkTrigger?: TypeAttributes.CheckTrigger;
-    formDefaultValue?: T;
     errorFromContext?: boolean;
     readOnly?: boolean;
     plaintext?: boolean;
     disabled?: boolean;
 };
 declare type InitialContextType = Partial<Record<keyof TrulyFormContextValue, undefined>>;
-export declare type FormContextValue<T = Record<string, any>, errorMsgType = any> = (TrulyFormContextValue<T, errorMsgType> | InitialContextType) & ExternalPropsContextValue<T>;
+export declare type FormContextValue<T = Record<string, any>, errorMsgType = any> = (TrulyFormContextValue<T, errorMsgType> | InitialContextType) & ExternalPropsContextValue;
 export declare const FormContext: React.Context<FormContextValue<Record<string, any>, any>>;
 export declare const FormValueContext: React.Context<Record<string, any> | undefined>;
 export declare const FormPlaintextContext: React.Context<boolean>;

package/cjs/FormControl/FormControl.js

@@ -30,8 +30,6 @@ var FormControl = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     plaintextContext = _useContext.plaintext,
     disabledContext = _useContext.disabled,
     errorFromContext = _useContext.errorFromContext,
-    _useContext$formDefau = _useContext.formDefaultValue,
-    formDefaultValue = _useContext$formDefau === void 0 ? {} : _useContext$formDefau,
     formError = _useContext.formError,
     removeFieldValue = _useContext.removeFieldValue,
     removeFieldError = _useContext.removeFieldError,
@@ -131,14 +129,12 @@ var FormControl = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   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);
+  var accepterProps = (_accepterProps = {}, _accepterProps[valueKey] = val !== null && val !== void 0 ? val : defaultValue, _accepterProps);
   return /*#__PURE__*/_react.default.createElement(Component, {
     className: classes,
     ref: ref

package/cjs/InputPicker/InputPicker.d.ts

@@ -18,6 +18,8 @@ export interface InputPickerContextProps {
      * No overlay provides options
      */
     disabledOptions?: boolean;
+    /** Callback fired when a tag is removed. */
+    onTagRemove?: (tag: string, event: React.MouseEvent) => void;
 }
 export declare const InputPickerContext: React.Context<InputPickerContextProps>;
 interface InputItemDataType extends ItemDataType {

package/cjs/InputPicker/InputPicker.js

@@ -108,7 +108,8 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     multi = _useContext.multi,
     tagProps = _useContext.tagProps,
     trigger = _useContext.trigger,
-    disabledOptions = _useContext.disabledOptions;
+    disabledOptions = _useContext.disabledOptions,
+    onTagRemove = _useContext.onTagRemove;
   if (groupBy === valueKey || groupBy === labelKey) {
     throw Error('`groupBy` can not be equal to `valueKey` and `labelKey`');
   }
@@ -257,7 +258,8 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     });
     setValue(val);
     handleChange(val, event);
-  }, [setValue, cloneValue, handleChange]);
+    onTagRemove === null || onTagRemove === void 0 ? void 0 : onTagRemove(tag, event);
+  }, [cloneValue, setValue, handleChange, onTagRemove]);
   var handleSelect = (0, _react.useCallback)(function (value, item, event) {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(value, item, event);
     if (creatable && item.create) {

package/cjs/TagInput/index.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { InputPickerProps, TriggerType } from '../InputPicker/InputPicker';
 import type { PickerComponent } from '../Picker/types';
 import type { TagProps } from '../Tag';
@@ -10,6 +11,8 @@ export interface TagInputProps extends Omit<InputPickerProps<readonly string[]>,
      * @todo Declare as readonly array
      */
     trigger?: TriggerType | TriggerType[];
+    /** Callback fired when a tag is removed. */
+    onTagRemove?: (tag: string, event: React.MouseEvent) => void;
 }
 declare const TagInput: PickerComponent<TagInputProps>;
 export default TagInput;

package/cjs/TagInput/index.js

@@ -16,15 +16,17 @@ var TagInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     trigger = _props$trigger === void 0 ? 'Enter' : _props$trigger,
     value = props.value,
     defaultValue = props.defaultValue,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["tagProps", "trigger", "value", "defaultValue"]);
+    onTagRemove = props.onTagRemove,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["tagProps", "trigger", "value", "defaultValue", "onTagRemove"]);
   var contextValue = (0, _react.useMemo)(function () {
     return {
       multi: true,
       disabledOptions: true,
       trigger: trigger,
-      tagProps: tagProps
+      tagProps: tagProps,
+      onTagRemove: onTagRemove
     };
-  }, [tagProps, trigger]);
+  }, [onTagRemove, tagProps, trigger]);
   var data = (0, _react.useMemo)(function () {
     return (value || defaultValue || []).map(function (v) {
       return {

package/cjs/TagPicker/index.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { InputPickerProps, TriggerType } from '../InputPicker/InputPicker';
 import type { PickerComponent } from '../Picker/types';
 import type { TagProps } from '../Tag';
@@ -8,6 +9,8 @@ export interface TagPickerProps extends InputPickerProps {
      * Set the trigger for creating tags. only valid when creatable
      */
     trigger?: TriggerType | TriggerType[];
+    /** Callback fired when a tag is removed. */
+    onTagRemove?: (tag: string, event: React.MouseEvent) => void;
 }
 declare const TagPicker: PickerComponent<TagPickerProps>;
 export default TagPicker;

package/cjs/TagPicker/index.js

@@ -14,14 +14,16 @@ var TagPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     tagProps = _props$tagProps === void 0 ? {} : _props$tagProps,
     _props$trigger = props.trigger,
     trigger = _props$trigger === void 0 ? 'Enter' : _props$trigger,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["tagProps", "trigger"]);
+    onTagRemove = props.onTagRemove,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["tagProps", "trigger", "onTagRemove"]);
   var contextValue = (0, _react.useMemo)(function () {
     return {
       multi: true,
       trigger: trigger,
-      tagProps: tagProps
+      tagProps: tagProps,
+      onTagRemove: onTagRemove
     };
-  }, [tagProps, trigger]);
+  }, [onTagRemove, tagProps, trigger]);
   return /*#__PURE__*/_react.default.createElement(_InputPicker.InputPickerContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/_react.default.createElement(_InputPicker.default, (0, _extends2.default)({}, rest, {