iguazio.dashboard-react-controls 0.0.13 → 0.0.16

package/dist/components/FormChipCell/FormChipCellView.js

@@ -0,0 +1,178 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _FormChip = _interopRequireDefault(require("./FormChip/FormChip"));
+
+var _reactFinalFormArrays = require("react-final-form-arrays");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _HiddenChipsBlock = _interopRequireDefault(require("../../elements/HiddenChipsBlock/HiddenChipsBlock"));
+
+var _components = require("igz-controls/components");
+
+var _common = require("../../utils/common.util");
+
+var _types = require("../../types");
+
+var _add = require("../../images/add.svg");
+
+require("./formChipCell.scss");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var FormChipCellView = /*#__PURE__*/_react.default.forwardRef(function (_ref, _ref2) {
+  var chipOptions = _ref.chipOptions,
+      chips = _ref.chips,
+      className = _ref.className,
+      editConfig = _ref.editConfig,
+      handleAddNewChip = _ref.handleAddNewChip,
+      _handleEditChip = _ref.handleEditChip,
+      handleIsEdit = _ref.handleIsEdit,
+      _handleRemoveChip = _ref.handleRemoveChip,
+      handleShowElements = _ref.handleShowElements,
+      isEditMode = _ref.isEditMode,
+      name = _ref.name,
+      setChipsSizes = _ref.setChipsSizes,
+      setEditConfig = _ref.setEditConfig,
+      shortChips = _ref.shortChips,
+      showChips = _ref.showChips,
+      showHiddenChips = _ref.showHiddenChips;
+  var chipsCellRef = _ref2.chipsCellRef,
+      chipsWrapperRef = _ref2.chipsWrapperRef;
+  var buttonAddClassNames = (0, _classnames.default)('button-add', className, chipOptions.background && "button-add-background_".concat(chipOptions.background), chipOptions.borderColor && "button-add-border_".concat(chipOptions.borderColor), chipOptions.font && "button-add-font_".concat(chipOptions.font), chipOptions.density && "button-add-density_".concat(chipOptions.density));
+  var wrapperClassNames = (0, _classnames.default)('chips-wrapper', isEditMode && 'fixed-max-width');
+  var chipClassNames = (0, _classnames.default)('chip', 'chip__content', isEditMode && 'data-ellipsis', shortChips && 'chip_short', chips.hiddenChips && 'chip_hidden', chipOptions.density && "chip-density_".concat(chipOptions.density), chipOptions.borderRadius && "chip-border_".concat(chipOptions.borderRadius), chipOptions.background && "chip-background_".concat(chipOptions.background), chipOptions.borderColor && "chip-border_".concat(chipOptions.borderColor), chipOptions.font && "chip-font_".concat(chipOptions.font), isEditMode && 'editable', (showChips || isEditMode) && 'chip_visible', className);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalFormArrays.FieldArray, {
+      name: name,
+      children: function children(_ref3) {
+        var fields = _ref3.fields;
+        return (isEditMode || !(0, _common.isEveryObjectValueEmpty)(fields)) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "chips-cell",
+          ref: chipsCellRef,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: wrapperClassNames,
+            ref: chipsWrapperRef,
+            children: [fields.map(function (contentItem, index) {
+              var chipData = fields.value[index];
+              return index < chips.visibleChips.length && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                className: "chip-block",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Tooltip, {
+                  hidden: editConfig.isEdit,
+                  template: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextTooltipTemplate, {
+                    text: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                      className: "chip__content",
+                      children: [chipData.key, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                        className: "chip__delimiter",
+                        children: chipData.delimiter ? chipData.delimiter : ':'
+                      }), chipData.value]
+                    })
+                  }),
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormChip.default, {
+                    chip: chipData,
+                    chipClassNames: chipClassNames,
+                    chipIndex: index,
+                    chipOptions: chipOptions,
+                    className: className,
+                    editConfig: editConfig,
+                    handleEditChip: function handleEditChip(event, nameEvent) {
+                      return _handleEditChip(event, fields, nameEvent);
+                    },
+                    handleIsEdit: handleIsEdit,
+                    handleRemoveChip: function handleRemoveChip(event, index) {
+                      return _handleRemoveChip(event, fields, index);
+                    },
+                    isEditMode: isEditMode,
+                    keyName: "".concat(contentItem, ".key"),
+                    ref: chipsCellRef,
+                    setChipsSizes: setChipsSizes,
+                    setEditConfig: setEditConfig,
+                    textOverflowEllipsis: true,
+                    valueName: "".concat(contentItem, ".value")
+                  })
+                }, contentItem), chips.visibleChips.length - 1 === index && showHiddenChips && /*#__PURE__*/(0, _jsxRuntime.jsx)(_HiddenChipsBlock.default, {
+                  chipClassNames: chipClassNames,
+                  chipIndex: index,
+                  chipOptions: chipOptions,
+                  chips: chips.hiddenChips,
+                  className: className,
+                  editConfig: editConfig,
+                  handleEditChip: function handleEditChip(event, nameEvent) {
+                    return _handleEditChip(event, fields, nameEvent);
+                  },
+                  handleIsEdit: handleIsEdit,
+                  handleRemoveChip: function handleRemoveChip(event, index) {
+                    return _handleRemoveChip(event, fields, index);
+                  },
+                  handleShowElements: handleShowElements,
+                  isEditMode: isEditMode,
+                  ref: chipsCellRef,
+                  setChipsSizes: setChipsSizes,
+                  setEditConfig: setEditConfig
+                })]
+              }, contentItem);
+            }), chips.hiddenChipsNumber && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "".concat(chipClassNames, " chips_button"),
+              onClick: handleShowElements,
+              children: chips.hiddenChipsNumber
+            }), isEditMode && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+              className: buttonAddClassNames,
+              onClick: function onClick(e) {
+                return handleAddNewChip(e, fields);
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_add.ReactComponent, {})
+            })]
+          })
+        });
+      }
+    })
+  });
+});
+
+FormChipCellView.defaultProps = {
+  chipOptions: {
+    background: 'purple',
+    boldValue: false,
+    borderRadius: 'primary',
+    borderColor: 'transparent',
+    density: 'dense',
+    font: 'purple'
+  },
+  isEditMode: false,
+  delimiter: null,
+  onClick: function onClick() {},
+  shortChips: false
+};
+FormChipCellView.propTypes = {
+  chipOptions: _types.CHIP_OPTIONS,
+  chips: _propTypes.default.object.isRequired,
+  className: _propTypes.default.string,
+  editConfig: _propTypes.default.object.isRequired,
+  handleAddNewChip: _propTypes.default.func.isRequired,
+  handleEditChip: _propTypes.default.func.isRequired,
+  handleIsEdit: _propTypes.default.func.isRequired,
+  handleRemoveChip: _propTypes.default.func.isRequired,
+  handleShowElements: _propTypes.default.func.isRequired,
+  isEditMode: _propTypes.default.bool,
+  name: _propTypes.default.string.isRequired,
+  delimiter: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]),
+  onClick: _propTypes.default.func,
+  setChipsSizes: _propTypes.default.func.isRequired,
+  setEditConfig: _propTypes.default.func.isRequired,
+  shortChips: _propTypes.default.bool,
+  showChips: _propTypes.default.bool.isRequired,
+  showHiddenChips: _propTypes.default.bool.isRequired
+};
+var _default = FormChipCellView;
+exports.default = _default;

