@scaleflex/ui-tw 0.0.151 → 0.0.152

package/button/components/copy-button.js

@@ -1,12 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["textToCopy", "copiedMessage", "tooltipDuration", "onCopy", "children", "disabled"];
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { Button } from '@scaleflex/ui-tw/button';
 import { WithTooltip } from '@scaleflex/ui-tw/tooltip';
-import React, { useState } from 'react';
+import { useCopyToClipboard } from '@scaleflex/ui-tw/utils/use-copy-to-clipboard';
+import React from 'react';
 export function CopyButton(_ref) {
   var textToCopy = _ref.textToCopy,
     _ref$copiedMessage = _ref.copiedMessage,
@@ -17,62 +15,25 @@ export function CopyButton(_ref) {
     children = _ref.children,
     disabled = _ref.disabled,
     buttonProps = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState(''),
-    _useState2 = _slicedToArray(_useState, 2),
-    tooltipText = _useState2[0],
-    setTooltipText = _useState2[1];
-  var _useState3 = useState('default'),
-    _useState4 = _slicedToArray(_useState3, 2),
-    tooltipVariant = _useState4[0],
-    setTooltipVariant = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    open = _useState6[0],
-    setOpen = _useState6[1];
-  var handleCopy = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            _context.prev = 0;
-            _context.next = 3;
-            return navigator.clipboard.writeText(textToCopy);
-          case 3:
-            setTooltipText(copiedMessage);
-            setTooltipVariant('success');
-            setOpen(true);
-            onCopy === null || onCopy === void 0 || onCopy();
-            setTimeout(function () {
-              setOpen(false);
-            }, tooltipDuration - 500);
-            setTimeout(function () {
-              setTooltipText('');
-              setTooltipVariant('default');
-            }, tooltipDuration);
-            _context.next = 14;
-            break;
-          case 11:
-            _context.prev = 11;
-            _context.t0 = _context["catch"](0);
-            console.error('Failed to copy', _context.t0);
-          case 14:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee, null, [[0, 11]]);
-    }));
-    return function handleCopy() {
-      return _ref2.apply(this, arguments);
-    };
-  }();
+  var _useCopyToClipboard = useCopyToClipboard({
+      copiedMessage: copiedMessage,
+      tooltipDuration: tooltipDuration,
+      onCopy: onCopy
+    }),
+    tooltipText = _useCopyToClipboard.tooltipText,
+    tooltipVariant = _useCopyToClipboard.tooltipVariant,
+    open = _useCopyToClipboard.open,
+    handleCopy = _useCopyToClipboard.handleCopy;
   return /*#__PURE__*/React.createElement(WithTooltip, {
     content: tooltipText,
     variant: tooltipVariant,
-    open: open ? true : undefined
+    open: open || undefined
   }, /*#__PURE__*/React.createElement(Button, _extends({
     "data-slot": "copy-button",
     type: "button",
-    onClick: handleCopy,
+    onClick: function onClick() {
+      return handleCopy(textToCopy);
+    },
     disabled: disabled || !textToCopy
   }, buttonProps), children));
 }

package/button/components/copy-to-clipboard-button.d.ts

@@ -6,6 +6,7 @@ export interface CopyIconProps {
     size?: ButtonSizeType;
     initialTooltip?: string;
     copiedTooltip?: string;
+    tooltipDuration?: number;
 }
 /** @deprecated Use CopyIcon instead */
 export type CopyToClipboardButtonProps = CopyIconProps;

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

@@ -1,10 +1,8 @@
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 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, { useState } from 'react';
+import React from 'react';
 
 /** @deprecated Use CopyIcon instead */
 
