iguazio.dashboard-react-controls 0.0.9 → 0.0.12

package/dist/components/Backdrop/Backdrop.js

@@ -9,8 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _reactDom = require("react-dom");
-
 var _reactTransitionGroup = require("react-transition-group");
 
 require("./Backdrop.scss");
@@ -24,7 +22,7 @@ var Backdrop = function Backdrop(_ref) {
       duration = _ref$duration === void 0 ? 300 : _ref$duration,
       show = _ref.show,
       onClose = _ref.onClose;
-  return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
     in: show,
     timeout: duration,
     classNames: "backdrop-transition",
@@ -34,7 +32,7 @@ var Backdrop = function Backdrop(_ref) {
       className: "backdrop",
       onClick: onClose
     })
-  }), document.getElementById('overlay_container'));
+  });
 };
 
 Backdrop.defaultProps = {

package/dist/components/Button/Button.js

@@ -25,7 +25,7 @@ require("./Button.scss");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _excluded = ["className", "icon", "label", "tooltip", "variant"];
+var _excluded = ["className", "density", "icon", "label", "tooltip", "variant"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -45,13 +45,14 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 var Button = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var className = _ref.className,
+      density = _ref.density,
       icon = _ref.icon,
       label = _ref.label,
       tooltip = _ref.tooltip,
       variant = _ref.variant,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
-  var buttonClassName = (0, _classnames.default)('btn', "btn-".concat(variant), className);
+  var buttonClassName = (0, _classnames.default)('btn', "btn-".concat(variant), "btn-".concat(density), className);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
     template: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextTooltipTemplate.default, {
       text: tooltip
@@ -68,12 +69,14 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
 });
 Button.defaultProps = {
   className: '',
+  density: 'normal',
   label: 'Button',
   tooltip: '',
   variant: _constants.TERTIARY_BUTTON
 };
 Button.propTypes = {
   className: _propTypes.default.string,
+  density: _propTypes.default.oneOf(['dense', 'normal', 'medium', 'chunky']),
   icon: _propTypes.default.element,
   label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]),
   tooltip: _propTypes.default.string,

package/dist/components/Button/Button.scss

@@ -7,16 +7,31 @@
   align-items: center;
   justify-content: center;
   min-width: 90px;
-  height: 36px;
+  height: $fieldNormal;
   padding: 0 16px;
   color: $white;
   font-weight: 500;
   font-size: 0.875rem;
   font-style: normal;
-  line-height: 16px;
   border: $transparentBorder;
   border-radius: $mainBorderRadius;
 
+  &-dense {
+    height: $fieldDense;
+  }
+
+  &-normal {
+    height: $fieldNormal;
+  }
+
+  &-medium {
+    height: $fieldMedium;
+  }
+
+  &-chunky {
+    height: $fieldChunky;
+  }
+
   svg {
     & > * {
       fill: currentColor;

package/dist/components/FormCheckBox/FormCheckBox.js

@@ -9,47 +9,65 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _checkboxUnchecked = require("../../images/checkbox-unchecked.svg");
+var _reactFinalForm = require("react-final-form");
 
-var _checkboxChecked = require("../../images/checkbox-checked.svg");
+var _classnames = _interopRequireDefault(require("classnames"));
 
 require("./formCheckBox.scss");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _excluded = ["children", "className", "name", "label"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+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 FormCheckBox = function FormCheckBox(_ref) {
-  var children = _ref.children,
+  var _children = _ref.children,
       className = _ref.className,
-      item = _ref.item,
-      onChange = _ref.onChange,
-      selectedId = _ref.selectedId;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-    className: "checkbox ".concat(className),
-    onClick: function onClick() {
-      onChange(item.id);
-    },
-    children: [item.id === selectedId ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkboxChecked.ReactComponent, {
-      className: "checked"
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkboxUnchecked.ReactComponent, {
-      className: "unchecked"
-    }), children || item.label]
+      name = _ref.name,
+      label = _ref.label,
+      inputProps = _objectWithoutProperties(_ref, _excluded);
+
+  var formFieldClassNames = (0, _classnames.default)('form-field-checkbox', className);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
+    name: name,
+    value: inputProps.value,
+    type: "checkbox",
+    children: function children(_ref2) {
+      var _inputProps$value, _inputProps$value2;
+
+      var input = _ref2.input;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: formFieldClassNames,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({}, _objectSpread(_objectSpread({}, input), inputProps)), {}, {
+          id: (_inputProps$value = inputProps.value) !== null && _inputProps$value !== void 0 ? _inputProps$value : name
+        })), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+          htmlFor: (_inputProps$value2 = inputProps.value) !== null && _inputProps$value2 !== void 0 ? _inputProps$value2 : name,
+          children: [label ? label : '', _children]
+        })]
+      });
+    }
   });
 };
 
 FormCheckBox.defaultProps = {
   className: '',
-  selectedId: ''
+  label: ''
 };
 FormCheckBox.propTypes = {
   className: _propTypes.default.string,
-  item: _propTypes.default.shape({
-    id: _propTypes.default.string.isRequired,
-    label: _propTypes.default.string
-  }).isRequired,
-  onChange: _propTypes.default.func.isRequired,
-  selectedId: _propTypes.default.string
+  name: _propTypes.default.string.isRequired,
+  label: _propTypes.default.string
 };
 
 var _default = /*#__PURE__*/_react.default.memo(FormCheckBox);

