iguazio.dashboard-react-controls 2.2.23 → 2.2.25

package/dist/components/FormChipCell/FormChip/FormChip.js

@@ -55,15 +55,13 @@ const FormChip = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     valueName = ''
   } = _ref;
   const chipRef = _react.default.useRef();
-  (0, _react.useEffect)(() => {
-    queueMicrotask(() => {
-      if (chipRef.current && setChipsSizes) {
-        setChipsSizes(state => ({
-          ...state,
-          [chipIndex]: chipRef.current.getBoundingClientRect().width
-        }));
-      }
-    });
+  (0, _react.useLayoutEffect)(() => {
+    if (chipRef.current && setChipsSizes) {
+      setChipsSizes(state => ({
+        ...state,
+        [chipIndex]: chipRef.current.getBoundingClientRect().width
+      }));
+    }
   }, [chipIndex, setChipsSizes]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     onClick: event => handleToEditMode(event, chipIndex, keyName),

package/dist/components/FormChipCell/NewChipForm/NewChipForm.js

@@ -14,6 +14,7 @@ var _ValidationTemplate = _interopRequireDefault(require("../../../elements/Vali
 var _types = require("../../../types");
 var _constants = require("../../../constants");
 var _formChipCell = require("../formChipCell.util");
+var _common = require("../../../utils/common.util");
 var _close = require("../../../images/close.svg");
 require("./newChipForm.scss");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -66,9 +67,6 @@ const NewChipForm = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const [selectedInput, setSelectedInput] = (0, _react.useState)('key');
   const [validationRules, setValidationRules] = (0, _react.useState)(rules);
   const [showValidationRules, setShowValidationRules] = (0, _react.useState)(false);
-  const maxWidthInput = (0, _react.useMemo)(() => {
-    return ref.current?.clientWidth - 50;
-  }, [ref]);
   const {
     background,
     borderColor,
@@ -82,29 +80,65 @@ const NewChipForm = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const minWidthValueInput = (0, _react.useMemo)(() => {
     return isEditable ? 35 : 20;
   }, [isEditable]);
+  const transitionEndEventName = (0, _react.useMemo)(() => (0, _common.getTransitionEndEventName)(), []);
   const refInputKey = _react.default.useRef({});
   const refInputValue = _react.default.useRef({});
   const refInputContainer = _react.default.useRef();
+  const validationRulesRef = _react.default.useRef();
   const labelKeyClassName = (0, _classnames.default)(className, !editConfig.isKeyFocused && 'item_edited', !(0, _lodash.isEmpty)((0, _lodash.get)(meta, ['error', chipIndex, 'key'], [])) && !(0, _lodash.isEmpty)(chipData.key) && !chip.disabled && 'item_edited_invalid');
   const labelContainerClassName = (0, _classnames.default)('edit-chip-container', background && `edit-chip-container-background_${background}`, borderColor && `edit-chip-container-border_${borderColor}`, font && `edit-chip-container-font_${font}`, density && `edit-chip-container-density_${density}`, borderRadius && `edit-chip-container-border_${borderRadius}`, (editConfig.isEdit || editConfig.isNewChip) && 'edit-chip-container_edited', chip.disabled && 'edit-chip-container_disabled edit-chip-container-font_disabled');
   const labelValueClassName = (0, _classnames.default)('input-label-value', !editConfig.isValueFocused && 'item_edited', !(0, _lodash.isEmpty)((0, _lodash.get)(meta, ['error', chipIndex, 'value'], [])) && !(0, _lodash.isEmpty)(chipData.value) && 'item_edited_invalid');
   const closeButtonClass = (0, _classnames.default)('item-icon-close', !chip.disabled && editConfig.chipIndex === chipIndex && isEditable && 'item-icon-close_invisible', !isEditable && 'item-icon-close_hidden');
-  (0, _react.useLayoutEffect)(() => {
-    if (!chipData.keyFieldWidth && !chipData.valueFieldWidth) {
-      const currentWidthKeyInput = refInputKey.current.scrollWidth + 1;
-      const currentWidthValueInput = refInputValue.current.scrollWidth + 1;
-      const keyFieldWidth = !chipData.key || currentWidthKeyInput <= minWidthInput ? minWidthInput : currentWidthKeyInput >= maxWidthInput ? maxWidthInput : currentWidthKeyInput;
-      const valueFieldWidth = !chipData.value || currentWidthValueInput <= minWidthValueInput ? minWidthValueInput : currentWidthValueInput >= maxWidthInput ? maxWidthInput : currentWidthValueInput;
+  const resizeChip = (0, _react.useCallback)(() => {
+    if (refInputKey.current) {
+      const currentWidthKeyInput = (0, _formChipCell.getTextWidth)(refInputKey.current) + 1;
+      const currentWidthValueInput = (0, _formChipCell.getTextWidth)(refInputValue.current) + 1;
+      const maxWidthInput = ref.current?.clientWidth - 50;
+      const keyEllipsis = currentWidthKeyInput >= maxWidthInput / 2;
+      const valueEllipsis = currentWidthValueInput >= maxWidthInput / 2;
+      let keyFieldWidth = null;
+      let valueFieldWidth = null;
+      if (keyEllipsis && valueEllipsis) {
+        keyFieldWidth = valueFieldWidth = maxWidthInput / 2;
+      } else if (keyEllipsis) {
+        valueFieldWidth = !chipData.value ? minWidthValueInput : currentWidthValueInput;
+        const remainingPlace = maxWidthInput - valueFieldWidth;
+        keyFieldWidth = remainingPlace > currentWidthKeyInput ? currentWidthKeyInput : remainingPlace;
+      } else if (valueEllipsis) {
+        keyFieldWidth = !chipData.key ? minWidthInput : currentWidthKeyInput;
+        const remainingPlace = maxWidthInput - keyFieldWidth;
+        valueFieldWidth = remainingPlace > currentWidthValueInput ? currentWidthValueInput : remainingPlace;
+      } else {
+        keyFieldWidth = !chipData.key || currentWidthKeyInput <= minWidthInput ? minWidthInput : currentWidthKeyInput;
+        valueFieldWidth = !chipData.value || currentWidthValueInput <= minWidthValueInput ? minWidthValueInput : currentWidthValueInput;
+      }
+      refInputKey.current.style.width = `${keyFieldWidth}px`;
+      if (!(0, _lodash.isEmpty)(refInputValue.current)) {
+        refInputValue.current.style.width = `${valueFieldWidth}px`;
+      }
       setChipData(prevState => ({
         ...prevState,
         keyFieldWidth,
         valueFieldWidth
       }));
     }
-  }, [minWidthInput, minWidthValueInput, chipData.key, chipData.value, chipData.keyFieldWidth, chipData.valueFieldWidth, maxWidthInput, refInputKey, refInputValue]);
-  const handleScroll = () => {
-    setShowValidationRules(false);
-  };
+  }, [chipData.key, chipData.value, minWidthInput, minWidthValueInput, ref]);
+  (0, _react.useEffect)(() => {
+    const resizeChipDebounced = (0, _lodash.throttle)(resizeChip, 500);
+    if (isEditable) {
+      window.addEventListener('resize', resizeChipDebounced);
+      window.addEventListener(transitionEndEventName, resizeChipDebounced);
+      return () => {
+        window.removeEventListener('resize', resizeChipDebounced);
+        window.removeEventListener(transitionEndEventName, resizeChipDebounced);
+      };
+    }
+  }, [isEditable, resizeChip, transitionEndEventName]);
+  (0, _react.useEffect)(() => {
+    if (!chipData.keyFieldWidth && !chipData.valueFieldWidth) {
+      resizeChip();
+    }
+  }, [chipData.keyFieldWidth, chipData.valueFieldWidth, resizeChip]);
   (0, _react.useEffect)(() => {
     if (showValidationRules) {
       window.addEventListener('scroll', handleScroll, true);
@@ -122,17 +156,32 @@ const NewChipForm = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       }
     }
   }, [editConfig.isKeyFocused, editConfig.isValueFocused, refInputKey, refInputValue, chipIndex, editConfig.chipIndex]);
-  const outsideClick = (0, _react.useCallback)(event => {
+  const outsideClick = (0, _react.useCallback)((event, forceOutsideClick) => {
     if (editConfig.chipIndex === chipIndex) {
       const elementPath = event.path ?? event.composedPath?.();
-      if (!elementPath.includes(refInputContainer.current)) {
+      if (!elementPath.includes(refInputContainer.current) || forceOutsideClick) {
         onChange(event, _constants.CLICK, true);
         window.getSelection().removeAllRanges();
+        document.activeElement.blur();
       } else {
         event.stopPropagation();
       }
     }
   }, [onChange, refInputContainer, chipIndex, editConfig.chipIndex]);
+  const handleScroll = (0, _react.useCallback)(event => {
+    if (validationRulesRef?.current && !validationRulesRef.current.contains(event.target)) {
+      setShowValidationRules(false);
+      outsideClick(event, true);
+    }
+  }, [outsideClick]);
+  (0, _react.useEffect)(() => {
+    if (showValidationRules) {
+      window.addEventListener('scroll', handleScroll, true);
+    }
+    return () => {
+      window.removeEventListener('scroll', handleScroll, true);
+    };
+  }, [handleScroll, showValidationRules]);
   (0, _react.useEffect)(() => {
     if (editConfig.isEdit) {
       document.addEventListener('click', outsideClick, true);
@@ -185,6 +234,7 @@ const NewChipForm = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     }
   }, [keyName, refInputKey, refInputValue, setEditConfig, editConfig.chipIndex, chipIndex]);
   const handleOnChange = (0, _react.useCallback)(event => {
+    const maxWidthInput = ref.current?.clientWidth - 50;
     event.preventDefault();
     if (event.target.name === keyName) {
       const currentWidthKeyInput = (0, _formChipCell.getTextWidth)(refInputKey.current);
@@ -201,7 +251,7 @@ const NewChipForm = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         valueFieldWidth: refInputValue.current.value?.length <= 1 ? minWidthValueInput : currentWidthValueInput >= maxWidthInput ? maxWidthInput : currentWidthValueInput > minWidthValueInput ? currentWidthValueInput + 2 : minWidthValueInput
       }));
     }
-  }, [keyName, minWidthInput, maxWidthInput, minWidthValueInput]);
+  }, [keyName, minWidthInput, ref, minWidthValueInput]);
   (0, _react.useLayoutEffect)(() => {
     if (editConfig.chipIndex === chipIndex) {
       setSelectedInput(editConfig.isKeyFocused ? 'key' : editConfig.isValueFocused ? 'value' : null);
@@ -277,7 +327,10 @@ const NewChipForm = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_close.ReactComponent, {})
     }), !chip.disabled && (editConfig.isKeyFocused ? !(0, _lodash.isEmpty)(chipData.key) : !(0, _lodash.isEmpty)(chipData.value)) && editConfig.chipIndex === chipIndex && !(0, _lodash.isEmpty)((0, _lodash.get)(meta, ['error', editConfig.chipIndex, selectedInput], [])) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_OptionsMenu.default, {
       show: showValidationRules,
-      ref: refInputContainer,
+      ref: {
+        refInputContainer,
+        validationRulesRef
+      },
       children: getValidationRules()
     })]
   });

