@itcase/forms 1.0.43 → 1.0.45

package/dist/itcase-forms.cjs.js

@@ -158,6 +158,7 @@ function FieldWrapperBase(props) {
     metaValid,
     set,
     type,
+    labelHidden,
     hideMessage,
     isHidden,
     tag: Tag,
@@ -214,14 +215,14 @@ function FieldWrapperBase(props) {
     className: clsx__default.default(formFieldClass, 'form__item', 'form-field', type && `form-field_type_${type}`, set && `form-field_set_${set}`, sizeClass, fillClass, shapeClass, isHidden && `form-field_state_hidden`, directionClass, widthClass),
     "data-tour": dataTour,
     style: formFieldStyles
-  }, before, label && /*#__PURE__*/React__default.default.createElement("div", {
+  }, before, (label || labelHidden) && /*#__PURE__*/React__default.default.createElement("div", {
     htmlFor: id,
-    className: "form-field__label"
+    className: clsx__default.default('form-field__label')
   }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
     size: labelTextSize,
     textWeight: labelTextWidth,
     textColor: labelTextColor
-  }, label)), desc && /*#__PURE__*/React__default.default.createElement("div", {
+  }, label, labelHidden && '\u00A0')), desc && /*#__PURE__*/React__default.default.createElement("div", {
     className: "form-field__desc"
   }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
     size: descTextSize,
@@ -410,22 +411,25 @@ CheckboxField.propTypes = {
 
 const ChoiceField = /*#__PURE__*/React__default.default.memo(function ChoiceField(props) {
   const {
-    options,
     classNameGroupItem,
     fieldProps,
+    hideMessage,
+    initialValue,
     inputProps,
     isMultiple,
     isRequired,
-    initialValue,
     label,
-    name,
     messageType,
-    hideMessage,
+    name,
+    options,
     placeholder
   } = props;
   const {
     change
   } = reactFinalForm.useForm();
+  const setActiveSegment = React.useCallback((option, isChecked) => {
+    change(name, isChecked && option.value);
+  }, [change]);
   return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
     name: name,
     initialValue: initialValue
@@ -444,9 +448,6 @@ const ChoiceField = /*#__PURE__*/React__default.default.memo(function ChoiceFiel
       }
       return emptyOption;
     }, [input.value]);
-    const setActiveSegment = React.useCallback(option => {
-      change(name, option.value);
-    }, [change]);
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field_type_choice', 'form__item_type_choice', classNameGroupItem),
       fieldClassName: "form-choice",
@@ -466,7 +467,7 @@ const ChoiceField = /*#__PURE__*/React__default.default.memo(function ChoiceFiel
     }, fieldProps), /*#__PURE__*/React__default.default.createElement(Choice.Choice, Object.assign({
       className: clsx__default.default(meta.active && 'form-choice_state_focus', meta.error && meta.touched && 'form-choice_state_error'),
       options: options,
-      inputName: input.name,
+      name: input.name,
       inputValue: input.value || [],
       isMultiple: isMultiple,
       isRequired: isRequired,
@@ -477,13 +478,20 @@ const ChoiceField = /*#__PURE__*/React__default.default.memo(function ChoiceFiel
   });
 });
 ChoiceField.propTypes = {
-  options: PropTypes__default.default.array.isRequired,
-  name: PropTypes__default.default.string.isRequired,
-  className: PropTypes__default.default.string,
-  inputClass: PropTypes__default.default.string,
+  classNameGroupItem: PropTypes__default.default.string,
+  fieldProps: PropTypes__default.default.object,
+  hideMessage: PropTypes__default.default.bool,
+  initialValue: PropTypes__default.default.string,
+  inputProps: PropTypes__default.default.object,
   isMultiple: PropTypes__default.default.bool,
   isRequired: PropTypes__default.default.bool,
   label: PropTypes__default.default.string,
+  messageType: PropTypes__default.default.string,
+  name: PropTypes__default.default.string,
+  options: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({
+    value: PropTypes__default.default.string,
+    label: PropTypes__default.default.string
+  })),
   placeholder: PropTypes__default.default.string
 };
 
