@itcase/forms 1.0.20 → 1.0.22

package/dist/css/form/Field/Checkbox/Checkbox.css

@@ -12,7 +12,7 @@
     }
     &_focus {
       & .checkbox__state {
-        background: var(--color-surface-primary);
+        /* border: solid 1px var(--color-error-border-primary); */
       }
     }
   }
@@ -30,7 +30,7 @@
       align-self: flex-start;
       grid-row: 1;
       &-inner {
-        padding: 4px 0 0 0;
+        padding: 2px 0 0 0;
       }
     }
     ^&__message {

package/dist/css/form/Field/Choice/Choice.css

@@ -1,44 +1,13 @@
-.form-tab-selector {
-  &__wrapper {
-    position: relative;
-    display: flex;
-    flex-flow: row wrap;
-    gap: 16px;
-  }
-  &__item {
-    background: var(--color-surface-primary);
-    padding: 3px 12px;
-    border: solid 1px var(--color-surface-border-secondary);
-    border-radius: 4px;
-    z-index: 1;
-    cursor: pointer;
-    @mixin easing easeOutQuart, all, 0.2s;
-    @mixin h5 300;
-    @media (--mobile) {
-      padding: 6px 6px;
-    }
-    &:hover {
-      background: var(--color-surface-secondary-hover);
-    }
-    &:focus {
-      background: var(--color-surface-secondary-hover);
-    }
-    &&_state_active {
-      color: var(--color-accent-text-primary);
-      background: var(--color-accent);
-      border: solid 1px var(--color-surface-border-accent);
-      &:hover {
-        color: var(--color-accent-text-primary);
-        background: var(--color-accent-hover-primary);
-        border: solid 1px var(--color-surface-border-accent);
-      }
+.form-choice {
+  &&_state {
+    &_success {
+      border: solid 1px var(--color-success-border-primary);
     }
-  }
-  &&_state_error {
-    ^&__item {
+    &_error {
       border: solid 1px var(--color-error-border-primary);
     }
-  }
-  &&_state_success {
+    &_focus {
+      /* border: solid 1px var(--color-error-border-primary); */
+    }
   }
 }

package/dist/css/form/Field/Segmented/Segmented.css

@@ -1,12 +1,16 @@
 .form-segmented {
-  &_state_success {
+  &_state_error {
     & .segmented {
-      border: solid 1px var(--color-success-border-primary);
+      &__item-label-text {
+        color: var(--color-error-text-primary);
+      }
     }
   }
-  &_state_error {
+  &_state_required {
     & .segmented {
-      border: solid 1px var(--color-error-border-primary);
+      &__item-label-text {
+        color: var(--color-active-text-primary);
+      }
     }
   }
 }

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

@@ -203,6 +203,9 @@
       top: 20px;
       left: 0;
     }
+    &_global {
+      margin: 0 0 16px 0;
+    }
   }
   &__item {
     text-align: center;

package/dist/css/form/Form/css/form-notification/form-notification.css

@@ -6,6 +6,9 @@
       top: 20px;
       left: 0;
     }
+    &_global {
+      margin: 0 0 16px 0;
+    }
   }
   &__item {
     text-align: center;

package/dist/itcase-forms.cjs.js

@@ -56,9 +56,10 @@ var emailValidation = function emailValidation(value, context) {
 var addRequiredFieldsParamToSchema = function addRequiredFieldsParamToSchema(schema) {
   var fields = Object.entries(schema.fields);
   schema.requiredFields = fields.reduce(function (list, _ref) {
+    var _validationProps$excl;
     var fieldName = _ref[0],
       validationProps = _ref[1];
-    if (validationProps.exclusiveTests.required) {
+    if ((_validationProps$excl = validationProps.exclusiveTests) != null && _validationProps$excl.required) {
       list.push(fieldName);
     }
     return list;
@@ -795,10 +796,10 @@ CheckboxField.propTypes = {
 };
 
 var ChoiceField = /*#__PURE__*/React__default.default.memo(function ChoiceField(props) {
-  var options = props.options;
-    props.classNameInput;
-    props.classNameInputWrapper;
-    var classNameGroupItem = props.classNameGroupItem,
+  var options = props.options,
+    classNameGroupItem = props.classNameGroupItem,
+    fieldProps = props.fieldProps,
+    inputProps = props.inputProps,
     isMultiple = props.isMultiple,
     isRequired = props.isRequired,
     label = props.label,
@@ -813,8 +814,8 @@ var ChoiceField = /*#__PURE__*/React__default.default.memo(function ChoiceField(
   }, function (_ref) {
     var input = _ref.input,
       meta = _ref.meta;
-    return /*#__PURE__*/React__default.default.createElement(FieldWrapper, {
-      className: clsx__default.default('form-field_type_tab-selector', 'form__item_type_tab-selector', classNameGroupItem),
+    return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
+      className: clsx__default.default('form-field_type_choice', 'form__item_type_choice', classNameGroupItem),
       inputName: input.name,
       inputValue: input.value || [],
       isRequired: isRequired,
@@ -828,7 +829,7 @@ var ChoiceField = /*#__PURE__*/React__default.default.memo(function ChoiceField(
       metaTouched: meta.touched,
       metaValid: meta.valid,
       hideMessage: hideMessage
-    }, /*#__PURE__*/React__default.default.createElement(Choice.Choice, {
+    }, fieldProps), /*#__PURE__*/React__default.default.createElement(Choice.Choice, Object.assign({
       options: options,
       inputName: input.name,
       inputValue: input.value || [],
@@ -836,7 +837,7 @@ var ChoiceField = /*#__PURE__*/React__default.default.memo(function ChoiceField(
       isRequired: isRequired,
       placeholder: placeholder,
       onChange: change
-    }));
+    }, inputProps)));
   });
 });
 ChoiceField.propTypes = {
@@ -2573,10 +2574,12 @@ var FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalFor
         textColor: descriptionTextColor,
         textWeight: descriptionTextWeight
       }, description), submitError && !modifiedSinceLastSubmit && /*#__PURE__*/React__default.default.createElement("div", {
-        className: clsx__default.default('notification', 'form-notification', notificationType && "form-notification_type_" + notificationType)
+        className: clsx__default.default('notification', 'form-notification', notificationType ? "form-notification_type_" + notificationType : 'form-notification_type_global')
       }, /*#__PURE__*/React__default.default.createElement(Notification.NotificationItem, {
         className: "form-notification__item",
-        text: form.getState().submitError,
+        titleTextSize: "h6",
+        title: form.getState().submitError,
+        set: "form",
         status: "error"
       })), onChangeFormValues && /*#__PURE__*/React__default.default.createElement(reactFinalForm.FormSpy, {
         subscription: {

package/dist/itcase-forms.esm.js

@@ -46,9 +46,10 @@ var emailValidation = function emailValidation(value, context) {
 var addRequiredFieldsParamToSchema = function addRequiredFieldsParamToSchema(schema) {
   var fields = Object.entries(schema.fields);
   schema.requiredFields = fields.reduce(function (list, _ref) {
+    var _validationProps$excl;
     var fieldName = _ref[0],
       validationProps = _ref[1];
-    if (validationProps.exclusiveTests.required) {
+    if ((_validationProps$excl = validationProps.exclusiveTests) != null && _validationProps$excl.required) {
       list.push(fieldName);
     }
     return list;
@@ -785,10 +786,10 @@ CheckboxField.propTypes = {
 };
 
 var ChoiceField = /*#__PURE__*/React.memo(function ChoiceField(props) {
-  var options = props.options;
-    props.classNameInput;
-    props.classNameInputWrapper;
-    var classNameGroupItem = props.classNameGroupItem,
+  var options = props.options,
+    classNameGroupItem = props.classNameGroupItem,
+    fieldProps = props.fieldProps,
+    inputProps = props.inputProps,
     isMultiple = props.isMultiple,
     isRequired = props.isRequired,
     label = props.label,
@@ -803,8 +804,8 @@ var ChoiceField = /*#__PURE__*/React.memo(function ChoiceField(props) {
   }, function (_ref) {
     var input = _ref.input,
       meta = _ref.meta;
-    return /*#__PURE__*/React.createElement(FieldWrapper, {
-      className: clsx('form-field_type_tab-selector', 'form__item_type_tab-selector', classNameGroupItem),
+    return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
+      className: clsx('form-field_type_choice', 'form__item_type_choice', classNameGroupItem),
       inputName: input.name,
       inputValue: input.value || [],
       isRequired: isRequired,
@@ -818,7 +819,7 @@ var ChoiceField = /*#__PURE__*/React.memo(function ChoiceField(props) {
       metaTouched: meta.touched,
       metaValid: meta.valid,
       hideMessage: hideMessage
-    }, /*#__PURE__*/React.createElement(Choice, {
+    }, fieldProps), /*#__PURE__*/React.createElement(Choice, Object.assign({
       options: options,
       inputName: input.name,
       inputValue: input.value || [],
@@ -826,7 +827,7 @@ var ChoiceField = /*#__PURE__*/React.memo(function ChoiceField(props) {
       isRequired: isRequired,
       placeholder: placeholder,
       onChange: change
-    }));
+    }, inputProps)));
   });
 });
 ChoiceField.propTypes = {
@@ -2563,10 +2564,12 @@ var FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
         textColor: descriptionTextColor,
         textWeight: descriptionTextWeight
       }, description), submitError && !modifiedSinceLastSubmit && /*#__PURE__*/React.createElement("div", {
-        className: clsx('notification', 'form-notification', notificationType && "form-notification_type_" + notificationType)
+        className: clsx('notification', 'form-notification', notificationType ? "form-notification_type_" + notificationType : 'form-notification_type_global')
       }, /*#__PURE__*/React.createElement(NotificationItem, {
         className: "form-notification__item",
-        text: form.getState().submitError,
+        titleTextSize: "h6",
+        title: form.getState().submitError,
+        set: "form",
         status: "error"
       })), onChangeFormValues && /*#__PURE__*/React.createElement(FormSpy, {
         subscription: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/forms",
-  "version": "1.0.20",
+  "version": "1.0.22",
   "description": "Forms fields, inputs, etc.",
   "keywords": [
     "forms",
@@ -35,15 +35,15 @@
   },
   "dependencies": {
     "@itcase/common": "^1.1.6",
-    "@itcase/ui": "^1.0.33",
+    "@itcase/ui": "^1.0.46",
     "axios": "^1.5.0",
     "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.43",
+    "libphonenumber-js": "^1.10.44",
     "lodash": "^4.17.21",
-    "luxon": "^3.4.2",
+    "luxon": "^3.4.3",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-date-range": "^1.4.0",
@@ -53,10 +53,10 @@
     "react-select": "^5.7.4"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.11",
-    "@babel/eslint-parser": "^7.22.11",
-    "@babel/preset-env": "^7.22.14",
-    "@babel/preset-react": "^7.22.5",
+    "@babel/core": "^7.22.17",
+    "@babel/eslint-parser": "^7.22.15",
+    "@babel/preset-env": "^7.22.15",
+    "@babel/preset-react": "^7.22.15",
     "@commitlint/cli": "^17.7.1",
     "@commitlint/config-conventional": "^17.7.0",
     "@rollup/plugin-babel": "^6.0.3",
@@ -67,17 +67,17 @@
     "@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.48.0",
+    "eslint": "8.49.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-n": "^16.0.2",
+    "eslint-plugin-n": "^16.1.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-standard": "^5.0.0",
     "husky": "^8.0.3",
-    "npm": "^9.8.1",
+    "npm": "^10.1.0",
     "postcss-aspect-ratio-polyfill": "^2.0.0",
     "postcss-cli": "^10.1.0",
     "postcss-combine-duplicated-selectors": "^10.0.3",
@@ -95,13 +95,13 @@
     "postcss-nested-ancestors": "^3.0.0",
     "postcss-normalize": "^10.0.1",
     "postcss-prepend-imports": "^1.0.1",
-    "postcss-preset-env": "^9.1.2",
+    "postcss-preset-env": "^9.1.3",
     "postcss-pxtorem": "^6.0.0",
     "postcss-responsive-type": "github:ITCase/postcss-responsive-type",
     "postcss-sort-media-queries": "^5.2.0",
     "prettier": "^3.0.3",
-    "react-datepicker": "^4.16.0",
-    "rollup": "^3.28.1",
+    "react-datepicker": "^4.17.0",
+    "rollup": "^3.29.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "semantic-release": "^21.1.1",
     "stylelint": "^15.10.3",