iguazio.dashboard-react-controls 1.3.3 → 1.3.5

package/dist/components/Button/Button.js

@@ -50,18 +50,18 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     variant = _ref.variant,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var buttonClassName = (0, _classnames.default)('btn', "btn-".concat(variant), "btn-".concat(density), className);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", _objectSpread(_objectSpread({}, restProps), {}, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", _objectSpread(_objectSpread({}, restProps), {}, {
     className: buttonClassName,
     ref: ref,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Tooltip.default, {
+    children: [icon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
       template: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextTooltipTemplate.default, {
         text: tooltip
       }),
       hidden: !tooltip,
-      children: [icon, label && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: label && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         children: label
-      })]
-    })
+      })
+    })]
   }));
 });
 Button.defaultProps = {

package/dist/components/FormCombobox/FormCombobox.js

@@ -271,7 +271,9 @@ var FormCombobox = function FormCombobox(_ref) {
       onFocus && onFocus(input.value);
     }
   }, [input, onBlur, onFocus, showSelectDropdown]);
-  var validateField = function validateField(value, allValues) {
+  var validateField = function validateField() {
+    var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    var allValues = arguments.length > 1 ? arguments[1] : undefined;
     var valueToValidate = value.startsWith(selectValue.id) ? value.substring(selectValue.id.length) : value !== null && value !== void 0 ? value : '';
     var validationError = null;
     if (!(0, _lodash.isEmpty)(validationRules)) {

package/dist/components/FormSelect/FormSelect.js

@@ -27,6 +27,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 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); }
@@ -62,6 +66,7 @@ var FormSelect = function FormSelect(_ref) {
     required = _ref.required,
     search = _ref.search,
     selectedItemAction = _ref.selectedItemAction,
+    scrollToView = _ref.scrollToView,
     tooltip = _ref.tooltip,
     withoutBorder = _ref.withoutBorder,
     withSelectedIcon = _ref.withSelectedIcon;
@@ -79,7 +84,7 @@ var FormSelect = function FormSelect(_ref) {
   var _useState5 = (0, _react.useState)(false),
     _useState6 = _slicedToArray(_useState5, 2),
     isOpen = _useState6[0],
-    setOpen = _useState6[1];
+    setIsOpen = _useState6[1];
   var _useState7 = (0, _react.useState)('bottom-right'),
     _useState8 = _slicedToArray(_useState7, 2),
     position = _useState8[0],
@@ -88,8 +93,10 @@ var FormSelect = function FormSelect(_ref) {
     _useState10 = _slicedToArray(_useState9, 2),
     searchValue = _useState10[0],
     setSearchValue = _useState10[1];
-  var selectRef = (0, _react.useRef)();
+  var optionsListRef = (0, _react.useRef)();
   var popUpRef = (0, _react.useRef)();
+  var selectRef = (0, _react.useRef)();
+  var searchRef = (0, _react.useRef)();
   var _ref2 = (selectRef === null || selectRef === void 0 ? void 0 : (_selectRef$current = selectRef.current) === null || _selectRef$current === void 0 ? void 0 : _selectRef$current.getBoundingClientRect()) || {},
     selectWidth = _ref2.width,
     selectLeft = _ref2.left;
@@ -99,6 +106,25 @@ var FormSelect = function FormSelect(_ref) {
   var selectedOption = options.find(function (option) {
     return option.id === input.value;
   });
+  var getFilteredOptions = (0, _react.useCallback)(function (options) {
+    return options.filter(function (option) {
+      return !search || option.label.toLowerCase().includes(searchValue.toLowerCase());
+    });
+  }, [search, searchValue]);
+  var sortedOptionsList = (0, _react.useMemo)(function () {
+    if (scrollToView) {
+      return getFilteredOptions(options);
+    }
+    var optionsList = _toConsumableArray(options);
+    var selectedOption = optionsList.filter(function (option, idx, arr) {
+      if (option.id === input.value) {
+        arr.splice(idx, 1);
+        return true;
+      }
+      return false;
+    });
+    return getFilteredOptions([].concat(_toConsumableArray(selectedOption), _toConsumableArray(optionsList)));
+  }, [input.value, getFilteredOptions, options, scrollToView]);
   var getSelectValue = function getSelectValue() {
     if (!input.value || !input.value.length) {
       return "Select Option".concat(multiple ? 's' : '');
@@ -114,13 +140,13 @@ var FormSelect = function FormSelect(_ref) {
   }, [meta.invalid, meta.modified, meta.submitFailed, meta.touched, meta.validating]);
   var openMenu = (0, _react.useCallback)(function () {
     if (!isOpen) {
-      setOpen(true);
+      setIsOpen(true);
       input.onFocus(new Event('focus'));
     }
   }, [input, isOpen]);
   var closeMenu = (0, _react.useCallback)(function () {
     if (isOpen) {
-      setOpen(false);
+      setIsOpen(false);
       input.onBlur(new Event('blur'));
     }
   }, [input, isOpen]);
@@ -151,6 +177,29 @@ var FormSelect = function FormSelect(_ref) {
       window.removeEventListener('scroll', handleScroll, true);
     };
   }, [clickHandler, handleScroll, isOpen]);
+  var scrollOptionToView = (0, _react.useCallback)(function () {
+    var selectedOptionEl = optionsListRef.current.querySelector("#".concat(input.value));
+    searchValue ? optionsListRef.current.scrollTo({
+      top: 0,
+      left: 0,
+      behavior: 'smooth'
+    }) : setTimeout(function () {
+      selectedOptionEl.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center'
+      });
+    }, 0);
+  }, [input.value, searchValue]);
+  (0, _react.useEffect)(function () {
+    if (isOpen && optionsListRef.current && scrollToView) {
+      scrollOptionToView();
+    }
+  }, [isOpen, scrollOptionToView, scrollToView]);
+  (0, _react.useEffect)(function () {
+    if (isOpen && search && searchRef.current) {
+      searchRef.current.focus();
+    }
+  }, [isOpen, search]);
   var toggleOpen = function toggleOpen() {
     if (isOpen) {
       closeMenu();
@@ -166,7 +215,7 @@ var FormSelect = function FormSelect(_ref) {
       setSearchValue('');
     }
   }, [closeMenu, multiple]);
-  var handleSelectOptionClick = function handleSelectOptionClick(selectedOption, option) {
+  var handleSelectOptionClick = function handleSelectOptionClick(selectedOption, option, ref) {
     if (selectedOption !== input.value) {
       option.handler && option.handler();
       onChange && onChange(selectedOption);
@@ -292,21 +341,25 @@ var FormSelect = function FormSelect(_ref) {
                   value: searchValue,
                   onChange: function onChange(event) {
                     return setSearchValue(event.target.value);
-                  }
-                })
-              }), options.filter(function (option) {
-                return !search || option.label.toLowerCase().includes(searchValue.toLowerCase());
-              }).map(function (option) {
-                return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOption.default, {
-                  item: option,
-                  name: name,
-                  onClick: function onClick(selectedOption) {
-                    handleSelectOptionClick(selectedOption, option);
                   },
-                  multiple: multiple,
-                  selectedId: !multiple ? input.value : '',
-                  withSelectedIcon: withSelectedIcon
-                }, option.id);
+                  ref: searchRef,
+                  autoFocus: true
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+                className: "options-list",
+                ref: optionsListRef,
+                children: sortedOptionsList.map(function (option) {
+                  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOption.default, {
+                    item: option,
+                    name: name,
+                    onClick: function onClick(selectedOption) {
+                      handleSelectOptionClick(selectedOption, option);
+                    },
+                    multiple: multiple,
+                    selectedId: !multiple ? input.value : '',
+                    withSelectedIcon: withSelectedIcon
+                  }, option.id);
+                })
               })]
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({}, input), {}, {
@@ -327,6 +380,7 @@ FormSelect.defaultProps = {
   search: false,
   tooltip: '',
   multiple: false,
+  scrollToView: true,
   withoutBorder: false,
   withSelectedIcon: true
 };
@@ -342,6 +396,7 @@ FormSelect.propTypes = {
   search: _propTypes.default.bool,
   tooltip: _propTypes.default.string,
   multiple: _propTypes.default.bool,
+  scrollToView: _propTypes.default.bool,
   withoutBorder: _propTypes.default.bool,
   withSelectedIcon: _propTypes.default.bool
 };

package/dist/components/FormSelect/formSelect.scss

@@ -67,10 +67,14 @@
     }
 
     .options-list {
+      margin: 0;
+      padding: 0;
+      list-style-type: none;
+      max-height: 250px;
+      overflow-y: auto;
+
       &__body {
         width: 100%;
-        max-height: 250px;
-        overflow-y: auto;
         color: $mulledWineTwo;
         background-color: $white;
         border: $primaryBorder;

package/dist/components/Modal/Modal.scss

@@ -38,15 +38,14 @@
   }
 
   &.modal-max {
-    width: 90vw;
-    height: 90vh;
+    width: 96vw;
+    height: 94vw;
   }
 
   &__content {
     display: flex;
     flex-flow: column nowrap;
     position: relative;
-    padding-bottom: 1rem;
     min-height: inherit;
     height: 100%;
     width: 100%;
@@ -101,7 +100,7 @@
     flex-flow: row nowrap;
     flex-shrink: 0;
     justify-content: space-between;
-    padding: 0 2rem;
+    padding: 1rem 2rem;
     min-height: 50px;
 
     &-actions {

package/dist/components/Wizard/Wizard.scss

@@ -1,17 +1,24 @@
 .wizard-form {
   .modal__body {
     display: flex;
-    flex-flow: row nowrap;
+    flex-flow: column nowrap;
     overflow: hidden;
-    padding-top: 0;
-    padding-right: 0;
+    padding: 0;
+
+    @media screen and (min-width: 1200px) {
+      flex-flow: row nowrap;
+    }
   }
 
   .wizard-form__content-container {
     overflow-y: auto;
     height: 100%;
     width: 100%;
-    padding: 1.5rem 2rem 1.5rem 1rem;
+    padding: 0 2rem 1.5rem;
+
+    @media screen and (min-width: 1200px) {
+      padding: 1.5rem 2rem 1.5rem 1rem;
+    }
   }
 
   .wizard-form__content {

package/dist/components/Wizard/WizardSteps/WizardSteps.scss

@@ -3,42 +3,44 @@
 @import '../../../scss/borders';
 
 .wizard-steps {
+  display: flex;
+  flex-flow: row nowrap;
   background-color: $white;
   min-width: 260px;
-  margin-right: 1rem;
-  margin-top: 1.5rem;
-  padding-right: 1rem;
-  overflow-y: auto;
+  margin: 1.5rem 0;
+  padding: 0 2rem;
 
-  &__indicator {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border: 2px solid transparent;
-    border-radius: 50%;
-    padding: 10px;
-    width: 36px;
-    height: 36px;
-  }
+  @media screen and (min-width: 1200px) {
+    flex-flow: column nowrap;
+    overflow-y: auto;
+    padding: 0 1rem;
 
-  & > *:not(:last-child) {
-    margin-bottom: 10px;
+    & > *:not(:last-child) {
+      margin-bottom: 10px;
+    }
   }
 
   .wizard-steps {
     &__item {
-      justify-content: flex-start;
+      display: block;
       background-color: inherit;
       border: 0;
       border-radius: 8px;
       font-size: 1em;
       padding: 8px;
       min-height: 52px;
+      height: auto;
       width: 100%;
 
-      & > * {
-        text-align: left;
-        white-space: normal;
+      @media screen and (min-width: 1200px) {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+
+        & > * {
+          text-align: left;
+          white-space: normal;
+        }
       }
 
       &.active {
@@ -73,5 +75,23 @@
         }
       }
     }
+
+    &__indicator {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border: 2px solid transparent;
+      border-radius: 50%;
+      padding: 10px;
+      margin: 0 0 10px 0;
+      width: 36px;
+      height: 36px;
+
+      @media screen and (min-width: 1200px) {
+        flex-flow: row nowrap;
+        text-align: left;
+        margin: 0 10px 0 0;
+      }
+    }
   }
 }

package/dist/elements/SelectOption/SelectOption.js

@@ -52,12 +52,13 @@ var SelectOption = function SelectOption(_ref) {
       })
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
     "data-testid": "select-option",
     className: selectClassName,
     onClick: function onClick() {
       !item.disabled && _onClick(item.id);
     },
+    id: item.id,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "label-row",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {

package/dist/elements/SelectOption/selectOption.scss

@@ -7,7 +7,7 @@
     align-items: center;
     flex-flow: row wrap;
     width: 100%;
-    min-height: 50px;
+    min-height: 45px;
     padding: 10px 15px;
 
     &.multiple {
@@ -77,6 +77,7 @@
     &-sub-label {
       margin-top: 5px;
       font-size: 13px;
+      width: 100%;
     }
 
     &-icon {

package/dist/images/databricks-icon.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.00003 13.456L12.3667 17.602L18.9794 13.902V15.3753L12.3667 19.108L5.37737 15.1347L5.0007 15.34V15.8533L12.3667 20L19.7334 15.8547V12.9767L19.3901 12.7707L12.3667 16.7453L5.7887 12.9767V11.5033L12.3667 15.2033L19.7334 11.058V8.21334L19.3901 8.008L12.3667 11.9827L6.13137 8.454L12.3667 4.92534L17.5401 7.83734L17.9854 7.56334V7.186L12.3667 4L5.00003 8.18V8.66L12.3667 12.8047L18.9794 9.10467V10.6113L12.3667 14.3467L5.37737 10.3733L5.0007 10.5787L5.00003 13.456Z" fill="#7F7989"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.75 13.6022L4.75073 10.4302L5.37992 10.0872L12.3671 14.0593L18.7294 10.4654V9.53103L12.3664 13.0913L4.75003 8.8062V8.03442L12.3667 3.71259L18.2354 7.04037V7.70305L17.5457 8.1274L12.3671 5.21241L6.63897 8.454L12.3667 11.6954L19.3936 7.71878L19.9834 8.07155V11.2042L12.3668 15.4902L6.0387 11.9308V12.8318L12.3675 16.4577L19.3938 12.4813L19.9834 12.8351V16.0009L12.3667 20.2869L4.7507 15.9995V15.1916L5.37992 14.8485L12.3672 18.8207L18.7294 15.2294V14.3284L12.3664 17.8887L4.75 13.6022ZM18.9794 13.902V15.3753L12.3667 19.108L5.37737 15.1347L5.0007 15.34V15.8533L12.3667 20L19.7334 15.8547V12.9767L19.3901 12.7707L12.3667 16.7453L5.7887 12.9767V11.5033L12.3667 15.2033L19.7334 11.058V8.21334L19.3901 8.008L12.3667 11.9827L6.13137 8.454L12.3667 4.92534L17.5401 7.83734L17.9854 7.56334V7.186L12.3667 4L5.00003 8.18V8.66L12.3667 12.8047L18.9794 9.10467V10.6113L12.3667 14.3467L5.37737 10.3733L5.0007 10.5787L5.00003 13.456L12.3667 17.602L18.9794 13.902Z" fill="#7F7989"/>
+</svg>

package/dist/utils/validation.util.js

@@ -310,6 +310,11 @@ var validationRules = {
       }), generateRule.required()]
     }
   },
+  function: {
+    name: [generateRule.validCharacters('a-z A-Z 0-9 - .'), generateRule.beginEndWith('a-z A-Z 0-9'), generateRule.length({
+      max: 63
+    }), generateRule.required()]
+  },
   common: {
     name: [generateRule.validCharacters('a-z A-Z 0-9 - _ .'), generateRule.beginEndWith('a-z A-Z 0-9'), generateRule.length({
       max: 63

package/package.json

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