@itcase/forms 1.0.61 → 1.0.63

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;
@@ -540,7 +539,7 @@ const ChoiceField = /*#__PURE__*/React__default.default.memo(function ChoiceFiel
     initialValue,
     inputProps,
     isDisabled,
-    isMultiple,
+    isCheckbox,
     isRequired,
     label,
     messageType,
@@ -617,8 +616,8 @@ const ChoiceField = /*#__PURE__*/React__default.default.memo(function ChoiceFiel
       active: activeOption,
       className: clsx__default.default(meta.active && 'form-choice_state_focus', meta.error && meta.touched && `form-choice_state_${errorKey}`),
       inputValue: input.value || [],
+      isCheckbox: isCheckbox,
       isDisabled: isDisabled,
-      isMultiple: isMultiple,
       isRequired: isRequired,
       name: input.name,
       options: options,
@@ -632,12 +631,16 @@ ChoiceField.propTypes = {
   fieldProps: PropTypes__default.default.object,
   initialValue: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number, PropTypes__default.default.bool]),
   inputProps: PropTypes__default.default.object,
+  isCheckbox: PropTypes__default.default.bool,
   isDisabled: PropTypes__default.default.bool,
-  isMultiple: PropTypes__default.default.bool,
   isRequired: PropTypes__default.default.bool,
   label: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.element]),
   messageType: PropTypes__default.default.string,
   name: PropTypes__default.default.string,
+  options: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({
+    label: PropTypes__default.default.string,
+    value: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number])
+  })),
   placeholder: PropTypes__default.default.string,
   showMessage: PropTypes__default.default.bool,
   onChange: PropTypes__default.default.func
@@ -1498,7 +1501,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,
@@ -2014,7 +2017,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
@@ -2086,7 +2090,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;
@@ -526,7 +525,7 @@ const ChoiceField = /*#__PURE__*/React.memo(function ChoiceField(props) {
     initialValue,
     inputProps,
     isDisabled,
-    isMultiple,
+    isCheckbox,
     isRequired,
     label,
     messageType,
@@ -603,8 +602,8 @@ const ChoiceField = /*#__PURE__*/React.memo(function ChoiceField(props) {
       active: activeOption,
       className: clsx(meta.active && 'form-choice_state_focus', meta.error && meta.touched && `form-choice_state_${errorKey}`),
       inputValue: input.value || [],
+      isCheckbox: isCheckbox,
       isDisabled: isDisabled,
-      isMultiple: isMultiple,
       isRequired: isRequired,
       name: input.name,
       options: options,
@@ -618,12 +617,16 @@ ChoiceField.propTypes = {
   fieldProps: PropTypes.object,
   initialValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
   inputProps: PropTypes.object,
+  isCheckbox: PropTypes.bool,
   isDisabled: PropTypes.bool,
-  isMultiple: PropTypes.bool,
   isRequired: PropTypes.bool,
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   messageType: PropTypes.string,
   name: PropTypes.string,
+  options: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string,
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  })),
   placeholder: PropTypes.string,
   showMessage: PropTypes.bool,
   onChange: PropTypes.func
@@ -1484,7 +1487,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,
@@ -2000,7 +2003,8 @@ const SelectField = /*#__PURE__*/React.memo(function SelectField(props) {
     selectProps,
     selectRef,
     showMessage,
-    onChange
+    onChange,
+    onInputChange
   } = props;
   return /*#__PURE__*/React.createElement(Field, {
     name: name
@@ -2072,7 +2076,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.61",
+  "version": "1.0.63",
   "description": "Forms fields, inputs, etc.",
   "keywords": [],
   "license": "MIT",
@@ -30,20 +30,20 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@itcase/common": "^1.2.1",
-    "@itcase/ui": "^1.1.10",
+    "@itcase/common": "^1.2.2",
+    "@itcase/ui": "^1.1.15",
     "axios": "^1.7.2",
     "clsx": "^2.1.1",
     "final-form": "^4.20.10",
     "final-form-focus": "^1.1.2",
-    "libphonenumber-js": "^1.11.2",
+    "libphonenumber-js": "^1.11.4",
     "lodash": "^4.17.21",
     "luxon": "^3.4.4",
-    "postcss": "^8.4.38",
+    "postcss": "^8.4.39",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-date-range": "^2.0.1",
-    "react-datepicker": "^6.9.0",
+    "react-datepicker": "^7.3.0",
     "react-dom": "^18.3.1",
     "react-dropzone": "^14.2.3",
     "react-final-form": "^6.5.9",
@@ -51,38 +51,39 @@
     "react-select": "^5.8.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.6",
-    "@babel/eslint-parser": "^7.24.6",
-    "@babel/preset-env": "^7.24.6",
-    "@babel/preset-react": "^7.24.6",
+    "@babel/core": "^7.24.9",
+    "@babel/eslint-parser": "^7.24.8",
+    "@babel/preset-env": "^7.24.8",
+    "@babel/preset-react": "^7.24.7",
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
-    "@eslint/compat": "^1.0.1",
+    "@eslint/compat": "^1.1.1",
     "@eslint/eslintrc": "^3.1.0",
-    "@ianvs/prettier-plugin-sort-imports": "^4.2.1",
+    "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
     "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^25.0.8",
+    "@rollup/plugin-commonjs": "^26.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": "9.3.0",
+    "conventional-changelog-conventionalcommits": "^8.0.0",
+    "eslint": "9.7.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": "17.7.0",
+    "eslint-plugin-n": "17.9.0",
     "eslint-plugin-node": "11.1.0",
     "eslint-plugin-prettier": "5.1.3",
-    "eslint-plugin-promise": "6.2.0",
-    "eslint-plugin-react": "7.34.2",
+    "eslint-plugin-promise": "6.4.0",
+    "eslint-plugin-react": "7.34.4",
     "eslint-plugin-react-hooks": "4.6.2",
     "eslint-plugin-standard": "5.0.0",
     "husky": "^9.0.11",
-    "lint-staged": "^15.2.5",
-    "npm": "^10.8.0",
+    "lint-staged": "^15.2.7",
+    "npm": "^10.8.2",
     "postcss-aspect-ratio-polyfill": "^2.0.0",
     "postcss-cli": "^11.0.0",
     "postcss-combine-duplicated-selectors": "^10.0.3",
@@ -100,16 +101,16 @@
     "postcss-nested-ancestors": "^3.0.0",
     "postcss-normalize": "^10.0.1",
     "postcss-prepend-imports": "^1.0.1",
-    "postcss-preset-env": "^9.5.14",
+    "postcss-preset-env": "^9.6.0",
     "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.18.0",
+    "prettier": "3.3.3",
+    "rollup": "^4.18.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "semantic-release": "^23.1.1",
-    "stylelint": "^16.6.1",
-    "stylelint-config-standard": "^36.0.0",
+    "semantic-release": "^24.0.0",
+    "stylelint": "^16.7.0",
+    "stylelint-config-standard": "^36.0.1",
     "stylelint-no-unsupported-browser-features": "^8.0.1",
     "stylelint-order": "^6.0.4"
   }