@cloudscape-design/components 3.0.253 → 3.0.254
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/internal/environment.js +1 -1
- package/internal/manifest.json +1 -1
- package/link/interfaces.d.ts +4 -3
- package/link/interfaces.d.ts.map +1 -1
- package/link/interfaces.js.map +1 -1
- package/package.json +1 -1
- package/table/body-cell/index.d.ts.map +1 -1
- package/table/body-cell/index.js +8 -5
- package/table/body-cell/index.js.map +1 -1
- package/table/body-cell/styles.css.js +18 -18
- package/table/body-cell/styles.scoped.css +64 -52
- package/table/body-cell/styles.selectors.js +18 -18
- package/table/body-cell/td-element.d.ts +2 -0
- package/table/body-cell/td-element.d.ts.map +1 -1
- package/table/body-cell/td-element.js +2 -2
- package/table/body-cell/td-element.js.map +1 -1
- package/test-utils/dom/table/index.d.ts +7 -0
- package/test-utils/dom/table/index.js +10 -0
- package/test-utils/dom/table/index.js.map +1 -1
- package/test-utils/selectors/table/index.d.ts +7 -0
- package/test-utils/selectors/table/index.js +10 -0
- package/test-utils/selectors/table/index.js.map +1 -1
- package/test-utils/tsconfig.tsbuildinfo +1 -1
package/internal/environment.js
CHANGED
package/internal/manifest.json
CHANGED
package/link/interfaces.d.ts
CHANGED
|
@@ -60,10 +60,11 @@ export interface LinkProps extends BaseComponentProps {
|
|
|
60
60
|
*/
|
|
61
61
|
externalIconAriaLabel?: string;
|
|
62
62
|
/**
|
|
63
|
-
* Called when a link is clicked without any modifier keys.
|
|
63
|
+
* Called when a link is clicked without any modifier keys. If the link has no `href` provided, it will be called on
|
|
64
|
+
* all clicks.
|
|
64
65
|
*
|
|
65
|
-
* If you want to implement client-side routing yourself,
|
|
66
|
-
*
|
|
66
|
+
* If you want to implement client-side routing yourself, use this event and prevent default browser navigation
|
|
67
|
+
* (by calling `preventDefault`).
|
|
67
68
|
*/
|
|
68
69
|
onFollow?: CancelableEventHandler<LinkProps.FollowDetail>;
|
|
69
70
|
/**
|
package/link/interfaces.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["link/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAElF,MAAM,WAAW,SAAU,SAAQ,kBAAkB;IACnD;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC;IAE5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC;IAE9B;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAExB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAE/B
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["link/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAElF,MAAM,WAAW,SAAU,SAAQ,kBAAkB;IACnD;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC;IAE5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC;IAE9B;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAExB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAE/B;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,sBAAsB,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;IAE1D;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,yBAAiB,SAAS,CAAC;IACzB,KAAY,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,MAAM,GAAG,mBAAmB,CAAC;IAC7E,KAAY,QAAQ,GAChB,QAAQ,GACR,QAAQ,GACR,YAAY,GACZ,WAAW,GACX,WAAW,GACX,WAAW,GACX,YAAY,GACZ,WAAW,GACX,SAAS,CAAC;IACd,KAAY,KAAK,GAAG,QAAQ,GAAG,UAAU,CAAC;IAE1C,KAAY,YAAY,GAAG,oBAAoB,CAAC;IAEhD,UAAiB,GAAG;QAClB;;WAEG;QACH,KAAK,IAAI,IAAI,CAAC;KACf;CACF"}
|
package/link/interfaces.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["link/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport React from 'react';\nimport { BaseNavigationDetail, CancelableEventHandler } from '../internal/events';\n\nexport interface LinkProps extends BaseComponentProps {\n /**\n * Determines the visual style of the link as follows:\n * - `primary` - Displays the link text with bold styling for sufficient contrast with surrounding text.\n * Use this for links where the context doesn't imply interactivity such as\n * \"Learn more\" links and links within paragraphs.\n * - `secondary` - Does not provide any additional indicators for interactivity (except for an underline when the user hovers over or focuses the link).\n * This can be used in cases where the interactivity is strongly implied by its context,\n * such as in a table or a list of external links.\n * - `info` - Use for \"info\" links that link to content in a help panel.\n */\n variant?: LinkProps.Variant;\n\n /**\n * Determines the font size and line height.\n * This property is overridden if the variant is `info`.\n */\n fontSize?: LinkProps.FontSize;\n\n /**\n * Determines the text color of the link and its icon.\n * - `normal`: Use in most cases where a link is required.\n * - `inverted`: Use to style links inside Flashbars.\n *\n * This property is overridden if the variant is `info`.\n */\n color?: LinkProps.Color;\n\n /**\n * Marks the link as external by adding an icon after the text. If `href`\n * is provided, opens the link in a new tab when clicked.\n */\n external?: boolean;\n\n /**\n * Specifies where to open the linked URL. Set this to `_blank` to open the URL\n * in a new tab. If you set this property to `_blank`, the component\n * automatically adds `rel=\"noopener noreferrer\"` to avoid performance\n * and security issues.\n *\n * For other options see the documentation for <a> tag's\n * [target attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).\n */\n target?: string;\n\n /**\n * The URL that the link points to.\n * If an `href` is not provided, the component will render using a\n * \"button\" role and `target` will not be used.\n */\n href?: string;\n\n /**\n * The text to render inside the link.\n */\n children?: React.ReactNode;\n\n /**\n * Adds an aria-label to the HTML element.\n */\n ariaLabel?: string;\n\n /**\n * Adds an aria-label to the external icon.\n */\n externalIconAriaLabel?: string;\n\n /**\n * Called when a link is clicked without any modifier keys.\n *\n * If you want to implement client-side routing yourself
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["link/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport React from 'react';\nimport { BaseNavigationDetail, CancelableEventHandler } from '../internal/events';\n\nexport interface LinkProps extends BaseComponentProps {\n /**\n * Determines the visual style of the link as follows:\n * - `primary` - Displays the link text with bold styling for sufficient contrast with surrounding text.\n * Use this for links where the context doesn't imply interactivity such as\n * \"Learn more\" links and links within paragraphs.\n * - `secondary` - Does not provide any additional indicators for interactivity (except for an underline when the user hovers over or focuses the link).\n * This can be used in cases where the interactivity is strongly implied by its context,\n * such as in a table or a list of external links.\n * - `info` - Use for \"info\" links that link to content in a help panel.\n */\n variant?: LinkProps.Variant;\n\n /**\n * Determines the font size and line height.\n * This property is overridden if the variant is `info`.\n */\n fontSize?: LinkProps.FontSize;\n\n /**\n * Determines the text color of the link and its icon.\n * - `normal`: Use in most cases where a link is required.\n * - `inverted`: Use to style links inside Flashbars.\n *\n * This property is overridden if the variant is `info`.\n */\n color?: LinkProps.Color;\n\n /**\n * Marks the link as external by adding an icon after the text. If `href`\n * is provided, opens the link in a new tab when clicked.\n */\n external?: boolean;\n\n /**\n * Specifies where to open the linked URL. Set this to `_blank` to open the URL\n * in a new tab. If you set this property to `_blank`, the component\n * automatically adds `rel=\"noopener noreferrer\"` to avoid performance\n * and security issues.\n *\n * For other options see the documentation for <a> tag's\n * [target attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).\n */\n target?: string;\n\n /**\n * The URL that the link points to.\n * If an `href` is not provided, the component will render using a\n * \"button\" role and `target` will not be used.\n */\n href?: string;\n\n /**\n * The text to render inside the link.\n */\n children?: React.ReactNode;\n\n /**\n * Adds an aria-label to the HTML element.\n */\n ariaLabel?: string;\n\n /**\n * Adds an aria-label to the external icon.\n */\n externalIconAriaLabel?: string;\n\n /**\n * Called when a link is clicked without any modifier keys. If the link has no `href` provided, it will be called on\n * all clicks.\n *\n * If you want to implement client-side routing yourself, use this event and prevent default browser navigation\n * (by calling `preventDefault`).\n */\n onFollow?: CancelableEventHandler<LinkProps.FollowDetail>;\n\n /**\n * Adds a `rel` attribute to the link. If the `rel` property is provided, it overrides the default behaviour.\n * By default, the component sets the `rel` attribute to \"noopener noreferrer\" when `external` is `true` or `target` is `\"_blank\"`.\n */\n rel?: string;\n}\n\nexport namespace LinkProps {\n export type Variant = 'primary' | 'secondary' | 'info' | 'awsui-value-large';\n export type FontSize =\n | 'body-s'\n | 'body-m'\n | 'heading-xs'\n | 'heading-s'\n | 'heading-m'\n | 'heading-l'\n | 'heading-xl'\n | 'display-l'\n | 'inherit';\n export type Color = 'normal' | 'inverted';\n\n export type FollowDetail = BaseNavigationDetail;\n\n export interface Ref {\n /**\n * Sets the browser focus on the anchor element.\n */\n focus(): void;\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["table/body-cell/index.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["table/body-cell/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAkB,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAOnE,UAAU,kBAAkB,CAAC,QAAQ,CAAE,SAAQ,mBAAmB;IAChE,MAAM,EAAE,UAAU,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC9C,IAAI,EAAE,QAAQ,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,UAAU,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACrD,UAAU,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;CACtC;AAsED,wBAAgB,aAAa,CAAC,QAAQ,EAAE,EACtC,UAAU,EACV,GAAG,IAAI,EACR,EAAE,kBAAkB,CAAC,QAAQ,CAAC,GAAG;IAAE,UAAU,EAAE,OAAO,CAAA;CAAE,eAMxD"}
|
package/table/body-cell/index.js
CHANGED
|
@@ -3,9 +3,9 @@ import { __rest } from "tslib";
|
|
|
3
3
|
// SPDX-License-Identifier: Apache-2.0
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import styles from './styles.css.js';
|
|
6
|
-
import React, { useRef } from 'react';
|
|
6
|
+
import React, { useRef, useState } from 'react';
|
|
7
7
|
import { useEffectOnUpdate } from '../../internal/hooks/use-effect-on-update';
|
|
8
|
-
import
|
|
8
|
+
import Icon from '../../icon/internal';
|
|
9
9
|
import { TableTdElement } from './td-element';
|
|
10
10
|
import { InlineEditor } from './inline-editor';
|
|
11
11
|
const submitHandlerFallback = () => {
|
|
@@ -23,10 +23,13 @@ function TableCellEditable(_a) {
|
|
|
23
23
|
editActivateRef.current.focus();
|
|
24
24
|
}
|
|
25
25
|
}, [isEditing]);
|
|
26
|
-
|
|
26
|
+
// To improve the initial page render performance we only show the edit icon when necessary.
|
|
27
|
+
const [hasHover, setHasHover] = useState(false);
|
|
28
|
+
const [hasFocus, setHasFocus] = useState(false);
|
|
29
|
+
const showIcon = hasHover || hasFocus;
|
|
30
|
+
return (React.createElement(TableTdElement, Object.assign({}, rest, { nativeAttributes: tdNativeAttributes, className: clsx(className, styles['body-cell-editable'], isEditing && styles['body-cell-edit-active'], isVisualRefresh && styles['is-visual-refresh']), onClick: !isEditing ? onEditStart : undefined, onMouseEnter: () => setHasHover(true), onMouseLeave: () => setHasHover(false) }), isEditing ? (React.createElement(InlineEditor, { ariaLabels: ariaLabels, column: column, item: item, onEditEnd: onEditEnd, submitEdit: submitEdit !== null && submitEdit !== void 0 ? submitEdit : submitHandlerFallback })) : (React.createElement(React.Fragment, null,
|
|
27
31
|
column.cell(item),
|
|
28
|
-
React.createElement("
|
|
29
|
-
React.createElement(Button, { __forcedFocusState: "none", __internalRootRef: editActivateRef, ariaLabel: (_b = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.activateEditLabel) === null || _b === void 0 ? void 0 : _b.call(ariaLabels, column), formAction: "none", iconName: "edit", variant: "inline-icon" }))))));
|
|
32
|
+
React.createElement("button", { className: styles['body-cell-editor'], "aria-label": (_b = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.activateEditLabel) === null || _b === void 0 ? void 0 : _b.call(ariaLabels, column), ref: editActivateRef, onFocus: () => setHasFocus(true), onBlur: () => setHasFocus(false) }, showIcon && React.createElement(Icon, { name: "edit" }))))));
|
|
30
33
|
}
|
|
31
34
|
export function TableBodyCell(_a) {
|
|
32
35
|
var { isEditable } = _a, rest = __rest(_a, ["isEditable"]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["table/body-cell/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["table/body-cell/index.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 clsx from 'clsx';\nimport styles from './styles.css.js';\nimport React, { useRef, useState } from 'react';\nimport { useEffectOnUpdate } from '../../internal/hooks/use-effect-on-update';\nimport Icon from '../../icon/internal';\nimport { TableProps } from '../interfaces';\nimport { TableTdElement, TableTdElementProps } from './td-element';\nimport { InlineEditor } from './inline-editor';\n\nconst submitHandlerFallback = () => {\n throw new Error('The function `handleSubmit` is required for editable columns');\n};\n\ninterface TableBodyCellProps<ItemType> extends TableTdElementProps {\n column: TableProps.ColumnDefinition<ItemType>;\n item: ItemType;\n isEditing: boolean;\n onEditStart: () => void;\n onEditEnd: () => void;\n submitEdit?: TableProps.SubmitEditFunction<ItemType>;\n ariaLabels: TableProps['ariaLabels'];\n}\n\nfunction TableCellEditable<ItemType>({\n className,\n item,\n column,\n isEditing,\n onEditStart,\n onEditEnd,\n submitEdit,\n ariaLabels,\n isVisualRefresh,\n ...rest\n}: TableBodyCellProps<ItemType>) {\n const editActivateRef = useRef<HTMLButtonElement>(null);\n const tdNativeAttributes = {\n 'data-inline-editing-active': isEditing.toString(),\n };\n\n useEffectOnUpdate(() => {\n if (!isEditing && editActivateRef.current) {\n editActivateRef.current.focus();\n }\n }, [isEditing]);\n\n // To improve the initial page render performance we only show the edit icon when necessary.\n const [hasHover, setHasHover] = useState(false);\n const [hasFocus, setHasFocus] = useState(false);\n const showIcon = hasHover || hasFocus;\n\n return (\n <TableTdElement\n {...rest}\n nativeAttributes={tdNativeAttributes as TableTdElementProps['nativeAttributes']}\n className={clsx(\n className,\n styles['body-cell-editable'],\n isEditing && styles['body-cell-edit-active'],\n isVisualRefresh && styles['is-visual-refresh']\n )}\n onClick={!isEditing ? onEditStart : undefined}\n onMouseEnter={() => setHasHover(true)}\n onMouseLeave={() => setHasHover(false)}\n >\n {isEditing ? (\n <InlineEditor\n ariaLabels={ariaLabels}\n column={column}\n item={item}\n onEditEnd={onEditEnd}\n submitEdit={submitEdit ?? submitHandlerFallback}\n />\n ) : (\n <>\n {column.cell(item)}\n <button\n className={styles['body-cell-editor']}\n aria-label={ariaLabels?.activateEditLabel?.(column)}\n ref={editActivateRef}\n onFocus={() => setHasFocus(true)}\n onBlur={() => setHasFocus(false)}\n >\n {showIcon && <Icon name=\"edit\" />}\n </button>\n </>\n )}\n </TableTdElement>\n );\n}\n\nexport function TableBodyCell<ItemType>({\n isEditable,\n ...rest\n}: TableBodyCellProps<ItemType> & { isEditable: boolean }) {\n if (isEditable || rest.isEditing) {\n return <TableCellEditable {...rest} />;\n }\n const { column, item } = rest;\n return <TableTdElement {...rest}>{column.cell(item)}</TableTdElement>;\n}\n"]}
|
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"body-cell": "awsui_body-
|
|
5
|
-
"body-cell-wrap": "awsui_body-cell-
|
|
6
|
-
"is-visual-refresh": "awsui_is-visual-
|
|
7
|
-
"has-striped-rows": "awsui_has-striped-
|
|
8
|
-
"body-cell-edit-active": "awsui_body-cell-edit-
|
|
9
|
-
"body-cell-editable": "awsui_body-cell-
|
|
10
|
-
"has-selection": "awsui_has-
|
|
11
|
-
"body-cell-first-row": "awsui_body-cell-first-
|
|
12
|
-
"body-cell-last-row": "awsui_body-cell-last-
|
|
13
|
-
"body-cell-selected": "awsui_body-cell-
|
|
14
|
-
"has-footer": "awsui_has-
|
|
15
|
-
"body-cell-shaded": "awsui_body-cell-
|
|
16
|
-
"body-cell-next-selected": "awsui_body-cell-next-
|
|
17
|
-
"body-cell-prev-selected": "awsui_body-cell-prev-
|
|
18
|
-
"body-cell-editor": "awsui_body-cell-
|
|
19
|
-
"body-cell-editor-form": "awsui_body-cell-editor-
|
|
20
|
-
"body-cell-editor-row": "awsui_body-cell-editor-
|
|
21
|
-
"body-cell-editor-controls": "awsui_body-cell-editor-
|
|
4
|
+
"body-cell": "awsui_body-cell_c6tup_1tfsn_93",
|
|
5
|
+
"body-cell-wrap": "awsui_body-cell-wrap_c6tup_1tfsn_102",
|
|
6
|
+
"is-visual-refresh": "awsui_is-visual-refresh_c6tup_1tfsn_114",
|
|
7
|
+
"has-striped-rows": "awsui_has-striped-rows_c6tup_1tfsn_126",
|
|
8
|
+
"body-cell-edit-active": "awsui_body-cell-edit-active_c6tup_1tfsn_129",
|
|
9
|
+
"body-cell-editable": "awsui_body-cell-editable_c6tup_1tfsn_129",
|
|
10
|
+
"has-selection": "awsui_has-selection_c6tup_1tfsn_135",
|
|
11
|
+
"body-cell-first-row": "awsui_body-cell-first-row_c6tup_1tfsn_141",
|
|
12
|
+
"body-cell-last-row": "awsui_body-cell-last-row_c6tup_1tfsn_144",
|
|
13
|
+
"body-cell-selected": "awsui_body-cell-selected_c6tup_1tfsn_144",
|
|
14
|
+
"has-footer": "awsui_has-footer_c6tup_1tfsn_144",
|
|
15
|
+
"body-cell-shaded": "awsui_body-cell-shaded_c6tup_1tfsn_154",
|
|
16
|
+
"body-cell-next-selected": "awsui_body-cell-next-selected_c6tup_1tfsn_176",
|
|
17
|
+
"body-cell-prev-selected": "awsui_body-cell-prev-selected_c6tup_1tfsn_180",
|
|
18
|
+
"body-cell-editor": "awsui_body-cell-editor_c6tup_1tfsn_204",
|
|
19
|
+
"body-cell-editor-form": "awsui_body-cell-editor-form_c6tup_1tfsn_226",
|
|
20
|
+
"body-cell-editor-row": "awsui_body-cell-editor-row_c6tup_1tfsn_235",
|
|
21
|
+
"body-cell-editor-controls": "awsui_body-cell-editor-controls_c6tup_1tfsn_245"
|
|
22
22
|
};
|
|
23
23
|
|
|
@@ -90,7 +90,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
90
90
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
91
91
|
SPDX-License-Identifier: Apache-2.0
|
|
92
92
|
*/
|
|
93
|
-
.awsui_body-
|
|
93
|
+
.awsui_body-cell_c6tup_1tfsn_93:not(#\9) {
|
|
94
94
|
box-sizing: border-box;
|
|
95
95
|
padding: var(--space-scaled-xs-6859qs, 8px) var(--space-scaled-l-t03y3z, 20px) calc(
|
|
96
96
|
var(--space-scaled-xs-6859qs, 8px) + (var(--border-item-width-qbbbsa, 2px) - var(--border-divider-list-width-hacikr, 1px))
|
|
@@ -99,19 +99,19 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
99
99
|
word-wrap: break-word;
|
|
100
100
|
border-bottom: var(--border-divider-list-width-hacikr, 1px) solid var(--color-border-divider-default-7s2wjw, #e9ebed);
|
|
101
101
|
}
|
|
102
|
-
.awsui_body-
|
|
102
|
+
.awsui_body-cell_c6tup_1tfsn_93:not(#\9):not(.awsui_body-cell-wrap_c6tup_1tfsn_102) {
|
|
103
103
|
white-space: nowrap;
|
|
104
104
|
overflow: hidden;
|
|
105
105
|
text-overflow: ellipsis;
|
|
106
106
|
}
|
|
107
|
-
.awsui_body-
|
|
107
|
+
.awsui_body-cell_c6tup_1tfsn_93:not(#\9):first-child {
|
|
108
108
|
border-left: var(--border-item-width-qbbbsa, 2px) solid transparent;
|
|
109
109
|
}
|
|
110
|
-
.awsui_body-
|
|
110
|
+
.awsui_body-cell_c6tup_1tfsn_93:not(#\9):last-child {
|
|
111
111
|
border-right: var(--border-item-width-qbbbsa, 2px) solid transparent;
|
|
112
112
|
padding-right: calc(var(--space-l-4vl6xu, 20px) - var(--border-item-width-qbbbsa, 2px));
|
|
113
113
|
}
|
|
114
|
-
.awsui_body-
|
|
114
|
+
.awsui_body-cell_c6tup_1tfsn_93.awsui_is-visual-refresh_c6tup_1tfsn_114:not(#\9):first-child {
|
|
115
115
|
/*
|
|
116
116
|
Striped rows requires additional left padding because the
|
|
117
117
|
shaded background makes the child content appear too close
|
|
@@ -123,85 +123,85 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
123
123
|
that the placeholder border would consume.
|
|
124
124
|
*/
|
|
125
125
|
}
|
|
126
|
-
.awsui_body-
|
|
126
|
+
.awsui_body-cell_c6tup_1tfsn_93.awsui_is-visual-refresh_c6tup_1tfsn_114:not(#\9):first-child:not(.awsui_has-striped-rows_c6tup_1tfsn_126) {
|
|
127
127
|
padding-left: var(--space-xxxs-k2w98v, 2px);
|
|
128
128
|
}
|
|
129
|
-
.awsui_body-
|
|
129
|
+
.awsui_body-cell_c6tup_1tfsn_93.awsui_is-visual-refresh_c6tup_1tfsn_114:not(#\9):first-child:not(.awsui_has-striped-rows_c6tup_1tfsn_126):not(.awsui_body-cell-edit-active_c6tup_1tfsn_129).awsui_body-cell-editable_c6tup_1tfsn_129:hover {
|
|
130
130
|
padding-left: calc(var(--space-xxxs-k2w98v, 2px) + var(--border-divider-list-width-hacikr, 1px));
|
|
131
131
|
}
|
|
132
|
-
.awsui_body-
|
|
132
|
+
.awsui_body-cell_c6tup_1tfsn_93.awsui_is-visual-refresh_c6tup_1tfsn_114:not(#\9):first-child:first-child.awsui_has-striped-rows_c6tup_1tfsn_126 {
|
|
133
133
|
padding-left: var(--space-xxs-ynfts5, 4px);
|
|
134
134
|
}
|
|
135
|
-
.awsui_body-
|
|
135
|
+
.awsui_body-cell_c6tup_1tfsn_93.awsui_is-visual-refresh_c6tup_1tfsn_114:not(#\9):first-child:not(.awsui_has-selection_c6tup_1tfsn_135):not(.awsui_body-cell-editable_c6tup_1tfsn_129) {
|
|
136
136
|
border-left: none;
|
|
137
137
|
}
|
|
138
|
-
.awsui_body-
|
|
138
|
+
.awsui_body-cell_c6tup_1tfsn_93:not(#\9):first-child:not(.awsui_is-visual-refresh_c6tup_1tfsn_114) {
|
|
139
139
|
padding-left: calc(var(--space-l-4vl6xu, 20px) - var(--border-item-width-qbbbsa, 2px));
|
|
140
140
|
}
|
|
141
|
-
.awsui_body-cell-first-
|
|
141
|
+
.awsui_body-cell-first-row_c6tup_1tfsn_141:not(#\9) {
|
|
142
142
|
border-top: var(--border-item-width-qbbbsa, 2px) solid transparent;
|
|
143
143
|
}
|
|
144
|
-
.awsui_body-cell-last-
|
|
144
|
+
.awsui_body-cell-last-row_c6tup_1tfsn_144:not(#\9):not(.awsui_body-cell-selected_c6tup_1tfsn_144):not(.awsui_has-footer_c6tup_1tfsn_144) {
|
|
145
145
|
border-bottom: var(--border-item-width-qbbbsa, 2px) solid transparent;
|
|
146
146
|
}
|
|
147
|
-
.awsui_body-cell-last-
|
|
147
|
+
.awsui_body-cell-last-row_c6tup_1tfsn_144:not(#\9):not(.awsui_body-cell-selected_c6tup_1tfsn_144).awsui_has-footer_c6tup_1tfsn_144 {
|
|
148
148
|
/*
|
|
149
149
|
Add a bottom border to the body cells of the last row as a separator between the
|
|
150
150
|
table and the footer
|
|
151
151
|
*/
|
|
152
152
|
border-bottom: var(--border-divider-section-width-4wm2it, 2px) solid var(--color-border-divider-default-7s2wjw, #e9ebed);
|
|
153
153
|
}
|
|
154
|
-
.awsui_body-cell-
|
|
154
|
+
.awsui_body-cell-shaded_c6tup_1tfsn_154:not(#\9) {
|
|
155
155
|
background: var(--color-background-cell-shaded-26ubfj, #f8f8f8);
|
|
156
156
|
}
|
|
157
|
-
.awsui_body-cell-
|
|
157
|
+
.awsui_body-cell-selected_c6tup_1tfsn_144:not(#\9) {
|
|
158
158
|
background-color: var(--color-background-item-selected-ebt4bi, #f2f8fd);
|
|
159
159
|
border-top: var(--border-item-width-qbbbsa, 2px) solid var(--color-border-item-selected-ppkssz, #0972d3);
|
|
160
160
|
border-bottom: var(--border-item-width-qbbbsa, 2px) solid var(--color-border-item-selected-ppkssz, #0972d3);
|
|
161
161
|
padding-bottom: var(--space-scaled-xs-6859qs, 8px);
|
|
162
162
|
}
|
|
163
|
-
.awsui_body-cell-
|
|
163
|
+
.awsui_body-cell-selected_c6tup_1tfsn_144:not(#\9):first-child {
|
|
164
164
|
border-left: var(--border-item-width-qbbbsa, 2px) solid var(--color-border-item-selected-ppkssz, #0972d3);
|
|
165
165
|
border-radius: var(--border-radius-item-u2ibpi, 8px) 0 0 var(--border-radius-item-u2ibpi, 8px);
|
|
166
166
|
}
|
|
167
|
-
.awsui_body-cell-
|
|
167
|
+
.awsui_body-cell-selected_c6tup_1tfsn_144:not(#\9):last-child {
|
|
168
168
|
border-right: var(--border-item-width-qbbbsa, 2px) solid var(--color-border-item-selected-ppkssz, #0972d3);
|
|
169
169
|
border-radius: 0 var(--border-radius-item-u2ibpi, 8px) var(--border-radius-item-u2ibpi, 8px) 0;
|
|
170
170
|
}
|
|
171
|
-
.awsui_body-cell-
|
|
171
|
+
.awsui_body-cell-selected_c6tup_1tfsn_144:not(#\9):not(:first-child) {
|
|
172
172
|
padding-top: calc(
|
|
173
173
|
var(--space-scaled-xs-6859qs, 8px) + (var(--border-item-width-qbbbsa, 2px) - var(--border-divider-list-width-hacikr, 1px))
|
|
174
174
|
);
|
|
175
175
|
}
|
|
176
|
-
.awsui_body-
|
|
176
|
+
.awsui_body-cell_c6tup_1tfsn_93:not(#\9):not(.awsui_body-cell-selected_c6tup_1tfsn_144).awsui_body-cell-next-selected_c6tup_1tfsn_176 {
|
|
177
177
|
border-bottom: 0;
|
|
178
178
|
padding-bottom: calc(var(--space-scaled-xs-6859qs, 8px) + var(--border-divider-list-width-hacikr, 1px));
|
|
179
179
|
}
|
|
180
|
-
.awsui_body-cell-
|
|
180
|
+
.awsui_body-cell-selected_c6tup_1tfsn_144.awsui_body-cell-prev-selected_c6tup_1tfsn_180:not(#\9) {
|
|
181
181
|
padding-top: calc(
|
|
182
182
|
var(--space-scaled-xs-6859qs, 8px) + (var(--border-item-width-qbbbsa, 2px) - var(--border-divider-list-width-hacikr, 1px))
|
|
183
183
|
);
|
|
184
184
|
border-top: var(--border-divider-list-width-hacikr, 1px) solid var(--color-border-item-placeholder-jgzhnb, #0972d3);
|
|
185
185
|
}
|
|
186
|
-
.awsui_body-cell-
|
|
186
|
+
.awsui_body-cell-selected_c6tup_1tfsn_144.awsui_body-cell-next-selected_c6tup_1tfsn_176:not(#\9) {
|
|
187
187
|
border-bottom-width: var(--border-divider-list-width-hacikr, 1px);
|
|
188
188
|
}
|
|
189
|
-
.awsui_body-cell-
|
|
189
|
+
.awsui_body-cell-selected_c6tup_1tfsn_144.awsui_body-cell-next-selected_c6tup_1tfsn_176:not(#\9):first-child {
|
|
190
190
|
border-bottom-left-radius: 0;
|
|
191
191
|
}
|
|
192
|
-
.awsui_body-cell-
|
|
192
|
+
.awsui_body-cell-selected_c6tup_1tfsn_144.awsui_body-cell-next-selected_c6tup_1tfsn_176:not(#\9):last-child {
|
|
193
193
|
border-bottom-right-radius: 0;
|
|
194
194
|
}
|
|
195
|
-
.awsui_body-cell-
|
|
195
|
+
.awsui_body-cell-selected_c6tup_1tfsn_144.awsui_body-cell-prev-selected_c6tup_1tfsn_180:not(#\9):first-child {
|
|
196
196
|
border-top-left-radius: 0;
|
|
197
197
|
}
|
|
198
|
-
.awsui_body-cell-
|
|
198
|
+
.awsui_body-cell-selected_c6tup_1tfsn_144.awsui_body-cell-prev-selected_c6tup_1tfsn_180:not(#\9):last-child {
|
|
199
199
|
border-top-right-radius: 0;
|
|
200
200
|
}
|
|
201
|
-
.awsui_body-cell-
|
|
201
|
+
.awsui_body-cell-selected_c6tup_1tfsn_144:not(#\9):not(.awsui_body-cell-prev-selected_c6tup_1tfsn_180) {
|
|
202
202
|
padding-top: var(--space-scaled-xs-6859qs, 8px);
|
|
203
203
|
}
|
|
204
|
-
.awsui_body-cell-
|
|
204
|
+
.awsui_body-cell-editor_c6tup_1tfsn_204:not(#\9) {
|
|
205
205
|
top: 0;
|
|
206
206
|
right: 0;
|
|
207
207
|
bottom: 0;
|
|
@@ -209,41 +209,53 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
209
209
|
display: flex;
|
|
210
210
|
align-items: center;
|
|
211
211
|
justify-content: flex-end;
|
|
212
|
-
|
|
212
|
+
cursor: pointer;
|
|
213
|
+
outline: 0;
|
|
214
|
+
background: 0;
|
|
215
|
+
border: 0;
|
|
216
|
+
padding: 0;
|
|
217
|
+
padding-right: calc(var(--space-xs-rsr2qu, 8px) + var(--space-xxs-ynfts5, 4px));
|
|
218
|
+
color: var(--color-text-button-normal-default-u8647m, #0972d3);
|
|
219
|
+
}
|
|
220
|
+
.awsui_body-cell-editor_c6tup_1tfsn_204:not(#\9):hover {
|
|
221
|
+
color: var(--color-text-button-normal-hover-kxmvcc, #033160);
|
|
222
|
+
}
|
|
223
|
+
.awsui_body-cell-editor_c6tup_1tfsn_204:not(#\9):active {
|
|
224
|
+
color: var(--color-text-button-normal-active-6obrzh, #033160);
|
|
213
225
|
}
|
|
214
|
-
.awsui_body-cell-editor-
|
|
226
|
+
.awsui_body-cell-editor-form_c6tup_1tfsn_226:not(#\9) {
|
|
215
227
|
margin: calc(-1 * var(--space-xs-rsr2qu, 8px)) calc(-1.5 * var(--space-xs-rsr2qu, 8px));
|
|
216
228
|
}
|
|
217
|
-
.awsui_is-visual-
|
|
229
|
+
.awsui_is-visual-refresh_c6tup_1tfsn_114.awsui_body-cell_c6tup_1tfsn_93:not(#\9):first-child.awsui_has-striped-rows_c6tup_1tfsn_126 > .awsui_body-cell-editor-form_c6tup_1tfsn_226 {
|
|
218
230
|
margin-left: calc(-1 * var(--space-xxs-ynfts5, 4px));
|
|
219
231
|
}
|
|
220
|
-
.awsui_is-visual-
|
|
232
|
+
.awsui_is-visual-refresh_c6tup_1tfsn_114.awsui_body-cell_c6tup_1tfsn_93:not(#\9):first-child:not(.awsui_has-striped-rows_c6tup_1tfsn_126) > .awsui_body-cell-editor-form_c6tup_1tfsn_226 {
|
|
221
233
|
margin-left: calc(-1 * var(--space-xxxs-k2w98v, 2px));
|
|
222
234
|
}
|
|
223
|
-
.awsui_body-cell-editor-
|
|
235
|
+
.awsui_body-cell-editor-row_c6tup_1tfsn_235:not(#\9) {
|
|
224
236
|
display: flex;
|
|
225
237
|
flex-flow: row nowrap;
|
|
226
238
|
align-items: center;
|
|
227
239
|
justify-content: space-between;
|
|
228
240
|
column-gap: var(--space-xxs-ynfts5, 4px);
|
|
229
241
|
}
|
|
230
|
-
.awsui_body-cell-editor-
|
|
242
|
+
.awsui_body-cell-editor-row_c6tup_1tfsn_235 > :not(#\9):not(:last-child) {
|
|
231
243
|
flex-grow: 1;
|
|
232
244
|
}
|
|
233
|
-
.awsui_body-cell-editor-
|
|
245
|
+
.awsui_body-cell-editor-controls_c6tup_1tfsn_245:not(#\9) {
|
|
234
246
|
flex-shrink: 0;
|
|
235
247
|
}
|
|
236
|
-
.awsui_body-
|
|
248
|
+
.awsui_body-cell_c6tup_1tfsn_93.awsui_body-cell-editable_c6tup_1tfsn_129:not(#\9) {
|
|
237
249
|
position: relative;
|
|
238
250
|
cursor: pointer;
|
|
239
251
|
}
|
|
240
|
-
.awsui_body-
|
|
252
|
+
.awsui_body-cell_c6tup_1tfsn_93.awsui_body-cell-editable_c6tup_1tfsn_129.awsui_body-cell-edit-active_c6tup_1tfsn_129:not(#\9) {
|
|
241
253
|
overflow: visible;
|
|
242
254
|
}
|
|
243
|
-
.awsui_body-
|
|
255
|
+
.awsui_body-cell_c6tup_1tfsn_93.awsui_body-cell-editable_c6tup_1tfsn_129:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1tfsn_129) > .awsui_body-cell-editor_c6tup_1tfsn_204 {
|
|
244
256
|
opacity: 0;
|
|
245
257
|
}
|
|
246
|
-
.awsui_body-
|
|
258
|
+
.awsui_body-cell_c6tup_1tfsn_93.awsui_body-cell-editable_c6tup_1tfsn_129:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1tfsn_129):hover {
|
|
247
259
|
position: relative;
|
|
248
260
|
background-color: var(--color-background-dropdown-item-hover-mqsxkv, #f4f4f4);
|
|
249
261
|
border: var(--border-divider-list-width-hacikr, 1px) solid var(--color-border-control-default-m3lmsh, #7d8998);
|
|
@@ -251,39 +263,39 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
251
263
|
right: calc(-1 * var(--border-divider-list-width-hacikr, 1px));
|
|
252
264
|
padding-right: calc(var(--space-scaled-l-t03y3z, 20px) + var(--space-l-4vl6xu, 20px));
|
|
253
265
|
}
|
|
254
|
-
.awsui_body-
|
|
266
|
+
.awsui_body-cell_c6tup_1tfsn_93.awsui_body-cell-editable_c6tup_1tfsn_129:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1tfsn_129):hover > .awsui_body-cell-editor_c6tup_1tfsn_204 {
|
|
255
267
|
opacity: 1;
|
|
256
268
|
}
|
|
257
|
-
.awsui_body-
|
|
269
|
+
.awsui_body-cell_c6tup_1tfsn_93.awsui_body-cell-editable_c6tup_1tfsn_129:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1tfsn_129):hover:first-child {
|
|
258
270
|
left: 0;
|
|
259
271
|
right: 0;
|
|
260
272
|
}
|
|
261
|
-
.awsui_body-
|
|
262
|
-
padding-right: calc(var(--space-xs-rsr2qu, 8px) - (2 * var(--border-divider-list-width-hacikr, 1px)));
|
|
273
|
+
.awsui_body-cell_c6tup_1tfsn_93.awsui_body-cell-editable_c6tup_1tfsn_129:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1tfsn_129):hover > .awsui_body-cell-editor_c6tup_1tfsn_204 {
|
|
274
|
+
padding-right: calc(var(--space-xs-rsr2qu, 8px) + var(--space-xxs-ynfts5, 4px) - (2 * var(--border-divider-list-width-hacikr, 1px)));
|
|
263
275
|
}
|
|
264
|
-
.awsui_body-
|
|
276
|
+
.awsui_body-cell_c6tup_1tfsn_93.awsui_body-cell-editable_c6tup_1tfsn_129:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1tfsn_129):hover.awsui_body-cell-last-row_c6tup_1tfsn_144.awsui_body-cell-selected_c6tup_1tfsn_144, .awsui_body-cell_c6tup_1tfsn_93.awsui_body-cell-editable_c6tup_1tfsn_129:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1tfsn_129):hover.awsui_body-cell-next-selected_c6tup_1tfsn_176 {
|
|
265
277
|
padding-top: calc(var(--space-scaled-xs-6859qs, 8px) - calc(var(--border-divider-list-width-hacikr, 1px) / 2));
|
|
266
278
|
padding-bottom: calc(var(--space-scaled-xs-6859qs, 8px) - calc(var(--border-divider-list-width-hacikr, 1px) / 2));
|
|
267
279
|
}
|
|
268
|
-
.awsui_body-
|
|
280
|
+
.awsui_body-cell_c6tup_1tfsn_93.awsui_body-cell-editable_c6tup_1tfsn_129:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1tfsn_129):hover.awsui_body-cell-last-row_c6tup_1tfsn_144:not(.awsui_body-cell-selected_c6tup_1tfsn_144) {
|
|
269
281
|
padding-top: calc(var(--space-scaled-xs-6859qs, 8px) - calc(var(--border-divider-list-width-hacikr, 1px)));
|
|
270
282
|
}
|
|
271
|
-
.awsui_body-
|
|
283
|
+
.awsui_body-cell_c6tup_1tfsn_93.awsui_body-cell-editable_c6tup_1tfsn_129:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1tfsn_129):hover.awsui_body-cell-first-row_c6tup_1tfsn_141:not(.awsui_body-cell-selected_c6tup_1tfsn_144) {
|
|
272
284
|
padding-top: calc(var(--space-scaled-xs-6859qs, 8px) - calc(var(--border-divider-list-width-hacikr, 1px)));
|
|
273
285
|
padding-bottom: calc(var(--space-scaled-xs-6859qs, 8px) - calc(var(--border-divider-list-width-hacikr, 1px)));
|
|
274
286
|
}
|
|
275
|
-
body[data-awsui-focus-visible=true] .awsui_body-
|
|
287
|
+
body[data-awsui-focus-visible=true] .awsui_body-cell_c6tup_1tfsn_93.awsui_body-cell-editable_c6tup_1tfsn_129:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1tfsn_129):focus-within {
|
|
276
288
|
padding-right: calc(var(--space-scaled-l-t03y3z, 20px) + var(--space-l-4vl6xu, 20px));
|
|
277
289
|
position: relative;
|
|
278
290
|
}
|
|
279
|
-
body[data-awsui-focus-visible=true] .awsui_body-
|
|
291
|
+
body[data-awsui-focus-visible=true] .awsui_body-cell_c6tup_1tfsn_93.awsui_body-cell-editable_c6tup_1tfsn_129:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1tfsn_129):focus-within > .awsui_body-cell-editor_c6tup_1tfsn_204 {
|
|
280
292
|
opacity: 1;
|
|
281
293
|
}
|
|
282
|
-
body[data-awsui-focus-visible=true] .awsui_body-
|
|
294
|
+
body[data-awsui-focus-visible=true] .awsui_body-cell_c6tup_1tfsn_93.awsui_body-cell-editable_c6tup_1tfsn_129:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1tfsn_129):focus-within {
|
|
283
295
|
outline: 2px dotted transparent;
|
|
284
296
|
outline-offset: calc(calc(-1 * var(--space-scaled-xxs-95dhkm, 4px)) - 1px);
|
|
285
297
|
}
|
|
286
|
-
body[data-awsui-focus-visible=true] .awsui_body-
|
|
298
|
+
body[data-awsui-focus-visible=true] .awsui_body-cell_c6tup_1tfsn_93.awsui_body-cell-editable_c6tup_1tfsn_129:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1tfsn_129):focus-within::before {
|
|
287
299
|
content: " ";
|
|
288
300
|
display: block;
|
|
289
301
|
position: absolute;
|
|
@@ -294,14 +306,14 @@ body[data-awsui-focus-visible=true] .awsui_body-cell_c6tup_1eoa3_93.awsui_body-c
|
|
|
294
306
|
border-radius: var(--border-radius-control-default-focus-ring-7661kz, 4px);
|
|
295
307
|
box-shadow: 0 0 0 2px var(--color-border-item-focused-ap3b6s, #0972d3);
|
|
296
308
|
}
|
|
297
|
-
.awsui_body-cell-
|
|
309
|
+
.awsui_body-cell-editable_c6tup_1tfsn_129.awsui_is-visual-refresh_c6tup_1tfsn_114:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1tfsn_129):hover:first-child {
|
|
298
310
|
border-top-left-radius: var(--border-radius-control-default-focus-ring-7661kz, 4px);
|
|
299
311
|
border-bottom-left-radius: var(--border-radius-control-default-focus-ring-7661kz, 4px);
|
|
300
312
|
}
|
|
301
|
-
.awsui_body-cell-
|
|
313
|
+
.awsui_body-cell-editable_c6tup_1tfsn_129.awsui_is-visual-refresh_c6tup_1tfsn_114:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1tfsn_129):hover:last-child {
|
|
302
314
|
border-top-right-radius: var(--border-radius-control-default-focus-ring-7661kz, 4px);
|
|
303
315
|
border-bottom-right-radius: var(--border-radius-control-default-focus-ring-7661kz, 4px);
|
|
304
316
|
}
|
|
305
|
-
.awsui_body-cell-
|
|
317
|
+
.awsui_body-cell-editable_c6tup_1tfsn_129.awsui_is-visual-refresh_c6tup_1tfsn_114:not(#\9):not(.awsui_body-cell-edit-active_c6tup_1tfsn_129):hover.awsui_body-cell-first-row_c6tup_1tfsn_141 > .awsui_body-cell-editor_c6tup_1tfsn_204 {
|
|
306
318
|
padding-top: var(--border-divider-list-width-hacikr, 1px);
|
|
307
319
|
}
|
|
@@ -2,23 +2,23 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"body-cell": "awsui_body-
|
|
6
|
-
"body-cell-wrap": "awsui_body-cell-
|
|
7
|
-
"is-visual-refresh": "awsui_is-visual-
|
|
8
|
-
"has-striped-rows": "awsui_has-striped-
|
|
9
|
-
"body-cell-edit-active": "awsui_body-cell-edit-
|
|
10
|
-
"body-cell-editable": "awsui_body-cell-
|
|
11
|
-
"has-selection": "awsui_has-
|
|
12
|
-
"body-cell-first-row": "awsui_body-cell-first-
|
|
13
|
-
"body-cell-last-row": "awsui_body-cell-last-
|
|
14
|
-
"body-cell-selected": "awsui_body-cell-
|
|
15
|
-
"has-footer": "awsui_has-
|
|
16
|
-
"body-cell-shaded": "awsui_body-cell-
|
|
17
|
-
"body-cell-next-selected": "awsui_body-cell-next-
|
|
18
|
-
"body-cell-prev-selected": "awsui_body-cell-prev-
|
|
19
|
-
"body-cell-editor": "awsui_body-cell-
|
|
20
|
-
"body-cell-editor-form": "awsui_body-cell-editor-
|
|
21
|
-
"body-cell-editor-row": "awsui_body-cell-editor-
|
|
22
|
-
"body-cell-editor-controls": "awsui_body-cell-editor-
|
|
5
|
+
"body-cell": "awsui_body-cell_c6tup_1tfsn_93",
|
|
6
|
+
"body-cell-wrap": "awsui_body-cell-wrap_c6tup_1tfsn_102",
|
|
7
|
+
"is-visual-refresh": "awsui_is-visual-refresh_c6tup_1tfsn_114",
|
|
8
|
+
"has-striped-rows": "awsui_has-striped-rows_c6tup_1tfsn_126",
|
|
9
|
+
"body-cell-edit-active": "awsui_body-cell-edit-active_c6tup_1tfsn_129",
|
|
10
|
+
"body-cell-editable": "awsui_body-cell-editable_c6tup_1tfsn_129",
|
|
11
|
+
"has-selection": "awsui_has-selection_c6tup_1tfsn_135",
|
|
12
|
+
"body-cell-first-row": "awsui_body-cell-first-row_c6tup_1tfsn_141",
|
|
13
|
+
"body-cell-last-row": "awsui_body-cell-last-row_c6tup_1tfsn_144",
|
|
14
|
+
"body-cell-selected": "awsui_body-cell-selected_c6tup_1tfsn_144",
|
|
15
|
+
"has-footer": "awsui_has-footer_c6tup_1tfsn_144",
|
|
16
|
+
"body-cell-shaded": "awsui_body-cell-shaded_c6tup_1tfsn_154",
|
|
17
|
+
"body-cell-next-selected": "awsui_body-cell-next-selected_c6tup_1tfsn_176",
|
|
18
|
+
"body-cell-prev-selected": "awsui_body-cell-prev-selected_c6tup_1tfsn_180",
|
|
19
|
+
"body-cell-editor": "awsui_body-cell-editor_c6tup_1tfsn_204",
|
|
20
|
+
"body-cell-editor-form": "awsui_body-cell-editor-form_c6tup_1tfsn_226",
|
|
21
|
+
"body-cell-editor-row": "awsui_body-cell-editor-row_c6tup_1tfsn_235",
|
|
22
|
+
"body-cell-editor-controls": "awsui_body-cell-editor-controls_c6tup_1tfsn_245"
|
|
23
23
|
};
|
|
24
24
|
|
|
@@ -10,6 +10,8 @@ export interface TableTdElementProps {
|
|
|
10
10
|
isPrevSelected: boolean;
|
|
11
11
|
nativeAttributes?: Omit<React.HTMLAttributes<HTMLTableCellElement>, 'style' | 'className' | 'onClick'>;
|
|
12
12
|
onClick?: () => void;
|
|
13
|
+
onMouseEnter?: () => void;
|
|
14
|
+
onMouseLeave?: () => void;
|
|
13
15
|
children?: React.ReactNode;
|
|
14
16
|
isEvenRow?: boolean;
|
|
15
17
|
stripedRows?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"td-element.d.ts","sourceRoot":"lib/default/","sources":["table/body-cell/td-element.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,OAAO,CAAC;IACxB,cAAc,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,EAAE,OAAO,GAAG,WAAW,GAAG,SAAS,CAAC,CAAC;IACvG,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,cAAc,
|
|
1
|
+
{"version":3,"file":"td-element.d.ts","sourceRoot":"lib/default/","sources":["table/body-cell/td-element.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,OAAO,CAAC;IACxB,cAAc,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,EAAE,OAAO,GAAG,WAAW,GAAG,SAAS,CAAC,CAAC;IACvG,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,cAAc,kGAoD1B,CAAC"}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import React from 'react';
|
|
5
5
|
import styles from './styles.css.js';
|
|
6
|
-
export const TableTdElement = React.forwardRef(({ className, style, children, wrapLines, isFirstRow, isLastRow, isSelected, isNextSelected, isPrevSelected, nativeAttributes, onClick, isEvenRow, stripedRows, isVisualRefresh, hasSelection, hasFooter, }, ref) => {
|
|
7
|
-
return (React.createElement("td", Object.assign({ style: style, className: clsx(className, styles['body-cell'], wrapLines && styles['body-cell-wrap'], isFirstRow && styles['body-cell-first-row'], isLastRow && styles['body-cell-last-row'], isSelected && styles['body-cell-selected'], isNextSelected && styles['body-cell-next-selected'], isPrevSelected && styles['body-cell-prev-selected'], !isEvenRow && stripedRows && styles['body-cell-shaded'], stripedRows && styles['has-striped-rows'], isVisualRefresh && styles['is-visual-refresh'], hasSelection && styles['has-selection'], hasFooter && styles['has-footer']), onClick: onClick, ref: ref }, nativeAttributes), children));
|
|
6
|
+
export const TableTdElement = React.forwardRef(({ className, style, children, wrapLines, isFirstRow, isLastRow, isSelected, isNextSelected, isPrevSelected, nativeAttributes, onClick, onMouseEnter, onMouseLeave, isEvenRow, stripedRows, isVisualRefresh, hasSelection, hasFooter, }, ref) => {
|
|
7
|
+
return (React.createElement("td", Object.assign({ style: style, className: clsx(className, styles['body-cell'], wrapLines && styles['body-cell-wrap'], isFirstRow && styles['body-cell-first-row'], isLastRow && styles['body-cell-last-row'], isSelected && styles['body-cell-selected'], isNextSelected && styles['body-cell-next-selected'], isPrevSelected && styles['body-cell-prev-selected'], !isEvenRow && stripedRows && styles['body-cell-shaded'], stripedRows && styles['has-striped-rows'], isVisualRefresh && styles['is-visual-refresh'], hasSelection && styles['has-selection'], hasFooter && styles['has-footer']), onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: ref }, nativeAttributes), children));
|
|
8
8
|
});
|
|
9
9
|
//# sourceMappingURL=td-element.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"td-element.js","sourceRoot":"lib/default/","sources":["table/body-cell/td-element.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"td-element.js","sourceRoot":"lib/default/","sources":["table/body-cell/td-element.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAuBrC,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAC5C,CACE,EACE,SAAS,EACT,KAAK,EACL,QAAQ,EACR,SAAS,EACT,UAAU,EACV,SAAS,EACT,UAAU,EACV,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,WAAW,EACX,eAAe,EACf,YAAY,EACZ,SAAS,GACV,EACD,GAAG,EACH,EAAE;IACF,OAAO,CACL,0CACE,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAI,CACb,SAAS,EACT,MAAM,CAAC,WAAW,CAAC,EACnB,SAAS,IAAI,MAAM,CAAC,gBAAgB,CAAC,EACrC,UAAU,IAAI,MAAM,CAAC,qBAAqB,CAAC,EAC3C,SAAS,IAAI,MAAM,CAAC,oBAAoB,CAAC,EACzC,UAAU,IAAI,MAAM,CAAC,oBAAoB,CAAC,EAC1C,cAAc,IAAI,MAAM,CAAC,yBAAyB,CAAC,EACnD,cAAc,IAAI,MAAM,CAAC,yBAAyB,CAAC,EACnD,CAAC,SAAS,IAAI,WAAW,IAAI,MAAM,CAAC,kBAAkB,CAAC,EACvD,WAAW,IAAI,MAAM,CAAC,kBAAkB,CAAC,EACzC,eAAe,IAAI,MAAM,CAAC,mBAAmB,CAAC,EAC9C,YAAY,IAAI,MAAM,CAAC,eAAe,CAAC,EACvC,SAAS,IAAI,MAAM,CAAC,YAAY,CAAC,CAClC,EACD,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,GAAG,EAAE,GAAG,IACJ,gBAAgB,GAEnB,QAAQ,CACN,CACN,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\nimport styles from './styles.css.js';\n\nexport interface TableTdElementProps {\n className?: string;\n style?: React.CSSProperties;\n wrapLines: boolean | undefined;\n isFirstRow: boolean;\n isLastRow: boolean;\n isSelected: boolean;\n isNextSelected: boolean;\n isPrevSelected: boolean;\n nativeAttributes?: Omit<React.HTMLAttributes<HTMLTableCellElement>, 'style' | 'className' | 'onClick'>;\n onClick?: () => void;\n onMouseEnter?: () => void;\n onMouseLeave?: () => void;\n children?: React.ReactNode;\n isEvenRow?: boolean;\n stripedRows?: boolean;\n hasSelection?: boolean;\n hasFooter?: boolean;\n isVisualRefresh?: boolean;\n}\n\nexport const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElementProps>(\n (\n {\n className,\n style,\n children,\n wrapLines,\n isFirstRow,\n isLastRow,\n isSelected,\n isNextSelected,\n isPrevSelected,\n nativeAttributes,\n onClick,\n onMouseEnter,\n onMouseLeave,\n isEvenRow,\n stripedRows,\n isVisualRefresh,\n hasSelection,\n hasFooter,\n },\n ref\n ) => {\n return (\n <td\n style={style}\n className={clsx(\n className,\n styles['body-cell'],\n wrapLines && styles['body-cell-wrap'],\n isFirstRow && styles['body-cell-first-row'],\n isLastRow && styles['body-cell-last-row'],\n isSelected && styles['body-cell-selected'],\n isNextSelected && styles['body-cell-next-selected'],\n isPrevSelected && styles['body-cell-prev-selected'],\n !isEvenRow && stripedRows && styles['body-cell-shaded'],\n stripedRows && styles['has-striped-rows'],\n isVisualRefresh && styles['is-visual-refresh'],\n hasSelection && styles['has-selection'],\n hasFooter && styles['has-footer']\n )}\n onClick={onClick}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n ref={ref}\n {...nativeAttributes}\n >\n {children}\n </td>\n );\n }\n);\n"]}
|
|
@@ -56,6 +56,13 @@ export default class TableWrapper extends ComponentWrapper {
|
|
|
56
56
|
findTextFilter(): TextFilterWrapper | null;
|
|
57
57
|
findCollectionPreferences(): CollectionPreferencesWrapper | null;
|
|
58
58
|
findPagination(): PaginationWrapper | null;
|
|
59
|
+
/**
|
|
60
|
+
* Returns the button that activates inline editing for a table cell based on given row and column indices.
|
|
61
|
+
*
|
|
62
|
+
* @param rowIndex 1-based index of the row of the cell to select.
|
|
63
|
+
* @param columnIndex 1-based index of the column of the cell to select.
|
|
64
|
+
*/
|
|
65
|
+
findEditCellButton(rowIndex: number, columnIndex: number): ElementWrapper | null;
|
|
59
66
|
findEditingCell(): ElementWrapper | null;
|
|
60
67
|
private _findEditingCellControls;
|
|
61
68
|
findEditingCellSaveButton(): ElementWrapper | null;
|
|
@@ -115,6 +115,16 @@ class TableWrapper extends dom_1.ComponentWrapper {
|
|
|
115
115
|
findPagination() {
|
|
116
116
|
return this.findComponent(`.${styles_selectors_js_1.default['tools-pagination']}`, pagination_1.default);
|
|
117
117
|
}
|
|
118
|
+
/**
|
|
119
|
+
* Returns the button that activates inline editing for a table cell based on given row and column indices.
|
|
120
|
+
*
|
|
121
|
+
* @param rowIndex 1-based index of the row of the cell to select.
|
|
122
|
+
* @param columnIndex 1-based index of the column of the cell to select.
|
|
123
|
+
*/
|
|
124
|
+
findEditCellButton(rowIndex, columnIndex) {
|
|
125
|
+
var _a, _b;
|
|
126
|
+
return (_b = (_a = this.findBodyCell(rowIndex, columnIndex)) === null || _a === void 0 ? void 0 : _a.findByClassName(styles_selectors_js_3.default['body-cell-editor'])) !== null && _b !== void 0 ? _b : null;
|
|
127
|
+
}
|
|
118
128
|
findEditingCell() {
|
|
119
129
|
return this.findNativeTable().findByClassName(styles_selectors_js_3.default['body-cell-edit-active']);
|
|
120
130
|
}
|