@douyinfe/semi-ui 2.1.4 → 2.2.0-beta.1

package/lib/es/_utils/index.js

@@ -102,7 +102,7 @@ export const getHighLightTextHTML = _ref => {
   const markEle = option.highlightTag || 'mark';
   const highlightClassName = option.highlightClassName || '';
   const highlightStyle = option.highlightStyle || {};
-  return _mapInstanceProperty(chunks).call(chunks, chunk => {
+  return _mapInstanceProperty(chunks).call(chunks, (chunk, index) => {
     const {
       end,
       start,
@@ -113,7 +113,8 @@ export const getHighLightTextHTML = _ref => {
     if (highlight) {
       return /*#__PURE__*/React.createElement(markEle, {
         style: highlightStyle,
-        className: highlightClassName
+        className: highlightClassName,
+        key: text + index
       }, text);
     } else {
       return text;
@@ -146,11 +147,17 @@ export const registerMediaQuery = (media, _ref2) => {
     }
 
     callInInit && handlerMediaChange(mediaQueryList);
-    mediaQueryList.addEventListener('change', handlerMediaChange);
-    return () => mediaQueryList.removeEventListener('change', handlerMediaChange);
+
+    if (Object.prototype.hasOwnProperty.call(mediaQueryList, 'addEventListener')) {
+      mediaQueryList.addEventListener('change', handlerMediaChange);
+      return () => mediaQueryList.removeEventListener('change', handlerMediaChange);
+    }
+
+    mediaQueryList.addListener(handlerMediaChange);
+    return () => mediaQueryList.removeListener(handlerMediaChange);
   }
 
-  return null;
+  return () => undefined;
 };
 /**
  * Determine whether the incoming element is a built-in icon

package/lib/es/button/Button.d.ts

@@ -7,6 +7,7 @@ export declare type Size = 'default' | 'small' | 'large';
 export declare type Theme = 'solid' | 'borderless' | 'light';
 export declare type Type = 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger';
 export interface ButtonProps {
+    id?: string;
     block?: boolean;
     circle?: boolean;
     disabled?: boolean;

package/lib/es/cascader/index.d.ts

@@ -105,14 +105,18 @@ declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         showRestTagsPopover: PropTypes.Requireable<boolean>;
         restTagsPopoverProps: PropTypes.Requireable<object>;
         max: PropTypes.Requireable<number>;
+        separator: PropTypes.Requireable<string>;
         onExceed: PropTypes.Requireable<(...args: any[]) => any>;
         onClear: PropTypes.Requireable<(...args: any[]) => any>;
         loadData: PropTypes.Requireable<(...args: any[]) => any>;
         onLoad: PropTypes.Requireable<(...args: any[]) => any>;
         loadedKeys: PropTypes.Requireable<any[]>;
         disableStrictly: PropTypes.Requireable<boolean>;
+        leafOnly: PropTypes.Requireable<boolean>;
+        enableLeafClick: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
+        leafOnly: boolean;
         arrowIcon: JSX.Element;
         stopPropagation: boolean;
         motion: boolean;
@@ -129,6 +133,7 @@ declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         filterLeafOnly: boolean;
         showRestTagsPopover: boolean;
         restTagsPopoverProps: {};
+        separator: string;
         size: "default";
         treeNodeFilterProp: "label";
         displayProp: "label";
@@ -138,6 +143,7 @@ declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         onClear: (...args: any[]) => void;
         onDropdownVisibleChange: (...args: any[]) => void;
         onListScroll: (...args: any[]) => void;
+        enableLeafClick: boolean;
     };
     options: any;
     isEmpty: boolean;
@@ -145,6 +151,7 @@ declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
     triggerRef: React.RefObject<HTMLDivElement>;
     optionsRef: React.RefObject<any>;
     clickOutsideHandler: any;
+    mergeType: string;
     constructor(props: CascaderProps);
     get adapter(): CascaderAdapter;
     static getDerivedStateFromProps(props: CascaderProps, prevState: CascaderState): Partial<CascaderState>;

package/lib/es/cascader/index.js

@@ -1,3 +1,4 @@
+import _flatten from "lodash/flatten";
 import _noop from "lodash/noop";
 import _isNumber from "lodash/isNumber";
 import _isFunction from "lodash/isFunction";
@@ -20,7 +21,7 @@ import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/cascader/c
 import { numbers as popoverNumbers } from '@douyinfe/semi-foundation/lib/es/popover/constants';
 import '@douyinfe/semi-foundation/lib/es/cascader/cascader.css';
 import { IconClear, IconChevronDown } from '@douyinfe/semi-icons';
-import { findKeysForValues, convertDataToEntities } from '@douyinfe/semi-foundation/lib/es/cascader/util';
+import { findKeysForValues, convertDataToEntities, calcMergeType } from '@douyinfe/semi-foundation/lib/es/cascader/util';
 import { calcCheckedKeys, normalizeKeyList, calcDisabledKeys } from '@douyinfe/semi-foundation/lib/es/tree/treeUtil';
 import ConfigContext from '../configProvider/context';
 import BaseComponent from '../_base/baseComponent';
@@ -122,6 +123,7 @@ class Cascader extends BaseComponent {
         dropdownStyle,
         loadData,
         emptyContent,
+        separator,
         topSlot,
         bottomSlot,
         showNext,
@@ -137,6 +139,7 @@ class Cascader extends BaseComponent {
       }, topSlot, /*#__PURE__*/React.createElement(Item, {
         activeKeys: activeKeys,
         selectedKeys: selectedKeys,
+        separator: separator,
         loadedKeys: loadedKeys,
         loadingKeys: loadingKeys,
         onItemClick: this.handleItemClick,
@@ -186,9 +189,9 @@ class Cascader extends BaseComponent {
       } = this.props;
       const {
         checkedKeys,
-        mergedCheckedKeys
+        resolvedCheckedKeys
       } = this.state;
-      const realKeys = autoMergeValue ? mergedCheckedKeys : checkedKeys;
+      const realKeys = this.mergeType === strings.NONE_MERGE_TYPE ? checkedKeys : resolvedCheckedKeys;
       const displayTag = [];
       const hiddenTag = [];
 
@@ -278,20 +281,23 @@ class Cascader extends BaseComponent {
       const {
         disabled,
         triggerRender,
-        multiple,
-        autoMergeValue
+        multiple
       } = this.props;
       const {
         selectedKeys,
         inputValue,
         inputPlaceHolder,
-        mergedCheckedKeys,
+        resolvedCheckedKeys,
         checkedKeys
       } = this.state;
       let realValue;
 
       if (multiple) {
-        realValue = autoMergeValue ? mergedCheckedKeys : checkedKeys;
+        if (this.mergeType === strings.NONE_MERGE_TYPE) {
+          realValue = checkedKeys;
+        } else {
+          realValue = resolvedCheckedKeys;
+        }
       } else {
         realValue = [...selectedKeys][0];
       }
@@ -471,8 +477,8 @@ class Cascader extends BaseComponent {
       /* Key of half checked node, when multiple */
       halfCheckedKeys: new _Set([]),
 
-      /* Auto merged checkedKeys, when multiple */
-      mergedCheckedKeys: new _Set([]),
+      /* Auto merged checkedKeys or leaf checkedKeys, when multiple */
+      resolvedCheckedKeys: new _Set([]),
 
       /* Keys of loaded item */
       loadedKeys: new _Set(),
@@ -485,6 +491,7 @@ class Cascader extends BaseComponent {
     };
     this.options = {};
     this.isEmpty = false;
+    this.mergeType = calcMergeType(props.autoMergeValue, props.leafOnly);
     this.inputRef = /*#__PURE__*/React.createRef();
     this.triggerRef = /*#__PURE__*/React.createRef();
     this.optionsRef = /*#__PURE__*/React.createRef();
@@ -627,7 +634,9 @@ class Cascader extends BaseComponent {
       multiple,
       value,
       defaultValue,
-      onChangeWithObject
+      onChangeWithObject,
+      leafOnly,
+      autoMergeValue
     } = props;
     const {
       prevProps
@@ -692,24 +701,19 @@ class Cascader extends BaseComponent {
           realKeys = formatKeys;
         }
 
-        let checkedKeys = new _Set([]);
-        let halfCheckedKeys = new _Set([]);
-
-        _forEachInstanceProperty(realKeys).call(realKeys, v => {
-          const calRes = calcCheckedKeys(v, keyEntities);
-          checkedKeys = new _Set([...checkedKeys, ...calRes.checkedKeys]);
-          halfCheckedKeys = new _Set([...halfCheckedKeys, ...calRes.halfCheckedKeys]);
-        }); // disableStrictly
-
+        const calRes = calcCheckedKeys(_flatten(realKeys), keyEntities);
+        const checkedKeys = new _Set(calRes.checkedKeys);
+        const halfCheckedKeys = new _Set(calRes.halfCheckedKeys); // disableStrictly
 
         if (props.disableStrictly) {
           newState.disabledKeys = calcDisabledKeys(keyEntities);
         }
 
+        const isLeafOnlyMerge = calcMergeType(autoMergeValue, leafOnly) === strings.LEAF_ONLY_MERGE_TYPE;
         newState.prevProps = props;
         newState.checkedKeys = checkedKeys;
         newState.halfCheckedKeys = halfCheckedKeys;
-        newState.mergedCheckedKeys = new _Set(normalizeKeyList(checkedKeys, keyEntities));
+        newState.resolvedCheckedKeys = new _Set(normalizeKeyList(checkedKeys, keyEntities, isLeafOnlyMerge));
       }
     }
 
@@ -743,7 +747,6 @@ class Cascader extends BaseComponent {
     const {
       size,
       disabled,
-      autoMergeValue,
       placeholder,
       maxTagCount,
       showRestTagsPopover,
@@ -753,11 +756,11 @@ class Cascader extends BaseComponent {
       inputValue,
       checkedKeys,
       keyEntities,
-      mergedCheckedKeys
+      resolvedCheckedKeys
     } = this.state;
     const tagInputcls = cls("".concat(prefixcls, "-tagInput-wrapper"));
     const tagValue = [];
-    const realKeys = autoMergeValue ? mergedCheckedKeys : checkedKeys;
+    const realKeys = this.mergeType === strings.NONE_MERGE_TYPE ? checkedKeys : resolvedCheckedKeys;
 
     _forEachInstanceProperty(_context3 = [...realKeys]).call(_context3, checkedKey => {
       if (!_isEmpty(keyEntities[checkedKey])) {
@@ -907,14 +910,18 @@ Cascader.propTypes = {
   showRestTagsPopover: PropTypes.bool,
   restTagsPopoverProps: PropTypes.object,
   max: PropTypes.number,
+  separator: PropTypes.string,
   onExceed: PropTypes.func,
   onClear: PropTypes.func,
   loadData: PropTypes.func,
   onLoad: PropTypes.func,
   loadedKeys: PropTypes.array,
-  disableStrictly: PropTypes.bool
+  disableStrictly: PropTypes.bool,
+  leafOnly: PropTypes.bool,
+  enableLeafClick: PropTypes.bool
 };
 Cascader.defaultProps = {
+  leafOnly: false,
   arrowIcon: /*#__PURE__*/React.createElement(IconChevronDown, null),
   stopPropagation: true,
   motion: true,
@@ -931,6 +938,7 @@ Cascader.defaultProps = {
   filterLeafOnly: true,
   showRestTagsPopover: false,
   restTagsPopoverProps: {},
+  separator: ' / ',
   size: 'default',
   treeNodeFilterProp: 'label',
   displayProp: 'label',
@@ -939,6 +947,7 @@ Cascader.defaultProps = {
   onExceed: _noop,
   onClear: _noop,
   onDropdownVisibleChange: _noop,
-  onListScroll: _noop
+  onListScroll: _noop,
+  enableLeafClick: false
 };
 export default Cascader;

package/lib/es/cascader/item.d.ts

@@ -33,6 +33,7 @@ export interface CascaderItemProps {
     emptyContent: React.ReactNode;
     loadData: (selectOptions: CascaderData[]) => Promise<void>;
     data: Array<Data | Entity>;
+    separator: string;
     multiple: boolean;
     checkedKeys: Set<string>;
     halfCheckedKeys: Set<string>;
@@ -50,6 +51,7 @@ export default class Item extends PureComponent<CascaderItemProps> {
         checkedKeys: PropTypes.Requireable<object>;
         halfCheckedKeys: PropTypes.Requireable<object>;
         onItemCheckboxClick: PropTypes.Requireable<(...args: any[]) => any>;
+        separator: PropTypes.Requireable<string>;
         keyword: PropTypes.Requireable<string>;
     };
     static defaultProps: {

package/lib/es/cascader/item.js

@@ -117,7 +117,8 @@ export default class Item extends PureComponent {
     this.highlight = searchText => {
       const content = [];
       const {
-        keyword
+        keyword,
+        separator
       } = this.props;
 
       _forEachInstanceProperty(searchText).call(searchText, (item, idx) => {
@@ -141,7 +142,7 @@ export default class Item extends PureComponent {
         }
 
         if (idx !== searchText.length - 1) {
-          content.push(' / ');
+          content.push(separator);
         }
       });
 
@@ -313,6 +314,7 @@ Item.propTypes = {
   checkedKeys: PropTypes.object,
   halfCheckedKeys: PropTypes.object,
   onItemCheckboxClick: PropTypes.func,
+  separator: PropTypes.string,
   keyword: PropTypes.string
 };
 Item.defaultProps = {

package/lib/es/checkbox/checkbox.js

@@ -84,7 +84,8 @@ class Checkbox extends BaseComponent {
       onMouseEnter,
       onMouseLeave,
       extra,
-      value
+      value,
+      id
     } = this.props;
     const {
       checked
@@ -142,6 +143,7 @@ class Checkbox extends BaseComponent {
     return /*#__PURE__*/React.createElement("span", {
       style: style,
       className: wrapper,
+      id: id,
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave,
       onClick: this.handleChange

package/lib/es/checkbox/checkboxGroup.d.ts

@@ -18,6 +18,7 @@ export declare type CheckboxGroupProps = {
     style?: React.CSSProperties;
     className?: string;
     type?: CheckboxType;
+    id?: string;
 };
 export declare type CheckboxGroupState = {
     value?: any[];

package/lib/es/checkbox/checkboxGroup.js

@@ -67,6 +67,7 @@ class CheckboxGroup extends BaseComponent {
       prefixCls,
       direction,
       className,
+      id,
       style,
       type
     } = this.props;
@@ -118,7 +119,8 @@ class CheckboxGroup extends BaseComponent {
 
     return /*#__PURE__*/React.createElement("div", {
       className: prefixClsDisplay,
-      style: style
+      style: style,
+      id: id
     }, /*#__PURE__*/React.createElement(Context.Provider, {
       value: {
         checkboxGroup: {

package/lib/es/datePicker/monthsGrid.d.ts

@@ -81,6 +81,7 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
     renderMonth(month: Date, panelType: PanelType): JSX.Element;
     handleWeeksRowNumChange: (weeksRowNum: number, panelType: PanelType) => void;
     reselect: () => void;
+    getYAMOpenType: () => "left" | "right" | "none" | "both";
     renderTimePicker(panelType: PanelType, panelDetail: MonthInfo): JSX.Element;
     renderYearAndMonth(panelType: PanelType, panelDetail: MonthInfo): JSX.Element;
     renderSwitch(panelType: PanelType): JSX.Element;

package/lib/es/datePicker/monthsGrid.js

@@ -124,6 +124,10 @@ export default class MonthsGrid extends BaseComponent {
       });
     };
 
+    this.getYAMOpenType = () => {
+      return this.foundation.getYAMOpenType();
+    };
+
     let nowDate = _Array$isArray(props.defaultPickerValue) ? props.defaultPickerValue[0] : props.defaultPickerValue;
     const validFormat = props.format || getDefaultFormatTokenByType(props.type);
 
@@ -615,9 +619,11 @@ export default class MonthsGrid extends BaseComponent {
       content = 'year month';
     }
 
+    const yearOpenType = this.getYAMOpenType();
     return /*#__PURE__*/React.createElement("div", {
       className: monthGridCls,
       "x-type": type,
+      "x-panel-yearandmonth-open-type": yearOpenType,
       ref: current => this.cacheRefCurrent('monthGrid', current)
     }, content);
   }

package/lib/es/datePicker/navigation.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import IconButton from '../iconButton';
 import Button from '../button';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/datePicker/constants';
-import { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';
+import { IconChevronLeft, IconChevronRight, IconDoubleChevronLeft, IconDoubleChevronRight } from '@douyinfe/semi-icons';
 const prefixCls = cssClasses.NAVIGATION;
 export default class Navigation extends PureComponent {
   constructor(props) {
@@ -20,6 +20,8 @@ export default class Navigation extends PureComponent {
       onMonthClick,
       onNextMonth,
       onPrevMonth,
+      onPrevYear,
+      onNextYear,
       density,
       shouldBimonthSwitch,
       panelType
@@ -27,37 +29,75 @@ export default class Navigation extends PureComponent {
     const btnTheme = 'borderless';
     const iconBtnSize = density === 'compact' ? 'default' : 'large';
     const btnNoHorizontalPadding = true;
-    const buttonSize = density === 'compact' ? 'small' : 'default'; // Enable dual-panel synchronous switching, and the current panel is the left panel
+    const buttonSize = density === 'compact' ? 'small' : 'default';
+    const isLeftPanel = panelType === strings.PANEL_TYPE_LEFT;
+    const isRightPanel = panelType === strings.PANEL_TYPE_RIGHT; // syncSwitchMonth and the current panel is the left
 
-    const bimonthSwitchWithLeftPanel = shouldBimonthSwitch && panelType === strings.PANEL_TYPE_LEFT; // Enable dual-panel synchronous switching, and the current panel is the right panel
+    const hiddenLeftPanelRightButtons = shouldBimonthSwitch && isLeftPanel; // syncSwitchMonth and the current panel is the right
+
+    const hiddenRightPanelLeftButtons = shouldBimonthSwitch && isRightPanel; // `visibility: hidden` will keep the icon in position
+
+    const leftButtonStyle = {};
+    const rightButtonStyle = {};
+
+    if (hiddenRightPanelLeftButtons) {
+      leftButtonStyle.visibility = 'hidden';
+    }
+
+    if (hiddenLeftPanelRightButtons) {
+      rightButtonStyle.visibility = 'hidden';
+    }
 
-    const bimonthSwitchWithRightPanel = shouldBimonthSwitch && panelType === strings.PANEL_TYPE_RIGHT;
     const ref = forwardRef || this.navRef;
     return /*#__PURE__*/React.createElement("div", {
       className: prefixCls,
       ref: ref
-    }, !bimonthSwitchWithRightPanel && /*#__PURE__*/React.createElement(IconButton, {
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      key: "double-chevron-left",
+      icon: /*#__PURE__*/React.createElement(IconDoubleChevronLeft, {
+        size: iconBtnSize
+      }),
+      size: buttonSize,
+      theme: btnTheme,
+      noHorizontalPadding: btnNoHorizontalPadding,
+      onClick: onPrevYear,
+      style: leftButtonStyle
+    }), /*#__PURE__*/React.createElement(IconButton, {
+      key: "chevron-left",
       icon: /*#__PURE__*/React.createElement(IconChevronLeft, {
         size: iconBtnSize
       }),
       size: buttonSize,
       onClick: onPrevMonth,
       theme: btnTheme,
-      noHorizontalPadding: btnNoHorizontalPadding
+      noHorizontalPadding: btnNoHorizontalPadding,
+      style: leftButtonStyle
     }), /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-month")
     }, /*#__PURE__*/React.createElement(Button, {
       onClick: onMonthClick,
       theme: btnTheme,
       size: buttonSize
-    }, /*#__PURE__*/React.createElement("span", null, monthText))), !bimonthSwitchWithLeftPanel && /*#__PURE__*/React.createElement(IconButton, {
+    }, /*#__PURE__*/React.createElement("span", null, monthText))), /*#__PURE__*/React.createElement(IconButton, {
+      key: "chevron-right",
       icon: /*#__PURE__*/React.createElement(IconChevronRight, {
         size: iconBtnSize
       }),
       size: buttonSize,
       onClick: onNextMonth,
       theme: btnTheme,
-      noHorizontalPadding: btnNoHorizontalPadding
+      noHorizontalPadding: btnNoHorizontalPadding,
+      style: rightButtonStyle
+    }), /*#__PURE__*/React.createElement(IconButton, {
+      key: "double-chevron-right",
+      icon: /*#__PURE__*/React.createElement(IconDoubleChevronRight, {
+        size: iconBtnSize
+      }),
+      size: buttonSize,
+      theme: btnTheme,
+      noHorizontalPadding: btnNoHorizontalPadding,
+      onClick: onNextYear,
+      style: rightButtonStyle
     }));
   }
 

package/lib/es/descriptions/item.js

@@ -33,7 +33,7 @@ export default class Item extends PureComponent {
       className: "".concat(prefixCls, "-item")
     }, /*#__PURE__*/React.createElement("span", {
       className: keyCls
-    }, "".concat(itemKey, ":")), /*#__PURE__*/React.createElement("span", {
+    }, itemKey, ":"), /*#__PURE__*/React.createElement("span", {
       className: valCls
     }, typeof children === 'function' ? children() : children))) : /*#__PURE__*/React.createElement("tr", {
       className: className,

package/lib/es/empty/index.d.ts

@@ -31,8 +31,8 @@ export default class Empty extends BaseComponent<EmptyProps, EmptyState> {
     constructor(props: EmptyProps);
     componentDidMount(): void;
     componentWillUnmount(): void;
-    observe(mutationsList: any): void;
-    updateMode(): void;
+    observe: (mutationsList: any) => void;
+    updateMode: () => void;
     render(): JSX.Element;
 }
 export {};

package/lib/es/empty/index.js

@@ -10,6 +10,25 @@ const prefixCls = cssClasses.PREFIX;
 export default class Empty extends BaseComponent {
   constructor(props) {
     super(props);
+
+    this.observe = mutationsList => {
+      for (const mutation of mutationsList) {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'theme-mode') {
+          this.updateMode();
+        }
+      }
+    };
+
+    this.updateMode = () => {
+      const val = this.body.getAttribute('theme-mode');
+
+      if (val !== this.state.mode) {
+        this.setState({
+          mode: val
+        });
+      }
+    };
+
     this.state = {
       mode: null
     };
@@ -33,24 +52,6 @@ export default class Empty extends BaseComponent {
     this.observer && this.observer.disconnect();
   }
 
-  observe(mutationsList) {
-    for (const mutation of mutationsList) {
-      if (mutation.type === 'attributes' && mutation.attributeName === 'theme-mode') {
-        this.updateMode();
-      }
-    }
-  }
-
-  updateMode() {
-    const val = this.body.getAttribute('theme-mode');
-
-    if (val !== this.state.mode) {
-      this.setState({
-        mode: val
-      });
-    }
-  }
-
   render() {
     var _context;
 

package/lib/es/form/baseForm.d.ts

@@ -53,6 +53,7 @@ declare class Form extends BaseComponent<BaseFormProps, BaseFormState> {
     static TextArea: React.ComponentType<import("utility-types").Subtract<Omit<import("../input").TextAreaProps, "forwardRef"> & React.RefAttributes<HTMLTextAreaElement>, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps>;
     static InputNumber: React.ComponentType<import("utility-types").Subtract<import("../inputNumber").InputNumberProps & React.RefAttributes<HTMLInputElement>, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps>;
     static Select: React.ComponentType<import("utility-types").Subtract<{
+        id?: string;
         autoFocus?: boolean;
         arrowIcon?: React.ReactNode;
         defaultValue?: string | number | any[] | Record<string, any>;
@@ -89,6 +90,11 @@ declare class Form extends BaseComponent<BaseFormProps, BaseFormState> {
         suffix?: React.ReactNode;
         prefix?: React.ReactNode;
         insetLabel?: React.ReactNode;
+        inputProps?: import("utility-types").Subtract<import("../input").InputProps, {
+            value?: React.ReactText;
+            onFocus?: (e: React.FocusEvent<HTMLInputElement, Element>) => void;
+            onChange?: (value: string, e: React.ChangeEvent<HTMLInputElement>) => void;
+        }>;
         showClear?: boolean;
         showArrow?: boolean;
         renderSelectedItem?: import("../select").RenderSelectedItemFn;

package/lib/es/form/field.d.ts

@@ -3,6 +3,7 @@ declare const FormInput: import("react").ComponentType<import("utility-types").S
 declare const FormInputNumber: import("react").ComponentType<import("utility-types").Subtract<import("../inputNumber/index").InputNumberProps & import("react").RefAttributes<HTMLInputElement>, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps>;
 declare const FormTextArea: import("react").ComponentType<import("utility-types").Subtract<Omit<import("../input/textarea").TextAreaProps, "forwardRef"> & import("react").RefAttributes<HTMLTextAreaElement>, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps>;
 declare const FormSelect: import("react").ComponentType<import("utility-types").Subtract<{
+    id?: string;
     autoFocus?: boolean;
     arrowIcon?: import("react").ReactNode;
     defaultValue?: string | number | any[] | Record<string, any>;
@@ -39,6 +40,11 @@ declare const FormSelect: import("react").ComponentType<import("utility-types").
     suffix?: import("react").ReactNode;
     prefix?: import("react").ReactNode;
     insetLabel?: import("react").ReactNode;
+    inputProps?: import("utility-types").Subtract<import("../input/index").InputProps, {
+        value?: import("react").ReactText;
+        onFocus?: (e: import("react").FocusEvent<HTMLInputElement, Element>) => void;
+        onChange?: (value: string, e: import("react").ChangeEvent<HTMLInputElement>) => void;
+    }>;
     showClear?: boolean;
     showArrow?: boolean;
     renderSelectedItem?: import("../select/index").RenderSelectedItemFn;

package/lib/es/form/hoc/withField.js

@@ -70,7 +70,9 @@ function withField(Component, opts) {
     // Return without injection, eg: <Checkbox> / <Radio> inside CheckboxGroup/RadioGroup
 
     if (!shouldInject) {
-      return /*#__PURE__*/React.createElement(Component, _Object$assign({}, rest));
+      return /*#__PURE__*/React.createElement(Component, _Object$assign({}, rest, {
+        ref: ref
+      }));
     } // grab formState from context
 
 

package/lib/es/locale/source/es.d.ts

@@ -0,0 +1,7 @@
+import { Locale } from '../interface';
+/**
+ * [i18n-Spanish(es)]
+ *
+ */
+declare const locale: Locale;
+export default locale;