@vitrosoftware/common-ui-ts 1.1.219 → 1.1.220

package/dist/index.js

@@ -61439,25 +61439,188 @@ var OverflowButton = function OverflowButton(props) {
   });
 };
 
+var CSS_PROPERTY = function CSS_PROPERTY() {};
+CSS_PROPERTY.FONT_WEIGHT = 'font-weight';
+CSS_PROPERTY.FONT_SIZE = 'font-size';
+CSS_PROPERTY.FONT_FAMILY = 'font-family';
+
+var ValueTooltip = React.forwardRef(function (props, ref) {
+  var _useState = React.useState(false),
+    isEnabled = _useState[0],
+    setIsEnabled = _useState[1];
+  var _useState2 = React.useState(false),
+    isShow = _useState2[0],
+    setIsShow = _useState2[1];
+  var _useState3 = React.useState(props.text),
+    text = _useState3[0],
+    _setText = _useState3[1];
+  var canvasRef = React.useRef();
+  var containerRef = React.useRef();
+  var onShowTimeout = React.useMemo(function () {
+    return {
+      id: null
+    };
+  }, []);
+  var resizeObserver = React__default.useMemo(function () {
+    return new window.ResizeObserver(function (entries) {
+      for (var _iterator = _createForOfIteratorHelperLoose(entries), _step; !(_step = _iterator()).done;) {
+        var entry = _step.value;
+        setIsEnabled(isValueOverflow(text, entry.target));
+      }
+    });
+  }, [text]);
+  React.useEffect(function () {
+    if (props.containerRef && props.containerRef.current) {
+      containerRef.current = props.containerRef.current;
+      resizeObserver.observe(containerRef.current);
+      containerRef.current.addEventListener(exports.EVENT.MOUSEENTER, onMouseEnter);
+      containerRef.current.addEventListener(exports.EVENT.MOUSELEAVE, onMouseLeave);
+    }
+    return function () {
+      if (containerRef.current) {
+        containerRef.current.removeEventListener(exports.EVENT.MOUSEENTER, onMouseEnter);
+        containerRef.current.removeEventListener(exports.EVENT.MOUSELEAVE, onMouseLeave);
+      }
+    };
+  }, [props.containerRef, resizeObserver]);
+  React.useEffect(function () {
+    return function () {
+      resizeObserver.disconnect();
+    };
+  }, []);
+  React.useEffect(function () {
+    _setText(props.text);
+    if (containerRef.current) {
+      setIsEnabled(isValueOverflow(props.text, containerRef.current));
+    } else {
+      setIsEnabled(true);
+    }
+  }, [props.text]);
+  React.useEffect(function () {
+    if (props.onUpdate) {
+      props.onUpdate(isEnabled);
+    }
+  }, [isEnabled]);
+  React.useImperativeHandle(ref, function () {
+    return {
+      update: function update() {
+        if (containerRef.current) {
+          setIsEnabled(isValueOverflow(text, containerRef.current));
+        }
+      },
+      setIsShow: function setIsShow(value) {
+        if (value === false) {
+          setIsEnabled(false);
+        } else {
+          if (containerRef.current) {
+            setIsEnabled(isValueOverflow(text, containerRef.current));
+          } else {
+            setIsEnabled(true);
+          }
+        }
+      },
+      setText: function setText(value) {
+        _setText(value);
+      }
+    };
+  });
+  var isValueOverflow = function isValueOverflow(value, container) {
+    if (props.isMultiline) {
+      return isValueVerticalOverflow(container);
+    }
+    return isValueHorizontalOverflow(value, container);
+  };
+  var isValueHorizontalOverflow = function isValueHorizontalOverflow(value, container) {
+    var textWidth = getTextWidth(value, getCanvasFont(container), container.scrollWidth);
+    if (container && textWidth > getAvailableWidth(container)) {
+      return true;
+    } else {
+      return false;
+    }
+  };
+  var isValueVerticalOverflow = function isValueVerticalOverflow(container) {
+    return container.clientHeight + 1 < container.scrollHeight;
+  };
+  var getTextWidth = function getTextWidth(text, font, scrollWidth) {
+    if (!canvasRef.current) {
+      canvasRef.current = document.createElement('canvas');
+    }
+    var canvas = canvasRef.current;
+    var context = canvas.getContext('2d');
+    if (context) {
+      context.font = font;
+      var metrics = context.measureText(text);
+      return metrics.width;
+    }
+    return scrollWidth;
+  };
+  var getAvailableWidth = function getAvailableWidth(element) {
+    var style = getComputedStyle(element);
+    var paddingX = getNumber(style.paddingLeft) + getNumber(style.paddingRight);
+    var borderX = getNumber(style.borderLeftWidth) + getNumber(style.borderRightWidth);
+    return element.offsetWidth - paddingX - borderX;
+  };
+  var getNumber = function getNumber(value) {
+    return parseFloat(value) || 0;
+  };
+  var getCssStyle = function getCssStyle(element, prop) {
+    return window.getComputedStyle(element, null).getPropertyValue(prop);
+  };
+  var getCanvasFont = function getCanvasFont(el) {
+    if (el === void 0) {
+      el = document.body;
+    }
+    var fontWeight = getCssStyle(el, CSS_PROPERTY.FONT_WEIGHT);
+    var fontSize = getCssStyle(el, CSS_PROPERTY.FONT_SIZE);
+    var fontFamily = getCssStyle(el, CSS_PROPERTY.FONT_FAMILY);
+    return fontWeight + " " + fontSize + " " + fontFamily;
+  };
+  var onMouseEnter = function onMouseEnter(e) {
+    if (onShowTimeout.id) {
+      clearTimeout(onShowTimeout.id);
+    }
+    if (e.target == containerRef.current) {
+      onShowTimeout.id = setTimeout(function () {
+        setIsShow(true);
+      }, 750);
+    }
+  };
+  var onMouseLeave = function onMouseLeave(e) {
+    if (onShowTimeout.id) {
+      clearTimeout(onShowTimeout.id);
+    }
+    setTimeout(function () {
+      return setIsShow(false);
+    }, 300);
+  };
+  return React__default.createElement(Tooltip$1, Object.assign({}, props, {
+    text: text,
+    isShow: isEnabled ? isShow : false,
+    isHideOnHover: false
+  }), props.children);
+});
+
 var styles$r = {"vitro-tab":"_tab-group_vitro-tab_1Qb50HL","vitro-item":"_tab-group_vitro-item_2YnBcmb","active":"_tab-group_active_3M-IIR2"};
 
 var Tab = function Tab(props) {
-  if (!props.icon && !props.title) {
-    return null;
-  }
+  var linkRef = React.useRef(null);
   return React__default.createElement("div", {
     key: props.index,
     className: styles$r['vitro-item']
+  }, React__default.createElement(ValueTooltip, {
+    text: props.text,
+    containerRef: linkRef
   }, React__default.createElement(Nav$2.Item, {
     className: props.active ? styles$r['active'] : undefined,
     onClick: function onClick() {
       return props.onClick(props.index);
     }
   }, React__default.createElement(Nav$2.Link, {
-    eventKey: props.eventKey
-  }, React__default.createElement("span", null, props.icon && React__default.createElement(Image, {
-    defaultUrl: props.icon
-  }), props.title))));
+    eventKey: props.eventKey,
+    ref: linkRef
+  }, React__default.createElement("span", null, props.imageUrl && React__default.createElement(Image, {
+    defaultUrl: props.imageUrl
+  }), props.text)))));
 };
 
 var TabGroupHeader = function TabGroupHeader(props) {
@@ -61505,8 +61668,8 @@ var TabGroupHeader = function TabGroupHeader(props) {
         active: index === props.currentTab,
         onClick: onClick,
         eventKey: item.eventKey,
-        icon: item.icon,
-        title: item.text
+        imageUrl: item.imageUrl,
+        text: item.text
       });
     }
     if (activeItem && activeItem.index === index) {
@@ -61520,8 +61683,8 @@ var TabGroupHeader = function TabGroupHeader(props) {
     active: true,
     onClick: function onClick() {},
     eventKey: activeItem.eventKey,
-    icon: activeItem.icon,
-    title: activeItem.text
+    imageUrl: activeItem.imageUrl,
+    text: activeItem.text
   }), props.itemList && props.wrap && React__default.createElement(OverflowButton, {
     list: overflowTabList,
     offset: props.itemList.length - overflowTabList.length,
@@ -63273,170 +63436,9 @@ var CriterionFieldIterator = function CriterionFieldIterator(props) {
   })));
 };
 
