rsuite 5.53.2 → 5.54.0

package/AutoComplete/styles/index.css

@@ -1421,7 +1421,6 @@ textarea.rs-input-sm {
   width: 100%;
   border: none;
   outline: none;
-  padding-right: 36px;
 }
 .rs-input-group.rs-input-group-inside .rs-input-group-btn,
 .rs-input-group.rs-input-group-inside .rs-input-group-addon {
@@ -1436,7 +1435,6 @@ textarea.rs-input-sm {
   background-color: transparent;
   border: none;
   color: inherit;
-  position: absolute;
   height: 34px;
   padding: 7px 11px;
   border-radius: 0 6px 6px 0;

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+# [5.54.0](https://github.com/rsuite/rsuite/compare/v5.53.2...v5.54.0) (2024-02-22)
+
+
+### Bug Fixes
+
+* **DatePicker:** fix style error of the bottom button in the datePicker ([#3634](https://github.com/rsuite/rsuite/issues/3634)) ([536ad7e](https://github.com/rsuite/rsuite/commit/536ad7e9b0bf9c727dd69c5e0584033751422e1f))
+* **DateRangePicker:** fix error state when value is empty array ([#3631](https://github.com/rsuite/rsuite/issues/3631)) ([f8778f5](https://github.com/rsuite/rsuite/commit/f8778f537c441e0a49ecebf2c41c9af14a764400))
+* **InputGroup:** fix Input padding issue in InputGroup ([#3600](https://github.com/rsuite/rsuite/issues/3600)) ([56b3792](https://github.com/rsuite/rsuite/commit/56b379297e237aa26aff0140cd93ec3a7314e5f4))
+* **TagPicker:** fix the margin issue between tags in plaintext mode ([#3638](https://github.com/rsuite/rsuite/issues/3638)) ([61f343b](https://github.com/rsuite/rsuite/commit/61f343b43677b9d1441f5c5a60cc7a95ae6890ca))
+* fixed issue with install guide page ([#3619](https://github.com/rsuite/rsuite/issues/3619)) ([#3620](https://github.com/rsuite/rsuite/issues/3620)) ([33159b6](https://github.com/rsuite/rsuite/commit/33159b6ffeff4ce44cae03e1eb9ae806c6d2d12c))
+
+
+### Features
+
+* **InlineEdit:** add support for InlineEdit ([#3614](https://github.com/rsuite/rsuite/issues/3614)) ([8ed7e6d](https://github.com/rsuite/rsuite/commit/8ed7e6d57b7ccd930bd72017a0a8299be0c21515))
+
+
+
 ## [5.53.2](https://github.com/rsuite/rsuite/compare/v5.53.1...v5.53.2) (2024-02-06)
 
 

package/Cascader/styles/index.css

@@ -1737,7 +1737,6 @@ textarea.rs-input-sm {
   width: 100%;
   border: none;
   outline: none;
-  padding-right: 36px;
 }
 .rs-input-group.rs-input-group-inside .rs-input-group-btn,
 .rs-input-group.rs-input-group-inside .rs-input-group-addon {
@@ -1752,7 +1751,6 @@ textarea.rs-input-sm {
   background-color: transparent;
   border: none;
   color: inherit;
-  position: absolute;
   height: 34px;
   padding: 7px 11px;
   border-radius: 0 6px 6px 0;

package/CheckPicker/styles/index.css

@@ -1927,7 +1927,6 @@ textarea.rs-input-sm {
   width: 100%;
   border: none;
   outline: none;
-  padding-right: 36px;
 }
 .rs-input-group.rs-input-group-inside .rs-input-group-btn,
 .rs-input-group.rs-input-group-inside .rs-input-group-addon {
@@ -1942,7 +1941,6 @@ textarea.rs-input-sm {
   background-color: transparent;
   border: none;
   color: inherit;
-  position: absolute;
   height: 34px;
   padding: 7px 11px;
   border-radius: 0 6px 6px 0;

package/CheckTree/styles/index.css

@@ -1742,7 +1742,6 @@ textarea.rs-input-sm {
   width: 100%;
   border: none;
   outline: none;
-  padding-right: 36px;
 }
 .rs-input-group.rs-input-group-inside .rs-input-group-btn,
 .rs-input-group.rs-input-group-inside .rs-input-group-addon {
@@ -1757,7 +1756,6 @@ textarea.rs-input-sm {
   background-color: transparent;
   border: none;
   color: inherit;
-  position: absolute;
   height: 34px;
   padding: 7px 11px;
   border-radius: 0 6px 6px 0;

package/CheckTreePicker/styles/index.css

@@ -1742,7 +1742,6 @@ textarea.rs-input-sm {
   width: 100%;
   border: none;
   outline: none;
-  padding-right: 36px;
 }
 .rs-input-group.rs-input-group-inside .rs-input-group-btn,
 .rs-input-group.rs-input-group-inside .rs-input-group-addon {
@@ -1757,7 +1756,6 @@ textarea.rs-input-sm {
   background-color: transparent;
   border: none;
   color: inherit;
-  position: absolute;
   height: 34px;
   padding: 7px 11px;
   border-radius: 0 6px 6px 0;

package/DatePicker/styles/index.css

@@ -1459,7 +1459,6 @@ textarea.rs-input-sm {
   width: 100%;
   border: none;
   outline: none;
-  padding-right: 36px;
 }
 .rs-input-group.rs-input-group-inside .rs-input-group-btn,
 .rs-input-group.rs-input-group-inside .rs-input-group-addon {
@@ -1474,7 +1473,6 @@ textarea.rs-input-sm {
   background-color: transparent;
   border: none;
   color: inherit;
-  position: absolute;
   height: 34px;
   padding: 7px 11px;
   border-radius: 0 6px 6px 0;

package/DateRangePicker/styles/index.css

@@ -1459,7 +1459,6 @@ textarea.rs-input-sm {
   width: 100%;
   border: none;
   outline: none;
-  padding-right: 36px;
 }
 .rs-input-group.rs-input-group-inside .rs-input-group-btn,
 .rs-input-group.rs-input-group-inside .rs-input-group-addon {
@@ -1474,7 +1473,6 @@ textarea.rs-input-sm {
   background-color: transparent;
   border: none;
   color: inherit;
-  position: absolute;
   height: 34px;
   padding: 7px 11px;
   border-radius: 0 6px 6px 0;

package/FormGroup/styles/index.css

@@ -21,6 +21,9 @@
   margin-top: 8px;
   display: inline-block;
 }
+.rs-form-group {
+  position: relative;
+}
 .rs-form:not(.rs-form-inline) .rs-form-group:not(:last-child) {
   margin-bottom: 24px;
 }

package/FormGroup/styles/index.less

@@ -6,6 +6,8 @@
 // --------------------------------------------------
 
 .rs-form-group {
+  position: relative;
+
   .rs-form:not(.rs-form-inline) &:not(:last-child) {
     margin-bottom: @form-group-margin-bottom;
   }

package/InlineEdit/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "rsuite/InlineEdit",
+  "private": true,
+  "main": "../cjs/InlineEdit/index.js",
+  "module": "../esm/InlineEdit/index.js",
+  "types": "../esm/InlineEdit/index.d.ts"
+}

package/InlineEdit/styles/index.css

@@ -0,0 +1,112 @@
+:root,
+.rs-theme-light {
+  --rs-gray-200: #e5e5ea;
+  --rs-gray-500: #a6a6a6;
+  --rs-inline-edit-hover-bg: var(--rs-gray-200);
+}
+.rs-theme-dark {
+  --rs-gray-200: #a4a9b3;
+  --rs-gray-500: #5c6066;
+  --rs-inline-edit-hover-bg: var(--rs-gray-500);
+}
+.rs-theme-high-contrast {
+  --rs-gray-200: #a4a9b3;
+  --rs-gray-500: #5c6066;
+  --rs-inline-edit-hover-bg: transparent;
+}
+/* stylelint-disable */
+*[class*='rs-'] {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+*[class*='rs-']::before,
+*[class*='rs-']::after {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.rs-inline-edit {
+  position: relative;
+  display: inline-block;
+}
+.rs-inline-edit .rs-plaintext {
+  /* stylelint-disable */
+  padding: 7px 11px;
+  font-size: 14px;
+  line-height: 1.42857143;
+  /* stylelint-enable */
+  border-radius: 6px;
+}
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .rs-inline-edit .rs-plaintext {
+    height: 36px;
+  }
+}
+textarea.rs-inline-edit .rs-plaintext {
+  height: auto;
+}
+.rs-inline-edit .rs-plaintext:hover {
+  background-color: #e5e5ea;
+  background-color: var(--rs-inline-edit-hover-bg);
+}
+.rs-inline-edit-disabled .rs-plaintext:hover {
+  background-color: transparent;
+}
+.rs-inline-edit-controls {
+  position: absolute;
+  inset-block-start: 100%;
+  inset-inline-end: 0px;
+  -webkit-margin-before: 6px;
+          margin-block-start: 6px;
+  z-index: 7;
+}
+.rs-inline-edit-controls .rs-btn {
+  -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+          box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+}
+.rs-inline-edit-xs .rs-plaintext {
+  /* stylelint-disable */
+  padding: 1px 11px;
+  font-size: 12px;
+  line-height: 1.66666667;
+  /* stylelint-enable */
+}
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .rs-inline-edit-xs .rs-plaintext {
+    height: 24px;
+  }
+}
+textarea.rs-inline-edit-xs .rs-plaintext {
+  height: auto;
+}
+.rs-inline-edit-lg .rs-plaintext {
+  /* stylelint-disable */
+  padding: 9px 11px;
+  font-size: 16px;
+  line-height: 1.375;
+  /* stylelint-enable */
+}
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .rs-inline-edit-lg .rs-plaintext {
+    height: 42px;
+  }
+}
+textarea.rs-inline-edit-lg .rs-plaintext {
+  height: auto;
+}
+.rs-inline-edit-sm .rs-plaintext {
+  /* stylelint-disable */
+  padding: 4px 11px;
+  font-size: 14px;
+  line-height: 1.42857143;
+  /* stylelint-enable */
+}
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .rs-inline-edit-sm .rs-plaintext {
+    height: 30px;
+  }
+}
+textarea.rs-inline-edit-sm .rs-plaintext {
+  height: auto;
+}
+
+/*# sourceMappingURL=index.css.map */

package/InlineEdit/styles/index.less

@@ -0,0 +1,48 @@
+@import '../../styles/common';
+@import '../../Form/styles/mixin.less';
+
+.rs-inline-edit {
+  position: relative;
+  display: inline-block;
+
+  .rs-plaintext {
+    .input-md();
+    border-radius: 6px;
+
+    &:hover {
+      background-color: var(--rs-inline-edit-hover-bg);
+    }
+  }
+
+  &-disabled {
+    .rs-plaintext {
+      &:hover {
+        background-color: transparent;
+      }
+    }
+  }
+
+  &-controls {
+    position: absolute;
+    inset-block-start: 100%;
+    inset-inline-end: 0px;
+    margin-block-start: 6px;
+    z-index: 7;
+
+    .rs-btn {
+      box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+    }
+  }
+}
+
+.rs-inline-edit-xs .rs-plaintext {
+  .input-xs();
+}
+
+.rs-inline-edit-lg .rs-plaintext {
+  .input-lg();
+}
+
+.rs-inline-edit-sm .rs-plaintext {
+  .input-sm();
+}

package/InputGroup/styles/index.css

@@ -1245,7 +1245,6 @@
   width: 100%;
   border: none;
   outline: none;
-  padding-right: 36px;
 }
 .rs-input-group.rs-input-group-inside .rs-input-group-btn,
 .rs-input-group.rs-input-group-inside .rs-input-group-addon {
@@ -1260,7 +1259,6 @@
   background-color: transparent;
   border: none;
   color: inherit;
-  position: absolute;
   height: 34px;
   padding: 7px 11px;
   border-radius: 0 6px 6px 0;

package/InputGroup/styles/index.less

@@ -126,7 +126,6 @@
       width: 100%;
       border: none;
       outline: none;
-      padding-right: @input-group-padding-for-add-on-base;
     }
 
     .rs-input-group-btn,
@@ -139,7 +138,6 @@
       .rs-btn-subtle();
 
       color: inherit;
-      position: absolute;
       .reset-inside-input-group-btn-size(base);
 
       &:focus {

package/InputNumber/styles/index.css

@@ -1362,7 +1362,6 @@ textarea.rs-input-sm {
   width: 100%;
   border: none;
   outline: none;
-  padding-right: 36px;
 }
 .rs-input-group.rs-input-group-inside .rs-input-group-btn,
 .rs-input-group.rs-input-group-inside .rs-input-group-addon {
@@ -1377,7 +1376,6 @@ textarea.rs-input-sm {
   background-color: transparent;
   border: none;
   color: inherit;
-  position: absolute;
   height: 34px;
   padding: 7px 11px;
   border-radius: 0 6px 6px 0;

package/InputPicker/styles/index.css

@@ -1832,7 +1832,6 @@ textarea.rs-input-sm {
   width: 100%;
   border: none;
   outline: none;
-  padding-right: 36px;
 }
 .rs-input-group.rs-input-group-inside .rs-input-group-btn,
 .rs-input-group.rs-input-group-inside .rs-input-group-addon {
@@ -1847,7 +1846,6 @@ textarea.rs-input-sm {
   background-color: transparent;
   border: none;
   color: inherit;
-  position: absolute;
   height: 34px;
   padding: 7px 11px;
   border-radius: 0 6px 6px 0;

package/MultiCascader/styles/index.css

@@ -1941,7 +1941,6 @@ textarea.rs-input-sm {
   width: 100%;
   border: none;
   outline: none;
-  padding-right: 36px;
 }
 .rs-input-group.rs-input-group-inside .rs-input-group-btn,
 .rs-input-group.rs-input-group-inside .rs-input-group-addon {
@@ -1956,7 +1955,6 @@ textarea.rs-input-sm {
   background-color: transparent;
   border: none;
   color: inherit;
-  position: absolute;
   height: 34px;
   padding: 7px 11px;
   border-radius: 0 6px 6px 0;

package/Pagination/styles/index.css

@@ -1873,7 +1873,6 @@ textarea.rs-input-sm {
   width: 100%;
   border: none;
   outline: none;
-  padding-right: 36px;
 }
 .rs-input-group.rs-input-group-inside .rs-input-group-btn,
 .rs-input-group.rs-input-group-inside .rs-input-group-addon {
@@ -1888,7 +1887,6 @@ textarea.rs-input-sm {
   background-color: transparent;
   border: none;
   color: inherit;
-  position: absolute;
   height: 34px;
   padding: 7px 11px;
   border-radius: 0 6px 6px 0;

package/SelectPicker/styles/index.css

@@ -1740,7 +1740,6 @@ textarea.rs-input-sm {
   width: 100%;
   border: none;
   outline: none;
-  padding-right: 36px;
 }
 .rs-input-group.rs-input-group-inside .rs-input-group-btn,
 .rs-input-group.rs-input-group-inside .rs-input-group-addon {
@@ -1755,7 +1754,6 @@ textarea.rs-input-sm {
   background-color: transparent;
   border: none;
   color: inherit;
-  position: absolute;
   height: 34px;
   padding: 7px 11px;
   border-radius: 0 6px 6px 0;

package/TagInput/styles/index.css

@@ -2051,7 +2051,6 @@ textarea.rs-input-sm {
   width: 100%;
   border: none;
   outline: none;
-  padding-right: 36px;
 }
 .rs-input-group.rs-input-group-inside .rs-input-group-btn,
 .rs-input-group.rs-input-group-inside .rs-input-group-addon {
@@ -2066,7 +2065,6 @@ textarea.rs-input-sm {
   background-color: transparent;
   border: none;
   color: inherit;
-  position: absolute;
   height: 34px;
   padding: 7px 11px;
   border-radius: 0 6px 6px 0;
@@ -3627,8 +3625,7 @@ textarea.rs-picker-search-input {
   display: contents;
 }
 .rs-plaintext .rs-tag {
-  margin-left: 6px;
-  margin-bottom: 6px;
+  margin: 0;
 }
 .rs-picker-disabled-options .rs-picker-toggle {
   padding-right: 32px !important;

package/TagPicker/styles/index.css

@@ -2051,7 +2051,6 @@ textarea.rs-input-sm {
   width: 100%;
   border: none;
   outline: none;
-  padding-right: 36px;
 }
 .rs-input-group.rs-input-group-inside .rs-input-group-btn,
 .rs-input-group.rs-input-group-inside .rs-input-group-addon {
@@ -2066,7 +2065,6 @@ textarea.rs-input-sm {
   background-color: transparent;
   border: none;
   color: inherit;
-  position: absolute;
   height: 34px;
   padding: 7px 11px;
   border-radius: 0 6px 6px 0;
@@ -3627,8 +3625,7 @@ textarea.rs-picker-search-input {
   display: contents;
 }
 .rs-plaintext .rs-tag {
-  margin-left: 6px;
-  margin-bottom: 6px;
+  margin: 0;
 }
 
 /*# sourceMappingURL=index.css.map */

package/TagPicker/styles/index.less

@@ -66,6 +66,5 @@
 }
 
 .rs-plaintext .rs-tag {
-  margin-left: 6px;
-  margin-bottom: 6px;
+  margin: 0;
 }

package/cjs/DatePicker/DatePicker.js

@@ -443,7 +443,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       locale: locale,
       disabledShortcut: disabledToolbarHandle,
       onShortcutClick: handleShortcutPageDate
-    }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CalendarContainer.default, (0, _extends2.default)({}, calendarProps, {
+    }), /*#__PURE__*/_react.default.createElement(_Stack.default.Item, null, /*#__PURE__*/_react.default.createElement(_CalendarContainer.default, (0, _extends2.default)({}, calendarProps, {
       targetId: id,
       locale: locale,
       showWeekNumbers: showWeekNumbers,

package/cjs/DateRangePicker/DateRangePicker.js

@@ -674,6 +674,11 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     if (!value) {
       return false;
     }
+
+    // If the value is an empty array, it is not an error value.
+    if (Array.isArray(value) && value.length === 0) {
+      return false;
+    }
     var startDate = value[0],
       endDate = value[1];
     if (!(0, _dateUtils.isValid)(startDate) || !(0, _dateUtils.isValid)(endDate)) {

package/cjs/InlineEdit/EditableControls.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type StackProps } from '../Stack';
+interface EditableControlsProps extends StackProps {
+    onSave: () => void;
+    onCancel: () => void;
+}
+declare const EditableControls: React.ForwardRefExoticComponent<EditableControlsProps & React.RefAttributes<HTMLDivElement>>;
+export default EditableControls;

package/cjs/InlineEdit/EditableControls.js

@@ -0,0 +1,34 @@
+'use client';
+"use strict";
+
+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 = _interopRequireDefault(require("react"));
+var _Check = _interopRequireDefault(require("@rsuite/icons/Check"));
+var _Close = _interopRequireDefault(require("@rsuite/icons/Close"));
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+var _Stack = _interopRequireDefault(require("../Stack"));
+var EditableControls = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var onSave = props.onSave,
+    onCancel = props.onCancel,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["onSave", "onCancel"]);
+  return /*#__PURE__*/_react.default.createElement(_Stack.default, (0, _extends2.default)({
+    ref: ref,
+    spacing: 6
+  }, rest), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    size: "sm",
+    icon: /*#__PURE__*/_react.default.createElement(_Check.default, null),
+    "aria-label": "Save",
+    onClick: onSave
+  }), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    size: "sm",
+    icon: /*#__PURE__*/_react.default.createElement(_Close.default, null),
+    "aria-label": "Cancel",
+    onClick: onCancel
+  }));
+});
+var _default = EditableControls;
+exports.default = _default;

package/cjs/InlineEdit/InlineEdit.d.ts

@@ -0,0 +1,56 @@
+import React from 'react';
+import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
+import { type ChildrenProps } from './renderChildren';
+export interface InlineEditProps extends WithAsProps {
+    /**
+     * If true, the InlineEdit will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The initial value of the InlineEdit when it is not controlled.
+     */
+    defaultValue?: any;
+    /**
+     * The value of the InlineEdit.
+     */
+    value?: any;
+    /**
+     * show the control buttons when editing.
+     * @default true
+     */
+    showControls?: boolean;
+    /**
+     * The placeholder of the InlineEdit.
+     */
+    placeholder?: string;
+    /**
+     * The size of the InlineEdit.
+     */
+    size?: 'lg' | 'md' | 'sm' | 'xs';
+    /**
+     * The state of the InlineEdit when it is blurred.
+     */
+    stateOnBlur?: 'save' | 'cancel';
+    /**
+     * The callback function that is called when the value of the InlineEdit is changed.
+     */
+    onChange?: (value: any, event: React.ChangeEvent) => void;
+    /**
+     * The callback function that is called when the InlineEdit is canceled.
+     */
+    onCancel?: (event?: React.SyntheticEvent) => void;
+    /**
+     * The callback function that is called when the InlineEdit is saved.
+     */
+    onSave?: (event?: React.SyntheticEvent) => void;
+    /**
+     * The callback function that is called when the InlineEdit is clicked.
+     */
+    onEdit?: (event: React.SyntheticEvent) => void;
+    /**
+     * The render function of the InlineEdit.
+     */
+    children?: ((props: ChildrenProps, ref: React.Ref<any>) => React.ReactElement) | React.ReactElement;
+}
+declare const InlineEdit: RsRefForwardingComponent<'div', InlineEditProps>;
+export default InlineEdit;