@itcase/forms 1.0.60 → 1.0.62

package/dist/css/form/FormField/FormField.css

@@ -1,25 +1,30 @@
+/* stylelint-disable plugin/no-unsupported-browser-features */
+
 .form-field {
   &__content {
     &-inner {
+      position: relative;
       display: flex;
       gap: 20px;
-      position: relative;
     }
   }
   &__message {
     &-item {
+      height: var(--form-field-helptext-height, 20px);
+      line-height: var(--form-field-helptext-line-height, 20px);
       display: block;
     }
   }
   &__icon {
-    position: absolute;
-    right: 8px;
-    top: 0;
     height: 100%;
+    position: absolute;
     display: flex;
     align-items: center;
+    top: 0;
+    right: 8px;
   }
 }
+
 .form {
   &^&-field_type_float {
     position: relative;
@@ -68,6 +73,7 @@
     }
   }
 }
+
 .form-field {
   &_type {
     &_normal {
@@ -78,6 +84,7 @@
     }
   }
 }
+
 .form-field {
   &_state {
     &_hidden {
@@ -87,6 +94,7 @@
     }
   }
 }
+
 .form-field {
   &_state {
     &_disabled {

package/dist/itcase-forms.cjs.js

@@ -138,7 +138,7 @@ function FieldWrapperBase(props) {
     desc,
     descTextColor,
     descTextSize,
-    descTextWidth,
+    descTextWeight,
     dividerDirection,
     dividerFill,
     dividerSize,
@@ -154,7 +154,7 @@ function FieldWrapperBase(props) {
     labelHidden,
     labelTextColor,
     labelTextSize,
-    labelTextWidth,
+    labelTextWeight,
     helpText,
     helpTextSize,
     helpTextWeight,
@@ -224,14 +224,14 @@ function FieldWrapperBase(props) {
   }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
     size: labelTextSize,
     textColor: labelTextColor,
-    textWeight: labelTextWidth
+    textWeight: labelTextWeight
   }, label, labelHidden && '\u00A0')), desc && /*#__PURE__*/React__default.default.createElement("div", {
     className: "form-field__desc",
     "data-test-id": `${inputName}FieldDesc`
   }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
     size: descTextSize,
     textColor: descTextColor,
-    textWeight: descTextWidth
+    textWeight: descTextWeight
   }, desc)), /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default('form-field__content', inputFillClass, inputShapeClass)
   }, /*#__PURE__*/React__default.default.createElement("div", {
@@ -284,7 +284,7 @@ FieldWrapperBase.propTypes = {
   desc: PropTypes__default.default.string,
   descTextColor: PropTypes__default.default.string,
   descTextSize: PropTypes__default.default.string,
-  descTextWidth: PropTypes__default.default.string,
+  descTextWeight: PropTypes__default.default.string,
   dividerDirection: PropTypes__default.default.string,
   dividerFill: PropTypes__default.default.string,
   dividerSize: PropTypes__default.default.string,
@@ -304,13 +304,12 @@ FieldWrapperBase.propTypes = {
   labelHidden: PropTypes__default.default.bool,
   labelTextColor: PropTypes__default.default.string,
   labelTextSize: PropTypes__default.default.string,
-  labelTextWidth: PropTypes__default.default.string,
+  labelTextWeight: PropTypes__default.default.string,
   message: PropTypes__default.default.string,
   messageSize: PropTypes__default.default.string,
   messageTextColor: PropTypes__default.default.string,
   messageTextSize: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number]),
   messageTextWeight: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number]),
-  messageTextWidth: PropTypes__default.default.string,
   metaActive: PropTypes__default.default.bool,
   metaError: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.bool]),
   set: PropTypes__default.default.string,
@@ -339,9 +338,9 @@ FieldWrapper.propTypes = FieldWrapperBase.propTypes;
 // Whether to display an error message based on "fieldProps" and meta-objects
 function useFieldValidationState(props) {
   const {
-    fieldProps,
-    meta,
-    input
+    fieldProps = {},
+    meta = {},
+    input = {}
   } = props;
   // Determines if there's a submission error that hasn't been rectified since the last submission.
   const submitError = !meta.modifiedSinceLastSubmit && meta.submitError;
@@ -638,7 +637,6 @@ ChoiceField.propTypes = {
   label: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.element]),
   messageType: PropTypes__default.default.string,
   name: PropTypes__default.default.string,
-  options: Choice.Choice.propTypes.options,
   placeholder: PropTypes__default.default.string,
   showMessage: PropTypes__default.default.bool,
   onChange: PropTypes__default.default.func
