@itcase/forms 1.0.11 → 1.0.13

package/dist/css/form/Field/FileInput/FileInput.css

@@ -20,6 +20,7 @@
       flex-flow: column nowrap;
       justify-content: center;
       align-content: center;
+      align-items: center;
       cursor: pointer;
       &-title {
         padding: 0 0 8px 0;

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

@@ -30,3 +30,12 @@
     }
   }
 }
+.form-field {
+  &_state {
+    &_hidden {
+      visibility: hidden;
+      position: absolute;
+      z-index: -1;
+    }
+  }
+}

package/dist/itcase-forms.cjs.js

@@ -548,6 +548,7 @@ function FieldWrapperBase(props) {
     metaValid = props.metaValid,
     set = props.set,
     type = props.type,
+    isHidden = props.isHidden,
     Tag = props.tag,
     dataTour = props.dataTour,
     showErrorsOnSubmit = props.showErrorsOnSubmit;
@@ -601,7 +602,7 @@ function FieldWrapperBase(props) {
   var _useStyles = useStyles.useStyles(props),
     formFieldStyles = _useStyles.styles;
   return /*#__PURE__*/React__default.default.createElement(Tag, {
-    className: clsx__default.default(formFieldClass, 'form__item', 'form-field', type && "form-field_type_" + type, set && "form-field_set_" + set, sizeClass, fillClass, shapeClass, directionClass, widthClass),
+    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", {
@@ -1324,6 +1325,10 @@ var FileInputDropzone = /*#__PURE__*/React__default.default.memo(function FileIn
     prefix: 'border-color_',
     propsKey: 'borderColor'
   });
+  var borderColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_hover_',
+    propsKey: 'borderColorHover'
+  });
   var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border_type_',
     propsKey: 'borderType'
@@ -1349,7 +1354,7 @@ var FileInputDropzone = /*#__PURE__*/React__default.default.memo(function FileIn
   }), /*#__PURE__*/React__default.default.createElement("input", Object.assign({}, getInputProps(), {
     name: inputName
   })), /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('form-dropzone__dropzone-wrapper', fillClass, fillHoverClass, borderWidthClass, borderColorClass, borderTypeClass)
