rsuite 5.35.1 → 5.37.0

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+# [5.37.0](https://github.com/rsuite/rsuite/compare/v5.36.0...v5.37.0) (2023-07-07)
+
+### Bug Fixes
+
+- **Picker:** pass name prop to underlying input element ([#3275](https://github.com/rsuite/rsuite/issues/3275)) ([3b7cce5](https://github.com/rsuite/rsuite/commit/3b7cce56b90de2502b1f997ae0ff74918fcee718))
+- **RadioGroup:** fix style in picker appearance ([#3274](https://github.com/rsuite/rsuite/issues/3274)) ([f673c85](https://github.com/rsuite/rsuite/commit/f673c85963973d2bbd9fc72c461d3a9718b3f25a))
+- **Uploader:** correct type for status argument of onError callback ([#3273](https://github.com/rsuite/rsuite/issues/3273)) ([cdb3c74](https://github.com/rsuite/rsuite/commit/cdb3c7412e793c1d89958ea6fddabbf91d326575))
+
+### Features
+
+- **InputPicker:** add shouldDisplayCreateOption prop ([#3270](https://github.com/rsuite/rsuite/issues/3270)) ([aa52b69](https://github.com/rsuite/rsuite/commit/aa52b690b4aa57918b12fc5a9684d7a59cef4f34))
+
+# [5.36.0](https://github.com/rsuite/rsuite/compare/v5.35.1...v5.36.0) (2023-06-30)
+
+### Bug Fixes
+
+- **TagInput:** fix tag create during text composing ([#3244](https://github.com/rsuite/rsuite/issues/3244)) ([86451d7](https://github.com/rsuite/rsuite/commit/86451d73e611c6fb1f21e2f57b9ad9757430f219))
+
+### Features
+
+- added Japanese locale (ja_JP) ([#3254](https://github.com/rsuite/rsuite/issues/3254)) ([45ea93b](https://github.com/rsuite/rsuite/commit/45ea93bbd0014e88914ca1d2abf5edc2aec0586f))
+
 ## [5.35.1](https://github.com/rsuite/rsuite/compare/v5.35.0...v5.35.1) (2023-06-09)
 
 ### Bug Fixes

package/RadioGroup/styles/index.less

@@ -1,5 +1,3 @@
-@import (reference) '../../Button/styles/index';
-
 .rs-radio-group {
   display: flex;
   flex-direction: column;
@@ -15,21 +13,33 @@
 
 // Radio Group - picker appearance
 .rs-radio-group-picker {
+  @radio-group-padding-start: 12px;
+  @radio-group-padding-end: 12px;
+  @radio-group-border-width: 1px;
+  @radio-padding-x: 10px;
+  @radio-active-underline-width: 2px;
+
   display: inline-flex;
   color: var(--rs-text-primary);
-  border: 1px solid var(--rs-border-primary);
+  border: @radio-group-border-width solid var(--rs-border-primary);
   border-radius: @border-radius;
-  margin-left: 0;
 
   .rs-radio-inline {
-    margin-left: 0;
+    padding: 0 @radio-padding-x;
+    margin: 0;
+
+    &:first-child {
+      padding-left: @radio-group-padding-start;
+    }
+
+    &:last-child {
+      padding-right: @radio-group-padding-end;
+    }
   }
 
   .rs-radio-checker {
     padding: 0;
     min-height: auto;
-    border-bottom: 1px solid transparent;
-    margin: 0 10px;
   }
 
   // Picker Radio group hidden radio.
@@ -38,14 +48,16 @@
   }
 
   .rs-radio-checker > label {
-    // TODO: Should not inherit Button styles
-    .rs-btn();
-    .rs-btn-subtle();
-
+    display: inline-block;
+    font-size: @font-size-base;
+    line-height: @line-height-base;
+    border-radius: 0;
     color: var(--rs-text-secondary);
     background: none;
     transition: color 0.3s linear;
-    padding: (@padding-y - 1px) 0;
+    padding: (@padding-y - @radio-group-border-width) 0
+      (@padding-y - @radio-group-border-width - @radio-active-underline-width);
+    border-bottom: @radio-active-underline-width solid transparent;
 
     .high-contrast-mode({
       transition: none;
@@ -59,10 +71,9 @@
   }
 
   .rs-radio-checked .rs-radio-checker {
-    border-bottom: 2px solid var(--rs-text-active);
-
     > label {
       color: var(--rs-text-active);
+      border-color: var(--rs-text-active);
     }
   }
 

package/cjs/Cascader/Cascader.js

@@ -285,12 +285,13 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       }
 
       if (!(0, _shallowEqual.default)(value, focusItemValue)) {
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(focusItem, pathTowardsActiveItem, event);
         onChange === null || onChange === void 0 ? void 0 : onChange(focusItemValue !== null && focusItemValue !== void 0 ? focusItemValue : null, event);
       }
 
       handleClose();
     }
-  }, [childrenKey, data, focusItemValue, handleClose, onChange, pathTowardsActiveItem, setLayer, setValue, value, valueKey]);
+  }, [childrenKey, data, focusItemValue, handleClose, onChange, pathTowardsActiveItem, setLayer, setValue, value, valueKey, onSelect]);
   var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends3.default)({
     toggle: !focusItemValue || !active,
     triggerRef: triggerRef,

package/cjs/InputPicker/InputPicker.d.ts

@@ -36,6 +36,15 @@ export interface InputPickerProps<T = ValueType> extends FormControlPickerProps<
     onFocus?: React.FocusEventHandler;
     /** Called when the option is created */
     onCreate?: (value: ValueType, item: ItemDataType, event: React.SyntheticEvent) => void;
+    /**
+     * Customize whether to display "Create option" action with given textbox value
+     *
+     * By default, InputPicker hides "Create option" action when textbox value matches any filtered item's [valueKey] property
+     *
+     * @param searchKeyword Value of the textbox
+     * @param filteredData The items filtered by the searchKeyword
+     */
+    shouldDisplayCreateOption?: (searchKeyword: string, filteredData: InputItemDataType[]) => boolean;
 }
 declare const InputPicker: PickerComponent<InputPickerProps>;
 export default InputPicker;

package/cjs/InputPicker/InputPicker.js

@@ -100,6 +100,7 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       _props$menuMaxHeight = props.menuMaxHeight,
       menuMaxHeight = _props$menuMaxHeight === void 0 ? 320 : _props$menuMaxHeight,
       creatable = props.creatable,
+      shouldDisplayCreateOption = props.shouldDisplayCreateOption,
       valueProp = props.value,
       _props$valueKey = props.valueKey,
       valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,
@@ -131,7 +132,7 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       searchBy = props.searchBy,
       _props$placement = props.placement,
       placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "appearance", "cleanable", "cacheData", "classPrefix", "data", "disabled", "readOnly", "plaintext", "defaultValue", "defaultOpen", "disabledItemValues", "locale", "toggleAs", "style", "searchable", "open", "placeholder", "groupBy", "menuClassName", "menuStyle", "menuAutoWidth", "menuMaxHeight", "creatable", "value", "valueKey", "virtualized", "labelKey", "listProps", "id", "tabIndex", "sort", "renderMenu", "renderExtraFooter", "renderValue", "renderMenuItem", "renderMenuGroup", "onEnter", "onEntered", "onExit", "onExited", "onChange", "onClean", "onCreate", "onSearch", "onSelect", "onOpen", "onClose", "onBlur", "onFocus", "searchBy", "placement"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "appearance", "cleanable", "cacheData", "classPrefix", "data", "disabled", "readOnly", "plaintext", "defaultValue", "defaultOpen", "disabledItemValues", "locale", "toggleAs", "style", "searchable", "open", "placeholder", "groupBy", "menuClassName", "menuStyle", "menuAutoWidth", "menuMaxHeight", "creatable", "shouldDisplayCreateOption", "value", "valueKey", "virtualized", "labelKey", "listProps", "id", "tabIndex", "sort", "renderMenu", "renderExtraFooter", "renderValue", "renderMenuItem", "renderMenuGroup", "onEnter", "onEntered", "onExit", "onExited", "onChange", "onClean", "onCreate", "onSearch", "onSelect", "onOpen", "onClose", "onBlur", "onFocus", "searchBy", "placement"]);
 
   var _useContext = (0, _react.useContext)(InputPickerContext),
       multi = _useContext.multi,
@@ -367,6 +368,11 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   };
 
   var handleTagKeyPress = (0, _react.useCallback)(function (event) {
+    // When composing, ignore the keypress event.
+    if (event.nativeEvent.isComposing) {
+      return;
+    }
+
     var val = cloneValue();
     var data = getAllData();
 
@@ -623,9 +629,9 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     });
     var items = (0, _treeUtils.filterNodesOfTree)(getAllData(), checkShouldDisplay);
 
-    if (creatable && searchKeyword && !items.find(function (item) {
+    if (creatable && (typeof shouldDisplayCreateOption === 'function' ? shouldDisplayCreateOption(searchKeyword, items) : searchKeyword && !items.find(function (item) {
       return item[valueKey] === searchKeyword;
-    })) {
+    }))) {
       items = [].concat(items, [createOption(searchKeyword)]);
     } // Create a tree structure data when set `groupBy`
 

package/cjs/MultiCascader/MultiCascader.js

@@ -249,7 +249,6 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$u = _triggerRef$current.updatePosition) === null || _triggerRef$current$u === void 0 ? void 0 : _triggerRef$current$u.call(_triggerRef$current);
   }, [onSelect, getChildren, childrenKey, inline, addFlattenData, addColumn, removeColumnByIndex]);
   var handleCheck = (0, _react.useCallback)(function (node, event, checked) {
-    console.log('handleCheck');
     var nodeValue = node[valueKey];
     var nextValue = [];
 

package/cjs/Picker/PickerToggle.d.ts

@@ -17,6 +17,7 @@ export interface PickerToggleProps extends ToggleButtonProps {
     tabIndex?: number;
     loading?: boolean;
     editable?: boolean;
+    name?: string;
     inputPlaceholder?: string;
     inputMask?: (string | RegExp)[];
     onInputChange?: (value: string, event: React.ChangeEvent) => void;

package/cjs/Picker/PickerToggle.js

@@ -80,7 +80,8 @@ var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       _props$caretAs = props.caretAs,
       caretAs = _props$caretAs === void 0 ? caretComponent : _props$caretAs,
       label = props.label,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["active", "as", "classPrefix", "children", "caret", "className", "disabled", "readOnly", "plaintext", "hasValue", "editable", "loading", "cleanable", "tabIndex", "id", "value", "inputPlaceholder", "inputValue", "inputMask", "onInputChange", "onInputPressEnter", "onInputBlur", "onInputFocus", "onClean", "onFocus", "onBlur", "placement", "caretComponent", "caretAs", "label"]);
+      name = props.name,
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["active", "as", "classPrefix", "children", "caret", "className", "disabled", "readOnly", "plaintext", "hasValue", "editable", "loading", "cleanable", "tabIndex", "id", "value", "inputPlaceholder", "inputValue", "inputMask", "onInputChange", "onInputPressEnter", "onInputBlur", "onInputFocus", "onClean", "onFocus", "onBlur", "placement", "caretComponent", "caretAs", "label", "name"]);
   var inputRef = (0, _react.useRef)(null);
   var comboboxRef = (0, _react.useRef)(null);
 
@@ -173,11 +174,12 @@ var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   var renderInput = (0, _react.useCallback)(function (ref, props) {
     return /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
       ref: (0, _utils.mergeRefs)(inputRef, ref),
+      name: name,
       style: {
         pointerEvents: editable ? undefined : 'none'
       }
     }, props));
-  }, [editable]);
+  }, [editable, name]);
   var ToggleCaret = (0, _useToggleCaret.default)(placement);
   var Caret = caretAs !== null && caretAs !== void 0 ? caretAs : ToggleCaret;
 

