iguazio.dashboard-react-controls 2.0.5 → 2.0.7

package/dist/components/ConfirmDialog/ConfirmDialog.js

@@ -33,6 +33,7 @@ such restriction.
 const ConfirmDialog = _ref => {
   let {
     cancelButton,
+    children,
     className,
     closePopUp,
     confirmButton,
@@ -66,17 +67,22 @@ const ConfirmDialog = _ref => {
       children: [message && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: messageClassNames,
         children: message
+      }), children && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "confirm-dialog__body",
+        children: children
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "confirm-dialog__btn-container",
         children: [cancelButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
           className: "pop-up-dialog__btn_cancel",
           label: cancelButton.label,
           onClick: handleCancelDialog,
-          variant: cancelButton.variant
+          variant: cancelButton.variant,
+          disabled: cancelButton.disabled
         }), confirmButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
           label: confirmButton.label,
           onClick: handleConfirmDialog,
-          variant: confirmButton.variant
+          variant: confirmButton.variant,
+          disabled: confirmButton.disabled
         })]
       })]
     })

package/dist/components/ConfirmDialog/confirmDialog.scss

@@ -16,4 +16,8 @@
     justify-content: flex-end;
     margin-top: 20px;
   }
+
+  &__body {
+    margin: 20px 0;
+  }
 }

package/dist/components/FormCheckBox/FormCheckBox.js

@@ -83,7 +83,7 @@ FormCheckBox.propTypes = {
   className: _propTypes.default.string,
   highlightLabel: _propTypes.default.bool,
   name: _propTypes.default.string.isRequired,
-  label: _propTypes.default.string,
+  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]),
   readOnly: _propTypes.default.bool
 };
 var _default = exports.default = /*#__PURE__*/_react.default.memo(FormCheckBox);

package/dist/components/FormRadio/FormRadio.js

@@ -8,6 +8,8 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactFinalForm = require("react-final-form");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _Tooltip = _interopRequireDefault(require("../Tooltip/Tooltip"));
+var _TextTooltipTemplate = _interopRequireDefault(require("../TooltipTemplate/TextTooltipTemplate"));
 require("./FormRadio.scss");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -34,6 +36,7 @@ const FormRadio = _ref => {
     name,
     label,
     readOnly,
+    tooltip,
     ...inputProps
   } = _ref;
   const formFieldClassNames = (0, _classnames.default)('form-field-radio', readOnly && 'form-field-radio_readonly', className);
@@ -56,7 +59,16 @@ const FormRadio = _ref => {
           ...inputProps,
           checked: input.checked,
           id: name + inputProps.value
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+        }), tooltip ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+          className: "label",
+          template: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextTooltipTemplate.default, {
+            text: tooltip
+          }),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+            htmlFor: name + inputProps.value,
+            children: label
+          })
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
           htmlFor: name + inputProps.value,
           children: label
         })]

package/dist/components/Tooltip/Tooltip.js

@@ -66,36 +66,38 @@ const Tooltip = _ref => {
       If the child node is a text node and the text of the child node inside the container is greater than the width of the container, then show tooltip.
       */
       child.nodeType === Node.TEXT_NODE && parentRef.current.scrollWidth > parentRef.current.offsetWidth));