package/dist/components/FormInput/FormInput.js

@@ -51,6 +51,7 @@ const defaultProps = {
   onBlur: () => {},
   onChange: () => {},
   onKeyDown: () => {},
+  onValidationError: () => {},
   validator: () => {},
   rules: []
 };
@@ -75,6 +76,7 @@ const FormInput = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     onKeyDown = defaultProps.onKeyDown,
     pattern = null,
     required = false,
+    onValidationError = defaultProps.onValidationError,
     suggestionList = [],
     step = '1',
     tip = '',
@@ -108,8 +110,10 @@ const FormInput = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     setTypedValue(String(input.value)); // convert from number to string
   }, [input.value]);
   (0, _react.useEffect)(() => {
-    setIsInvalid(errorsRef.current && meta.invalid && (meta.validating || meta.modified || meta.submitFailed && meta.touched));
-  }, [meta.invalid, meta.modified, meta.submitFailed, meta.touched, meta.validating]);
+    const isInputInvalid = errorsRef.current && meta.invalid && (meta.validating || meta.modified || meta.submitFailed && meta.touched);
+    setIsInvalid(isInputInvalid);
+    onValidationError(isInputInvalid);
+  }, [meta.invalid, meta.modified, meta.submitFailed, meta.touched, meta.validating, onValidationError]);
   (0, _react.useEffect)(() => {
     if (!errorsRef.current) {
       if (meta.valid && showValidationRules) {

package/dist/elements/OptionsMenu/OptionsMenu.js

@@ -4,15 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactTransitionGroup = require("react-transition-group");
 var _components = require("../../components");
 require("./optionsMenu.scss");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /*
 Copyright 2022 Iguazio Systems Ltd.
 Licensed under the Apache License, Version 2.0 (the "License") with
@@ -30,28 +28,31 @@ under the Apache 2.0 license is conditioned upon your compliance with
 such restriction.
 */
 
-const OptionsMenu = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const OptionsMenu = /*#__PURE__*/_react.default.forwardRef((_ref, _ref2) => {
   let {
     children = [],
     show = false,
     timeout = 300
   } = _ref;
-  const nodeRef = (0, _react.useRef)(null);
+  let {
+    refInputContainer,
+    validationRulesRef
+  } = _ref2;
   const {
     width: dropdownWidth
-  } = ref.current ? ref.current.getBoundingClientRect() : {};
+  } = refInputContainer?.current ? refInputContainer.current.getBoundingClientRect() : {};
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
-    nodeRef: nodeRef,
+    nodeRef: validationRulesRef,
     in: show,
     timeout: timeout,
     classNames: "options-menu-transition",
     unmountOnExit: true,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.PopUpDialog, {
-      ref: nodeRef,
+      ref: validationRulesRef,
       headerIsHidden: true,
       className: "options-menu",
       customPosition: {
-        element: ref,
+        element: refInputContainer,
         position: 'bottom-right',
         autoVerticalPosition: true,
         autoHorizontalPosition: true

package/dist/images/navbar/llm-prompt-icon.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.6 10.8H10.8V9H3.6V10.8ZM3.6 8.1H14.4V6.3H3.6V8.1ZM3.6 5.4H14.4V3.6H3.6V5.4ZM0 18V1.8C0 1.305 0.17625 0.88125 0.52875 0.52875C0.88125 0.17625 1.305 0 1.8 0H16.2C16.695 0 17.1187 0.17625 17.4713 0.52875C17.8237 0.88125 18 1.305 18 1.8V12.6C18 13.095 17.8237 13.5188 17.4713 13.8713C17.1187 14.2238 16.695 14.4 16.2 14.4H3.6L0 18ZM2.835 12.6H16.2V1.8H1.8V13.6125L2.835 12.6Z" fill="white"/>
+</svg>

package/dist/images/navbar/model-monitoring.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 21.44V19.28H21V21.44H3ZM3.9 18.2V10.64H6.6V18.2H3.9ZM8.4 18.2V5.24H11.1V18.2H8.4ZM12.9 18.2V8.48H15.6V18.2H12.9ZM17.4 18.2V2H20.1V18.2H17.4Z" fill="white"/>
+</svg>

package/package.json

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