@@ -706,7 +714,6 @@ async function convertToFiles(inputValue, isPreviews) {
     //   })
     // }
   }
-
   return newFiles;
 }
 function setFileDataURL(file, resolve) {
@@ -1082,7 +1089,8 @@ const FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(pr
     isPreviews,
     onAddFiles,
     onDeleteFile,
-    classNameGroupItem
+    classNameGroupItem,
+    width
   } = props;
   return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
     name: name
@@ -1104,7 +1112,8 @@ const FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(pr
     metaSubmitFailed: meta.submitFailed,
     metaTouched: meta.touched,
     metaValid: meta.valid,
-    hideMessage: hideMessage
+    hideMessage: hideMessage,
+    width: width
   }, fieldProps), /*#__PURE__*/React__default.default.createElement(FileInputDropzone, {
     dropzoneProps: dropzoneProps,
     hintDescription: hintDescription,
@@ -1638,7 +1647,6 @@ function getDefaultValue(options, selectValue) {
 const SelectField = /*#__PURE__*/React__default.default.memo(function SelectField(props) {
   const {
     isRequired,
-    key,
     name,
     options,
     fieldProps,
@@ -1654,12 +1662,6 @@ const SelectField = /*#__PURE__*/React__default.default.memo(function SelectFiel
     input,
     meta
   }) => {
-    const onChangeField = React.useCallback(value => {
-      input.onChange(value);
-      if (onChange) {
-        onChange(value, input.name);
-      }
-    }, [onChange]);
     const [selectedOptions, setSelectedOptions] = React.useState(null);
     const defaultValue = React.useMemo(() => {
       const optionsValues = getDefaultValue(options, input.value);
@@ -1671,12 +1673,18 @@ const SelectField = /*#__PURE__*/React__default.default.memo(function SelectFiel
       }
       return optionsValues;
     }, [input.value]);
-    React.useEffect(() => setSelectedOptions(defaultValue), [defaultValue]);
+    const onChangeField = React.useCallback(value => {
+      input.onChange(value);
+      if (onChange) {
+        onChange(value, input.name);
+      }
+    }, [onChange]);
     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.useEffect(() => setSelectedOptions(defaultValue), [defaultValue]);
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field_type_select', 'form__item_type_select', classNameGroupItem),
       fieldClassName: 'form-select',
@@ -1697,8 +1705,7 @@ const SelectField = /*#__PURE__*/React__default.default.memo(function SelectFiel
       value: selectedOptions,
       onChange: onChangeValue,
       options: options,
-      ref: selectRef,
-      key: key
+      ref: selectRef
     }, selectProps)));
   });
 });
@@ -2261,7 +2268,7 @@ FinalForm.propTypes = {
   descriptionSize: PropTypes__default.default.string,
   descriptionTextColor: PropTypes__default.default.string,
   descriptionTextWeight: PropTypes__default.default.string,
-  disableFieldsAutoComplete: PropTypes__default.default.string,
+  disableFieldsAutoComplete: PropTypes__default.default.bool,
   fieldsGap: PropTypes__default.default.string,
   formName: PropTypes__default.default.string,
   initialValues: PropTypes__default.default.any,
@@ -2273,10 +2280,10 @@ FinalForm.propTypes = {
   onChangeFormValues: PropTypes__default.default.func,
   onClickSecondaryButton: PropTypes__default.default.func,
   onSubmit: PropTypes__default.default.func,
-  primaryButton: PropTypes__default.default.string,
+  primaryButton: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.element]),
   primaryButtonFill: PropTypes__default.default.string,
   primaryButtonLabel: PropTypes__default.default.string,
-  secondaryButton: PropTypes__default.default.string,
+  secondaryButton: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.element]),
   secondaryButtonFill: PropTypes__default.default.string,
   secondaryButtonLabel: PropTypes__default.default.string,
   set: PropTypes__default.default.string,
@@ -2299,15 +2306,15 @@ FinalForm.defaultProps = {
   disableFieldsAutoComplete: false
 };
 
