iguazio.dashboard-react-controls 1.3.6 → 1.3.8

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

@@ -22,13 +22,10 @@
         &_invalid {
           color: $amaranth;
         }
-
-        &::placeholder {
-          color: $spunPearl;
-        }
       }
 
-      &.input-label-key, &.input-label-value {
+      &.input-label-key,
+      &.input-label-value {
         &::placeholder {
           color: $topaz;
         }

package/dist/components/FormRadio/FormRadio.js

@@ -51,7 +51,12 @@ var FormRadio = function FormRadio(_ref) {
       var input = _ref2.input;
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: formFieldClassNames,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({}, _objectSpread(_objectSpread({}, input), inputProps)), {}, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({
+          className: (0, _classnames.default)(input.checked ? 'checked' : 'unchecked'),
+          type: "radio",
+          "data-testid": "radio-".concat(inputProps.value)
+        }, _objectSpread(_objectSpread({}, input), inputProps)), {}, {
+          checked: input.checked,
           id: name + inputProps.value
         })), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
           htmlFor: name + inputProps.value,

package/dist/components/FormSelect/FormSelect.js

@@ -179,6 +179,7 @@ var FormSelect = function FormSelect(_ref) {
   }, [clickHandler, handleScroll, isOpen]);
   var scrollOptionToView = (0, _react.useCallback)(function () {
     var selectedOptionEl = optionsListRef.current.querySelector("#".concat(_constants.SELECT_OPTION_ID_PREFIX).concat(input.value));
+    if (!selectedOptionEl) return;
     searchValue ? optionsListRef.current.scrollTo({
       top: 0,
       left: 0,

package/dist/components/FormToggle/FormToggle.js

@@ -11,7 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactFinalForm = require("react-final-form");
 require("./formToggle.scss");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["className", "label", "name", "onChange", "readOnly"];
+var _excluded = ["className", "density", "label", "name", "onChange", "readOnly"];
 /*
 Copyright 2022 Iguazio Systems Ltd.
 Licensed under the Apache License, Version 2.0 (the "License") with
@@ -38,18 +38,20 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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 FormToggle = function FormToggle(_ref) {
   var className = _ref.className,
+    density = _ref.density,
     label = _ref.label,
     name = _ref.name,
     _onChange = _ref.onChange,
     readOnly = _ref.readOnly,
     inputProps = _objectWithoutProperties(_ref, _excluded);
+  var toggleWrapperClassNames = (0, _classnames.default)('form-field__wrapper', "form-field__wrapper-".concat(density));
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
     name: name,
     value: inputProps.value,
     type: "checkbox",
     children: function children(_ref2) {
       var input = _ref2.input;
-      var toggleClassName = (0, _classnames.default)('form-field-toggle', className, readOnly && 'form-field-toggle_readonly', input.checked && 'form-field-toggle_checked');
+      var toggleClassName = (0, _classnames.default)('form-field-toggle', className, readOnly && 'form-field_readonly', input.checked && 'form-field_checked');
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
         className: toggleClassName,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({
@@ -61,14 +63,17 @@ var FormToggle = function FormToggle(_ref) {
             input.onChange(event);
           },
           type: "checkbox"
-        })), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "form-field-toggle__switch",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            className: "form-field-toggle__switch-button"
-          })
-        }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "form-field-toggle__label",
+        })), label && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "form-field__label",
           children: label
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: toggleWrapperClassNames,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "form-field-toggle__switch",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "form-field-toggle__switch-button"
+            })
+          })
         })]
       });
     }
@@ -82,6 +87,7 @@ FormToggle.defaultProps = {
 };
 FormToggle.propTypes = {
   className: _propTypes.default.string,
+  density: _propTypes.default.string,
   label: _propTypes.default.string,
   name: _propTypes.default.string.isRequired,
   onChange: _propTypes.default.func,

package/dist/components/FormToggle/formToggle.scss

@@ -1,10 +1,14 @@
 @import '../../scss/colors';
+@import '../../scss/mixins';
 
 .form-field-toggle {
   position: relative;
-  display: flex;
-  font-size: 16px;
-  line-height: 24px;
+
+  input[type='checkbox'] {
+    display: none;
+    width: 0;
+    height: 0;
+  }
 
   &__switch {
     height: 24px;
@@ -26,28 +30,32 @@
     }
   }
 
-  &__label {
-    margin-left: 10px;
-  }
-
-  &_readonly {
-    opacity: 0.5;
-    pointer-events: none;
+  .form-field {
+    @include inputSelectField;
 
-    .form-field-toggle__switch {
-      cursor: default;
+    &__wrapper {
+      border: none;
     }
 
-    &.form-field-toggle_checked {
+    &_readonly {
+      opacity: 0.5;
+      pointer-events: none;
+
       .form-field-toggle__switch {
-        &-button {
-          opacity: 0.5;
+        cursor: default;
+      }
+
+      &.form-field-toggle_checked {
+        .form-field-toggle__switch {
+          &-button {
+            opacity: 0.5;
+          }
         }
       }
     }
   }
 
-  &_checked {
+  &.form-field_checked {
     .form-field-toggle__switch {
       background-color: $malibu;
 
@@ -56,10 +64,4 @@
       }
     }
   }
-
-  input[type='checkbox'] {
-    display: none;
-    width: 0;
-    height: 0;
-  }
 }

package/dist/images/custom.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 2V6.91H7V2C4.16 2.48 2 4.94 2 7.91C2 10.13 3.21 12.06 5 13.1V21.91C5 22.46 5.45 22.91 6 22.91H10C10.55 22.91 11 22.46 11 21.91V13.1C12.79 12.06 14 10.13 14 7.91C14 4.94 11.84 2.48 9 2ZM10 11.37L9 11.95V20.91H7V11.95L6 11.37C4.77 10.65 4 9.33 4 7.91C4 6.91 4.37 5.97 5 5.26V8.91H11V5.26C11.63 5.97 12 6.91 12 7.91C12 9.33 11.23 10.65 10 11.37ZM20.94 18.85C20.96 18.7 20.97 18.56 20.97 18.41C20.97 18.26 20.96 18.11 20.94 17.96L21.91 17.23C22 17.16 22.03 17.04 21.97 16.94L21.05 15.38C21 15.28 20.87 15.24 20.76 15.28L19.61 15.73C19.37 15.56 19.12 15.41 18.83 15.29L18.66 14.1C18.64 13.99 18.54 13.91 18.43 13.91H16.58C16.46 13.91 16.36 13.99 16.34 14.1L16.17 15.29C15.88 15.41 15.63 15.56 15.39 15.73L14.24 15.28C14.14 15.24 14 15.28 13.96 15.38L13.03 16.94C12.97 17.04 13 17.16 13.09 17.23L14.06 17.96C14.05 18.11 14.03 18.26 14.03 18.41C14.03 18.56 14.05 18.7 14.06 18.85L13.09 19.59C13 19.66 12.97 19.78 13.03 19.88L13.96 21.44C14 21.54 14.14 21.57 14.24 21.54L15.39 21.08C15.63 21.26 15.88 21.41 16.17 21.53L16.34 22.72C16.36 22.83 16.46 22.91 16.58 22.91H18.43C18.54 22.91 18.64 22.83 18.66 22.72L18.83 21.53C19.12 21.41 19.37 21.26 19.61 21.08L20.76 21.54C20.87 21.57 21 21.54 21.05 21.44L21.97 19.88C22.03 19.78 22 19.66 21.91 19.59L20.94 18.85ZM17.5 19.91C16.67 19.91 16 19.24 16 18.41C16 17.58 16.67 16.91 17.5 16.91C18.33 16.91 19 17.58 19 18.41C19 19.24 18.33 19.91 17.5 19.91Z" fill="#7F7989"/>
+</svg>

package/dist/scss/mixins.scss

@@ -1022,6 +1022,7 @@
     @include fieldWrapper;
 
     &-disabled {
+      border: $disabledBorder;
       color: $spunPearl;
       cursor: not-allowed;
     }
@@ -1157,7 +1158,6 @@
     font-size: 1em;
     padding: 0 0 0 0.45em;
     height: inherit;
-    text-transform: capitalize;
     user-select: none;
     white-space: nowrap;
   }

package/dist/utils/validation.util.js

@@ -224,6 +224,13 @@ var generateRule = {
       pattern: new RegExp('^[' + convertToPattern(chars) + ']+$')
     };
   },
+  validCharactersWithPrefix: function validCharactersWithPrefix(chars) {
+    return {
+      name: 'validCharactersWithPrefix',
+      label: _constants.validation.VALID_CHARACTERS + ': ' + convertToLabel(chars),
+      pattern: new RegExp('^([' + convertToPattern(chars) + ']+\/)?[' + convertToPattern(chars) + ']+$')
+    };
+  },
   noConsecutiveCharacters: function noConsecutiveCharacters(chars) {
     var convertedPattern = chars.split(' ').map(function (charPair) {
       var charsPairArray = charPair.split('');
@@ -336,6 +343,11 @@ var validationRules = {
     secretKey: [generateRule.validCharacters('a-z A-Z 0-9 - _ .'), generateRule.beginNotWith('.'), generateRule.length({
       max: 253
     })]
+  },
+  job: {
+    label: [generateRule.validCharactersWithPrefix('a-z A-Z 0-9 - _ .'), generateRule.beginEndWith('a-z A-Z 0-9'), generateRule.length({
+      max: 56
+    })]
   }
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "iguazio.dashboard-react-controls",
-    "version": "1.3.6",
+    "version": "1.3.8",
     "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",