+    className: clsx__default.default('form-dropzone__dropzone-wrapper', fillClass, fillHoverClass, borderWidthClass, borderColorClass, borderColorHoverClass, borderTypeClass)
   }, files.map(function (file, i) {
     return /*#__PURE__*/React__default.default.createElement("aside", {
       className: clsx__default.default('form-dropzone__thumb', fillClass, thumbBorderWidthClass, thumbBorderColorClass, thumbBorderTypeClass),
@@ -1439,6 +1444,7 @@ var FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(prop
     size = props.size,
     borderWidth = props.borderWidth,
     borderColor = props.borderColor,
+    borderColorHover = props.borderColorHover,
     borderType = props.borderType,
     label = props.label,
     thumbBorderWidth = props.thumbBorderWidth,
@@ -1501,6 +1507,7 @@ var FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(prop
       hintTitle: hintTitle,
       borderWidth: borderWidth,
       borderColor: borderColor,
+      borderColorHover: borderColorHover,
       borderType: borderType,
       thumbBorderWidth: thumbBorderWidth,
       thumbBorderColor: thumbBorderColor,
@@ -1876,7 +1883,8 @@ RadioGroup.propTypes = {
   onChange: PropTypes__default.default.func
 };
 
-var SegmentedField = /*#__PURE__*/React__default.default.memo(function SegmentedField(props) {
+// const SegmentedField = React.memo(
+function SegmentedField(props) {
   var options = props.options,
     isRequired = props.isRequired,
     name = props.name,
@@ -1884,21 +1892,27 @@ var SegmentedField = /*#__PURE__*/React__default.default.memo(function Segmented
     inputProps = props.inputProps;
   var _useForm = reactFinalForm.useForm(),
     change = _useForm.change;
-  var _useState = React.useState({
-      value: null,
-      label: null
-    }),
-    activeOption = _useState[0],
-    setActiveOption = _useState[1];
-  var setActiveSegment = React.useCallback(function (option) {
-    setActiveOption(option);
-    change(name, option.value);
-  }, [change]);
   return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
     name: name
   }, function (_ref) {
     var input = _ref.input,
       meta = _ref.meta;
+    var activeOption = React.useMemo(function () {
+      var emptyOption = {
+        value: null,
+        label: null
+      };
+      if (input.value) {
+        var currentOption = options.find(function (option) {
+          return option.value === input.value;
+        });
+        return currentOption || emptyOption;
+      }
+      return emptyOption;
+    }, [input.value]);
+    var setActiveSegment = React.useCallback(function (option) {
+      change(name, option.value);
+    }, [change]);
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field_type_segmented', 'form__item_type_segmented'),
       fieldClassName: "form-segmented",
@@ -1918,7 +1932,9 @@ var SegmentedField = /*#__PURE__*/React__default.default.memo(function Segmented
       activeSegment: activeOption
     }, inputProps)));
   });
-});
+}
+// )
+
 SegmentedField.propTypes = {
   options: PropTypes__default.default.array.isRequired,
   name: PropTypes__default.default.string.isRequired,

package/dist/itcase-forms.esm.js

@@ -538,6 +538,7 @@ function FieldWrapperBase(props) {
     metaValid = props.metaValid,
     set = props.set,
     type = props.type,
+    isHidden = props.isHidden,
     Tag = props.tag,
     dataTour = props.dataTour,
     showErrorsOnSubmit = props.showErrorsOnSubmit;
@@ -591,7 +592,7 @@ function FieldWrapperBase(props) {
   var _useStyles = useStyles(props),
     formFieldStyles = _useStyles.styles;
   return /*#__PURE__*/React.createElement(Tag, {
-    className: clsx(formFieldClass, 'form__item', 'form-field', type && "form-field_type_" + type, set && "form-field_set_" + set, sizeClass, fillClass, shapeClass, directionClass, widthClass),
+    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", {
@@ -1314,6 +1315,10 @@ var FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(props
     prefix: 'border-color_',
     propsKey: 'borderColor'
   });
+  var borderColorHoverClass = useDeviceTargetClass(props, {
+    prefix: 'border-color_hover_',
+    propsKey: 'borderColorHover'
+  });
   var borderTypeClass = useDeviceTargetClass(props, {
     prefix: 'border_type_',
     propsKey: 'borderType'
@@ -1339,7 +1344,7 @@ var FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(props
   }), /*#__PURE__*/React.createElement("input", Object.assign({}, getInputProps(), {
     name: inputName
   })), /*#__PURE__*/React.createElement("div", {
-    className: clsx('form-dropzone__dropzone-wrapper', fillClass, fillHoverClass, borderWidthClass, borderColorClass, borderTypeClass)
+    className: clsx('form-dropzone__dropzone-wrapper', fillClass, fillHoverClass, borderWidthClass, borderColorClass, borderColorHoverClass, borderTypeClass)
   }, files.map(function (file, i) {
     return /*#__PURE__*/React.createElement("aside", {
       className: clsx('form-dropzone__thumb', fillClass, thumbBorderWidthClass, thumbBorderColorClass, thumbBorderTypeClass),
@@ -1429,6 +1434,7 @@ var FileInput = /*#__PURE__*/React.memo(function FileInput(props) {
     size = props.size,
     borderWidth = props.borderWidth,
     borderColor = props.borderColor,
+    borderColorHover = props.borderColorHover,
     borderType = props.borderType,
     label = props.label,
     thumbBorderWidth = props.thumbBorderWidth,
@@ -1491,6 +1497,7 @@ var FileInput = /*#__PURE__*/React.memo(function FileInput(props) {
       hintTitle: hintTitle,
       borderWidth: borderWidth,
       borderColor: borderColor,
+      borderColorHover: borderColorHover,
       borderType: borderType,
       thumbBorderWidth: thumbBorderWidth,
       thumbBorderColor: thumbBorderColor,
@@ -1866,7 +1873,8 @@ RadioGroup.propTypes = {
   onChange: PropTypes.func
 };
 
-var SegmentedField = /*#__PURE__*/React.memo(function SegmentedField(props) {
+// const SegmentedField = React.memo(
+function SegmentedField(props) {
   var options = props.options,
     isRequired = props.isRequired,
     name = props.name,
@@ -1874,21 +1882,27 @@ var SegmentedField = /*#__PURE__*/React.memo(function SegmentedField(props) {
     inputProps = props.inputProps;
   var _useForm = useForm(),
     change = _useForm.change;
-  var _useState = useState({
-      value: null,
-      label: null
-    }),
-    activeOption = _useState[0],
-    setActiveOption = _useState[1];
-  var setActiveSegment = useCallback(function (option) {
-    setActiveOption(option);
-    change(name, option.value);
-  }, [change]);
   return /*#__PURE__*/React.createElement(Field, {
     name: name
   }, function (_ref) {
     var input = _ref.input,
       meta = _ref.meta;
+    var activeOption = useMemo(function () {
+      var emptyOption = {
+        value: null,
+        label: null
+      };
+      if (input.value) {
+        var currentOption = options.find(function (option) {
+          return option.value === input.value;
+        });
+        return currentOption || emptyOption;
+      }
+      return emptyOption;
+    }, [input.value]);
+    var setActiveSegment = useCallback(function (option) {
+      change(name, option.value);
+    }, [change]);
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_type_segmented', 'form__item_type_segmented'),
       fieldClassName: "form-segmented",
@@ -1908,7 +1922,9 @@ var SegmentedField = /*#__PURE__*/React.memo(function SegmentedField(props) {
       activeSegment: activeOption
     }, inputProps)));
   });
-});
+}
+// )
+
 SegmentedField.propTypes = {
   options: PropTypes.array.isRequired,
   name: PropTypes.string.isRequired,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/forms",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "description": "Forms fields, inputs, etc.",
   "keywords": [
     "forms",