rsuite 5.75.0 → 6.0.0-canary-20241227

package/esm/Form/hooks/useFormValue.js

@@ -1,43 +1,46 @@
 'use client';
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { useRef, useCallback } from 'react';
 import omit from 'lodash/omit';
 import set from 'lodash/set';
 import { useControlled } from "../../internals/hooks/index.js";
 export default function useFormValue(controlledValue, props) {
-  var formDefaultValue = props.formDefaultValue,
-    nestedField = props.nestedField;
-  var _useControlled = useControlled(controlledValue, formDefaultValue),
-    formValue = _useControlled[0],
-    setFormValue = _useControlled[1];
-  var realFormValueRef = useRef(formValue);
+  const {
+    formDefaultValue,
+    nestedField
+  } = props;
+  const [formValue, setFormValue] = useControlled(controlledValue, formDefaultValue);
+  const realFormValueRef = useRef(formValue);
   realFormValueRef.current = formValue;
-  var setFieldValue = useCallback(function (fieldName, fieldValue) {
-    var _extends2;
-    var nextFormError = nestedField ? set(_extends({}, formValue), fieldName, fieldValue) : _extends({}, formValue, (_extends2 = {}, _extends2[fieldName] = fieldValue, _extends2));
+  const setFieldValue = useCallback((fieldName, fieldValue) => {
+    const nextFormError = nestedField ? set({
+      ...formValue
+    }, fieldName, fieldValue) : {
+      ...formValue,
+      [fieldName]: fieldValue
+    };
     setFormValue(nextFormError);
     return nextFormError;
   }, [formValue, nestedField, setFormValue]);
-  var onRemoveValue = useCallback(function (name) {
+  const onRemoveValue = useCallback(name => {
     /**
      * when this function is called when the children component is unmount,
      * it's an old render frame so use Ref to get future value
      */
-    var formValue = omit(realFormValueRef.current, [name]);
+    const formValue = omit(realFormValueRef.current, [name]);
     realFormValueRef.current = formValue;
     setFormValue(formValue);
     return formValue;
   }, [setFormValue]);
-  var resetFormValue = useCallback(function (nextValue) {
-    var value = nextValue || formDefaultValue;
+  const resetFormValue = useCallback(nextValue => {
+    const value = nextValue || formDefaultValue;
     setFormValue(value);
     return value;
   }, [formDefaultValue, setFormValue]);
   return {
-    formValue: formValue,
-    setFormValue: setFormValue,
-    setFieldValue: setFieldValue,
-    onRemoveValue: onRemoveValue,
-    resetFormValue: resetFormValue
+    formValue,
+    setFormValue,
+    setFieldValue,
+    onRemoveValue,
+    resetFormValue
   };
 }

package/esm/Form/hooks/useSchemaModel.js

@@ -24,16 +24,17 @@ import { useRef, useCallback } from 'react';
  * ```
  */
 function unflattenSchemaObject(schema) {
-  var result = {};
-  var $type = Symbol('schema-type');
-  Object.keys(schema).forEach(function (key) {
+  const result = {};
+  const $type = Symbol('schema-type');
+  Object.keys(schema).forEach(key => {
     if (key.includes('.')) {
-      var keys = key.split('.');
-      var lastKey = keys.pop() || '';
-      var current = result;
-      keys.forEach(function (subKey) {
-        var _ref;
-        current[subKey] = current[subKey] || (_ref = {}, _ref[$type] = 'object-type', _ref);
+      const keys = key.split('.');
+      const lastKey = keys.pop() || '';
+      let current = result;
+      keys.forEach(subKey => {
+        current[subKey] = current[subKey] || {
+          [$type]: 'object-type'
+        };
         current = current[subKey];
       });
       current[lastKey] = schema[key];
@@ -42,7 +43,7 @@ function unflattenSchemaObject(schema) {
     }
   });
   function convertToShape(obj) {
-    Object.keys(obj).forEach(function (key) {
+    Object.keys(obj).forEach(key => {
       var _obj$key;
       if (((_obj$key = obj[key]) === null || _obj$key === void 0 ? void 0 : _obj$key[$type]) === 'object-type') {
         delete obj[key][$type];
@@ -54,42 +55,39 @@ function unflattenSchemaObject(schema) {
   return convertToShape(result);
 }
 function useSchemaModel(formModel, nestedField) {
-  var subRulesRef = useRef([]);
-  var pushFieldRule = useCallback(function (name, fieldRule) {
+  const subRulesRef = useRef([]);
+  const pushFieldRule = useCallback((name, fieldRule) => {
     subRulesRef.current.push({
-      name: name,
-      fieldRule: fieldRule
+      name,
+      fieldRule
     });
   }, []);
-  var removeFieldRule = useCallback(function (name) {
-    var index = subRulesRef.current.findIndex(function (v) {
-      return v.name === name;
-    });
+  const removeFieldRule = useCallback(name => {
+    const index = subRulesRef.current.findIndex(v => v.name === name);
     subRulesRef.current.splice(index, 1);
   }, []);
-  var getCombinedModel = useCallback(function () {
-    var realSubRules = subRulesRef.current.filter(function (v) {
-      return Boolean(v.fieldRule.current);
-    });
+  const getCombinedModel = useCallback(() => {
+    const realSubRules = subRulesRef.current.filter(v => Boolean(v.fieldRule.current));
 
     // If there is no sub rule, return the original form model
     if (realSubRules.length === 0) {
       return formModel;
     }
-    var subRuleObject = realSubRules.map(function (_ref2) {
-      var _ref3;
-      var name = _ref2.name,
-        fieldRule = _ref2.fieldRule;
-      return _ref3 = {}, _ref3[name] = fieldRule.current, _ref3;
-    }).reduce(function (a, b) {
-      return Object.assign(a, b);
-    }, {});
+    const subRuleObject = realSubRules.map(_ref => {
+      let {
+        name,
+        fieldRule
+      } = _ref;
+      return {
+        [name]: fieldRule.current
+      };
+    }).reduce((a, b) => Object.assign(a, b), {});
     return SchemaModel.combine(formModel, SchemaModel(nestedField ? unflattenSchemaObject(subRuleObject) : subRuleObject));
   }, [formModel, nestedField]);
   return {
-    getCombinedModel: getCombinedModel,
-    pushFieldRule: pushFieldRule,
-    removeFieldRule: removeFieldRule
+    getCombinedModel,
+    pushFieldRule,
+    removeFieldRule
   };
 }
 export default useSchemaModel;

package/esm/FormControl/FormControl.d.ts

@@ -47,7 +47,7 @@ export interface FormControlProps<P = any, ValueType = any> extends WithAsProps,
 interface FormControlComponent extends React.FC<FormControlProps> {
     <Accepter extends React.ElementType = typeof Input>(props: FormControlProps & {
         accepter?: Accepter;
-    } & React.ComponentPropsWithRef<Accepter>): React.ReactElement | null;
+    } & React.ComponentPropsWithRef<Accepter>): any;
 }
 /**
  * The `<Form.Control>` component is used to wrap the components that need to be validated.

package/esm/FormControl/FormControl.js

@@ -1,11 +1,6 @@
 'use client';
-import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _templateObject;
-var _excluded = ["as", "accepter", "classPrefix", "checkAsync", "checkTrigger", "errorPlacement", "errorMessage", "name", "value", "readOnly", "plaintext", "disabled", "onChange", "onBlur", "defaultValue", "shouldResetWithUnmount", "rule", "id"];
 import React, { useContext } from 'react';
-import PropTypes from 'prop-types';
 import Input from "../Input/index.js";
 import FormErrorMessage from "../FormErrorMessage/index.js";
 import FormContext, { FormValueContext } from "../Form/FormContext.js";
@@ -15,7 +10,6 @@ import Toggle from "../Toggle/index.js";
 import { useClassNames } from "../internals/hooks/index.js";
 import { useFormGroup } from "../FormGroup/index.js";
 import { useWillUnmount, useEventCallback } from "../internals/hooks/index.js";
-import { oneOf } from "../internals/propTypes/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 
 /**
@@ -26,109 +20,113 @@ import { useCustom } from "../CustomProvider/index.js";
  * The `<Form.Control>` component is used to wrap the components that need to be validated.
  * @see https://rsuitejs.com/components/form/
  */
-var FormControl = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _accepterProps;
-  var _useCustom = useCustom('FormControl', props),
-    propsWithDefaults = _useCustom.propsWithDefaults;
-  var _useContext = useContext(FormContext),
-    readOnlyContext = _useContext.readOnly,
-    plaintextContext = _useContext.plaintext,
-    disabledContext = _useContext.disabled,
-    errorFromContext = _useContext.errorFromContext,
-    formError = _useContext.formError,
-    nestedField = _useContext.nestedField,
-    removeFieldValue = _useContext.removeFieldValue,
-    removeFieldError = _useContext.removeFieldError,
-    onFieldChange = _useContext.onFieldChange,
-    contextCheckTrigger = _useContext.checkTrigger,
-    checkFieldForNextValue = _useContext.checkFieldForNextValue,
-    checkFieldAsyncForNextValue = _useContext.checkFieldAsyncForNextValue;
-  var _propsWithDefaults$as = propsWithDefaults.as,
-    Component = _propsWithDefaults$as === void 0 ? 'div' : _propsWithDefaults$as,
-    _propsWithDefaults$ac = propsWithDefaults.accepter,
-    AccepterComponent = _propsWithDefaults$ac === void 0 ? Input : _propsWithDefaults$ac,
-    _propsWithDefaults$cl = propsWithDefaults.classPrefix,
-    classPrefix = _propsWithDefaults$cl === void 0 ? 'form-control' : _propsWithDefaults$cl,
-    checkAsync = propsWithDefaults.checkAsync,
-    checkTrigger = propsWithDefaults.checkTrigger,
-    _propsWithDefaults$er = propsWithDefaults.errorPlacement,
-    errorPlacement = _propsWithDefaults$er === void 0 ? 'bottomStart' : _propsWithDefaults$er,
-    errorMessage = propsWithDefaults.errorMessage,
-    name = propsWithDefaults.name,
-    value = propsWithDefaults.value,
-    _propsWithDefaults$re = propsWithDefaults.readOnly,
-    readOnly = _propsWithDefaults$re === void 0 ? readOnlyContext : _propsWithDefaults$re,
-    _propsWithDefaults$pl = propsWithDefaults.plaintext,
-    plaintext = _propsWithDefaults$pl === void 0 ? plaintextContext : _propsWithDefaults$pl,
-    _propsWithDefaults$di = propsWithDefaults.disabled,
-    disabled = _propsWithDefaults$di === void 0 ? disabledContext : _propsWithDefaults$di,
-    onChange = propsWithDefaults.onChange,
-    onBlur = propsWithDefaults.onBlur,
-    defaultValue = propsWithDefaults.defaultValue,
-    _propsWithDefaults$sh = propsWithDefaults.shouldResetWithUnmount,
-    shouldResetWithUnmount = _propsWithDefaults$sh === void 0 ? false : _propsWithDefaults$sh,
-    rule = propsWithDefaults.rule,
-    id = propsWithDefaults.id,
-    rest = _objectWithoutPropertiesLoose(propsWithDefaults, _excluded);
-  var _useFormGroup = useFormGroup(id),
-    controlId = _useFormGroup.controlId,
-    helpTextId = _useFormGroup.helpTextId,
-    labelId = _useFormGroup.labelId,
-    errorMessageId = _useFormGroup.errorMessageId;
+const FormControl = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    propsWithDefaults
+  } = useCustom('FormControl', props);
+  const {
+    readOnly: readOnlyContext,
+    plaintext: plaintextContext,
+    disabled: disabledContext,
+    errorFromContext,
+    formError,
+    nestedField,
+    removeFieldValue,
+    removeFieldError,
+    onFieldChange,
+    checkTrigger: contextCheckTrigger,
+    checkFieldForNextValue,
+    checkFieldAsyncForNextValue
+  } = useContext(FormContext);
+  const {
+    as: Component = 'div',
+    accepter: AccepterComponent = Input,
+    classPrefix = 'form-control',
+    checkAsync,
+    checkTrigger,
+    errorPlacement = 'bottomStart',
+    errorMessage,
+    name,
+    value,
+    readOnly = readOnlyContext,
+    plaintext = plaintextContext,
+    disabled = disabledContext,
+    onChange,
+    onBlur,
+    defaultValue,
+    shouldResetWithUnmount = false,
+    rule,
+    id,
+    ...rest
+  } = propsWithDefaults;
+  const {
+    controlId,
+    helpTextId,
+    labelId,
+    errorMessageId
+  } = useFormGroup(id);
   if (!onFieldChange) {
-    throw new Error("\n      <FormControl> must be inside a component decorated with <Form>.\n      And need to update React to 16.6.0 +.\n    ");
+    throw new Error(`
+      <FormControl> must be inside a component decorated with <Form>.
+      And need to update React to 16.6.0 +.
+    `);
   }
   useRegisterModel(name, rule);
-  useWillUnmount(function () {
+  useWillUnmount(() => {
     if (shouldResetWithUnmount) {
       removeFieldValue === null || removeFieldValue === void 0 || removeFieldValue(name);
       removeFieldError === null || removeFieldError === void 0 || removeFieldError(name);
     }
   });
-  var trigger = checkTrigger || contextCheckTrigger;
-  var formValue = useContext(FormValueContext);
-  var _useField = useField({
-      name: name,
-      errorMessage: errorMessage,
-      formValue: formValue,
-      formError: formError,
-      value: value,
-      nestedField: nestedField,
-      errorFromContext: errorFromContext
-    }),
-    fieldValue = _useField.fieldValue,
-    fieldError = _useField.fieldError,
-    setFieldValue = _useField.setFieldValue;
-  var _useClassNames = useClassNames(classPrefix),
-    withClassPrefix = _useClassNames.withClassPrefix,
-    prefix = _useClassNames.prefix;
-  var classes = withClassPrefix('wrapper');
-  var handleFieldChange = useEventCallback(function (value, event) {
+  const trigger = checkTrigger || contextCheckTrigger;
+  const formValue = useContext(FormValueContext);
+  const {
+    fieldValue,
+    fieldError,
+    setFieldValue
+  } = useField({
+    name,
+    errorMessage,
+    formValue,
+    formError,
+    value,
+    nestedField,
+    errorFromContext
+  });
+  const {
+    withClassPrefix,
+    prefix
+  } = useClassNames(classPrefix);
+  const classes = withClassPrefix('wrapper');
+  const handleFieldChange = useEventCallback((value, event) => {
     if (trigger === 'change') {
       handleFieldCheck(value);
     }
     onFieldChange === null || onFieldChange === void 0 || onFieldChange(name, value, event);
     onChange === null || onChange === void 0 || onChange(value, event);
   });
-  var handleFieldBlur = useEventCallback(function (event) {
+  const handleFieldBlur = useEventCallback(event => {
     if (trigger === 'blur') {
       handleFieldCheck(fieldValue);
     }
     onBlur === null || onBlur === void 0 || onBlur(event);
   });
-  var handleFieldCheck = useEventCallback(function (value) {
-    var nextFormValue = setFieldValue(name, value);
+  const handleFieldCheck = useEventCallback(value => {
+    const nextFormValue = setFieldValue(name, value);
     if (checkAsync) {
       checkFieldAsyncForNextValue(name, nextFormValue);
     } else {
       checkFieldForNextValue(name, nextFormValue);
     }
   });
-  var fieldHasError = Boolean(fieldError);
+  const fieldHasError = Boolean(fieldError);
 
   // Toggle component is a special case that uses `checked` and `defaultChecked` instead of `value` and `defaultValue` props.
-  var valueKey = AccepterComponent === Toggle ? 'checked' : 'value';
-  var accepterProps = (_accepterProps = {}, _accepterProps[valueKey] = fieldValue === undefined ? defaultValue : fieldValue, _accepterProps);
+  const valueKey = AccepterComponent === Toggle ? 'checked' : 'value';
+  const accepterProps = {
+    // need to distinguish between undefined and null
+    [valueKey]: fieldValue === undefined ? defaultValue : fieldValue
+  };
   return /*#__PURE__*/React.createElement(Component, {
     className: classes,
     ref: ref,
@@ -151,21 +149,9 @@ var FormControl = /*#__PURE__*/React.forwardRef(function (props, ref) {
     role: "alert",
     "aria-relevant": "all",
     show: fieldHasError,
-    className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["message-wrapper"]))),
+    className: prefix`message-wrapper`,
     placement: errorPlacement
   }, fieldError));
 });
 FormControl.displayName = 'FormControl';
-FormControl.propTypes = {
-  name: PropTypes.string.isRequired,
-  checkTrigger: oneOf(['change', 'blur', 'none']),
-  checkAsync: PropTypes.bool,
-  accepter: PropTypes.any,
-  onChange: PropTypes.func,
-  onBlur: PropTypes.func,
-  classPrefix: PropTypes.string,
-  errorMessage: PropTypes.node,
-  errorPlacement: oneOf(['bottomStart', 'bottomEnd', 'topStart', 'topEnd', 'leftStart', 'rightStart', 'leftEnd', 'rightEnd']),
-  value: PropTypes.any
-};
 export default FormControl;

package/esm/FormControl/hooks/useField.js

@@ -1,5 +1,4 @@
 'use client';
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { isValidElement, useCallback, useMemo } from 'react';
 import get from 'lodash/get';
 import set from 'lodash/set';
@@ -23,43 +22,49 @@ function getErrorMessage(error) {
   return error === null || error === void 0 ? void 0 : error.errorMessage;
 }
 function useField(props) {
-  var name = props.name,
-    formValue = props.formValue,
-    formError = props.formError,
-    value = props.value,
-    nestedField = props.nestedField,
-    errorMessage = props.errorMessage,
-    errorFromContext = props.errorFromContext;
-  var fieldValue = useMemo(function () {
+  const {
+    name,
+    formValue,
+    formError,
+    value,
+    nestedField,
+    errorMessage,
+    errorFromContext
+  } = props;
+  const fieldValue = useMemo(() => {
     if (typeof value !== 'undefined') {
       return value;
     }
     return nestedField ? get(formValue, name) : formValue === null || formValue === void 0 ? void 0 : formValue[name];
   }, [formValue, name, nestedField, value]);
-  var fieldError = useMemo(function () {
+  const fieldError = useMemo(() => {
     if (typeof errorMessage !== 'undefined' || !errorFromContext) {
       return errorMessage;
     }
     if (nestedField) {
       return getErrorMessage(get(formError, nameToPath(name)));
     }
-    var fieldError = formError === null || formError === void 0 ? void 0 : formError[name];
+    const fieldError = formError === null || formError === void 0 ? void 0 : formError[name];
     if (typeof fieldError === 'string') {
       return fieldError;
     }
     return getErrorMessage(fieldError);
   }, [errorFromContext, errorMessage, formError, name, nestedField]);
-  var setFieldValue = useCallback(function (fieldName, fieldValue) {
-    var _extends2;
+  const setFieldValue = useCallback((fieldName, fieldValue) => {
     if (nestedField) {
-      return set(_extends({}, formValue), fieldName, fieldValue);
+      return set({
+        ...formValue
+      }, fieldName, fieldValue);
     }
-    return _extends({}, formValue, (_extends2 = {}, _extends2[fieldName] = fieldValue, _extends2));
+    return {
+      ...formValue,
+      [fieldName]: fieldValue
+    };
   }, [formValue, nestedField]);
   return {
-    fieldValue: fieldValue,
-    fieldError: fieldError,
-    setFieldValue: setFieldValue
+    fieldValue,
+    fieldError,
+    setFieldValue
   };
 }
 export default useField;

package/esm/FormControl/hooks/useRegisterModel.js

@@ -2,14 +2,15 @@
 import { useRef, useEffect } from 'react';
 import { useFormContext } from "../../Form/FormContext.js";
 function useRegisterModel(name, rule) {
-  var _ref = useFormContext() || {},
-    pushFieldRule = _ref.pushFieldRule,
-    removeFieldRule = _ref.removeFieldRule;
-  var refRule = useRef(rule);
+  const {
+    pushFieldRule,
+    removeFieldRule
+  } = useFormContext() || {};
+  const refRule = useRef(rule);
   refRule.current = rule;
-  useEffect(function () {
+  useEffect(() => {
     pushFieldRule === null || pushFieldRule === void 0 || pushFieldRule(name, refRule);
-    return function () {
+    return () => {
       removeFieldRule === null || removeFieldRule === void 0 || removeFieldRule(name);
     };
   }, [name, pushFieldRule, removeFieldRule]);

package/esm/FormControlLabel/FormControlLabel.js

@@ -1,9 +1,6 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["as", "classPrefix", "htmlFor", "className", "id"];
 import React from 'react';
-import PropTypes from 'prop-types';
 import { useClassNames } from "../internals/hooks/index.js";
 import { useFormGroup } from "../FormGroup/index.js";
 import { useCustom } from "../CustomProvider/index.js";
@@ -11,26 +8,27 @@ import { useCustom } from "../CustomProvider/index.js";
  * The `<Form.ControlLabel>` component renders a label with required indicator, for form controls.
  * @see https://rsuitejs.com/components/form/
  */
-var FormControlLabel = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _useCustom = useCustom('FormControlLabel', props),
-    propsWithDefaults = _useCustom.propsWithDefaults;
-  var _useFormGroup = useFormGroup(),
-    labelId = _useFormGroup.labelId,
-    controlId = _useFormGroup.controlId;
-  var _propsWithDefaults$as = propsWithDefaults.as,
-    Component = _propsWithDefaults$as === void 0 ? 'label' : _propsWithDefaults$as,
-    _propsWithDefaults$cl = propsWithDefaults.classPrefix,
-    classPrefix = _propsWithDefaults$cl === void 0 ? 'form-control-label' : _propsWithDefaults$cl,
-    _propsWithDefaults$ht = propsWithDefaults.htmlFor,
-    htmlFor = _propsWithDefaults$ht === void 0 ? controlId : _propsWithDefaults$ht,
-    className = propsWithDefaults.className,
-    _propsWithDefaults$id = propsWithDefaults.id,
-    id = _propsWithDefaults$id === void 0 ? labelId : _propsWithDefaults$id,
-    rest = _objectWithoutPropertiesLoose(propsWithDefaults, _excluded);
-  var _useClassNames = useClassNames(classPrefix),
-    withClassPrefix = _useClassNames.withClassPrefix,
-    merge = _useClassNames.merge;
-  var classes = merge(className, withClassPrefix());
+const FormControlLabel = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    propsWithDefaults
+  } = useCustom('FormControlLabel', props);
+  const {
+    labelId,
+    controlId
+  } = useFormGroup();
+  const {
+    as: Component = 'label',
+    classPrefix = 'form-control-label',
+    htmlFor = controlId,
+    className,
+    id = labelId,
+    ...rest
+  } = propsWithDefaults;
+  const {
+    withClassPrefix,
+    merge
+  } = useClassNames(classPrefix);
+  const classes = merge(className, withClassPrefix());
   return /*#__PURE__*/React.createElement(Component, _extends({
     id: id,
     htmlFor: htmlFor
@@ -40,9 +38,4 @@ var FormControlLabel = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 FormControlLabel.displayName = 'FormControlLabel';
-FormControlLabel.propTypes = {
-  className: PropTypes.string,
-  htmlFor: PropTypes.string,
-  classPrefix: PropTypes.string
-};
 export default FormControlLabel;