Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@launchpad-ui/clipboard

Package Overview
Dependencies
Maintainers
1
Versions
200
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@launchpad-ui/clipboard - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

25

dist/CopyToClipboard.d.ts

@@ -1,2 +0,2 @@

import { Component } from 'react';
/// <reference types="react" />
import './styles.css';

@@ -15,27 +15,6 @@ declare type CopyToClipboardProps = {

};
declare type State = {
isOpen: boolean;
wasCopied: boolean;
};
declare const CopyConfirmation: () => JSX.Element;
declare class CopyToClipboard extends Component<CopyToClipboardProps, State> {
buttonElement?: HTMLButtonElement;
static defaultProps: {
tooltipOptions: {
placement: string;
};
};
state: {
isOpen: boolean;
wasCopied: boolean;
};
render(): JSX.Element;
setButtonRef: (node: HTMLButtonElement) => void;
handleClick: () => Promise<void>;
handleFocus: () => void;
handleBlur: () => void;
handleInteraction: (isOpen: boolean) => void;
}
declare const CopyToClipboard: ({ customCopiedText, text, tooltip, tooltipOptions, popoverTargetClassName, children, ariaLabel, testId, shouldOnlyShowTooltipAfterCopy, onClick, }: CopyToClipboardProps) => JSX.Element;
export { CopyConfirmation, CopyToClipboard };
export type { CopyToClipboardProps };
//# sourceMappingURL=CopyToClipboard.d.ts.map

139

dist/index.es.js

@@ -8,3 +8,3 @@ // ../../scripts/react-shim.js

import { announce } from "@react-aria/live-announcer";
import { Component } from "react";
import { useRef, useState } from "react";
import "./styles.css";

