rsuite 5.59.3-alpha.1 → 5.60.1

package/esm/DateRangePicker/DateRangePicker.js

@@ -102,7 +102,8 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     prefix = _useClassNames.prefix;
   var _useCustom = useCustom('DateRangePicker', overrideLocale),
     locale = _useCustom.locale,
-    formatDate = _useCustom.formatDate;
+    formatDate = _useCustom.formatDate; // Default gap between two calendars, if `showOneCalendar` is set, the gap is 0
+  var calendarGap = showOneCalendar ? 0 : 1;
   var rangeFormatStr = "" + formatStr + character + formatStr;
   var _useControlled = useControlled(valueProp, defaultValue !== null && defaultValue !== void 0 ? defaultValue : null),
     value = _useControlled[0],
@@ -129,7 +130,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useState2 = useState((_ref = valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) !== null && _ref !== void 0 ? _ref : []),
     selectedDates = _useState2[0],
     setSelectedDates = _useState2[1]; // The date of the current hover, used to reduce the calculation of `handleMouseMove`
-  var _useState3 = useState(null),
+  var _useState3 = useState(value),
     hoverDateRange = _useState3[0],
     setHoverDateRange = _useState3[1]; // The displayed calendar panel is rendered based on this value.
   var _useState4 = useState(getSafeCalendarDate({
@@ -165,14 +166,14 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var nextValue = dateRange;
 
     // The time should remain the same when the dates in the date range are changed.
-    if (shouldRenderTime(formatStr) && dateRange !== null && dateRange !== void 0 && dateRange.length && eventName !== 'changeTime' && eventName !== 'shortcutSelection') {
+    if (shouldRenderTime(formatStr) && dateRange !== null && dateRange !== void 0 && dateRange.length && (eventName === 'changeDate' || eventName === 'changeMonth')) {
       var _startDate = copyTime({
         from: getCalendarDatetime('start'),
         to: dateRange[0]
       });
       var _endDate = copyTime({
         from: getCalendarDatetime('end'),
-        to: dateRange.length === 1 ? addMonths(_startDate, 1) : dateRange[1]
+        to: dateRange.length === 1 ? addMonths(_startDate, calendarGap) : dateRange[1]
       });
       nextValue = [_startDate, _endDate];
     } else if (dateRange === null && typeof defaultCalendarValue !== 'undefined') {
@@ -182,7 +183,9 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var nextCalendarDate = getSafeCalendarDate({
       value: nextValue,
       calendarKey: calendarKey,
-      allowAameMonth: onlyShowMonth
+      // When only the month is displayed and only one calendar is displayed,
+      // there is no need to add a month and two calendar panels are allowed to display the same month
+      allowSameMonth: onlyShowMonth || showOneCalendar
     });
     setCalendarDate(nextCalendarDate);
     if (onlyShowMonth && eventName === 'changeMonth') {
@@ -331,6 +334,11 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     } else {
       setHoverDateRange([nextSelectDates[0], nextSelectDates[0]]);
     }
+    if (isSelectedIdle) {
+      setActiveCalendarKey('end');
+    } else {
+      setActiveCalendarKey('start');
+    }
     setSelectedDates(nextSelectDates);
     setCalendarDateRange({
       dateRange: nextSelectDates,
@@ -402,7 +410,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (value && value.length) {
       var _startDate3 = value[0],
         endData = value[1];
-      nextCalendarDate = [_startDate3, isSameMonth(_startDate3, endData) ? addMonths(endData, 1) : endData];
+      nextCalendarDate = [_startDate3, isSameMonth(_startDate3, endData) ? addMonths(endData, calendarGap) : endData];
     } else {
       // Reset the date on the calendar to the default date
       nextCalendarDate = getSafeCalendarDate({
@@ -731,11 +739,11 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     format: formatStr,
     placeholder: placeholder ? placeholder : rangeFormatStr,
     disabled: disabled,
-    onChange: handleInputChange,
     readOnly: readOnly || !editable || loading,
     plaintext: plaintext,
-    onKeyDown: handleInputKeyDown,
-    htmlSize: getInputHtmlSize()
+    htmlSize: getInputHtmlSize(),
+    onChange: handleInputChange,
+    onKeyDown: handleInputKeyDown
   })), /*#__PURE__*/React.createElement(PickerIndicator, {
     loading: loading,
     caretAs: caretAs,

package/esm/DateRangePicker/utils.d.ts

@@ -1,8 +1,8 @@
 import { DateRange } from './types';
-export declare function getSafeCalendarDate({ value, calendarKey, allowAameMonth }: {
+export declare function getSafeCalendarDate({ value, calendarKey, allowSameMonth }: {
     value: [] | [Date] | [Date, Date] | null;
     calendarKey?: 'start' | 'end';
-    allowAameMonth?: boolean;
+    allowSameMonth?: boolean;
 }): DateRange;
 export declare const isSameRange: (source: DateRange | null, dest: DateRange | null, format: string) => boolean;
 export declare const getMonthHoverRange: (date: Date) => DateRange;

package/esm/DateRangePicker/utils.js

@@ -5,10 +5,10 @@ export function getSafeCalendarDate(_ref) {
   var value = _ref.value,
     _ref$calendarKey = _ref.calendarKey,
     calendarKey = _ref$calendarKey === void 0 ? 'start' : _ref$calendarKey,
-    allowAameMonth = _ref.allowAameMonth;
+    allowSameMonth = _ref.allowSameMonth;
   // Update calendarDate if the value is not null
   value = (_value = value) !== null && _value !== void 0 ? _value : [];
-  var gap = allowAameMonth ? 0 : 1;
+  var gap = allowSameMonth ? 0 : 1;
   if (value[0] && value[1]) {
     var diffMonth = differenceInCalendarMonths(value[1], value[0]);
     if (calendarKey === 'start') {

package/esm/Form/Form.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FormHTMLAttributes } from 'react';
 import { Schema } from 'schema-typed';
 import FormControl from '../FormControl';
 import FormControlLabel from '../FormControlLabel';
@@ -7,9 +7,9 @@ import FormGroup from '../FormGroup';
 import FormHelpText from '../FormHelpText';
 import { WithAsProps, TypeAttributes, RsRefForwardingComponent } from '../@types/common';
 import { FormInstance } from './hooks/useFormRef';
-export interface FormProps<T = Record<string, any>, errorMsgType = any, E = {
-    [P in keyof T]?: errorMsgType;
-}> extends WithAsProps, Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onChange' | 'onSubmit' | 'onError'> {
+export interface FormProps<V = Record<string, any>, M = any, E = {
+    [P in keyof V]?: M;
+}> extends WithAsProps, Omit<FormHTMLAttributes<HTMLFormElement>, 'onChange' | 'onSubmit' | 'onError' | 'onReset'> {
     /**
      * Set the left and right columns of the layout of the elements within the form。
      *
@@ -23,11 +23,11 @@ export interface FormProps<T = Record<string, any>, errorMsgType = any, E = {
     /**
      * Current value of the input. Creates a controlled component
      */
-    formValue?: T | null;
+    formValue?: V | null;
     /**
      * Initial value
      */
-    formDefaultValue?: T | null;
+    formDefaultValue?: V | null;
     /**
      * Error message of form
      */
@@ -77,7 +77,7 @@ export interface FormProps<T = Record<string, any>, errorMsgType = any, E = {
     /**
      * Callback fired when data changing
      */
-    onChange?: (formValue: T, event?: React.SyntheticEvent) => void;
+    onChange?: (formValue: V, event?: React.SyntheticEvent) => void;
     /**
      * Callback fired when error checking
      */
@@ -87,9 +87,13 @@ export interface FormProps<T = Record<string, any>, errorMsgType = any, E = {
      */
     onCheck?: (formError: E) => void;
     /**
-     * Callback fired when form submit
+     * Callback fired when form submit，only when the form data is validated will trigger
      */
-    onSubmit?: (checkPassed: boolean, event: React.FormEvent<HTMLFormElement>) => void;
+    onSubmit?: (formValue: V | null, event?: React.FormEvent<HTMLFormElement>) => void;
+    /**
+     * Callback fired when form reset
+     */
+    onReset?: (formValue: V | null, event?: React.FormEvent<HTMLFormElement>) => void;
 }
 export interface FormComponent extends RsRefForwardingComponent<'form', FormProps & {
     ref?: React.Ref<FormInstance>;

package/esm/Form/Form.js

@@ -16,6 +16,7 @@ import useSchemaModel from './hooks/useSchemaModel';
 import useFormValidate from './hooks/useFormValidate';
 import useFormValue from './hooks/useFormValue';
 import useFormClassNames from './hooks/useFormClassNames';
+import useFormRef from './hooks/useFormRef';
 var defaultSchema = SchemaModel({});
 
 /**
@@ -46,10 +47,11 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
     children = props.children,
     disabled = props.disabled,
     onSubmit = props.onSubmit,
+    onReset = props.onReset,
     onCheck = props.onCheck,
     onError = props.onError,
     onChange = props.onChange,
-    rest = _objectWithoutPropertiesLoose(props, ["checkTrigger", "classPrefix", "errorFromContext", "formDefaultValue", "formValue", "formError", "fluid", "nestedField", "layout", "model", "readOnly", "plaintext", "className", "children", "disabled", "onSubmit", "onCheck", "onError", "onChange"]);
+    rest = _objectWithoutPropertiesLoose(props, ["checkTrigger", "classPrefix", "errorFromContext", "formDefaultValue", "formValue", "formError", "fluid", "nestedField", "layout", "model", "readOnly", "plaintext", "className", "children", "disabled", "onSubmit", "onReset", "onCheck", "onError", "onChange"]);
   var _useSchemaModel = useSchemaModel(formModel),
     getCombinedModel = _useSchemaModel.getCombinedModel,
     pushFieldRule = _useSchemaModel.pushFieldRule,
@@ -60,9 +62,9 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }),
     formValue = _useFormValue.formValue,
     onRemoveValue = _useFormValue.onRemoveValue,
-    setFieldValue = _useFormValue.setFieldValue;
+    setFieldValue = _useFormValue.setFieldValue,
+    resetFormValue = _useFormValue.resetFormValue;
   var formValidateProps = {
-    ref: ref,
     formValue: formValue,
     getCombinedModel: getCombinedModel,
     onCheck: onCheck,
@@ -74,7 +76,12 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setFieldError = _useFormValidate.setFieldError,
     onRemoveError = _useFormValidate.onRemoveError,
     check = _useFormValidate.check,
-    formRef = _useFormValidate.formRef;
+    checkAsync = _useFormValidate.checkAsync,
+    checkForField = _useFormValidate.checkForField,
+    checkForFieldAsync = _useFormValidate.checkForFieldAsync,
+    cleanErrors = _useFormValidate.cleanErrors,
+    resetErrors = _useFormValidate.resetErrors,
+    cleanErrorForField = _useFormValidate.cleanErrorForField;
   var classes = useFormClassNames({
     classPrefix: classPrefix,
     className: className,
@@ -84,22 +91,58 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
     plaintext: plaintext,
     disabled: disabled
   });
-  var removeFieldValue = useEventCallback(function (name) {
-    var formValue = onRemoveValue(name);
-    onChange === null || onChange === void 0 ? void 0 : onChange(formValue);
+  var submit = useEventCallback(function (event) {
+    // Check the form before submitting
+    if (check()) {
+      onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formValue, event);
+    }
   });
-  var removeFieldError = useEventCallback(function (name) {
-    onRemoveError(name);
+  var reset = useEventCallback(function (event) {
+    resetErrors();
+    onReset === null || onReset === void 0 ? void 0 : onReset(resetFormValue(), event);
   });
   var handleSubmit = useEventCallback(function (event) {
     var _event$preventDefault, _event$stopPropagatio;
     event === null || event === void 0 ? void 0 : (_event$preventDefault = event.preventDefault) === null || _event$preventDefault === void 0 ? void 0 : _event$preventDefault.call(event);
     event === null || event === void 0 ? void 0 : (_event$stopPropagatio = event.stopPropagation) === null || _event$stopPropagatio === void 0 ? void 0 : _event$stopPropagatio.call(event);
+
+    // Prevent submission when the form is disabled, readOnly, or plaintext
     if (disabled || readOnly || plaintext) {
       return;
     }
-    var checkResult = check();
-    onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(checkResult, event);
+    submit();
+  });
+  var handleReset = useEventCallback(function (event) {
+    var _event$preventDefault2, _event$stopPropagatio2;
+    event === null || event === void 0 ? void 0 : (_event$preventDefault2 = event.preventDefault) === null || _event$preventDefault2 === void 0 ? void 0 : _event$preventDefault2.call(event);
+    event === null || event === void 0 ? void 0 : (_event$stopPropagatio2 = event.stopPropagation) === null || _event$stopPropagatio2 === void 0 ? void 0 : _event$stopPropagatio2.call(event);
+
+    // Prevent reset when the form is disabled, readOnly, or plaintext
+    if (disabled || readOnly || plaintext) {
+      return;
+    }
+    reset(event);
+  });
+  var imperativeMethods = {
+    check: check,
+    checkForField: checkForField,
+    checkAsync: checkAsync,
+    checkForFieldAsync: checkForFieldAsync,
+    cleanErrors: cleanErrors,
+    cleanErrorForField: cleanErrorForField,
+    reset: reset,
+    resetErrors: resetErrors,
+    submit: submit
+  };
+  var formRef = useFormRef(ref, {
+    imperativeMethods: imperativeMethods
+  });
+  var removeFieldValue = useEventCallback(function (name) {
+    var formValue = onRemoveValue(name);
+    onChange === null || onChange === void 0 ? void 0 : onChange(formValue);
+  });
+  var removeFieldError = useEventCallback(function (name) {
+    onRemoveError(name);
   });
   var onFieldError = useEventCallback(function (name, checkResult) {
     setFieldError(name, checkResult);
@@ -131,6 +174,7 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement("form", _extends({}, rest, {
     ref: formRef,
     onSubmit: handleSubmit,
+    onReset: handleReset,
     className: classes
   }), /*#__PURE__*/React.createElement(FormProvider, {
     value: formContextValue

package/esm/Form/FormContext.d.ts

@@ -3,8 +3,8 @@ import { TypeAttributes } from '../@types/common';
 import type { Schema, CheckResult } from 'schema-typed';
 import type { FieldRuleType } from './hooks/useSchemaModel';
 declare type RecordAny = Record<string, any>;
-interface TrulyFormContextValue<T = RecordAny, errorMsgType = any, E = {
-    [P in keyof T]?: errorMsgType;
+interface TrulyFormContextValue<T = RecordAny, M = any, E = {
+    [P in keyof T]?: M;
 }> {
     formError: E;
     nestedField: boolean;

package/esm/Form/hooks/useFormRef.d.ts

@@ -31,6 +31,14 @@ export interface FormImperativeMethods<T = Record<string, any>, M = string, E =
      * All error messages are reset, and an initial value can be set
      */
     resetErrors: (formError?: E) => void;
+    /**
+     * Reset form data to initial value and clear all error messages
+     */
+    reset: () => void;
+    /**
+     * Submit form data and verify
+     */
+    submit: () => void;
 }
 export interface FormInstance<T = Record<string, any>, M = string, E = {
     [P in keyof T]?: M;
@@ -43,13 +51,7 @@ export interface FormInstance<T = Record<string, any>, M = string, E = {
 interface FormRefProps<T = Record<string, any>, M = string, E = {
     [P in keyof T]?: M;
 }> {
-    formError: E;
-    nestedField?: boolean;
-    setFormError: (formError: E) => void;
-    check: (callback?: (formError: E) => void) => boolean;
-    checkForField: (fieldName: keyof T, callback?: (checkResult: CheckResult<M>) => void) => boolean;
-    checkAsync: () => Promise<any>;
-    checkForFieldAsync: (fieldName: keyof T) => Promise<CheckResult>;
+    imperativeMethods: FormImperativeMethods<T, M, E>;
 }
 export default function useFormRef(ref: React.Ref<FormInstance>, props: FormRefProps): import("react").RefObject<HTMLFormElement>;
 export {};

package/esm/Form/hooks/useFormRef.js

@@ -1,40 +1,13 @@
 'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
 import { useRef, useImperativeHandle } from 'react';
-import omit from 'lodash/omit';
-import useEventCallback from '../../utils/useEventCallback';
-import { nameToPath } from '../../FormControl/utils';
 export default function useFormRef(ref, props) {
   var rootRef = useRef(null);
-  var formError = props.formError,
-    setFormError = props.setFormError,
-    nestedField = props.nestedField,
-    check = props.check,
-    checkForField = props.checkForField,
-    checkAsync = props.checkAsync,
-    checkForFieldAsync = props.checkForFieldAsync;
-  var cleanErrors = useEventCallback(function () {
-    setFormError({});
-  });
-  var resetErrors = useEventCallback(function (formError) {
-    if (formError === void 0) {
-      formError = {};
-    }
-    setFormError(formError);
-  });
-  var cleanErrorForField = useEventCallback(function (fieldName) {
-    setFormError(omit(formError, [nestedField ? nameToPath(fieldName) : fieldName]));
-  });
+  var imperativeMethods = props.imperativeMethods;
   useImperativeHandle(ref, function () {
-    return {
-      root: rootRef.current,
-      check: check,
-      checkForField: checkForField,
-      checkAsync: checkAsync,
-      checkForFieldAsync: checkForFieldAsync,
-      cleanErrors: cleanErrors,
-      cleanErrorForField: cleanErrorForField,
-      resetErrors: resetErrors
-    };
+    return _extends({
+      root: rootRef.current
+    }, imperativeMethods);
   });
   return rootRef;
 }

package/esm/Form/hooks/useFormValidate.d.ts

@@ -1,9 +1,6 @@
-/// <reference types="react" />
 /// <reference types="lodash" />
 import type { CheckResult } from 'schema-typed';
-import { FormInstance } from './useFormRef';
 export interface FormErrorProps {
-    ref: React.Ref<FormInstance>;
     formValue: any;
     getCombinedModel: () => any;
     onCheck?: (formError: any) => void;
@@ -11,9 +8,14 @@ export interface FormErrorProps {
     nestedField?: boolean;
 }
 export default function useFormValidate(formError: any, props: FormErrorProps): {
-    formRef: import("react").RefObject<HTMLFormElement>;
     formError: any;
     check: (...args: any[]) => any;
+    checkForField: (...args: any[]) => any;
+    checkAsync: (...args: any[]) => any;
+    checkForFieldAsync: (...args: any[]) => any;
+    cleanErrors: (...args: any[]) => any;
+    resetErrors: (...args: any[]) => any;
+    cleanErrorForField: (...args: any[]) => any;
     setFieldError: (fieldName: string, checkResult: string | CheckResult) => any;
     onRemoveError: (name: string) => import("lodash").Omit<any, string>;
 };

package/esm/Form/hooks/useFormValidate.js

@@ -6,10 +6,8 @@ import set from 'lodash/set';
 import { useControlled } from '../../utils';
 import { nameToPath } from '../../FormControl/utils';
 import useEventCallback from '../../utils/useEventCallback';
-import useFormRef from './useFormRef';
 export default function useFormValidate(formError, props) {
-  var ref = props.ref,
-    formValue = props.formValue,
+  var formValue = props.formValue,
     getCombinedModel = props.getCombinedModel,
     onCheck = props.onCheck,
     onError = props.onError,
@@ -133,19 +131,27 @@ export default function useFormValidate(formError, props) {
     onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextFormError);
     return nextFormError;
   }, [formError, nestedField, onCheck, onError, setFormError]);
-  var formRef = useFormRef(ref, {
-    check: check,
-    checkForField: checkForField,
-    checkAsync: checkAsync,
-    checkForFieldAsync: checkForFieldAsync,
-    formError: formError,
-    setFormError: setFormError,
-    nestedField: nestedField
+  var cleanErrors = useEventCallback(function () {
+    setFormError({});
+  });
+  var resetErrors = useEventCallback(function (formError) {
+    if (formError === void 0) {
+      formError = {};
+    }
+    setFormError(formError);
+  });
+  var cleanErrorForField = useEventCallback(function (fieldName) {
+    setFormError(omit(formError, [nestedField ? nameToPath(fieldName) : fieldName]));
   });
   return {
-    formRef: formRef,
     formError: realFormError,
     check: check,
+    checkForField: checkForField,
+    checkAsync: checkAsync,
+    checkForFieldAsync: checkForFieldAsync,
+    cleanErrors: cleanErrors,
+    resetErrors: resetErrors,
+    cleanErrorForField: cleanErrorForField,
     setFieldError: setFieldError,
     onRemoveError: onRemoveError
   };

package/esm/Form/hooks/useFormValue.d.ts

@@ -1,7 +1,14 @@
 /// <reference types="lodash" />
-export default function useFormValue(controlledValue: any, props: any): {
+declare type RecordAny = Record<string, any>;
+interface UseFormValueProps<V = RecordAny> {
+    formDefaultValue: V;
+    nestedField: boolean;
+}
+export default function useFormValue<V>(controlledValue: any, props: UseFormValueProps<V>): {
     formValue: any;
     setFormValue: (value: any) => void;
     setFieldValue: (fieldName: string, fieldValue: any) => any;
     onRemoveValue: (name: string) => import("lodash").Omit<any, string>;
+    resetFormValue: (nextValue?: V) => V;
 };
+export {};

package/esm/Form/hooks/useFormValue.js

@@ -28,10 +28,16 @@ export default function useFormValue(controlledValue, props) {
     setFormValue(formValue);
     return formValue;
   }, [setFormValue]);
+  var resetFormValue = useCallback(function (nextValue) {
+    var value = nextValue || formDefaultValue;
+    setFormValue(value);
+    return value;
+  }, [formDefaultValue, setFormValue]);
   return {
     formValue: formValue,
     setFormValue: setFormValue,
     setFieldValue: setFieldValue,
-    onRemoveValue: onRemoveValue
+    onRemoveValue: onRemoveValue,
+    resetFormValue: resetFormValue
   };
 }

package/esm/InputPicker/InputAutosize.js

@@ -42,9 +42,9 @@ var useInputWidth = function useInputWidth(props, sizerRef, placeholderRef) {
     }
     var width;
     if (placeholder && !value && placeholderRef.current) {
-      width = Math.max(sizerRef.current.scrollWidth, placeholderRef.current.scrollWidth) + 2;
+      width = Math.max(sizerRef.current.scrollWidth, placeholderRef.current.scrollWidth) + 10;
     } else {
-      width = sizerRef.current.scrollWidth + 2;
+      width = sizerRef.current.scrollWidth + 10;
     }
     if (width < minWidth) {
       width = minWidth;

package/esm/InputPicker/InputPicker.d.ts

@@ -1,24 +1,22 @@
 import React from 'react';
 import { PickerComponent, PickerToggleProps } from '../internals/Picker';
+import { type InputItemDataType } from './hooks/useData';
 import type { ItemDataType, FormControlPickerProps } from '../@types/common';
 import type { InputPickerLocale } from '../locales';
 import type { SelectProps } from '../SelectPicker';
-export interface InputItemDataType extends ItemDataType {
-    create?: boolean;
-}
 export declare type ValueType = any;
-export interface InputPickerProps<T = ValueType> extends FormControlPickerProps<T, InputPickerLocale, InputItemDataType>, SelectProps<T>, Pick<PickerToggleProps, 'caretAs' | 'loading'> {
+export interface InputPickerProps<V = ValueType> extends FormControlPickerProps<V, InputPickerLocale, InputItemDataType>, SelectProps<V>, Pick<PickerToggleProps, 'caretAs' | 'loading'> {
     tabIndex?: number;
     /** Settings can create new options */
     creatable?: boolean;
     /** Option to cache value when searching asynchronously */
-    cacheData?: InputItemDataType[];
+    cacheData?: InputItemDataType<V>[];
     /** The `onBlur` attribute for the `input` element. */
     onBlur?: React.FocusEventHandler;
     /** The `onFocus` attribute for the `input` element. */
     onFocus?: React.FocusEventHandler;
     /** Called when the option is created */
-    onCreate?: (value: ValueType, item: ItemDataType, event: React.SyntheticEvent) => void;
+    onCreate?: (value: V, item: ItemDataType, event: React.SyntheticEvent) => void;
     /**
      * Customize whether to display "Create option" action with given textbox value
      *
@@ -27,7 +25,7 @@ export interface InputPickerProps<T = ValueType> extends FormControlPickerProps<
      * @param searchKeyword Value of the textbox
      * @param filteredData The items filtered by the searchKeyword
      */
-    shouldDisplayCreateOption?: (searchKeyword: string, filteredData: InputItemDataType[]) => boolean;
+    shouldDisplayCreateOption?: (searchKeyword: string, filteredData: InputItemDataType<V>[]) => boolean;
 }
 /**
  * Single item selector with text box input.