iguazio.dashboard-react-controls 0.0.16 → 0.0.17

package/dist/components/FormChipCell/FormChipCellView.js

@@ -17,7 +17,9 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _HiddenChipsBlock = _interopRequireDefault(require("../../elements/HiddenChipsBlock/HiddenChipsBlock"));
 
-var _components = require("igz-controls/components");
+var _TextTooltipTemplate = _interopRequireDefault(require("../TooltipTemplate/TextTooltipTemplate"));
+
+var _Tooltip = _interopRequireDefault(require("../Tooltip/Tooltip"));
 
 var _common = require("../../utils/common.util");
 
@@ -68,9 +70,9 @@ var FormChipCellView = /*#__PURE__*/_react.default.forwardRef(function (_ref, _r
               var chipData = fields.value[index];
               return index < chips.visibleChips.length && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
                 className: "chip-block",
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Tooltip, {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
                   hidden: editConfig.isEdit,
-                  template: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextTooltipTemplate, {
+                  template: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextTooltipTemplate.default, {
                     text: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
                       className: "chip__content",
                       children: [chipData.key, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {

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

@@ -11,7 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _lodash = require("lodash");
 
-var _rangeArrowSmall = require("igz-controls/images/range-arrow-small.svg");
+var _rangeArrowSmall = require("../../../images/range-arrow-small.svg");
 
 require("./InputNumberButtons.scss");
 

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

@@ -16,7 +16,7 @@
     &__button {
       display: flex;
       width: 100%;
-      height: 50%;
+      height: calc(50% + 1px);
       align-items: center;
       justify-content: center;
       padding: 0;

package/dist/components/FormInput/formInput.scss

@@ -6,6 +6,10 @@
 .form-field-input {
   width: 100%;
 
+  input {
+    width: 100%;
+  }
+
   .form-field {
     @include inputSelectField;
 

package/dist/components/FormSelect/FormSelect.js

@@ -108,11 +108,12 @@ var FormSelect = function FormSelect(_ref) {
 
   var selectWrapperClassNames = (0, _classnames.default)('form-field__wrapper', "form-field__wrapper-".concat(density), disabled && 'form-field__wrapper-disabled', isOpen && 'form-field__wrapper-active', isInvalid && 'form-field__wrapper-invalid', withoutBorder && 'without-border');
   var selectLabelClassName = (0, _classnames.default)('form-field__label', disabled && 'form-field__label-disabled');
+  var selectValueClassName = (0, _classnames.default)('form-field__select-value', !input.value && 'form-field__select-placeholder');
   var selectedOption = options.find(function (option) {
     return option.id === input.value;
   });
 
-  var getLabel = function getLabel() {
+  var getSelectValue = function getSelectValue() {
     if (!input.value || !input.value.length) {
       return "Select Option".concat(multiple ? 's' : '');
     }
@@ -222,8 +223,8 @@ var FormSelect = function FormSelect(_ref) {
               "data-testid": "selected-option",
               className: "form-field__select",
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                className: "form-field__select-value",
-                children: getLabel()
+                className: selectValueClassName,
+                children: getSelectValue()
               })
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {

package/dist/components/FormSelect/FormSelect.test.js

@@ -16,7 +16,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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; }
 
-jest.mock('igz-controls/images/dropdown.svg', function () {
+jest.mock('../../images/dropdown.svg', function () {
   return {
     ReactComponent: 'caret-icon'
   };

package/dist/components/FormSelect/formSelect.scss

@@ -51,6 +51,10 @@
         text-overflow: ellipsis;
       }
 
+      &-placeholder {
+        color: $spunPearl;
+      }
+
       &-sub_label {
         display: block;
         margin-left: 10px;

package/dist/components/FormTextarea/FormTextarea.js

@@ -15,15 +15,19 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactFinalForm = require("react-final-form");
 
-var _components = require("igz-controls/components");
+var _TextTooltipTemplate = _interopRequireDefault(require("../TooltipTemplate/TextTooltipTemplate"));
 
-var _invalid = require("igz-controls/images/invalid.svg");
+var _Tip = _interopRequireDefault(require("../Tip/Tip"));
+
+var _Tooltip = _interopRequireDefault(require("../Tooltip/Tooltip"));
+
+var _invalid = require("../../images/invalid.svg");
 
 require("./formTextarea.scss");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _excluded = ["className", "disabled", "focused", "iconClass", "invalidText", "label", "name", "onBlur", "onChange", "required", "textAreaIcon", "tip", "withoutBorder"];
+var _excluded = ["className", "disabled", "focused", "iconClass", "invalidText", "label", "maxLength", "name", "onBlur", "onChange", "required", "textAreaIcon", "tip", "withoutBorder"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -60,6 +64,7 @@ var TextArea = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       iconClass = _ref.iconClass,
       invalidText = _ref.invalidText,
       label = _ref.label,
+      maxLength = _ref.maxLength,
       name = _ref.name,
       onBlur = _ref.onBlur,
       onChange = _ref.onChange,
@@ -78,6 +83,11 @@ var TextArea = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       isInvalid = _useState2[0],
       setIsInvalid = _useState2[1];
 
+  var _useState3 = (0, _react.useState)(input.value.length),
+      _useState4 = _slicedToArray(_useState3, 2),
+      textAreaCount = _useState4[0],
+      setTextAreaCount = _useState4[1];
+
   var textAreaRef = /*#__PURE__*/_react.default.createRef();
 
   var formFieldClassNames = (0, _classnames.default)('form-field-textarea', className);
@@ -99,6 +109,7 @@ var TextArea = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
 
   var handleInputChange = function handleInputChange(event) {
     input.onChange(event);
+    setTextAreaCount(event.target.value.length);
     onChange && onChange(event.target.value);
   };
 
@@ -153,6 +164,7 @@ var TextArea = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", _objectSpread(_objectSpread({
               "data-testid": "textarea",
               id: input.name,
+              maxLength: maxLength,
               ref: textAreaRef,
               required: isInvalid || required
             }, _objectSpread(_objectSpread({
@@ -164,14 +176,14 @@ var TextArea = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
             }))
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             className: "form-field__icons",
-            children: [isInvalid && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Tooltip, {
+            children: [isInvalid && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
               className: "form-field__warning",
-              template: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextTooltipTemplate, {
+              template: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextTooltipTemplate.default, {
                 text: (_meta$error$label = (_meta$error = meta.error) === null || _meta$error === void 0 ? void 0 : _meta$error.label) !== null && _meta$error$label !== void 0 ? _meta$error$label : invalidText,
                 warning: true
               }),
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_invalid.ReactComponent, {})
-            }), tip && !required && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Tip, {
+            }), tip && !required && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tip.default, {
               text: tip,
               className: "form-field__tip"
             }), textAreaIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -180,6 +192,9 @@ var TextArea = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
               children: textAreaIcon
             })]
           })]
+        }), maxLength && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "form-field__counter",
+          children: "".concat(maxLength - textAreaCount, "/").concat(maxLength)
         })]
       });
     }