package/dist/components/FormCheckBox/formCheckBox.scss

@@ -1,32 +1,50 @@
 @import '../../scss/colors';
+@import '../../scss/mixins';
 
-.checkbox {
-  display: flex;
+.form-field-checkbox {
+  display: inline-flex;
   align-items: center;
+  justify-content: flex-start;
   color: $primary;
-  cursor: pointer;
 
-  &__label {
-    flex: 1;
-    font-size: 14px;
+  input[type='checkbox'] {
+    @include radioCheckField;
 
-    &-tip {
-      margin-left: 5px;
+    flex: 0 0 18px;
+    width: 18px;
+    height: 18px;
+    border-radius: 4px;
+    transition: background 0.2s ease-in-out;
+
+    &::before {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 1px;
+      left: 5px;
+      width: 6px;
+      height: 11px;
+      border-style: solid;
+      border-color: $white;
+      border-width: 0 2px 2px 0;
+      transform: rotate(45deg);
     }
-  }
 
-  svg {
-    margin-right: 5px;
+    &:checked {
+      background: currentColor;
+
+      &:hover {
+        background: currentColor;
 
-    &.checked {
-      path {
-        fill: $malibu;
+        &:disabled {
+          background: currentColor;
+        }
       }
     }
 
-    &.unchecked {
-      path {
-        fill: $spunPearl;
+    &:disabled {
+      &:hover {
+        background: $white;
       }
     }
   }

package/dist/components/FormInput/FormInput.js

@@ -17,6 +17,8 @@ var _lodash = require("lodash");
 
 var _reactFinalForm = require("react-final-form");
 
+var _InputNumberButtons = _interopRequireDefault(require("./InputNumberButtons/InputNumberButtons"));
+
 var _OptionsMenu = _interopRequireDefault(require("../../elements/OptionsMenu/OptionsMenu"));
 
 var _TextTooltipTemplate = _interopRequireDefault(require("../TooltipTemplate/TextTooltipTemplate"));
@@ -136,7 +138,7 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   (0, _useDetectOutsideClick.useDetectOutsideClick)(ref, function () {
     return setShowValidationRules(false);
   });
-  var formFieldClassNames = (0, _classnames.default)('form-field', className);
+  var formFieldClassNames = (0, _classnames.default)('form-field-input', className);
   var inputWrapperClassNames = (0, _classnames.default)('form-field__wrapper', "form-field__wrapper-".concat(density), disabled && 'form-field__wrapper-disabled', isInvalid && 'form-field__wrapper-invalid', withoutBorder && 'without-border');
   var labelClassNames = (0, _classnames.default)('form-field__label', disabled && 'form-field__label-disabled');
   (0, _react.useEffect)(function () {
@@ -189,18 +191,15 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     }
   };
 
-  var handleInputChange = function handleInputChange(event) {
-    input.onChange(event);
-    onChange && onChange(event.target.value);
-  };
-
   var handleInputFocus = function handleInputFocus(event) {
     input.onFocus(event);
     setIsFocused(true);
   };
 
   var handleScroll = function handleScroll(event) {
-    if (!event.target.closest('.options-menu') && !event.target.classList.contains('form-field')) {
+    if (inputRef.current.contains(event.target)) return;
+
+    if (!event.target.closest('.options-menu') && !event.target.classList.contains('form-field-input')) {
       setShowValidationRules(false);
     }
   };
@@ -229,7 +228,8 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   }, [meta.error]);
 
   var validateField = function validateField(value) {
-    var valueToValidate = value !== null && value !== void 0 ? value : '';
+    var valueToValidate = (0, _lodash.isNil)(value) ? '' : String(value);
+    if (!valueToValidate && !required) return;
     var validationError = null;
 
     if (!(0, _lodash.isEmpty)(validationRules)) {
@@ -253,6 +253,22 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     }
 
     if ((0, _lodash.isEmpty)(validationError)) {
+      if (inputProps.type === 'number') {
+        if (inputProps.max && +valueToValidate > +inputProps.max) {
+          validationError = {
+            name: 'maxValue',
+            label: "Max value is ".concat(inputProps.max)
+          };
+        }
+
+        if (inputProps.min && +valueToValidate < +inputProps.min) {
+          validationError = {
+            name: 'minValue',
+            label: "Min value is ".concat(inputProps.min)
+          };
+        }
+      }
+
       if (pattern && !validationPattern.test(valueToValidate)) {
         validationError = {
           name: 'pattern',
@@ -278,9 +294,15 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     return validationError;
   };
 
+  var parseField = function parseField(val) {
+    if (!val) return;
+    return inputProps.type === 'number' ? +val : val;
+  };
+
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
     validate: validateField,
     name: name,
+    parse: parseField,
     children: function children(_ref4) {
       var _inputProps$autocompl, _meta$error$label, _meta$error;
 
@@ -331,7 +353,6 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
               pattern: pattern
             }, inputProps), input)), {}, {
               autoComplete: (_inputProps$autocompl = inputProps.autocomplete) !== null && _inputProps$autocompl !== void 0 ? _inputProps$autocompl : 'off',
-              onChange: handleInputChange,
               onBlur: handleInputBlur,
               onFocus: handleInputFocus
             }))
@@ -356,7 +377,9 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
               className: iconClass,
               children: inputIcon
             })]
-          })]
+          }), inputProps.type === 'number' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputNumberButtons.default, _objectSpread({}, _objectSpread(_objectSpread(_objectSpread({}, inputProps), input), {}, {
+            disabled: disabled
+          })))]
         }), (suggestionList === null || suggestionList === void 0 ? void 0 : suggestionList.length) > 0 && isFocused && /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
           className: "form-field__suggestion-list",
           children: suggestionList.map(function (item, index) {
@@ -396,15 +419,15 @@ FormInput.defaultProps = {
     show: '',
     value: ''
   },
-  maxLength: null,
   min: null,
+  max: null,
   onBlur: function onBlur() {},
   onChange: function onChange() {},
   onKeyDown: function onKeyDown() {},
   pattern: null,
   placeholder: '',
   required: false,
-  step: '',
+  step: '1',
   suggestionList: [],
   tip: '',
   type: 'text',
@@ -423,8 +446,8 @@ FormInput.propTypes = {
   invalidText: _propTypes.default.string,
   label: _propTypes.default.string,
   link: _types.INPUT_LINK,
-  maxLength: _propTypes.default.number,
-  min: _propTypes.default.number,
+  min: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  max: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
   name: _propTypes.default.string.isRequired,
   onBlur: _propTypes.default.func,
   onChange: _propTypes.default.func,

package/dist/components/FormInput/InputNumberButtons/InputNumberButtons.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _lodash = require("lodash");
+
+var _rangeArrowSmall = require("igz-controls/images/range-arrow-small.svg");
+
+require("./InputNumberButtons.scss");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var InputNumberButtons = function InputNumberButtons(_ref) {
+  var disabled = _ref.disabled,
+      min = _ref.min,
+      max = _ref.max,
+      onChange = _ref.onChange,
+      step = _ref.step,
+      value = _ref.value;
+
+  var handleIncrease = function handleIncrease(event) {
+    event.preventDefault();
+    if (max && +value >= +max) return;
+    var currentValue = isCurrentValueEmpty() ? +step : +value + +step;
+    var nextValue = isInteger(currentValue) ? currentValue : currentValue.toFixed(3);
+    onChange(nextValue);
+  };
+
+  var handleDecrease = function handleDecrease(event) {
+    event.preventDefault();
+    if (value <= 0 || +value <= +min) return;
+    var currentValue = isCurrentValueEmpty() ? -step : +value - +step;
+    var nextValue = isInteger(currentValue) ? currentValue : currentValue.toFixed(3);
+    onChange(nextValue);
+  };
+
+  var isCurrentValueEmpty = function isCurrentValueEmpty() {
+    return (0, _lodash.isNil)(value) || value === '';
+  };
+
+  var isInteger = function isInteger(number) {
+    return Number(number) === number && number % 1 === 0;
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    "data-testid": "range-input-container",
+    className: "form-field-range",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "range__buttons",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        "data-testid": "btn-increase",
+        className: "range__button range__button-increase",
+        disabled: disabled,
+        onClick: handleIncrease,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_rangeArrowSmall.ReactComponent, {
+          className: "increase"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        "data-testid": "btn-decrease",
+        className: "range__button range__button-decrease",
+        disabled: disabled,
+        onClick: handleDecrease,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_rangeArrowSmall.ReactComponent, {
+          className: "decrease"
+        })
+      })]
+    })
+  });
+};
+
+InputNumberButtons.defaultProps = {
+  disabled: false,
+  min: null,
+  max: null,
+  step: '1'
+};
+InputNumberButtons.propTypes = {
+  disabled: _propTypes.default.bool,
+  min: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  max: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  onChange: _propTypes.default.func.isRequired,
+  step: _propTypes.default.string,
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired
+};
+
+var _default = /*#__PURE__*/_react.default.memo(InputNumberButtons);
+
+exports.default = _default;