-var CSS_PROPERTY = function CSS_PROPERTY() {};
-CSS_PROPERTY.FONT_WEIGHT = 'font-weight';
-CSS_PROPERTY.FONT_SIZE = 'font-size';
-CSS_PROPERTY.FONT_FAMILY = 'font-family';
-
-var ValueTooltip = React.forwardRef(function (props, ref) {
-  var _useState = React.useState(false),
-    isEnabled = _useState[0],
-    setIsEnabled = _useState[1];
-  var _useState2 = React.useState(false),
-    isShow = _useState2[0],
-    setIsShow = _useState2[1];
-  var _useState3 = React.useState(props.text),
-    text = _useState3[0],
-    _setText = _useState3[1];
-  var canvasRef = React.useRef();
-  var containerRef = React.useRef();
-  var onShowTimeout = React.useMemo(function () {
-    return {
-      id: null
-    };
-  }, []);
-  var resizeObserver = React__default.useMemo(function () {
-    return new window.ResizeObserver(function (entries) {
-      for (var _iterator = _createForOfIteratorHelperLoose(entries), _step; !(_step = _iterator()).done;) {
-        var entry = _step.value;
-        setIsEnabled(isValueOverflow(text, entry.target));
-      }
-    });
-  }, [text]);
-  React.useEffect(function () {
-    if (props.containerRef && props.containerRef.current) {
-      containerRef.current = props.containerRef.current;
-      resizeObserver.observe(containerRef.current);
-      containerRef.current.addEventListener(exports.EVENT.MOUSEENTER, onMouseEnter);
-      containerRef.current.addEventListener(exports.EVENT.MOUSELEAVE, onMouseLeave);
-    }
-    return function () {
-      if (containerRef.current) {
-        containerRef.current.removeEventListener(exports.EVENT.MOUSEENTER, onMouseEnter);
-        containerRef.current.removeEventListener(exports.EVENT.MOUSELEAVE, onMouseLeave);
-      }
-    };
-  }, [props.containerRef, resizeObserver]);
-  React.useEffect(function () {
-    return function () {
-      resizeObserver.disconnect();
-    };
-  }, []);
-  React.useEffect(function () {
-    _setText(props.text);
-    if (containerRef.current) {
-      setIsEnabled(isValueOverflow(props.text, containerRef.current));
-    } else {
-      setIsEnabled(true);
-    }
-  }, [props.text]);
-  React.useEffect(function () {
-    if (props.onUpdate) {
-      props.onUpdate(isEnabled);
-    }
-  }, [isEnabled]);
-  React.useImperativeHandle(ref, function () {
-    return {
-      update: function update() {
-        if (containerRef.current) {
-          setIsEnabled(isValueOverflow(text, containerRef.current));
-        }
-      },
-      setIsShow: function setIsShow(value) {
-        if (value === false) {
-          setIsEnabled(false);
-        } else {
-          if (containerRef.current) {
-            setIsEnabled(isValueOverflow(text, containerRef.current));
-          } else {
-            setIsEnabled(true);
-          }
-        }
-      },
-      setText: function setText(value) {
-        _setText(value);
-      }
-    };
-  });
-  var isValueOverflow = function isValueOverflow(value, container) {
-    if (props.isMultiline) {
-      return isValueVerticalOverflow(container);
-    }
-    return isValueHorizontalOverflow(value, container);
-  };
-  var isValueHorizontalOverflow = function isValueHorizontalOverflow(value, container) {
-    var textWidth = getTextWidth(value, getCanvasFont(container), container.scrollWidth);
-    if (container && textWidth > getAvailableWidth(container)) {
-      return true;
-    } else {
-      return false;
-    }
-  };
-  var isValueVerticalOverflow = function isValueVerticalOverflow(container) {
-    return container.clientHeight + 1 < container.scrollHeight;
-  };
-  var getTextWidth = function getTextWidth(text, font, scrollWidth) {
-    if (!canvasRef.current) {
-      canvasRef.current = document.createElement('canvas');
-    }
-    var canvas = canvasRef.current;
-    var context = canvas.getContext('2d');
-    if (context) {
-      context.font = font;
-      var metrics = context.measureText(text);
-      return metrics.width;
-    }
-    return scrollWidth;
-  };
-  var getAvailableWidth = function getAvailableWidth(element) {
-    var style = getComputedStyle(element);
-    var paddingX = getNumber(style.paddingLeft) + getNumber(style.paddingRight);
-    var borderX = getNumber(style.borderLeftWidth) + getNumber(style.borderRightWidth);
-    return element.offsetWidth - paddingX - borderX;
-  };
-  var getNumber = function getNumber(value) {
-    return parseFloat(value) || 0;
-  };
-  var getCssStyle = function getCssStyle(element, prop) {
-    return window.getComputedStyle(element, null).getPropertyValue(prop);
-  };
-  var getCanvasFont = function getCanvasFont(el) {
-    if (el === void 0) {
-      el = document.body;
-    }
-    var fontWeight = getCssStyle(el, CSS_PROPERTY.FONT_WEIGHT);
-    var fontSize = getCssStyle(el, CSS_PROPERTY.FONT_SIZE);
-    var fontFamily = getCssStyle(el, CSS_PROPERTY.FONT_FAMILY);
-    return fontWeight + " " + fontSize + " " + fontFamily;
-  };
-  var onMouseEnter = function onMouseEnter(e) {
-    if (onShowTimeout.id) {
-      clearTimeout(onShowTimeout.id);
-    }
-    if (e.target == containerRef.current) {
-      onShowTimeout.id = setTimeout(function () {
-        setIsShow(true);
-      }, 750);
-    }
-  };
-  var onMouseLeave = function onMouseLeave(e) {
-    if (onShowTimeout.id) {
-      clearTimeout(onShowTimeout.id);
-    }
-    setTimeout(function () {
-      return setIsShow(false);
-    }, 300);
-  };
-  return React__default.createElement(Tooltip$1, Object.assign({}, props, {
-    text: text,
-    isShow: isEnabled ? isShow : false,
-    isHideOnHover: false
-  }), props.children);
-});
-
 var styles$M = {"vitro-selected-item-multi":"_lookup-picker-selected-item_vitro-selected-item-multi_bzL7ugZ","vitro-selected-item":"_lookup-picker-selected-item_vitro-selected-item_hw-euth","vitro-button-close":"_lookup-picker-selected-item_vitro-button-close_1SRnr_0"};
 