package/cjs/Picker/utils.js

@@ -101,8 +101,9 @@ function usePickerClassName(props) {
       withClassPrefix = _useClassNames.withClassPrefix,
       merge = _useClassNames.merge;
 
-  var classes = merge(className, withClassPrefix(name, appearance, 'toggle-wrapper', (_withClassPrefix = {}, _withClassPrefix["placement-" + (0, _kebabCase.default)((0, _utils.placementPolyfill)(placement))] = placement, _withClassPrefix['read-only'] = readOnly, _withClassPrefix['has-value'] = hasValue, _withClassPrefix.cleanable = cleanable, _withClassPrefix.block = block, _withClassPrefix.disabled = disabled, _withClassPrefix.countable = countable, _withClassPrefix.plaintext = plaintext, _withClassPrefix)));
-  var usedClassNamePropKeys = Object.keys((0, _omit.default)(props, [].concat(Object.keys(rest || {}), ['disabled', 'readOnly', 'plaintext'])));
+  var classes = merge(className, withClassPrefix(name, appearance, 'toggle-wrapper', (_withClassPrefix = {}, _withClassPrefix["placement-" + (0, _kebabCase.default)((0, _utils.placementPolyfill)(placement))] = placement, _withClassPrefix['read-only'] = readOnly, _withClassPrefix['has-value'] = hasValue, _withClassPrefix.cleanable = cleanable, _withClassPrefix.block = block, _withClassPrefix.disabled = disabled, _withClassPrefix.countable = countable, _withClassPrefix.plaintext = plaintext, _withClassPrefix))); // Those props that're used for composing the className
+
+  var usedClassNamePropKeys = Object.keys((0, _omit.default)(props, [].concat(Object.keys(rest || {}), ['disabled', 'readOnly', 'plaintext', 'name'])));
   return [classes, usedClassNamePropKeys];
 }
 