package/dist/components/FormInput/InputNumberButtons/InputNumberButtons.scss

@@ -0,0 +1,123 @@
+@import '../../../scss/colors';
+@import '../../../scss/borders';
+
+.form-field-range {
+  align-self: stretch;
+
+  .range {
+    &__buttons {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      width: 28px;
+      height: 100%;
+    }
+
+    &__button {
+      display: flex;
+      width: 100%;
+      height: 50%;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      background-color: $wildSand;
+      cursor: pointer;
+
+      svg {
+        path {
+          fill: $topaz;
+        }
+      }
+
+      &:hover {
+        background-color: $mercury;
+
+        svg {
+          path {
+            fill: $primary;
+          }
+        }
+      }
+
+      &:focus {
+        border: $focusBorder;
+      }
+
+      &:active {
+        background-color: rgba($black, 0.2);
+        border: $focusBorder;
+
+        svg {
+          path {
+            fill: $primary;
+          }
+        }
+      }
+
+      &:disabled {
+        cursor: not-allowed;
+
+        svg {
+          path {
+            fill: $spunPearl;
+          }
+        }
+
+        &:focus {
+          border: none;
+        }
+
+        &:hover {
+          background-color: $wildSand;
+        }
+      }
+
+      &-increase {
+        border-bottom: $transparentBorder;
+        border-left: $transparentBorder;
+        border-top-right-radius: 4px;
+      }
+
+      &-decrease {
+        border-top: $transparentBorder;
+        border-left: $transparentBorder;
+        border-bottom-right-radius: 4px;
+      }
+
+      .decrease {
+        transform: rotate(180deg);
+      }
+    }
+
+    &-warning {
+      border: $errorBorder;
+
+      &_asterisk {
+        position: absolute;
+        top: 50%;
+        right: 35px;
+        color: $amaranth;
+        transform: translateY(-50%);
+      }
+
+      .range__button {
+        &-increase {
+          border-top: $errorBorder;
+          border-right: $errorBorder;
+        }
+
+        &-decrease {
+          border-right: $errorBorder;
+          border-bottom: $errorBorder;
+        }
+      }
+    }
+
+    &__warning-icon {
+      position: absolute;
+      top: 50%;
+      right: 30px;
+      transform: translateY(-50%);
+    }
+  }
+}