@cloudscape-design/code-view 3.0.55 → 3.0.57
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/code-view/interfaces.d.ts +13 -1
- package/code-view/interfaces.js.map +1 -1
- package/code-view/internal.d.ts +1 -1
- package/code-view/internal.js +4 -3
- package/code-view/internal.js.map +1 -1
- package/code-view/styles.css.js +12 -11
- package/code-view/styles.scoped.css +19 -13
- package/code-view/styles.selectors.js +12 -11
- package/internal/api-docs/components/code-view.js +22 -0
- package/internal/base-component/use-base-component.js +10 -2
- package/internal/base-component/use-base-component.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/manifest.json +1 -1
- package/package.json +1 -1
|
@@ -31,7 +31,19 @@ export interface CodeViewProps {
|
|
|
31
31
|
actions?: React.ReactNode;
|
|
32
32
|
/**
|
|
33
33
|
* A function to perform custom syntax highlighting.
|
|
34
|
-
*
|
|
35
34
|
*/
|
|
36
35
|
highlight?: (code: string) => React.ReactNode;
|
|
36
|
+
/**
|
|
37
|
+
* An object containing all the necessary localized strings required by the component. The object should contain:
|
|
38
|
+
*
|
|
39
|
+
* * `lineNumberLabel` - Label for the column that displays line numbers (when line numbers are visible)
|
|
40
|
+
* * `codeLabel` - Label for the column that displays the code content (when line numbers are visible)
|
|
41
|
+
*/
|
|
42
|
+
i18nStrings?: CodeViewProps.I18nStrings;
|
|
43
|
+
}
|
|
44
|
+
export declare namespace CodeViewProps {
|
|
45
|
+
interface I18nStrings {
|
|
46
|
+
lineNumberLabel?: string;
|
|
47
|
+
codeLabel?: string;
|
|
48
|
+
}
|
|
37
49
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/code-view/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport interface CodeViewProps {\n /**\n * Adds an `aria-label` to the component. Use this label when there is not enough context around the code snippet to describe its purpose or content.\n */\n ariaLabel?: string;\n\n /**\n * Adds `aria-labelledby` to the component. Use this property to reference the ID of an existing element that provides a descriptive label for the code snippet.\n */\n ariaLabelledby?: string;\n\n /**\n * The code content to be displayed.\n */\n content: string;\n\n /**\n * Controls the display of line numbers.\n *\n * Defaults to `false`.\n */\n lineNumbers?: boolean;\n\n /**\n * Controls whether line-wrapping is enabled when content would overflow the component.\n *\n * Defaults to `false`.\n */\n wrapLines?: boolean;\n\n /**\n * An optional slot to display a button to enable users to perform actions, such as copy or download the code snippet.\n *\n */\n actions?: React.ReactNode;\n\n /**\n * A function to perform custom syntax highlighting.\n
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/code-view/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport interface CodeViewProps {\n /**\n * Adds an `aria-label` to the component. Use this label when there is not enough context around the code snippet to describe its purpose or content.\n */\n ariaLabel?: string;\n\n /**\n * Adds `aria-labelledby` to the component. Use this property to reference the ID of an existing element that provides a descriptive label for the code snippet.\n */\n ariaLabelledby?: string;\n\n /**\n * The code content to be displayed.\n */\n content: string;\n\n /**\n * Controls the display of line numbers.\n *\n * Defaults to `false`.\n */\n lineNumbers?: boolean;\n\n /**\n * Controls whether line-wrapping is enabled when content would overflow the component.\n *\n * Defaults to `false`.\n */\n wrapLines?: boolean;\n\n /**\n * An optional slot to display a button to enable users to perform actions, such as copy or download the code snippet.\n *\n */\n actions?: React.ReactNode;\n\n /**\n * A function to perform custom syntax highlighting.\n */\n highlight?: (code: string) => React.ReactNode;\n\n /**\n * An object containing all the necessary localized strings required by the component. The object should contain:\n *\n * * `lineNumberLabel` - Label for the column that displays line numbers (when line numbers are visible)\n * * `codeLabel` - Label for the column that displays the code content (when line numbers are visible)\n */\n i18nStrings?: CodeViewProps.I18nStrings;\n}\n\nexport namespace CodeViewProps {\n export interface I18nStrings {\n lineNumberLabel?: string;\n codeLabel?: string;\n }\n}\n"]}
|
package/code-view/internal.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { InternalBaseComponentProps } from "../internal/base-component/use-base-component";
|
|
2
2
|
import { CodeViewProps } from "./interfaces";
|
|
3
3
|
type InternalCodeViewProps = CodeViewProps & InternalBaseComponentProps;
|
|
4
|
-
export declare function InternalCodeView({ content, actions, lineNumbers, wrapLines, highlight, ariaLabel, ariaLabelledby, __internalRootRef, ...props }: InternalCodeViewProps): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
export declare function InternalCodeView({ content, actions, lineNumbers, wrapLines, highlight, ariaLabel, ariaLabelledby, i18nStrings, __internalRootRef, ...props }: InternalCodeViewProps): import("react/jsx-runtime").JSX.Element;
|
|
5
5
|
export {};
|
package/code-view/internal.js
CHANGED
|
@@ -14,18 +14,19 @@ const textHighlight = (code) => {
|
|
|
14
14
|
const lines = code.split("\n");
|
|
15
15
|
return (_jsx("span", { children: lines.map((line, lineIndex) => (_jsxs("span", { children: [line, "\n"] }, lineIndex))) }));
|
|
16
16
|
};
|
|
17
|
-
export function InternalCodeView({ content, actions, lineNumbers, wrapLines, highlight, ariaLabel, ariaLabelledby, __internalRootRef = null, ...props }) {
|
|
17
|
+
export function InternalCodeView({ content, actions, lineNumbers, wrapLines, highlight, ariaLabel, ariaLabelledby, i18nStrings, __internalRootRef = null, ...props }) {
|
|
18
18
|
const baseProps = getBaseProps(props);
|
|
19
19
|
const containerRef = useRef(null);
|
|
20
20
|
const darkMode = useCurrentMode(containerRef) === "dark";
|
|
21
21
|
const regionProps = ariaLabel || ariaLabelledby ? { role: "region" } : {};
|
|
22
|
+
const accessibleLineNumbers = lineNumbers && (i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.lineNumberLabel) && (i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.codeLabel);
|
|
22
23
|
// Create tokenized React nodes of the content.
|
|
23
24
|
const code = highlight ? highlight(content) : textHighlight(content);
|
|
24
25
|
// Create elements from the nodes.
|
|
25
26
|
const codeElementWrapper = createElement(Fragment, null, code);
|
|
26
27
|
const codeElement = Children.only(codeElementWrapper.props.children);
|
|
27
|
-
return (_jsxs("div", { className: clsx(darkMode ? ACE_CLASSES.dark : ACE_CLASSES.light, styles.root), ...regionProps, ...baseProps, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, dir: "ltr", ref: __internalRootRef, children: [_jsx("div", { className: styles["scroll-container"], ref: containerRef, children: _jsxs("table", { role: "presentation", className: clsx(styles["code-table"], actions && styles["code-table-with-actions"], wrapLines && styles["code-table-with-line-wrapping"]), children: [_jsxs("colgroup", { children: [_jsx("col", { style: { width: 1 } /* shrink to fit content */ }), _jsx("col", { style: { width: "auto" } })] }), _jsx("tbody", { children: Children.map(codeElement.props.children, (child, index) => {
|
|
28
|
-
return (_jsxs("tr", { children: [lineNumbers && (_jsx("td", { className: clsx(styles["line-number"], styles.unselectable), "aria-hidden":
|
|
28
|
+
return (_jsxs("div", { className: clsx(darkMode ? ACE_CLASSES.dark : ACE_CLASSES.light, styles.root), ...regionProps, ...baseProps, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, dir: "ltr", ref: __internalRootRef, children: [_jsx("div", { className: styles["scroll-container"], ref: containerRef, children: _jsxs("table", { role: !accessibleLineNumbers ? "presentation" : undefined, className: clsx(styles["code-table"], actions && styles["code-table-with-actions"], wrapLines && styles["code-table-with-line-wrapping"]), children: [_jsxs("colgroup", { children: [_jsx("col", { style: { width: 1 } /* shrink to fit content */ }), _jsx("col", { style: { width: "auto" } })] }), accessibleLineNumbers && (_jsx("thead", { className: styles["screenreader-only"], children: _jsxs("tr", { children: [lineNumbers && _jsx("th", { children: i18nStrings.lineNumberLabel }), _jsx("th", { children: i18nStrings.codeLabel })] }) })), _jsx("tbody", { children: Children.map(codeElement.props.children, (child, index) => {
|
|
29
|
+
return (_jsxs("tr", { children: [lineNumbers && (_jsx("td", { className: clsx(styles["line-number"], styles.unselectable), "aria-hidden": !accessibleLineNumbers, children: _jsx(Box, { variant: "code", color: "text-status-inactive", fontSize: "body-m", children: index + 1 }) })), _jsx("td", { className: styles["code-line"], children: _jsx(Box, { variant: "code", fontSize: "body-m", children: _jsx("span", { className: clsx(codeElement.props.className, wrapLines ? styles["code-line-wrap"] : styles["code-line-nowrap"]), children: child }) }) })] }, index));
|
|
29
30
|
}) })] }) }), actions && _jsx("div", { className: styles.actions, children: actions })] }));
|
|
30
31
|
}
|
|
31
32
|
//# sourceMappingURL=internal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/code-view/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,EAAgB,MAAM,EAAE,MAAM,OAAO,CAAC;AAChF,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,cAAc,EAAE,MAAM,+CAA+C,CAAC;AAC/E,OAAO,GAAG,MAAM,mCAAmC,CAAC;AAEpD,OAAO,EAAE,YAAY,EAA8B,MAAM,+CAA+C,CAAC;AAGzG,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,WAAW,GAAG,EAAE,KAAK,EAAE,kBAAkB,EAAE,IAAI,EAAE,uBAAuB,EAAE,CAAC;AAIjF,sEAAsE;AACtE,yDAAyD;AACzD,MAAM,aAAa,GAAG,CAAC,IAAY,EAAE,EAAE;IACrC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAC/B,OAAO,CACL,yBACG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,CAC9B,2BACG,IAAI,EACJ,IAAI,KAFI,SAAS,CAGb,CACR,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,UAAU,gBAAgB,CAAC,EAC/B,OAAO,EACP,OAAO,EACP,WAAW,EACX,SAAS,EACT,SAAS,EACT,SAAS,EACT,cAAc,EACd,iBAAiB,GAAG,IAAI,EACxB,GAAG,KAAK,EACc;IACtB,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACtC,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,QAAQ,GAAG,cAAc,CAAC,YAAY,CAAC,KAAK,MAAM,CAAC;IAEzD,MAAM,WAAW,GAAG,SAAS,IAAI,cAAc,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/code-view/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { Children, createElement, Fragment, ReactElement, useRef } from \"react\";\nimport clsx from \"clsx\";\n\nimport { useCurrentMode } from \"@cloudscape-design/component-toolkit/internal\";\nimport Box from \"@cloudscape-design/components/box\";\n\nimport { getBaseProps, InternalBaseComponentProps } from \"../internal/base-component/use-base-component\";\nimport { CodeViewProps } from \"./interfaces\";\n\nimport styles from \"./styles.css.js\";\n\nconst ACE_CLASSES = { light: \"ace-cloud_editor\", dark: \"ace-cloud_editor_dark\" };\n\ntype InternalCodeViewProps = CodeViewProps & InternalBaseComponentProps;\n\n// Breaks down the input code for non-highlighted code-view into React\n// Elements similar to how a highlight function would do.\nconst textHighlight = (code: string) => {\n const lines = code.split(\"\\n\");\n return (\n <span>\n {lines.map((line, lineIndex) => (\n <span key={lineIndex}>\n {line}\n {\"\\n\"}\n </span>\n ))}\n </span>\n );\n};\n\nexport function InternalCodeView({\n content,\n actions,\n lineNumbers,\n wrapLines,\n highlight,\n ariaLabel,\n ariaLabelledby,\n i18nStrings,\n __internalRootRef = null,\n ...props\n}: InternalCodeViewProps) {\n const baseProps = getBaseProps(props);\n const containerRef = useRef<HTMLDivElement>(null);\n const darkMode = useCurrentMode(containerRef) === \"dark\";\n\n const regionProps = ariaLabel || ariaLabelledby ? { role: \"region\" } : {};\n const accessibleLineNumbers = lineNumbers && i18nStrings?.lineNumberLabel && i18nStrings?.codeLabel;\n\n // Create tokenized React nodes of the content.\n const code = highlight ? highlight(content) : textHighlight(content);\n // Create elements from the nodes.\n const codeElementWrapper: ReactElement = createElement(Fragment, null, code);\n const codeElement = Children.only(codeElementWrapper.props.children);\n\n return (\n <div\n className={clsx(darkMode ? ACE_CLASSES.dark : ACE_CLASSES.light, styles.root)}\n {...regionProps}\n {...baseProps}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n dir=\"ltr\"\n ref={__internalRootRef}\n >\n <div className={styles[\"scroll-container\"]} ref={containerRef}>\n <table\n role={!accessibleLineNumbers ? \"presentation\" : undefined}\n className={clsx(\n styles[\"code-table\"],\n actions && styles[\"code-table-with-actions\"],\n wrapLines && styles[\"code-table-with-line-wrapping\"],\n )}\n >\n <colgroup>\n <col style={{ width: 1 } /* shrink to fit content */} />\n <col style={{ width: \"auto\" }} />\n </colgroup>\n {accessibleLineNumbers && (\n <thead className={styles[\"screenreader-only\"]}>\n <tr>\n {lineNumbers && <th>{i18nStrings.lineNumberLabel}</th>}\n <th>{i18nStrings.codeLabel}</th>\n </tr>\n </thead>\n )}\n <tbody>\n {Children.map(codeElement.props.children, (child, index) => {\n return (\n <tr key={index}>\n {lineNumbers && (\n <td\n className={clsx(styles[\"line-number\"], styles.unselectable)}\n aria-hidden={!accessibleLineNumbers}\n >\n <Box variant=\"code\" color=\"text-status-inactive\" fontSize=\"body-m\">\n {index + 1}\n </Box>\n </td>\n )}\n <td className={styles[\"code-line\"]}>\n <Box variant=\"code\" fontSize=\"body-m\">\n <span\n className={clsx(\n codeElement.props.className,\n wrapLines ? styles[\"code-line-wrap\"] : styles[\"code-line-nowrap\"],\n )}\n >\n {child}\n </span>\n </Box>\n </td>\n </tr>\n );\n })}\n </tbody>\n </table>\n </div>\n {actions && <div className={styles.actions}>{actions}</div>}\n </div>\n );\n}\n"]}
|
package/code-view/styles.css.js
CHANGED
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"root": "
|
|
5
|
-
"scroll-container": "awsui_scroll-
|
|
6
|
-
"code-table": "awsui_code-
|
|
7
|
-
"code-table-with-actions": "awsui_code-table-with-
|
|
8
|
-
"code-table-with-line-wrapping": "awsui_code-table-with-line-
|
|
9
|
-
"
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
"code-line
|
|
13
|
-
"code-line-
|
|
14
|
-
"
|
|
4
|
+
"root": "awsui_root_1pkji_956a4_5",
|
|
5
|
+
"scroll-container": "awsui_scroll-container_1pkji_956a4_17",
|
|
6
|
+
"code-table": "awsui_code-table_1pkji_956a4_21",
|
|
7
|
+
"code-table-with-actions": "awsui_code-table-with-actions_1pkji_956a4_28",
|
|
8
|
+
"code-table-with-line-wrapping": "awsui_code-table-with-line-wrapping_1pkji_956a4_33",
|
|
9
|
+
"screenreader-only": "awsui_screenreader-only_1pkji_956a4_37",
|
|
10
|
+
"line-number": "awsui_line-number_1pkji_956a4_43",
|
|
11
|
+
"unselectable": "awsui_unselectable_1pkji_956a4_59",
|
|
12
|
+
"code-line": "awsui_code-line_1pkji_956a4_64",
|
|
13
|
+
"code-line-wrap": "awsui_code-line-wrap_1pkji_956a4_68",
|
|
14
|
+
"code-line-nowrap": "awsui_code-line-nowrap_1pkji_956a4_72",
|
|
15
|
+
"actions": "awsui_actions_1pkji_956a4_76"
|
|
15
16
|
};
|
|
16
17
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
3
3
|
SPDX-License-Identifier: Apache-2.0
|
|
4
4
|
*/
|
|
5
|
-
.
|
|
5
|
+
.awsui_root_1pkji_956a4_5:not(#\9) {
|
|
6
6
|
position: relative;
|
|
7
7
|
border-start-start-radius: var(--border-radius-tiles-wm1vgw, 8px);
|
|
8
8
|
border-start-end-radius: var(--border-radius-tiles-wm1vgw, 8px);
|
|
@@ -10,31 +10,37 @@
|
|
|
10
10
|
border-end-end-radius: var(--border-radius-tiles-wm1vgw, 8px);
|
|
11
11
|
background-color: #f8f8f8;
|
|
12
12
|
}
|
|
13
|
-
.awsui-dark-mode .
|
|
13
|
+
.awsui-dark-mode .awsui_root_1pkji_956a4_5:not(#\9), .awsui-polaris-dark-mode .awsui_root_1pkji_956a4_5:not(#\9) {
|
|
14
14
|
background-color: #282c34;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
-
.awsui_scroll-
|
|
17
|
+
.awsui_scroll-container_1pkji_956a4_17:not(#\9) {
|
|
18
18
|
overflow-x: auto;
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
.awsui_code-
|
|
21
|
+
.awsui_code-table_1pkji_956a4_21:not(#\9) {
|
|
22
22
|
padding-block-start: var(--space-static-xs-gnm0mz, 8px);
|
|
23
23
|
padding-block-end: var(--space-static-xs-gnm0mz, 8px);
|
|
24
24
|
table-layout: auto;
|
|
25
25
|
inline-size: 100%;
|
|
26
26
|
border-spacing: 0;
|
|
27
27
|
}
|
|
28
|
-
.awsui_code-table-with-
|
|
28
|
+
.awsui_code-table-with-actions_1pkji_956a4_28:not(#\9) {
|
|
29
29
|
min-block-size: calc(2 * var(--space-scaled-xs-xwoogq, 8px) + var(--space-scaled-xxl-6wgq96, 32px));
|
|
30
30
|
padding-inline-end: calc(2 * var(--space-static-xxxl-qj5g91, 40px));
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
-
.awsui_code-table-with-
|
|
33
|
+
.awsui_code-table-with-actions_1pkji_956a4_28.awsui_code-table-with-line-wrapping_1pkji_956a4_33:not(#\9) {
|
|
34
34
|
padding-inline-end: var(--space-static-xxl-ifa9j8, 32px);
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
.
|
|
37
|
+
.awsui_screenreader-only_1pkji_956a4_37:not(#\9) {
|
|
38
|
+
position: absolute;
|
|
39
|
+
inset-block-start: -9999px;
|
|
40
|
+
inset-inline-start: -9999px;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.awsui_line-number_1pkji_956a4_43:not(#\9) {
|
|
38
44
|
vertical-align: text-top;
|
|
39
45
|
white-space: nowrap;
|
|
40
46
|
position: sticky;
|
|
@@ -46,28 +52,28 @@
|
|
|
46
52
|
padding-inline-end: var(--space-static-xs-gnm0mz, 8px);
|
|
47
53
|
background-color: #f8f8f8;
|
|
48
54
|
}
|
|
49
|
-
.awsui-dark-mode .awsui_line-
|
|
55
|
+
.awsui-dark-mode .awsui_line-number_1pkji_956a4_43:not(#\9), .awsui-polaris-dark-mode .awsui_line-number_1pkji_956a4_43:not(#\9) {
|
|
50
56
|
background-color: #282c34;
|
|
51
57
|
}
|
|
52
58
|
|
|
53
|
-
.
|
|
59
|
+
.awsui_unselectable_1pkji_956a4_59:not(#\9) {
|
|
54
60
|
-webkit-user-select: none;
|
|
55
61
|
user-select: none;
|
|
56
62
|
}
|
|
57
63
|
|
|
58
|
-
.awsui_code-
|
|
64
|
+
.awsui_code-line_1pkji_956a4_64:not(#\9) {
|
|
59
65
|
padding-inline-start: var(--space-static-xs-gnm0mz, 8px);
|
|
60
66
|
padding-inline-end: var(--space-static-xs-gnm0mz, 8px);
|
|
61
67
|
}
|
|
62
|
-
.awsui_code-line-
|
|
68
|
+
.awsui_code-line-wrap_1pkji_956a4_68:not(#\9) {
|
|
63
69
|
white-space: pre-wrap;
|
|
64
70
|
word-break: break-word;
|
|
65
71
|
}
|
|
66
|
-
.awsui_code-line-
|
|
72
|
+
.awsui_code-line-nowrap_1pkji_956a4_72:not(#\9) {
|
|
67
73
|
white-space: pre;
|
|
68
74
|
}
|
|
69
75
|
|
|
70
|
-
.
|
|
76
|
+
.awsui_actions_1pkji_956a4_76:not(#\9) {
|
|
71
77
|
position: absolute;
|
|
72
78
|
inset-block-start: var(--space-scaled-xs-xwoogq, 8px);
|
|
73
79
|
inset-inline-end: var(--space-scaled-xs-xwoogq, 8px);
|
|
@@ -2,16 +2,17 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"root": "
|
|
6
|
-
"scroll-container": "awsui_scroll-
|
|
7
|
-
"code-table": "awsui_code-
|
|
8
|
-
"code-table-with-actions": "awsui_code-table-with-
|
|
9
|
-
"code-table-with-line-wrapping": "awsui_code-table-with-line-
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
-
"code-line
|
|
14
|
-
"code-line-
|
|
15
|
-
"
|
|
5
|
+
"root": "awsui_root_1pkji_956a4_5",
|
|
6
|
+
"scroll-container": "awsui_scroll-container_1pkji_956a4_17",
|
|
7
|
+
"code-table": "awsui_code-table_1pkji_956a4_21",
|
|
8
|
+
"code-table-with-actions": "awsui_code-table-with-actions_1pkji_956a4_28",
|
|
9
|
+
"code-table-with-line-wrapping": "awsui_code-table-with-line-wrapping_1pkji_956a4_33",
|
|
10
|
+
"screenreader-only": "awsui_screenreader-only_1pkji_956a4_37",
|
|
11
|
+
"line-number": "awsui_line-number_1pkji_956a4_43",
|
|
12
|
+
"unselectable": "awsui_unselectable_1pkji_956a4_59",
|
|
13
|
+
"code-line": "awsui_code-line_1pkji_956a4_64",
|
|
14
|
+
"code-line-wrap": "awsui_code-line-wrap_1pkji_956a4_68",
|
|
15
|
+
"code-line-nowrap": "awsui_code-line-nowrap_1pkji_956a4_72",
|
|
16
|
+
"actions": "awsui_actions_1pkji_956a4_76"
|
|
16
17
|
};
|
|
17
18
|
|
|
@@ -46,6 +46,28 @@ module.exports = {
|
|
|
46
46
|
"optional": true,
|
|
47
47
|
"description": "A function to perform custom syntax highlighting."
|
|
48
48
|
},
|
|
49
|
+
{
|
|
50
|
+
"name": "i18nStrings",
|
|
51
|
+
"type": "CodeViewProps.I18nStrings",
|
|
52
|
+
"inlineType": {
|
|
53
|
+
"name": "CodeViewProps.I18nStrings",
|
|
54
|
+
"type": "object",
|
|
55
|
+
"properties": [
|
|
56
|
+
{
|
|
57
|
+
"name": "codeLabel",
|
|
58
|
+
"type": "string",
|
|
59
|
+
"optional": true
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"name": "lineNumberLabel",
|
|
63
|
+
"type": "string",
|
|
64
|
+
"optional": true
|
|
65
|
+
}
|
|
66
|
+
]
|
|
67
|
+
},
|
|
68
|
+
"optional": true,
|
|
69
|
+
"description": "An object containing all the necessary localized strings required by the component. The object should contain:\n\n* `lineNumberLabel` - Label for the column that displays line numbers (when line numbers are visible)\n* `codeLabel` - Label for the column that displays the code content (when line numbers are visible)"
|
|
70
|
+
},
|
|
49
71
|
{
|
|
50
72
|
"name": "lineNumbers",
|
|
51
73
|
"type": "boolean",
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
3
|
import { initAwsUiVersions, useComponentMetadata, } from "@cloudscape-design/component-toolkit/internal";
|
|
4
|
-
import { PACKAGE_SOURCE, PACKAGE_VERSION } from "../environment";
|
|
4
|
+
import { PACKAGE_SOURCE, PACKAGE_VERSION, THEME } from "../environment";
|
|
5
|
+
import { getVisualTheme } from "../utils/get-visual-theme";
|
|
5
6
|
import { useTelemetry } from "./use-telemetry";
|
|
7
|
+
import { useVisualRefresh } from "./use-visual-refresh";
|
|
6
8
|
initAwsUiVersions(PACKAGE_SOURCE, PACKAGE_VERSION);
|
|
7
9
|
/**
|
|
8
10
|
* This hook is used for components which are exported to customers. The returned __internalRootRef needs to be
|
|
@@ -11,7 +13,13 @@ initAwsUiVersions(PACKAGE_SOURCE, PACKAGE_VERSION);
|
|
|
11
13
|
*/
|
|
12
14
|
export default function useBaseComponent(componentName, config) {
|
|
13
15
|
useTelemetry(componentName, config);
|
|
14
|
-
const
|
|
16
|
+
const isVisualRefresh = useVisualRefresh();
|
|
17
|
+
const theme = getVisualTheme(THEME, isVisualRefresh);
|
|
18
|
+
const elementRef = useComponentMetadata(componentName, {
|
|
19
|
+
packageName: PACKAGE_SOURCE,
|
|
20
|
+
version: PACKAGE_VERSION,
|
|
21
|
+
theme,
|
|
22
|
+
});
|
|
15
23
|
return { __internalRootRef: elementRef };
|
|
16
24
|
}
|
|
17
25
|
export function getBaseProps(props) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-base-component.js","sourceRoot":"","sources":["../../../../src/internal/base-component/use-base-component.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAItC,OAAO,EAEL,iBAAiB,EACjB,oBAAoB,GACrB,MAAM,+CAA+C,CAAC;AAEvD,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"use-base-component.js","sourceRoot":"","sources":["../../../../src/internal/base-component/use-base-component.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAItC,OAAO,EAEL,iBAAiB,EACjB,oBAAoB,GACrB,MAAM,+CAA+C,CAAC;AAEvD,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACxE,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAExD,iBAAiB,CAAC,cAAc,EAAE,eAAe,CAAC,CAAC;AAMnD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAU,aAAqB,EAAE,MAA+B;IACtG,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IACpC,MAAM,eAAe,GAAG,gBAAgB,EAAE,CAAC;IAC3C,MAAM,KAAK,GAAG,cAAc,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC;IACrD,MAAM,UAAU,GAAG,oBAAoB,CAAI,aAAa,EAAE;QACxD,WAAW,EAAE,cAAc;QAC3B,OAAO,EAAE,eAAe;QACxB,KAAK;KACN,CAAC,CAAC;IACH,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,CAAC;AAC3C,CAAC;AAQD,MAAM,UAAU,YAAY,CAAC,KAAyB;IACpD,MAAM,SAAS,GAA2B,EAAE,CAAC;IAC7C,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;QAClC,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;YAC5B,SAAS,CAAC,IAAI,CAAC,GAAI,KAAgC,CAAC,IAAI,CAAC,CAAC;SAC3D;IACH,CAAC,CAAC,CAAC;IACH,OAAO,SAAS,CAAC;AACnB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { MutableRefObject } from \"react\";\n\nimport {\n ComponentConfiguration,\n initAwsUiVersions,\n useComponentMetadata,\n} from \"@cloudscape-design/component-toolkit/internal\";\n\nimport { PACKAGE_SOURCE, PACKAGE_VERSION, THEME } from \"../environment\";\nimport { getVisualTheme } from \"../utils/get-visual-theme\";\nimport { useTelemetry } from \"./use-telemetry\";\nimport { useVisualRefresh } from \"./use-visual-refresh\";\n\ninitAwsUiVersions(PACKAGE_SOURCE, PACKAGE_VERSION);\n\nexport interface InternalBaseComponentProps {\n __internalRootRef?: MutableRefObject<any> | null;\n}\n\n/**\n * This hook is used for components which are exported to customers. The returned __internalRootRef needs to be\n * attached to the (internal) component's root DOM node. The hook takes care of attaching the metadata to this\n * root DOM node and emits the telemetry for this component.\n */\nexport default function useBaseComponent<T = any>(componentName: string, config?: ComponentConfiguration) {\n useTelemetry(componentName, config);\n const isVisualRefresh = useVisualRefresh();\n const theme = getVisualTheme(THEME, isVisualRefresh);\n const elementRef = useComponentMetadata<T>(componentName, {\n packageName: PACKAGE_SOURCE,\n version: PACKAGE_VERSION,\n theme,\n });\n return { __internalRootRef: elementRef };\n}\n\n// we also support data-* attributes, but they are always implicitly allowed by typescript\n// http://www.typescriptlang.org/docs/handbook/jsx.html#attribute-type-checking\n// \"Note: If an attribute name is not a valid JS identifier (like a data-* attribute), it is not considered to be an error\"\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface BaseComponentProps {}\n\nexport function getBaseProps(props: BaseComponentProps) {\n const baseProps: Record<string, string> = {};\n Object.keys(props).forEach((prop) => {\n if (prop.startsWith(\"data-\")) {\n baseProps[prop] = (props as Record<string, string>)[prop];\n }\n });\n return baseProps;\n}\n"]}
|
package/internal/environment.js
CHANGED
package/internal/manifest.json
CHANGED