@scaleflex/ui-tw 0.0.153 → 0.0.155

package/combobox/combobox.component.js

@@ -264,8 +264,7 @@ export function ComboboxContent(_ref4) {
           selectedValue: selectedValue,
           onSelect: function onSelect() {
             return _onSelect(value);
-          },
-          labelTooltip: resolvedOptionLabel && typeof resolvedLabel === 'string' ? resolvedLabel : undefined
+          }
         }, resolvedOptionLabel !== null && resolvedOptionLabel !== void 0 ? resolvedOptionLabel : resolvedLabel);
       }), showGroupSeparator && groupIndex !== options.length - 1 && /*#__PURE__*/React.createElement(SelectSeparator, null));
     }
@@ -285,8 +284,7 @@ export function ComboboxContent(_ref4) {
       selectedValue: selectedValue,
       onSelect: function onSelect() {
         return _onSelect(option.value);
-      },
-      labelTooltip: resolvedOptionLabel && typeof resolvedLabel === 'string' ? resolvedLabel : undefined
+      }
     }, resolvedOptionLabel !== null && resolvedOptionLabel !== void 0 ? resolvedOptionLabel : resolvedLabel));
   }), !fixedActions && /*#__PURE__*/React.createElement(SelectActions, {
     actions: actions
@@ -361,8 +359,7 @@ export function ComboboxCheckboxContent(_ref6) {
           selectedValue: selectedValue,
           onSelect: function onSelect() {
             return _onSelect2(value);
-          },
-          labelTooltip: resolvedOptionLabel && typeof resolvedLabel === 'string' ? resolvedLabel : undefined
+          }
         }, resolvedOptionLabel !== null && resolvedOptionLabel !== void 0 ? resolvedOptionLabel : resolvedLabel);
       }), showGroupSeparator && groupIndex !== options.length - 1 && /*#__PURE__*/React.createElement(SelectSeparator, null));
     }