-Object.defineProperty(exports, 'Field', {
+Object.defineProperty(exports, "Field", {
   enumerable: true,
   get: function () { return reactFinalForm.Field; }
 });
-Object.defineProperty(exports, 'useForm', {
+Object.defineProperty(exports, "useForm", {
   enumerable: true,
   get: function () { return reactFinalForm.useForm; }
 });
-Object.defineProperty(exports, 'useFormState', {
+Object.defineProperty(exports, "useFormState", {
   enumerable: true,
   get: function () { return reactFinalForm.useFormState; }
 });

package/dist/itcase-forms.esm.js

@@ -148,6 +148,7 @@ function FieldWrapperBase(props) {
     metaValid,
     set,
     type,
+    labelHidden,
     hideMessage,
     isHidden,
     tag: Tag,
@@ -204,14 +205,14 @@ function FieldWrapperBase(props) {
     className: clsx(formFieldClass, 'form__item', 'form-field', type && `form-field_type_${type}`, set && `form-field_set_${set}`, sizeClass, fillClass, shapeClass, isHidden && `form-field_state_hidden`, directionClass, widthClass),
     "data-tour": dataTour,
     style: formFieldStyles
-  }, before, label && /*#__PURE__*/React.createElement("div", {
+  }, before, (label || labelHidden) && /*#__PURE__*/React.createElement("div", {
     htmlFor: id,
-    className: "form-field__label"
+    className: clsx('form-field__label')
   }, /*#__PURE__*/React.createElement(Text, {
     size: labelTextSize,
     textWeight: labelTextWidth,
     textColor: labelTextColor
-  }, label)), desc && /*#__PURE__*/React.createElement("div", {
+  }, label, labelHidden && '\u00A0')), desc && /*#__PURE__*/React.createElement("div", {
     className: "form-field__desc"
   }, /*#__PURE__*/React.createElement(Text, {
     size: descTextSize,
@@ -400,22 +401,25 @@ CheckboxField.propTypes = {
 
 const ChoiceField = /*#__PURE__*/React.memo(function ChoiceField(props) {
   const {
-    options,
     classNameGroupItem,
     fieldProps,
+    hideMessage,
+    initialValue,
     inputProps,
     isMultiple,
     isRequired,
-    initialValue,
     label,
-    name,
     messageType,
-    hideMessage,
+    name,
+    options,
     placeholder
   } = props;
   const {
     change
   } = useForm();
+  const setActiveSegment = useCallback((option, isChecked) => {
+    change(name, isChecked && option.value);
+  }, [change]);
   return /*#__PURE__*/React.createElement(Field, {
     name: name,
     initialValue: initialValue
@@ -434,9 +438,6 @@ const ChoiceField = /*#__PURE__*/React.memo(function ChoiceField(props) {
       }
       return emptyOption;
     }, [input.value]);
-    const setActiveSegment = useCallback(option => {
-      change(name, option.value);
-    }, [change]);
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_type_choice', 'form__item_type_choice', classNameGroupItem),
       fieldClassName: "form-choice",
@@ -456,7 +457,7 @@ const ChoiceField = /*#__PURE__*/React.memo(function ChoiceField(props) {
     }, fieldProps), /*#__PURE__*/React.createElement(Choice, Object.assign({
       className: clsx(meta.active && 'form-choice_state_focus', meta.error && meta.touched && 'form-choice_state_error'),
       options: options,
-      inputName: input.name,
+      name: input.name,
       inputValue: input.value || [],
       isMultiple: isMultiple,
       isRequired: isRequired,
@@ -467,13 +468,20 @@ const ChoiceField = /*#__PURE__*/React.memo(function ChoiceField(props) {
   });
 });
 ChoiceField.propTypes = {
-  options: PropTypes.array.isRequired,
-  name: PropTypes.string.isRequired,
-  className: PropTypes.string,
-  inputClass: PropTypes.string,
+  classNameGroupItem: PropTypes.string,
+  fieldProps: PropTypes.object,
+  hideMessage: PropTypes.bool,
+  initialValue: PropTypes.string,
+  inputProps: PropTypes.object,
   isMultiple: PropTypes.bool,
   isRequired: PropTypes.bool,
   label: PropTypes.string,
+  messageType: PropTypes.string,
+  name: PropTypes.string,
+  options: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.string,
+    label: PropTypes.string
+  })),
   placeholder: PropTypes.string
 };
 
@@ -696,7 +704,6 @@ async function convertToFiles(inputValue, isPreviews) {
     //   })
     // }
   }
-
   return newFiles;
 }
 function setFileDataURL(file, resolve) {
@@ -1072,7 +1079,8 @@ const FileInput = /*#__PURE__*/React.memo(function FileInput(props) {
     isPreviews,
     onAddFiles,
     onDeleteFile,
-    classNameGroupItem
+    classNameGroupItem,
+    width
   } = props;
   return /*#__PURE__*/React.createElement(Field, {
     name: name
@@ -1094,7 +1102,8 @@ const FileInput = /*#__PURE__*/React.memo(function FileInput(props) {
     metaSubmitFailed: meta.submitFailed,
     metaTouched: meta.touched,
     metaValid: meta.valid,
-    hideMessage: hideMessage
+    hideMessage: hideMessage,
+    width: width
   }, fieldProps), /*#__PURE__*/React.createElement(FileInputDropzone, {
     dropzoneProps: dropzoneProps,
     hintDescription: hintDescription,
@@ -1628,7 +1637,6 @@ function getDefaultValue(options, selectValue) {
 const SelectField = /*#__PURE__*/React.memo(function SelectField(props) {
   const {
     isRequired,
-    key,
     name,
     options,
     fieldProps,
@@ -1644,12 +1652,6 @@ const SelectField = /*#__PURE__*/React.memo(function SelectField(props) {
     input,
     meta
   }) => {
-    const onChangeField = useCallback(value => {
-      input.onChange(value);
-      if (onChange) {
-        onChange(value, input.name);
-      }
-    }, [onChange]);
     const [selectedOptions, setSelectedOptions] = useState(null);
     const defaultValue = useMemo(() => {
       const optionsValues = getDefaultValue(options, input.value);
@@ -1661,12 +1663,18 @@ const SelectField = /*#__PURE__*/React.memo(function SelectField(props) {
       }
       return optionsValues;
     }, [input.value]);
-    useEffect(() => setSelectedOptions(defaultValue), [defaultValue]);
+    const onChangeField = useCallback(value => {
+      input.onChange(value);
+      if (onChange) {
+        onChange(value, input.name);
+      }
+    }, [onChange]);
     const onChangeValue = useCallback((option, actionMeta) => {
       const value = Array.isArray(option) ? option.map(o => o.value) : option?.value || null;
       setSelectedOptions(option);
       onChangeField(value);
     }, [onChangeField]);
+    useEffect(() => setSelectedOptions(defaultValue), [defaultValue]);
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_type_select', 'form__item_type_select', classNameGroupItem),
       fieldClassName: 'form-select',
@@ -1687,8 +1695,7 @@ const SelectField = /*#__PURE__*/React.memo(function SelectField(props) {
       value: selectedOptions,
       onChange: onChangeValue,
       options: options,
-      ref: selectRef,
-      key: key
+      ref: selectRef
     }, selectProps)));
   });
 });
@@ -2251,7 +2258,7 @@ FinalForm.propTypes = {
   descriptionSize: PropTypes.string,
   descriptionTextColor: PropTypes.string,
   descriptionTextWeight: PropTypes.string,
-  disableFieldsAutoComplete: PropTypes.string,
+  disableFieldsAutoComplete: PropTypes.bool,
   fieldsGap: PropTypes.string,
   formName: PropTypes.string,
   initialValues: PropTypes.any,
@@ -2263,10 +2270,10 @@ FinalForm.propTypes = {
   onChangeFormValues: PropTypes.func,
   onClickSecondaryButton: PropTypes.func,
   onSubmit: PropTypes.func,
-  primaryButton: PropTypes.string,
+  primaryButton: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   primaryButtonFill: PropTypes.string,
   primaryButtonLabel: PropTypes.string,
-  secondaryButton: PropTypes.string,
+  secondaryButton: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   secondaryButtonFill: PropTypes.string,
   secondaryButtonLabel: PropTypes.string,
   set: PropTypes.string,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/forms",
-  "version": "1.0.43",
+  "version": "1.0.45",
   "description": "Forms fields, inputs, etc.",
   "keywords": [],
   "license": "MIT",
@@ -31,13 +31,13 @@
   },
   "dependencies": {
     "@itcase/common": "^1.1.10",
-    "@itcase/ui": "^1.0.81",
+    "@itcase/ui": "^1.0.84",
     "axios": "^1.6.2",
     "clsx": "^2.0.0",
     "date-fns": "2.0.0-alpha.7",
     "final-form": "^4.20.10",
     "final-form-focus": "^1.1.2",
-    "libphonenumber-js": "^1.10.49",
+    "libphonenumber-js": "^1.10.51",
     "lodash": "^4.17.21",
     "luxon": "^3.4.4",
     "prop-types": "^15.8.1",
@@ -49,37 +49,37 @@
     "react-select": "^5.8.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.3",
+    "@babel/core": "^7.23.6",
     "@babel/eslint-parser": "^7.23.3",
-    "@babel/preset-env": "^7.23.3",
+    "@babel/preset-env": "^7.23.6",
     "@babel/preset-react": "^7.23.3",
-    "@commitlint/cli": "^18.4.2",
-    "@commitlint/config-conventional": "^18.4.2",
+    "@commitlint/cli": "^18.4.3",
+    "@commitlint/config-conventional": "^18.4.3",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
-    "@rollup/plugin-json": "^6.0.1",
+    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@semantic-release/git": "^10.0.1",
     "babel-plugin-inline-react-svg": "^2.0.2",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-    "eslint": "8.53.0",
-    "eslint-config-prettier": "^9.0.0",
+    "eslint": "8.55.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard": "^17.1.0",
-    "eslint-plugin-import": "^2.29.0",
-    "eslint-plugin-n": "^16.3.1",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-n": "^16.4.0",
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-standard": "^5.0.0",
     "husky": "^8.0.3",
-    "lint-staged": "^15.1.0",
-    "npm": "^10.2.4",
+    "lint-staged": "^15.2.0",
+    "npm": "^10.2.5",
     "postcss-aspect-ratio-polyfill": "^2.0.0",
-    "postcss-cli": "^10.1.0",
+    "postcss-cli": "^11.0.0",
     "postcss-combine-duplicated-selectors": "^10.0.3",
-    "postcss-dark-theme-class": "^1.0.0",
-    "postcss-discard-duplicates": "^6.0.0",
+    "postcss-dark-theme-class": "^1.1.0",
+    "postcss-discard-duplicates": "^6.0.1",
     "postcss-each": "^1.1.0",
     "postcss-easings": "^4.0.0",
     "postcss-extend-rule": "^4.0.0",
@@ -96,14 +96,14 @@
     "postcss-pxtorem": "^6.0.0",
     "postcss-responsive-type": "github:ITCase/postcss-responsive-type",
     "postcss-sort-media-queries": "^5.2.0",
-    "prettier": "^3.1.0",
-    "react-datepicker": "^4.21.0",
-    "rollup": "^4.4.1",
+    "prettier": "^3.1.1",
+    "react-datepicker": "^4.24.0",
+    "rollup": "^4.9.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "semantic-release": "^22.0.7",
-    "stylelint": "^15.11.0",
-    "stylelint-config-standard": "^34.0.0",
+    "semantic-release": "^22.0.12",
+    "stylelint": "^16.0.2",
+    "stylelint-config-standard": "^35.0.0",
     "stylelint-no-unsupported-browser-features": "^7.0.0",
-    "stylelint-order": "^6.0.3"
+    "stylelint-order": "^6.0.4"
   }
 }