rsuite 5.17.0 → 5.17.1

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## [5.17.1](https://github.com/rsuite/rsuite/compare/v5.17.0...v5.17.1) (2022-09-01)
+
+### Bug Fixes
+
+- **InputGroup:** fix icons not being vertically centered within the input ([#2680](https://github.com/rsuite/rsuite/issues/2680)) ([b10a050](https://github.com/rsuite/rsuite/commit/b10a050fb52f6fbc23e2cc308d57d67a515596e7))
+
+### Features
+
+- **DatePicker,DateRangePicker:** support to disable keyboard input ([#2673](https://github.com/rsuite/rsuite/issues/2673)) ([01ec4a8](https://github.com/rsuite/rsuite/commit/01ec4a8587d72842f0ae2d76ee51715e9bf7c6c2))
+
 # [5.17.0](https://github.com/rsuite/rsuite/compare/v5.16.6...v5.17.0) (2022-08-26)
 
 ### Features

package/InputGroup/styles/index.less

@@ -165,7 +165,11 @@
       top: 0;
       background: none;
       border: none;
-      padding: 11px 13px 8px 13px;
+      padding: 10px 13px;
+
+      &.rs-input-group-btn {
+        padding: 8px 13px;
+      }
     }
 
     .rs-input-group-btn ~ input.rs-input,

package/cjs/DatePicker/DatePicker.d.ts

@@ -9,6 +9,8 @@ export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, Form
     ranges?: RangeType<Date>[];
     /** Calendar panel default presentation date and time */
     calendarDefaultDate?: Date;
+    /** Rendered as an input, the date can be entered via the keyboard */
+    editable?: boolean;
     /** Format date */
     format?: string;
     /**

package/cjs/DatePicker/DatePicker.js

@@ -46,6 +46,8 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       calendarDefaultDate = props.calendarDefaultDate,
       _props$cleanable = props.cleanable,
       cleanable = _props$cleanable === void 0 ? true : _props$cleanable,
+      _props$editable = props.editable,
+      editable = _props$editable === void 0 ? true : _props$editable,
       defaultValue = props.defaultValue,
       disabled = props.disabled,
       _props$format = props.format,
@@ -84,7 +86,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onSelect = props.onSelect,
       onToggleMonthDropdown = props.onToggleMonthDropdown,
       onToggleTimeDropdown = props.onToggleTimeDropdown,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "defaultValue", "disabled", "format", "isoWeek", "limitEndYear", "locale", "menuClassName", "appearance", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showWeekNumbers", "style", "toggleAs", "caretAs", "disabledDate", "renderValue", "onChange", "onChangeCalendarDate", "onClean", "onClose", "onEntered", "onExited", "onNextMonth", "onOk", "onOpen", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "editable", "defaultValue", "disabled", "format", "isoWeek", "limitEndYear", "locale", "menuClassName", "appearance", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showWeekNumbers", "style", "toggleAs", "caretAs", "disabledDate", "renderValue", "onChange", "onChangeCalendarDate", "onClean", "onClose", "onEntered", "onExited", "onNextMonth", "onOk", "onOpen", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown"]);
 
   var _useCustom = (0, _utils.useCustom)('DatePicker', overrideLocale),
       locale = _useCustom.locale,
@@ -468,7 +470,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     as: toggleAs,
     ref: targetRef,
     appearance: appearance,
-    editable: true,
+    editable: editable,
     inputValue: value ? formatDate(value, formatStr) : '',
     inputPlaceholder: typeof placeholder === 'string' && placeholder ? placeholder : formatStr,
     inputMask: _utils.DateUtils.getDateMask(formatStr),

package/cjs/DateRangePicker/DateRangePicker.d.ts

@@ -7,6 +7,8 @@ export interface DateRangePickerProps extends PickerBaseProps, FormControlBasePr
     ranges?: RangeType[];
     /** Format date */
     format?: string;
+    /** Rendered as an input, the date can be entered via the keyboard */
+    editable?: boolean;
     /** The date range that will be selected when you click on the date */
     hoverRange?: 'week' | 'month' | ((date: Date) => DateRange);
     /** Whether to click once on selected date range，Can be used with hoverRange */

package/cjs/DateRangePicker/DateRangePicker.js

@@ -55,6 +55,8 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       className = props.className,
       _props$appearance = props.appearance,
       appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
+      _props$editable = props.editable,
+      editable = _props$editable === void 0 ? true : _props$editable,
       _props$cleanable = props.cleanable,
       cleanable = _props$cleanable === void 0 ? true : _props$cleanable,
       _props$character = props.character,
@@ -98,7 +100,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       onOpen = props.onOpen,
       onSelect = props.onSelect,
       renderTitle = props.renderTitle,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "appearance", "cleanable", "character", "defaultCalendarValue", "defaultValue", "disabled", "disabledDate", "format", "hoverRange", "isoWeek", "limitEndYear", "locale", "menuClassName", "menuStyle", "oneTap", "placeholder", "placement", "ranges", "renderValue", "showOneCalendar", "showWeekNumbers", "showMeridian", "style", "toggleAs", "caretAs", "value", "onChange", "onClean", "onClose", "onEnter", "onEntered", "onExited", "onOk", "onOpen", "onSelect", "renderTitle"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "appearance", "editable", "cleanable", "character", "defaultCalendarValue", "defaultValue", "disabled", "disabledDate", "format", "hoverRange", "isoWeek", "limitEndYear", "locale", "menuClassName", "menuStyle", "oneTap", "placeholder", "placement", "ranges", "renderValue", "showOneCalendar", "showWeekNumbers", "showMeridian", "style", "toggleAs", "caretAs", "value", "onChange", "onClean", "onClose", "onEnter", "onEntered", "onExited", "onOk", "onOpen", "onSelect", "renderTitle"]);
 
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       merge = _useClassNames.merge,
@@ -672,7 +674,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     as: toggleAs,
     ref: targetRef,
     appearance: appearance,
-    editable: true,
+    editable: editable,
     inputMask: _utils.DateUtils.getDateMask(rangeFormatStr),
     inputValue: value ? getDisplayString(value, true) : '',
     inputPlaceholder: typeof placeholder === 'string' && placeholder ? placeholder : rangeFormatStr,

package/dist/rsuite-rtl.css

@@ -8104,7 +8104,10 @@ textarea.rs-input-sm {
   top: 0;
   background: none;
   border: none;
-  padding: 11px 13px 8px 13px;
+  padding: 10px 13px;
+}
+.rs-input-group.rs-input-group-inside .rs-input-group-addon.rs-input-group-btn {
+  padding: 8px 13px;
 }
 .rs-input-group.rs-input-group-inside .rs-input-group-btn ~ input.rs-input,
 .rs-input-group.rs-input-group-inside .rs-input-group-addon ~ input.rs-input,