-var styles$N = {"vitro-lookup-picker":"_lookup-picker_vitro-lookup-picker_1aXYQEG","vitro-content":"_lookup-picker_vitro-content_37L0slb","vitro-read-only":"_lookup-picker_vitro-read-only_32NOdGB","vitro-label":"_lookup-picker_vitro-label_2QoJkUz","vitro-focus":"_lookup-picker_vitro-focus_2UGpxXD","vitro-error":"_lookup-picker_vitro-error_dF7iopC","vitro-error-message":"_lookup-picker_vitro-error-message_2iBjyRP","vitro-copy-button":"_lookup-picker_vitro-copy-button_3UItrZb","vitro-value-container":"_lookup-picker_vitro-value-container_3GeBIaW","vitro-multi-value-container":"_lookup-picker_vitro-multi-value-container_2ScQ_Ua","vitro-lookup-picker-multi-select":"_lookup-picker_vitro-lookup-picker-multi-select_3Lkq2tk","vitro-button-close":"_lookup-picker_vitro-button-close_3_Qndrj","vitro-button-collapse-up":"_lookup-picker_vitro-button-collapse-up_3i0OJub","vitro-button-collapse-bottom":"_lookup-picker_vitro-button-collapse-bottom_3o0Pl83","vitro-tooltip":"_lookup-picker_vitro-tooltip_2a12Z4P","vitro-right":"_lookup-picker_vitro-right_1XFsL1w","vitro-library-button":"_lookup-picker_vitro-library-button_1zwNYAA"};
+var styles$N = {"vitro-lookup-picker":"_lookup-picker_vitro-lookup-picker_1aXYQEG","vitro-content":"_lookup-picker_vitro-content_37L0slb","vitro-read-only":"_lookup-picker_vitro-read-only_32NOdGB","vitro-label":"_lookup-picker_vitro-label_2QoJkUz","vitro-focus":"_lookup-picker_vitro-focus_2UGpxXD","vitro-error":"_lookup-picker_vitro-error_dF7iopC","vitro-error-message":"_lookup-picker_vitro-error-message_2iBjyRP","vitro-copy-button":"_lookup-picker_vitro-copy-button_3UItrZb","vitro-value-container":"_lookup-picker_vitro-value-container_3GeBIaW","vitro-multi-value-container":"_lookup-picker_vitro-multi-value-container_2ScQ_Ua","vitro-lookup-picker-multi-select":"_lookup-picker_vitro-lookup-picker-multi-select_3Lkq2tk","vitro-button-close":"_lookup-picker_vitro-button-close_3_Qndrj","vitro-button-collapse-up":"_lookup-picker_vitro-button-collapse-up_3i0OJub","vitro-button-collapse-bottom":"_lookup-picker_vitro-button-collapse-bottom_3o0Pl83","vitro-tooltip":"_lookup-picker_vitro-tooltip_2a12Z4P","vitro-right":"_lookup-picker_vitro-right_1XFsL1w","vitro-library-button":"_lookup-picker_vitro-library-button_1zwNYAA","vitro-placeholder":"_lookup-picker_vitro-placeholder_2Soq8bU"};
 
 var htmlValueStyles = {"vitro-item-html-value":"_lookup-picker-html-value_vitro-item-html-value_2QBoTey"};
 