-      if (show) {
-        var _parentRef$current$ge, _parentRef$current, _tooltipRef$current$g, _tooltipRef$current;
-        setShow(true);
-        let {
-          height,
-          top,
-          bottom
-        } = (_parentRef$current$ge = parentRef === null || parentRef === void 0 || (_parentRef$current = parentRef.current) === null || _parentRef$current === void 0 ? void 0 : _parentRef$current.getBoundingClientRect()) !== null && _parentRef$current$ge !== void 0 ? _parentRef$current$ge : {};
-        const {
-          height: tooltipHeight,
-          width: tooltipWidth
-        } = (_tooltipRef$current$g = (_tooltipRef$current = tooltipRef.current) === null || _tooltipRef$current === void 0 ? void 0 : _tooltipRef$current.getBoundingClientRect()) !== null && _tooltipRef$current$g !== void 0 ? _tooltipRef$current$g : {
-          height: 0,
-          width: 0
-        };
-        const leftPosition = event.x - (event.x + tooltipWidth - window.innerWidth + offset);
-        const left = event.x + tooltipWidth + offset > window.innerWidth ? leftPosition > offset ? leftPosition : offset : event.x + offset;
-        if (top + height + offset + tooltipHeight >= window.innerHeight) {
-          const topPosition = bottom - height - offset - tooltipHeight;
-          setStyle({
-            top: topPosition > 0 ? topPosition : offset,
-            left
-          });
-        } else {
-          setStyle({
-            top: top + height + offset,
-            left
-          });
+      setShow(show);
+      setTimeout(() => {
+        if (show) {
+          var _parentRef$current$ge, _parentRef$current, _tooltipRef$current$g, _tooltipRef$current;
+          let {
+            height,
+            top,
+            bottom
+          } = (_parentRef$current$ge = parentRef === null || parentRef === void 0 || (_parentRef$current = parentRef.current) === null || _parentRef$current === void 0 ? void 0 : _parentRef$current.getBoundingClientRect()) !== null && _parentRef$current$ge !== void 0 ? _parentRef$current$ge : {};
+          const {
+            height: tooltipHeight,
+            width: tooltipWidth
+          } = (_tooltipRef$current$g = (_tooltipRef$current = tooltipRef.current) === null || _tooltipRef$current === void 0 ? void 0 : _tooltipRef$current.getBoundingClientRect()) !== null && _tooltipRef$current$g !== void 0 ? _tooltipRef$current$g : {
+            height: 0,
+            width: 0
+          };
+          const leftPosition = event.x - (event.x + tooltipWidth - window.innerWidth + offset);
+          const left = event.x + tooltipWidth + offset > window.innerWidth ? leftPosition > offset ? leftPosition : offset : event.x + offset;
+          if (top + height + offset + tooltipHeight >= window.innerHeight) {
+            const topPosition = bottom - height - offset - tooltipHeight;
+            setStyle({
+              top: topPosition > 0 ? topPosition : offset,
+              left
+            });
+          } else {
+            setStyle({
+              top: top + height + offset,
+              left
+            });
+          }
         }
-      }
+      }, 0);
     }
   }, [hidden, textShow, show]);
   const clearStyles = (0, _lodash.debounce)(() => {

package/dist/elements/SelectOption/SelectOption.js

@@ -49,6 +49,7 @@ const SelectOption = _ref => {
         name: name,
         value: item.id,
         label: item.label,
+        disabled: item.disabled || false,
         children: item.status && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "state-".concat(item.status, "-job status")
         })

package/dist/scss/mixins.scss

@@ -1126,7 +1126,7 @@
     pointer-events: none;
     opacity: 0.5;
 
-    ~ label {
+    ~ label, ~ .label {
       pointer-events: none;
       opacity: 0.5;
     }
@@ -1165,7 +1165,7 @@
       border-color: currentColor;
     }
 
-    ~ label {
+    ~ label, ~ .label {
       color: $spunPearl;
       cursor: not-allowed;
     }
@@ -1192,7 +1192,7 @@
     }
   }
 
-  ~ label {
+  ~ label, ~ .label {
     display: flex;
     flex: 1;
     align-items: center;

package/dist/types.js

@@ -81,7 +81,7 @@ const SELECT_OPTION = exports.SELECT_OPTION = _propTypes.default.shape({
   hidden: _propTypes.default.bool,
   icon: _propTypes.default.element,
   id: _propTypes.default.string.isRequired,
-  label: _propTypes.default.string.isRequired,
+  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]).isRequired,
   labelHtml: _propTypes.default.string,
   status: _propTypes.default.string,
   subLabel: _propTypes.default.string

package/package.json

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