@app-studio/web 0.8.87 → 0.8.89

package/dist/components/Button/Button/Button.props.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ButtonProps as $ButtonProps, Shadow, ViewProps } from 'app-studio';
 import { Elevation } from '../../../utils/elevation';
-import { IconPosition, Shape, Size, Variant, LoaderPosition, Effects } from './Button.type';
+import { IconPosition, Shape, Size, Variant, LoaderPosition } from './Button.type';
 import { LoaderProps } from '../../Loader/Loader/Loader.props';
 export interface ButtonProps extends Omit<$ButtonProps, 'size'> {
     children?: React.ReactNode;
@@ -21,7 +21,6 @@ export interface ButtonProps extends Omit<$ButtonProps, 'size'> {
     shape?: Shape;
     ariaLabel?: string;
     variant?: Variant;
-    effect?: Effects;
     color?: string;
     views?: {
         container?: ViewProps;

package/dist/components/Button/examples/index.d.ts

@@ -1,7 +1,6 @@
 export * from './autofocus';
 export * from './default';
 export * from './designSystem';
-export * from './effect';
 export * from './icon';
 export * from './isAuto';
 export * from './isDisabled';

package/dist/web.cjs.development.js

@@ -15,6 +15,7 @@ require('core-js/modules/es.regexp.to-string.js');
 var appStudio = require('app-studio');
 require('core-js/modules/es.symbol.description.js');
 require('core-js/modules/es.parse-float.js');
+require('core-js/modules/es.string.trim-end.js');
 var reactRouterDom = require('react-router-dom');
 var contrast = _interopDefault(require('contrast'));
 require('core-js/modules/es.promise.js');
@@ -499,7 +500,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
  */
@@ -525,46 +527,79 @@ var TextContent = _ref => {
   }, views == null ? void 0 : views.sup), children)), !isSub && !isSup && /*#__PURE__*/React__default.createElement(React__default.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 = React.useRef(null);
-  var [truncatedLength, setTruncatedLength] = React.useState(text.length);
+  var [truncatedText, setTruncatedText] = React.useState(text);
+  var [isTruncated, setIsTruncated] = React.useState(false);
   React.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__default.createElement(appStudio.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
@@ -583,7 +618,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
@@ -627,7 +662,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"],
@@ -741,7 +776,7 @@ var UserIcon = _ref2 => {
       filled = true,
       strokeWidth = 1
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$2);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -3425,7 +3460,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 => {
@@ -3484,7 +3519,7 @@ var Dotted = _ref2 => {
       color = 'theme.loading',
       themeMode: elementMode
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$2);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$3);
   var {
     getColor,
     themeMode
@@ -4031,7 +4066,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 => {
@@ -4058,7 +4093,7 @@ var CardContent = _ref2 => {
       children,
       style
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$3);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$4);
   var theme = appStudio.useTheme();
   var {
     styles: contextStyles
@@ -4435,7 +4470,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"],
@@ -4462,7 +4497,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,
@@ -5729,7 +5764,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"],
@@ -5838,7 +5873,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,
@@ -6135,7 +6170,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,
@@ -6165,7 +6200,7 @@ var FileImage = _ref2 => {
   var {
       path
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$6);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$7);
   return /*#__PURE__*/React__default.createElement(appStudio.Image, Object.assign({
     src: path
   }, props));
@@ -6597,7 +6632,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"];
 /**
@@ -6715,7 +6750,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);
   };
@@ -9350,7 +9385,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);
@@ -9362,7 +9397,7 @@ var CountrySelector = props => (/*#__PURE__*/React__default.createElement(appStu
   type: "country"
 }, props)));
 var CountryItem = _ref2 => {
-  var props = _objectWithoutPropertiesLoose(_ref2, _excluded2$8);
+  var props = _objectWithoutPropertiesLoose(_ref2, _excluded2$9);
   return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
     as: "li"
   }, props));
@@ -9715,7 +9750,7 @@ var usePasswordState = props => {
 };
 
 var _excluded$v = ["visibleIcon", "hiddenIcon"],
-  _excluded2$9 = ["isVisible", "setIsVisible"];
+  _excluded2$a = ["isVisible", "setIsVisible"];
 var PasswordComponent = _ref => {
   var {
       visibleIcon = /*#__PURE__*/React__default.createElement(OpenEyeIcon, {
@@ -9731,7 +9766,7 @@ var PasswordComponent = _ref => {
       isVisible,
       setIsVisible
     } = _usePasswordState,
-    passwordProps = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$9);
+    passwordProps = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$a);
   return /*#__PURE__*/React__default.createElement(TextFieldView, Object.assign({}, passwordProps, {
     type: isVisible ? 'text' : 'password',
     isClearable: false,
@@ -10764,7 +10799,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__default.createElement(OpenEyeIcon, {
@@ -10781,7 +10816,7 @@ var PasswordComponent$1 = _ref => {
       isVisible,
       setIsVisible
     } = _usePasswordState,
-    passwordProps = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$a);
+    passwordProps = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$b);
   return /*#__PURE__*/React__default.createElement(TextFieldView, Object.assign({}, passwordProps, {
     type: isVisible ? 'text' : 'password',
     isClearable: false,
@@ -12213,7 +12248,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"];
@@ -12263,7 +12298,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)'
   } : {
@@ -13773,7 +13808,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"];
@@ -13835,7 +13870,7 @@ var DropdownMenuContent = _ref3 => {
       align = 'start',
       views
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$c);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$d);
   var {
     isOpen,
     //activeSubmenuId, setActiveSubmenuId, size,
@@ -14184,7 +14219,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__*/React.createContext({
   isOpen: false,
@@ -14270,7 +14305,7 @@ var HoverCardContent = _ref3 => {
       minWidth = '200px',
       maxWidth = '300px'
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$d);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$e);
   var {
     isOpen,
     cancelCloseTimer,
@@ -15333,7 +15368,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
@@ -15432,7 +15467,7 @@ var SidebarContent = _ref3 => {
       children,
       views
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$e);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$f);
   var {
     isExpanded
   } = useSidebarContext();
@@ -16008,7 +16043,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__*/React.createContext({
@@ -16116,7 +16151,7 @@ var ResizableHandle = _ref3 => {
       collapseTarget,
       views
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$f);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$g);
   var {
     orientation,
     size,
@@ -17056,7 +17091,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"],
@@ -17119,7 +17154,7 @@ var CommandList = _ref3 => {
       children,
       views
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$g);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$h);
   return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, CommandListStyles, views == null ? void 0 : views.container, props), children);
 };
 // Command Group component
@@ -17576,7 +17611,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__*/React.createContext({
@@ -17647,7 +17682,7 @@ var TooltipContent = _ref3 => {
       children,
       views
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$h);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$i);
   var {
     isOpen,
     contentRef,