@@ -63989,7 +63991,9 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     isReadOnly: props.isReadOnly,
     isValueListVisible: valueListVisible,
     getHtmlValue: getHtmlValue
-  }) : !valueListVisible && React__default.createElement(React__default.Fragment, null, props.placeholder), isEditable && React__default.createElement("input", {
+  }) : !valueListVisible && React__default.createElement("div", {
+    className: styles$N['vitro-placeholder']
+  }, props.placeholder), isEditable && React__default.createElement("input", {
     ref: inputRef,
     value: inputValue,
     onKeyDown: onKeyDown,
@@ -67100,7 +67104,7 @@ var Viewer = function Viewer(props) {
 };
 
 var name = "@vitrosoftware/common-ui-ts";
-var version$1 = "1.1.219";
+var version$1 = "1.1.220";
 var description = "vitro software common ui ts";
 var author = "";
 var license = "MIT";
@@ -83470,7 +83474,6 @@ var EditableFieldIterator = function EditableFieldIterator(props) {
     changedFieldValueMap: changedFieldValueMap,
     componentMap: componentMap,
     onChange: onChange,
-    isVisibleOverflow: true,
     className: styles$1r['vitro-field-iterator']
   }) : React__default.createElement(ScrollBar, {
     className: styles$1r['vitro-scrollbar']
@@ -83480,7 +83483,6 @@ var EditableFieldIterator = function EditableFieldIterator(props) {
     changedFieldValueMap: changedFieldValueMap,
     componentMap: componentMap,
     onChange: onChange,
-    isVisibleOverflow: true,
     className: styles$1r['vitro-field-iterator']
   })));
 };
