Skip to content

chore(components): remove copy to clipboard utility method REL-10629 #1815

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Nov 12, 2025
+7 −68
Merged

chore(components): remove copy to clipboard utility method REL-10629 #1815

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7c1a645
chore(components): remove the copy to clipboard utility method
ari-launchdarkly Nov 7, 2025
af22846
chore(components): add the changeset
ari-launchdarkly Nov 7, 2025
81cf8be
chore(components): remove the unused imports
ari-launchdarkly Nov 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/rare-dancers-yell.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@launchpad-ui/components": patch
---

remove the copyToClipboard utility method
70 changes: 2 additions & 68 deletions packages/components/src/utils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,13 @@
import type { Href } from '@react-types/shared';
import type { Context, ReactNode, Ref } from 'react';
import type { Context, Ref } from 'react';
import type { ContextValue, SlotProps } from 'react-aria-components';

import { announce } from '@react-aria/live-announcer';
import { mergeRefs } from '@react-aria/utils';
import { useEffect, useLayoutEffect, useMemo, useState } from 'react';
import { mergeProps } from 'react-aria';
import { useSlottedContext } from 'react-aria-components';
import { useHref as useRouterHref } from 'react-router';

import { toastQueue } from './Toast';

type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';

const useMedia = (media: string) => {
Expand Down Expand Up @@ -94,67 +91,4 @@ const useLPContextProps = <T, U extends SlotProps, E>(
return [mergedProps, mergedRef];
};

const fallbackCopyToClipboard = (text: string) =>
new Promise<boolean>((resolve, reject) => {
// Using setTimeout to ensure we focus the text area after the DOM is updated
// in cases of dropdown menus
setTimeout(() => {
try {
const textArea = document.createElement('textarea');
textArea.value = text;

textArea.style.position = 'fixed';
textArea.style.left = '-999999px';
textArea.style.top = '-999999px';
document.body.appendChild(textArea);

textArea.focus();
textArea.select();

const successful = document.execCommand('copy');
document.body.removeChild(textArea);

if (successful) {
resolve(true);
} else {
reject(new Error('execCommand failed'));
}
} catch (error) {
reject(error);
}
}, 10); // Small delay to ensure focus operations complete
});

// navigator.clipboard is only available in secure contexts (https)
// We need to use document.execCommand for insecure contexts (http)
// for example when testing the Sandbox locally
const copyToClipboard = async (
text: string,
toastMessage?: string | ReactNode,
errorMessage?: string | ReactNode,
) => {
const MAX_WIDTH = 80;

try {
if ('clipboard' in navigator) {
await navigator.clipboard.writeText(text);
} else {
await fallbackCopyToClipboard(text);
}

toastQueue.add({
title:
toastMessage ??
`'${text.length > MAX_WIDTH ? `${text.slice(0, MAX_WIDTH)}...` : text}' copied to clipboard.`,
status: 'success',
});
announce('Copied!', 'polite', 300);
return true;
} catch {
announce('Failed to copy', 'polite', 300);
toastQueue.add({ title: errorMessage ?? 'Unable to copy', status: 'error' });
return false;
}
};

export { copyToClipboard, useHref, useImageLoadingStatus, useLPContextProps, useMedia };
export { useHref, useImageLoadingStatus, useLPContextProps, useMedia };
Loading