@bitrise/bitkit-v2 0.3.456 → 0.3.457
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.
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
|
|
2
2
|
interface InlineProps extends Omit<HTMLChakraProps<'code'>, 'children' | 'size'> {
|
|
3
3
|
children: string;
|
|
4
|
+
copyAriaLabel?: never;
|
|
4
5
|
copyLabel?: never;
|
|
5
6
|
interactive?: boolean;
|
|
6
7
|
/** Called each time the snippet is copied by clicking it or pressing Enter/Space. */
|
|
@@ -14,8 +15,14 @@ interface InlineProps extends Omit<HTMLChakraProps<'code'>, 'children' | 'size'>
|
|
|
14
15
|
interface BlockProps extends Omit<HTMLChakraProps<'div'>, 'children' | 'size'> {
|
|
15
16
|
children: string;
|
|
16
17
|
/**
|
|
17
|
-
*
|
|
18
|
-
*
|
|
18
|
+
* Accessible name of the copy button, when it needs more context than the tooltip shows (e.g.
|
|
19
|
+
* tooltip "Copy command", name "Copy command for creating a project"). Start it with the
|
|
20
|
+
* `copyLabel` text, so the visible label stays part of the name. Defaults to `copyLabel`.
|
|
21
|
+
*/
|
|
22
|
+
copyAriaLabel?: string;
|
|
23
|
+
/**
|
|
24
|
+
* Label of the copy button: its tooltip, and its accessible name unless `copyAriaLabel` is set.
|
|
25
|
+
* Set it when a page has more than one snippet, so the buttons can be told apart.
|
|
19
26
|
* @default 'Copy to clipboard'
|
|
20
27
|
*/
|
|
21
28
|
copyLabel?: string;
|
|
@@ -38,14 +38,14 @@ var BitkitCodeSnippet = forwardRef((props, ref) => {
|
|
|
38
38
|
}
|
|
39
39
|
};
|
|
40
40
|
const copyButton = /* @__PURE__ */ jsx(chakra.button, {
|
|
41
|
-
"aria-label": copyLabel,
|
|
41
|
+
"aria-label": props.copyAriaLabel ?? copyLabel,
|
|
42
42
|
css: styles.copyButton,
|
|
43
43
|
onClick: copy,
|
|
44
44
|
type: "button",
|
|
45
45
|
children: copied ? /* @__PURE__ */ jsx(IconCheck, { size: "16" }) : /* @__PURE__ */ jsx(IconCopy, { size: "16" })
|
|
46
46
|
});
|
|
47
47
|
if (props.variant === "inline") {
|
|
48
|
-
const { children, copyLabel: _copyLabel, interactive, onCopied: _onCopied, size: _size, textToCopy: _textToCopy, variant: _variant, ...rest } = props;
|
|
48
|
+
const { children, copyAriaLabel: _copyAriaLabel, copyLabel: _copyLabel, interactive, onCopied: _onCopied, size: _size, textToCopy: _textToCopy, variant: _variant, ...rest } = props;
|
|
49
49
|
if (!interactive) return /* @__PURE__ */ jsx(chakra.code, {
|
|
50
50
|
ref,
|
|
51
51
|
...rest,
|
|
@@ -72,7 +72,7 @@ var BitkitCodeSnippet = forwardRef((props, ref) => {
|
|
|
72
72
|
})
|
|
73
73
|
});
|
|
74
74
|
}
|
|
75
|
-
const { children, copyLabel: _copyLabel, onCopied: _onCopied, size: _size, startingHeight, textToCopy: _textToCopy, variant, wrapLines: _wrapLines, ...rest } = props;
|
|
75
|
+
const { children, copyAriaLabel: _copyAriaLabel, copyLabel: _copyLabel, onCopied: _onCopied, size: _size, startingHeight, textToCopy: _textToCopy, variant, wrapLines: _wrapLines, ...rest } = props;
|
|
76
76
|
if (variant === "single") return /* @__PURE__ */ jsxs(chakra.div, {
|
|
77
77
|
ref,
|
|
78
78
|
...rest,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitCodeSnippet.js","names":[],"sources":["../../../lib/components/BitkitCodeSnippet/BitkitCodeSnippet.tsx"],"sourcesContent":["import { useClipboard } from '@ark-ui/react/clipboard';\nimport { chakra, type HTMLChakraProps, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type KeyboardEvent, useState } from 'react';\n\nimport { IconCheck, IconCopy } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\nconst COPY_TOOLTIP = 'Copy to clipboard';\n\ninterface InlineProps extends Omit<HTMLChakraProps<'code'>, 'children' | 'size'> {\n children: string;\n // The code itself is the control's accessible name here, so there is no separate copy label.\n copyLabel?: never;\n interactive?: boolean;\n /** Called each time the snippet is copied by clicking it or pressing Enter/Space. */\n onCopied?: () => void;\n size?: 'md' | 'lg';\n startingHeight?: never;\n textToCopy?: string;\n variant: 'inline';\n wrapLines?: never;\n}\n\ninterface BlockProps extends Omit<HTMLChakraProps<'div'>, 'children' | 'size'> {\n children: string;\n /**\n * Label of the copy button: its tooltip and its accessible name
|
|
1
|
+
{"version":3,"file":"BitkitCodeSnippet.js","names":[],"sources":["../../../lib/components/BitkitCodeSnippet/BitkitCodeSnippet.tsx"],"sourcesContent":["import { useClipboard } from '@ark-ui/react/clipboard';\nimport { chakra, type HTMLChakraProps, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type KeyboardEvent, useState } from 'react';\n\nimport { IconCheck, IconCopy } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\nconst COPY_TOOLTIP = 'Copy to clipboard';\n\ninterface InlineProps extends Omit<HTMLChakraProps<'code'>, 'children' | 'size'> {\n children: string;\n // The code itself is the control's accessible name here, so there is no separate copy label.\n copyAriaLabel?: never;\n copyLabel?: never;\n interactive?: boolean;\n /** Called each time the snippet is copied by clicking it or pressing Enter/Space. */\n onCopied?: () => void;\n size?: 'md' | 'lg';\n startingHeight?: never;\n textToCopy?: string;\n variant: 'inline';\n wrapLines?: never;\n}\n\ninterface BlockProps extends Omit<HTMLChakraProps<'div'>, 'children' | 'size'> {\n children: string;\n /**\n * Accessible name of the copy button, when it needs more context than the tooltip shows (e.g.\n * tooltip \"Copy command\", name \"Copy command for creating a project\"). Start it with the\n * `copyLabel` text, so the visible label stays part of the name. Defaults to `copyLabel`.\n */\n copyAriaLabel?: string;\n /**\n * Label of the copy button: its tooltip, and its accessible name unless `copyAriaLabel` is set.\n * Set it when a page has more than one snippet, so the buttons can be told apart.\n * @default 'Copy to clipboard'\n */\n copyLabel?: string;\n interactive?: never;\n /** Called each time the snippet is copied with its copy button. */\n onCopied?: () => void;\n size?: 'md' | 'lg';\n textToCopy?: string;\n}\n\n// `single` is one line behind a horizontal scrollbar, so neither the show-more height nor the\n// wrapping switch means anything there -- `never` says so at the call site instead of ignoring them.\ninterface SingleProps extends BlockProps {\n startingHeight?: never;\n variant: 'single';\n wrapLines?: never;\n}\n\ninterface MultiProps extends BlockProps {\n startingHeight?: number;\n variant: 'multi';\n /**\n * Long lines wrap by default; `false` keeps them whole behind a horizontal scrollbar, which is\n * what indented code (YAML, shell) needs to stay readable.\n */\n wrapLines?: boolean;\n}\n\nexport type BitkitCodeSnippetProps = InlineProps | MultiProps | SingleProps;\n\nconst BitkitCodeSnippet = forwardRef<HTMLElement, BitkitCodeSnippetProps>((props, ref) => {\n const hasShowMore = props.startingHeight !== undefined;\n const [isExpanded, setIsExpanded] = useState(false);\n\n const { copied, copy: copyToClipboard } = useClipboard({ timeout: 2000, value: props.textToCopy ?? props.children });\n\n const copyLabel = props.copyLabel ?? COPY_TOOLTIP;\n\n const copy = () => {\n copyToClipboard();\n props.onCopied?.();\n };\n\n const recipe = useSlotRecipe({ key: 'codeSnippet' });\n const styles = recipe({\n hasShowMore,\n interactive: props.interactive,\n isExpanded,\n size: props.size ?? 'lg',\n variant: props.variant,\n wrapLines: props.wrapLines,\n });\n\n const handleToggleExpand = () => {\n setIsExpanded((prev) => !prev);\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLElement>) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n copy();\n }\n };\n\n const copyButton = (\n <chakra.button aria-label={props.copyAriaLabel ?? copyLabel} css={styles.copyButton} onClick={copy} type=\"button\">\n {copied ? <IconCheck size=\"16\" /> : <IconCopy size=\"16\" />}\n </chakra.button>\n );\n\n if (props.variant === 'inline') {\n const {\n children,\n copyAriaLabel: _copyAriaLabel,\n copyLabel: _copyLabel,\n interactive,\n onCopied: _onCopied,\n size: _size,\n textToCopy: _textToCopy,\n variant: _variant,\n ...rest\n } = props;\n\n if (!interactive) {\n return (\n <chakra.code ref={ref} {...rest} css={[styles.root, rest.css]}>\n {children}\n </chakra.code>\n );\n }\n\n return (\n <BitkitTooltip text={COPY_TOOLTIP}>\n <chakra.code\n ref={ref}\n {...rest}\n css={[styles.root, rest.css]}\n onClick={(e) => {\n rest.onClick?.(e);\n if (!e.defaultPrevented) copy();\n }}\n onKeyDown={(e) => {\n rest.onKeyDown?.(e);\n if (!e.defaultPrevented) handleKeyDown(e);\n }}\n role=\"button\"\n tabIndex={0}\n >\n {children}\n </chakra.code>\n </BitkitTooltip>\n );\n }\n\n const {\n children,\n copyAriaLabel: _copyAriaLabel,\n copyLabel: _copyLabel,\n onCopied: _onCopied,\n size: _size,\n startingHeight,\n textToCopy: _textToCopy,\n variant,\n wrapLines: _wrapLines,\n ...rest\n } = props;\n\n if (variant === 'single') {\n return (\n <chakra.div ref={ref} {...rest} css={[styles.root, rest.css]}>\n <chakra.code css={styles.content} tabIndex={-1}>\n {children}\n </chakra.code>\n <BitkitTooltip text={copyLabel}>{copyButton}</BitkitTooltip>\n </chakra.div>\n );\n }\n\n const contentMaxHeight = hasShowMore && !isExpanded ? startingHeight : undefined;\n\n return (\n <chakra.div ref={ref} {...rest} css={[styles.root, rest.css]}>\n <chakra.code css={styles.content} maxHeight={contentMaxHeight} tabIndex={-1}>\n {children}\n </chakra.code>\n <chakra.div css={styles.copyButtonWrapper}>\n <BitkitTooltip text={copyLabel}>{copyButton}</BitkitTooltip>\n </chakra.div>\n {hasShowMore && (\n <chakra.div css={styles.showMoreContainer}>\n {!isExpanded && <chakra.div css={styles.showMoreGradient} />}\n <chakra.button onClick={handleToggleExpand} css={styles.showMoreButton}>\n {isExpanded ? 'Show less' : 'Show more'}\n <AssetSelectChevron data-state={isExpanded ? 'open' : 'closed'} height=\"16\" width=\"16\" />\n </chakra.button>\n </chakra.div>\n )}\n </chakra.div>\n );\n});\n\nBitkitCodeSnippet.displayName = 'BitkitCodeSnippet';\n\nexport default BitkitCodeSnippet;\n"],"mappings":"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"}
|