@scaleflex/ui-tw 0.0.154 → 0.0.156

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.154",
+  "version": "0.0.156",
   "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.154",
+    "@scaleflex/icons-tw": "^0.0.156",
     "@tanstack/react-table": "^8.21.3",
     "@types/lodash.merge": "^4.6.9",
     "class-variance-authority": "^0.7.1",

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,57 +9,62 @@ 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) {
-    var _navigator$clipboard;
-    var textarea;
+  _copyToClipboard = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(text, container) {
+    var _self, _navigator$clipboard;
+    var isSecureContext, root, textarea, _window$getSelection;
     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:
-          // Fallback for iframes, HTTP contexts, older browsers
+        case 12:
+          // 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 = 15;
+          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 21:
-          _context.prev = 21;
-          _context.t1 = _context["catch"](15);
-          return _context.abrupt("return", false);
         case 24:
           _context.prev = 24;
-          document.body.removeChild(textarea);
-          return _context.finish(24);
+          _context.t1 = _context["catch"](17);
+          return _context.abrupt("return", false);
         case 27:
+          _context.prev = 27;
+          root.removeChild(textarea);
+          return _context.finish(27);
+        case 30:
         case "end":
           return _context.stop();
       }
-    }, _callee, null, [[1, 7], [15, 21, 24, 27]]);
+    }, _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) {