@@ -16,64 +14,30 @@ export function CopyIcon(props) {
     initialTooltip = _props$initialTooltip === void 0 ? 'Copy to clipboard' : _props$initialTooltip,
     _props$copiedTooltip = props.copiedTooltip,
     copiedTooltip = _props$copiedTooltip === void 0 ? 'Copied!' : _props$copiedTooltip,
+    _props$tooltipDuratio = props.tooltipDuration,
+    tooltipDuration = _props$tooltipDuratio === void 0 ? 2000 : _props$tooltipDuratio,
     _props$disabled = props.disabled,
     disabled = _props$disabled === void 0 ? false : _props$disabled;
-  var _useState = useState(initialTooltip),
-    _useState2 = _slicedToArray(_useState, 2),
-    tooltipText = _useState2[0],
-    setTooltipText = _useState2[1];
-  var _useState3 = useState('default'),
-    _useState4 = _slicedToArray(_useState3, 2),
-    tooltipVariant = _useState4[0],
-    setTooltipVariant = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    open = _useState6[0],
-    setOpen = _useState6[1];
-  var handleCopy = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            _context.prev = 0;
-            _context.next = 3;
-            return navigator.clipboard.writeText(text);
-          case 3:
-            setTooltipText(copiedTooltip);
-            setTooltipVariant('success');
-            setOpen(true);
-            setTimeout(function () {
-              setOpen(false);
-            }, 1500);
-            setTimeout(function () {
-              setTooltipText(initialTooltip);
-              setTooltipVariant('default');
-            }, 2000);
-            _context.next = 13;
-            break;
-          case 10:
-            _context.prev = 10;
-            _context.t0 = _context["catch"](0);
-            console.error('Failed to copy', _context.t0);
-          case 13:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee, null, [[0, 10]]);
-    }));
-    return function handleCopy() {
-      return _ref.apply(this, arguments);
-    };
-  }();
+  var _useCopyToClipboard = useCopyToClipboard({
+      copiedMessage: copiedTooltip,
+      tooltipDuration: tooltipDuration,
+      initialTooltipText: initialTooltip
+    }),
+    tooltipText = _useCopyToClipboard.tooltipText,
+    tooltipVariant = _useCopyToClipboard.tooltipVariant,
+    open = _useCopyToClipboard.open,
+    handleCopy = _useCopyToClipboard.handleCopy;
   return /*#__PURE__*/React.createElement(WithTooltip, {
     content: tooltipText,
     variant: tooltipVariant,
-    open: open ? true : undefined
+    open: open || undefined
   }, /*#__PURE__*/React.createElement(Button, {
     type: "button",
     variant: "ghost-secondary",
     size: size,
-    onClick: handleCopy,
+    onClick: function onClick() {
+      return handleCopy(text);
+    },
     disabled: disabled || !text
   }, /*#__PURE__*/React.createElement(Copy, null)));
 }

package/copyable-text/copyable-text.component.js

@@ -1,13 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["value", "textToCopy", "copiedMessage", "tooltipDuration", "onCopy", "className"];
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { WithTooltip } from '@scaleflex/ui-tw/tooltip';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
+import { useCopyToClipboard } from '@scaleflex/ui-tw/utils/use-copy-to-clipboard';
 import { Copy } from 'lucide-react';
-import React, { useState } from 'react';
+import React from 'react';
 function CopyableText(_ref) {
   var value = _ref.value,
     textToCopy = _ref.textToCopy,
@@ -18,66 +16,29 @@ function CopyableText(_ref) {
     onCopy = _ref.onCopy,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState(''),
-    _useState2 = _slicedToArray(_useState, 2),
-    tooltipText = _useState2[0],
-    setTooltipText = _useState2[1];
-  var _useState3 = useState('default'),
-    _useState4 = _slicedToArray(_useState3, 2),
-    tooltipVariant = _useState4[0],
-    setTooltipVariant = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    open = _useState6[0],
-    setOpen = _useState6[1];
-  var handleCopy = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      var text;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            _context.prev = 0;
-            text = textToCopy !== null && textToCopy !== void 0 ? textToCopy : typeof value === 'string' ? value : '';
-            _context.next = 4;
-            return navigator.clipboard.writeText(text);
-          case 4:
-            setTooltipText(copiedMessage);
-            setTooltipVariant('success');
-            setOpen(true);
-            onCopy === null || onCopy === void 0 || onCopy();
-            setTimeout(function () {
-              setOpen(false);
-            }, tooltipDuration - 500);
-            setTimeout(function () {
-              setTooltipText('');
-              setTooltipVariant('default');
-            }, tooltipDuration);
-            _context.next = 15;
-            break;
-          case 12:
-            _context.prev = 12;
-            _context.t0 = _context["catch"](0);
-            console.error('Failed to copy', _context.t0);
-          case 15:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee, null, [[0, 12]]);
-    }));
-    return function handleCopy() {
-      return _ref2.apply(this, arguments);
-    };
-  }();
+  var effectiveText = textToCopy !== null && textToCopy !== void 0 ? textToCopy : typeof value === 'string' ? value : '';
+  var _useCopyToClipboard = useCopyToClipboard({
+      copiedMessage: copiedMessage,
+      tooltipDuration: tooltipDuration,
+      onCopy: onCopy
+    }),
+    tooltipText = _useCopyToClipboard.tooltipText,
+    tooltipVariant = _useCopyToClipboard.tooltipVariant,
+    open = _useCopyToClipboard.open,
+    handleCopy = _useCopyToClipboard.handleCopy;
   return /*#__PURE__*/React.createElement("div", _extends({
     "data-slot": "copyable-text",
     className: cn('group inline-flex items-center', className)
   }, props), /*#__PURE__*/React.createElement("span", null, value), /*#__PURE__*/React.createElement(WithTooltip, {
     content: tooltipText,
     variant: tooltipVariant,
-    open: open ? true : undefined
+    open: open || undefined
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    onClick: handleCopy,
+    onClick: function onClick() {
+      return handleCopy(effectiveText);
+    },
+    disabled: !effectiveText,
     className: "text-muted-foreground hover:text-foreground cursor-pointer pl-0.5 opacity-0 transition-opacity group-hover:opacity-100"
   }, /*#__PURE__*/React.createElement(Copy, {
     className: "size-3.5"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scaleflex/ui-tw",
-  "version": "0.0.151",
+  "version": "0.0.152",
   "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.151",
+    "@scaleflex/icons-tw": "^0.0.152",
     "@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

@@ -0,0 +1,10 @@
+/**
+ * Copies text to the clipboard with a fallback for environments where the
+ * Clipboard API is unavailable (iframes without `clipboard-write` permissions,
+ * HTTP contexts, older browsers).
+ *
+ * @returns `true` on success, `false` on failure. Note: the `execCommand`
+ * 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>;

package/utils/copy-to-clipboard.js

@@ -0,0 +1,65 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+/**
+ * Copies text to the clipboard with a fallback for environments where the
+ * Clipboard API is unavailable (iframes without `clipboard-write` permissions,
+ * HTTP contexts, older browsers).
+ *
+ * @returns `true` on success, `false` on failure. Note: the `execCommand`
+ * fallback path may return `true` unreliably in some browsers — do not rely
+ * on it for critical confirmations.
+ */
+export function copyToClipboard(_x) {
+  return _copyToClipboard.apply(this, arguments);
+}
+function _copyToClipboard() {
+  _copyToClipboard = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(text) {
+    var _navigator$clipboard;
+    var 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;
+            break;
+          }
+          _context.prev = 1;
+          _context.next = 4;
+          return navigator.clipboard.writeText(text);
+        case 4:
+          return _context.abrupt("return", true);
+        case 7:
+          _context.prev = 7;
+          _context.t0 = _context["catch"](1);
+        case 9:
+          if (!(typeof document === 'undefined')) {
+            _context.next = 11;
+            break;
+          }
+          return _context.abrupt("return", false);
+        case 11:
+          // 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;
+          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);
+        case 27:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[1, 7], [15, 21, 24, 27]]);
+  }));
+  return _copyToClipboard.apply(this, arguments);
+}

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

