@app-studio/web 0.8.88 → 0.8.90

package/dist/web.esm.js

@@ -8,6 +8,7 @@ import 'core-js/modules/es.regexp.to-string.js';
 import { View, Horizontal, Vertical, Element, Center, useTheme, Image, Typography, Input, Form, Text as Text$1 } from 'app-studio';
 import 'core-js/modules/es.symbol.description.js';
 import 'core-js/modules/es.parse-float.js';
+import 'core-js/modules/es.string.trim-end.js';
 import { Link as Link$1 } from 'react-router-dom';
 import contrast from 'contrast';
 import 'core-js/modules/es.promise.js';
@@ -492,7 +493,8 @@ var FontWeights = {
   black: '900'
 };
 
-var _excluded$2 = ["children", "heading", "maxLines", "isItalic", "isUnderlined", "isSub", "isSup", "isStriked", "weight", "size", "views"];
+var _excluded$2 = ["text", "maxLines", "views"],
+  _excluded2$1 = ["children", "heading", "maxLines", "isItalic", "isUnderlined", "isSub", "isSup", "isStriked", "weight", "size", "views"];
 /**
  * Renders text content with support for subscript and superscript
  */
@@ -518,46 +520,79 @@ var TextContent = _ref => {
   }, views == null ? void 0 : views.sup), children)), !isSub && !isSup && /*#__PURE__*/React.createElement(React.Fragment, null, children))) : children);
 };
 /**
- * Renders text with truncation after a specified number of lines
+ * Renders text with truncation after a specified number of lines (JS calculation)
  */
 var TruncateText = _ref2 => {
   var {
-    text,
-    maxLines = 1,
-    views
-  } = _ref2;
+      text,
+      maxLines = 1,
+      views // Pass down other HTML attributes
+    } = _ref2,
+    rest = _objectWithoutPropertiesLoose(_ref2, _excluded$2);
   var containerRef = useRef(null);
