@itcase/forms 1.0.63 → 1.0.64

package/dist/css/form/Field/Chips/Chips.css

@@ -0,0 +1,27 @@
+.form-chips {
+  &&_state {
+    &_success {
+      & .chips {
+        /* border: solid 1px var(--choice-success-border); */
+      }
+    }
+    &_error {
+      & .chips {
+        /* border: solid 1px var(--choice-error-border); */
+      }
+    }
+    &_focus {
+      /* border: solid 1px var(--choice-focus-border); */
+    }
+  }
+}
+.form-field {
+  &_type_chips {
+  }
+}
+:root {
+  --chips-success-border: var(--color-success-border-primary);
+  --chips-success-border-hover: var(--color-surface-border-quaternary);
+  --chips-error-border: var(--color-error-border-primary);
+  --chips-focus-border: var(--color-surface-border-quaternary);
+}

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

@@ -25,6 +25,16 @@
   }
 }
 
+.form {
+  &-field {
+    &_type_code {
+      ^&__content {
+        justify-content: space-between;
+      }
+    }
+  }
+}
+
 .form {
   &^&-field_type_float {
     position: relative;
@@ -101,4 +111,3 @@
     }
   }
 }
-

package/dist/itcase-forms.cjs.js

@@ -33,6 +33,7 @@ var Select = require('@itcase/ui/components/Select');
 var Switch = require('@itcase/ui/components/Switch');
 var Textarea = require('@itcase/ui/components/Textarea');
 var reactImask = require('react-imask');
+var Chips = require('@itcase/ui/components/Chips');
 var Button = require('@itcase/ui/components/Button');
 var Group$1 = require('@itcase/ui/components/Group');
 var Notification = require('@itcase/ui/components/Notification');
