@itcase/forms 1.1.44 → 1.1.46

package/dist/css/form/Field/Dadata/FormFieldDadataInput.css

@@ -0,0 +1,7 @@
+:root {
+  --dadata-success-border: var(--color-success-border-primary);
+  --dadata-success-border-hover: var(--color-surface-border-quaternary);
+  --dadata-error-border: var(--color-error-border-primary);
+  --dadata-focus-background: var(--color-surface-primary);
+  --dadata-focus-border: var(--color-surface-border-quaternary);
+}

package/dist/css/form/Form/Form.css

@@ -115,12 +115,8 @@
     &_sticky {
       ^^&__title {
         position: sticky;
-        top: 0;
-        z-index: 100;
-      }
-      ^^&__wrapper {
-        overflow: scroll;
-        flex: 1;
+        top: 24px;
+        z-index: 5;
       }
     }
   }

package/dist/itcase-forms.cjs.js

@@ -34,6 +34,7 @@ var Segmented = require('@itcase/ui/components/Segmented');
 var Select = require('@itcase/ui/components/Select');
 var Switch = require('@itcase/ui/components/Switch');
 var Textarea = require('@itcase/ui/components/Textarea');
+var Dadata = require('@itcase/ui/components/Dadata');
 var Group = require('@itcase/ui/components/Group');
 var Notification = require('@itcase/ui/components/Notification');
 var createDecorator = require('final-form-focus');
@@ -535,7 +536,7 @@ const defaultChipsProps = {
   // Error
   errorAppearance: 'errorPrimary sizeM solid rounded',
   // Required
-  requiredAppearance: 'requirePrimary sizeM solid rounded'
+  requiredAppearance: 'warningPrimary sizeM solid rounded'
   // Success
   // successAppearance: 'successPrimary sizeM solid rounded',
 };