-  var [truncatedLength, setTruncatedLength] = useState(text.length);
+  var [truncatedText, setTruncatedText] = useState(text);
+  var [isTruncated, setIsTruncated] = useState(false);
   useEffect(() => {
-    var textNode = containerRef.current;
-    if (!textNode) return;
-    var updateTruncatedText = () => {
-      var comLineHeight = getComputedStyle(textNode).lineHeight;
-      var lineHeight = comLineHeight !== 'normal' ? parseFloat(comLineHeight) : 20;
-      var maxHeight = lineHeight * maxLines;
-      var start = 0;
-      var end = text.length;
-      var middle;
-      while (start <= end) {
-        middle = Math.floor((start + end) / 2);
-        textNode.innerText = text.substring(0, middle) + '...';
-        var currentHeight = textNode.offsetHeight;
-        if (currentHeight > maxHeight) {
-          end = middle - 1;
-        } else {
-          start = middle + 1;
-        }
+    var node = containerRef.current;
+    if (!node || !text || maxLines <= 0) {
+      setTruncatedText(text != null ? text : '');
+      setIsTruncated(false);
+      return;
+    }
+    var {
+      overflow,
+      height,
+      maxHeight,
+      lineHeight
+    } = node.style;
+    node.style.overflow = 'visible';
+    node.style.height = 'auto';
+    node.style.maxHeight = 'none';
+    node.innerText = text[0] || 'M';
+    var singleLine = node.offsetHeight;
+    if (!singleLine) {
+      var cs = getComputedStyle(node);
+      singleLine = cs.lineHeight !== 'normal' ? parseFloat(cs.lineHeight) : parseFloat(cs.fontSize || '16') * 1.2;
+    }
+    var limit = singleLine * maxLines;
+    node.innerText = text;
+    if (node.offsetHeight <= limit) {
+      setTruncatedText(text);
+      setIsTruncated(false);
+      restore(node);
+      return;
+    }
+    var lo = 0;
+    var hi = text.length;
+    var fit = 0;
+    while (lo <= hi) {
+      var mid = Math.floor((lo + hi) / 2);
+      node.innerText = text.slice(0, mid);
+      if (node.offsetHeight <= limit) {
+        fit = mid;
+        lo = mid + 1;
+      } else {
+        hi = mid - 1;
       }
-      setTruncatedLength(end);
-    };
-    updateTruncatedText();
+    }
+    var finalText = fit < text.length ? text.slice(0, text.length > fit + 3 ? fit - 3 : fit).trimEnd() + '…' : text;
+    setTruncatedText(finalText);
+    setIsTruncated(fit < text.length);
+    restore(node);
+    function restore(n) {
+      n.style.overflow = overflow;
+      n.style.height = height;
+      n.style.maxHeight = maxHeight;
+      n.style.lineHeight = lineHeight;
+    }
   }, [text, maxLines]);
-  var displayText = text.length > truncatedLength ? text.substring(0, truncatedLength) + '...' : text;
   return /*#__PURE__*/React.createElement(View, Object.assign({
     ref: containerRef,
-    overflow: "hidden",
-    textOverflow: "ellipsis"
-  }, views == null ? void 0 : views.truncateText), displayText);
+    overflow: "hidden" // Crucial for final display state
+  }, views == null ? void 0 : views.truncateText, rest, {
+    // Add title attribute for accessibility/hover to see full text
+    title: isTruncated ? text : undefined
+  }), truncatedText);
 };
 /**
  * Main Text component that renders text with various styles and states
@@ -576,7 +611,7 @@ var TextView = _ref3 => {
       size = 'md',
       views
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded$2);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$1);
   // Apply heading styles if a heading is specified
   var headingStyles = heading ? HeadingSizes[heading] : {};
   // For sub/sup text, use inline display
@@ -596,12 +631,7 @@ var TextView = _ref3 => {
     fontStyle: isItalic ? 'italic' : 'normal',
     fontWeight: fontWeight,
     letterSpacing: "-0.01em",
-    textDecoration: isStriked ? 'line-through' : isUnderlined ? 'underline' : 'none',
-    color: "color.gray.900",
-    // Apply dark mode styles
-    _dark: {
-      color: 'color.gray.100'
-    }
+    textDecoration: isStriked ? 'line-through' : isUnderlined ? 'underline' : 'none'
   }, noLineBreak, headingStyles, props, views == null ? void 0 : views.container), maxLines && typeof children === 'string' ? (/*#__PURE__*/React.createElement(TruncateText, {
     text: children,
     maxLines: maxLines
@@ -620,7 +650,7 @@ var TextComponent = props => {
 var Text = TextComponent;
 
 var _excluded$3 = ["widthHeight", "color", "transform", "orientation", "children"],
-  _excluded2$1 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded2$2 = ["widthHeight", "color", "filled", "strokeWidth"],
   _excluded3$1 = ["widthHeight", "color", "filled", "strokeWidth"],
   _excluded4$1 = ["widthHeight", "color", "filled", "strokeWidth"],
   _excluded5 = ["widthHeight", "color", "filled", "strokeWidth"],
@@ -734,7 +764,7 @@ var UserIcon = _ref2 => {
       filled = true,
       strokeWidth = 1
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$2);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -3418,7 +3448,7 @@ var DefaultSpeeds = {
 };
 
 var _excluded$9 = ["size", "speed", "color", "themeMode"],
-  _excluded2$2 = ["size", "speed", "color", "themeMode"],
+  _excluded2$3 = ["size", "speed", "color", "themeMode"],
   _excluded3$2 = ["size", "speed", "color", "themeMode"],
   _excluded4$2 = ["size", "children", "textColor", "loaderColor", "type", "speed", "textPosition", "views"];
 var DefaultSpinner = _ref => {
@@ -3477,7 +3507,7 @@ var Dotted = _ref2 => {
       color = 'theme.loading',
       themeMode: elementMode
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$2);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$3);
   var {
     getColor,
     themeMode
@@ -4024,7 +4054,7 @@ var useCardContext = () => {
 };
 
 var _excluded$b = ["children", "views", "style", "themeMode"],
-  _excluded2$3 = ["children", "views", "style", "themeMode"],
+  _excluded2$4 = ["children", "views", "style", "themeMode"],
   _excluded3$3 = ["children", "views", "style", "themeMode"],
   _excluded4$3 = ["variant", "size", "shape", "children", "header", "footer", "isFullWidth", "views", "style", "themeMode"];
 var CardHeader = _ref => {
@@ -4051,7 +4081,7 @@ var CardContent = _ref2 => {
       children,
       style
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$3);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$4);
   var theme = useTheme();
   var {
     styles: contextStyles
@@ -4428,7 +4458,7 @@ var useCarouselContext = () => {
 };
 
 var _excluded$c = ["children", "isActive", "views"],
-  _excluded2$4 = ["views", "children"],
+  _excluded2$5 = ["views", "children"],
   _excluded3$4 = ["views", "children"],
   _excluded4$4 = ["children", "views"],
   _excluded5$1 = ["children", "views", "style"],
@@ -4455,7 +4485,7 @@ var CarouselPreviousComponent = _ref2 => {
       children // Allow custom content/icon
       // Spread remaining ButtonProps
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$4);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$5);
   var {
     goToPrevious,
     canGoPrevious,
@@ -5722,7 +5752,7 @@ var calculateMenuPosition = function calculateMenuPosition(x, y, menuWidth, menu
 };
 
 var _excluded$e = ["children", "disableNativeContextMenu", "asChild", "isDisabled", "views"],
-  _excluded2$5 = ["items", "children", "position", "side", "align", "views", "style"],
+  _excluded2$6 = ["items", "children", "position", "side", "align", "views", "style"],
   _excluded3$5 = ["item", "children", "onSelect", "isDisabled", "views"],
   _excluded4$5 = ["views"],
   _excluded5$2 = ["views"],
@@ -5831,7 +5861,7 @@ var ContextMenuContent = _ref3 => {
       views,
       style // Capture user-provided style
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$5);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$6);
   var {
     isOpen,
     position: contextPosition,
@@ -6128,7 +6158,7 @@ ContextMenu.Divider = ContextMenuDivider;
 ContextMenu.Separator = ContextMenuSeparator; // Add the Separator component
 
 var _excluded$g = ["src", "color", "views", "themeMode"],
-  _excluded2$6 = ["path"];
+  _excluded2$7 = ["path"];
 var FileSVG = _ref => {
   var {
       src,
@@ -6158,7 +6188,7 @@ var FileImage = _ref2 => {
   var {
       path
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$6);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$7);
   return /*#__PURE__*/React.createElement(Image, Object.assign({
     src: path
   }, props));
@@ -6590,7 +6620,7 @@ var IconSizes$2 = {
 };
 
 var _excluded$o = ["isHovered", "setIsHovered", "option", "size", "callback", "style"],
-  _excluded2$7 = ["id", "name", "value", "onChange", "isMulti", "isDisabled", "isReadOnly", "options"],
+  _excluded2$8 = ["id", "name", "value", "onChange", "isMulti", "isDisabled", "isReadOnly", "options"],
   _excluded3$6 = ["option", "size", "removeOption"],
   _excluded4$6 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isMulti", "isFocused", "isHovered", "isDisabled", "isReadOnly", "options", "shadow", "size", "shape", "variant", "views", "onChange", "setHide", "setValue", "setIsHovered", "setIsFocused", "setHighlightedIndex", "highlightedIndex"];
 /**
@@ -6708,7 +6738,7 @@ var HiddenSelect = _ref4 => {
       isReadOnly = false,
       options = []
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded2$7);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded2$8);
   var handleChange = event => {
     if (onChange) onChange(event);
   };
@@ -9343,7 +9373,7 @@ var IconSizes$4 = {
 };
 
 var _excluded$t = ["size"],
-  _excluded2$8 = ["size"],
+  _excluded2$9 = ["size"],
   _excluded3$7 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isHovered", "isFocused", "isAutoFocus", "isDisabled", "isReadOnly", "shadow", "newOptions", "size", "variant", "shape", "onChange", "onBlur", "setHide", "setNewOptions", "setIsHovered", "setIsFocused", "setValue", "views", "themeMode"];
 var CountryList = _ref => {
   var props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
@@ -9355,7 +9385,7 @@ var CountrySelector = props => (/*#__PURE__*/React.createElement(Input, Object.a
   type: "country"
 }, props)));
 var CountryItem = _ref2 => {
-  var props = _objectWithoutPropertiesLoose(_ref2, _excluded2$8);
+  var props = _objectWithoutPropertiesLoose(_ref2, _excluded2$9);
   return /*#__PURE__*/React.createElement(Element, Object.assign({
     as: "li"
   }, props));
@@ -9708,7 +9738,7 @@ var usePasswordState = props => {
 };
 
 var _excluded$v = ["visibleIcon", "hiddenIcon"],
-  _excluded2$9 = ["isVisible", "setIsVisible"];
+  _excluded2$a = ["isVisible", "setIsVisible"];
 var PasswordComponent = _ref => {
   var {
       visibleIcon = /*#__PURE__*/React.createElement(OpenEyeIcon, {
@@ -9724,7 +9754,7 @@ var PasswordComponent = _ref => {
       isVisible,
       setIsVisible
     } = _usePasswordState,
-    passwordProps = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$9);
+    passwordProps = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$a);
   return /*#__PURE__*/React.createElement(TextFieldView, Object.assign({}, passwordProps, {
     type: isVisible ? 'text' : 'password',
     isClearable: false,
@@ -10757,7 +10787,7 @@ var TextFieldComponent$1 = props => {
 var FormikTextField = TextFieldComponent$1;
 
 var _excluded$D = ["visibleIcon", "hiddenIcon"],
-  _excluded2$a = ["isVisible", "setIsVisible"];
+  _excluded2$b = ["isVisible", "setIsVisible"];
 var PasswordComponent$1 = _ref => {
   var {
       visibleIcon = /*#__PURE__*/React.createElement(OpenEyeIcon, {
@@ -10774,7 +10804,7 @@ var PasswordComponent$1 = _ref => {
       isVisible,
       setIsVisible
     } = _usePasswordState,
-    passwordProps = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$a);
+    passwordProps = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$b);
   return /*#__PURE__*/React.createElement(TextFieldView, Object.assign({}, passwordProps, {
     type: isVisible ? 'text' : 'password',
     isClearable: false,
@@ -12206,7 +12236,7 @@ var ModalTypography = {
 };
 
 var _excluded$H = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position", "views"],
-  _excluded2$b = ["children", "shadow", "isFullScreen", "shape", "views", "isOpen"],
+  _excluded2$c = ["children", "shadow", "isFullScreen", "shape", "views", "isOpen"],
   _excluded3$8 = ["children", "buttonColor", "iconSize", "buttonPosition", "views"],
   _excluded4$7 = ["children", "views"],
   _excluded5$3 = ["children", "views"];
@@ -12256,7 +12286,7 @@ var ModalContainer = _ref2 => {
       shape = 'rounded',
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$b);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$c);
   var defaultShadow = typeof document !== undefined ? {
     boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.15)'
   } : {
@@ -13766,7 +13796,7 @@ var getDropdownPosition = function getDropdownPosition(side, align) {
 };
 
 var _excluded$M = ["children", "views"],
-  _excluded2$c = ["items", "side", "align", "views"],
+  _excluded2$d = ["items", "side", "align", "views"],
   _excluded3$9 = ["item", "views"],
   _excluded4$8 = ["views"],
   _excluded5$4 = ["trigger", "items", "side", "align", "views", "themeMode"];
@@ -13828,7 +13858,7 @@ var DropdownMenuContent = _ref3 => {
       align = 'start',
       views
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$c);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$d);
   var {
     isOpen,
     //activeSubmenuId, setActiveSubmenuId, size,
@@ -14177,7 +14207,7 @@ var useRect = ref => {
 };
 
 var _excluded$O = ["children", "views", "asChild"],
-  _excluded2$d = ["children", "views", "side", "align", "sideOffset", "style", "backgroundColor", "borderRadius", "boxShadow", "padding", "minWidth", "maxWidth"];
+  _excluded2$e = ["children", "views", "side", "align", "sideOffset", "style", "backgroundColor", "borderRadius", "boxShadow", "padding", "minWidth", "maxWidth"];
 // Create context for the HoverCard
 var HoverCardContext = /*#__PURE__*/createContext({
   isOpen: false,
@@ -14263,7 +14293,7 @@ var HoverCardContent = _ref3 => {
       minWidth = '200px',
       maxWidth = '300px'
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$d);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$e);
   var {
     isOpen,
     cancelCloseTimer,
@@ -15326,7 +15356,7 @@ var SidebarTransitions = {
 };
 
 var _excluded$V = ["children", "showToggleButton", "views"],
-  _excluded2$e = ["children", "views"],
+  _excluded2$f = ["children", "views"],
   _excluded3$a = ["children", "views"],
   _excluded4$9 = ["children", "position", "size", "variant", "fixed", "hasBackdrop", "expandedWidth", "collapsedWidth", "breakpointBehavior", "elevation", "transitionPreset", "ariaLabel", "isExpanded", "isMobile", "collapse", "views", "themeMode"];
 // Create context for the Sidebar
@@ -15425,7 +15455,7 @@ var SidebarContent = _ref3 => {
       children,
       views
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$e);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$f);
   var {
     isExpanded
   } = useSidebarContext();
@@ -16001,7 +16031,7 @@ var HandleIconStyles = {
 };
 
 var _excluded$X = ["children", "id", "defaultSize", "minSize", "maxSize", "collapsible", "defaultCollapsed", "onCollapseChange", "views"],
-  _excluded2$f = ["id", "position", "disabled", "withVisualIndicator", "withCollapseButton", "collapseTarget", "views"],
+  _excluded2$g = ["id", "position", "disabled", "withVisualIndicator", "withCollapseButton", "collapseTarget", "views"],
   _excluded3$b = ["children", "orientation", "size", "variant", "defaultSizes", "minSize", "maxSize", "collapsible", "containerRef", "autoSaveId", "views"];
 // Create context for the Resizable component
 var ResizableContext = /*#__PURE__*/createContext({
@@ -16109,7 +16139,7 @@ var ResizableHandle = _ref3 => {
       collapseTarget,
       views
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$f);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$g);
   var {
     orientation,
     size,
@@ -17049,7 +17079,7 @@ var CommandFooterStyles = {
 };
 
 var _excluded$Z = ["value", "onValueChange", "placeholder", "views"],
-  _excluded2$g = ["children", "views"],
+  _excluded2$h = ["children", "views"],
   _excluded3$c = ["heading", "children", "views"],
   _excluded4$a = ["item", "selected", "onSelect", "views"],
   _excluded5$5 = ["children", "views"],
@@ -17112,7 +17142,7 @@ var CommandList = _ref3 => {
       children,
       views
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$g);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$h);
   return /*#__PURE__*/React.createElement(View, Object.assign({}, CommandListStyles, views == null ? void 0 : views.container, props), children);
 };
 // Command Group component
@@ -17569,7 +17599,7 @@ var getArrowStyles = position => {
 };
 
 var _excluded$$ = ["children", "views", "asChild"],
-  _excluded2$h = ["children", "views"],
+  _excluded2$i = ["children", "views"],
   _excluded3$d = ["content", "children", "position", "align", "size", "variant", "showArrow", "views", "themeMode"];
 // Create context for the Tooltip
 var TooltipContext = /*#__PURE__*/createContext({
@@ -17640,7 +17670,7 @@ var TooltipContent = _ref3 => {
       children,
       views
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$h);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$i);
   var {
     isOpen,
     contentRef,