@cloudscape-design/components-themeable 3.0.456 → 3.0.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.
- package/lib/internal/manifest.json +1 -1
- package/lib/internal/scss/table/header-cell/styles.scss +1 -20
- package/lib/internal/scss/table/resizer/styles.scss +26 -22
- package/lib/internal/template/collection-preferences/interfaces.d.ts +5 -1
- package/lib/internal/template/collection-preferences/interfaces.d.ts.map +1 -1
- package/lib/internal/template/collection-preferences/interfaces.js.map +1 -1
- package/lib/internal/template/internal/environment.js +1 -1
- package/lib/internal/template/internal/environment.json +1 -1
- package/lib/internal/template/table/header-cell/index.d.ts.map +1 -1
- package/lib/internal/template/table/header-cell/index.js +3 -3
- package/lib/internal/template/table/header-cell/index.js.map +1 -1
- package/lib/internal/template/table/header-cell/styles.css.js +24 -24
- package/lib/internal/template/table/header-cell/styles.scoped.css +38 -53
- package/lib/internal/template/table/header-cell/styles.selectors.js +24 -24
- package/lib/internal/template/table/header-cell/th-element.d.ts +1 -2
- package/lib/internal/template/table/header-cell/th-element.d.ts.map +1 -1
- package/lib/internal/template/table/header-cell/th-element.js +1 -2
- package/lib/internal/template/table/header-cell/th-element.js.map +1 -1
- package/lib/internal/template/table/interfaces.d.ts +3 -1
- package/lib/internal/template/table/interfaces.d.ts.map +1 -1
- package/lib/internal/template/table/interfaces.js.map +1 -1
- package/lib/internal/template/table/resizer/index.d.ts +3 -0
- package/lib/internal/template/table/resizer/index.d.ts.map +1 -1
- package/lib/internal/template/table/resizer/index.js +5 -2
- package/lib/internal/template/table/resizer/index.js.map +1 -1
- package/lib/internal/template/table/resizer/styles.css.js +8 -6
- package/lib/internal/template/table/resizer/styles.scoped.css +36 -28
- package/lib/internal/template/table/resizer/styles.selectors.js +8 -6
- package/lib/internal/template/table/thead.d.ts.map +1 -1
- package/lib/internal/template/table/thead.js +6 -3
- package/lib/internal/template/table/thead.js.map +1 -1
- package/package.json +1 -30
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
&-last-left {
|
|
42
42
|
box-shadow: awsui.$shadow-sticky-column-first;
|
|
43
43
|
clip-path: inset(0px -24px 0px 0px);
|
|
44
|
-
|
|
44
|
+
& > .resize-divider {
|
|
45
45
|
display: none;
|
|
46
46
|
}
|
|
47
47
|
}
|
|
@@ -55,25 +55,6 @@
|
|
|
55
55
|
transition-timing-function: awsui.$motion-easing-sticky;
|
|
56
56
|
}
|
|
57
57
|
}
|
|
58
|
-
|
|
59
|
-
&:not(:last-child):before {
|
|
60
|
-
$gap: calc(2 * #{awsui.$space-xs} + #{awsui.$space-xxxs});
|
|
61
|
-
|
|
62
|
-
content: '';
|
|
63
|
-
position: absolute;
|
|
64
|
-
right: 0;
|
|
65
|
-
bottom: 0;
|
|
66
|
-
top: 0;
|
|
67
|
-
min-height: awsui.$line-height-heading-xs;
|
|
68
|
-
max-height: calc(100% - #{$gap});
|
|
69
|
-
margin: auto;
|
|
70
|
-
border-left: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
|
|
71
|
-
box-sizing: border-box;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
&-resizable:not(:last-child):before {
|
|
75
|
-
border-left-color: awsui.$color-border-divider-interactive-default;
|
|
76
|
-
}
|
|
77
58
|
}
|
|
78
59
|
|
|
79
60
|
.sorting-icon {
|
|
@@ -15,6 +15,29 @@
|
|
|
15
15
|
$handle-width: awsui.$space-l;
|
|
16
16
|
$active-separator-width: 2px;
|
|
17
17
|
|
|
18
|
+
th:not(:last-child) > .divider {
|
|
19
|
+
$gap: calc(2 * #{awsui.$space-xs} + #{awsui.$space-xxxs});
|
|
20
|
+
|
|
21
|
+
position: absolute;
|
|
22
|
+
outline: none;
|
|
23
|
+
pointer-events: none;
|
|
24
|
+
right: 0;
|
|
25
|
+
bottom: 0;
|
|
26
|
+
top: 0;
|
|
27
|
+
min-height: awsui.$line-height-heading-xs;
|
|
28
|
+
max-height: calc(100% - #{$gap});
|
|
29
|
+
margin: auto;
|
|
30
|
+
border-left: awsui.$border-divider-section-width solid awsui.$color-border-divider-interactive-default;
|
|
31
|
+
box-sizing: border-box;
|
|
32
|
+
|
|
33
|
+
&-disabled {
|
|
34
|
+
border-left-color: awsui.$color-border-divider-default;
|
|
35
|
+
}
|
|
36
|
+
&-active {
|
|
37
|
+
border-left: $active-separator-width solid awsui.$color-border-divider-active;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
18
41
|
.resizer {
|
|
19
42
|
@include styles.styles-reset;
|
|
20
43
|
border: none;
|
|
@@ -38,32 +61,13 @@ $active-separator-width: 2px;
|
|
|
38
61
|
width: calc(#{$handle-width} / 2);
|
|
39
62
|
right: 0;
|
|
40
63
|
}
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
&-active {
|
|
44
|
-
&::before {
|
|
45
|
-
$gap: calc(2 * #{awsui.$space-xs} + #{awsui.$space-xxxs});
|
|
46
|
-
|
|
47
|
-
content: '';
|
|
48
|
-
position: absolute;
|
|
49
|
-
left: calc(#{$handle-width} / 2 - #{$active-separator-width});
|
|
50
|
-
bottom: 0;
|
|
51
|
-
top: 0;
|
|
52
|
-
min-height: awsui.$line-height-heading-xs;
|
|
53
|
-
max-height: calc(100% - #{$gap});
|
|
54
|
-
margin: auto;
|
|
55
|
-
border-left: $active-separator-width solid awsui.$color-border-divider-active;
|
|
56
|
-
box-sizing: border-box;
|
|
57
|
-
}
|
|
58
|
-
}
|
|
64
|
+
&:hover + .divider {
|
|
65
|
+
border-left: $active-separator-width solid awsui.$color-border-divider-active;
|
|
59
66
|
}
|
|
60
67
|
// stylelint-disable-next-line selector-combinator-disallowed-list
|
|
61
68
|
body[data-awsui-focus-visible='true'] &.has-focus {
|
|
62
|
-
@include styles.focus-highlight(awsui.$space-table-header-focus-outline-gutter);
|
|
69
|
+
@include styles.focus-highlight(calc(#{awsui.$space-table-header-focus-outline-gutter} - 2px));
|
|
63
70
|
position: absolute;
|
|
64
|
-
&::before {
|
|
65
|
-
box-shadow: inset 0 0 0 2px awsui.$color-border-item-focused;
|
|
66
|
-
}
|
|
67
71
|
}
|
|
68
72
|
}
|
|
69
73
|
|
|
@@ -92,6 +92,7 @@ export interface CollectionPreferencesProps<CustomPreferenceType = any> extends
|
|
|
92
92
|
* Configures the built-in content display preference for order and visibility of columns in a table.
|
|
93
93
|
*
|
|
94
94
|
* Once set, the component displays this preference in the modal.
|
|
95
|
+
* Cannot be used together with `visibleContentPreference`.
|
|
95
96
|
*
|
|
96
97
|
* It contains the following:
|
|
97
98
|
* - `title` (string) - Specifies the text displayed at the top of the preference.
|
|
@@ -114,9 +115,10 @@ export interface CollectionPreferencesProps<CustomPreferenceType = any> extends
|
|
|
114
115
|
*/
|
|
115
116
|
contentDisplayPreference?: CollectionPreferencesProps.ContentDisplayPreference;
|
|
116
117
|
/**
|
|
117
|
-
* Configures the built-in "visible content selection" preference (for example, visible
|
|
118
|
+
* Configures the built-in "visible content selection" preference (for example, visible sections in cards).
|
|
118
119
|
*
|
|
119
120
|
* If you set it, the component displays this preference in the modal.
|
|
121
|
+
* Cannot be used together with `contentDisplayPreference`.
|
|
120
122
|
*
|
|
121
123
|
* It contains the following:
|
|
122
124
|
* - `title` (string) - Specifies the text displayed at the top of the preference.
|
|
@@ -130,6 +132,8 @@ export interface CollectionPreferencesProps<CustomPreferenceType = any> extends
|
|
|
130
132
|
* - `editable` (boolean) - (Optional) Determines whether the user is able to toggle its visibility. This is `true` by default.
|
|
131
133
|
*
|
|
132
134
|
* You must set the current list of visible content `id`s in the `preferences.visibleContent` property.
|
|
135
|
+
*
|
|
136
|
+
* **Deprecated** in table, replaced by `contentDisplayPreference`.
|
|
133
137
|
*/
|
|
134
138
|
visibleContentPreference?: CollectionPreferencesProps.VisibleContentPreference;
|
|
135
139
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["collection-preferences/interfaces.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,0BAA0B,CAAC,oBAAoB,GAAG,GAAG,CAAE,SAAQ,kBAAkB;IAChG;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;;;;;;OAaG;IACH,kBAAkB,CAAC,EAAE,0BAA0B,CAAC,kBAAkB,CAAC;IACnE;;;;;;;;;;;OAWG;IACH,mBAAmB,CAAC,EAAE,0BAA0B,CAAC,mBAAmB,CAAC;IACrE;;;;;;;;;;;OAWG;IACH,qBAAqB,CAAC,EAAE,0BAA0B,CAAC,qBAAqB,CAAC;IACzE;;;;;;;;;;;OAWG;IACH,wBAAwB,CAAC,EAAE,0BAA0B,CAAC,wBAAwB,CAAC;IAC/E;;;;;;;;;;;OAWG;IACH,uBAAuB,CAAC,EAAE,0BAA0B,CAAC,uBAAuB,CAAC;IAC7E
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["collection-preferences/interfaces.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["collection-preferences/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 { NonCancelableEventHandler } from '../internal/events';\n\nexport interface CollectionPreferencesProps<CustomPreferenceType = any> extends BaseComponentProps {\n /**\n * Specifies the title of the preferences modal dialog. It is also used as an `aria-label` for the trigger button.\n * @i18n\n */\n title?: string;\n /**\n * Label of the confirm button in the modal footer.\n * @i18n\n */\n confirmLabel?: string;\n /**\n * Label of the cancel button in the modal footer.\n * @i18n\n */\n cancelLabel?: string;\n /**\n * Determines whether the preferences trigger button is disabled.\n */\n disabled?: boolean;\n /**\n * Configures the built-in \"page size selection\" preference.\n *\n * If you set it, the component displays this preference in the modal.\n *\n * It contains the following:\n * - `title` (string) - Specifies the text displayed at the top of the preference.\n * - `options` - Specifies an array of options for page size selection. Each entry contains:\n * - `value` (number) - The value for the radio button (that is, the number of items per page).\n * - `label` (string) - A label for the radio button (for example, \"10 resources\").\n *\n * You must set the current value in the `preferences.pageSize` property.\n * @i18n\n */\n pageSizePreference?: CollectionPreferencesProps.PageSizePreference;\n /**\n * Configures the built-in \"wrap lines\" preference.\n *\n * If you set it, the component displays this preference in the modal.\n *\n * It contains the following:\n * - `label` (string) - Specifies the label for the option checkbox.\n * - `description` (string) - Specifies the text displayed below the checkbox label.\n *\n * You must set the current value in the `preferences.wrapLines` property.\n * @i18n\n */\n wrapLinesPreference?: CollectionPreferencesProps.WrapLinesPreference;\n /**\n * Configures the built-in \"striped rows\" preference.\n *\n * If you set it, the component displays this preference in the modal.\n *\n * It contains the following:\n * - `label` (string) - Specifies the label for the option checkbox.\n * - `description` (string) - Specifies the text displayed below the checkbox label.\n *\n * You must set the current value in the `preferences.stripedRows` property.\n * @i18n\n */\n stripedRowsPreference?: CollectionPreferencesProps.StripedRowsPreference;\n /**\n * Configures the content density preference (Comfortable / Compact).\n *\n * If you set it, the component displays this preference in the modal.\n *\n * It contains the following:\n * - `label` (string) - Specifies the label for the option checkbox.\n * - `description` (string) - Specifies the text displayed below the checkbox label.\n *\n * You must set the current value in the `preferences.contentDensity` property.\n * @i18n\n */\n contentDensityPreference?: CollectionPreferencesProps.ContentDensityPreference;\n /**\n * Configures the sticky columns preference.\n *\n * You can set it for both left and right columns.\n *\n * It contains the following:\n * - `label` (string) - Specifies the label for each radio group.\n * - `description` (string) - Specifies the text displayed below each radio group label.\n *\n * You must set the current value in the `preferences.stickyColumns` property.\n * @i18n\n */\n stickyColumnsPreference?: CollectionPreferencesProps.StickyColumnsPreference;\n /**\n * Configures the built-in content display preference for order and visibility of columns in a table.\n *\n * Once set, the component displays this preference in the modal.\n *\n * It contains the following:\n * - `title` (string) - Specifies the text displayed at the top of the preference.\n * - `description` (string) - Specifies the description displayed below the title.\n * - `liveAnnouncementDndStarted` ((position: number, total: number) => string) - (Optional) Adds a message to be announced by screen readers when an option is picked.\n * - `liveAnnouncementDndDiscarded` (string) - (Optional) Adds a message to be announced by screen readers when a reordering action is canceled.\n * - `liveAnnouncementDndItemReordered` ((initialPosition: number, currentPosition: number, total: number) => string) - (Optional) Adds a message to be announced by screen readers when an item is being moved.\n * - `liveAnnouncementDndItemCommitted` ((initialPosition: number, finalPosition: number, total: number) => string) - (Optional) Adds a message to be announced by screen readers when a reordering action is committed.\n * - `dragHandleAriaDescription` (string) - (Optional) Adds an ARIA description for the drag handle.\n * - `dragHandleAriaLabel` (string) - (Optional) Adds an ARIA label for the drag handle.\n * - `options` - Specifies an array of options for reordering and visible content selection.\n *\n * Each option contains the following:\n * - `id` (string) - Corresponds to a table column `id`.\n * - `label` (string) - Specifies a short description of the content.\n * - `alwaysVisible` (boolean) - (Optional) Determines whether the visibility is always on and therefore cannot be toggled. This is set to `false` by default.\n *\n * You must provide an ordered list of the items to display in the `preferences.contentDisplay` property.\n * @i18n\n */\n contentDisplayPreference?: CollectionPreferencesProps.ContentDisplayPreference;\n /**\n * Configures the built-in \"visible content selection\" preference (for example, visible columns in a table).\n *\n * If you set it, the component displays this preference in the modal.\n *\n * It contains the following:\n * - `title` (string) - Specifies the text displayed at the top of the preference.\n * - `options` - Specifies an array of groups of options for visible content selection.\n *\n * Each group of options contains the following:\n * - `label` (string) - The text to display as a title for the options group.\n * - `options` - Specifies an aray of options in the group. Each option contains the following:\n * - `id` (string) - Corresponds to a column `id` for tables or to a section `id` for cards.\n * - `label` (string) - Specifies a short description of the content.\n * - `editable` (boolean) - (Optional) Determines whether the user is able to toggle its visibility. This is `true` by default.\n *\n * You must set the current list of visible content `id`s in the `preferences.visibleContent` property.\n */\n visibleContentPreference?: CollectionPreferencesProps.VisibleContentPreference;\n /**\n * Specifies the current preference values. This includes both built-in and custom preferences.\n *\n * It contains the following:\n * - `pageSize` (number) - (Optional)\n * - `wrapLines` (boolean) - (Optional)\n * - `contentDisplay` (ReadonlyArray<ContentDisplayItem>) - (Optional) Specifies the list of content and their visibility. The order of the elements influences the display.\n * - `visibleContent` (ReadonlyArray<string>) - Specifies the list of visible content `id`s. The order of the `id`s does not influence the display. If the `contentDisplay` property is set, this property is ignored.\n * - `custom` (CustomPreferenceType) - Specifies the value for your custom preference.\n */\n preferences?: CollectionPreferencesProps.Preferences<CustomPreferenceType>;\n /**\n * Configures custom preferences. The function receives two parameters:\n *\n * - `customValue` (CustomPreferenceType) - Current value for your custom preference. It is initialized using the value you provide in `preferences.custom`.\n * - `setCustomValue` - A function that is called to notify a state update.\n *\n * It should return the content of your custom preference, for example:\n * ```\n * (customValue, setCustomValue) => (\n * <Checkbox checked={customValue} onChange={({ detail }) => setCustomValue(detail.checked)} />\n * )\n * ```\n *\n * When the user confirms the changes, the new value is passed in the `detail.custom` property of the `onConfirm` listener.\n * When the user cancels the changes, the `customValue` is reset to the one present in `preferences.custom` property.\n *\n * **Display**\n * - If any of the built-in preferences (`pageSizePreference`, `wrapLinesPreference`, or `visibleContentPreference`) are displayed,\n * the custom content is displayed at the bottom of the left column within the modal.\n * - If no built-in preference is displayed, the custom content occupies the whole modal.\n */\n customPreference?: (\n customValue: CustomPreferenceType,\n setCustomValue: React.Dispatch<CustomPreferenceType>\n ) => React.ReactNode;\n /**\n * Called when the user cancels a preference change using the cancel button in the modal footer or by dismissing the modal.\n */\n onCancel?: NonCancelableEventHandler;\n /**\n * Called when the user confirms a preference change using the confirm button in the modal footer.\n *\n * The event `detail` contains the following:\n * - `contentDensity` (boolean) - (Optional) The current content density preference value. Available only if you specify the `contentDensityPreference` property.\n * - `contentDisplay` (ReadonlyArray<ContentDisplayItem>) - (Optional) The ordered list of table columns and their visibility. Available only if you specify the `contentDisplayPreference` property.\n * - `custom` (CustomPreferenceType) - (Optional) The selected value for your custom preference.\n * - `pageSize` (number) - (Optional) The selected page size value. Available only if you specify the `pageSizePreference` property.\n * - `stickyColumns` (CollectionPreferencesProps.StickyColumns) - (Optional) The current sticky columns preference value. Available only if you specify the `stickyColumnsPreference` property.\n * - `stripedRows` (boolean) - (Optional) The current striped rows preference value. Available only if you specify the `stripedRowsPreference` property.\n * - `visibleContent` (ReadonlyArray<string>) - (Optional) The list of selected content `id`s. Available only if you specify the `visibleContentPreference` property.\n * - `wrapLines` (boolean) - (Optional) The current line wrapping preference value. Available only if you specify the `wrapLinesPreference` property.\n *\n * The values for all configured preferences are present even if the user didn't change their values.\n */\n onConfirm?: NonCancelableEventHandler<CollectionPreferencesProps.Preferences<CustomPreferenceType>>;\n}\n\nexport namespace CollectionPreferencesProps {\n export interface Preferences<CustomPreferenceType = any> {\n pageSize?: number;\n wrapLines?: boolean;\n stripedRows?: boolean;\n contentDensity?: 'comfortable' | 'compact';\n visibleContent?: ReadonlyArray<string>;\n stickyColumns?: StickyColumns;\n contentDisplay?: ReadonlyArray<ContentDisplayItem>;\n custom?: CustomPreferenceType;\n }\n\n export interface ContentDisplayPreference {\n title?: string;\n description?: string;\n options: ReadonlyArray<CollectionPreferencesProps.ContentDisplayOption>;\n liveAnnouncementDndStarted?: (position: number, total: number) => string;\n liveAnnouncementDndItemReordered?: (initialPosition: number, currentPosition: number, total: number) => string;\n liveAnnouncementDndItemCommitted?: (initialPosition: number, finalPosition: number, total: number) => string;\n liveAnnouncementDndDiscarded?: string;\n dragHandleAriaLabel?: string;\n dragHandleAriaDescription?: string;\n }\n\n export interface ContentDisplayOption {\n id: string;\n label: string;\n alwaysVisible?: boolean;\n }\n\n export interface ContentDisplayItem {\n id: string;\n visible: boolean;\n }\n\n export interface VisibleContentPreference {\n title: string;\n options: ReadonlyArray<CollectionPreferencesProps.VisibleContentOptionsGroup>;\n }\n\n export interface VisibleContentOptionsGroup {\n label: string;\n options: ReadonlyArray<CollectionPreferencesProps.VisibleContentOption>;\n }\n\n export interface VisibleContentOption {\n id: string;\n label: string;\n editable?: boolean;\n }\n\n export interface PageSizePreference {\n title?: string;\n options: ReadonlyArray<PageSizeOption>;\n }\n\n export interface PageSizeOption {\n value: number;\n label?: string;\n }\n\n export interface WrapLinesPreference {\n label?: string;\n description?: string;\n }\n\n export interface StripedRowsPreference {\n label?: string;\n description?: string;\n }\n\n export interface ContentDensityPreference {\n label?: string;\n description?: string;\n }\n\n interface StickyColumns {\n first?: number;\n last?: number;\n }\n\n interface StickyColumnPreference {\n title: string;\n description: string;\n options: ReadonlyArray<{\n label: string;\n value: number;\n }>;\n }\n export interface StickyColumnsPreference {\n firstColumns?: StickyColumnPreference;\n lastColumns?: StickyColumnPreference;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["collection-preferences/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 { NonCancelableEventHandler } from '../internal/events';\n\nexport interface CollectionPreferencesProps<CustomPreferenceType = any> extends BaseComponentProps {\n /**\n * Specifies the title of the preferences modal dialog. It is also used as an `aria-label` for the trigger button.\n * @i18n\n */\n title?: string;\n /**\n * Label of the confirm button in the modal footer.\n * @i18n\n */\n confirmLabel?: string;\n /**\n * Label of the cancel button in the modal footer.\n * @i18n\n */\n cancelLabel?: string;\n /**\n * Determines whether the preferences trigger button is disabled.\n */\n disabled?: boolean;\n /**\n * Configures the built-in \"page size selection\" preference.\n *\n * If you set it, the component displays this preference in the modal.\n *\n * It contains the following:\n * - `title` (string) - Specifies the text displayed at the top of the preference.\n * - `options` - Specifies an array of options for page size selection. Each entry contains:\n * - `value` (number) - The value for the radio button (that is, the number of items per page).\n * - `label` (string) - A label for the radio button (for example, \"10 resources\").\n *\n * You must set the current value in the `preferences.pageSize` property.\n * @i18n\n */\n pageSizePreference?: CollectionPreferencesProps.PageSizePreference;\n /**\n * Configures the built-in \"wrap lines\" preference.\n *\n * If you set it, the component displays this preference in the modal.\n *\n * It contains the following:\n * - `label` (string) - Specifies the label for the option checkbox.\n * - `description` (string) - Specifies the text displayed below the checkbox label.\n *\n * You must set the current value in the `preferences.wrapLines` property.\n * @i18n\n */\n wrapLinesPreference?: CollectionPreferencesProps.WrapLinesPreference;\n /**\n * Configures the built-in \"striped rows\" preference.\n *\n * If you set it, the component displays this preference in the modal.\n *\n * It contains the following:\n * - `label` (string) - Specifies the label for the option checkbox.\n * - `description` (string) - Specifies the text displayed below the checkbox label.\n *\n * You must set the current value in the `preferences.stripedRows` property.\n * @i18n\n */\n stripedRowsPreference?: CollectionPreferencesProps.StripedRowsPreference;\n /**\n * Configures the content density preference (Comfortable / Compact).\n *\n * If you set it, the component displays this preference in the modal.\n *\n * It contains the following:\n * - `label` (string) - Specifies the label for the option checkbox.\n * - `description` (string) - Specifies the text displayed below the checkbox label.\n *\n * You must set the current value in the `preferences.contentDensity` property.\n * @i18n\n */\n contentDensityPreference?: CollectionPreferencesProps.ContentDensityPreference;\n /**\n * Configures the sticky columns preference.\n *\n * You can set it for both left and right columns.\n *\n * It contains the following:\n * - `label` (string) - Specifies the label for each radio group.\n * - `description` (string) - Specifies the text displayed below each radio group label.\n *\n * You must set the current value in the `preferences.stickyColumns` property.\n * @i18n\n */\n stickyColumnsPreference?: CollectionPreferencesProps.StickyColumnsPreference;\n /**\n * Configures the built-in content display preference for order and visibility of columns in a table.\n *\n * Once set, the component displays this preference in the modal.\n * Cannot be used together with `visibleContentPreference`.\n *\n * It contains the following:\n * - `title` (string) - Specifies the text displayed at the top of the preference.\n * - `description` (string) - Specifies the description displayed below the title.\n * - `liveAnnouncementDndStarted` ((position: number, total: number) => string) - (Optional) Adds a message to be announced by screen readers when an option is picked.\n * - `liveAnnouncementDndDiscarded` (string) - (Optional) Adds a message to be announced by screen readers when a reordering action is canceled.\n * - `liveAnnouncementDndItemReordered` ((initialPosition: number, currentPosition: number, total: number) => string) - (Optional) Adds a message to be announced by screen readers when an item is being moved.\n * - `liveAnnouncementDndItemCommitted` ((initialPosition: number, finalPosition: number, total: number) => string) - (Optional) Adds a message to be announced by screen readers when a reordering action is committed.\n * - `dragHandleAriaDescription` (string) - (Optional) Adds an ARIA description for the drag handle.\n * - `dragHandleAriaLabel` (string) - (Optional) Adds an ARIA label for the drag handle.\n * - `options` - Specifies an array of options for reordering and visible content selection.\n *\n * Each option contains the following:\n * - `id` (string) - Corresponds to a table column `id`.\n * - `label` (string) - Specifies a short description of the content.\n * - `alwaysVisible` (boolean) - (Optional) Determines whether the visibility is always on and therefore cannot be toggled. This is set to `false` by default.\n *\n * You must provide an ordered list of the items to display in the `preferences.contentDisplay` property.\n * @i18n\n */\n contentDisplayPreference?: CollectionPreferencesProps.ContentDisplayPreference;\n /**\n * Configures the built-in \"visible content selection\" preference (for example, visible sections in cards).\n *\n * If you set it, the component displays this preference in the modal.\n * Cannot be used together with `contentDisplayPreference`.\n *\n * It contains the following:\n * - `title` (string) - Specifies the text displayed at the top of the preference.\n * - `options` - Specifies an array of groups of options for visible content selection.\n *\n * Each group of options contains the following:\n * - `label` (string) - The text to display as a title for the options group.\n * - `options` - Specifies an aray of options in the group. Each option contains the following:\n * - `id` (string) - Corresponds to a column `id` for tables or to a section `id` for cards.\n * - `label` (string) - Specifies a short description of the content.\n * - `editable` (boolean) - (Optional) Determines whether the user is able to toggle its visibility. This is `true` by default.\n *\n * You must set the current list of visible content `id`s in the `preferences.visibleContent` property.\n *\n * **Deprecated** in table, replaced by `contentDisplayPreference`.\n */\n visibleContentPreference?: CollectionPreferencesProps.VisibleContentPreference;\n /**\n * Specifies the current preference values. This includes both built-in and custom preferences.\n *\n * It contains the following:\n * - `pageSize` (number) - (Optional)\n * - `wrapLines` (boolean) - (Optional)\n * - `contentDisplay` (ReadonlyArray<ContentDisplayItem>) - (Optional) Specifies the list of content and their visibility. The order of the elements influences the display.\n * - `visibleContent` (ReadonlyArray<string>) - Specifies the list of visible content `id`s. The order of the `id`s does not influence the display. If the `contentDisplay` property is set, this property is ignored.\n * - `custom` (CustomPreferenceType) - Specifies the value for your custom preference.\n */\n preferences?: CollectionPreferencesProps.Preferences<CustomPreferenceType>;\n /**\n * Configures custom preferences. The function receives two parameters:\n *\n * - `customValue` (CustomPreferenceType) - Current value for your custom preference. It is initialized using the value you provide in `preferences.custom`.\n * - `setCustomValue` - A function that is called to notify a state update.\n *\n * It should return the content of your custom preference, for example:\n * ```\n * (customValue, setCustomValue) => (\n * <Checkbox checked={customValue} onChange={({ detail }) => setCustomValue(detail.checked)} />\n * )\n * ```\n *\n * When the user confirms the changes, the new value is passed in the `detail.custom` property of the `onConfirm` listener.\n * When the user cancels the changes, the `customValue` is reset to the one present in `preferences.custom` property.\n *\n * **Display**\n * - If any of the built-in preferences (`pageSizePreference`, `wrapLinesPreference`, or `visibleContentPreference`) are displayed,\n * the custom content is displayed at the bottom of the left column within the modal.\n * - If no built-in preference is displayed, the custom content occupies the whole modal.\n */\n customPreference?: (\n customValue: CustomPreferenceType,\n setCustomValue: React.Dispatch<CustomPreferenceType>\n ) => React.ReactNode;\n /**\n * Called when the user cancels a preference change using the cancel button in the modal footer or by dismissing the modal.\n */\n onCancel?: NonCancelableEventHandler;\n /**\n * Called when the user confirms a preference change using the confirm button in the modal footer.\n *\n * The event `detail` contains the following:\n * - `contentDensity` (boolean) - (Optional) The current content density preference value. Available only if you specify the `contentDensityPreference` property.\n * - `contentDisplay` (ReadonlyArray<ContentDisplayItem>) - (Optional) The ordered list of table columns and their visibility. Available only if you specify the `contentDisplayPreference` property.\n * - `custom` (CustomPreferenceType) - (Optional) The selected value for your custom preference.\n * - `pageSize` (number) - (Optional) The selected page size value. Available only if you specify the `pageSizePreference` property.\n * - `stickyColumns` (CollectionPreferencesProps.StickyColumns) - (Optional) The current sticky columns preference value. Available only if you specify the `stickyColumnsPreference` property.\n * - `stripedRows` (boolean) - (Optional) The current striped rows preference value. Available only if you specify the `stripedRowsPreference` property.\n * - `visibleContent` (ReadonlyArray<string>) - (Optional) The list of selected content `id`s. Available only if you specify the `visibleContentPreference` property.\n * - `wrapLines` (boolean) - (Optional) The current line wrapping preference value. Available only if you specify the `wrapLinesPreference` property.\n *\n * The values for all configured preferences are present even if the user didn't change their values.\n */\n onConfirm?: NonCancelableEventHandler<CollectionPreferencesProps.Preferences<CustomPreferenceType>>;\n}\n\nexport namespace CollectionPreferencesProps {\n export interface Preferences<CustomPreferenceType = any> {\n pageSize?: number;\n wrapLines?: boolean;\n stripedRows?: boolean;\n contentDensity?: 'comfortable' | 'compact';\n visibleContent?: ReadonlyArray<string>;\n stickyColumns?: StickyColumns;\n contentDisplay?: ReadonlyArray<ContentDisplayItem>;\n custom?: CustomPreferenceType;\n }\n\n export interface ContentDisplayPreference {\n title?: string;\n description?: string;\n options: ReadonlyArray<CollectionPreferencesProps.ContentDisplayOption>;\n liveAnnouncementDndStarted?: (position: number, total: number) => string;\n liveAnnouncementDndItemReordered?: (initialPosition: number, currentPosition: number, total: number) => string;\n liveAnnouncementDndItemCommitted?: (initialPosition: number, finalPosition: number, total: number) => string;\n liveAnnouncementDndDiscarded?: string;\n dragHandleAriaLabel?: string;\n dragHandleAriaDescription?: string;\n }\n\n export interface ContentDisplayOption {\n id: string;\n label: string;\n alwaysVisible?: boolean;\n }\n\n export interface ContentDisplayItem {\n id: string;\n visible: boolean;\n }\n\n export interface VisibleContentPreference {\n title: string;\n options: ReadonlyArray<CollectionPreferencesProps.VisibleContentOptionsGroup>;\n }\n\n export interface VisibleContentOptionsGroup {\n label: string;\n options: ReadonlyArray<CollectionPreferencesProps.VisibleContentOption>;\n }\n\n export interface VisibleContentOption {\n id: string;\n label: string;\n editable?: boolean;\n }\n\n export interface PageSizePreference {\n title?: string;\n options: ReadonlyArray<PageSizeOption>;\n }\n\n export interface PageSizeOption {\n value: number;\n label?: string;\n }\n\n export interface WrapLinesPreference {\n label?: string;\n description?: string;\n }\n\n export interface StripedRowsPreference {\n label?: string;\n description?: string;\n }\n\n export interface ContentDensityPreference {\n label?: string;\n description?: string;\n }\n\n interface StickyColumns {\n first?: number;\n last?: number;\n }\n\n interface StickyColumnPreference {\n title: string;\n description: string;\n options: ReadonlyArray<{\n label: string;\n value: number;\n }>;\n }\n export interface StickyColumnsPreference {\n firstColumns?: StickyColumnPreference;\n lastColumns?: StickyColumnPreference;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["table/header-cell/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAM3C,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG1C,UAAU,oBAAoB,CAAC,QAAQ;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,UAAU,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC9C,mBAAmB,CAAC,EAAE,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACzD,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,MAAM,EAAE,UAAU,CAAC,YAAY,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;IACpD,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAChE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,WAAW,CAAC;IACtB,WAAW,EAAE,kBAAkB,CAAC;IAChC,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;IACxC,gBAAgB,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACjC,SAAS,EAAE,SAAS,CAAC;IACrB,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,wBAAgB,eAAe,CAAC,QAAQ,EAAE,EACxC,SAAS,EACT,KAAK,EACL,QAAQ,EACR,MAAM,EACN,mBAAmB,EACnB,iBAAiB,EACjB,eAAe,EACf,SAAS,EACT,gBAAgB,EAChB,MAAM,EACN,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,gBAAgB,EAChB,cAAc,EACd,UAAU,EACV,QAAQ,EACR,WAAW,EACX,OAAO,EACP,SAAS,EACT,sBAAsB,GACvB,EAAE,oBAAoB,CAAC,QAAQ,CAAC,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["table/header-cell/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAM3C,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG1C,UAAU,oBAAoB,CAAC,QAAQ;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,UAAU,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC9C,mBAAmB,CAAC,EAAE,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACzD,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,MAAM,EAAE,UAAU,CAAC,YAAY,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;IACpD,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAChE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,WAAW,CAAC;IACtB,WAAW,EAAE,kBAAkB,CAAC;IAChC,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;IACxC,gBAAgB,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACjC,SAAS,EAAE,SAAS,CAAC;IACrB,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,wBAAgB,eAAe,CAAC,QAAQ,EAAE,EACxC,SAAS,EACT,KAAK,EACL,QAAQ,EACR,MAAM,EACN,mBAAmB,EACnB,iBAAiB,EACjB,eAAe,EACf,SAAS,EACT,gBAAgB,EAChB,MAAM,EACN,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,gBAAgB,EAChB,cAAc,EACd,UAAU,EACV,QAAQ,EACR,WAAW,EACX,OAAO,EACP,SAAS,EACT,sBAAsB,GACvB,EAAE,oBAAoB,CAAC,QAAQ,CAAC,eA8FhC"}
|
|
@@ -6,7 +6,7 @@ import InternalIcon from '../../icon/internal';
|
|
|
6
6
|
import { KeyCode } from '../../internal/keycode';
|
|
7
7
|
import { getSortingIconName, getSortingStatus, isSorted } from './utils';
|
|
8
8
|
import styles from './styles.css.js';
|
|
9
|
-
import { Resizer } from '../resizer';
|
|
9
|
+
import { Divider, Resizer } from '../resizer';
|
|
10
10
|
import { useUniqueId } from '../../internal/hooks/use-unique-id';
|
|
11
11
|
import { useInternalI18n } from '../../i18n/context';
|
|
12
12
|
import { TableThElement } from './th-element';
|
|
@@ -31,7 +31,7 @@ export function TableHeaderCell({ className, style, tabIndex, column, activeSort
|
|
|
31
31
|
}
|
|
32
32
|
};
|
|
33
33
|
const headerId = useUniqueId('table-header-');
|
|
34
|
-
return (React.createElement(TableThElement, { className: className, style: style, cellRef: cellRef, sortingStatus: sortingStatus, sortingDisabled: sortingDisabled, hidden: hidden, colIndex: colIndex,
|
|
34
|
+
return (React.createElement(TableThElement, { className: className, style: style, cellRef: cellRef, sortingStatus: sortingStatus, sortingDisabled: sortingDisabled, hidden: hidden, colIndex: colIndex, columnId: columnId, stickyState: stickyState, tableRole: tableRole },
|
|
35
35
|
React.createElement("div", Object.assign({ "data-focus-id": `sorting-control-${String(columnId)}`, className: clsx(styles['header-cell-content'], {
|
|
36
36
|
[styles['header-cell-fake-focus']]: focusedComponent === `sorting-control-${String(columnId)}`,
|
|
37
37
|
}), "aria-label": column.ariaLabel
|
|
@@ -54,6 +54,6 @@ export function TableHeaderCell({ className, style, tabIndex, column, activeSort
|
|
|
54
54
|
React.createElement(InternalIcon, { name: "edit" }))) : null),
|
|
55
55
|
sortingStatus && (React.createElement("span", { className: styles['sorting-icon'] },
|
|
56
56
|
React.createElement(InternalIcon, { name: getSortingIconName(sortingStatus) })))),
|
|
57
|
-
resizableColumns
|
|
57
|
+
resizableColumns ? (React.createElement(Resizer, { tabIndex: tabIndex, focusId: `resize-control-${String(columnId)}`, showFocusRing: focusedComponent === `resize-control-${String(columnId)}`, onWidthUpdate: newWidth => updateColumn(columnId, newWidth), onWidthUpdateCommit: onResizeFinish, ariaLabelledby: headerId, minWidth: typeof column.minWidth === 'string' ? parseInt(column.minWidth) : column.minWidth, roleDescription: i18n('ariaLabels.resizerRoleDescription', resizerRoleDescription) })) : (React.createElement(Divider, { className: styles['resize-divider'] }))));
|
|
58
58
|
}
|
|
59
59
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["table/header-cell/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACzE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["table/header-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 React from 'react';\nimport InternalIcon from '../../icon/internal';\nimport { KeyCode } from '../../internal/keycode';\nimport { TableProps } from '../interfaces';\nimport { getSortingIconName, getSortingStatus, isSorted } from './utils';\nimport styles from './styles.css.js';\nimport { Divider, Resizer } from '../resizer';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\nimport { useInternalI18n } from '../../i18n/context';\nimport { StickyColumnsModel } from '../sticky-columns';\nimport { TableRole } from '../table-role';\nimport { TableThElement } from './th-element';\n\ninterface TableHeaderCellProps<ItemType> {\n className?: string;\n style?: React.CSSProperties;\n tabIndex: number;\n column: TableProps.ColumnDefinition<ItemType>;\n activeSortingColumn?: TableProps.SortingColumn<ItemType>;\n sortingDescending?: boolean;\n sortingDisabled?: boolean;\n wrapLines?: boolean;\n hidden?: boolean;\n onClick(detail: TableProps.SortingState<any>): void;\n onResizeFinish: () => void;\n colIndex: number;\n updateColumn: (columnId: PropertyKey, newWidth: number) => void;\n resizableColumns?: boolean;\n isEditable?: boolean;\n columnId: PropertyKey;\n stickyState: StickyColumnsModel;\n cellRef: React.RefCallback<HTMLElement>;\n focusedComponent?: null | string;\n tableRole: TableRole;\n resizerRoleDescription?: string;\n}\n\nexport function TableHeaderCell<ItemType>({\n className,\n style,\n tabIndex,\n column,\n activeSortingColumn,\n sortingDescending,\n sortingDisabled,\n wrapLines,\n focusedComponent,\n hidden,\n onClick,\n colIndex,\n updateColumn,\n resizableColumns,\n onResizeFinish,\n isEditable,\n columnId,\n stickyState,\n cellRef,\n tableRole,\n resizerRoleDescription,\n}: TableHeaderCellProps<ItemType>) {\n const i18n = useInternalI18n('table');\n const sortable = !!column.sortingComparator || !!column.sortingField;\n const sorted = !!activeSortingColumn && isSorted(column, activeSortingColumn);\n const sortingStatus = getSortingStatus(sortable, sorted, !!sortingDescending, !!sortingDisabled);\n const handleClick = () =>\n onClick({\n sortingColumn: column,\n isDescending: sorted ? !sortingDescending : false,\n });\n\n // Elements with role=\"button\" do not have the default behavior of <button>, where pressing\n // Enter or Space will trigger a click event. Therefore we need to add this ourselves.\n // The native <button> element cannot be used due to a misaligned implementation in Firefox:\n // https://bugzilla.mozilla.org/show_bug.cgi?id=843003\n const handleKeyPress = ({ nativeEvent: e }: React.KeyboardEvent) => {\n if (e.keyCode === KeyCode.enter || e.keyCode === KeyCode.space) {\n e.preventDefault();\n handleClick();\n }\n };\n\n const headerId = useUniqueId('table-header-');\n\n return (\n <TableThElement\n className={className}\n style={style}\n cellRef={cellRef}\n sortingStatus={sortingStatus}\n sortingDisabled={sortingDisabled}\n hidden={hidden}\n colIndex={colIndex}\n columnId={columnId}\n stickyState={stickyState}\n tableRole={tableRole}\n >\n <div\n data-focus-id={`sorting-control-${String(columnId)}`}\n className={clsx(styles['header-cell-content'], {\n [styles['header-cell-fake-focus']]: focusedComponent === `sorting-control-${String(columnId)}`,\n })}\n aria-label={\n column.ariaLabel\n ? column.ariaLabel({\n sorted: sorted,\n descending: sorted && !!sortingDescending,\n disabled: !!sortingDisabled,\n })\n : undefined\n }\n {...(sortingStatus && !sortingDisabled\n ? {\n onKeyPress: handleKeyPress,\n tabIndex: tabIndex,\n role: 'button',\n onClick: handleClick,\n }\n : {})}\n >\n <div className={clsx(styles['header-cell-text'], wrapLines && styles['header-cell-text-wrap'])} id={headerId}>\n {column.header}\n {isEditable ? (\n <span\n className={styles['edit-icon']}\n role=\"img\"\n aria-label={i18n('columnDefinitions.editConfig.editIconAriaLabel', column.editConfig?.editIconAriaLabel)}\n >\n <InternalIcon name=\"edit\" />\n </span>\n ) : null}\n </div>\n {sortingStatus && (\n <span className={styles['sorting-icon']}>\n <InternalIcon name={getSortingIconName(sortingStatus)} />\n </span>\n )}\n </div>\n {resizableColumns ? (\n <Resizer\n tabIndex={tabIndex}\n focusId={`resize-control-${String(columnId)}`}\n showFocusRing={focusedComponent === `resize-control-${String(columnId)}`}\n onWidthUpdate={newWidth => updateColumn(columnId, newWidth)}\n onWidthUpdateCommit={onResizeFinish}\n ariaLabelledby={headerId}\n minWidth={typeof column.minWidth === 'string' ? parseInt(column.minWidth) : column.minWidth}\n roleDescription={i18n('ariaLabels.resizerRoleDescription', resizerRoleDescription)}\n />\n ) : (\n <Divider className={styles['resize-divider']} />\n )}\n </TableThElement>\n );\n}\n"]}
|
|
@@ -1,29 +1,29 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"header-cell": "awsui_header-
|
|
5
|
-
"header-cell-sticky": "awsui_header-cell-
|
|
6
|
-
"header-cell-stuck": "awsui_header-cell-
|
|
7
|
-
"header-cell-variant-full-page": "awsui_header-cell-variant-full-
|
|
8
|
-
"header-cell-hidden": "awsui_header-cell-
|
|
9
|
-
"header-cell-sortable": "awsui_header-cell-
|
|
10
|
-
"sticky-cell": "awsui_sticky-
|
|
11
|
-
"sticky-cell-pad-left": "awsui_sticky-cell-pad-
|
|
12
|
-
"has-selection": "awsui_has-
|
|
13
|
-
"sticky-cell-last-left": "awsui_sticky-cell-last-
|
|
14
|
-
"
|
|
15
|
-
"sticky-cell-last-right": "awsui_sticky-cell-last-
|
|
16
|
-
"sorting-icon": "awsui_sorting-
|
|
17
|
-
"edit-icon": "awsui_edit-
|
|
18
|
-
"header-cell-content": "awsui_header-cell-
|
|
19
|
-
"header-cell-fake-focus": "awsui_header-cell-fake-
|
|
20
|
-
"header-cell-disabled": "awsui_header-cell-
|
|
21
|
-
"header-cell-sorted": "awsui_header-cell-
|
|
22
|
-
"header-cell-text": "awsui_header-cell-
|
|
23
|
-
"header-cell-text-wrap": "awsui_header-cell-text-
|
|
24
|
-
"header-cell-ascending": "awsui_header-cell-
|
|
25
|
-
"header-cell-descending": "awsui_header-cell-
|
|
26
|
-
"is-visual-refresh": "awsui_is-visual-
|
|
27
|
-
"has-striped-rows": "awsui_has-striped-
|
|
4
|
+
"header-cell": "awsui_header-cell_1spae_1xghj_93",
|
|
5
|
+
"header-cell-sticky": "awsui_header-cell-sticky_1spae_1xghj_105",
|
|
6
|
+
"header-cell-stuck": "awsui_header-cell-stuck_1spae_1xghj_108",
|
|
7
|
+
"header-cell-variant-full-page": "awsui_header-cell-variant-full-page_1spae_1xghj_108",
|
|
8
|
+
"header-cell-hidden": "awsui_header-cell-hidden_1spae_1xghj_111",
|
|
9
|
+
"header-cell-sortable": "awsui_header-cell-sortable_1spae_1xghj_114",
|
|
10
|
+
"sticky-cell": "awsui_sticky-cell_1spae_1xghj_117",
|
|
11
|
+
"sticky-cell-pad-left": "awsui_sticky-cell-pad-left_1spae_1xghj_125",
|
|
12
|
+
"has-selection": "awsui_has-selection_1spae_1xghj_125",
|
|
13
|
+
"sticky-cell-last-left": "awsui_sticky-cell-last-left_1spae_1xghj_128",
|
|
14
|
+
"resize-divider": "awsui_resize-divider_1spae_1xghj_132",
|
|
15
|
+
"sticky-cell-last-right": "awsui_sticky-cell-last-right_1spae_1xghj_135",
|
|
16
|
+
"sorting-icon": "awsui_sorting-icon_1spae_1xghj_150",
|
|
17
|
+
"edit-icon": "awsui_edit-icon_1spae_1xghj_158",
|
|
18
|
+
"header-cell-content": "awsui_header-cell-content_1spae_1xghj_164",
|
|
19
|
+
"header-cell-fake-focus": "awsui_header-cell-fake-focus_1spae_1xghj_193",
|
|
20
|
+
"header-cell-disabled": "awsui_header-cell-disabled_1spae_1xghj_211",
|
|
21
|
+
"header-cell-sorted": "awsui_header-cell-sorted_1spae_1xghj_211",
|
|
22
|
+
"header-cell-text": "awsui_header-cell-text_1spae_1xghj_225",
|
|
23
|
+
"header-cell-text-wrap": "awsui_header-cell-text-wrap_1spae_1xghj_230",
|
|
24
|
+
"header-cell-ascending": "awsui_header-cell-ascending_1spae_1xghj_236",
|
|
25
|
+
"header-cell-descending": "awsui_header-cell-descending_1spae_1xghj_237",
|
|
26
|
+
"is-visual-refresh": "awsui_is-visual-refresh_1spae_1xghj_247",
|
|
27
|
+
"has-striped-rows": "awsui_has-striped-rows_1spae_1xghj_258"
|
|
28
28
|
};
|
|
29
29
|
|
|
@@ -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_header-
|
|
93
|
+
.awsui_header-cell_1spae_1xghj_93:not(#\9) {
|
|
94
94
|
position: relative;
|
|
95
95
|
text-align: left;
|
|
96
96
|
box-sizing: border-box;
|
|
@@ -102,19 +102,19 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
102
102
|
-moz-osx-font-smoothing: var(--font-smoothing-moz-osx-fw8n0n, auto);
|
|
103
103
|
padding: var(--space-scaled-xxs-t7ij38, 4px) var(--space-scaled-xs-x91h81, 8px);
|
|
104
104
|
}
|
|
105
|
-
.awsui_header-cell-
|
|
105
|
+
.awsui_header-cell-sticky_1spae_1xghj_105:not(#\9) {
|
|
106
106
|
border-bottom: var(--border-table-sticky-width-igarh5, 0px) solid var(--color-border-divider-default-cr3oi6, #eaeded);
|
|
107
107
|
}
|
|
108
|
-
.awsui_header-cell-
|
|
108
|
+
.awsui_header-cell-stuck_1spae_1xghj_108:not(#\9):not(.awsui_header-cell-variant-full-page_1spae_1xghj_108) {
|
|
109
109
|
border-bottom-color: transparent;
|
|
110
110
|
}
|
|
111
|
-
.awsui_header-cell-variant-full-
|
|
111
|
+
.awsui_header-cell-variant-full-page_1spae_1xghj_108.awsui_header-cell-hidden_1spae_1xghj_111:not(#\9) {
|
|
112
112
|
border-bottom-color: transparent;
|
|
113
113
|
}
|
|
114
|
-
.awsui_header-
|
|
114
|
+
.awsui_header-cell_1spae_1xghj_93:not(#\9):last-child, .awsui_header-cell_1spae_1xghj_93.awsui_header-cell-sortable_1spae_1xghj_114:not(#\9) {
|
|
115
115
|
padding-right: var(--space-xs-xf5ch3, 8px);
|
|
116
116
|
}
|
|
117
|
-
.awsui_header-
|
|
117
|
+
.awsui_header-cell_1spae_1xghj_93.awsui_sticky-cell_1spae_1xghj_117:not(#\9) {
|
|
118
118
|
position: sticky;
|
|
119
119
|
background: var(--color-background-table-header-ly5ewp, #fafafa);
|
|
120
120
|
z-index: 798;
|
|
@@ -122,47 +122,32 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
122
122
|
transition-duration: var(--motion-duration-transition-show-quick-dzfata, 90ms);
|
|
123
123
|
transition-timing-function: var(--motion-easing-sticky-xk36yb, ease-out);
|
|
124
124
|
}
|
|
125
|
-
.awsui_header-
|
|
125
|
+
.awsui_header-cell_1spae_1xghj_93.awsui_sticky-cell-pad-left_1spae_1xghj_125:not(#\9):not(.awsui_has-selection_1spae_1xghj_125) {
|
|
126
126
|
padding-left: var(--space-table-horizontal-ciak0s, 0px);
|
|
127
127
|
}
|
|
128
|
-
.awsui_header-
|
|
128
|
+
.awsui_header-cell_1spae_1xghj_93.awsui_sticky-cell-last-left_1spae_1xghj_128:not(#\9) {
|
|
129
129
|
box-shadow: var(--shadow-sticky-column-first-etpf5o, 4px 0 8px 0 rgba(0, 28, 36, 0.1));
|
|
130
130
|
clip-path: inset(0px -24px 0px 0px);
|
|
131
131
|
}
|
|
132
|
-
.awsui_header-
|
|
132
|
+
.awsui_header-cell_1spae_1xghj_93.awsui_sticky-cell-last-left_1spae_1xghj_128 > .awsui_resize-divider_1spae_1xghj_132:not(#\9) {
|
|
133
133
|
display: none;
|
|
134
134
|
}
|
|
135
|
-
.awsui_header-
|
|
135
|
+
.awsui_header-cell_1spae_1xghj_93.awsui_sticky-cell-last-right_1spae_1xghj_135:not(#\9) {
|
|
136
136
|
box-shadow: var(--shadow-sticky-column-last-8uhca1, -4px 0 8px 0 rgba(0, 28, 36, 0.1));
|
|
137
137
|
clip-path: inset(0 0 0 -24px);
|
|
138
138
|
}
|
|
139
139
|
@media (prefers-reduced-motion: reduce) {
|
|
140
|
-
.awsui_header-
|
|
140
|
+
.awsui_header-cell_1spae_1xghj_93.awsui_sticky-cell_1spae_1xghj_117:not(#\9) {
|
|
141
141
|
animation: none;
|
|
142
142
|
transition: none;
|
|
143
143
|
}
|
|
144
144
|
}
|
|
145
|
-
.awsui-motion-disabled .awsui_header-
|
|
145
|
+
.awsui-motion-disabled .awsui_header-cell_1spae_1xghj_93.awsui_sticky-cell_1spae_1xghj_117:not(#\9), .awsui-mode-entering .awsui_header-cell_1spae_1xghj_93.awsui_sticky-cell_1spae_1xghj_117:not(#\9) {
|
|
146
146
|
animation: none;
|
|
147
147
|
transition: none;
|
|
148
148
|
}
|
|
149
|
-
.awsui_header-cell_1spae_l3ery_93:not(#\9):not(:last-child):before {
|
|
150
|
-
content: "";
|
|
151
|
-
position: absolute;
|
|
152
|
-
right: 0;
|
|
153
|
-
bottom: 0;
|
|
154
|
-
top: 0;
|
|
155
|
-
min-height: var(--line-height-heading-xs-jsenn1, 20px);
|
|
156
|
-
max-height: calc(100% - calc(2 * var(--space-xs-xf5ch3, 8px) + var(--space-xxxs-z28114, 2px)));
|
|
157
|
-
margin: auto;
|
|
158
|
-
border-left: var(--border-divider-section-width-4ozgf3, 1px) solid var(--color-border-divider-default-cr3oi6, #eaeded);
|
|
159
|
-
box-sizing: border-box;
|
|
160
|
-
}
|
|
161
|
-
.awsui_header-cell-resizable_1spae_l3ery_132:not(#\9):not(:last-child):before {
|
|
162
|
-
border-left-color: var(--color-border-divider-interactive-default-2k7xs4, #687078);
|
|
163
|
-
}
|
|
164
149
|
|
|
165
|
-
.awsui_sorting-
|
|
150
|
+
.awsui_sorting-icon_1spae_1xghj_150:not(#\9) {
|
|
166
151
|
position: absolute;
|
|
167
152
|
top: 50%;
|
|
168
153
|
transform: translateY(-50%);
|
|
@@ -170,31 +155,31 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
170
155
|
color: var(--color-text-column-sorting-icon-btnn2y, #687078);
|
|
171
156
|
}
|
|
172
157
|
|
|
173
|
-
.awsui_edit-
|
|
158
|
+
.awsui_edit-icon_1spae_1xghj_158:not(#\9) {
|
|
174
159
|
margin-left: var(--space-xxs-9rrxti, 4px);
|
|
175
160
|
margin-top: var(--space-scaled-xxs-t7ij38, 4px);
|
|
176
161
|
color: inherit;
|
|
177
162
|
}
|
|
178
163
|
|
|
179
|
-
.awsui_header-cell-
|
|
164
|
+
.awsui_header-cell-content_1spae_1xghj_164:not(#\9) {
|
|
180
165
|
position: relative;
|
|
181
166
|
padding: var(--space-scaled-xxs-t7ij38, 4px) var(--space-s-2025hl, 12px);
|
|
182
167
|
}
|
|
183
|
-
.awsui_header-cell-
|
|
168
|
+
.awsui_header-cell-sortable_1spae_1xghj_114 > .awsui_header-cell-content_1spae_1xghj_164:not(#\9) {
|
|
184
169
|
padding-right: calc(var(--space-xl-5fdwzu, 24px) + var(--space-xxs-9rrxti, 4px));
|
|
185
170
|
}
|
|
186
|
-
.awsui_header-cell-
|
|
171
|
+
.awsui_header-cell-content_1spae_1xghj_164:not(#\9):focus {
|
|
187
172
|
outline: none;
|
|
188
173
|
text-decoration: none;
|
|
189
174
|
}
|
|
190
|
-
body[data-awsui-focus-visible=true] .awsui_header-cell-
|
|
175
|
+
body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_1xghj_164:not(#\9):focus {
|
|
191
176
|
position: relative;
|
|
192
177
|
}
|
|
193
|
-
body[data-awsui-focus-visible=true] .awsui_header-cell-
|
|
178
|
+
body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_1xghj_164:not(#\9):focus {
|
|
194
179
|
outline: 2px dotted transparent;
|
|
195
180
|
outline-offset: calc(var(--space-table-header-focus-outline-gutter-czfdw1, 0px) - 1px);
|
|
196
181
|
}
|
|
197
|
-
body[data-awsui-focus-visible=true] .awsui_header-cell-
|
|
182
|
+
body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_1xghj_164:not(#\9):focus::before {
|
|
198
183
|
content: " ";
|
|
199
184
|
display: block;
|
|
200
185
|
position: absolute;
|
|
@@ -205,14 +190,14 @@ body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_l3ery_179:n
|
|
|
205
190
|
border-radius: var(--border-radius-control-default-focus-ring-a78bgq, 2px);
|
|
206
191
|
box-shadow: 0 0 0 2px var(--color-border-item-focused-v8nq2m, #0073bb);
|
|
207
192
|
}
|
|
208
|
-
body[data-awsui-focus-visible=true] .awsui_header-cell-
|
|
193
|
+
body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_1xghj_164.awsui_header-cell-fake-focus_1spae_1xghj_193:not(#\9) {
|
|
209
194
|
position: relative;
|
|
210
195
|
}
|
|
211
|
-
body[data-awsui-focus-visible=true] .awsui_header-cell-
|
|
196
|
+
body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_1xghj_164.awsui_header-cell-fake-focus_1spae_1xghj_193:not(#\9) {
|
|
212
197
|
outline: 2px dotted transparent;
|
|
213
198
|
outline-offset: calc(var(--space-table-header-focus-outline-gutter-czfdw1, 0px) - 1px);
|
|
214
199
|
}
|
|
215
|
-
body[data-awsui-focus-visible=true] .awsui_header-cell-
|
|
200
|
+
body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_1xghj_164.awsui_header-cell-fake-focus_1spae_1xghj_193:not(#\9)::before {
|
|
216
201
|
content: " ";
|
|
217
202
|
display: block;
|
|
218
203
|
position: absolute;
|
|
@@ -223,33 +208,33 @@ body[data-awsui-focus-visible=true] .awsui_header-cell-content_1spae_l3ery_179.a
|
|
|
223
208
|
border-radius: var(--border-radius-control-default-focus-ring-a78bgq, 2px);
|
|
224
209
|
box-shadow: 0 0 0 2px var(--color-border-item-focused-v8nq2m, #0073bb);
|
|
225
210
|
}
|
|
226
|
-
.awsui_header-cell-
|
|
211
|
+
.awsui_header-cell-disabled_1spae_1xghj_211.awsui_header-cell-sorted_1spae_1xghj_211 > .awsui_header-cell-content_1spae_1xghj_164 > .awsui_sorting-icon_1spae_1xghj_150:not(#\9) {
|
|
227
212
|
color: var(--color-text-interactive-disabled-e23z4j, #aab7b8);
|
|
228
213
|
}
|
|
229
214
|
|
|
230
|
-
.awsui_header-cell-
|
|
215
|
+
.awsui_header-cell-sortable_1spae_1xghj_114:not(#\9):not(.awsui_header-cell-disabled_1spae_1xghj_211) > .awsui_header-cell-content_1spae_1xghj_164 {
|
|
231
216
|
cursor: pointer;
|
|
232
217
|
}
|
|
233
|
-
.awsui_header-cell-
|
|
218
|
+
.awsui_header-cell-sortable_1spae_1xghj_114:not(#\9):not(.awsui_header-cell-disabled_1spae_1xghj_211) > .awsui_header-cell-content_1spae_1xghj_164:hover, .awsui_header-cell-sortable_1spae_1xghj_114:not(#\9):not(.awsui_header-cell-disabled_1spae_1xghj_211).awsui_header-cell-sorted_1spae_1xghj_211 > .awsui_header-cell-content_1spae_1xghj_164 {
|
|
234
219
|
color: var(--color-text-interactive-active-jrhxoe, #16191f);
|
|
235
220
|
}
|
|
236
|
-
.awsui_header-cell-
|
|
221
|
+
.awsui_header-cell-sortable_1spae_1xghj_114:not(#\9):not(.awsui_header-cell-disabled_1spae_1xghj_211) > .awsui_header-cell-content_1spae_1xghj_164:hover > .awsui_sorting-icon_1spae_1xghj_150, .awsui_header-cell-sortable_1spae_1xghj_114:not(#\9):not(.awsui_header-cell-disabled_1spae_1xghj_211).awsui_header-cell-sorted_1spae_1xghj_211 > .awsui_header-cell-content_1spae_1xghj_164 > .awsui_sorting-icon_1spae_1xghj_150 {
|
|
237
222
|
color: var(--color-text-interactive-active-jrhxoe, #16191f);
|
|
238
223
|
}
|
|
239
224
|
|
|
240
|
-
.awsui_header-cell-
|
|
225
|
+
.awsui_header-cell-text_1spae_1xghj_225:not(#\9) {
|
|
241
226
|
line-height: var(--line-height-heading-xs-jsenn1, 20px);
|
|
242
227
|
padding-top: calc(var(--space-xxxs-z28114, 2px) / 2);
|
|
243
228
|
padding-bottom: calc(var(--space-xxxs-z28114, 2px) / 2);
|
|
244
229
|
}
|
|
245
|
-
.awsui_header-cell-
|
|
230
|
+
.awsui_header-cell-text_1spae_1xghj_225:not(#\9):not(.awsui_header-cell-text-wrap_1spae_1xghj_230) {
|
|
246
231
|
white-space: nowrap;
|
|
247
232
|
overflow: hidden;
|
|
248
233
|
text-overflow: ellipsis;
|
|
249
234
|
}
|
|
250
235
|
|
|
251
|
-
.awsui_header-cell-
|
|
252
|
-
.awsui_header-cell-
|
|
236
|
+
.awsui_header-cell-ascending_1spae_1xghj_236:not(#\9),
|
|
237
|
+
.awsui_header-cell-descending_1spae_1xghj_237:not(#\9) {
|
|
253
238
|
/* used in test-utils */
|
|
254
239
|
}
|
|
255
240
|
|
|
@@ -259,29 +244,29 @@ with the left edge of the table as closely as possible. If the
|
|
|
259
244
|
last header cell is sortable the sort icon should align with the
|
|
260
245
|
settings icon in the pagination slot.
|
|
261
246
|
*/
|
|
262
|
-
.awsui_header-
|
|
247
|
+
.awsui_header-cell_1spae_1xghj_93:not(#\9):not(.awsui_is-visual-refresh_1spae_1xghj_247):first-child {
|
|
263
248
|
padding-left: var(--space-xs-xf5ch3, 8px);
|
|
264
249
|
}
|
|
265
250
|
|
|
266
|
-
.awsui_header-
|
|
251
|
+
.awsui_header-cell_1spae_1xghj_93.awsui_is-visual-refresh_1spae_1xghj_247:not(#\9) {
|
|
267
252
|
/*
|
|
268
253
|
Striped rows requires additional left padding because the
|
|
269
254
|
shaded background makes the child content appear too close
|
|
270
255
|
to the table edge.
|
|
271
256
|
*/
|
|
272
257
|
}
|
|
273
|
-
.awsui_header-
|
|
258
|
+
.awsui_header-cell_1spae_1xghj_93.awsui_is-visual-refresh_1spae_1xghj_247:not(#\9):first-child:not(.awsui_has-striped-rows_1spae_1xghj_258) {
|
|
274
259
|
padding-left: var(--space-xxxs-z28114, 2px);
|
|
275
260
|
}
|
|
276
|
-
.awsui_header-
|
|
261
|
+
.awsui_header-cell_1spae_1xghj_93.awsui_is-visual-refresh_1spae_1xghj_247:not(#\9):first-child:not(.awsui_has-striped-rows_1spae_1xghj_258).awsui_sticky-cell-pad-left_1spae_1xghj_125 {
|
|
277
262
|
padding-left: var(--space-table-horizontal-ciak0s, 0px);
|
|
278
263
|
}
|
|
279
|
-
.awsui_header-
|
|
264
|
+
.awsui_header-cell_1spae_1xghj_93.awsui_is-visual-refresh_1spae_1xghj_247:not(#\9):first-child.awsui_has-striped-rows_1spae_1xghj_258 {
|
|
280
265
|
padding-left: var(--space-xxs-9rrxti, 4px);
|
|
281
266
|
}
|
|
282
|
-
.awsui_header-
|
|
267
|
+
.awsui_header-cell_1spae_1xghj_93.awsui_is-visual-refresh_1spae_1xghj_247:not(#\9):first-child > .awsui_header-cell-content_1spae_1xghj_164 {
|
|
283
268
|
padding-left: 0;
|
|
284
269
|
}
|
|
285
|
-
.awsui_header-
|
|
270
|
+
.awsui_header-cell_1spae_1xghj_93.awsui_is-visual-refresh_1spae_1xghj_247:not(#\9):last-child.awsui_header-cell-sortable_1spae_1xghj_114 {
|
|
286
271
|
padding-right: var(--space-xxxs-z28114, 2px);
|
|
287
272
|
}
|