@semcore/ellipsis 16.0.12-prerelease.0 → 16.0.12-prerelease.20

package/lib/cjs/index.d.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type { UnknownProperties, Intergalactic } from '@semcore/core';\nimport type { Box, BoxProps } from '@semcore/flex-box';\nimport type { TooltipProps } from '@semcore/tooltip';\nimport type Tooltip from '@semcore/tooltip';\nimport type { RefObject } from 'react';\n\n/** @deprecated */\nexport interface IEllipsisProps extends EllipsisProps, UnknownProperties {}\nexport type EllipsisProps = BoxProps &\n  Partial<TooltipProps> & {\n    /**\n     * Rows count in multiline Ellipsis.\n     * Applies only for `trim = end`\n     * @default 1\n     */\n    maxLine?: number;\n    /**\n     * Trimming type\n     * @default end\n     */\n    trim?: 'end' | 'middle';\n    /**\n     * Show tooltip\n     * @default true\n     */\n    tooltip?: boolean;\n    /**\n     * Ref to the item that will be observed by ResizeObserver\n     */\n    containerRef?: RefObject<HTMLElement | null>;\n    /**\n     * Explicit sizes of container text should be trimmed in\n     **/\n    containerRect?: { width: number };\n    /** List of props that will be passed to tooltip\n     * @default ['title', 'theme', 'strategy', 'modifiers', 'placement', 'interaction', 'timeout', 'visible', 'defaultVisible', 'onVisibleChange', 'offset', 'preventOverflow', 'arrow', 'flip', 'computeStyles', 'eventListeners', 'onFirstUpdate']\n     */\n    includeTooltipProps?: string[];\n  };\n\ndeclare const useResizeObserver: (\n  ref: RefObject<HTMLElement>,\n  hookOverride?: { width: number },\n) => { width: number };\n\ndeclare const Ellipsis: Intergalactic.Component<'div', EllipsisProps> & {\n  Content: typeof Box;\n  Popper: typeof Tooltip.Popper;\n};\n\nexport { useResizeObserver };\nexport default Ellipsis;\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type { Box, BoxProps } from '@semcore/base-components';\nimport type { UnknownProperties, Intergalactic } from '@semcore/core';\nimport type { TooltipProps } from '@semcore/tooltip';\nimport type Tooltip from '@semcore/tooltip';\nimport type { RefObject } from 'react';\n\nexport type EllipsisProps = BoxProps &\n  Partial<TooltipProps> & {\n    /**\n     * Rows count in multiline Ellipsis.\n     * Applies only for `trim = end`\n     * @default 1\n     */\n    maxLine?: number;\n    /**\n     * Trimming type\n     * @default end\n     */\n    trim?: 'end' | 'middle';\n    /**\n     * Show tooltip\n     * @default true\n     */\n    tooltip?: boolean;\n    /**\n     * Ref to the item that will be observed by ResizeObserver\n     */\n    containerRef?: RefObject<HTMLElement | null>;\n    /**\n     * Explicit sizes of container text should be trimmed in\n     **/\n    containerRect?: { width: number };\n    /** List of props that will be passed to tooltip\n     * @default ['title', 'theme', 'strategy', 'modifiers', 'placement', 'interaction', 'timeout', 'visible', 'defaultVisible', 'onVisibleChange', 'offset', 'preventOverflow', 'arrow', 'flip', 'computeStyles', 'eventListeners', 'onFirstUpdate']\n     */\n    includeTooltipProps?: string[];\n  };\n\ndeclare const useResizeObserver: (\n  ref: RefObject<HTMLElement>,\n  hookOverride?: { width: number },\n) => { width: number };\n/**\n * @deprecated. Use Text with ellipsis property for @semcore/typography.\n */\ndeclare const Ellipsis: Intergalactic.Component<'div', EllipsisProps> & {\n  Content: typeof Box;\n  Popper: typeof Tooltip.Popper;\n};\n\nexport default Ellipsis;\n\nexport { useResizeObserver };\n"],"mappings":"","ignoreList":[]}

package/lib/cjs/index.js

@@ -1,18 +1,18 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 Object.defineProperty(exports, "default", {
   enumerable: true,
-  get: function get() {
-    return _Ellipsis["default"];
+  get: function () {
+    return _Ellipsis.default;
   }
 });
 Object.defineProperty(exports, "useResizeObserver", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _useResizeObserver.useResizeObserver;
   }
 });

package/lib/cjs/useResizeObserver.js

@@ -1,35 +1,31 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useResizeObserver = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _canUseDOM = _interopRequireDefault(require("@semcore/core/lib/utils/canUseDOM"));
 var _useEnhancedEffect = _interopRequireDefault(require("@semcore/core/lib/utils/use/useEnhancedEffect"));
 var _react = _interopRequireDefault(require("react"));
