iguazio.dashboard-react-controls 1.3.2 → 1.3.4

package/dist/components/FormInput/FormInput.js

@@ -473,7 +473,7 @@ FormInput.propTypes = {
   pattern: _propTypes.default.string,
   placeholder: _propTypes.default.string,
   required: _propTypes.default.bool,
-  step: _propTypes.default.string,
+  step: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
   suggestionList: _propTypes.default.arrayOf(_propTypes.default.string),
   tip: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]),
   type: _propTypes.default.string,

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/FormToggle/formToggle.scss

@@ -1,4 +1,4 @@
-@import '~igz-controls/scss/colors';
+@import '../../scss/colors';
 
 .form-field-toggle {
   position: relative;

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,22 +3,17 @@
 @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) {
@@ -27,6 +22,7 @@
 
   .wizard-steps {
     &__item {
+      align-items: baseline;
       justify-content: flex-start;
       background-color: inherit;
       border: 0;
@@ -34,11 +30,21 @@
       font-size: 1em;
       padding: 8px;
       min-height: 52px;
+      height: auto;
       width: 100%;
 
       & > * {
-        text-align: left;
+        display: flex;
+        flex-flow: column nowrap;
+        align-items: center;
+        text-align: center;
         white-space: normal;
+        width: 100%;
+
+        @media screen and (min-width: 1200px) {
+          flex-flow: row nowrap;
+          text-align: left;
+        }
       }
 
       &.active {
@@ -73,5 +79,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 {

package/dist/hooks/useFormTable.hook.js

@@ -124,7 +124,12 @@ var useFormTable = function useFormTable(formState) {
       applyOrDiscardOrDelete(event);
     }
     exitEditMode();
-    formState.form.mutators.remove(fieldsPath, index);
+    var values = (0, _lodash.get)(formState.values, fieldsPath);
+    if ((values === null || values === void 0 ? void 0 : values.length) > 1) {
+      formState.form.mutators.remove(fieldsPath, index);
+    } else {
+      formState.form.change(fieldsPath, []);
+    }
     event && event.stopPropagation();
   };
   var discardChanges = function discardChanges(event, fieldsPath, index) {

package/dist/scss/common.scss

@@ -139,6 +139,7 @@ textarea {
     min-height: $tableHeaderHeight;
     border-bottom: $primaryBorder;
     background-color: $white;
+    padding: 5px 0;
 
     &:not(.no-hover):hover {
       background-color: $alabaster;
@@ -307,7 +308,8 @@ textarea {
   }
 
   &_left {
-    &::before, &::after {
+    &::before,
+    &::after {
       right: 15px;
     }
   }

package/package.json

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