@@ -1499,7 +1497,7 @@ const Group = /*#__PURE__*/React__default.default.memo(function Group(props) {
       "data-tour": dataTour
     }, /*#__PURE__*/React__default.default.createElement("div", {
       className: "form__group-wrapper"
-    }, before, /*#__PURE__*/React__default.default.createElement("div", {
+    }, before, label && /*#__PURE__*/React__default.default.createElement("div", {
       className: "form__group-label"
     }, /*#__PURE__*/React__default.default.createElement(Title.Title, {
       size: labelTextSize,
@@ -2015,7 +2013,8 @@ const SelectField = /*#__PURE__*/React__default.default.memo(function SelectFiel
     selectProps,
     selectRef,
     showMessage,
-    onChange
+    onChange,
+    onInputChange
   } = props;
   return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
     name: name
@@ -2087,7 +2086,8 @@ const SelectField = /*#__PURE__*/React__default.default.memo(function SelectFiel
       options: options,
       ref: selectRef,
       value: selectedOptions,
-      onChange: onChangeValue
+      onChange: onChangeValue,
+      onInputChange: onInputChange
     }, updatedSelectProps)));
   });
 });

package/dist/itcase-forms.esm.js

@@ -124,7 +124,7 @@ function FieldWrapperBase(props) {
     desc,
     descTextColor,
     descTextSize,
-    descTextWidth,
+    descTextWeight,
     dividerDirection,
     dividerFill,
     dividerSize,
@@ -140,7 +140,7 @@ function FieldWrapperBase(props) {
     labelHidden,
     labelTextColor,
     labelTextSize,
-    labelTextWidth,
+    labelTextWeight,
     helpText,
     helpTextSize,
     helpTextWeight,
@@ -210,14 +210,14 @@ function FieldWrapperBase(props) {
   }, /*#__PURE__*/React.createElement(Text, {
     size: labelTextSize,
     textColor: labelTextColor,
-    textWeight: labelTextWidth
+    textWeight: labelTextWeight
   }, label, labelHidden && '\u00A0')), desc && /*#__PURE__*/React.createElement("div", {
     className: "form-field__desc",
     "data-test-id": `${inputName}FieldDesc`
   }, /*#__PURE__*/React.createElement(Text, {
     size: descTextSize,
     textColor: descTextColor,
-    textWeight: descTextWidth
+    textWeight: descTextWeight
   }, desc)), /*#__PURE__*/React.createElement("div", {
     className: clsx('form-field__content', inputFillClass, inputShapeClass)
   }, /*#__PURE__*/React.createElement("div", {
@@ -270,7 +270,7 @@ FieldWrapperBase.propTypes = {
   desc: PropTypes.string,
   descTextColor: PropTypes.string,
   descTextSize: PropTypes.string,
-  descTextWidth: PropTypes.string,
+  descTextWeight: PropTypes.string,
   dividerDirection: PropTypes.string,
   dividerFill: PropTypes.string,
   dividerSize: PropTypes.string,
@@ -290,13 +290,12 @@ FieldWrapperBase.propTypes = {
   labelHidden: PropTypes.bool,
   labelTextColor: PropTypes.string,
   labelTextSize: PropTypes.string,
-  labelTextWidth: PropTypes.string,
+  labelTextWeight: PropTypes.string,
   message: PropTypes.string,
   messageSize: PropTypes.string,
   messageTextColor: PropTypes.string,
   messageTextSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   messageTextWeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  messageTextWidth: PropTypes.string,
   metaActive: PropTypes.bool,
   metaError: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   set: PropTypes.string,
@@ -325,9 +324,9 @@ FieldWrapper.propTypes = FieldWrapperBase.propTypes;
 // Whether to display an error message based on "fieldProps" and meta-objects
 function useFieldValidationState(props) {
   const {
-    fieldProps,
-    meta,
-    input
+    fieldProps = {},
+    meta = {},
+    input = {}
   } = props;
   // Determines if there's a submission error that hasn't been rectified since the last submission.
   const submitError = !meta.modifiedSinceLastSubmit && meta.submitError;
@@ -624,7 +623,6 @@ ChoiceField.propTypes = {
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   messageType: PropTypes.string,
   name: PropTypes.string,
-  options: Choice.propTypes.options,
   placeholder: PropTypes.string,
   showMessage: PropTypes.bool,
   onChange: PropTypes.func
@@ -1485,7 +1483,7 @@ const Group = /*#__PURE__*/React.memo(function Group(props) {
       "data-tour": dataTour
     }, /*#__PURE__*/React.createElement("div", {
       className: "form__group-wrapper"
-    }, before, /*#__PURE__*/React.createElement("div", {
+    }, before, label && /*#__PURE__*/React.createElement("div", {
       className: "form__group-label"
     }, /*#__PURE__*/React.createElement(Title, {
       size: labelTextSize,
@@ -2001,7 +1999,8 @@ const SelectField = /*#__PURE__*/React.memo(function SelectField(props) {
     selectProps,
     selectRef,
     showMessage,
-    onChange
+    onChange,
+    onInputChange
   } = props;
   return /*#__PURE__*/React.createElement(Field, {
     name: name
@@ -2073,7 +2072,8 @@ const SelectField = /*#__PURE__*/React.memo(function SelectField(props) {
       options: options,
       ref: selectRef,
       value: selectedOptions,
-      onChange: onChangeValue
+      onChange: onChangeValue,
+      onInputChange: onInputChange
     }, updatedSelectProps)));
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/forms",
-  "version": "1.0.60",
+  "version": "1.0.62",
   "description": "Forms fields, inputs, etc.",
   "keywords": [],
   "license": "MIT",
@@ -30,63 +30,64 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@itcase/common": "^1.1.16",
-    "@itcase/ui": "^1.1.7",
-    "axios": "^1.6.8",
-    "clsx": "^2.1.0",
-    "date-fns": "2.0.0-alpha.7",
+    "@itcase/common": "^1.2.1",
+    "@itcase/ui": "^1.1.10",
+    "axios": "^1.7.2",
+    "clsx": "^2.1.1",
     "final-form": "^4.20.10",
     "final-form-focus": "^1.1.2",
-    "libphonenumber-js": "^1.10.60",
+    "libphonenumber-js": "^1.11.2",
     "lodash": "^4.17.21",
     "luxon": "^3.4.4",
     "postcss": "^8.4.38",
     "prop-types": "^15.8.1",
-    "react": "^18.2.0",
-    "react-date-range": "^1.4.0",
-    "react-datepicker": "^6.6.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-date-range": "^2.0.1",
+    "react-datepicker": "^6.9.0",
+    "react-dom": "^18.3.1",
     "react-dropzone": "^14.2.3",
     "react-final-form": "^6.5.9",
-    "react-imask": "^7.6.0",
+    "react-imask": "^7.6.1",
     "react-select": "^5.8.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.4",
-    "@babel/eslint-parser": "^7.24.1",
-    "@babel/preset-env": "^7.24.4",
-    "@babel/preset-react": "^7.24.1",
-    "@commitlint/cli": "^19.2.1",
-    "@commitlint/config-conventional": "^19.1.0",
+    "@babel/core": "^7.24.6",
+    "@babel/eslint-parser": "^7.24.6",
+    "@babel/preset-env": "^7.24.6",
+    "@babel/preset-react": "^7.24.6",
+    "@commitlint/cli": "^19.3.0",
+    "@commitlint/config-conventional": "^19.2.2",
+    "@eslint/compat": "^1.0.1",
+    "@eslint/eslintrc": "^3.1.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.2.1",
     "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-commonjs": "^25.0.8",
     "@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.57.0",
+    "eslint": "9.3.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-config-standard": "17.1.0",
     "eslint-plugin-babel": "5.3.1",
     "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-n": "16.6.2",
+    "eslint-plugin-n": "17.7.0",
     "eslint-plugin-node": "11.1.0",
     "eslint-plugin-prettier": "5.1.3",
-    "eslint-plugin-promise": "6.1.1",
-    "eslint-plugin-react": "7.34.1",
-    "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-promise": "6.2.0",
+    "eslint-plugin-react": "7.34.2",
+    "eslint-plugin-react-hooks": "4.6.2",
     "eslint-plugin-standard": "5.0.0",
     "husky": "^9.0.11",
-    "lint-staged": "^15.2.2",
-    "npm": "^10.5.2",
+    "lint-staged": "^15.2.5",
+    "npm": "^10.8.0",
     "postcss-aspect-ratio-polyfill": "^2.0.0",
     "postcss-cli": "^11.0.0",
     "postcss-combine-duplicated-selectors": "^10.0.3",
-    "postcss-dark-theme-class": "^1.2.1",
-    "postcss-discard-duplicates": "^6.0.3",
+    "postcss-dark-theme-class": "^1.3.0",
+    "postcss-discard-duplicates": "^7.0.0",
     "postcss-each": "^1.1.0",
     "postcss-easings": "^4.0.0",
     "postcss-extend-rule": "^4.0.0",
@@ -94,20 +95,20 @@
     "postcss-hexrgba": "^2.1.0",
     "postcss-import": "^16.1.0",
     "postcss-import-ext-glob": "^2.1.1",
-    "postcss-mixins": "^10.0.0",
+    "postcss-mixins": "^10.0.1",
     "postcss-nested": "^6.0.1",
     "postcss-nested-ancestors": "^3.0.0",
     "postcss-normalize": "^10.0.1",
     "postcss-prepend-imports": "^1.0.1",
-    "postcss-preset-env": "^9.5.4",
+    "postcss-preset-env": "^9.5.14",
     "postcss-pxtorem": "^6.1.0",
     "postcss-responsive-type": "github:ITCase/postcss-responsive-type",
     "postcss-sort-media-queries": "^5.2.0",
     "prettier": "3.2.5",
-    "rollup": "^4.14.1",
+    "rollup": "^4.18.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "semantic-release": "^23.0.8",
-    "stylelint": "^16.3.1",
+    "semantic-release": "^23.1.1",
+    "stylelint": "^16.6.1",
     "stylelint-config-standard": "^36.0.0",
     "stylelint-no-unsupported-browser-features": "^8.0.1",
     "stylelint-order": "^6.0.4"