@versini/ui-bubble 12.2.0 → 13.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -17
- package/dist/983.js +1 -1
- package/dist/components/Bubble/Bubble.js +1 -1
- package/dist/components/BubbleConstants/BubbleConstants.js +1 -1
- package/dist/components/BubbleCopy/BubbleCopy.d.ts +1 -1
- package/dist/components/BubbleCopy/BubbleCopy.js +2 -3
- package/dist/components/BubbleCopy/BubbleCopyTypes.d.ts +0 -6
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -102,9 +102,7 @@ function App() {
|
|
|
102
102
|
<Bubble
|
|
103
103
|
kind="right"
|
|
104
104
|
action={
|
|
105
|
-
<BubbleCopy mode="dark"
|
|
106
|
-
Copy button with custom theme.
|
|
107
|
-
</BubbleCopy>
|
|
105
|
+
<BubbleCopy mode="dark">Copy button with custom theme.</BubbleCopy>
|
|
108
106
|
}
|
|
109
107
|
>
|
|
110
108
|
Copy button with custom theme.
|
|
@@ -320,12 +318,11 @@ function CustomWidthExample() {
|
|
|
320
318
|
|
|
321
319
|
### BubbleCopy Props
|
|
322
320
|
|
|
323
|
-
| Prop
|
|
324
|
-
|
|
|
325
|
-
| children
|
|
326
|
-
| richText
|
|
327
|
-
| mode
|
|
328
|
-
| focusMode | `"dark" \| "light" \| "system" \| "alt-system"` | `"system"` | The focus mode for the Button |
|
|
321
|
+
| Prop | Type | Default | Description |
|
|
322
|
+
| -------- | ----------------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- |
|
|
323
|
+
| children | `React.ReactNode` | - | The content to copy (string or JSX) |
|
|
324
|
+
| richText | `boolean` | `false` | When true, copies as HTML + plain text. Preserves formatting when pasting into Word, Google Docs, etc |
|
|
325
|
+
| mode | `"dark" \| "light" \| "system" \| "alt-system"` | `"system"` | The mode of the Copy Button |
|
|
329
326
|
|
|
330
327
|
### Footer Types
|
|
331
328
|
|
|
@@ -391,7 +388,7 @@ import { BubbleCopy } from "@versini/ui-bubble/bubble-copy";
|
|
|
391
388
|
</Bubble>
|
|
392
389
|
|
|
393
390
|
// With styling
|
|
394
|
-
<Bubble action={<BubbleCopy mode="dark"
|
|
391
|
+
<Bubble action={<BubbleCopy mode="dark">Content</BubbleCopy>}>
|
|
395
392
|
Content
|
|
396
393
|
</Bubble>
|
|
397
394
|
|
|
@@ -411,10 +408,3 @@ import { BubbleCopy } from "@versini/ui-bubble/bubble-copy";
|
|
|
411
408
|
Content
|
|
412
409
|
</Bubble>
|
|
413
410
|
```
|
|
414
|
-
|
|
415
|
-
### Key Changes
|
|
416
|
-
|
|
417
|
-
1. **New import**: Add `import { BubbleCopy } from "@versini/ui-bubble/bubble-copy"`
|
|
418
|
-
2. **Replace props**: Change `copyToClipboard` to `action={<BubbleCopy>text to copy</BubbleCopy>}`
|
|
419
|
-
3. **Styling props**: Move `copyToClipboardMode` → `mode` and `copyToClipboardFocusMode` → `focusMode` on `BubbleCopy`
|
|
420
|
-
4. **Full flexibility**: The `action` prop now accepts any React node, enabling custom dropdown menus, multiple buttons, or any other UI
|
package/dist/983.js
CHANGED
|
@@ -27,4 +27,4 @@ export type { BubbleCopyProps } from "./BubbleCopyTypes";
|
|
|
27
27
|
* </Bubble>
|
|
28
28
|
* ```
|
|
29
29
|
*/
|
|
30
|
-
export declare const BubbleCopy: ({ children, richText, mode,
|
|
30
|
+
export declare const BubbleCopy: ({ children, richText, mode, }: BubbleCopyProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-bubble
|
|
2
|
+
@versini/ui-bubble v13.0.0
|
|
3
3
|
© 2026 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
|
|
@@ -41,7 +41,7 @@ import { jsxs, Fragment, jsx } from "../../983.js";
|
|
|
41
41
|
* <ul><li>Item 1</li><li>Item 2</li></ul>
|
|
42
42
|
* </Bubble>
|
|
43
43
|
* ```
|
|
44
|
-
*/ const BubbleCopy = ({ children, richText = false, mode = "system"
|
|
44
|
+
*/ const BubbleCopy = ({ children, richText = false, mode = "system" })=>{
|
|
45
45
|
const [copied, setCopied] = useState(false);
|
|
46
46
|
const contentRef = useRef(null);
|
|
47
47
|
/* v8 ignore start - clipboard edge cases */ const handleCopyToClipboard = useCallback(async ()=>{
|
|
@@ -121,7 +121,6 @@ import { jsxs, Fragment, jsx } from "../../983.js";
|
|
|
121
121
|
noBackground: true,
|
|
122
122
|
size: "small",
|
|
123
123
|
mode: mode,
|
|
124
|
-
focusMode: focusMode,
|
|
125
124
|
label: copied ? "Copied to clipboard" : "Copy to clipboard",
|
|
126
125
|
onClick: handleCopyToClipboard,
|
|
127
126
|
disabled: copied,
|
|
@@ -19,10 +19,4 @@ export interface BubbleCopyProps {
|
|
|
19
19
|
* @default "system"
|
|
20
20
|
*/
|
|
21
21
|
mode?: "dark" | "light" | "system" | "alt-system";
|
|
22
|
-
/**
|
|
23
|
-
* The type of focus for the Copy Button. This will change the color
|
|
24
|
-
* of the focus ring around the Button.
|
|
25
|
-
* @default "system"
|
|
26
|
-
*/
|
|
27
|
-
focusMode?: "dark" | "light" | "system" | "alt-system";
|
|
28
22
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@versini/ui-bubble",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "13.0.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Arno Versini",
|
|
6
6
|
"publishConfig": {
|
|
@@ -50,16 +50,16 @@
|
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
52
|
"@testing-library/jest-dom": "6.9.1",
|
|
53
|
-
"@versini/ui-types": "
|
|
53
|
+
"@versini/ui-types": "9.0.0"
|
|
54
54
|
},
|
|
55
55
|
"dependencies": {
|
|
56
|
-
"@versini/ui-button": "
|
|
57
|
-
"@versini/ui-icons": "4.21.
|
|
56
|
+
"@versini/ui-button": "13.0.0",
|
|
57
|
+
"@versini/ui-icons": "4.21.1",
|
|
58
58
|
"clsx": "2.1.1",
|
|
59
59
|
"tailwindcss": "4.2.1"
|
|
60
60
|
},
|
|
61
61
|
"sideEffects": [
|
|
62
62
|
"**/*.css"
|
|
63
63
|
],
|
|
64
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "a295349019d1512796f266bba535de383f12b6ee"
|
|
65
65
|
}
|