@@ -154,9 +155,11 @@ function FieldWrapperBase(props) {
     labelHidden,
     labelTextColor,
     labelTextSize,
+    labelTextSizeMobile,
     labelTextWeight,
     helpText,
     helpTextSize,
+    helpTextSizeMobile,
     helpTextWeight,
     helpTextColor,
     isErrorState,
@@ -223,6 +226,7 @@ function FieldWrapperBase(props) {
     htmlFor: id
   }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
     size: labelTextSize,
+    sizeMobile: labelTextSizeMobile,
     textColor: labelTextColor,
     textWeight: labelTextWeight
   }, label, labelHidden && '\u00A0')), desc && /*#__PURE__*/React__default.default.createElement("div", {
@@ -256,6 +260,7 @@ function FieldWrapperBase(props) {
     className: "form-field__message-item form-field__message-item_type_help-text",
     dataTestId: `${inputName}FieldMessageHelpText`,
     size: helpTextSize,
+    sizeMobile: helpTextSizeMobile,
     textColor: helpTextColor,
     textWeight: helpTextWeight
   }, helpText), (!isErrorState && !helpText || isErrorState && !helpText && !errorMessage) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
@@ -2371,6 +2376,107 @@ MaskedInputField.propTypes = {
   unmasked: PropTypes__default.default.string
 };
 
+function ChipsField(props) {
+  const {
+    classNameGroupItem,
+    fieldProps,
+    initialValue,
+    inputProps,
+    isDisabled,
+    isRequired,
+    name,
+    options,
+    showMessage,
+    onChange
+  } = props;
+  const {
+    change
+  } = reactFinalForm.useForm();
+
+  // Callback for value changes
+  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.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
+  }, [initialValue]);
+  return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
+    initialValue: initialValue,
+    name: name
+  }, function Render({
+    input,
+    meta
+  }) {
+    const {
+      isErrorState,
+      isValidState,
+      errorKey,
+      errorMessage
+    } = useFieldValidationState({
+      fieldProps: fieldProps,
+      input: input,
+      meta: meta
+    });
+    const updatedInputProps = useValidationAppearanceInputProps({
+      validationStateKey: isErrorState ? errorKey : 'success',
+      inputProps: inputProps
+    });
+    const activeOptionsList = React.useMemo(() => {
+      const emptyOptionsList = [{
+        value: null,
+        label: null
+      }];
+      if (input?.value) {
+        const currentOptions = options.filter(option => input.value?.includes(option.value));
+        return currentOptions || emptyOptionsList;
+      }
+      return emptyOptionsList;
+    }, [input.value]);
+    return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
+      className: clsx__default.default('form-field_type_chips', 'form__item_type_chips', classNameGroupItem),
+      errorKey: errorKey,
+      errorMessage: errorMessage,
+      fieldClassName: 'form-chips',
+      inputName: input.name,
+      inputValue: input.value,
+      isDisabled: isDisabled,
+      isErrorState: isErrorState,
+      isRequired: isRequired,
+      isValidState: isValidState,
+      metaActive: meta.active,
+      metaError: meta.error,
+      showMessage: showMessage
+    }, fieldProps), options.map(option => /*#__PURE__*/React__default.default.createElement(Chips.Chips, Object.assign({
+      isActive: activeOptionsList.includes(option),
+      className: clsx__default.default(meta.active && 'form-chips_state_focus', meta.error && meta.touched && `form-chips_state_${errorKey}`),
+      key: option.value,
+      label: option.label,
+      value: option.value,
+      onClick: () => onChangeSomeInput(input.value, option.value)
+    }, updatedInputProps))));
+  });
+}
+ChipsField.propTypes = {
+  classNameGroupItem: PropTypes__default.default.string,
+  fieldProps: PropTypes__default.default.object,
+  initialValue: PropTypes__default.default.array,
+  input: PropTypes__default.default.object,
+  inputProps: PropTypes__default.default.object,
+  isDisabled: PropTypes__default.default.bool,
+  isRequired: PropTypes__default.default.bool,
+  name: PropTypes__default.default.string,
+  options: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({
+    value: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number, PropTypes__default.default.bool]),
+    label: PropTypes__default.default.string
+  })),
+  showMessage: PropTypes__default.default.bool,
+  onChange: PropTypes__default.default.func
+};
+
 const focusOnError = (formElementsList, errors) => {
   const selectsIds = Object.keys(errors).map(fieldName => {
     if (fieldName === finalForm.FORM_ERROR) {
@@ -2485,6 +2591,7 @@ const formTypes = {
   checkbox: 'checkbox',
   custom: 'custom',
   choice: 'choice',
+  chips: 'chips',
   code: 'code',
   datePicker: 'datePicker',
   dateRangePicker: 'dateRangePicker',
@@ -2512,6 +2619,12 @@ function generateField(field, config, props) {
           key: config.key
         }, field, props));
       }
+    case formTypes.chips:
+      {
+        return /*#__PURE__*/React__default.default.createElement(ChipsField, Object.assign({
+          key: config.key
+        }, field, props));
+      }
     case formTypes.code:
       {
         return /*#__PURE__*/React__default.default.createElement(CodeField, Object.assign({
@@ -3030,6 +3143,7 @@ Object.defineProperty(exports, "useFormState", {
   get: function () { return reactFinalForm.useFormState; }
 });
 exports.Checkbox = CheckboxField;
+exports.ChipsField = ChipsField;
 exports.ChoiceField = ChoiceField;
 exports.CodeField = CodeField;
 exports.CustomField = CustomField;

package/dist/itcase-forms.esm.js

@@ -32,6 +32,7 @@ import { Select } from '@itcase/ui/components/Select';
 import { Switch } from '@itcase/ui/components/Switch';
 import { Textarea } from '@itcase/ui/components/Textarea';
 import { useIMask } from 'react-imask';
+import { Chips } from '@itcase/ui/components/Chips';
 import { Button } from '@itcase/ui/components/Button';
 import { Group as Group$1 } from '@itcase/ui/components/Group';
 import { NotificationItem } from '@itcase/ui/components/Notification';
@@ -140,9 +141,11 @@ function FieldWrapperBase(props) {
     labelHidden,
     labelTextColor,
     labelTextSize,
+    labelTextSizeMobile,
     labelTextWeight,
     helpText,
     helpTextSize,
+    helpTextSizeMobile,
     helpTextWeight,
     helpTextColor,
     isErrorState,
@@ -209,6 +212,7 @@ function FieldWrapperBase(props) {
     htmlFor: id
   }, /*#__PURE__*/React.createElement(Text, {
     size: labelTextSize,
+    sizeMobile: labelTextSizeMobile,
     textColor: labelTextColor,
     textWeight: labelTextWeight
   }, label, labelHidden && '\u00A0')), desc && /*#__PURE__*/React.createElement("div", {
@@ -242,6 +246,7 @@ function FieldWrapperBase(props) {
     className: "form-field__message-item form-field__message-item_type_help-text",
     dataTestId: `${inputName}FieldMessageHelpText`,
     size: helpTextSize,
+    sizeMobile: helpTextSizeMobile,
     textColor: helpTextColor,
     textWeight: helpTextWeight
   }, helpText), (!isErrorState && !helpText || isErrorState && !helpText && !errorMessage) && /*#__PURE__*/React.createElement(Text, {
@@ -2357,6 +2362,107 @@ MaskedInputField.propTypes = {
   unmasked: PropTypes.string
 };
 
+function ChipsField(props) {
+  const {
+    classNameGroupItem,
+    fieldProps,
+    initialValue,
+    inputProps,
+    isDisabled,
+    isRequired,
+    name,
+    options,
+    showMessage,
+    onChange
+  } = props;
+  const {
+    change
+  } = useForm();
+
+  // Callback for value changes
+  const onChangeSomeInput = useCallback((inputValue, newOptionValue) => {
+    const updatedValues = inputValue.includes(newOptionValue) ? inputValue.filter(selectedValue => selectedValue !== newOptionValue) : [...inputValue, newOptionValue];
+    change(name, updatedValues);
+    onChange && onChange(updatedValues);
+  }, [change, name, onChange]);
+  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
+  }, [initialValue]);
+  return /*#__PURE__*/React.createElement(Field, {
+    initialValue: initialValue,
+    name: name
+  }, function Render({
+    input,
+    meta
+  }) {
+    const {
+      isErrorState,
+      isValidState,
+      errorKey,
+      errorMessage
+    } = useFieldValidationState({
+      fieldProps: fieldProps,
+      input: input,
+      meta: meta
+    });
+    const updatedInputProps = useValidationAppearanceInputProps({
+      validationStateKey: isErrorState ? errorKey : 'success',
+      inputProps: inputProps
+    });
+    const activeOptionsList = useMemo(() => {
+      const emptyOptionsList = [{
+        value: null,
+        label: null
+      }];
+      if (input?.value) {
+        const currentOptions = options.filter(option => input.value?.includes(option.value));
+        return currentOptions || emptyOptionsList;
+      }
+      return emptyOptionsList;
+    }, [input.value]);
+    return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
+      className: clsx('form-field_type_chips', 'form__item_type_chips', classNameGroupItem),
+      errorKey: errorKey,
+      errorMessage: errorMessage,
+      fieldClassName: 'form-chips',
+      inputName: input.name,
+      inputValue: input.value,
+      isDisabled: isDisabled,
+      isErrorState: isErrorState,
+      isRequired: isRequired,
+      isValidState: isValidState,
+      metaActive: meta.active,
+      metaError: meta.error,
+      showMessage: showMessage
+    }, fieldProps), options.map(option => /*#__PURE__*/React.createElement(Chips, Object.assign({
+      isActive: activeOptionsList.includes(option),
+      className: clsx(meta.active && 'form-chips_state_focus', meta.error && meta.touched && `form-chips_state_${errorKey}`),
+      key: option.value,
+      label: option.label,
+      value: option.value,
+      onClick: () => onChangeSomeInput(input.value, option.value)
+    }, updatedInputProps))));
+  });
+}
+ChipsField.propTypes = {
+  classNameGroupItem: PropTypes.string,
+  fieldProps: PropTypes.object,
+  initialValue: PropTypes.array,
+  input: PropTypes.object,
+  inputProps: PropTypes.object,
+  isDisabled: PropTypes.bool,
+  isRequired: PropTypes.bool,
+  name: PropTypes.string,
+  options: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
+    label: PropTypes.string
+  })),
+  showMessage: PropTypes.bool,
+  onChange: PropTypes.func
+};
+
 const focusOnError = (formElementsList, errors) => {
   const selectsIds = Object.keys(errors).map(fieldName => {
     if (fieldName === FORM_ERROR) {
@@ -2471,6 +2577,7 @@ const formTypes = {
   checkbox: 'checkbox',
   custom: 'custom',
   choice: 'choice',
+  chips: 'chips',
   code: 'code',
   datePicker: 'datePicker',
   dateRangePicker: 'dateRangePicker',
@@ -2498,6 +2605,12 @@ function generateField(field, config, props) {
           key: config.key
         }, field, props));
       }
+    case formTypes.chips:
+      {
+        return /*#__PURE__*/React.createElement(ChipsField, Object.assign({
+          key: config.key
+        }, field, props));
+      }
     case formTypes.code:
       {
         return /*#__PURE__*/React.createElement(CodeField, Object.assign({
@@ -3003,4 +3116,4 @@ const DEFAULT_MESSAGES_FIELDS = {
   }
 };
 
-export { CheckboxField as Checkbox, ChoiceField, CodeField, CustomField, DEFAULT_MESSAGES_FIELDS, DatePickerField, FieldWrapper, FieldWrapperBase, FileInput, FinalForm, Group, InputField, MaskedInputField, RadioGroup, SegmentedField, SelectField, SwitchField as Switch, TextareaField as Textarea, addRequiredFieldsParamToSchema, emailValidation, focusOnError, focusOnErrorDecorator, formTypes, generateField, phoneValidation, sendFormDataToServer, setErrorsMutator, useYupValidationSchema };
+export { CheckboxField as Checkbox, ChipsField, ChoiceField, CodeField, CustomField, DEFAULT_MESSAGES_FIELDS, DatePickerField, FieldWrapper, FieldWrapperBase, FileInput, FinalForm, Group, InputField, MaskedInputField, RadioGroup, SegmentedField, SelectField, SwitchField as Switch, TextareaField as Textarea, addRequiredFieldsParamToSchema, emailValidation, focusOnError, focusOnErrorDecorator, formTypes, generateField, phoneValidation, sendFormDataToServer, setErrorsMutator, useYupValidationSchema };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/forms",
-  "version": "1.0.63",
+  "version": "1.0.64",
   "description": "Forms fields, inputs, etc.",
   "keywords": [],
   "license": "MIT",
@@ -30,16 +30,16 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@itcase/common": "^1.2.2",
-    "@itcase/ui": "^1.1.15",
-    "axios": "^1.7.2",
+    "@itcase/common": "^1.2.6",
+    "@itcase/ui": "^1.1.21",
+    "axios": "^1.7.3",
     "clsx": "^2.1.1",
     "final-form": "^4.20.10",
     "final-form-focus": "^1.1.2",
-    "libphonenumber-js": "^1.11.4",
+    "libphonenumber-js": "^1.11.5",
     "lodash": "^4.17.21",
-    "luxon": "^3.4.4",
-    "postcss": "^8.4.39",
+    "luxon": "^3.5.0",
+    "postcss": "^8.4.41",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-date-range": "^2.0.1",
@@ -51,9 +51,10 @@
     "react-select": "^5.8.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.9",
-    "@babel/eslint-parser": "^7.24.8",
-    "@babel/preset-env": "^7.24.8",
+    "@itcase/lint": "^1.0.8",
+    "@babel/core": "^7.25.2",
+    "@babel/eslint-parser": "^7.25.1",
+    "@babel/preset-env": "^7.25.3",
     "@babel/preset-react": "^7.24.7",
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
@@ -65,24 +66,28 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
+    "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
+    "@semantic-release/release-notes-generator": "14.0.1",
+    "@types/react": "^18",
+    "@types/react-dom": "^18.3.0",
     "babel-plugin-inline-react-svg": "^2.0.2",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "conventional-changelog-conventionalcommits": "^8.0.0",
-    "eslint": "9.7.0",
+    "eslint": "9.8.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.9.0",
+    "eslint-plugin-n": "17.10.2",
     "eslint-plugin-node": "11.1.0",
-    "eslint-plugin-prettier": "5.1.3",
-    "eslint-plugin-promise": "6.4.0",
-    "eslint-plugin-react": "7.34.4",
+    "eslint-plugin-prettier": "5.2.1",
+    "eslint-plugin-promise": "7.0.0",
+    "eslint-plugin-react": "7.35.0",
     "eslint-plugin-react-hooks": "4.6.2",
     "eslint-plugin-standard": "5.0.0",
-    "husky": "^9.0.11",
-    "lint-staged": "^15.2.7",
+    "husky": "^9.1.4",
+    "lint-staged": "^15.2.8",
     "npm": "^10.8.2",
     "postcss-aspect-ratio-polyfill": "^2.0.0",
     "postcss-cli": "^11.0.0",
@@ -97,21 +102,22 @@
     "postcss-import": "^16.1.0",
     "postcss-import-ext-glob": "^2.1.1",
     "postcss-mixins": "^10.0.1",
-    "postcss-nested": "^6.0.1",
+    "postcss-nested": "^6.2.0",
     "postcss-nested-ancestors": "^3.0.0",
     "postcss-normalize": "^10.0.1",
     "postcss-prepend-imports": "^1.0.1",
-    "postcss-preset-env": "^9.6.0",
+    "postcss-preset-env": "^10.0.0",
     "postcss-pxtorem": "^6.1.0",
     "postcss-responsive-type": "github:ITCase/postcss-responsive-type",
     "postcss-sort-media-queries": "^5.2.0",
     "prettier": "3.3.3",
-    "rollup": "^4.18.1",
+    "rollup": "^4.20.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "semantic-release": "^24.0.0",
-    "stylelint": "^16.7.0",
+    "stylelint": "^16.8.1",
     "stylelint-config-standard": "^36.0.1",
     "stylelint-no-unsupported-browser-features": "^8.0.1",
-    "stylelint-order": "^6.0.4"
+    "stylelint-order": "^6.0.4",
+    "typescript": "^5.5.4"
   }
 }