iguazio.dashboard-react-controls 1.9.0 → 1.9.2

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

@@ -100,7 +100,7 @@ var NewChipForm = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var labelKeyClassName = (0, _classnames.default)(className, !editConfig.isKeyFocused && 'item_edited', !(0, _lodash.isEmpty)((0, _lodash.get)(meta, ['error', chipIndex, 'key'], [])) && !(0, _lodash.isEmpty)(chipData.key) && 'item_edited_invalid');
   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)('input-label-value', !editConfig.isValueFocused && 'item_edited', !(0, _lodash.isEmpty)((0, _lodash.get)(meta, ['error', chipIndex, 'value'], [])) && !(0, _lodash.isEmpty)(chipData.value) && 'item_edited_invalid');
-  var closeButtonClass = (0, _classnames.default)('edit-chip__icon-close', (editConfig.chipIndex === chipIndex || !isEditable) && 'edit-chip__icon-close_hidden');
+  var closeButtonClass = (0, _classnames.default)('item-icon-close', (editConfig.chipIndex === chipIndex || !isEditable) && 'item-icon-close_hidden');
   (0, _react.useLayoutEffect)(function () {
     if (!chipData.keyFieldWidth && !chipData.valueFieldWidth) {
       var currentWidthKeyInput = refInputKey.current.scrollWidth + 1;

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

@@ -51,23 +51,23 @@
     &-font {
       @include chipsFont(EditableChip);
     }
+
+    .item-icon-close {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+  
+      &_hidden {
+        visibility: hidden;
+      }
+  
+      svg {
+        transform: scale(0.7);
+      }
+    }
   }
 
   &-separator {
     margin-right: 5px;
   }
-
-  &__icon-close {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &_hidden {
-      visibility: hidden;
-    }
-
-    svg {
-      transform: scale(0.7);
-    }
-  }
 }

package/dist/components/FormCombobox/FormCombobox.js

@@ -20,7 +20,7 @@ var _types = require("../../types");
 var _arrow = require("../../images/arrow.svg");
 var _search = require("../../images/search.svg");
 var _warning = require("../../images/warning.svg");
-var _invalid = require("../../images/invalid.svg");
+var _exclamationMark = require("../../images/exclamation-mark.svg");
 require("./formCombobox.scss");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -447,7 +447,7 @@ var FormCombobox = function FormCombobox(_ref) {
                 text: (_meta$error$label = (_meta$error = meta.error) === null || _meta$error === void 0 ? void 0 : _meta$error.label) !== null && _meta$error$label !== void 0 ? _meta$error$label : invalidText,
                 warning: true
               }),
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_invalid.ReactComponent, {})
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_exclamationMark.ReactComponent, {})
             }), isInvalid && Array.isArray(meta.error) && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
               className: "form-field__warning",
               onClick: warningIconClick,

package/dist/components/FormInput/FormInput.js

@@ -17,7 +17,8 @@ var _components = require("../../components");
 var _types = require("../../types");
 var _validation = require("../../utils/validation.util");
 var _hooks = require("../../hooks");
-var _invalid = require("../../images/invalid.svg");
+var _constants = require("../../constants");
+var _exclamationMark = require("../../images/exclamation-mark.svg");
 var _popout = require("../../images/popout.svg");
 var _warning = require("../../images/warning.svg");
 require("./formInput.scss");
@@ -115,6 +116,7 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   (_ref2 = ref) !== null && _ref2 !== void 0 ? _ref2 : ref = wrapperRef;
   var inputRef = (0, _react.useRef)();
   var errorsRef = (0, _react.useRef)();
+  var isRequiredRulePresentRef = (0, _react.useRef)(false);
   (0, _hooks.useDetectOutsideClick)(ref, function () {
     return setShowValidationRules(false);
   });