package/dist/components/FormChipCell/NewChipForm/NewChipForm.js

@@ -0,0 +1,244 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _NewChipInput = _interopRequireDefault(require("../NewChipInput/NewChipInput"));
+
+var _types = require("../../../types");
+
+var _constants = require("../../../constants");
+
+require("./newChipForm.scss");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var NewChipForm = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var chip = _ref.chip,
+      chipOptions = _ref.chipOptions,
+      className = _ref.className,
+      editConfig = _ref.editConfig,
+      keyName = _ref.keyName,
+      onChange = _ref.onChange,
+      setEditConfig = _ref.setEditConfig,
+      valueName = _ref.valueName;
+
+  var _useState = (0, _react.useState)({
+    key: chip.key,
+    value: chip.value,
+    keyFieldWidth: 0,
+    valueFieldWidth: 0
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      chipData = _useState2[0],
+      setChipData = _useState2[1];
+
+  var maxWidthInput = (0, _react.useMemo)(function () {
+    var _ref$current;
+
+    return ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.clientWidth) - 50;
+  }, [ref]);
+  var background = chipOptions.background,
+      borderColor = chipOptions.borderColor,
+      borderRadius = chipOptions.borderRadius,
+      density = chipOptions.density,
+      font = chipOptions.font;
+  var minWidthInput = 25;
+  var minWidthValueInput = 35;
+
+  var refInputKey = /*#__PURE__*/_react.default.createRef();
+
+  var refInputValue = /*#__PURE__*/_react.default.createRef();
+
+  var refInputContainer = /*#__PURE__*/_react.default.createRef();
+
+  var labelKeyClassName = (0, _classnames.default)(className, !editConfig.isKeyFocused && 'item_edited');
+  var labelContainerClassName = (0, _classnames.default)('edit-chip-container', background && "edit-chip-container-background_".concat(background), borderColor && "edit-chip-container-border_".concat(borderColor), font && "edit-chip-container-font_".concat(font), density && "edit-chip-container-density_".concat(density), borderRadius && "edit-chip-container-border_".concat(borderRadius), (editConfig.isEdit || editConfig.isNewChip) && 'edit-chip-container_edited');
+  var labelValueClassName = (0, _classnames.default)((0, _classnames.default)('input-label-value', !editConfig.isValueFocused && 'item_edited'));
+  (0, _react.useLayoutEffect)(function () {
+    if (!chipData.keyFieldWidth && !chipData.valueFieldWidth) {
+      var currentWidthKeyInput = refInputKey.current.scrollWidth + 1;
+      var currentWidthValueInput = refInputValue.current.scrollWidth + 1;
+
+      if (chipData.key && chipData.value) {
+        setChipData(function (prevState) {
+          return _objectSpread(_objectSpread({}, prevState), {}, {
+            keyFieldWidth: currentWidthKeyInput >= maxWidthInput ? maxWidthInput : currentWidthKeyInput,
+            valueFieldWidth: currentWidthValueInput >= maxWidthInput ? maxWidthInput : currentWidthValueInput
+          });
+        });
+      } else {
+        setChipData(function (prevState) {
+          return _objectSpread(_objectSpread({}, prevState), {}, {
+            keyFieldWidth: minWidthInput,
+            valueFieldWidth: minWidthValueInput
+          });
+        });
+      }
+    }
+  }, [chipData.key, chipData.value, chipData.keyFieldWidth, chipData.valueFieldWidth, maxWidthInput, refInputKey, refInputValue]);
+  (0, _react.useEffect)(function () {
+    if (editConfig.isKeyFocused) {
+      refInputKey.current.focus();
+    } else if (editConfig.isValueFocused) {
+      refInputValue.current.focus();
+    }
+  }, [editConfig.isKeyFocused, editConfig.isValueFocused, refInputKey, refInputValue]);
+  var outsideClick = (0, _react.useCallback)(function (event) {
+    var _event$path, _event$composedPath;
+
+    event.stopPropagation();
+    var elementPath = (_event$path = event.path) !== null && _event$path !== void 0 ? _event$path : (_event$composedPath = event.composedPath) === null || _event$composedPath === void 0 ? void 0 : _event$composedPath.call(event);
+
+    if (!elementPath.includes(refInputContainer.current)) {
+      onChange(event, _constants.CLICK);
+    }
+  }, [onChange, refInputContainer]);
+  (0, _react.useEffect)(function () {
+    if (editConfig.isEdit) {
+      document.addEventListener('click', outsideClick, true);
+      return function () {
+        document.removeEventListener('click', outsideClick, true);
+      };
+    }
+  }, [outsideClick, editConfig.isEdit]);
+  var focusChip = (0, _react.useCallback)(function (event) {
+    event.stopPropagation();
+
+    if (!event.shiftKey && event.key === _constants.TAB && editConfig.isValueFocused) {
+      onChange(event, _constants.TAB);
+    } else if (event.shiftKey && event.key === _constants.TAB && editConfig.isKeyFocused) {
+      onChange(event, _constants.TAB_SHIFT);
+    }
+
+    if (event.key === _constants.BACKSPACE || event.key === _constants.DELETE) {
+      setChipData(function (prevState) {
+        return {
+          keyFieldWidth: editConfig.isKeyFocused ? minWidthInput : prevState.keyFieldWidth,
+          valueFieldWidth: editConfig.isValueFocused ? minWidthValueInput : prevState.valueFieldWidth
+        };
+      });
+    }
+  }, [editConfig, onChange]);
+  var handleOnFocus = (0, _react.useCallback)(function (event) {
+    if (event.target.name === keyName) {
+      refInputKey.current.selectionStart = refInputKey.current.selectionEnd;
+      setEditConfig(function (prevState) {
+        return _objectSpread(_objectSpread({}, prevState), {}, {
+          isKeyFocused: true,
+          isValueFocused: false
+        });
+      });
+    } else {
+      refInputValue.current.selectionStart = refInputValue.current.selectionEnd;
+      setEditConfig(function (prevState) {
+        return _objectSpread(_objectSpread({}, prevState), {}, {
+          isKeyFocused: false,
+          isValueFocused: true
+        });
+      });
+    }
+  }, [keyName, refInputKey, refInputValue, setEditConfig]);
+  var handleOnChange = (0, _react.useCallback)(function (event) {
+    event.preventDefault();
+
+    if (event.target.name === keyName) {
+      var currentWidthKeyInput = refInputKey.current.scrollWidth;
+      setChipData(function (prevState) {
+        return _objectSpread(_objectSpread({}, prevState), {}, {
+          key: refInputKey.current.value,
+          keyFieldWidth: refInputKey.current.value.length <= 1 ? minWidthInput : currentWidthKeyInput >= maxWidthInput ? maxWidthInput : currentWidthKeyInput > minWidthInput ? currentWidthKeyInput + 2 : minWidthInput
+        });
+      });
+    } else {
+      var currentWidthValueInput = refInputValue.current.scrollWidth;
+      setChipData(function (prevState) {
+        return _objectSpread(_objectSpread({}, prevState), {}, {
+          value: refInputValue.current.value,
+          valueFieldWidth: refInputValue.current.value.length <= 1 ? minWidthValueInput : currentWidthValueInput >= maxWidthInput ? maxWidthInput : currentWidthValueInput > minWidthValueInput ? currentWidthValueInput + 2 : minWidthValueInput
+        });
+      });
+    }
+  }, [maxWidthInput, refInputKey, refInputValue, keyName]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: labelContainerClassName,
+    onKeyDown: function onKeyDown(event) {
+      return editConfig.isEdit && focusChip(event);
+    },
+    ref: refInputContainer,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_NewChipInput.default, {
+      className: labelKeyClassName,
+      name: keyName,
+      onChange: handleOnChange,
+      onFocus: handleOnFocus,
+      placeholder: "key",
+      ref: refInputKey,
+      style: {
+        width: chipData.keyFieldWidth
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "edit-chip-separator",
+      children: ":"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_NewChipInput.default, {
+      className: labelValueClassName,
+      name: valueName,
+      onChange: handleOnChange,
+      onFocus: handleOnFocus,
+      placeholder: "value",
+      ref: refInputValue,
+      style: {
+        width: chipData.valueFieldWidth
+      }
+    })]
+  });
+});
+
+NewChipForm.defaultProps = {
+  className: ''
+};
+NewChipForm.propTypes = {
+  chip: _propTypes.default.object.isRequired,
+  chipOptions: _types.CHIP_OPTIONS.isRequired,
+  className: _propTypes.default.string,
+  editConfig: _propTypes.default.shape({}).isRequired,
+  keyName: _propTypes.default.string.isRequired,
+  onChange: _propTypes.default.func.isRequired,
+  setEditConfig: _propTypes.default.func.isRequired,
+  valueName: _propTypes.default.string.isRequired
+};
+var _default = NewChipForm;
+exports.default = _default;