@@ -19,83 +19,60 @@ var CopyConfirmation = () => /* @__PURE__ */ React.createElement("span", {

}, "Copied!"));
var CopyToClipboard = class extends Component {
constructor() {
super(...arguments);
this.state = {
isOpen: false,
wasCopied: false
};
this.setButtonRef = (node) => {
this.buttonElement = node;
};
this.handleClick = async () => {
const { onClick, text } = this.props;
await navigator.clipboard.writeText(text);
this.buttonElement?.focus();
this.setState(() => ({
isOpen: true,
wasCopied: true
}));
announce("Copied!", "polite", 300);
onClick?.();
};
this.handleFocus = () => {
const { shouldOnlyShowTooltipAfterCopy } = this.props;
if (!shouldOnlyShowTooltipAfterCopy) {
this.setState(() => ({
isOpen: true
}));
}
};
this.handleBlur = () => {
this.setState({
isOpen: false,
wasCopied: false
});
};
this.handleInteraction = (isOpen) => {
const { shouldOnlyShowTooltipAfterCopy } = this.props;
this.setState((prevState) => ({
isOpen: shouldOnlyShowTooltipAfterCopy ? false : isOpen,
wasCopied: !isOpen ? isOpen : prevState.wasCopied
}));
};
}
render() {
const {
customCopiedText,
text,
tooltip,
tooltipOptions,
popoverTargetClassName,
children,
ariaLabel,
testId
} = this.props;
const { isOpen, wasCopied } = this.state;
const tooltipText = wasCopied ? customCopiedText || /* @__PURE__ */ React.createElement(CopyConfirmation, null) : tooltip || "Copy to clipboard";
const ariaLabelText = ariaLabel ? ariaLabel : `Copy ${text} to your clipboard.`;
const testIdOrFallback = testId ? testId : "temp-test-id";
return /* @__PURE__ */ React.createElement("span", {
className: "CopyToClipboard",
"data-test-id": testIdOrFallback
}, /* @__PURE__ */ React.createElement("button", {
className: "CopyToClipboard-button",
onBlur: this.handleBlur,
onFocus: this.handleFocus,
onClick: this.handleClick,
ref: this.setButtonRef,
"aria-label": ariaLabelText
}, /* @__PURE__ */ React.createElement(Tooltip, {
...tooltipOptions,
isOpen,
content: tooltipText,
onInteraction: this.handleInteraction,
targetClassName: popoverTargetClassName
}, children)));
}
};
CopyToClipboard.defaultProps = {
tooltipOptions: {
var CopyToClipboard = ({
customCopiedText,
text,
tooltip,
tooltipOptions = {
placement: "bottom"
}
},
popoverTargetClassName,
children,
ariaLabel,
testId,
shouldOnlyShowTooltipAfterCopy,
onClick
}) => {
const [isOpen, setIsOpen] = useState(false);
const [wasCopied, setWasCopied] = useState(false);
const buttonElement = useRef(null);
const tooltipText = wasCopied ? customCopiedText || /* @__PURE__ */ React.createElement(CopyConfirmation, null) : tooltip || "Copy to clipboard";
const ariaLabelText = ariaLabel ? ariaLabel : `Copy ${text} to your clipboard.`;
const testIdOrFallback = testId ? testId : "temp-test-id";
const handleClick = async () => {
await navigator.clipboard.writeText(text);
buttonElement.current?.focus();
setIsOpen(true);
setWasCopied(true);
announce("Copied!", "polite", 300);
onClick?.();
};
const handleFocus = () => {
if (!shouldOnlyShowTooltipAfterCopy) {
setIsOpen(true);
}
};
const handleBlur = () => {
setIsOpen(false);
setWasCopied(false);
};
const handleInteraction = (isOpen2) => {
setIsOpen(shouldOnlyShowTooltipAfterCopy ? false : isOpen2);
setWasCopied((prev) => !isOpen2 ? isOpen2 : prev);
};
return /* @__PURE__ */ React.createElement("span", {
className: "CopyToClipboard",
"data-test-id": testIdOrFallback
}, /* @__PURE__ */ React.createElement("button", {
className: "CopyToClipboard-button",
onBlur: handleBlur,
onFocus: handleFocus,
onClick: handleClick,
ref: buttonElement,
"aria-label": ariaLabelText
}, /* @__PURE__ */ React.createElement(Tooltip, {
...tooltipOptions,
isOpen,
content: tooltipText,
onInteraction: handleInteraction,
targetClassName: popoverTargetClassName
}, children)));
};

@@ -102,0 +79,0 @@ export {

137

dist/index.js

@@ -47,83 +47,60 @@ var __create = Object.create;

}, "Copied!"));
var CopyToClipboard = class extends import_react.Component {
constructor() {
super(...arguments);
this.state = {
isOpen: false,
wasCopied: false
};
this.setButtonRef = (node) => {
this.buttonElement = node;
};
this.handleClick = async () => {
const { onClick, text } = this.props;
await navigator.clipboard.writeText(text);
this.buttonElement?.focus();
this.setState(() => ({
isOpen: true,
wasCopied: true
}));
(0, import_live_announcer.announce)("Copied!", "polite", 300);
onClick?.();
};
this.handleFocus = () => {
const { shouldOnlyShowTooltipAfterCopy } = this.props;
if (!shouldOnlyShowTooltipAfterCopy) {
this.setState(() => ({
isOpen: true
}));
}
};
this.handleBlur = () => {
this.setState({
isOpen: false,
wasCopied: false
});
};
this.handleInteraction = (isOpen) => {
const { shouldOnlyShowTooltipAfterCopy } = this.props;
this.setState((prevState) => ({
isOpen: shouldOnlyShowTooltipAfterCopy ? false : isOpen,
wasCopied: !isOpen ? isOpen : prevState.wasCopied
}));
};
}
render() {
const {
customCopiedText,
text,
tooltip,
tooltipOptions,
popoverTargetClassName,
children,
ariaLabel,
testId
} = this.props;
const { isOpen, wasCopied } = this.state;
const tooltipText = wasCopied ? customCopiedText || /* @__PURE__ */ React.createElement(CopyConfirmation, null) : tooltip || "Copy to clipboard";
const ariaLabelText = ariaLabel ? ariaLabel : `Copy ${text} to your clipboard.`;
const testIdOrFallback = testId ? testId : "temp-test-id";
return /* @__PURE__ */ React.createElement("span", {
className: "CopyToClipboard",
"data-test-id": testIdOrFallback
}, /* @__PURE__ */ React.createElement("button", {
className: "CopyToClipboard-button",
onBlur: this.handleBlur,
onFocus: this.handleFocus,
onClick: this.handleClick,
ref: this.setButtonRef,
"aria-label": ariaLabelText
}, /* @__PURE__ */ React.createElement(import_tooltip.Tooltip, {
...tooltipOptions,
isOpen,
content: tooltipText,
onInteraction: this.handleInteraction,
targetClassName: popoverTargetClassName
}, children)));
}
};
CopyToClipboard.defaultProps = {
tooltipOptions: {
var CopyToClipboard = ({
customCopiedText,
text,
tooltip,
tooltipOptions = {
placement: "bottom"
}
},
popoverTargetClassName,
children,
ariaLabel,
testId,
shouldOnlyShowTooltipAfterCopy,
onClick
}) => {
const [isOpen, setIsOpen] = (0, import_react.useState)(false);
const [wasCopied, setWasCopied] = (0, import_react.useState)(false);
const buttonElement = (0, import_react.useRef)(null);
const tooltipText = wasCopied ? customCopiedText || /* @__PURE__ */ React.createElement(CopyConfirmation, null) : tooltip || "Copy to clipboard";
const ariaLabelText = ariaLabel ? ariaLabel : `Copy ${text} to your clipboard.`;
const testIdOrFallback = testId ? testId : "temp-test-id";
const handleClick = async () => {
await navigator.clipboard.writeText(text);
buttonElement.current?.focus();
setIsOpen(true);
setWasCopied(true);
(0, import_live_announcer.announce)("Copied!", "polite", 300);
onClick?.();
};
const handleFocus = () => {
if (!shouldOnlyShowTooltipAfterCopy) {
setIsOpen(true);
}
};
const handleBlur = () => {
setIsOpen(false);
setWasCopied(false);
};
const handleInteraction = (isOpen2) => {
setIsOpen(shouldOnlyShowTooltipAfterCopy ? false : isOpen2);
setWasCopied((prev) => !isOpen2 ? isOpen2 : prev);
};
return /* @__PURE__ */ React.createElement("span", {
className: "CopyToClipboard",
"data-test-id": testIdOrFallback
}, /* @__PURE__ */ React.createElement("button", {
className: "CopyToClipboard-button",
onBlur: handleBlur,
onFocus: handleFocus,
onClick: handleClick,
ref: buttonElement,
"aria-label": ariaLabelText
}, /* @__PURE__ */ React.createElement(import_tooltip.Tooltip, {
...tooltipOptions,
isOpen,
content: tooltipText,
onInteraction: handleInteraction,
targetClassName: popoverTargetClassName
}, children)));
};

@@ -130,0 +107,0 @@ // Annotate the CommonJS export names for ESM import in node:

8

package.json
{
"name": "@launchpad-ui/clipboard",
"version": "0.1.2",
"version": "0.1.3",
"publishConfig": {

@@ -30,3 +30,3 @@ "access": "public"

"@launchpad-ui/tokens": "~0.1.4",
"@launchpad-ui/tooltip": "~0.1.3",
"@launchpad-ui/tooltip": "~0.1.4",
"@react-aria/live-announcer": "^3.1.0"

@@ -39,4 +39,4 @@ },

"devDependencies": {
"react": "^18.1.0",
"react-dom": "^18.1.0"
"react": "^18.2.0",
"react-dom": "^18.2.0"
},

@@ -43,0 +43,0 @@ "scripts": {

dist/CopyToClipboard.d.ts.map

Sorry, the diff of this file is not supported yet

dist/index.es.js.map

Sorry, the diff of this file is not supported yet

dist/index.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc