iguazio.dashboard-react-controls 0.0.21 → 0.0.23

package/dist/components/FormChipCell/FormChipCell.js

@@ -113,8 +113,8 @@ var FormChipCell = function FormChipCell(_ref) {
     return isEditMode || visibleChipsMaxLength === 'all' ? {
       visibleChips: (0, _lodash.get)(formState.values, name),
       hiddenChips: []
-    } : (0, _generateChipsList.generateChipsList)((0, _lodash.get)(formState.values, name), visibleChipsMaxLength ? visibleChipsMaxLength : visibleChipsCount, delimiter);
-  }, [visibleChipsMaxLength, isEditMode, visibleChipsCount, delimiter, formState.values, name]);
+    } : (0, _generateChipsList.generateChipsList)((0, _lodash.get)(formState.values, name), visibleChipsMaxLength ? visibleChipsMaxLength : visibleChipsCount);
+  }, [visibleChipsMaxLength, isEditMode, visibleChipsCount, formState.values, name]);
   var handleResize = (0, _react.useCallback)(function () {
     if (!isEditMode && !(0, _common.isEveryObjectValueEmpty)(chipsSizes)) {
       var _chipsCellRef$current;

package/dist/components/FormCombobox/FormCombobox.js

@@ -154,6 +154,7 @@ var FormCombobox = function FormCombobox(_ref) {
     return setShowValidationRules(false);
   });
   var labelClassNames = (0, _classnames.default)('form-field__label', disabled && 'form-field__label-disabled');
+  var inputClassNames = (0, _classnames.default)('form-field-combobox__input', selectValue.id.length === 0 && 'form-field-combobox__input_hidden');
   (0, _react.useEffect)(function () {
     setValidationRules(function (prevState) {
       return prevState.map(function (rule) {
@@ -176,7 +177,7 @@ var FormCombobox = function FormCombobox(_ref) {
     setIsInvalid(meta.invalid && (meta.validating || meta.modified || meta.submitFailed && meta.touched));
   }, [meta.invalid, meta.modified, meta.submitFailed, meta.touched, meta.validating]);
   var handleOutsideClick = (0, _react.useCallback)(function (event) {
-    if (comboboxRef.current && !comboboxRef.current.contains(event.target) && suggestionListRef.current && !suggestionListRef.current.contains(event.target)) {
+    if (comboboxRef.current && !comboboxRef.current.contains(event.target)) {
       setSearchIsFocused(false);
       setShowSelectDropdown(false);
       setShowSuggestionList(false);
@@ -184,12 +185,33 @@ var FormCombobox = function FormCombobox(_ref) {
       onBlur && onBlur(input.value);
     }
   }, [input, onBlur]);
+
+  var handleScroll = function handleScroll(event) {
+    if (comboboxRef.current.contains(event.target)) return;
+
+    if (!event.target.closest('.pop-up-dialog') && !event.target.classList.contains('form-field-combobox')) {
+      setShowValidationRules(false);
+      setShowSelectDropdown(false);
+      setShowSuggestionList(false);
+      inputRef.current.blur();
+    }
+  };
+
   (0, _react.useEffect)(function () {
     window.addEventListener('click', handleOutsideClick);
     return function () {
       window.removeEventListener('click', handleOutsideClick);
     };
   }, [handleOutsideClick]);
+  (0, _react.useEffect)(function () {
+    if (showValidationRules || showSelectDropdown || showSuggestionList) {
+      window.addEventListener('scroll', handleScroll, true);
+    }
+
+    return function () {
+      window.removeEventListener('scroll', handleScroll, true);
+    };
+  }, [showSelectDropdown, showSuggestionList, showValidationRules]);
 
   var getValidationRules = function getValidationRules() {
     return validationRules.map(function (_ref2) {
@@ -421,8 +443,8 @@ var FormCombobox = function FormCombobox(_ref) {
               })
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-            className: "form-field-combobox__input form-field__control",
-            disabled: selectValue.id.length === 0,
+            className: inputClassNames,
+            id: input.name,
             onChange: handleInputChange,
             onFocus: inputOnFocus,
             placeholder: inputPlaceholder,

package/dist/components/FormCombobox/formCombobox.scss

@@ -13,11 +13,11 @@
       .form-field-combobox__icon {
         cursor: pointer;
         padding: 0;
+        transition: transform 200ms linear;
 
         &_open {
           transform: rotate(90deg);
           transform-origin: center center;
-          transition: transform 200ms linear;
         }
       }
     }
@@ -29,21 +29,32 @@
         text-align: left;
         text-transform: capitalize;
         background-color: transparent;
+
+        label {
+          cursor: inherit;
+        }
       }
+
       &__select {
-        flex: unset;
         padding: 0;
-        max-width: 110px;
         overflow: visible;
 
         &-header {
           display: flex;
+          flex: 1;
           align-items: center;
+          cursor: pointer;
+          height: 100%;
         }
       }
 
       &__input {
-        padding: 0;
+        width: 100%;
+        padding: 0 8px 0 0;
+
+        &_hidden {
+          flex: 0;
+        }
       }
     }
   }
@@ -59,7 +70,6 @@
       align-items: center;
       margin: 0 9px;
       border-bottom: $dividerBorder;
-
     }
   }
 
@@ -91,7 +101,7 @@
 
     .pop-up-dialog {
       width: 100%;
-      max-height: 400px;
+      max-height: 250px;
       padding: 0;
       border-radius: 0;
 
@@ -101,7 +111,7 @@
     }
   }
 
-  & .path-type,
+  .path-type,
   &__dropdown .path-type {
     &-store {
       color: $amethyst;

package/dist/components/FormInput/formInput.scss

@@ -7,7 +7,9 @@
   width: 100%;
 
   input {
+    height: inherit;
     width: 100%;
+    padding: 12px 16px;
   }
 
   .form-field {

package/dist/components/FormSelect/formSelect.scss

@@ -42,6 +42,7 @@
       display: flex;
       align-items: center;
       width: 100%;
+      padding: 0 8px 0 16px;
 
       &-value {
         display: block;

package/dist/components/FormTextarea/formTextarea.scss

@@ -7,7 +7,9 @@
   width: 100%;
 
   textarea {
+    height: inherit;
     width: 100%;
+    padding: 12px 16px;
     white-space: normal;
   }
 
@@ -17,11 +19,6 @@
     &__wrapper {
       .form-field__control {
         padding: 0;
-
-        & > *:first-child {
-          height: inherit;
-          padding: 12px 0 12px 16px;
-        }
       }
     }
 

package/dist/components/Modal/Modal.js

@@ -49,10 +49,10 @@ var Modal = function Modal(_ref) {
   var actions = _ref.actions,
       children = _ref.children,
       className = _ref.className,
-      location = _ref.location,
       onClose = _ref.onClose,
       size = _ref.size,
       show = _ref.show,
+      subTitle = _ref.subTitle,
       title = _ref.title;
   var modalClassNames = (0, _classnames.default)('modal', className, size && "modal-".concat(size));
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
@@ -77,12 +77,15 @@ var Modal = function Modal(_ref) {
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "modal__content",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             className: "modal__header",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h5", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h5", {
               className: "modal__header-title",
               children: title
-            })
+            }), subTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("h6", {
+              className: "modal__header-sub-title",
+              children: subTitle
+            })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: "modal__body",
             children: children
@@ -107,15 +110,16 @@ Modal.defaultProps = {
   actions: [],
   show: false,
   size: _constants.MODAL_MD,
+  subTitle: null,
   title: ''
 };
 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.object.isRequired,
   onClose: _propTypes.default.func.isRequired,
   show: _propTypes.default.bool.isRequired,
   size: _types.MODAL_SIZES,
+  subTitle: _propTypes.default.string,
   title: _propTypes.default.string
 };
 var _default = Modal;

package/dist/components/Modal/Modal.scss

@@ -9,6 +9,7 @@
   width: 100%;
   height: 660px;
   max-width: 96%;
+  min-width: 300px;
   max-height: 96%;
   outline: 0;
   transform: translate(-50%, -50%);
@@ -17,13 +18,28 @@
   @media screen and (min-width: 1200px) {
     width: 1000px;
 
-    &-sm {
+    &.modal-sm {
       width: 700px;
     }
 
-    &-lg {
+    &.modal-lg {
       width: 1400px;
     }
+
+    &.modal-full {
+      width: 95vw;
+      height: 95vh;
+    }
+  }
+
+  &.modal-min {
+    width: 500px;
+    height: auto;
+  }
+
+  &.modal-full {
+    width: 90vw;
+    height: 90vh;
   }
 
   &__content {
@@ -43,21 +59,26 @@
 
   &__header {
     position: relative;
-    padding: 1.5rem 2rem;
-    display: flex;
-    flex-shrink: 0;
-    justify-content: center;
-    align-items: center;
     border-bottom: $primaryBorder;
+    text-align: center;
+    vertical-align: middle;
+    padding: 1.5rem 2rem;
 
     &-title {
       color: $primary;
       font-size: 2em;
-      font-weight: 400;
       text-transform: capitalize;
       margin: 0;
     }
 
+    &-sub-title {
+      color: $primary;
+      font-size: 1.5em;
+      font-weight: 400;
+      line-height: 2em;
+      margin: 0;
+    }
+
     &-button {
       position: absolute;
       top: 10px;
@@ -69,7 +90,6 @@
     overflow-y: auto;
     overflow-x: hidden;
     flex: 1 0;
-    flex-basis: 0;
     padding: 1.5rem 2rem 0;
     margin-bottom: 1rem;
   }

package/dist/components/Wizard/Wizard.js

@@ -60,6 +60,7 @@ var Wizard = function Wizard(_ref) {
       onWizardSubmit = _ref.onWizardSubmit,
       location = _ref.location,
       size = _ref.size,
+      subTitle = _ref.subTitle,
       title = _ref.title,
       stepsConfig = _ref.stepsConfig,
       submitButtonLabel = _ref.submitButtonLabel;
@@ -158,6 +159,7 @@ var Wizard = function Wizard(_ref) {
     location: location,
     show: isWizardOpen,
     size: size,
+    subTitle: subTitle,
     title: title,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_WizardSteps.default, {
       activeStepNumber: activeStepNumber,
@@ -175,7 +177,8 @@ Wizard.defaultProps = {
   confirmClose: false,
   size: _constants.MODAL_MD,
   stepsConfig: [],
-  submitButtonLabel: 'Submit'
+  submitButtonLabel: 'Submit',
+  subTitle: null
 };
 Wizard.propsTypes = {
   className: _propTypes.default.string,
@@ -186,6 +189,7 @@ Wizard.propsTypes = {
   onWizardSubmit: _propTypes.default.func.isRequired,
   location: _propTypes.default.string.isRequired,
   size: _types.MODAL_SIZES,
+  subTitle: _propTypes.default.string,
   title: _propTypes.default.string.isRequired,
   stepsConfig: _types.WIZARD_STEPS_CONFIG,
   submitButtonLabel: _propTypes.default.string

package/dist/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.validation = exports.TERTIARY_BUTTON = exports.TAB_SHIFT = exports.TAB = exports.SECONDARY_BUTTON = exports.PRIMARY_BUTTON = exports.MODAL_SM = exports.MODAL_MD = exports.MODAL_LG = exports.LABEL_BUTTON = exports.INTERNAL_SERVER_ERROR_STATUS_CODE = exports.FORBIDDEN_ERROR_STATUS_CODE = exports.DELETE = exports.DANGER_BUTTON = exports.CONFLICT_ERROR_STATUS_CODE = exports.CLICK = exports.BACKSPACE = void 0;
+exports.validation = exports.TERTIARY_BUTTON = exports.TAB_SHIFT = exports.TAB = exports.SECONDARY_BUTTON = exports.PRIMARY_BUTTON = exports.MODAL_SM = exports.MODAL_MIN = exports.MODAL_MD = exports.MODAL_MAX = exports.MODAL_LG = exports.LABEL_BUTTON = exports.INTERNAL_SERVER_ERROR_STATUS_CODE = exports.FORBIDDEN_ERROR_STATUS_CODE = exports.DELETE = exports.DANGER_BUTTON = exports.CONFLICT_ERROR_STATUS_CODE = exports.CLICK = exports.BACKSPACE = void 0;
 
 /*
 Copyright 2022 Iguazio Systems Ltd.
@@ -78,4 +78,8 @@ exports.MODAL_SM = MODAL_SM;
 var MODAL_MD = 'md';
 exports.MODAL_MD = MODAL_MD;
 var MODAL_LG = 'lg';
-exports.MODAL_LG = MODAL_LG;
+exports.MODAL_LG = MODAL_LG;
+var MODAL_MIN = 'min';
+exports.MODAL_MIN = MODAL_MIN;
+var MODAL_MAX = 'max';
+exports.MODAL_MAX = MODAL_MAX;

package/dist/scss/mixins.scss

@@ -987,7 +987,6 @@
   display: flex;
   flex: 1;
   flex-flow: row nowrap;
-  align-items: center;
   position: relative;
   width: 100%;
   color: $primary;
@@ -1063,7 +1062,6 @@
     flex: 1;
     align-items: center;
     overflow: hidden;
-    padding: 0 8px 0 16px;
   }
 
   &__icons {

package/dist/types.js

@@ -27,7 +27,7 @@ illegal under applicable law, and the grant of the foregoing license
 under the Apache 2.0 license is conditioned upon your compliance with
 such restriction.
 */
-var BUTTON_VARIANTS = _propTypes.default.oneOf([_constants.PRIMARY_BUTTON, _constants.SECONDARY_BUTTON, _constants.TERTIARY_BUTTON, _constants.DANGER_BUTTON, _constants.LABEL_BUTTON]);
+var BUTTON_VARIANTS = _propTypes.default.oneOf([_constants.DANGER_BUTTON, _constants.LABEL_BUTTON, _constants.PRIMARY_BUTTON, _constants.SECONDARY_BUTTON, _constants.TERTIARY_BUTTON]);
 
 exports.BUTTON_VARIANTS = BUTTON_VARIANTS;
 
@@ -51,7 +51,7 @@ var CHIP_INPUT_LIST = _propTypes.default.arrayOf(_propTypes.default.shape({
 exports.CHIP_INPUT_LIST = CHIP_INPUT_LIST;
 
 var CHIP_OPTIONS = _propTypes.default.shape({
-  background: _propTypes.default.oneOf(['none', 'orange', 'green', 'purple', 'grey', 'sorbus', 'java', 'amethyst']),
+  background: _propTypes.default.oneOf(['amethyst', 'green', 'grey', 'java', 'none', 'orange', 'purple', 'sorbus']),
   boldValue: _propTypes.default.bool,
   borderColor: _propTypes.default.oneOf(['transparent', 'orange', 'green', 'purple', 'grey']),
   density: _propTypes.default.oneOf(['dense', 'normal', 'medium']),
@@ -72,7 +72,7 @@ var POP_UP_CUSTOM_POSITION = _propTypes.default.shape({
 
 exports.POP_UP_CUSTOM_POSITION = POP_UP_CUSTOM_POSITION;
 
-var MODAL_SIZES = _propTypes.default.oneOf([_constants.MODAL_SM, _constants.MODAL_MD, _constants.MODAL_LG]);
+var MODAL_SIZES = _propTypes.default.oneOf([_constants.MODAL_SM, _constants.MODAL_MD, _constants.MODAL_LG, _constants.MODAL_MIN, _constants.MODAL_MAX]);
 
 exports.MODAL_SIZES = MODAL_SIZES;
 

package/package.json

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