package/dist/components/FormChipCell/NewChipForm/newChipForm.scss

@@ -0,0 +1,62 @@
+@import '../../../scss/colors';
+@import '../../../scss/borders';
+@import '../../../scss/mixins';
+
+.edit-chip {
+  &-container {
+    display: inline-flex;
+    max-width: 100%;
+    margin: 2px 8px 2px 0;
+    padding: 0 8px;
+    font-size: 14px;
+    line-height: 22px;
+
+    input {
+      display: flex;
+      padding: 0;
+      font-size: 14px;
+      background-color: transparent;
+      border: none;
+
+      &.item_edited {
+        &::placeholder {
+          color: $spunPearl;
+        }
+      }
+
+      &::placeholder {
+        color: $primary;
+      }
+    }
+
+    &-background {
+      @include chipBackground(false);
+    }
+
+    &-border {
+      @include chipBorder();
+    }
+
+    &-density {
+      @include chipDensity(true, false);
+    }
+
+    &-font {
+      @include chipsFont(EditableChip);
+    }
+  }
+
+  &-separator {
+    margin-right: 5px;
+  }
+
+  &__icon-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+      transform: scale(0.7);
+    }
+  }
+}

package/dist/components/FormChipCell/NewChipInput/NewChipInput.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactFinalForm = require("react-final-form");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _excluded = ["name", "onChange", "onFocus"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var NewChipInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var name = _ref.name,
+      onChange = _ref.onChange,
+      onFocus = _ref.onFocus,
+      inputProps = _objectWithoutProperties(_ref, _excluded);
+
+  var _useField = (0, _reactFinalForm.useField)(name),
+      input = _useField.input;
+
+  var handleInputChange = function handleInputChange(event) {
+    input.onChange(event);
+    onChange(event);
+  };
+
+  var handleInputFocus = function handleInputFocus(event) {
+    input.onFocus(event);
+    onFocus(event);
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
+    name: name,
+    children: function children(_ref2) {
+      var input = _ref2.input;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({
+        autoComplete: "off",
+        "data-testid": "input",
+        ref: ref,
+        type: "text",
+        id: input.name
+      }, _objectSpread(_objectSpread({}, inputProps), input)), {}, {
+        onChange: handleInputChange,
+        onFocus: handleInputFocus
+      }));
+    }
+  });
+});
+
+NewChipInput.propTypes = {
+  name: _propTypes.default.string.isRequired,
+  onChange: _propTypes.default.func.isRequired,
+  onFocus: _propTypes.default.func.isRequired
+};
+var _default = NewChipInput;
+exports.default = _default;