@@ -150,7 +152,11 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   }, [focused]);
   (0, _react.useEffect)(function () {
     setValidationRules(function () {
+      isRequiredRulePresentRef.current = false;
       return rules.map(function (rule) {
+        if (rule.name === _constants.validation.REQUIRED.NAME) {
+          isRequiredRulePresentRef.current = true;
+        }
         return _objectSpread(_objectSpread({}, rule), {}, {
           isValid: !errorsRef.current || !Array.isArray(errorsRef.current) ? true : !errorsRef.current.some(function (err) {
             return err.name === rule.name;
@@ -212,7 +218,7 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     var valueToValidate = (0, _lodash.isNil)(value) ? '' : String(value);
     if (isValueEmptyAndValid(valueToValidate)) return;
     var validationError = null;
-    if (required && valueToValidate.trim().length === 0) {
+    if (required && valueToValidate.trim().length === 0 && !isRequiredRulePresentRef.current) {
       validationError = {
         name: 'required',
         label: customRequiredLabel || 'This field is required'
@@ -384,7 +390,7 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
                 text: (_errorsRef$current$la = (_errorsRef$current = errorsRef.current) === null || _errorsRef$current === void 0 ? void 0 : _errorsRef$current.label) !== null && _errorsRef$current$la !== void 0 ? _errorsRef$current$la : invalidText,
                 warning: true
               }),
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_invalid.ReactComponent, {})
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_exclamationMark.ReactComponent, {})
             }), isInvalid && Array.isArray(errorsRef.current) && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
               className: "form-field__warning",
               onClick: toggleValidationRulesMenu,

package/dist/components/FormTextarea/FormTextarea.js

@@ -12,7 +12,7 @@ var _reactFinalForm = require("react-final-form");
 var _TextTooltipTemplate = _interopRequireDefault(require("../TooltipTemplate/TextTooltipTemplate"));
 var _Tip = _interopRequireDefault(require("../Tip/Tip"));
 var _Tooltip = _interopRequireDefault(require("../Tooltip/Tooltip"));
-var _invalid = require("../../images/invalid.svg");
+var _exclamationMark = require("../../images/exclamation-mark.svg");
 require("./formTextarea.scss");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["className", "disabled", "focused", "iconClass", "invalidText", "label", "maxLength", "name", "onBlur", "onChange", "required", "textAreaIcon", "tip", "withoutBorder"];
@@ -162,7 +162,7 @@ var FormTextarea = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
                 text: (_meta$error$label = (_meta$error = meta.error) === null || _meta$error === void 0 ? void 0 : _meta$error.label) !== null && _meta$error$label !== void 0 ? _meta$error$label : invalidText,
                 warning: true
               }),
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_invalid.ReactComponent, {})
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_exclamationMark.ReactComponent, {})
             }), tip && !required && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tip.default, {
               text: tip,
               className: "form-field__tip"

package/dist/components/Tip/Tip.js

@@ -11,6 +11,7 @@ var _reactTransitionGroup = require("react-transition-group");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _reactDom = require("react-dom");
 var _questionMark = require("../../images/question-mark.svg");
+var _exclamationMark = require("../../images/exclamation-mark.svg");
 var _tip = _interopRequireDefault(require("./tip.scss"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -43,7 +44,8 @@ var iconLength = parseInt(_tip.default.iconlength);
 var minTextLength = 40;
 var Tip = function Tip(_ref) {
   var className = _ref.className,
-    text = _ref.text;
+    text = _ref.text,
+    withExclamationMark = _ref.withExclamationMark;
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     isShow = _useState2[0],
@@ -92,7 +94,9 @@ var Tip = function Tip(_ref) {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       ref: iconRef,
       className: "tip-wrapper",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_questionMark.ReactComponent, {
+      children: withExclamationMark ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_exclamationMark.ReactComponent, {
+        "data-testid": "tip-icon"
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_questionMark.ReactComponent, {
         "data-testid": "tip-icon"
       })
     }), /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {

package/dist/constants.js

@@ -46,19 +46,62 @@ var LABEL_BUTTON = 'label';
 /*=========== VALITATION =============*/
 exports.LABEL_BUTTON = LABEL_BUTTON;
 var validation = {
-  BEGIN_END_NOT_WITH: 'Must not begin and end with',
-  BEGIN_END_WITH: 'Must begin and end with',
-  BEGIN_NOT_WITH: 'Must not begin with',
-  BEGIN_WITH: 'Must begin with',
-  END_NOT_WITH: 'Must not end with',
-  END_WITH: 'Must end with',
-  MUST_CONTAIN_EXACTLY_ONE: 'Must contain exactly one',
-  MUST_HAVE_DOT_AFTER_AT: 'Must have at least one . after @',
-  MUST_NOT_BE: 'Must not be',
-  NO_CONSECUTIVE_CHARACTER: 'No consecutive characters',
-  ONLY_AT_THE_BEGINNING: 'Only at the beginning',
-  REQUIRED: 'This field is required',
-  VALID_CHARACTERS: 'Valid characters'
+  BEGIN_END_NOT_WITH: {
+    LABEL: 'Must not begin and end with',
+    NAME: 'beginEndNot'
+  },
+  BEGIN_END_WITH: {
+    LABEL: 'Must begin and end with',
+    NAME: 'beginEnd'
+  },
+  BEGIN_NOT_WITH: {
+    LABEL: 'Must not begin with',
+    NAME: 'beginNot'
+  },
+  BEGIN_WITH: {
+    LABEL: 'Must begin with',
+    NAME: 'begin'
+  },
+  END_NOT_WITH: {
+    LABEL: 'Must not end with',
+    NAME: 'endNot'
+  },
+  END_WITH: {
+    LABEL: 'Must end with',
+    NAME: 'end'
+  },
+  MUST_CONTAIN_EXACTLY_ONE: {
+    LABEL: 'Must contain exactly one',
+    NAME: 'exactlyOne'
+  },
+  MUST_HAVE_DOT_AFTER_AT: {
+    LABEL: 'Must have at least one . after @',
+    NAME: 'dotAfterAt'
+  },
+  MUST_NOT_BE: {
+    LABEL: 'Must not be',
+    NAME: 'mustNotBe'
+  },
+  NO_CONSECUTIVE_CHARACTER: {
+    LABEL: 'No consecutive characters',
+    NAME: 'noConsecutiveCharacters'
+  },
+  ONLY_AT_THE_BEGINNING: {
+    LABEL: 'Only at the beginning',
+    NAME: 'onlyAtTheBeginning'
+  },
+  REQUIRED: {
+    LABEL: 'This field is required',
+    NAME: 'required'
+  },
+  VALID_CHARACTERS_WITH_REFIX: {
+    LABEL: 'Valid characters',
+    NAME: 'validCharactersWithPrefix'
+  },
+  VALID_CHARACTERS: {
+    LABEL: 'Valid characters',
+    NAME: 'validCharacters'
+  }
 };
 
 /*=========== STATUS CODES =============*/

package/dist/scss/mixins.scss

@@ -126,6 +126,14 @@
   .edit-label-separator {
     color: $fontColor;
   }
+
+  .item-icon-close {
+    svg {
+      path {
+        fill: $fontColor;
+      }
+    }
+  }
 }
 
 @mixin chipButtonAddColor($color) {

package/dist/utils/validation.util.js

@@ -166,67 +166,67 @@ exports.checkPatternsValidityAsync = checkPatternsValidityAsync;
 var generateRule = {
   beginWith: function beginWith(chars) {
     return {
-      name: 'begin',
-      label: _constants.validation.BEGIN_WITH + ': ' + convertToLabel(chars),
+      name: _constants.validation.BEGIN_WITH.NAME,
+      label: _constants.validation.BEGIN_WITH.LABEL + ': ' + convertToLabel(chars),
       pattern: new RegExp('^[' + convertToPattern(chars) + ']')
     };
   },
   beginNotWith: function beginNotWith(chars) {
     return {
-      name: 'beginNot',
-      label: _constants.validation.BEGIN_NOT_WITH + ': ' + convertToLabel(chars),
+      name: _constants.validation.BEGIN_NOT_WITH.NAME,
+      label: _constants.validation.BEGIN_NOT_WITH.LABEL + ': ' + convertToLabel(chars),
       pattern: new RegExp('^[^' + convertToPattern(chars) + ']')
     };
   },
   endWith: function endWith(chars) {
     return {
-      name: 'end',
-      label: _constants.validation.END_WITH + ': ' + convertToLabel(chars),
+      name: _constants.validation.END_WITH.NAME,
+      label: _constants.validation.END_WITH.LABEL + ': ' + convertToLabel(chars),
       pattern: new RegExp('[' + convertToPattern(chars) + ']$')
     };
   },
   endNotWith: function endNotWith(chars) {
     return {
-      name: 'endNot',
-      label: _constants.validation.END_NOT_WITH + ': ' + convertToLabel(chars),
+      name: _constants.validation.END_NOT_WITH.NAME,
+      label: _constants.validation.END_NOT_WITH.LABEL + ': ' + convertToLabel(chars),
       pattern: new RegExp('[^' + convertToPattern(chars) + ']$')
     };
   },
   beginEndWith: function beginEndWith(chars) {
     var convertedPattern = convertToPattern(chars);
     return {
-      name: 'beginEnd',
-      label: _constants.validation.BEGIN_END_WITH + ': ' + convertToLabel(chars),
+      name: _constants.validation.BEGIN_END_WITH.NAME,
+      label: _constants.validation.BEGIN_END_WITH.LABEL + ': ' + convertToLabel(chars),
       pattern: new RegExp('^([' + convertedPattern + '].*)?[' + convertedPattern + ']$')
     };
   },
   beginEndNotWith: function beginEndNotWith(chars) {
     var convertedPattern = convertToPattern(chars);
     return {
-      name: 'beginEndNot',
-      label: _constants.validation.BEGIN_END_NOT_WITH + ': ' + convertToLabel(chars),
+      name: _constants.validation.BEGIN_END_NOT_WITH.NAME,
+      label: _constants.validation.BEGIN_END_NOT_WITH.LABEL + ': ' + convertToLabel(chars),
       pattern: new RegExp('^([^' + convertedPattern + '].*)?[^' + convertedPattern + ']$')
     };
   },
   onlyAtTheBeginning: function onlyAtTheBeginning(chars) {
     var convertedPattern = convertToPattern(chars);
     return {
-      name: 'onlyAtTheBeginning',
-      label: _constants.validation.ONLY_AT_THE_BEGINNING + ': ' + convertToLabel(chars),
+      name: _constants.validation.ONLY_AT_THE_BEGINNING.NAME,
+      label: _constants.validation.ONLY_AT_THE_BEGINNING.LABEL + ': ' + convertToLabel(chars),
       pattern: new RegExp('^([' + convertedPattern + '])?[^' + convertedPattern + ']+$')
     };
   },
   validCharacters: function validCharacters(chars) {
     return {
-      name: 'validCharacters',
-      label: _constants.validation.VALID_CHARACTERS + ': ' + convertToLabel(chars),
+      name: _constants.validation.VALID_CHARACTERS.NAME,
+      label: _constants.validation.VALID_CHARACTERS.LABEL + ': ' + convertToLabel(chars),
       pattern: new RegExp('^[' + convertToPattern(chars) + ']+$')
     };
   },
   validCharactersWithPrefix: function validCharactersWithPrefix(chars) {
     return {
-      name: 'validCharactersWithPrefix',
-      label: _constants.validation.VALID_CHARACTERS + ': ' + convertToLabel(chars),
+      name: _constants.validation.VALID_CHARACTERS_WITH_REFIX.NAME,
+      label: _constants.validation.VALID_CHARACTERS_WITH_REFIX.LABEL + ': ' + convertToLabel(chars),
       pattern: new RegExp('^([' + convertToPattern(chars) + ']+/)?[' + convertToPattern(chars) + ']+$')
     };
   },
@@ -236,8 +236,8 @@ var generateRule = {
       return "(?!.*\\".concat(charsPairArray[0], "\\").concat(charsPairArray[1], ")");
     }).join('');
     return {
-      name: 'noConsecutiveCharacters',
-      label: _constants.validation.NO_CONSECUTIVE_CHARACTER + ': ' + convertToLabel(chars),
+      name: _constants.validation.NO_CONSECUTIVE_CHARACTER.NAME,
+      label: _constants.validation.NO_CONSECUTIVE_CHARACTER.LABEL + ': ' + convertToLabel(chars),
       pattern: new RegExp('^' + convertedPattern)
     };
   },
@@ -255,8 +255,8 @@ var generateRule = {
   mustNotBe: function mustNotBe(words) {
     var wordsArray = words.split(' ');
     return {
-      name: 'mustNotBe',
-      label: _constants.validation.MUST_NOT_BE + ': ' + convertToLabel(words),
+      name: _constants.validation.MUST_NOT_BE.NAME,
+      label: _constants.validation.MUST_NOT_BE.LABEL + ': ' + convertToLabel(words),
       pattern: function pattern(value) {
         return !_lodash.default.includes(wordsArray, value);
       }
@@ -276,8 +276,8 @@ var generateRule = {
   },
   required: function required() {
     return {
-      name: 'required',
-      label: _constants.validation.REQUIRED,
+      name: _constants.validation.REQUIRED.NAME,
+      label: _constants.validation.REQUIRED.LABEL,
       pattern: new RegExp('\\S')
     };
   }
@@ -285,11 +285,11 @@ var generateRule = {
 var commonRules = {
   prefixedQualifiedName: [{
     name: 'nameValidCharacters',
-    label: "[Name] ".concat(_constants.validation.VALID_CHARACTERS, " : a\u2013z, A\u2013Z, 0\u20139, \u2013, _, ."),
+    label: "[Name] ".concat(_constants.validation.VALID_CHARACTERS.LABEL, " : a\u2013z, A\u2013Z, 0\u20139, \u2013, _, ."),
     pattern: /^([^/]+\/)?[\w.-]+$/
   }, {
     name: 'nameBeginEnd',
-    label: "[Name] ".concat(_constants.validation.BEGIN_END_WITH, ": a\u2013z, A\u2013Z, 0\u20139"),
+    label: "[Name] ".concat(_constants.validation.BEGIN_END_WITH.LABEL, ": a\u2013z, A\u2013Z, 0\u20139"),
     pattern: /^([^/]+\/)?([A-Za-z0-9][^/]*)?[A-Za-z0-9]$/
   }, {
     name: 'nameMaxLength',
@@ -297,11 +297,11 @@ var commonRules = {
     pattern: /^([^/]+\/)?[^/]{1,63}$/
   }, {
     name: 'prefixValidCharacters',
-    label: "[Prefix] ".concat(_constants.validation.VALID_CHARACTERS, ": a\u2013z, 0\u20139, \u2013, ."),
+    label: "[Prefix] ".concat(_constants.validation.VALID_CHARACTERS.LABEL, ": a\u2013z, 0\u20139, \u2013, ."),
     pattern: /^([a-z0-9.-]+\/)?[^/]+$/
   }, {
     name: 'prefixBeginEnd',
-    label: "[Prefix] ".concat(_constants.validation.BEGIN_END_WITH, ": a\u2013z, 0\u20139"),
+    label: "[Prefix] ".concat(_constants.validation.BEGIN_END_WITH.LABEL, ": a\u2013z, 0\u20139"),
     pattern: /^([a-z0-9]([^/]*[a-z0-9])?\/)?[^/]+$/
   }, {
     name: 'prefixMaxLength',
@@ -311,7 +311,7 @@ var commonRules = {
   k8sLabels: {
     value: [{
       name: 'valueBeginEnd',
-      label: "[Value] ".concat(_constants.validation.BEGIN_END_WITH, " : a\u2013z, A\u2013Z, 0\u20139"),
+      label: "[Value] ".concat(_constants.validation.BEGIN_END_WITH.LABEL, " : a\u2013z, A\u2013Z, 0\u20139"),
       pattern: /^([^/]+\/)?([A-Za-z0-9][^/]*)?[A-Za-z0-9]$/
     }, {
       name: 'valueMaxLength',
@@ -319,20 +319,20 @@ var commonRules = {
       pattern: /^([^/]+\/)?[^/]{1,63}$/
     }, {
       name: 'valueValidCharacters',
-      label: "[Value] ".concat(_constants.validation.VALID_CHARACTERS, ": a\u2013z, A\u2013Z, 0\u20139, \u2013, _, ."),
+      label: "[Value] ".concat(_constants.validation.VALID_CHARACTERS.LABEL, ": a\u2013z, A\u2013Z, 0\u20139, \u2013, _, ."),
       pattern: /^[a-zA-Z0-9\-_.]+$/
     }]
   }
   // email: [
   //   generateRule.beginEndNotWith('@ .'),
   //   {
-  //     name: 'exactlyOne',
-  //     label: ValidationConstants.MUST_CONTAIN_EXACTLY_ONE + ': @',
+  //     name: ValidationConstants.MUST_CONTAIN_EXACTLY_ONE.NAME,
+  //     label: ValidationConstants.MUST_CONTAIN_EXACTLY_ONE.LABEL + ': @',
   //     pattern: /^[^@]+@[^@]+$/
   //   },
   //   {
-  //     name: 'dotAfterAt',
-  //     label: ValidationConstants.MUST_HAVE_DOT_AFTER_AT,
+  //     name: ValidationConstants.MUST_HAVE_DOT_AFTER_AT.NAME,
+  //     label: ValidationConstants.MUST_HAVE_DOT_AFTER_AT.LABEL,
   //     pattern: /@.+\..+$/
   //   }
   // ]

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "iguazio.dashboard-react-controls",
-    "version": "1.9.0",
+    "version": "1.9.2",
     "description": "Collection of resources (such as CSS styles, fonts and images) and ReactJS 17.x components to share among different Iguazio React repos.",
     "main": "dist/index.js",
     "module": "dist/index.js",