@itcase/forms 1.1.27 → 1.1.28

package/dist/itcase-forms.cjs.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var libphonenumberJs = require('libphonenumber-js');
-var React$1 = require('react');
+var React = require('react');
 var finalForm = require('final-form');
 var reactFinalForm = require('react-final-form');
 var clsx = require('clsx');
@@ -40,7 +40,7 @@ var createDecorator = require('final-form-focus');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React__default = /*#__PURE__*/_interopDefault(React$1);
+var React__default = /*#__PURE__*/_interopDefault(React);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 var camelCase__default = /*#__PURE__*/_interopDefault(camelCase);
 var snakeCase__default = /*#__PURE__*/_interopDefault(snakeCase);
@@ -124,7 +124,7 @@ const makeValidate = schema => {
   };
 };
 function useYupValidationSchema(schema, language) {
-  const validate = React$1.useMemo(() => schema && makeValidate(schema), [schema, language]);
+  const validate = React.useMemo(() => schema && makeValidate(schema), [schema, language]);
   return validate;
 }
 
@@ -143,7 +143,7 @@ function useFieldValidationState(props) {
   const successKey = 'success';
 
   // Determines if the field is in an error state based on various conditions.
-  const isErrorState = React$1.useMemo(() => {
+  const isErrorState = React.useMemo(() => {
     if (fieldProps.showErrorsOnSubmit) {
       return Boolean(meta.submitFailed && meta.touched && (meta.error || submitError));
     } else {
@@ -152,12 +152,12 @@ function useFieldValidationState(props) {
   }, [fieldProps.showErrorsOnSubmit, meta.submitFailed, meta.touched, meta.error, submitError]);
 
   // Determines if the field's input state is valid
-  const isValidState = React$1.useMemo(() => {
+  const isValidState = React.useMemo(() => {
     const hasValue = Array.isArray(input?.value) ? input?.value.length : input?.value;
     const isModifiedAfterSubmit = meta.modifiedSinceLastSubmit && !meta.error && submitError;
     return Boolean(hasValue && (meta.valid || isModifiedAfterSubmit));
   }, [input?.value, meta.valid, meta.error, submitError, meta.modifiedSinceLastSubmit]);
-  const errorMessage = React$1.useMemo(() => {
+  const errorMessage = React.useMemo(() => {
     // If final-form field has error in "meta" render-property.
     // If field not modified after last form submit - use submit error
     const error = meta.error || submitError || false;
@@ -195,7 +195,7 @@ function useValidationAppearanceInputProps(props) {
   } = props;
 
   // TODO: need to add props that can change during errors in this field
-  const validationAppearanceInputProps = React$1.useMemo(() => {
+  const validationAppearanceInputProps = React.useMemo(() => {
     // const resultAppearanceProps = {
     //   messageTextColor: props.errorMessageTextColor,
     //   messageTextSize: props.errorMessageTextSize,
@@ -314,8 +314,8 @@ function FieldWrapperBase(props) {
     isValidState,
     children
   } = props;
-  const formFieldClass = React$1.useMemo(() => clsx__default.default(className, isValidState && 'form__item_state_success', isRequired && 'form__item_state_required', isDisabled && 'form__item_state_disabled', metaActive && 'form__item_state_focus', inputValue && 'form__item_state_filled', isErrorState && `form__item_state_${errorKey}`), [className, isErrorState, isValidState, isRequired, metaActive, inputValue, isDisabled, metaError]);
-  const fieldClass = React$1.useMemo(() => clsx__default.default(fieldClassName, isValidState && `${fieldClassName}_state_success`, metaActive && `${fieldClassName}_state_focus`, inputValue && `${fieldClassName}_state_filled`, isDisabled && `${fieldClassName}_state_disabled`, isErrorState && `${fieldClassName}_state_${errorKey}`), [fieldClassName, isErrorState, isValidState, metaActive, inputValue, isDisabled, metaError]);
+  const formFieldClass = React.useMemo(() => clsx__default.default(className, isValidState && 'form__item_state_success', isRequired && 'form__item_state_required', isDisabled && 'form__item_state_disabled', metaActive && 'form__item_state_focus', inputValue && 'form__item_state_filled', isErrorState && `form__item_state_${errorKey}`), [className, isErrorState, isValidState, isRequired, metaActive, inputValue, isDisabled, metaError]);
+  const fieldClass = React.useMemo(() => clsx__default.default(fieldClassName, isValidState && `${fieldClassName}_state_success`, metaActive && `${fieldClassName}_state_focus`, inputValue && `${fieldClassName}_state_filled`, isDisabled && `${fieldClassName}_state_disabled`, isErrorState && `${fieldClassName}_state_${errorKey}`), [fieldClassName, isErrorState, isValidState, metaActive, inputValue, isDisabled, metaError]);
   const sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'form-field_size_',
     propsKey: 'size'
@@ -413,7 +413,7 @@ function FieldWrapper(props) {
     change
   } = reactFinalForm.useForm(); // , mutators
 
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     return () => {
       change(inputName, undefined);
     };
@@ -465,10 +465,10 @@ const FileInputDropzone = /*#__PURE__*/React__default.default.memo(function File
   const {
     change
   } = reactFinalForm.useForm();
-  const [fileError, setFileError] = React$1.useState('');
-  const [fileIsLoading, setFileIsLoading] = React$1.useState(false);
-  const filesList = React$1.useMemo(() => inputValue ? castArray__default.default(inputValue) : [], [inputValue]);
-  const changeFormState = React$1.useCallback(newFiles => {
+  const [fileError, setFileError] = React.useState('');
+  const [fileIsLoading, setFileIsLoading] = React.useState(false);
+  const filesList = React.useMemo(() => inputValue ? castArray__default.default(inputValue) : [], [inputValue]);
+  const changeFormState = React.useCallback(newFiles => {
     // If max files in dropzone is 1 - return file as it self, else as array of files
     // ps: for old projects compatibility
     const toSave = dropzoneProps.maxFiles == 1 ? newFiles[0] : newFiles;
@@ -480,7 +480,7 @@ const FileInputDropzone = /*#__PURE__*/React__default.default.memo(function File
   [dropzoneProps, change]);
 
   //
-  const convertFiledValueAndSaveAsFiles = React$1.useCallback(async currentFilesList => {
+  const convertFiledValueAndSaveAsFiles = React.useCallback(async currentFilesList => {
     setFileIsLoading(true);
     const newFiles = [];
     for (const fileItem of currentFilesList) {
@@ -498,7 +498,7 @@ const FileInputDropzone = /*#__PURE__*/React__default.default.memo(function File
   }, [isPreviews, changeFormState]);
 
   // Delete file from dropzone
-  const removeFile = React$1.useCallback((event, index) => {
+  const removeFile = React.useCallback((event, index) => {
     event.stopPropagation();
     event.preventDefault();
     const newFiles = [...filesList];
@@ -573,7 +573,7 @@ const FileInputDropzone = /*#__PURE__*/React__default.default.memo(function File
       }
     }
   });
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     const currentFilesList = castArray__default.default(inputValue);
     const isNeedToConvert = currentFilesList.some(fileItem => typeof fileItem === 'string');
     if (isNeedToConvert) {
@@ -1073,7 +1073,7 @@ const FormFieldCheckbox = /*#__PURE__*/React__default.default.memo(function Form
      * custom React Hook function.
      */
 
-    const onChangeField = React$1.useCallback(event => {
+    const onChangeField = React.useCallback(event => {
       input.onChange(event);
       if (onChange) {
         onChange(event.target.checked, input.name);
@@ -1149,12 +1149,12 @@ function FormFieldChips(props) {
   } = reactFinalForm.useForm();
 
   // Callback for value changes
-  const onChangeSomeInput = React$1.useCallback((inputValue, newOptionValue) => {
+  const onChangeSomeInput = React.useCallback((inputValue, newOptionValue) => {
     const updatedValues = inputValue.includes(newOptionValue) ? inputValue.filter(selectedValue => selectedValue !== newOptionValue) : [...inputValue, newOptionValue];
     change(name, updatedValues);
     onChange && onChange(updatedValues);
   }, [change, name, onChange]);
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     initialValue && change(name, initialValue);
     // update the form value only when the initialValue changes, so use disable eslint to ignore the warning
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -1180,7 +1180,7 @@ function FormFieldChips(props) {
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : 'success'
     });
-    const activeOptionsList = React$1.useMemo(() => {
+    const activeOptionsList = React.useMemo(() => {
       const emptyOptionsList = [{
         label: null,
         value: null
@@ -1251,7 +1251,7 @@ const FormFieldChoice = /*#__PURE__*/React__default.default.memo(function FormFi
   const {
     change
   } = reactFinalForm.useForm();
-  const setActiveSegment = React$1.useCallback((option, isChecked) => {
+  const setActiveSegment = React.useCallback((option, isChecked) => {
     change(name, isChecked && option.value);
     if (onChange) {
       onChange(option.value, name, isChecked);
@@ -1270,7 +1270,7 @@ const FormFieldChoice = /*#__PURE__*/React__default.default.memo(function FormFi
      * React Hooks must be called in a React function component or a
      * custom React Hook function.
      */
-    const activeOption = React$1.useMemo(() => {
+    const activeOption = React.useMemo(() => {
       const emptyOption = {
         value: null,
         label: null
@@ -1503,7 +1503,7 @@ function FormFieldDatePicker(props) {
      * custom React Hook function.
      */
 
-    const onChangeField = React$1.useCallback((startDate, endDate) => {
+    const onChangeField = React.useCallback((startDate, endDate) => {
       if (!datePickerProps.selectsRange) {
         // When we need to save single date, value is date
         // TODO: make object with one date? need to check all forms with FormFieldDatePicker
@@ -1605,7 +1605,7 @@ const FormFieldInput = /*#__PURE__*/React__default.default.memo(function FormFie
      * custom React Hook function.
      */
 
-    const onChangeField = React$1.useCallback(event => {
+    const onChangeField = React.useCallback(event => {
       input.onChange(event);
       if (onChange) {
         onChange(event.target.value, input.name);
@@ -1689,11 +1689,11 @@ const FormFieldPassword = /*#__PURE__*/React__default.default.memo(function Form
     isRequired,
     onChange
   } = props;
-  const [isRevealed, setIsRevealed] = React$1.useState(false);
-  const inputType = React$1.useMemo(() => {
+  const [isRevealed, setIsRevealed] = React.useState(false);
+  const inputType = React.useMemo(() => {
     return isRevealed ? 'text' : 'password';
   }, [isRevealed]);
-  const onClickIconReveal = React$1.useCallback(event => {
+  const onClickIconReveal = React.useCallback(event => {
     event.preventDefault();
     setIsRevealed(prev => !prev);
   }, []);
@@ -1712,7 +1712,7 @@ const FormFieldPassword = /*#__PURE__*/React__default.default.memo(function Form
      * custom React Hook function.
      */
 
-    const onChangeField = React$1.useCallback(event => {
+    const onChangeField = React.useCallback(event => {
       input.onChange(event);
       if (onChange) {
         onChange(event.target.value, input.name);
@@ -1787,7 +1787,7 @@ function FormFieldSegmented(props) {
   const {
     change
   } = reactFinalForm.useForm();
-  const setActiveSegment = React$1.useCallback(option => {
+  const setActiveSegment = React.useCallback(option => {
     change(name, option.value);
   }, [change]);
   return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
@@ -1803,7 +1803,7 @@ function FormFieldSegmented(props) {
      * custom React Hook function.
      */
 
-    const activeOption = React$1.useMemo(() => {
+    const activeOption = React.useMemo(() => {
       const emptyOption = {
         label: null,
         value: null
@@ -1901,8 +1901,8 @@ const FormFieldSelect = /*#__PURE__*/React__default.default.memo(function FormFi
      * React Hooks must be called in a React function component or a
      * custom React Hook function.
      */
-    const [selectedOptions, setSelectedOptions] = React$1.useState(null);
-    const defaultValue = React$1.useMemo(() => {
+    const [selectedOptions, setSelectedOptions] = React.useState(null);
+    const defaultValue = React.useMemo(() => {
       const optionsValues = getDefaultValue(options, input.value);
       if (!optionsValues.length && input.value?.length) {
         optionsValues.push({
@@ -1912,18 +1912,18 @@ const FormFieldSelect = /*#__PURE__*/React__default.default.memo(function FormFi
       }
       return optionsValues;
     }, [input.value]);
-    const onChangeField = React$1.useCallback(value => {
+    const onChangeField = React.useCallback(value => {
       input.onChange(value);
       if (onChange) {
         onChange(value, input.name);
       }
     }, [onChange, input.onChange]);
-    const onChangeValue = React$1.useCallback((option, actionMeta) => {
+    const onChangeValue = React.useCallback((option, actionMeta) => {
       const value = Array.isArray(option) ? option.map(o => o.value) : option?.value || null;
       setSelectedOptions(option);
       onChangeField(value);
     }, [onChangeField]);
-    React$1.useEffect(() => {
+    React.useEffect(() => {
       setSelectedOptions(defaultValue);
     }, [defaultValue]);
     const {
@@ -1996,7 +1996,7 @@ const FormFieldSwitch = /*#__PURE__*/React__default.default.memo(function FormFi
      * custom React Hook function.
      */
 
-    const onChangeField = React$1.useCallback(event => {
+    const onChangeField = React.useCallback(event => {
       input.onChange(event);
       if (onChange) {
         onChange(event.target.checked, input.name);
@@ -2160,7 +2160,7 @@ const FormFieldMaskedInput = /*#__PURE__*/React__default.default.memo(function F
         }
       }
     });
-    React$1.useEffect(() => {
+    React.useEffect(() => {
       if (input.value !== unmaskedValue) {
         setUnmaskedValue(input.value.replace(unmasked, ''));
       }
@@ -2222,8 +2222,8 @@ function RadioGroupInput(props) {
     value,
     onChange
   } = props;
-  const onChangeField = React$1.useCallback(event => onChange(event.target.value), [onChange]);
-  return /*#__PURE__*/React.createElement(Input.Input, Object.assign({
+  const onChangeField = React.useCallback(event => onChange(event.target.value), [onChange]);
+  return /*#__PURE__*/React__default.default.createElement(Input.Input, Object.assign({
     name: input.name,
     autoComplete: "nope",
     value: value,
@@ -2240,12 +2240,12 @@ function RadioGroupItem(props) {
     option,
     onChange
   } = props;
-  const onChangeField = React$1.useCallback(event => {
+  const onChangeField = React.useCallback(event => {
     if (event.target.checked) {
       onChange(option.value);
     }
   }, [onChange]);
-  return /*#__PURE__*/React.createElement(Radio.Radio, Object.assign({
+  return /*#__PURE__*/React__default.default.createElement(Radio.Radio, Object.assign({
     className: "form-radio__item",
     type: "radio",
     name: input.name,
@@ -2266,14 +2266,14 @@ function RadioGroupList(props) {
     options,
     onChange
   } = props;
-  const [editableValue, setEditableValue] = React$1.useState(() => {
+  const [editableValue, setEditableValue] = React.useState(() => {
     const isRadioValue = options.find(option => option.value === input.value);
     if (!isRadioValue) {
       return input.value;
     }
     return '';
   });
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     // When a new value from outside enters the form
     if (input.value) {
       // Check value for radio type
@@ -2287,7 +2287,7 @@ function RadioGroupList(props) {
   }, [input.value]);
 
   // Callback for value changes
-  const onChangeSomeInput = React$1.useCallback(value => {
+  const onChangeSomeInput = React.useCallback(value => {
     // Save to form values
     input.onChange(value);
     if (onChange) {
@@ -2297,13 +2297,13 @@ function RadioGroupList(props) {
   }, [input, onChange]);
 
   // Handle for radio inputs
-  const onChangeRadio = React$1.useCallback(value => {
+  const onChangeRadio = React.useCallback(value => {
     setEditableValue('');
     onChangeSomeInput(value);
   }, [onChangeSomeInput]);
 
   // Handle for text input
-  const onChangeEditable = React$1.useCallback(value => {
+  const onChangeEditable = React.useCallback(value => {
     setEditableValue(value);
     onChangeSomeInput(value);
   }, [onChangeSomeInput]);
@@ -2717,7 +2717,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     onSubmit
   } = props;
   const validate = useYupValidationSchema(validationSchema, language);
-  const onRefFormInstance = React$1.useCallback(formInstance => {
+  const onRefFormInstance = React.useCallback(formInstance => {
     if (ref) {
       ref.current = formInstance;
     }