@@ -0,0 +1,13 @@
+interface UseCopyToClipboardOptions {
+    copiedMessage?: string;
+    tooltipDuration?: number;
+    initialTooltipText?: string;
+    onCopy?: () => void;
+}
+export declare function useCopyToClipboard({ copiedMessage, tooltipDuration, initialTooltipText, onCopy, }?: UseCopyToClipboardOptions): {
+    tooltipText: string;
+    tooltipVariant: "default" | "success";
+    open: boolean;
+    handleCopy: (text: string) => Promise<void>;
+};
+export {};

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

@@ -0,0 +1,68 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { copyToClipboard } from '@scaleflex/ui-tw/utils/copy-to-clipboard';
+import { useState } from 'react';
+export function useCopyToClipboard() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref$copiedMessage = _ref.copiedMessage,
+    copiedMessage = _ref$copiedMessage === void 0 ? 'Copied!' : _ref$copiedMessage,
+    _ref$tooltipDuration = _ref.tooltipDuration,
+    tooltipDuration = _ref$tooltipDuration === void 0 ? 2000 : _ref$tooltipDuration,
+    _ref$initialTooltipTe = _ref.initialTooltipText,
+    initialTooltipText = _ref$initialTooltipTe === void 0 ? '' : _ref$initialTooltipTe,
+    onCopy = _ref.onCopy;
+  var _useState = useState(initialTooltipText),
+    _useState2 = _slicedToArray(_useState, 2),
+    tooltipText = _useState2[0],
+    setTooltipText = _useState2[1];
+  var _useState3 = useState('default'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    tooltipVariant = _useState4[0],
+    setTooltipVariant = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    open = _useState6[0],
+    setOpen = _useState6[1];
+  var handleCopy = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(text) {
+      var success;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return copyToClipboard(text);
+          case 2:
+            success = _context.sent;
+            if (success) {
+              setTooltipText(copiedMessage);
+              setTooltipVariant('success');
+              setOpen(true);
+              onCopy === null || onCopy === void 0 || onCopy();
+              setTimeout(function () {
+                setOpen(false);
+              }, tooltipDuration - 500);
+              setTimeout(function () {
+                setTooltipText(initialTooltipText);
+                setTooltipVariant('default');
+              }, tooltipDuration);
+            } else {
+              console.error('Failed to copy');
+            }
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleCopy(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  return {
+    tooltipText: tooltipText,
+    tooltipVariant: tooltipVariant,
+    open: open,
+    handleCopy: handleCopy
+  };
+}