@@ -84882,7 +84884,7 @@ var DxfViewer = function DxfViewer(props) {
   });
 };
 
-var styles$1O = {"vitro-select":"_select_vitro-select_EObExkL","vitro-active":"_select_vitro-active_3I2oZ9Y","vitro-label":"_select_vitro-label_1sD79dR","vitro-list-container":"_select_vitro-list-container_1iaPtG5","vitro-item":"_select_vitro-item_3Q88bWt"};
+var styles$1O = {"vitro-select":"_select_vitro-select_EObExkL","vitro-active":"_select_vitro-active_3I2oZ9Y","vitro-label":"_select_vitro-label_1sD79dR","vitro-list-container":"_select_vitro-list-container_1iaPtG5","vitro-item":"_select_vitro-item_3Q88bWt","vitro-scrollbar":"_select_vitro-scrollbar_1T9-kjS"};
 
 var Select = function Select(props) {
   var _useState = React.useState(null),
@@ -84948,11 +84950,13 @@ var Select = function Select(props) {
   }), React__default.createElement(itemTemplate, value), React__default.createElement("div", {
     className: styles$1O['vitro-list-container'],
     ref: listRef
+  }, React__default.createElement(ScrollBar, {
+    className: styles$1O['vitro-scrollbar']
   }, React__default.createElement(List$1, {
     itemList: props.itemList,
     onClick: onClick,
     itemTemplate: itemTemplate
-  })));
+  }))));
 };
 
 var styles$1P = {"vitro-switch":"_switch_vitro-switch_1noCcra","vitro-slider":"_switch_vitro-slider_3wesxda","vitro-active":"_switch_vitro-active_3LJI9TW"};