package/cjs/Uploader/Uploader.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { UploadTriggerProps } from './UploadTrigger';
 import { WithAsProps } from '../@types/common';
 import { UploaderLocale } from '../locales';
+import type { ErrorStatus } from '../utils/ajaxUpload';
 export interface FileType {
     /** File Name */
     name?: string;
@@ -86,8 +87,8 @@ export interface UploaderProps extends WithAsProps, Omit<UploadTriggerProps, 'on
     onReupload?: (file: FileType) => void;
     /** In the file list, click the callback function for the uploaded file */
     onPreview?: (file: FileType, event: React.SyntheticEvent) => void;
-    /** Upload callback function with erro */
-    onError?: (status: any, file: FileType, event: ProgressEvent, xhr: XMLHttpRequest) => void;
+    /** Upload callback function with error */
+    onError?: (status: ErrorStatus, file: FileType, event: ProgressEvent, xhr: XMLHttpRequest) => void;
     /** callback function after successful upload */
     onSuccess?: (response: any, file: FileType, event: ProgressEvent, xhr: XMLHttpRequest) => void;
     /** Callback functions that upload progress change */

package/cjs/locales/index.d.ts

@@ -20,6 +20,7 @@ export { default as zhCN } from './zh_CN';
 export { default as zhTW } from './zh_TW';
 export { default as faIR } from './fa_IR';
 export { default as frFR } from './fr_FR';
+export { default as jaJP } from './ja_JP';
 declare type PickKeys<T> = {
     [keys in keyof T]?: T[keys];
 };

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.nlNL = exports.koKR = exports.kkKZ = exports.itIT = exports.huHU = exports.fiFI = exports.esES = exports.esAR = exports.enUS = exports.enGB = exports.deDE = exports.daDK = exports.arEG = void 0;
+exports.jaJP = 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.huHU = 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"));
 
@@ -87,4 +87,8 @@ exports.faIR = _fa_IR.default;
 
 var _fr_FR = _interopRequireDefault(require("./fr_FR"));
 
-exports.frFR = _fr_FR.default;
+exports.frFR = _fr_FR.default;
+
+var _ja_JP = _interopRequireDefault(require("./ja_JP"));
+
+exports.jaJP = _ja_JP.default;

package/cjs/locales/ja_JP.d.ts

@@ -0,0 +1,117 @@
+declare const _default: {
+    common: {
+        loading: string;
+        emptyMessage: string;
+    };
+    Plaintext: {
+        unfilled: string;
+        notSelected: string;
+        notUploaded: string;
+    };
+    Pagination: {
+        more: string;
+        prev: string;
+        next: string;
+        first: string;
+        last: string;
+        limit: string;
+        total: string;
+        skip: string;
+    };
+    Calendar: {
+        sunday: string;
+        monday: string;
+        tuesday: string;
+        wednesday: string;
+        thursday: string;
+        friday: string;
+        saturday: string;
+        ok: string;
+        today: string;
+        yesterday: string;
+        hours: string;
+        minutes: string;
+        seconds: string;
+        /**
+         * Format of the string is based on Unicode Technical Standard #35:
+         * https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table
+         **/
+        formattedMonthPattern: string;
+        formattedDayPattern: string;
+        dateLocale: any;
+    };
+    DatePicker: {
+        sunday: string;
+        monday: string;
+        tuesday: string;
+        wednesday: string;
+        thursday: string;
+        friday: string;
+        saturday: string;
+        ok: string;
+        today: string;
+        yesterday: string;
+        hours: string;
+        minutes: string;
+        seconds: string;
+        /**
+         * Format of the string is based on Unicode Technical Standard #35:
+         * https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table
+         **/
+        formattedMonthPattern: string;
+        formattedDayPattern: string;
+        dateLocale: any;
+    };
+    DateRangePicker: {
+        last7Days: string;
+        sunday: string;
+        monday: string;
+        tuesday: string;
+        wednesday: string;
+        thursday: string;
+        friday: string;
+        saturday: string;
+        ok: string;
+        today: string;
+        yesterday: string;
+        hours: string;
+        minutes: string;
+        seconds: string;
+        /**
+         * Format of the string is based on Unicode Technical Standard #35:
+         * https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table
+         **/
+        formattedMonthPattern: string;
+        formattedDayPattern: string;
+        dateLocale: any;
+    };
+    Picker: {
+        noResultsText: string;
+        placeholder: string;
+        searchPlaceholder: string;
+        checkAll: string;
+    };
+    InputPicker: {
+        newItem: string;
+        createOption: string;
+    };
+    Uploader: {
+        inited: string;
+        progress: string;
+        error: string;
+        complete: string;
+        emptyFile: string;
+        upload: string;
+    };
+    CloseButton: {
+        closeLabel: string;
+    };
+    Breadcrumb: {
+        expandText: string;
+    };
+    Toggle: {
+        on: string;
+        off: string;
+    };
+};
+export default _default;

package/cjs/locales/ja_JP.js

@@ -0,0 +1,89 @@
+"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 _ja = _interopRequireDefault(require("date-fns/locale/ja"));
+
+var Calendar = {
+  sunday: '日',
+  monday: '月',
+  tuesday: '火',
+  wednesday: '水',
+  thursday: '木',
+  friday: '金',
+  saturday: '土',
+  ok: '確認',
+  today: '今日',
+  yesterday: '昨日',
+  hours: '時',
+  minutes: '分',
+  seconds: '秒',
+
+  /**
+   * Format of the string is based on Unicode Technical Standard #35:
+   * https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table
+   **/
+  formattedMonthPattern: 'yyyy年 MMM',
+  formattedDayPattern: 'yyyy年 MMM dd',
+  dateLocale: _ja.default
+};
+var _default = {
+  common: {
+    loading: '読み込み中...',
+    emptyMessage: 'データはありません。'
+  },
+  Plaintext: {
+    unfilled: '未記入',
+    notSelected: '選択しない',
+    notUploaded: 'アップロードされない'
+  },
+  Pagination: {
+    more: 'もっと見る',
+    prev: '前へ',
+    next: '次へ',
+    first: '最初',
+    last: '最後',
+    limit: '{0} / ページ',
+    total: '合計: {0}',
+    skip: '{0}に逝く'
+  },
+  Calendar: Calendar,
+  DatePicker: (0, _extends2.default)({}, Calendar),
+  DateRangePicker: (0, _extends2.default)({}, Calendar, {
+    last7Days: '直近7日間'
+  }),
+  Picker: {
+    noResultsText: '結果は見つかりませんでした。',
+    placeholder: '選択',
+    searchPlaceholder: '検索',
+    checkAll: 'すべて'
+  },
+  InputPicker: {
+    newItem: '新要素',
+    createOption: 'オプション作成: "{0}"'
+  },
+  Uploader: {
+    inited: '始動',
+    progress: 'アップロード中',
+    error: 'エラー',
+    complete: '終了',
+    emptyFile: '空',
+    upload: 'アップロード'
+  },
+  CloseButton: {
+    closeLabel: '終了'
+  },
+  Breadcrumb: {
+    expandText: 'パス表示'
+  },
+  Toggle: {
+    on: '開く',
+    off: '閉じる'
+  }
+};
+exports.default = _default;

package/cjs/utils/ajaxUpload.d.ts

@@ -1,4 +1,4 @@
-interface ErrorStatus {
+export interface ErrorStatus {
     type: 'timeout' | 'server_error' | 'xhr_error';
     response?: any;
 }