@scaleflex/ui-tw 0.0.152 → 0.0.154

package/textarea/components/textarea-with-actions.js

@@ -55,7 +55,9 @@ function TextareaWithActions(_ref) {
     }
     onBlur === null || onBlur === void 0 || onBlur(e);
   };
-  var hasBottomArea = leftToolbar || rightToolbar || showCharCount;
+  var resolvedLeftToolbar = typeof leftToolbar === 'function' ? leftToolbar() : leftToolbar;
+  var resolvedRightToolbar = typeof rightToolbar === 'function' ? rightToolbar() : rightToolbar;
+  var hasBottomArea = resolvedLeftToolbar || resolvedRightToolbar || showCharCount;
   return /*#__PURE__*/React.createElement("div", {
     className: "relative"
   }, /*#__PURE__*/React.createElement(Textarea, _extends({}, textareaProps, {
@@ -73,12 +75,12 @@ function TextareaWithActions(_ref) {
     className: cn('bg-background absolute right-2.5 bottom-0.25 left-1.5', textareaBottomActionAreaPadding[size]),
     onClick: handleActionClick,
     tabIndex: -1
-  }, leftToolbar && /*#__PURE__*/React.createElement("div", {
+  }, resolvedLeftToolbar && /*#__PURE__*/React.createElement("div", {
     className: "absolute bottom-1.5 left-0 flex items-center gap-0.5"
-  }, leftToolbar), /*#__PURE__*/React.createElement("div", {
+  }, resolvedLeftToolbar), /*#__PURE__*/React.createElement("div", {
     className: "absolute right-0 bottom-1.5 flex items-center gap-0.5"
   }, showCharCount && /*#__PURE__*/React.createElement("span", {
-    className: cn(textareaCharCountTextSizeOptions[size], rightToolbar && 'mr-1', charCountColorClass, disabled && 'opacity-50')
-  }, currentLength, "/", maxCharCount), rightToolbar)));
+    className: cn(textareaCharCountTextSizeOptions[size], resolvedRightToolbar && 'mr-1', charCountColorClass, disabled && 'opacity-50')
+  }, currentLength, "/", maxCharCount), resolvedRightToolbar)));
 }
 export { TextareaWithActions };

package/textarea/textarea.types.d.ts

@@ -8,8 +8,8 @@ export interface TextareaProps extends Omit<ComponentProps<'textarea'>, 'size'>
     maxCharCount?: number;
 }
 export interface TextareaWithActionsProps extends TextareaProps {
-    leftToolbar?: ReactElement;
-    rightToolbar?: ReactElement;
+    leftToolbar?: ReactElement | (() => ReactElement);
+    rightToolbar?: ReactElement | (() => ReactElement);
 }
 export interface RightToolbarButtonsProps {
     size?: FormSizeType;

package/tooltip/tooltip.component.js

@@ -64,7 +64,8 @@ function WithTooltip(_ref5) {
     delayDuration = _ref5.delayDuration,
     open = _ref5.open,
     otherProps = _objectWithoutProperties(_ref5, _excluded3);
-  if (!content) return children;
+  var resolvedContent = typeof content === 'function' ? content() : content;
+  if (!resolvedContent) return children;
   return /*#__PURE__*/React.createElement(Tooltip, {
     open: open,
     delayDuration: delayDuration || 700
@@ -72,6 +73,6 @@ function WithTooltip(_ref5) {
     asChild: true
   }, children), /*#__PURE__*/React.createElement(TooltipContent, _extends({
     variant: variant
-  }, otherProps), content));
+  }, otherProps), resolvedContent));
 }
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, WithTooltip };

package/tooltip/tooltip.types.d.ts

@@ -5,7 +5,7 @@ export type TooltipVariantType = (typeof TooltipVariant)[keyof typeof TooltipVar
 export interface WithTooltipProps extends Omit<ComponentProps<typeof TooltipPrimitive.Content>, 'content'> {
     children: ReactElement;
     open?: boolean;
-    content?: ReactElement | undefined | string;
+    content?: ReactElement | undefined | string | (() => ReactElement);
     variant?: TooltipVariantType;
     delayDuration?: number;
 }

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;
+}