package/dist/components/FormChipCell/formChipCell.scss

@@ -0,0 +1,52 @@
+@import '../../scss/colors';
+@import '../../scss/borders';
+@import '../../scss/mixins';
+
+.chips {
+  &-wrapper {
+    display: flex;
+    align-items: center;
+  }
+
+  &-cell {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    max-width: 100%;
+
+    .fixed-max-width {
+      max-width: 100%;
+    }
+
+    .chip {
+      &-block {
+        position: relative;
+        max-width: 100%;
+      }
+    }
+
+    .button-add {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 2px 0 2px 0;
+      border-radius: 32px;
+
+      &-background {
+        @include chipBackground(true);
+      }
+
+      &_border {
+        @include chipBorder();
+      }
+
+      &-density {
+        @include chipDensity(false, true);
+      }
+
+      &-font {
+        @include chipsFont(ButtonAddChip);
+      }
+    }
+  }
+}

package/dist/components/FormCombobox/formCombobox.scss

@@ -7,7 +7,7 @@
   width: 100%;
 
   .form-field {
-    @include formField;
+    @include inputSelectField;
 
     &__icons {
       .form-field-combobox__icon {

package/dist/components/FormInput/FormInput.js

@@ -231,7 +231,7 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
 
   var validateField = function validateField(value) {
     var valueToValidate = (0, _lodash.isNil)(value) ? '' : String(value);
-    if (!valueToValidate && !required) return;
+    if (!valueToValidate && !required || disabled) return;
     var validationError = null;
 
     if (!(0, _lodash.isEmpty)(validationRules)) {

package/dist/components/Modal/Modal.js

@@ -57,16 +57,16 @@ var Modal = function Modal(_ref) {
       show = _ref.show,
       title = _ref.title;
 
-  var _useState = (0, _react.useState)(location),
+  var _useState = (0, _react.useState)(location.pathname),
       _useState2 = _slicedToArray(_useState, 2),
       currentLocation = _useState2[0],
       setCurrentLocation = _useState2[1];
 
   var modalClassNames = (0, _classnames.default)('modal', className, size && "modal-".concat(size));
   (0, _react.useEffect)(function () {
-    setCurrentLocation(location);
+    setCurrentLocation(location.pathname);
     return function () {
-      if (location !== currentLocation) {
+      if (location.pathname !== currentLocation) {
         onClose();
       }
     };
@@ -128,7 +128,7 @@ Modal.defaultProps = {
 Modal.propTypes = {
   actions: _propTypes.default.array,
   children: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.object, _propTypes.default.node, _propTypes.default.string]).isRequired,
-  location: _propTypes.default.string.isRequired,
+  location: _propTypes.default.object.isRequired,
   onClose: _propTypes.default.func.isRequired,
   show: _propTypes.default.bool.isRequired,
   size: _types.MODAL_SIZES,