@@ -194,6 +209,7 @@ TextArea.defaultProps = {
   textAreaIcon: null,
   invalidText: 'This field is invalid',
   label: '',
+  maxLength: null,
   onBlur: function onBlur() {},
   onChange: function onChange() {},
   placeholder: '',
@@ -209,6 +225,7 @@ TextArea.propTypes = {
   textAreaIcon: _propTypes.default.element,
   invalidText: _propTypes.default.string,
   label: _propTypes.default.string,
+  maxLength: _propTypes.default.number,
   name: _propTypes.default.string.isRequired,
   onBlur: _propTypes.default.func,
   onChange: _propTypes.default.func,

package/dist/components/FormTextarea/formTextarea.scss

@@ -6,6 +6,10 @@
 .form-field-textarea {
   width: 100%;
 
+  textarea {
+    width: 100%;
+  }
+
   .form-field {
     @include inputSelectField;
 
@@ -19,5 +23,10 @@
         }
       }
     }
+
+    &__counter {
+      color: $topaz;
+      text-align: right;
+    }
   }
 }

package/dist/components/Wizard/Wizard.scss

@@ -3,6 +3,7 @@
     display: flex;
     flex-flow: row nowrap;
     overflow: hidden;
+    padding-top: 0;
     padding-right: 0;
   }
 
@@ -10,6 +11,7 @@
     overflow-y: auto;
     height: 100%;
     width: 100%;
+    padding-top: 1.5rem;
     padding-right: 2rem;
     padding-left: 1rem;
   }

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

@@ -6,6 +6,7 @@
   background-color: $white;
   min-width: 260px;
   margin-right: 1rem;
+  margin-top: 1.5rem;
   overflow-y: auto;
 
   &__indicator {

package/dist/elements/HiddenChipsBlock/HiddenChipsBlock.js

@@ -15,7 +15,9 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _FormChip = _interopRequireDefault(require("../../components/FormChipCell/FormChip/FormChip"));
 
-var _components = require("igz-controls/components");
+var _TextTooltipTemplate = _interopRequireDefault(require("../../components/TooltipTemplate/TextTooltipTemplate"));
+
+var _Tooltip = _interopRequireDefault(require("../../components/Tooltip/Tooltip"));
 
 var _getFirstScrollableParent = require("../../utils/getFirstScrollableParent.util");
 
@@ -130,8 +132,8 @@ var HiddenChipsBlock = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
     ref: hiddenRef,
     className: hiddenChipsBlockClassNames,
     children: chips === null || chips === void 0 ? void 0 : chips.map(function (element, index) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Tooltip, {
-        template: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextTooltipTemplate, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+        template: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextTooltipTemplate.default, {
           text: element.delimiter ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
             className: "chip__content",
             children: [element.key, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {

package/dist/elements/SelectOption/SelectOption.test.js

@@ -20,12 +20,12 @@ var renderComponent = function renderComponent(props) {
   return (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOption.default, _objectSpread({}, props)));
 };
 
-jest.mock('igz-controls/images/checkbox-unchecked.svg', function () {
+jest.mock('../../images/checkbox-unchecked.svg', function () {
   return {
     ReactComponent: 'unchecked-icon'
   };
 });
-jest.mock('igz-controls/images/checkbox-checked.svg', function () {
+jest.mock('../../images/checkbox-checked.svg', function () {
   return {
     ReactComponent: 'unchecked-icon'
   };

package/dist/scss/common.scss

@@ -53,7 +53,6 @@ textarea {
   background-color: transparent;
   padding: 0;
   resize: none;
-  width: 100%;
 
   &::placeholder {
     color: $spunPearl;

package/package.json

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