@@ -381,8 +378,7 @@ export function ComboboxCheckboxContent(_ref6) {
       selectedValue: selectedValue,
       onSelect: function onSelect() {
         return _onSelect2(option.value);
-      },
-      labelTooltip: resolvedOptionLabel && typeof resolvedLabel === 'string' ? resolvedLabel : undefined
+      }
     }, resolvedOptionLabel !== null && resolvedOptionLabel !== void 0 ? resolvedOptionLabel : resolvedLabel));
   }), !fixedActions && /*#__PURE__*/React.createElement(SelectActions, {
     actions: actions

package/combobox/combobox.types.d.ts

@@ -71,7 +71,6 @@ export interface CommandItemProps extends ComponentProps<typeof CommandPrimitive
     multiple?: boolean;
     iconClassName?: string;
     textClassName?: string;
-    labelTooltip?: string;
 }
 export interface CommandUserItemProps extends Omit<CommandItemProps, 'icon' | 'children' | 'tooltip' | 'disabledTooltip'> {
     name: ReactElement | string | (() => ReactElement);

package/command/command.component.d.ts

@@ -14,8 +14,8 @@ declare function CommandList({ className, ...props }: ComponentProps<typeof Comm
 declare function CommandEmpty({ className, ...rest }: ComponentProps<typeof CommandPrimitive.Empty>): React.JSX.Element;
 declare function CommandGroup({ className, size, ...props }: CommandGroupProps): React.JSX.Element;
 declare function CommandSeparator({ className, ...props }: ComponentProps<typeof CommandPrimitive.Separator>): React.JSX.Element;
-declare function CommandItem({ className, size, isGroup, icon, tooltip, children, selectedValue, multiple, value, shortcut, disabledTooltip, disabled, iconClassName, textClassName, labelTooltip, ...props }: CommandItemProps): React.JSX.Element;
+declare function CommandItem({ className, size, isGroup, icon, tooltip, children, selectedValue, multiple, value, shortcut, disabledTooltip, disabled, iconClassName, textClassName, ...props }: CommandItemProps): React.JSX.Element;
 declare function CommandUserItem({ className, size, isGroup, name, email, profileUrl, selectedValue, multiple, value, disabled, textClassName, ...props }: CommandUserItemProps): React.JSX.Element;
-declare function CommandCheckboxItem({ className, textClassName, size, isGroup, children, selectedValue, value, icon, disabled, tooltip, disabledTooltip, labelTooltip, ...props }: CommandItemProps): React.JSX.Element;
+declare function CommandCheckboxItem({ className, textClassName, size, isGroup, children, selectedValue, value, icon, disabled, tooltip, disabledTooltip, ...props }: CommandItemProps): React.JSX.Element;
 declare function CommandShortcut({ className, ...props }: ComponentProps<'span'>): React.JSX.Element;
 export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandCheckboxItem, CommandShortcut, CommandSeparator, CommandClear, CommandUserItem, };

package/command/command.component.js

@@ -9,9 +9,9 @@ var _excluded = ["className"],
   _excluded6 = ["className"],
   _excluded7 = ["className", "size"],
   _excluded8 = ["className"],
-  _excluded9 = ["className", "size", "isGroup", "icon", "tooltip", "children", "selectedValue", "multiple", "value", "shortcut", "disabledTooltip", "disabled", "iconClassName", "textClassName", "labelTooltip"],
+  _excluded9 = ["className", "size", "isGroup", "icon", "tooltip", "children", "selectedValue", "multiple", "value", "shortcut", "disabledTooltip", "disabled", "iconClassName", "textClassName"],
   _excluded10 = ["className", "size", "isGroup", "name", "email", "profileUrl", "selectedValue", "multiple", "value", "disabled", "textClassName"],
-  _excluded11 = ["className", "textClassName", "size", "isGroup", "children", "selectedValue", "value", "icon", "disabled", "tooltip", "disabledTooltip", "labelTooltip"],
+  _excluded11 = ["className", "textClassName", "size", "isGroup", "children", "selectedValue", "value", "icon", "disabled", "tooltip", "disabledTooltip"],
   _excluded12 = ["className"];
 import { ButtonVariant, buttonVariants } from '@scaleflex/ui-tw/button';
 import { getIconSizeInRem } from '@scaleflex/ui-tw/button/button.utils';
@@ -22,7 +22,7 @@ import { crossSizeOptions } from '@scaleflex/ui-tw/search/search.constants';
 import { SelectIcon } from '@scaleflex/ui-tw/select/components/select-icon';
 import { selectItemVariants, selectTriggerVariants } from '@scaleflex/ui-tw/select/select.component';
 import { getOptionInGroupPaddingLeft } from '@scaleflex/ui-tw/select/select.utils';
-import { WithTooltip } from '@scaleflex/ui-tw/tooltip';
+import { TruncatedText } from '@scaleflex/ui-tw/truncated-text';
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import { cva } from 'class-variance-authority';
@@ -30,7 +30,7 @@ import { Command as CommandPrimitive, useCommandState } from 'cmdk';
 import { CheckIcon, SearchIcon, UserCircle2Icon, XIcon } from 'lucide-react';
 import React from 'react';
 import { useCallback } from 'react';
-import { selectCommandHeadingOptions, truncateLabelTooltip } from './command.utils';
+import { selectCommandHeadingOptions } from './command.utils';
 function Command(_ref) {
   var className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded);
@@ -192,11 +192,9 @@ function CommandItem(_ref9) {
     disabled = _ref9.disabled,
     iconClassName = _ref9.iconClassName,
     textClassName = _ref9.textClassName,
-    labelTooltip = _ref9.labelTooltip,
     props = _objectWithoutProperties(_ref9, _excluded9);
   var selected = value && (multiple ? selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.includes(value) : value === selectedValue);
   var resolvedShortcut = typeof shortcut === 'function' ? shortcut() : shortcut;
-  var resolvedLabelTooltip = truncateLabelTooltip(labelTooltip !== null && labelTooltip !== void 0 ? labelTooltip : typeof children === 'string' ? children : undefined);
   return /*#__PURE__*/React.createElement(CommandPrimitive.Item, _extends({
     "data-slot": "command-item",
     className: cn('relative flex w-full cursor-pointer items-center justify-between gap-2 outline-hidden select-none', '*:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2', 'data-[selected=true]:bg-secondary data-[selected=true]:text-foreground', '!opacity-100 data-[disabled=true]:cursor-not-allowed', "[&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", selectItemVariants({
@@ -212,11 +210,11 @@ function CommandItem(_ref9) {
     className: cn('text-muted-foreground hover:text-primary shrink-0', selected && 'text-primary', disabled && 'opacity-50', iconClassName)
   }), /*#__PURE__*/React.createElement("div", {
     className: "flex items-center gap-1 overflow-hidden"
-  }, /*#__PURE__*/React.createElement(WithTooltip, {
-    content: resolvedLabelTooltip
-  }, /*#__PURE__*/React.createElement("div", {
-    className: cn('line-clamp-2 overflow-hidden text-left break-words text-ellipsis', textClassName, disabled && 'opacity-50')
-  }, children)), (tooltip || disabledTooltip) && /*#__PURE__*/React.createElement("div", {
+  }, typeof children === 'string' ? /*#__PURE__*/React.createElement(TruncatedText, {
+    className: cn(textClassName, disabled && 'opacity-50')
+  }, children) : /*#__PURE__*/React.createElement("div", {
+    className: cn('overflow-hidden text-left', textClassName, disabled && 'opacity-50')
+  }, children), (tooltip || disabledTooltip) && /*#__PURE__*/React.createElement("div", {
     className: "flex shrink-0 items-center"
   }, /*#__PURE__*/React.createElement(LabelIcon, {
     size: size,
@@ -265,15 +263,15 @@ function CommandUserItem(_ref10) {
     className: "size-8"
   })), /*#__PURE__*/React.createElement("div", {
     className: "max-w-10/12"
-  }, /*#__PURE__*/React.createElement(WithTooltip, {
-    content: typeof resolvedName === 'string' ? truncateLabelTooltip(resolvedName) : undefined
-  }, /*#__PURE__*/React.createElement("div", {
+  }, typeof resolvedName === 'string' ? /*#__PURE__*/React.createElement(TruncatedText, {
+    className: cn('text-sm', textClassName)
+  }, resolvedName) : /*#__PURE__*/React.createElement("div", {
     className: cn('w-full overflow-hidden text-sm text-ellipsis whitespace-nowrap', textClassName)
-  }, resolvedName)), /*#__PURE__*/React.createElement(WithTooltip, {
-    content: typeof resolvedEmail === 'string' ? truncateLabelTooltip(resolvedEmail) : undefined
-  }, /*#__PURE__*/React.createElement("div", {
+  }, resolvedName), typeof resolvedEmail === 'string' ? /*#__PURE__*/React.createElement(TruncatedText, {
+    className: cn('text-secondary-foreground text-xs', textClassName)
+  }, resolvedEmail) : /*#__PURE__*/React.createElement("div", {
     className: cn('text-secondary-foreground w-full overflow-hidden text-xs text-ellipsis whitespace-nowrap', textClassName)
-  }, resolvedEmail)))), /*#__PURE__*/React.createElement("span", {
+  }, resolvedEmail))), /*#__PURE__*/React.createElement("span", {
     className: "absolute right-2 flex size-3.5 items-center justify-center"
   }, /*#__PURE__*/React.createElement(CheckIcon, {
     className: cn('text-primary ml-auto h-4 w-4', selected ? 'opacity-100' : 'opacity-0')
@@ -291,10 +289,8 @@ function CommandCheckboxItem(_ref11) {
     disabled = _ref11.disabled,
     tooltip = _ref11.tooltip,
     disabledTooltip = _ref11.disabledTooltip,
-    labelTooltip = _ref11.labelTooltip,
     props = _objectWithoutProperties(_ref11, _excluded11);
   var selected = value && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.includes(value));
-  var resolvedLabelTooltip = truncateLabelTooltip(labelTooltip !== null && labelTooltip !== void 0 ? labelTooltip : typeof children === 'string' ? children : undefined);
   return /*#__PURE__*/React.createElement(CommandPrimitive.Item, _extends({
     "data-slot": "command-checkbox-item",
     className: cn('relative flex w-full cursor-pointer items-center gap-3 outline-hidden select-none', 'data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground', '!opacity-100 data-[disabled=true]:cursor-not-allowed', selectItemVariants({
@@ -313,11 +309,11 @@ function CommandCheckboxItem(_ref11) {
     size: size,
     icon: icon,
     className: cn('text-muted-foreground hover:text-primary !mr-1 shrink-0', selected && 'text-primary', disabled && 'opacity-50')
-  }), /*#__PURE__*/React.createElement(WithTooltip, {
-    content: resolvedLabelTooltip
-  }, /*#__PURE__*/React.createElement("div", {
-    className: cn('line-clamp-2 overflow-hidden text-left break-words text-ellipsis', textClassName, disabled && 'opacity-50')
-  }, children)), (tooltip || disabledTooltip) && /*#__PURE__*/React.createElement("div", {
+  }), typeof children === 'string' ? /*#__PURE__*/React.createElement(TruncatedText, {
+    className: cn(textClassName, disabled && 'opacity-50')
+  }, children) : /*#__PURE__*/React.createElement("div", {
+    className: cn('overflow-hidden text-left', textClassName, disabled && 'opacity-50')
+  }, children), (tooltip || disabledTooltip) && /*#__PURE__*/React.createElement("div", {
     className: "flex shrink-0 items-center"
   }, /*#__PURE__*/React.createElement(LabelIcon, {
     size: size,

package/command/command.utils.d.ts

@@ -1,5 +1,3 @@
-export declare const LABEL_TOOLTIP_MAX_LENGTH = 250;
-export declare function truncateLabelTooltip(labelTooltip: string | undefined): string | undefined;
 export declare const selectCommandHeadingOptions: {
     readonly sm: "[&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:min-h-8 [&_[cmdk-group-heading]]:text-xs";
     readonly md: "[&_[cmdk-group-heading]]:py-3 [&_[cmdk-group-heading]]:px-4 [&_[cmdk-group-heading]]:min-h-10 [&_[cmdk-group-heading]]:text-sm";

package/command/command.utils.js

@@ -1,8 +1,3 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
-export var LABEL_TOOLTIP_MAX_LENGTH = 250;
-export function truncateLabelTooltip(labelTooltip) {
-  if (!labelTooltip) return undefined;
-  return labelTooltip.length > LABEL_TOOLTIP_MAX_LENGTH ? "".concat(labelTooltip.slice(0, LABEL_TOOLTIP_MAX_LENGTH), "\u2026") : labelTooltip;
-}
 export var selectCommandHeadingOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, '[&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:min-h-8 [&_[cmdk-group-heading]]:text-xs'), FormSize.Md, '[&_[cmdk-group-heading]]:py-3 [&_[cmdk-group-heading]]:px-4 [&_[cmdk-group-heading]]:min-h-10 [&_[cmdk-group-heading]]:text-sm'), FormSize.Lg, '[&_[cmdk-group-heading]]:py-3 [&_[cmdk-group-heading]]:px-4 [&_[cmdk-group-heading]]:min-h-12 [&_[cmdk-group-heading]]:text-base');

package/dropdown-menu/dropdown-menu.component.d.ts

@@ -7,7 +7,7 @@ declare function DropdownMenuPortal({ ...props }: ComponentProps<typeof Dropdown
 declare function DropdownMenuTrigger({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Trigger>): React.JSX.Element;
 declare function DropdownMenuContent({ className, sideOffset, collisionPadding, ...props }: ComponentProps<typeof DropdownMenuPrimitive.Content>): React.JSX.Element;
 declare function DropdownMenuGroup({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Group>): React.JSX.Element;
-declare function DropdownMenuItem({ className, inset, variant, size, ...props }: ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+declare function DropdownMenuItem({ className, inset, variant, size, children, ...props }: ComponentProps<typeof DropdownMenuPrimitive.Item> & {
     inset?: boolean;
     variant?: 'default' | 'destructive';
     size?: DropdownMenuItemSize;

package/dropdown-menu/dropdown-menu.component.js

@@ -3,7 +3,7 @@ import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructurin
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["className", "sideOffset", "collisionPadding"],
-  _excluded2 = ["className", "inset", "variant", "size"],
+  _excluded2 = ["className", "inset", "variant", "size", "children"],
   _excluded3 = ["className", "children", "checked", "size", "closeOnSelect", "onSelect"],
   _excluded4 = ["className", "children", "size"],
   _excluded5 = ["className", "size"],
@@ -16,6 +16,7 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { Slot } from '@radix-ui/react-slot';
 import { DropdownMenuItemSize, dropdownMenuButtonTriggerOptions, dropdownMenuCheckboxItemSizeOptions, dropdownMenuIconSizeOptions, dropdownMenuItemIconSizeOptions, dropdownMenuItemIndicatorSizeOptions, dropdownMenuItemSizeOptions, dropdownMenuRadioItemSizeOptions, dropdownMenuShortcutSizeOptions } from '@scaleflex/ui-tw/dropdown-menu/dropdown-menu.constants';
 import { focusRingClassNames } from '@scaleflex/ui-tw/styles/shared-classes';
+import { TruncatedText } from '@scaleflex/ui-tw/truncated-text';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import { cva } from 'class-variance-authority';
 import { CheckIcon, ChevronDownIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
@@ -131,23 +132,28 @@ function DropdownMenuGroup(_ref5) {
   }, props));
 }
 function DropdownMenuItem(_ref6) {
+  var _React$Children$map;
   var className = _ref6.className,
     inset = _ref6.inset,
     _ref6$variant = _ref6.variant,
     variant = _ref6$variant === void 0 ? 'default' : _ref6$variant,
     _ref6$size = _ref6.size,
     size = _ref6$size === void 0 ? DropdownMenuItemSize.Sm : _ref6$size,
+    children = _ref6.children,
     props = _objectWithoutProperties(_ref6, _excluded2);
+  var processedChildren = (_React$Children$map = React.Children.map(children, function (child) {
+    return typeof child === 'string' ? /*#__PURE__*/React.createElement(TruncatedText, null, child) : child;
+  })) !== null && _React$Children$map !== void 0 ? _React$Children$map : children;
   return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Item, _extends({
     "data-slot": "dropdown-menu-item",
     "data-inset": inset,
     "data-variant": variant,
-    className: cn('relative flex cursor-pointer items-center gap-2 rounded-sm outline-hidden select-none', dropdownMenuItemVariants({
+    className: cn('relative flex cursor-pointer items-center gap-2 overflow-hidden rounded-sm outline-hidden select-none', dropdownMenuItemVariants({
       size: size
     }), 'data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive', 'focus:bg-secondary data-[disabled]:pointer-events-none data-[disabled]:opacity-50', "[&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0", dropdownMenuIconVariants({
       size: size
     }), className)
-  }, props));
+  }, props), processedChildren);
 }
 function DropdownMenuCheckboxItem(_ref7) {
   var className = _ref7.className,
@@ -234,7 +240,7 @@ function DropdownMenuShortcut(_ref12) {
     props = _objectWithoutProperties(_ref12, _excluded7);
   return /*#__PURE__*/React.createElement("span", _extends({
     "data-slot": "dropdown-menu-shortcut",
-    className: cn('text-muted-foreground absolute tracking-widest', dropdownMenuShortcutVariants({
+    className: cn('text-muted-foreground ml-auto shrink-0 tracking-widest', dropdownMenuShortcutVariants({
       size: size
     }), className)
   }, props));

package/dropdown-menu/dropdown-menu.constants.d.ts

@@ -34,9 +34,9 @@ export declare const dropdownMenuItemIconSizeOptions: {
     readonly lg: "size-5";
 };
 export declare const dropdownMenuShortcutSizeOptions: {
-    readonly sm: "right-2 text-xs";
-    readonly md: "right-3 text-xs";
-    readonly lg: "right-3 text-xs";
+    readonly sm: "text-xs";
+    readonly md: "text-xs";
+    readonly lg: "text-xs";
 };
 export declare const dropdownMenuIconSizeOptions: {
     readonly sm: "[&_svg:not([class*='size-'])]:size-3.5";

package/dropdown-menu/dropdown-menu.constants.js

@@ -10,5 +10,5 @@ export var dropdownMenuRadioItemSizeOptions = _defineProperty(_defineProperty(_d
 export var dropdownMenuButtonTriggerOptions = _defineProperty(_defineProperty(_defineProperty({}, DropdownMenuItemSize.Sm, 'px-3 py-1.5 gap-1 text-sm'), DropdownMenuItemSize.Md, 'px-4 py-2 gap-2 text-base'), DropdownMenuItemSize.Lg, 'px-5 py-2.5 gap-2 text-lg');
 export var dropdownMenuItemIndicatorSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, DropdownMenuItemSize.Sm, 'right-2 size-3.5'), DropdownMenuItemSize.Md, 'right-3 size-4'), DropdownMenuItemSize.Lg, 'right-3 size-5');
 export var dropdownMenuItemIconSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, DropdownMenuItemSize.Sm, 'size-3.5'), DropdownMenuItemSize.Md, 'size-4'), DropdownMenuItemSize.Lg, 'size-5');
-export var dropdownMenuShortcutSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, DropdownMenuItemSize.Sm, 'right-2 text-xs'), DropdownMenuItemSize.Md, 'right-3 text-xs'), DropdownMenuItemSize.Lg, 'right-3 text-xs');
+export var dropdownMenuShortcutSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, DropdownMenuItemSize.Sm, 'text-xs'), DropdownMenuItemSize.Md, 'text-xs'), DropdownMenuItemSize.Lg, 'text-xs');
 export var dropdownMenuIconSizeOptions = _defineProperty(_defineProperty(_defineProperty({}, DropdownMenuItemSize.Sm, "[&_svg:not([class*='size-'])]:size-3.5"), DropdownMenuItemSize.Md, "[&_svg:not([class*='size-'])]:size-4.5"), DropdownMenuItemSize.Lg, "[&_svg:not([class*='size-'])]:size-5");

package/input-tags/input-tags.component.js

@@ -203,11 +203,8 @@ export function InputTags(_ref) {
       onSelect: function onSelect() {
         return handleAddTag(tag);
       },
-      isGroup: true,
-      labelTooltip: tag.label
-    }, /*#__PURE__*/React.createElement("span", {
-      className: "block w-full truncate overflow-hidden text-ellipsis whitespace-nowrap"
-    }, tag.label));
+      isGroup: true
+    }, tag.label);
   })), filteredAll.length > 0 && /*#__PURE__*/React.createElement(CommandGroup, {
     size: size,
     heading: "All Tags"
@@ -218,11 +215,8 @@ export function InputTags(_ref) {
       onSelect: function onSelect() {
         return handleAddTag(tag);
       },
-      isGroup: true,
-      labelTooltip: tag.label
-    }, /*#__PURE__*/React.createElement("span", {
-      className: "block w-full truncate overflow-hidden text-ellipsis whitespace-nowrap"
-    }, tag.label));
+      isGroup: true
+    }, tag.label);
   })), !canCreate && filteredSuggested.length === 0 && filteredAll.length === 0 && /*#__PURE__*/React.createElement(CommandEmpty, null, "No results found."), canCreate && /*#__PURE__*/React.createElement(CommandItem, {
     size: size,
     onSelect: function onSelect() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scaleflex/ui-tw",
-  "version": "0.0.153",
+  "version": "0.0.155",
   "author": "scaleflex",
   "repository": "github:scaleflex/ui",
   "homepage": "https://github.com/scaleflex/ui/blob/master/README.md",
@@ -29,7 +29,7 @@
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.6",
-    "@scaleflex/icons-tw": "^0.0.153",
+    "@scaleflex/icons-tw": "^0.0.155",
     "@tanstack/react-table": "^8.21.3",
     "@types/lodash.merge": "^4.6.9",
     "class-variance-authority": "^0.7.1",

package/truncated-text/index.d.ts

@@ -0,0 +1,2 @@
+export { TruncatedText } from './truncated-text.component';
+export type { TruncatedTextProps } from './truncated-text.types';

package/truncated-text/index.js

@@ -0,0 +1 @@
+export { TruncatedText } from './truncated-text.component';

package/truncated-text/truncated-text.component.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { TruncatedTextProps } from './truncated-text.types';
+declare function TruncatedText({ children, className, tooltipSide }: TruncatedTextProps): React.JSX.Element;
+export { TruncatedText };

package/truncated-text/truncated-text.component.js

@@ -0,0 +1,40 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { WithTooltip } from '@scaleflex/ui-tw/tooltip';
+import { cn } from '@scaleflex/ui-tw/utils/cn';
+import React, { useEffect, useRef, useState } from 'react';
+import { truncateTooltip } from './truncated-text.utils';
+function TruncatedText(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    _ref$tooltipSide = _ref.tooltipSide,
+    tooltipSide = _ref$tooltipSide === void 0 ? 'top' : _ref$tooltipSide;
+  var textRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isTruncated = _useState2[0],
+    setIsTruncated = _useState2[1];
+  useEffect(function () {
+    var checkTruncation = function checkTruncation() {
+      var element = textRef.current;
+      if (element) {
+        setIsTruncated(element.scrollWidth > element.clientWidth);
+      }
+    };
+    checkTruncation();
+    var resizeObserver = new ResizeObserver(checkTruncation);
+    if (textRef.current) {
+      resizeObserver.observe(textRef.current);
+    }
+    return function () {
+      return resizeObserver.disconnect();
+    };
+  }, [children]);
+  return /*#__PURE__*/React.createElement(WithTooltip, {
+    side: tooltipSide,
+    content: isTruncated ? truncateTooltip(children) : undefined
+  }, /*#__PURE__*/React.createElement("span", {
+    ref: textRef,
+    className: cn('block min-w-0 truncate', className)
+  }, children));
+}
+export { TruncatedText };

package/truncated-text/truncated-text.constants.d.ts

@@ -0,0 +1 @@
+export declare const TOOLTIP_MAX_LENGTH = 250;

package/truncated-text/truncated-text.constants.js

@@ -0,0 +1 @@
+export var TOOLTIP_MAX_LENGTH = 250;

package/truncated-text/truncated-text.types.d.ts

@@ -0,0 +1,7 @@
+import type * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import type { ComponentProps } from 'react';
+export interface TruncatedTextProps {
+    children: string;
+    className?: string;
+    tooltipSide?: ComponentProps<typeof TooltipPrimitive.Content>['side'];
+}

package/truncated-text/truncated-text.types.js

@@ -0,0 +1 @@
+export {};

package/truncated-text/truncated-text.utils.d.ts

@@ -0,0 +1 @@
+export declare function truncateTooltip(text: string): string;

package/truncated-text/truncated-text.utils.js

@@ -0,0 +1,4 @@
+import { TOOLTIP_MAX_LENGTH } from './truncated-text.constants';
+export function truncateTooltip(text) {
+  return text.length > TOOLTIP_MAX_LENGTH ? "".concat(text.slice(0, TOOLTIP_MAX_LENGTH), "\u2026") : text;
+}

package/utils/copy-to-clipboard.js

@@ -14,52 +14,53 @@ export function copyToClipboard(_x) {
 }
 function _copyToClipboard() {
   _copyToClipboard = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(text) {
-    var _navigator$clipboard;
-    var textarea;
+    var _self, _navigator$clipboard;
+    var isSecureContext, textarea;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          if (!(typeof navigator !== 'undefined' && (_navigator$clipboard = navigator.clipboard) !== null && _navigator$clipboard !== void 0 && _navigator$clipboard.writeText)) {
-            _context.next = 9;
+          isSecureContext = typeof window !== 'undefined' ? window.isSecureContext : !!((_self = self) !== null && _self !== void 0 && _self.isSecureContext);
+          if (!(isSecureContext && typeof navigator !== 'undefined' && (_navigator$clipboard = navigator.clipboard) !== null && _navigator$clipboard !== void 0 && _navigator$clipboard.writeText)) {
+            _context.next = 10;
             break;
           }
-          _context.prev = 1;
-          _context.next = 4;
+          _context.prev = 2;
+          _context.next = 5;
           return navigator.clipboard.writeText(text);
-        case 4:
+        case 5:
           return _context.abrupt("return", true);
-        case 7:
-          _context.prev = 7;
-          _context.t0 = _context["catch"](1);
-        case 9:
+        case 8:
+          _context.prev = 8;
+          _context.t0 = _context["catch"](2);
+        case 10:
           if (!(typeof document === 'undefined')) {
-            _context.next = 11;
+            _context.next = 12;
             break;
           }
           return _context.abrupt("return", false);
-        case 11:
+        case 12:
           // Fallback for iframes, HTTP contexts, older browsers
           textarea = document.createElement('textarea');
           textarea.value = text;
           textarea.style.cssText = 'position:fixed;top:0;left:0;opacity:0;pointer-events:none';
           document.body.appendChild(textarea);
-          _context.prev = 15;
+          _context.prev = 16;
           textarea.focus();
           textarea.select();
           return _context.abrupt("return", document.execCommand('copy'));
-        case 21:
-          _context.prev = 21;
-          _context.t1 = _context["catch"](15);
+        case 22:
+          _context.prev = 22;
+          _context.t1 = _context["catch"](16);
           return _context.abrupt("return", false);
-        case 24:
-          _context.prev = 24;
+        case 25:
+          _context.prev = 25;
           document.body.removeChild(textarea);
-          return _context.finish(24);
-        case 27:
+          return _context.finish(25);
+        case 28:
         case "end":
           return _context.stop();
       }
-    }, _callee, null, [[1, 7], [15, 21, 24, 27]]);
+    }, _callee, null, [[2, 8], [16, 22, 25, 28]]);
   }));
   return _copyToClipboard.apply(this, arguments);
 }