-var useResizeObserver = exports.useResizeObserver = function useResizeObserver(ref, hookOverride) {
-  var _React$useState = _react["default"].useState(0),
-    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-    width = _React$useState2[0],
-    setWidth = _React$useState2[1];
-  var handleResize = _react["default"].useCallback(function (entries) {
+const useResizeObserver = (ref, hookOverride) => {
+  const [width, setWidth] = _react.default.useState(0);
+  const handleResize = _react.default.useCallback(entries => {
     setWidth(entries[0].contentRect.width);
   }, []);
-  (0, _useEnhancedEffect["default"])(function () {
+  (0, _useEnhancedEffect.default)(() => {
     if (!ref.current) {
       return;
     }
     if (hookOverride) {
       return;
     }
-    if ((0, _canUseDOM["default"])()) {
-      var ro = new ResizeObserver(function (entries) {
+    if ((0, _canUseDOM.default)()) {
+      const ro = new ResizeObserver(entries => {
         handleResize(entries);
       });
       ro.observe(ref.current);
-      return function () {
+      return () => {
         ro.disconnect();
       };
     }
@@ -38,7 +34,8 @@ var useResizeObserver = exports.useResizeObserver = function useResizeObserver(r
     return hookOverride;
   }
   return {
-    width: width
+    width
   };
 };
+exports.useResizeObserver = useResizeObserver;
 //# sourceMappingURL=useResizeObserver.js.map

package/lib/cjs/useResizeObserver.js.map

@@ -1 +1 @@
-{"version":3,"file":"useResizeObserver.js","names":["_canUseDOM","_interopRequireDefault","require","_useEnhancedEffect","_react","useResizeObserver","exports","ref","hookOverride","_React$useState","React","useState","_React$useState2","_slicedToArray2","width","setWidth","handleResize","useCallback","entries","contentRect","useEnhancedEffect","current","canUseDOM","ro","ResizeObserver","observe","disconnect"],"sources":["../../src/useResizeObserver.tsx"],"sourcesContent":["import canUseDOM from '@semcore/core/lib/utils/canUseDOM';\nimport useEnhancedEffect from '@semcore/core/lib/utils/use/useEnhancedEffect';\nimport React, { type RefObject } from 'react';\n\nexport const useResizeObserver = (\n  ref: RefObject<HTMLElement>,\n  hookOverride?: { width: number },\n) => {\n  const [width, setWidth] = React.useState<number>(0);\n\n  const handleResize = React.useCallback((entries: ResizeObserverEntry[]) => {\n    setWidth(entries[0].contentRect.width);\n  }, []);\n\n  useEnhancedEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n\n    if (hookOverride) {\n      return;\n    }\n    if (canUseDOM()) {\n      const ro = new ResizeObserver((entries: ResizeObserverEntry[]) => {\n        handleResize(entries);\n      });\n\n      ro.observe(ref.current);\n\n      return () => {\n        ro.disconnect();\n      };\n    }\n  }, [hookOverride]);\n\n  if (hookOverride) {\n    return hookOverride;\n  }\n  return { width };\n};\n"],"mappings":";;;;;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,kBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,MAAA,GAAAH,sBAAA,CAAAC,OAAA;AAEO,IAAMG,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAG,SAApBA,iBAAiBA,CAC5BE,GAA2B,EAC3BC,YAAgC,EAC7B;EACH,IAAAC,eAAA,GAA0BC,iBAAK,CAACC,QAAQ,CAAS,CAAC,CAAC;IAAAC,gBAAA,OAAAC,eAAA,aAAAJ,eAAA;IAA5CK,KAAK,GAAAF,gBAAA;IAAEG,QAAQ,GAAAH,gBAAA;EAEtB,IAAMI,YAAY,GAAGN,iBAAK,CAACO,WAAW,CAAC,UAACC,OAA8B,EAAK;IACzEH,QAAQ,CAACG,OAAO,CAAC,CAAC,CAAC,CAACC,WAAW,CAACL,KAAK,CAAC;EACxC,CAAC,EAAE,EAAE,CAAC;EAEN,IAAAM,6BAAiB,EAAC,YAAM;IACtB,IAAI,CAACb,GAAG,CAACc,OAAO,EAAE;MAChB;IACF;IAEA,IAAIb,YAAY,EAAE;MAChB;IACF;IACA,IAAI,IAAAc,qBAAS,EAAC,CAAC,EAAE;MACf,IAAMC,EAAE,GAAG,IAAIC,cAAc,CAAC,UAACN,OAA8B,EAAK;QAChEF,YAAY,CAACE,OAAO,CAAC;MACvB,CAAC,CAAC;MAEFK,EAAE,CAACE,OAAO,CAAClB,GAAG,CAACc,OAAO,CAAC;MAEvB,OAAO,YAAM;QACXE,EAAE,CAACG,UAAU,CAAC,CAAC;MACjB,CAAC;IACH;EACF,CAAC,EAAE,CAAClB,YAAY,CAAC,CAAC;EAElB,IAAIA,YAAY,EAAE;IAChB,OAAOA,YAAY;EACrB;EACA,OAAO;IAAEM,KAAK,EAALA;EAAM,CAAC;AAClB,CAAC","ignoreList":[]}
+{"version":3,"file":"useResizeObserver.js","names":["_canUseDOM","_interopRequireDefault","require","_useEnhancedEffect","_react","useResizeObserver","ref","hookOverride","width","setWidth","React","useState","handleResize","useCallback","entries","contentRect","useEnhancedEffect","current","canUseDOM","ro","ResizeObserver","observe","disconnect","exports"],"sources":["../../src/useResizeObserver.tsx"],"sourcesContent":["import canUseDOM from '@semcore/core/lib/utils/canUseDOM';\nimport useEnhancedEffect from '@semcore/core/lib/utils/use/useEnhancedEffect';\nimport React, { type RefObject } from 'react';\n\nexport const useResizeObserver = (\n  ref: RefObject<HTMLElement>,\n  hookOverride?: { width: number },\n) => {\n  const [width, setWidth] = React.useState<number>(0);\n\n  const handleResize = React.useCallback((entries: ResizeObserverEntry[]) => {\n    setWidth(entries[0].contentRect.width);\n  }, []);\n\n  useEnhancedEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n\n    if (hookOverride) {\n      return;\n    }\n    if (canUseDOM()) {\n      const ro = new ResizeObserver((entries: ResizeObserverEntry[]) => {\n        handleResize(entries);\n      });\n\n      ro.observe(ref.current);\n\n      return () => {\n        ro.disconnect();\n      };\n    }\n  }, [hookOverride]);\n\n  if (hookOverride) {\n    return hookOverride;\n  }\n  return { width };\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,kBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,MAAA,GAAAH,sBAAA,CAAAC,OAAA;AAEO,MAAMG,iBAAiB,GAAGA,CAC/BC,GAA2B,EAC3BC,YAAgC,KAC7B;EACH,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAAS,CAAC,CAAC;EAEnD,MAAMC,YAAY,GAAGF,cAAK,CAACG,WAAW,CAAEC,OAA8B,IAAK;IACzEL,QAAQ,CAACK,OAAO,CAAC,CAAC,CAAC,CAACC,WAAW,CAACP,KAAK,CAAC;EACxC,CAAC,EAAE,EAAE,CAAC;EAEN,IAAAQ,0BAAiB,EAAC,MAAM;IACtB,IAAI,CAACV,GAAG,CAACW,OAAO,EAAE;MAChB;IACF;IAEA,IAAIV,YAAY,EAAE;MAChB;IACF;IACA,IAAI,IAAAW,kBAAS,EAAC,CAAC,EAAE;MACf,MAAMC,EAAE,GAAG,IAAIC,cAAc,CAAEN,OAA8B,IAAK;QAChEF,YAAY,CAACE,OAAO,CAAC;MACvB,CAAC,CAAC;MAEFK,EAAE,CAACE,OAAO,CAACf,GAAG,CAACW,OAAO,CAAC;MAEvB,OAAO,MAAM;QACXE,EAAE,CAACG,UAAU,CAAC,CAAC;MACjB,CAAC;IACH;EACF,CAAC,EAAE,CAACf,YAAY,CAAC,CAAC;EAElB,IAAIA,YAAY,EAAE;IAChB,OAAOA,YAAY;EACrB;EACA,OAAO;IAAEC;EAAM,CAAC;AAClB,CAAC;AAACe,OAAA,CAAAlB,iBAAA,GAAAA,iBAAA","ignoreList":[]}

package/lib/cjs/utils.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isTextOverflowing = isTextOverflowing;
+exports.setFontSettings = void 0;
+const setFontSettings = (element, styleElement) => {
+  element.style.fontFamily = styleElement.getPropertyValue('font-family');
+  element.style.fontSize = styleElement.getPropertyValue('font-size');
+  element.style.fontWeight = styleElement.getPropertyValue('font-weight');
+  element.style.lineHeight = styleElement.getPropertyValue('line-height');
+  element.style.fontFeatureSettings = styleElement.getPropertyValue('font-feature-settings');
+  element.style.fontVariantNumeric = styleElement.getPropertyValue('font-variant-numeric');
+};
+exports.setFontSettings = setFontSettings;
+function isTextOverflowing(element, multiline, text) {
+  if (!element) return false;
+  const {
+    height: currentHeight,
+    width: currentWidth
+  } = element.getBoundingClientRect();
+  const measuringElement = createMeasurerElement(element, text);
+  let isOverflowing = false;
+  document.body.appendChild(measuringElement);
+  if (multiline) {
+    measuringElement.style.width = `${currentWidth}px`;
+    const width = measuringElement.scrollWidth;
+    const height = measuringElement.getBoundingClientRect().height;
+    if (Math.ceil(currentHeight) < height || Math.ceil(currentWidth) < width) {
+      isOverflowing = true;
+    }
+  } else {
+    measuringElement.style.whiteSpace = 'nowrap';
+    isOverflowing = Math.ceil(currentWidth) < measuringElement.getBoundingClientRect().width;
+  }
+  document.body.removeChild(measuringElement);
+  return isOverflowing;
+}
+function createMeasurerElement(element, text) {
+  const styleElement = window.getComputedStyle(element, null);
+  const temporaryElement = document.createElement('temporary-block');
+  temporaryElement.style.display = styleElement.getPropertyValue('display');
+  temporaryElement.style.padding = styleElement.getPropertyValue('padding');
+  temporaryElement.style.position = 'absolute';
+  temporaryElement.style.right = '0%';
+  temporaryElement.style.bottom = '0%';
+  temporaryElement.style.visibility = 'hidden';
+  temporaryElement.style.whiteSpace = styleElement.getPropertyValue('white-space');
+  temporaryElement.style.wordWrap = styleElement.getPropertyValue('word-wrap');
+  setFontSettings(temporaryElement, styleElement);
+  temporaryElement.textContent = text ?? element.textContent;
+  return temporaryElement;
+}
+//# sourceMappingURL=utils.js.map

package/lib/cjs/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":["setFontSettings","element","styleElement","style","fontFamily","getPropertyValue","fontSize","fontWeight","lineHeight","fontFeatureSettings","fontVariantNumeric","exports","isTextOverflowing","multiline","text","height","currentHeight","width","currentWidth","getBoundingClientRect","measuringElement","createMeasurerElement","isOverflowing","document","body","appendChild","scrollWidth","Math","ceil","whiteSpace","removeChild","window","getComputedStyle","temporaryElement","createElement","display","padding","position","right","bottom","visibility","wordWrap","textContent"],"sources":["../../src/utils.ts"],"sourcesContent":["export const setFontSettings = (element: HTMLElement, styleElement: CSSStyleDeclaration): void => {\n  element.style.fontFamily = styleElement.getPropertyValue('font-family');\n  element.style.fontSize = styleElement.getPropertyValue('font-size');\n  element.style.fontWeight = styleElement.getPropertyValue('font-weight');\n  element.style.lineHeight = styleElement.getPropertyValue('line-height');\n  element.style.fontFeatureSettings =\n    styleElement.getPropertyValue('font-feature-settings');\n  element.style.fontVariantNumeric = styleElement.getPropertyValue('font-variant-numeric');\n};\n\nexport function isTextOverflowing(element: HTMLElement | null, multiline: boolean, text: string): boolean {\n  if (!element) return false;\n\n  const { height: currentHeight, width: currentWidth } = element.getBoundingClientRect();\n  const measuringElement = createMeasurerElement(element, text);\n  let isOverflowing = false;\n\n  document.body.appendChild(measuringElement);\n  if (multiline) {\n    measuringElement.style.width = `${currentWidth}px`;\n\n    const width = measuringElement.scrollWidth;\n    const height = measuringElement.getBoundingClientRect().height;\n\n    if (Math.ceil(currentHeight) < height || Math.ceil(currentWidth) < width) {\n      isOverflowing = true;\n    }\n  } else {\n    measuringElement.style.whiteSpace = 'nowrap';\n    isOverflowing = Math.ceil(currentWidth) < measuringElement.getBoundingClientRect().width;\n  }\n\n  document.body.removeChild(measuringElement);\n\n  return isOverflowing;\n}\n\nfunction createMeasurerElement(element: HTMLElement, text?: string) {\n  const styleElement = window.getComputedStyle(element, null);\n  const temporaryElement = document.createElement('temporary-block');\n  temporaryElement.style.display = styleElement.getPropertyValue('display');\n  temporaryElement.style.padding = styleElement.getPropertyValue('padding');\n  temporaryElement.style.position = 'absolute';\n  temporaryElement.style.right = '0%';\n  temporaryElement.style.bottom = '0%';\n  temporaryElement.style.visibility = 'hidden';\n  temporaryElement.style.whiteSpace = styleElement.getPropertyValue('white-space');\n  temporaryElement.style.wordWrap = styleElement.getPropertyValue('word-wrap');\n\n  setFontSettings(temporaryElement, styleElement);\n\n  temporaryElement.textContent = text ?? element.textContent;\n  return temporaryElement;\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/es6/Ellipsis.js

@@ -1,15 +1,8 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _callSuper from "@babel/runtime/helpers/callSuper";
-import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { sstyled as _sstyled } from "@semcore/core";
 import { assignProps as _assignProps2 } from "@semcore/core";
 import { assignProps as _assignProps } from "@semcore/core";
-var _excluded = ["styles", "Children", "maxLine", "tooltip", "trim", "containerRect", "containerRef", "includeTooltipProps", "children"];
+import { Box } from '@semcore/base-components';
 import { createComponent, Component, Root, sstyled } from '@semcore/core';
 import { callAllEventHandlers } from '@semcore/core/lib/utils/assignProps';
 import findComponent, { isAdvanceMode } from '@semcore/core/lib/utils/findComponent';
@@ -18,11 +11,10 @@ import pick from '@semcore/core/lib/utils/pick';
 import reactToText from '@semcore/core/lib/utils/reactToText';
 import { forkRef } from '@semcore/core/lib/utils/ref';
 import useEnhancedEffect from '@semcore/core/lib/utils/use/useEnhancedEffect';
-import { Box } from '@semcore/flex-box';
 import Tooltip from '@semcore/tooltip';
 import React from 'react';
 /*!__reshadow-styles__:"./style/ellipsis.shadow.css"*/
-var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SBeginning_4aonj_gg_,.___SEllipsis_4aonj_gg_{overflow:hidden;display:inline-block;text-overflow:ellipsis;white-space:pre}.___SEllipsis_4aonj_gg_.__maxLine_4aonj_gg_{display:-webkit-box;-webkit-line-clamp:var(--maxLine_4aonj);-webkit-box-orient:vertical;overflow:hidden;white-space:normal;word-wrap:break-word}.___SContainerMiddle_4aonj_gg_,.___SContainer_4aonj_gg_,.___SEllipsis_4aonj_gg_.__middle-mod_4aonj_gg_,.___SNoTooltipContainer_4aonj_gg_{display:flex;overflow:hidden}.___SContainerMiddle_4aonj_gg_>:has(.___SBeginning_4aonj_gg_),.___SContainerMiddle_4aonj_gg_>:has(.___STail_4aonj_gg_){display:flex;width:100%}.___STail_4aonj_gg_{white-space:pre}", /*__inner_css_end__*/"4aonj_gg_"),
+const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SBeginning_4aonj_gg_,.___SEllipsis_4aonj_gg_{overflow:hidden;display:inline-block;text-overflow:ellipsis;white-space:pre}.___SEllipsis_4aonj_gg_.__maxLine_4aonj_gg_{display:-webkit-box;-webkit-line-clamp:var(--maxLine_4aonj);-webkit-box-orient:vertical;overflow:hidden;white-space:normal;word-wrap:break-word}.___SContainerMiddle_4aonj_gg_,.___SContainer_4aonj_gg_,.___SEllipsis_4aonj_gg_.__middle-mod_4aonj_gg_,.___SNoTooltipContainer_4aonj_gg_{display:flex;overflow:hidden}.___SContainerMiddle_4aonj_gg_>:has(.___SBeginning_4aonj_gg_),.___SContainerMiddle_4aonj_gg_>:has(.___STail_4aonj_gg_){display:flex;width:100%}.___STail_4aonj_gg_{white-space:pre}", /*__inner_css_end__*/"4aonj_gg_"),
 /*__reshadow_css_end__*/
 {
   "__SBeginning": "___SBeginning_4aonj_gg_",
@@ -36,154 +28,103 @@ var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".
   "__STail": "___STail_4aonj_gg_"
 });
 import { useResizeObserver } from './useResizeObserver';
-var defaultTooltipProps = ['title', 'theme', 'strategy', 'modifiers', 'placement', 'interaction', 'timeout', 'visible', 'defaultVisible', 'onVisibleChange', 'offset', 'preventOverflow', 'arrow', 'flip', 'computeStyles', 'eventListeners', 'onFirstUpdate', 'cursorAnchoring'];
-var setFontSettings = function setFontSettings(element, styleElement) {
-  element.style.fontFamily = styleElement.getPropertyValue('font-family');
-  element.style.fontSize = styleElement.getPropertyValue('font-size');
-  element.style.fontWeight = styleElement.getPropertyValue('font-weight');
-  element.style.lineHeight = styleElement.getPropertyValue('line-height');
-  element.style.fontFeatureSettings = styleElement.getPropertyValue('font-feature-settings');
-  element.style.fontVariantNumeric = styleElement.getPropertyValue('font-variant-numeric');
-};
-var createMeasurerElement = function createMeasurerElement(element, text) {
-  var styleElement = window.getComputedStyle(element, null);
-  var temporaryElement = document.createElement('temporary-block');
-  temporaryElement.style.display = styleElement.getPropertyValue('display');
-  temporaryElement.style.padding = styleElement.getPropertyValue('padding');
-  temporaryElement.style.position = 'absolute';
-  temporaryElement.style.right = '0%';
-  temporaryElement.style.bottom = '0%';
-  temporaryElement.style.visibility = 'hidden';
-  temporaryElement.style.whiteSpace = styleElement.getPropertyValue('white-space');
-  temporaryElement.style.wordWrap = styleElement.getPropertyValue('word-wrap');
-  setFontSettings(temporaryElement, styleElement);
-  temporaryElement.textContent = text !== null && text !== void 0 ? text : element.textContent;
-  return temporaryElement;
-};
-function isTextOverflowing(element, multiline, text) {
-  if (!element) return false;
-  var _element$getBoundingC = element.getBoundingClientRect(),
-    currentHeight = _element$getBoundingC.height,
-    currentWidth = _element$getBoundingC.width;
-  var measuringElement = createMeasurerElement(element, text);
-  var isOverflowing = false;
-  document.body.appendChild(measuringElement);
-  if (multiline) {
-    measuringElement.style.width = "".concat(currentWidth, "px");
-    var width = measuringElement.scrollWidth;
-    var height = measuringElement.getBoundingClientRect().height;
-    if (Math.ceil(currentHeight) < height || Math.ceil(currentWidth) < width) {
-      isOverflowing = true;
-    }
-  } else {
-    measuringElement.style.whiteSpace = 'nowrap';
-    isOverflowing = Math.ceil(currentWidth) < measuringElement.getBoundingClientRect().width;
-  }
-  document.body.removeChild(measuringElement);
-  return isOverflowing;
-}
-var forcedAdvancedMode = {
+import { isTextOverflowing, setFontSettings } from './utils';
+const defaultTooltipProps = ['title', 'theme', 'strategy', 'modifiers', 'placement', 'interaction', 'timeout', 'visible', 'defaultVisible', 'onVisibleChange', 'offset', 'preventOverflow', 'arrow', 'flip', 'computeStyles', 'eventListeners', 'onFirstUpdate', 'cursorAnchoring'];
+const forcedAdvancedMode = {
   forcedAdvancedMode: true
 };
-var noAdvancedMode = {};
-var RootEllipsis = /*#__PURE__*/function (_Component) {
-  function RootEllipsis() {
-    var _this;
-    _classCallCheck(this, RootEllipsis);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, RootEllipsis, [].concat(args));
-    _defineProperty(_this, "state", {
+const noAdvancedMode = {};
+class RootEllipsis extends Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "state", {
       visible: false
     });
-    _defineProperty(_this, "textRef", /*#__PURE__*/React.createRef());
-    _defineProperty(_this, "handlerVisibleChange", function (visible) {
-      _this.setState({
-        visible: visible && _this.showTooltip()
+    _defineProperty(this, "textRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "handlerVisibleChange", visible => {
+      this.setState({
+        visible: visible && this.showTooltip()
       });
     });
-    return _this;
   }
-  _inherits(RootEllipsis, _Component);
-  return _createClass(RootEllipsis, [{
-    key: "showTooltip",
-    value: function showTooltip() {
-      var _this$asProps = this.asProps,
-        _this$asProps$maxLine = _this$asProps.maxLine,
-        maxLine = _this$asProps$maxLine === void 0 ? 1 : _this$asProps$maxLine,
-        Children = _this$asProps.Children;
-      var text = reactToText(getOriginChildren(Children));
-      return isTextOverflowing(this.textRef.current, maxLine > 1, text);
-    }
-  }, {
-    key: "getContentProps",
-    value: function getContentProps() {
-      return {
-        ref: this.textRef,
-        maxLine: this.asProps.maxLine
-      };
-    }
-  }, {
-    key: "getPopperProps",
-    value: function getPopperProps() {
-      var _this$asProps2 = this.asProps,
-        Children = _this$asProps2.Children,
-        includeTooltipProps = _this$asProps2.includeTooltipProps;
-      var text = reactToText(getOriginChildren(Children));
-      var tooltipProps = pick(this.asProps, includeTooltipProps);
-      return _objectSpread({
-        children: text
-      }, tooltipProps);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref3, _tooltipProps$visible;
-      var SEllipsis = this.Root;
-      var SContainer = Tooltip;
-      var _this$asProps3 = this.asProps,
-        styles = _this$asProps3.styles,
-        Children = _this$asProps3.Children,
-        maxLine = _this$asProps3.maxLine,
-        tooltip = _this$asProps3.tooltip,
-        trim = _this$asProps3.trim,
-        containerRect = _this$asProps3.containerRect,
-        containerRef = _this$asProps3.containerRef,
-        includeTooltipProps = _this$asProps3.includeTooltipProps,
-        _children = _this$asProps3.children,
-        other = _objectWithoutProperties(_this$asProps3, _excluded);
-      var visible = this.state.visible;
-      var advancedContent = findComponent(Children, [Ellipsis.Content.displayName]);
-      var text = reactToText(advancedContent || getOriginChildren(Children));
-      var advanceMode = isAdvanceMode(Children, [Ellipsis.Content.displayName, Ellipsis.Popper.displayName]);
-      var tooltipProps = pick(this.asProps, includeTooltipProps);
-      tooltipProps.visible = (_tooltipProps$visible = tooltipProps.visible) !== null && _tooltipProps$visible !== void 0 ? _tooltipProps$visible : visible;
-      tooltipProps.onVisibleChange = tooltipProps.onVisibleChange ? callAllEventHandlers(tooltipProps.onVisibleChange, this.handlerVisibleChange) : this.handlerVisibleChange;
-      if (trim === 'middle') {
-        var _ref2;
-        return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(EllipsisMiddle, _ref2.cn("EllipsisMiddle", _objectSpread({
-          "text": text,
-          "styles": styles,
-          "tooltip": tooltip,
-          "containerRect": containerRect,
-          "containerRef": containerRef,
-          "textRef": this.textRef,
-          "tooltipProps": tooltipProps,
-          "advanceMode": advanceMode
-        }, other)), /*#__PURE__*/React.createElement(Children, _ref2.cn("Children", {})));
-      }
-      return _ref3 = sstyled(styles), /*#__PURE__*/React.createElement(SContainer, _ref3.cn("SContainer", _objectSpread(_objectSpread({
-        "interaction": tooltip ? 'hover' : 'none',
-        "title": !advanceMode ? text : undefined
-      }, tooltipProps), advanceMode ? forcedAdvancedMode : noAdvancedMode)), advanceMode ? /*#__PURE__*/React.createElement(Children, _ref3.cn("Children", {})) : /*#__PURE__*/React.createElement(SEllipsis, _ref3.cn("SEllipsis", _objectSpread({
-        "render": Box,
-        "ref": this.textRef,
-        "maxLine": maxLine
-      }, other)), /*#__PURE__*/React.createElement(Children, _ref3.cn("Children", {}))));
+  showTooltip() {
+    const {
+      maxLine = 1,
+      Children
+    } = this.asProps;
+    const text = reactToText(getOriginChildren(Children));
+    return isTextOverflowing(this.textRef.current, maxLine > 1, text);
+  }
+  getContentProps() {
+    return {
+      ref: this.textRef,
+      maxLine: this.asProps.maxLine
+    };
+  }
+  getPopperProps() {
+    const {
+      Children,
+      includeTooltipProps
+    } = this.asProps;
+    const text = reactToText(getOriginChildren(Children));
+    const tooltipProps = pick(this.asProps, includeTooltipProps);
+    return {
+      children: text,
+      ...tooltipProps
+    };
+  }
+  render() {
+    var _ref3;
+    const SEllipsis = this.Root;
+    const SContainer = Tooltip;
+    const {
+      styles,
+      Children,
+      maxLine,
+      tooltip,
+      trim,
+      containerRect,
+      containerRef,
+      includeTooltipProps,
+      children: _children,
+      ...other
+    } = this.asProps;
+    const {
+      visible
+    } = this.state;
+    const advancedContent = findComponent(Children, [Ellipsis.Content.displayName]);
+    const text = reactToText(advancedContent || getOriginChildren(Children));
+    const advanceMode = isAdvanceMode(Children, [Ellipsis.Content.displayName, Ellipsis.Popper.displayName]);
+    const tooltipProps = pick(this.asProps, includeTooltipProps);
+    tooltipProps.visible = tooltipProps.visible ?? visible;
+    tooltipProps.onVisibleChange = tooltipProps.onVisibleChange ? callAllEventHandlers(tooltipProps.onVisibleChange, this.handlerVisibleChange) : this.handlerVisibleChange;
+    if (trim === 'middle') {
+      var _ref2;
+      return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(EllipsisMiddle, _ref2.cn("EllipsisMiddle", {
+        "text": text,
+        "styles": styles,
+        "tooltip": tooltip,
+        "containerRect": containerRect,
+        "containerRef": containerRef,
+        "textRef": this.textRef,
+        "tooltipProps": tooltipProps,
+        "advanceMode": advanceMode,
+        ...other
+      }), /*#__PURE__*/React.createElement(Children, _ref2.cn("Children", {})));
     }
-  }]);
-}(Component);
+    return _ref3 = sstyled(styles), /*#__PURE__*/React.createElement(SContainer, _ref3.cn("SContainer", {
+      "interaction": tooltip ? 'hover' : 'none',
+      "title": !advanceMode ? text : undefined,
+      ...tooltipProps,
+      ...(advanceMode ? forcedAdvancedMode : noAdvancedMode)
+    }), advanceMode ? /*#__PURE__*/React.createElement(Children, _ref3.cn("Children", {})) : /*#__PURE__*/React.createElement(SEllipsis, _ref3.cn("SEllipsis", {
+      "render": Box,
+      "ref": this.textRef,
+      "maxLine": maxLine,
+      ...other
+    }), /*#__PURE__*/React.createElement(Children, _ref3.cn("Children", {}))));
+  }
+}
 _defineProperty(RootEllipsis, "displayName", 'Ellipsis');
 _defineProperty(RootEllipsis, "style", style);
 _defineProperty(RootEllipsis, "defaultProps", {
@@ -192,92 +133,99 @@ _defineProperty(RootEllipsis, "defaultProps", {
   includeTooltipProps: defaultTooltipProps,
   __excludeProps: ['title']
 });
-var EllipsisMiddleContext = /*#__PURE__*/React.createContext(null);
-var EllipsisMiddle = function EllipsisMiddle(props) {
+const EllipsisMiddleContext = /*#__PURE__*/React.createContext(null);
+function EllipsisMiddle(props) {
   var _ref5;
-  var styles = props.styles,
-    text = props.text,
-    tooltip = props.tooltip,
-    containerRect = props.containerRect,
-    containerRef = props.containerRef,
-    textRef = props.textRef,
-    tooltipProps = props.tooltipProps,
-    children = props.children,
-    advanceMode = props.advanceMode,
-    tag = props.tag;
-  var resizeElement = React.useRef(null);
-  var _React$useState = React.useState(0),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    symbolWidth = _React$useState2[0],
-    setSymbolWidth = _React$useState2[1];
-  var blockWidth = useResizeObserver(resizeElement, containerRect).width;
-  useEnhancedEffect(function () {
-    var node = (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) || (resizeElement === null || resizeElement === void 0 ? void 0 : resizeElement.current);
+  const {
+    styles,
+    text,
+    tooltip,
+    containerRect,
+    containerRef,
+    textRef,
+    tooltipProps,
+    children,
+    advanceMode,
+    tag
+  } = props;
+  const resizeElement = React.useRef(null);
+  const [symbolWidth, setSymbolWidth] = React.useState(0);
+  const blockWidth = useResizeObserver(resizeElement, containerRect).width;
+  useEnhancedEffect(() => {
+    const node = containerRef?.current || resizeElement?.current;
     if (!node) return;
-    var styleElement = window.getComputedStyle(node);
-    var dateSpan = document.createElement('temporary-block');
+    const styleElement = window.getComputedStyle(node);
+    const dateSpan = document.createElement('temporary-block');
     setFontSettings(dateSpan, styleElement);
     dateSpan.textContent = 'a';
     document.body.appendChild(dateSpan);
-    var rect = dateSpan.getBoundingClientRect();
+    const rect = dateSpan.getBoundingClientRect();
     setSymbolWidth(rect.width);
     document.body.removeChild(dateSpan);
   }, []);
-  var STail = 'span';
-  var SBeginning = 'span';
-  var SContainerMiddle = Tooltip;
-  var SAdvancedModeContainerMiddle = Tooltip;
-  var displayedSymbols = React.useMemo(function () {
-    var displayedSymbols = Math.round(blockWidth / symbolWidth);
+  const STail = 'span';
+  const SBeginning = 'span';
+  const SContainerMiddle = Tooltip;
+  const SAdvancedModeContainerMiddle = Tooltip;
+  const displayedSymbols = React.useMemo(() => {
+    const displayedSymbols = Math.round(blockWidth / symbolWidth);
     return displayedSymbols % 2 === 0 ? displayedSymbols : displayedSymbols - 1;
   }, [blockWidth, symbolWidth]);
-  var interaction = text.length > displayedSymbols ? 'hover' : 'none';
-  var ref = containerRef !== null && containerRef !== void 0 ? containerRef : resizeElement;
-  var contextValue = React.useMemo(function () {
-    return {
-      begining: text.substring(0, text.length - displayedSymbols / 2 - 1),
-      tail: text.substring(text.length - displayedSymbols / 2 - 1),
-      ref: ref
-    };
-  }, [text, displayedSymbols]);
+  const interaction = text.length > displayedSymbols ? 'hover' : 'none';
+  const ref = containerRef ?? resizeElement;
+  const contextValue = React.useMemo(() => ({
+    begining: text.substring(0, text.length - displayedSymbols / 2 - 1),
+    tail: text.substring(text.length - displayedSymbols / 2 - 1),
+    ref
+  }), [text, displayedSymbols]);
   if (advanceMode) {
     var _ref4;
-    return _ref4 = sstyled(styles), /*#__PURE__*/React.createElement(SAdvancedModeContainerMiddle, _ref4.cn("SAdvancedModeContainerMiddle", _objectSpread(_objectSpread({
-      "interaction": tooltip ? interaction : 'none'
-    }, tooltipProps), forcedAdvancedMode)), /*#__PURE__*/React.createElement(EllipsisMiddleContext.Provider, {
+    return _ref4 = sstyled(styles), /*#__PURE__*/React.createElement(SAdvancedModeContainerMiddle, _ref4.cn("SAdvancedModeContainerMiddle", {
+      "interaction": tooltip ? interaction : 'none',
+      ...tooltipProps,
+      ...forcedAdvancedMode
+    }), /*#__PURE__*/React.createElement(EllipsisMiddleContext.Provider, {
       value: contextValue
     }, children));
   }
-  return _ref5 = sstyled(styles), /*#__PURE__*/React.createElement(SContainerMiddle, _ref5.cn("SContainerMiddle", _objectSpread({
+  return _ref5 = sstyled(styles), /*#__PURE__*/React.createElement(SContainerMiddle, _ref5.cn("SContainerMiddle", {
     "interaction": tooltip ? interaction : 'none',
     "title": text,
     "ref": forkRef(ref, textRef),
-    "tag": tag
-  }, tooltipProps)), /*#__PURE__*/React.createElement(SBeginning, _ref5.cn("SBeginning", {}), contextValue.begining), /*#__PURE__*/React.createElement(STail, _ref5.cn("STail", {}), contextValue.tail));
-};
-var Content = function Content(_ref8) {
+    "tag": tag,
+    ...tooltipProps
+  }), /*#__PURE__*/React.createElement(SBeginning, _ref5.cn("SBeginning", {}), contextValue.begining), /*#__PURE__*/React.createElement(STail, _ref5.cn("STail", {}), contextValue.tail));
+}
+function Content({
+  styles,
+  Children
+}) {
   var _ref = arguments[0],
     _ref7;
-  var styles = _ref8.styles,
-    Children = _ref8.Children;
-  var SEllipsis = Tooltip.Trigger;
-  var ellipsisMiddleContext = React.useContext(EllipsisMiddleContext);
-  var STail = 'span';
-  var SBeginning = 'span';
+  const SEllipsis = Tooltip.Trigger;
+  const ellipsisMiddleContext = React.useContext(EllipsisMiddleContext);
+  const STail = 'span';
+  const SBeginning = 'span';
   if (ellipsisMiddleContext) {
     var _ref6;
-    var begining = ellipsisMiddleContext.begining,
-      tail = ellipsisMiddleContext.tail,
-      ref = ellipsisMiddleContext.ref;
-    return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(SEllipsis, _ref6.cn("SEllipsis", _objectSpread({}, _assignProps({
-      "middle-mod": true,
-      "ref": ref
-    }, _ref))), /*#__PURE__*/React.createElement(SBeginning, _ref6.cn("SBeginning", {}), begining), /*#__PURE__*/React.createElement(STail, _ref6.cn("STail", {}), tail));
+    const {
+      begining,
+      tail,
+      ref
+    } = ellipsisMiddleContext;
+    return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(SEllipsis, _ref6.cn("SEllipsis", {
+      ..._assignProps({
+        "middle-mod": true,
+        "ref": ref
+      }, _ref)
+    }), /*#__PURE__*/React.createElement(SBeginning, _ref6.cn("SBeginning", {}), begining), /*#__PURE__*/React.createElement(STail, _ref6.cn("STail", {}), tail));
   }
-  return _ref7 = sstyled(styles), /*#__PURE__*/React.createElement(SEllipsis, _ref7.cn("SEllipsis", _objectSpread({}, _assignProps2({}, _ref))), /*#__PURE__*/React.createElement(Children, _ref7.cn("Children", {})));
-};
-var Ellipsis = createComponent(RootEllipsis, {
-  Content: Content,
+  return _ref7 = sstyled(styles), /*#__PURE__*/React.createElement(SEllipsis, _ref7.cn("SEllipsis", {
+    ..._assignProps2({}, _ref)
+  }), /*#__PURE__*/React.createElement(Children, _ref7.cn("Children", {})));
+}
+const Ellipsis = createComponent(RootEllipsis, {
+  Content,
   Popper: Tooltip.Popper
 });
 export default Ellipsis;