@scaleflex/ui-tw 0.0.155 → 0.0.157

package/button/components/copy-button.js

@@ -4,7 +4,7 @@ var _excluded = ["textToCopy", "copiedMessage", "tooltipDuration", "onCopy", "ch
 import { Button } from '@scaleflex/ui-tw/button';
 import { WithTooltip } from '@scaleflex/ui-tw/tooltip';
 import { useCopyToClipboard } from '@scaleflex/ui-tw/utils/use-copy-to-clipboard';
-import React from 'react';
+import React, { useRef } from 'react';
 export function CopyButton(_ref) {
   var textToCopy = _ref.textToCopy,
     _ref$copiedMessage = _ref.copiedMessage,
@@ -15,10 +15,15 @@ export function CopyButton(_ref) {
     children = _ref.children,
     disabled = _ref.disabled,
     buttonProps = _objectWithoutProperties(_ref, _excluded);
+  var buttonRef = useRef(null);
   var _useCopyToClipboard = useCopyToClipboard({
       copiedMessage: copiedMessage,
       tooltipDuration: tooltipDuration,
-      onCopy: onCopy
+      onCopy: onCopy,
+      getContainer: function getContainer() {
+        var _buttonRef$current;
+        return (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.parentElement;
+      }
     }),
     tooltipText = _useCopyToClipboard.tooltipText,
     tooltipVariant = _useCopyToClipboard.tooltipVariant,
@@ -29,6 +34,7 @@ export function CopyButton(_ref) {
     variant: tooltipVariant,
     open: open || undefined
   }, /*#__PURE__*/React.createElement(Button, _extends({
+    ref: buttonRef,
     "data-slot": "copy-button",
     type: "button",
     onClick: function onClick() {

package/button/components/copy-to-clipboard-button.js

@@ -2,7 +2,7 @@ import { Button, ButtonSize } from '@scaleflex/ui-tw/button';
 import { WithTooltip } from '@scaleflex/ui-tw/tooltip';
 import { useCopyToClipboard } from '@scaleflex/ui-tw/utils/use-copy-to-clipboard';
 import { Copy } from 'lucide-react';
-import React from 'react';
+import React, { useRef } from 'react';
 
 /** @deprecated Use CopyIcon instead */
 
@@ -18,10 +18,15 @@ export function CopyIcon(props) {
     tooltipDuration = _props$tooltipDuratio === void 0 ? 2000 : _props$tooltipDuratio,
     _props$disabled = props.disabled,
     disabled = _props$disabled === void 0 ? false : _props$disabled;
+  var buttonRef = useRef(null);
   var _useCopyToClipboard = useCopyToClipboard({
       copiedMessage: copiedTooltip,
       tooltipDuration: tooltipDuration,
-      initialTooltipText: initialTooltip
+      initialTooltipText: initialTooltip,
+      getContainer: function getContainer() {
+        var _buttonRef$current;
+        return (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.parentElement;
+      }
     }),
     tooltipText = _useCopyToClipboard.tooltipText,
     tooltipVariant = _useCopyToClipboard.tooltipVariant,
@@ -32,6 +37,7 @@ export function CopyIcon(props) {
     variant: tooltipVariant,
     open: open || undefined
   }, /*#__PURE__*/React.createElement(Button, {
+    ref: buttonRef,
     type: "button",
     variant: "ghost-secondary",
     size: size,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scaleflex/ui-tw",
-  "version": "0.0.155",
+  "version": "0.0.157",
   "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.155",
+    "@scaleflex/icons-tw": "^0.0.157",
     "@tanstack/react-table": "^8.21.3",
     "@types/lodash.merge": "^4.6.9",
     "class-variance-authority": "^0.7.1",

package/tooltip/tooltip.component.js

@@ -52,7 +52,7 @@ function TooltipContent(_ref4) {
     "data-slot": "tooltip-content",
     sideOffset: sideOffset,
     collisionPadding: collisionPadding,
-    className: cn('animate-in fade-in-0 zoom-in-95 text-md shadow-shadow z-1999 w-fit max-w-lg origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-2 shadow-sm', 'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', tooltipVariants({
+    className: cn('animate-in fade-in-0 zoom-in-95 text-md shadow-shadow z-1999 w-fit max-w-lg origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-2 break-words shadow-sm', 'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', tooltipVariants({
       variant: variant
     }), className)
   }, props), children));

package/utils/copy-to-clipboard.d.ts

@@ -7,4 +7,4 @@
  * fallback path may return `true` unreliably in some browsers — do not rely
  * on it for critical confirmations.
  */
-export declare function copyToClipboard(text: string): Promise<boolean>;
+export declare function copyToClipboard(text: string, container?: HTMLElement | null): Promise<boolean>;

package/utils/copy-to-clipboard.js

@@ -9,13 +9,13 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
  * fallback path may return `true` unreliably in some browsers — do not rely
  * on it for critical confirmations.
  */
-export function copyToClipboard(_x) {
+export function copyToClipboard(_x, _x2) {
   return _copyToClipboard.apply(this, arguments);
 }
 function _copyToClipboard() {
-  _copyToClipboard = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(text) {
+  _copyToClipboard = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(text, container) {
     var _self, _navigator$clipboard;
-    var isSecureContext, textarea;
+    var isSecureContext, root, textarea, _window$getSelection;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
@@ -39,28 +39,32 @@ function _copyToClipboard() {
           }
           return _context.abrupt("return", false);
         case 12:
-          // Fallback for iframes, HTTP contexts, older browsers
+          // Fallback for iframes, HTTP contexts, older browsers.
+          // Appending inside `container` (e.g. the trigger button's parent) keeps the textarea
+          // within any focus-trap scope (e.g. Radix Dialog) so focus() and execCommand work correctly.
+          root = container !== null && container !== void 0 ? container : document.body;
           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 = 16;
+          root.appendChild(textarea);
+          _context.prev = 17;
+          (_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 || _window$getSelection.removeAllRanges();
           textarea.focus();
           textarea.select();
           return _context.abrupt("return", document.execCommand('copy'));
-        case 22:
-          _context.prev = 22;
-          _context.t1 = _context["catch"](16);
+        case 24:
+          _context.prev = 24;
+          _context.t1 = _context["catch"](17);
           return _context.abrupt("return", false);
-        case 25:
-          _context.prev = 25;
-          document.body.removeChild(textarea);
-          return _context.finish(25);
-        case 28:
+        case 27:
+          _context.prev = 27;
+          root.removeChild(textarea);
+          return _context.finish(27);
+        case 30:
         case "end":
           return _context.stop();
       }
-    }, _callee, null, [[2, 8], [16, 22, 25, 28]]);
+    }, _callee, null, [[2, 8], [17, 24, 27, 30]]);
   }));
   return _copyToClipboard.apply(this, arguments);
 }

package/utils/use-copy-to-clipboard.d.ts

@@ -3,8 +3,9 @@ interface UseCopyToClipboardOptions {
     tooltipDuration?: number;
     initialTooltipText?: string;
     onCopy?: () => void;
+    getContainer?: () => HTMLElement | null | undefined;
 }
-export declare function useCopyToClipboard({ copiedMessage, tooltipDuration, initialTooltipText, onCopy, }?: UseCopyToClipboardOptions): {
+export declare function useCopyToClipboard({ copiedMessage, tooltipDuration, initialTooltipText, onCopy, getContainer, }?: UseCopyToClipboardOptions): {
     tooltipText: string;
     tooltipVariant: "default" | "success";
     open: boolean;

package/utils/use-copy-to-clipboard.js

@@ -11,7 +11,8 @@ export function useCopyToClipboard() {
     tooltipDuration = _ref$tooltipDuration === void 0 ? 2000 : _ref$tooltipDuration,
     _ref$initialTooltipTe = _ref.initialTooltipText,
     initialTooltipText = _ref$initialTooltipTe === void 0 ? '' : _ref$initialTooltipTe,
-    onCopy = _ref.onCopy;
+    onCopy = _ref.onCopy,
+    getContainer = _ref.getContainer;
   var _useState = useState(initialTooltipText),
     _useState2 = _slicedToArray(_useState, 2),
     tooltipText = _useState2[0],
@@ -31,7 +32,7 @@ export function useCopyToClipboard() {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             _context.next = 2;
-            return copyToClipboard(text);
+            return copyToClipboard(text, getContainer === null || getContainer === void 0 ? void 0 : getContainer());
           case 2:
             success = _context.sent;
             if (success) {