@@ -544,7 +545,6 @@ function FormFieldChips(props) {
   const {
     name,
     initialValue,
-    isDisabled,
     classNameGroupItem,
     emptyMessage,
     emptyMessageTextColor,
@@ -553,6 +553,7 @@ function FormFieldChips(props) {
     inputProps,
     options,
     showMessage,
+    isDisabled,
     isRequired,
     onChange
   } = props;
@@ -581,8 +582,8 @@ function FormFieldChips(props) {
     const {
       errorKey,
       errorMessage,
-      isErrorState,
       successKey,
+      isErrorState,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -608,14 +609,14 @@ function FormFieldChips(props) {
       className: clsx__default.default('form-field_chips', 'form__item_chips', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
-      isErrorState: isErrorState,
-      metaError: meta.error,
-      isDisabled: isDisabled,
       fieldClassName: "form-chips",
       inputName: input.name,
       inputValue: input.value,
       metaActive: meta.active,
+      metaError: meta.error,
       showMessage: showMessage,
+      isDisabled: isDisabled,
+      isErrorState: isErrorState,
       isRequired: isRequired,
       isValidState: isValidState
     }, fieldProps), options.length ? /*#__PURE__*/React__default.default.createElement(Chips.ChipsGroup, {
@@ -626,9 +627,9 @@ function FormFieldChips(props) {
       className: clsx__default.default(meta.active && 'form-chips_state_focus', meta.error && meta.touched && `form-chips_state_${errorKey}`),
       key: option.value,
       label: option.label,
-      isDisabled: option.isDisabled,
       value: option.value,
       isActive: activeOptionsList.some(activeOption => activeOption.value === option.value),
+      isDisabled: option.isDisabled,
       onClick: () => onChangeSomeInput(input.value, option.value)
     }, updatedInputProps)))) : /*#__PURE__*/React__default.default.createElement(Text.Text, {
       size: emptyMessageTextSize,
@@ -1767,7 +1768,8 @@ const FormFieldMaskedInput = /*#__PURE__*/React__default.default.memo(function F
       value,
       setUnmaskedValue
     } = reactImask.useIMask(optionsMask, {
-      onAccept: (newValue, event, element) => {
+      defaultValue: initialValue,
+      onAccept: (_newValue, event, element) => {
         if (element) {
           input.onChange(event._unmaskedValue);
         }
@@ -1778,13 +1780,6 @@ const FormFieldMaskedInput = /*#__PURE__*/React__default.default.memo(function F
         setUnmaskedValue(input.value.replace(unmasked, ''));
       }
     }, [input.value]);
-
-    // useEffect(() => {
-    //   if (unmaskedValue !== input.value) {
-    //     input.onChange(unmaskedValue)
-    //   }
-    // }, [unmaskedValue])
-
     const {
       errorKey,
       errorMessage,
@@ -1806,7 +1801,7 @@ const FormFieldMaskedInput = /*#__PURE__*/React__default.default.memo(function F
       errorMessage: errorMessage,
       fieldClassName: 'form-maskedInput',
       inputName: input.name,
-      inputValue: input.value,
+      inputValue: input.value || unmasked,
       metaActive: meta.active,
       metaError: meta.error,
       showMessage: showMessage,
@@ -2398,6 +2393,102 @@ const FormFieldTextarea = /*#__PURE__*/React__default.default.memo(function Form
   });
 });
 
+const defaultDadataInputProps = {
+  appearance: 'defaultPrimary sizeM solid rounded',
+  // useValidationAppearanceInputProps
+  // Error
+  errorAppearance: 'errorPrimary sizeM solid rounded',
+  // Success
+  successAppearance: 'successPrimary sizeM solid rounded',
+  // Required
+  requiredAppearance: 'requirePrimary sizeM solid rounded'
+};
+
+const FormFieldDadataInput = /*#__PURE__*/React__default.default.memo(function FormFieldDadataInput(props) {
+  const {
+    name,
+    initialValue,
+    isDisabled,
+    classNameGroupItem,
+    fieldProps,
+    inputProps,
+    parse,
+    showMessage,
+    token,
+    isRequired,
+    onDadataAutocomplete
+  } = props;
+  if (process.env.NODE_ENV === 'development') {
+    const hint = `Check your form config at field "${name}".`;
+    if (!token) {
+      const message = `FormFieldDadataInput: 'token' prop is missing, instead got ${token}.`;
+      throw new Error(message + '\n' + hint);
+    }
+    if (!onDadataAutocomplete) {
+      const message = `FormFieldDadataInput: 'onDadataAutocomplete' prop is missing, instead got ${onDadataAutocomplete}.`;
+      throw new Error(message + '\n' + hint);
+    }
+  }
+  return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
+    name: name,
+    initialValue: initialValue,
+    parse: parse
+  }, function Render({
+    input,
+    meta
+  }) {
+    /** Note:
+     * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
+     * React Hooks cannot be called inside a callback.
+     * React Hooks must be called in a React function component or a
+     * custom React Hook function.
+     */
+
+    const {
+      errorKey,
+      errorMessage,
+      isErrorState,
+      successKey,
+      isValidState
+    } = useFieldValidationState({
+      fieldProps: fieldProps,
+      input: input,
+      meta: meta
+    });
+    const updatedInputProps = useValidationAppearanceInputProps({
+      inputProps: inputProps,
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
+    });
+    return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
+      className: clsx__default.default('form-field_input-dadata', 'form__item_input-dadata', classNameGroupItem),
+      errorKey: errorKey,
+      errorMessage: errorMessage,
+      isErrorState: isErrorState,
+      metaError: meta.error,
+      isDisabled: isDisabled,
+      fieldClassName: "form-dadata",
+      inputName: input.name,
+      inputValue: input.value || '',
+      metaActive: meta.active,
+      showMessage: showMessage,
+      isRequired: isRequired,
+      isValidState: isValidState
+    }, fieldProps), /*#__PURE__*/React__default.default.createElement(Dadata.Dadata
+    // dataTestId={`${input.name}FieldInputDadata`}
+    // className={clsx(
+    //   meta.active && 'input-dadata_state_focus',
+    //   meta.error && meta.touched && `input-dadata_state_${errorKey}`,
+    // )}
+    , {
+      input: input,
+      inputProps: updatedInputProps,
+      meta: meta,
+      setValue: onDadataAutocomplete,
+      token: token
+    }));
+  });
+});
+
 const formTypes = {
   password: 'password',
   code: 'code',
@@ -2407,6 +2498,7 @@ const formTypes = {
   checkbox: 'checkbox',
   chips: 'chips',
   choice: 'choice',
+  dadataInput: 'dadataInput',
   datePicker: 'datePicker',
   dateRangePicker: 'dateRangePicker',
   fileInput: 'fileInput',
@@ -2509,6 +2601,12 @@ function generateField(field, config, props) {
           key: config.key
         }, field, props));
       }
