@wallarm-org/design-system 1.20.4 → 1.22.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/dist/components/AppShell/story-content/_storySearchModal.js +3 -3
- package/dist/components/CodeSnippet/CodeSnippetCopyButton.d.ts +1 -1
- package/dist/components/CodeSnippet/CodeSnippetCopyButton.js +14 -7
- package/dist/components/CodeSnippet/InlineCodeSnippet.js +7 -25
- package/dist/components/Copyable/Copyable.d.ts +39 -0
- package/dist/components/Copyable/Copyable.js +85 -0
- package/dist/components/Copyable/CopyableContext.d.ts +11 -0
- package/dist/components/Copyable/CopyableContext.js +9 -0
- package/dist/components/Copyable/CopyableIcon.d.ts +9 -0
- package/dist/components/Copyable/CopyableIcon.js +13 -0
- package/dist/components/Copyable/CopyableLabel.d.ts +18 -0
- package/dist/components/Copyable/CopyableLabel.js +24 -0
- package/dist/components/Copyable/index.d.ts +4 -0
- package/dist/components/Copyable/index.js +4 -0
- package/dist/components/SearchInput/SearchInput.d.ts +18 -0
- package/dist/components/SearchInput/SearchInput.js +54 -0
- package/dist/components/SearchInput/index.d.ts +1 -0
- package/dist/components/SearchInput/index.js +1 -0
- package/dist/components/SearchModal/SearchModalInput.js +16 -3
- package/dist/components/SegmentedControl/classes.js +1 -1
- package/dist/components/Select/Select.d.ts +3 -1
- package/dist/components/Select/Select.js +6 -3
- package/dist/components/Select/SelectSearchInput.js +6 -19
- package/dist/components/SettingsHeader/SettingsHeader.d.ts +7 -0
- package/dist/components/SettingsHeader/SettingsHeader.js +16 -0
- package/dist/components/SettingsHeader/SettingsHeaderActions.d.ts +6 -0
- package/dist/components/SettingsHeader/SettingsHeaderActions.js +16 -0
- package/dist/components/SettingsHeader/SettingsHeaderBreadcrumbs.d.ts +6 -0
- package/dist/components/SettingsHeader/SettingsHeaderBreadcrumbs.js +16 -0
- package/dist/components/SettingsHeader/SettingsHeaderDescription.d.ts +5 -0
- package/dist/components/SettingsHeader/SettingsHeaderDescription.js +16 -0
- package/dist/components/SettingsHeader/SettingsHeaderFilters.d.ts +6 -0
- package/dist/components/SettingsHeader/SettingsHeaderFilters.js +16 -0
- package/dist/components/SettingsHeader/SettingsHeaderHeading.d.ts +6 -0
- package/dist/components/SettingsHeader/SettingsHeaderHeading.js +16 -0
- package/dist/components/SettingsHeader/SettingsHeaderTitle.d.ts +5 -0
- package/dist/components/SettingsHeader/SettingsHeaderTitle.js +16 -0
- package/dist/components/SettingsHeader/index.d.ts +7 -0
- package/dist/components/SettingsHeader/index.js +7 -0
- package/dist/components/Table/EditableCell/EditableSelectCell.d.ts +1 -1
- package/dist/components/Table/EditableCell/EditableSelectCell.js +12 -1
- package/dist/components/Table/StickyGroupParent.js +7 -8
- package/dist/components/Table/TableBody/TableBodyCell.d.ts +3 -1
- package/dist/components/Table/TableBody/TableBodyCell.js +6 -2
- package/dist/components/Table/TableBody/TableBodyRowDndContext.d.ts +5 -0
- package/dist/components/Table/TableBody/TableBodyRowDndContext.js +65 -21
- package/dist/components/Table/TableBody/TableRowOverlay.js +2 -1
- package/dist/components/Table/TableColGroup.js +20 -17
- package/dist/components/Table/TableContext/TableProvider.js +3 -1
- package/dist/components/Table/TableContext/types.d.ts +1 -0
- package/dist/components/Table/TableHead.js +13 -8
- package/dist/components/Table/TableLoadingState.js +19 -13
- package/dist/components/Table/TableMasterCellActions.js +2 -5
- package/dist/components/Table/TableRow.js +42 -12
- package/dist/components/Table/TableRowExpanded.js +3 -2
- package/dist/components/Table/classes.d.ts +5 -0
- package/dist/components/Table/classes.js +2 -1
- package/dist/components/Table/hooks/useStickyGroupParent.js +3 -1
- package/dist/components/Table/lib/constants.d.ts +1 -1
- package/dist/components/Table/lib/constants.js +1 -1
- package/dist/components/Table/lib/createDragHandleColumn.js +3 -3
- package/dist/components/Table/lib/useRowDnd.js +3 -13
- package/dist/components/Table/types.d.ts +8 -0
- package/dist/hooks/index.d.ts +0 -1
- package/dist/hooks/index.js +0 -1
- package/dist/hooks/useCopyToClipboard.d.ts +9 -10
- package/dist/hooks/useCopyToClipboard.js +6 -18
- package/dist/index.d.ts +3 -1
- package/dist/index.js +3 -1
- package/dist/metadata/components.json +12502 -9142
- package/package.json +1 -1
- package/dist/components/CopyButton/CopyButton.d.ts +0 -16
- package/dist/components/CopyButton/CopyButton.js +0 -63
- package/dist/components/CopyButton/index.d.ts +0 -1
- package/dist/components/CopyButton/index.js +0 -1
- package/dist/hooks/useCopyTooltip.d.ts +0 -12
- package/dist/hooks/useCopyTooltip.js +0 -63
package/package.json
CHANGED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { type FC, type Ref } from 'react';
|
|
2
|
-
import { type ButtonProps } from '../Button';
|
|
3
|
-
export interface CopyButtonProps extends Omit<ButtonProps, 'children'> {
|
|
4
|
-
/** Text to copy to clipboard */
|
|
5
|
-
text: string;
|
|
6
|
-
/** Label shown next to the icon (omit for icon-only) */
|
|
7
|
-
label?: string;
|
|
8
|
-
/** Label shown in the copied state (defaults to "Copied") */
|
|
9
|
-
copiedLabel?: string;
|
|
10
|
-
/** Tooltip text in idle state (defaults to "Click to copy") */
|
|
11
|
-
tooltipText?: string;
|
|
12
|
-
/** Tooltip text after copy (defaults to "Copied") */
|
|
13
|
-
copiedTooltipText?: string;
|
|
14
|
-
ref?: Ref<HTMLButtonElement>;
|
|
15
|
-
}
|
|
16
|
-
export declare const CopyButton: FC<CopyButtonProps>;
|
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useLayoutEffect, useRef, useState } from "react";
|
|
3
|
-
import { useCopyTooltip } from "../../hooks/index.js";
|
|
4
|
-
import { Check, Copy } from "../../icons/index.js";
|
|
5
|
-
import { cn } from "../../utils/cn.js";
|
|
6
|
-
import { mergeRefs } from "../../utils/mergeRefs.js";
|
|
7
|
-
import { Button } from "../Button/index.js";
|
|
8
|
-
import { Tooltip, TooltipContent, TooltipTrigger } from "../Tooltip/index.js";
|
|
9
|
-
const CopyButton = ({ text, label, copiedLabel = 'Copied', tooltipText = 'Click to copy', copiedTooltipText = 'Copied', onClick, variant = 'ghost', color = 'neutral', size, style, className, ref, ...props })=>{
|
|
10
|
-
const { copied, tooltipOpen, onTooltipOpenChange, handleCopy } = useCopyTooltip({
|
|
11
|
-
text
|
|
12
|
-
});
|
|
13
|
-
const innerRef = useRef(null);
|
|
14
|
-
const [minWidth, setMinWidth] = useState(void 0);
|
|
15
|
-
useLayoutEffect(()=>{
|
|
16
|
-
if (label && !copied && innerRef.current) setMinWidth(innerRef.current.offsetWidth);
|
|
17
|
-
}, [
|
|
18
|
-
label,
|
|
19
|
-
copied
|
|
20
|
-
]);
|
|
21
|
-
const handleClick = (event)=>{
|
|
22
|
-
handleCopy();
|
|
23
|
-
onClick?.(event);
|
|
24
|
-
};
|
|
25
|
-
const resolvedSize = size ?? (label ? 'medium' : 'small');
|
|
26
|
-
const icon = copied ? /*#__PURE__*/ jsx(Check, {}) : /*#__PURE__*/ jsx(Copy, {});
|
|
27
|
-
return /*#__PURE__*/ jsxs(Tooltip, {
|
|
28
|
-
open: tooltipOpen,
|
|
29
|
-
onOpenChange: onTooltipOpenChange,
|
|
30
|
-
closeOnPointerDown: false,
|
|
31
|
-
children: [
|
|
32
|
-
/*#__PURE__*/ jsx(TooltipTrigger, {
|
|
33
|
-
asChild: true,
|
|
34
|
-
children: /*#__PURE__*/ jsxs(Button, {
|
|
35
|
-
ref: mergeRefs(innerRef, ref),
|
|
36
|
-
variant: variant,
|
|
37
|
-
color: color,
|
|
38
|
-
size: resolvedSize,
|
|
39
|
-
"aria-label": label ?? 'Copy',
|
|
40
|
-
className: cn(label ? 'justify-start px-12' : 'px-3', className),
|
|
41
|
-
"data-slot": "copy-button",
|
|
42
|
-
...props,
|
|
43
|
-
onClick: handleClick,
|
|
44
|
-
style: label && minWidth ? {
|
|
45
|
-
minWidth,
|
|
46
|
-
...style
|
|
47
|
-
} : style,
|
|
48
|
-
children: [
|
|
49
|
-
icon,
|
|
50
|
-
label && /*#__PURE__*/ jsx("span", {
|
|
51
|
-
children: copied ? copiedLabel : label
|
|
52
|
-
})
|
|
53
|
-
]
|
|
54
|
-
})
|
|
55
|
-
}),
|
|
56
|
-
/*#__PURE__*/ jsx(TooltipContent, {
|
|
57
|
-
children: copied ? copiedTooltipText : tooltipText
|
|
58
|
-
})
|
|
59
|
-
]
|
|
60
|
-
});
|
|
61
|
-
};
|
|
62
|
-
CopyButton.displayName = 'CopyButton';
|
|
63
|
-
export { CopyButton };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { CopyButton, type CopyButtonProps } from './CopyButton';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { CopyButton } from "./CopyButton.js";
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
interface UseCopyTooltipOptions {
|
|
2
|
-
text: string;
|
|
3
|
-
enabled?: boolean;
|
|
4
|
-
}
|
|
5
|
-
interface UseCopyTooltipReturn {
|
|
6
|
-
copied: boolean;
|
|
7
|
-
tooltipOpen: boolean;
|
|
8
|
-
onTooltipOpenChange: (open: boolean) => void;
|
|
9
|
-
handleCopy: () => void;
|
|
10
|
-
}
|
|
11
|
-
export declare function useCopyTooltip({ text, enabled, }: UseCopyTooltipOptions): UseCopyTooltipReturn;
|
|
12
|
-
export {};
|
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
import { useCallback, useEffect, useRef, useState } from "react";
|
|
2
|
-
import { copyText } from "../utils/copyText.js";
|
|
3
|
-
function useCopyTooltip({ text, enabled = true }) {
|
|
4
|
-
const [hovering, setHovering] = useState(false);
|
|
5
|
-
const [copied, setCopied] = useState(false);
|
|
6
|
-
const [keepOpen, setKeepOpen] = useState(false);
|
|
7
|
-
const timerRef = useRef(void 0);
|
|
8
|
-
const tooltipOpen = hovering || keepOpen;
|
|
9
|
-
const clearTimer = useCallback(()=>{
|
|
10
|
-
clearTimeout(timerRef.current);
|
|
11
|
-
}, []);
|
|
12
|
-
const onTooltipOpenChange = useCallback((open)=>{
|
|
13
|
-
setHovering(open);
|
|
14
|
-
if (open && copied) setCopied(false);
|
|
15
|
-
}, [
|
|
16
|
-
copied
|
|
17
|
-
]);
|
|
18
|
-
const handleCopy = useCallback(()=>{
|
|
19
|
-
if (!enabled) return;
|
|
20
|
-
copyText(text);
|
|
21
|
-
setCopied(true);
|
|
22
|
-
setKeepOpen(true);
|
|
23
|
-
clearTimer();
|
|
24
|
-
timerRef.current = setTimeout(()=>{
|
|
25
|
-
setKeepOpen(false);
|
|
26
|
-
setCopied(false);
|
|
27
|
-
}, 2000);
|
|
28
|
-
}, [
|
|
29
|
-
enabled,
|
|
30
|
-
text,
|
|
31
|
-
clearTimer
|
|
32
|
-
]);
|
|
33
|
-
useEffect(()=>{
|
|
34
|
-
if (!keepOpen) return;
|
|
35
|
-
let listenerAdded = false;
|
|
36
|
-
const dismiss = ()=>{
|
|
37
|
-
setKeepOpen(false);
|
|
38
|
-
setCopied(false);
|
|
39
|
-
clearTimer();
|
|
40
|
-
};
|
|
41
|
-
const frame = requestAnimationFrame(()=>{
|
|
42
|
-
document.addEventListener('pointerdown', dismiss);
|
|
43
|
-
listenerAdded = true;
|
|
44
|
-
});
|
|
45
|
-
return ()=>{
|
|
46
|
-
cancelAnimationFrame(frame);
|
|
47
|
-
if (listenerAdded) document.removeEventListener('pointerdown', dismiss);
|
|
48
|
-
};
|
|
49
|
-
}, [
|
|
50
|
-
keepOpen,
|
|
51
|
-
clearTimer
|
|
52
|
-
]);
|
|
53
|
-
useEffect(()=>clearTimer, [
|
|
54
|
-
clearTimer
|
|
55
|
-
]);
|
|
56
|
-
return {
|
|
57
|
-
copied,
|
|
58
|
-
tooltipOpen,
|
|
59
|
-
onTooltipOpenChange,
|
|
60
|
-
handleCopy
|
|
61
|
-
};
|
|
62
|
-
}
|
|
63
|
-
export { useCopyTooltip };
|