+    case formTypes.dadataInput:
+      {
+        return /*#__PURE__*/React__default.default.createElement(FormFieldDadataInput, Object.assign({
+          key: config.key
+        }, field, props));
+      }
     case formTypes.group:
       {
         return /*#__PURE__*/React__default.default.createElement(FormBlockGroup, Object.assign({
@@ -3151,6 +3249,7 @@ exports.FormFieldChips = FormFieldChips;
 exports.FormFieldChoice = FormFieldChoice;
 exports.FormFieldCode = FormFieldCode;
 exports.FormFieldCustom = FormFieldCustom;
+exports.FormFieldDadataInput = FormFieldDadataInput;
 exports.FormFieldDatePicker = FormFieldDatePicker;
 exports.FormFieldFileInput = FormFieldFileInput;
 exports.FormFieldInput = FormFieldInput;
@@ -3167,6 +3266,7 @@ exports.defaultCheckboxProps = defaultCheckboxProps;
 exports.defaultChipsProps = defaultChipsProps;
 exports.defaultChoiceProps = defaultChoiceProps;
 exports.defaultCodeProps = defaultCodeProps;
+exports.defaultDadataInputProps = defaultDadataInputProps;
 exports.defaultDatepickerProps = defaultDatepickerProps;
 exports.defaultDropzoneProps = defaultDropzoneProps;
 exports.defaultFieldProps = defaultFieldProps;

package/dist/itcase-forms.esm.js

@@ -33,6 +33,7 @@ import { Segmented } from '@itcase/ui/components/Segmented';
 import { Select } from '@itcase/ui/components/Select';
 import { Switch } from '@itcase/ui/components/Switch';
 import { Textarea } from '@itcase/ui/components/Textarea';
+import { Dadata } from '@itcase/ui/components/Dadata';
 import { Group } from '@itcase/ui/components/Group';
 import { Notification } from '@itcase/ui/components/Notification';
 import createDecorator from 'final-form-focus';
@@ -524,7 +525,7 @@ const defaultChipsProps = {
   // Error
   errorAppearance: 'errorPrimary sizeM solid rounded',
   // Required
-  requiredAppearance: 'requirePrimary sizeM solid rounded'
+  requiredAppearance: 'warningPrimary sizeM solid rounded'
   // Success
   // successAppearance: 'successPrimary sizeM solid rounded',
 };
@@ -533,7 +534,6 @@ function FormFieldChips(props) {
   const {
     name,
     initialValue,
-    isDisabled,
     classNameGroupItem,
     emptyMessage,
     emptyMessageTextColor,
@@ -542,6 +542,7 @@ function FormFieldChips(props) {
     inputProps,
     options,
     showMessage,
+    isDisabled,
     isRequired,
     onChange
   } = props;
@@ -570,8 +571,8 @@ function FormFieldChips(props) {
     const {
       errorKey,
       errorMessage,
-      isErrorState,
       successKey,
+      isErrorState,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -597,14 +598,14 @@ function FormFieldChips(props) {
       className: clsx('form-field_chips', 'form__item_chips', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
-      isErrorState: isErrorState,
-      metaError: meta.error,
-      isDisabled: isDisabled,
       fieldClassName: "form-chips",
       inputName: input.name,
       inputValue: input.value,
       metaActive: meta.active,
+      metaError: meta.error,
       showMessage: showMessage,
+      isDisabled: isDisabled,
+      isErrorState: isErrorState,
       isRequired: isRequired,
       isValidState: isValidState
     }, fieldProps), options.length ? /*#__PURE__*/React.createElement(ChipsGroup, {
@@ -615,9 +616,9 @@ function FormFieldChips(props) {
       className: clsx(meta.active && 'form-chips_state_focus', meta.error && meta.touched && `form-chips_state_${errorKey}`),
       key: option.value,
       label: option.label,
-      isDisabled: option.isDisabled,
       value: option.value,
       isActive: activeOptionsList.some(activeOption => activeOption.value === option.value),
+      isDisabled: option.isDisabled,
       onClick: () => onChangeSomeInput(input.value, option.value)
     }, updatedInputProps)))) : /*#__PURE__*/React.createElement(Text, {
       size: emptyMessageTextSize,
@@ -1756,7 +1757,8 @@ const FormFieldMaskedInput = /*#__PURE__*/React.memo(function FormFieldMaskedInp
       value,
       setUnmaskedValue
     } = useIMask(optionsMask, {
-      onAccept: (newValue, event, element) => {
+      defaultValue: initialValue,
+      onAccept: (_newValue, event, element) => {
         if (element) {
           input.onChange(event._unmaskedValue);
         }
@@ -1767,13 +1769,6 @@ const FormFieldMaskedInput = /*#__PURE__*/React.memo(function FormFieldMaskedInp
         setUnmaskedValue(input.value.replace(unmasked, ''));
       }
     }, [input.value]);
-
-    // useEffect(() => {
-    //   if (unmaskedValue !== input.value) {
-    //     input.onChange(unmaskedValue)
-    //   }
-    // }, [unmaskedValue])
-
     const {
       errorKey,
       errorMessage,
@@ -1795,7 +1790,7 @@ const FormFieldMaskedInput = /*#__PURE__*/React.memo(function FormFieldMaskedInp
       errorMessage: errorMessage,
       fieldClassName: 'form-maskedInput',
       inputName: input.name,
-      inputValue: input.value,
+      inputValue: input.value || unmasked,
       metaActive: meta.active,
       metaError: meta.error,
       showMessage: showMessage,
@@ -2387,6 +2382,102 @@ const FormFieldTextarea = /*#__PURE__*/React.memo(function FormFieldTextarea(pro
   });
 });
 
+const defaultDadataInputProps = {
+  appearance: 'defaultPrimary sizeM solid rounded',
+  // useValidationAppearanceInputProps
+  // Error
+  errorAppearance: 'errorPrimary sizeM solid rounded',
+  // Success
+  successAppearance: 'successPrimary sizeM solid rounded',
+  // Required
+  requiredAppearance: 'requirePrimary sizeM solid rounded'
+};
+
+const FormFieldDadataInput = /*#__PURE__*/React.memo(function FormFieldDadataInput(props) {
+  const {
+    name,
+    initialValue,
+    isDisabled,
+    classNameGroupItem,
+    fieldProps,
+    inputProps,
+    parse,
+    showMessage,
+    token,
+    isRequired,
+    onDadataAutocomplete
+  } = props;
+  if (process.env.NODE_ENV === 'development') {
+    const hint = `Check your form config at field "${name}".`;
+    if (!token) {
+      const message = `FormFieldDadataInput: 'token' prop is missing, instead got ${token}.`;
+      throw new Error(message + '\n' + hint);
+    }
+    if (!onDadataAutocomplete) {
+      const message = `FormFieldDadataInput: 'onDadataAutocomplete' prop is missing, instead got ${onDadataAutocomplete}.`;
+      throw new Error(message + '\n' + hint);
+    }
+  }
+  return /*#__PURE__*/React.createElement(Field, {
+    name: name,
+    initialValue: initialValue,
+    parse: parse
+  }, function Render({
+    input,
+    meta
+  }) {
+    /** Note:
+     * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
+     * React Hooks cannot be called inside a callback.
+     * React Hooks must be called in a React function component or a
+     * custom React Hook function.
+     */
+
+    const {
+      errorKey,
+      errorMessage,
+      isErrorState,
+      successKey,
+      isValidState
+    } = useFieldValidationState({
+      fieldProps: fieldProps,
+      input: input,
+      meta: meta
+    });
+    const updatedInputProps = useValidationAppearanceInputProps({
+      inputProps: inputProps,
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
+    });
+    return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
+      className: clsx('form-field_input-dadata', 'form__item_input-dadata', classNameGroupItem),
+      errorKey: errorKey,
+      errorMessage: errorMessage,
+      isErrorState: isErrorState,
+      metaError: meta.error,
+      isDisabled: isDisabled,
+      fieldClassName: "form-dadata",
+      inputName: input.name,
+      inputValue: input.value || '',
+      metaActive: meta.active,
+      showMessage: showMessage,
+      isRequired: isRequired,
+      isValidState: isValidState
+    }, fieldProps), /*#__PURE__*/React.createElement(Dadata
+    // dataTestId={`${input.name}FieldInputDadata`}
+    // className={clsx(
+    //   meta.active && 'input-dadata_state_focus',
+    //   meta.error && meta.touched && `input-dadata_state_${errorKey}`,
+    // )}
+    , {
+      input: input,
+      inputProps: updatedInputProps,
+      meta: meta,
+      setValue: onDadataAutocomplete,
+      token: token
+    }));
+  });
+});
+
 const formTypes = {
   password: 'password',
   code: 'code',
@@ -2396,6 +2487,7 @@ const formTypes = {
   checkbox: 'checkbox',
   chips: 'chips',
   choice: 'choice',
+  dadataInput: 'dadataInput',
   datePicker: 'datePicker',
   dateRangePicker: 'dateRangePicker',
   fileInput: 'fileInput',
@@ -2498,6 +2590,12 @@ function generateField(field, config, props) {
           key: config.key
         }, field, props));
       }
+    case formTypes.dadataInput:
+      {
+        return /*#__PURE__*/React.createElement(FormFieldDadataInput, Object.assign({
+          key: config.key
+        }, field, props));
+      }
     case formTypes.group:
       {
         return /*#__PURE__*/React.createElement(FormBlockGroup, Object.assign({
@@ -3118,4 +3216,4 @@ const getErrorsForFinalForm = error => {
   return formErrors;
 };
 
-export { DEFAULT_MESSAGES_FIELDS, FieldWrapper, FieldWrapperBase, FinalForm, FormBlockGroup, FormFieldCheckbox, FormFieldChips, FormFieldChoice, FormFieldCode, FormFieldCustom, FormFieldDatePicker, FormFieldFileInput, FormFieldInput, FormFieldMaskedInput, FormFieldPassword, FormFieldRadioGroup, FormFieldSegmented, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, addRequiredFieldsParamToSchema, dateValidation, defaultCheckboxProps, defaultChipsProps, defaultChoiceProps, defaultCodeProps, defaultDatepickerProps, defaultDropzoneProps, defaultFieldProps, defaultFieldSizeL, defaultFieldSizeM, defaultFieldSizeS, defaultFieldSizeXL, defaultGroupProps, defaultInputProps, defaultPasswordProps, defaultRadioProps, defaultSegmentedProps, defaultSelectProps, defaultSwitchProps, defaultTextareaProps, emailValidation, focusOnError, focusOnErrorDecorator, formTypes, generateField, getErrorsForFinalForm, parseNumericField, phoneValidation, sendFormDataToServer, setErrorsMutator, useYupValidationSchema };
+export { DEFAULT_MESSAGES_FIELDS, FieldWrapper, FieldWrapperBase, FinalForm, FormBlockGroup, FormFieldCheckbox, FormFieldChips, FormFieldChoice, FormFieldCode, FormFieldCustom, FormFieldDadataInput, FormFieldDatePicker, FormFieldFileInput, FormFieldInput, FormFieldMaskedInput, FormFieldPassword, FormFieldRadioGroup, FormFieldSegmented, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, addRequiredFieldsParamToSchema, dateValidation, defaultCheckboxProps, defaultChipsProps, defaultChoiceProps, defaultCodeProps, defaultDadataInputProps, defaultDatepickerProps, defaultDropzoneProps, defaultFieldProps, defaultFieldSizeL, defaultFieldSizeM, defaultFieldSizeS, defaultFieldSizeXL, defaultGroupProps, defaultInputProps, defaultPasswordProps, defaultRadioProps, defaultSegmentedProps, defaultSelectProps, defaultSwitchProps, defaultTextareaProps, emailValidation, focusOnError, focusOnErrorDecorator, formTypes, generateField, getErrorsForFinalForm, parseNumericField, phoneValidation, sendFormDataToServer, setErrorsMutator, useYupValidationSchema };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/forms",
-  "version": "1.1.44",
+  "version": "1.1.46",
   "description": "Forms fields, inputs, etc.",
   "keywords": [],
   "license": "MIT",
@@ -32,18 +32,18 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@itcase/common": "^1.2.29",
+    "@itcase/common": "^1.2.32",
     "@itcase/config": "^1.0.57",
-    "@itcase/icons": "^1.2.19",
-    "@itcase/storybook-config": "^1.2.6",
-    "@itcase/tokens-am": "^1.1.19",
+    "@itcase/icons": "^1.2.23",
+    "@itcase/storybook-config": "^1.2.13",
+    "@itcase/tokens-am": "^1.1.20",
     "@itcase/tokens-baikal": "^1.1.17",
-    "@itcase/ui": "^1.8.122",
-    "axios": "^1.11.0",
+    "@itcase/ui": "^1.8.145",
+    "axios": "^1.12.2",
     "clsx": "^2.1.1",
     "final-form": "4.20.10",
     "final-form-focus": "1.1.2",
-    "libphonenumber-js": "^1.12.15",
+    "libphonenumber-js": "^1.12.23",
     "lodash": "^4.17.21",
     "luxon": "^3.7.2",
     "react": "^18.3.1",
@@ -59,13 +59,13 @@
     "@babel/core": "^7.28.4",
     "@babel/preset-env": "^7.28.3",
     "@babel/preset-react": "^7.27.1",
-    "@commitlint/cli": "^19.8.1",
-    "@commitlint/config-conventional": "^19.8.1",
-    "@itcase/lint": "^1.1.57",
+    "@commitlint/cli": "^20.1.0",
+    "@commitlint/config-conventional": "^20.0.0",
+    "@itcase/lint": "^1.1.67",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-node-resolve": "^16.0.2",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/release-notes-generator": "14.1.0",
@@ -74,17 +74,17 @@
     "babel-plugin-inline-react-svg": "^2.0.2",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "conventional-changelog-conventionalcommits": "^9.1.0",
-    "eslint": "9.35.0",
+    "eslint": "9.37.0",
     "husky": "^9.1.7",
-    "lint-staged": "^16.1.6",
+    "lint-staged": "^16.2.3",
     "postcss": "^8.5.6",
     "prettier": "3.6.2",
-    "rollup": "^4.50.1",
+    "rollup": "^4.52.4",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "semantic-release": "^24.2.7",
-    "storybook": "^9.1.5",
-    "stylelint": "^16.24.0",
-    "typescript": "^5.9.2",
-    "yup": "^1.7.0"
+    "semantic-release": "^24.2.9",
+    "storybook": "^9.1.10",
+    "stylelint": "^16.25.0",
+    "typescript": "^5.9.3",
+    "yup": "^1.7.1"
   }
 }