@cloudscape-design/components 3.0.154 → 3.0.155
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/button/internal.d.ts +0 -1
- package/button/internal.d.ts.map +1 -1
- package/button/internal.js +2 -2
- package/button/internal.js.map +1 -1
- package/form-field/interfaces.d.ts +0 -10
- package/form-field/interfaces.d.ts.map +1 -1
- package/form-field/interfaces.js.map +1 -1
- package/form-field/internal.d.ts +1 -1
- package/form-field/internal.d.ts.map +1 -1
- package/form-field/internal.js +4 -5
- package/form-field/internal.js.map +1 -1
- package/input/internal.d.ts.map +1 -1
- package/input/internal.js +4 -16
- package/input/internal.js.map +1 -1
- package/internal/context/form-field-context.d.ts +2 -6
- package/internal/context/form-field-context.d.ts.map +1 -1
- package/internal/context/form-field-context.js +1 -7
- package/internal/context/form-field-context.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/manifest.json +1 -1
- package/internal/types.d.ts +0 -9
- package/internal/types.d.ts.map +1 -1
- package/internal/types.js +2 -0
- package/internal/types.js.map +1 -1
- package/package.json +1 -1
- package/select/parts/styles.css.js +9 -9
- package/select/parts/styles.scoped.css +9 -27
- package/select/parts/styles.selectors.js +9 -9
- package/table/body-cell/index.d.ts +20 -11
- package/table/body-cell/index.d.ts.map +1 -1
- package/table/body-cell/index.js +9 -48
- package/table/body-cell/index.js.map +1 -1
- package/table/body-cell/styles.css.js +12 -18
- package/table/body-cell/styles.scoped.css +46 -229
- package/table/body-cell/styles.selectors.js +12 -18
- package/table/header-cell/index.d.ts +7 -8
- package/table/header-cell/index.d.ts.map +1 -1
- package/table/header-cell/index.js +2 -6
- package/table/header-cell/index.js.map +1 -1
- package/table/header-cell/styles.css.js +18 -19
- package/table/header-cell/styles.scoped.css +35 -40
- package/table/header-cell/styles.selectors.js +18 -19
- package/table/header-cell/utils.d.ts +1 -1
- package/table/header-cell/utils.d.ts.map +1 -1
- package/table/interfaces.d.ts +10 -85
- package/table/interfaces.d.ts.map +1 -1
- package/table/interfaces.js.map +1 -1
- package/table/internal.d.ts.map +1 -1
- package/table/internal.js +18 -68
- package/table/internal.js.map +1 -1
- package/table/thead.d.ts.map +1 -1
- package/table/thead.js +1 -1
- package/table/thead.js.map +1 -1
- package/table/utils.d.ts +1 -1
- package/table/utils.d.ts.map +1 -1
- package/test-utils/dom/table/index.d.ts +0 -4
- package/test-utils/dom/table/index.js +5 -21
- package/test-utils/dom/table/index.js.map +1 -1
- package/test-utils/selectors/table/index.d.ts +0 -4
- package/test-utils/selectors/table/index.js +5 -21
- package/test-utils/selectors/table/index.js.map +1 -1
- package/test-utils/tsconfig.tsbuildinfo +1 -1
- package/table/body-cell/click-away.d.ts +0 -9
- package/table/body-cell/click-away.d.ts.map +0 -1
- package/table/body-cell/click-away.js +0 -38
- package/table/body-cell/click-away.js.map +0 -1
- package/table/body-cell/inline-editor.d.ts +0 -12
- package/table/body-cell/inline-editor.d.ts.map +0 -1
- package/table/body-cell/inline-editor.js +0 -88
- package/table/body-cell/inline-editor.js.map +0 -1
- package/table/body-cell/td-element.d.ts +0 -21
- package/table/body-cell/td-element.d.ts.map +0 -1
- package/table/body-cell/td-element.js +0 -11
- package/table/body-cell/td-element.js.map +0 -1
- package/table/body-cell/use-stable-scroll-position.d.ts +0 -17
- package/table/body-cell/use-stable-scroll-position.d.ts.map +0 -1
- package/table/body-cell/use-stable-scroll-position.js +0 -48
- package/table/body-cell/use-stable-scroll-position.js.map +0 -1
- package/table/use-table-focus-navigation.d.ts +0 -16
- package/table/use-table-focus-navigation.d.ts.map +0 -1
- package/table/use-table-focus-navigation.js +0 -131
- package/table/use-table-focus-navigation.js.map +0 -1
|
@@ -12,8 +12,7 @@ import { Resizer } from '../resizer';
|
|
|
12
12
|
import { useUniqueId } from '../../internal/hooks/use-unique-id';
|
|
13
13
|
export function TableHeaderCell(_a) {
|
|
14
14
|
var _b, _c, _d;
|
|
15
|
-
var
|
|
16
|
-
var className = _a.className, style = _a.style, tabIndex = _a.tabIndex, column = _a.column, activeSortingColumn = _a.activeSortingColumn, sortingDescending = _a.sortingDescending, sortingDisabled = _a.sortingDisabled, wrapLines = _a.wrapLines, showFocusRing = _a.showFocusRing, hidden = _a.hidden, onClick = _a.onClick, colIndex = _a.colIndex, onFocus = _a.onFocus, onBlur = _a.onBlur, updateColumn = _a.updateColumn, resizableColumns = _a.resizableColumns, onResizeFinish = _a.onResizeFinish, isEditable = _a.isEditable;
|
|
15
|
+
var className = _a.className, style = _a.style, tabIndex = _a.tabIndex, column = _a.column, activeSortingColumn = _a.activeSortingColumn, sortingDescending = _a.sortingDescending, sortingDisabled = _a.sortingDisabled, wrapLines = _a.wrapLines, showFocusRing = _a.showFocusRing, hidden = _a.hidden, onClick = _a.onClick, colIndex = _a.colIndex, onFocus = _a.onFocus, onBlur = _a.onBlur, updateColumn = _a.updateColumn, resizableColumns = _a.resizableColumns, onResizeFinish = _a.onResizeFinish;
|
|
17
16
|
var focusVisible = useFocusVisible();
|
|
18
17
|
var sortable = !!column.sortingComparator || !!column.sortingField;
|
|
19
18
|
var sorted = !!activeSortingColumn && isSorted(column, activeSortingColumn);
|
|
@@ -55,10 +54,7 @@ export function TableHeaderCell(_a) {
|
|
|
55
54
|
})
|
|
56
55
|
: undefined }, (sortingDisabled || !sortingStatus
|
|
57
56
|
? (_d = {}, _d['aria-disabled'] = 'true', _d) : __assign(__assign({ onKeyPress: handleKeyPress, tabIndex: tabIndex, role: 'button' }, focusVisible), { onClick: handleClick, onFocus: onFocus, onBlur: onBlur }))),
|
|
58
|
-
React.createElement("div", { className: clsx(styles['header-cell-text'], wrapLines && styles['header-cell-text-wrap']), id: headerId },
|
|
59
|
-
column.header,
|
|
60
|
-
isEditable ? (React.createElement("span", { className: styles['edit-icon'], role: "img", "aria-label": (_e = column.editConfig) === null || _e === void 0 ? void 0 : _e.editIconAriaLabel },
|
|
61
|
-
React.createElement(InternalIcon, { name: "edit" }))) : null),
|
|
57
|
+
React.createElement("div", { className: clsx(styles['header-cell-text'], wrapLines && styles['header-cell-text-wrap']), id: headerId }, column.header),
|
|
62
58
|
sortingStatus && (React.createElement("span", { className: styles['sorting-icon'] },
|
|
63
59
|
React.createElement(InternalIcon, { name: getSortingIconName(sortingStatus) })))),
|
|
64
60
|
resizableColumns && (React.createElement(React.Fragment, null,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/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,MAAM,oCAAoC,CAAC;AACjE,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACtF,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/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,MAAM,oCAAoC,CAAC;AACjE,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACtF,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAsBjE,MAAM,UAAU,eAAe,CAAC,EAkBT;;QAjBrB,SAAS,eAAA,EACT,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,mBAAmB,yBAAA,EACnB,iBAAiB,uBAAA,EACjB,eAAe,qBAAA,EACf,SAAS,eAAA,EACT,aAAa,mBAAA,EACb,MAAM,YAAA,EACN,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,MAAM,YAAA,EACN,YAAY,kBAAA,EACZ,gBAAgB,sBAAA,EAChB,cAAc,oBAAA;IAEd,IAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IACvC,IAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,iBAAiB,IAAI,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC;IACrE,IAAM,MAAM,GAAG,CAAC,CAAC,mBAAmB,IAAI,QAAQ,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC;IAC9E,IAAM,aAAa,GAAG,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAC,iBAAiB,EAAE,CAAC,CAAC,eAAe,CAAC,CAAC;IACjG,IAAM,WAAW,GAAG;QAClB,OAAA,OAAO,CAAC;YACN,aAAa,EAAE,MAAM;YACrB,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK;SAClD,CAAC;IAHF,CAGE,CAAC;IAEL,2FAA2F;IAC3F,sFAAsF;IACtF,4FAA4F;IAC5F,sDAAsD;IACtD,IAAM,cAAc,GAAG,UAAC,EAAuC;YAAxB,CAAC,iBAAA;QACtC,IAAI,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,KAAK,IAAI,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,KAAK,EAAE;YAC9D,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,WAAW,EAAE,CAAC;SACf;IACH,CAAC,CAAC;IAEF,IAAM,QAAQ,GAAG,WAAW,CAAC,eAAe,CAAC,CAAC;IAE9C,OAAO,CACL,4BACE,SAAS,EAAE,IAAI,CAAC,SAAS;YACvB,GAAC,MAAM,CAAC,uBAAuB,CAAC,IAAG,CAAC,CAAC,gBAAgB;YACrD,GAAC,MAAM,CAAC,sBAAsB,CAAC,IAAG,aAAa;YAC/C,GAAC,MAAM,CAAC,oBAAoB,CAAC,IAAG,aAAa,KAAK,WAAW,IAAI,aAAa,KAAK,YAAY;YAC/F,GAAC,MAAM,CAAC,sBAAsB,CAAC,IAAG,eAAe;YACjD,GAAC,MAAM,CAAC,uBAAuB,CAAC,IAAG,aAAa,KAAK,WAAW;YAChE,GAAC,MAAM,CAAC,wBAAwB,CAAC,IAAG,aAAa,KAAK,YAAY;YAClE,GAAC,MAAM,CAAC,oBAAoB,CAAC,IAAG,MAAM;gBACtC,eACS,aAAa,IAAI,WAAW,CAAC,aAAa,CAAC,EACtD,KAAK,EAAE,KAAK,EACZ,KAAK,EAAC,KAAK;QAEX,sCACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,qBAAqB,CAAC;gBAC3C,GAAC,MAAM,CAAC,wBAAwB,CAAC,IAAG,aAAa,IAAI,YAAY,CAAC,0BAA0B,CAAC;oBAC7F,gBAEA,MAAM,CAAC,SAAS;gBACd,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC;oBACf,MAAM,EAAE,MAAM;oBACd,UAAU,EAAE,MAAM,IAAI,CAAC,CAAC,iBAAiB;oBACzC,QAAQ,EAAE,CAAC,CAAC,eAAe;iBAC5B,CAAC;gBACJ,CAAC,CAAC,SAAS,IAEX,CAAC,eAAe,IAAI,CAAC,aAAa;YACpC,CAAC,WAAG,GAAC,eAAe,IAAG,MAAM,MAC7B,CAAC,qBACG,UAAU,EAAE,cAAc,EAC1B,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,QAAQ,IACX,YAAY,KACf,OAAO,EAAE,WAAW,EACpB,OAAO,SAAA,EACP,MAAM,QAAA,GACP,CAAC;YAEN,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC,EAAE,SAAS,IAAI,MAAM,CAAC,uBAAuB,CAAC,CAAC,EAAE,EAAE,EAAE,QAAQ,IACzG,MAAM,CAAC,MAAM,CACV;YACL,aAAa,IAAI,CAChB,8BAAM,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC;gBACrC,oBAAC,YAAY,IAAC,IAAI,EAAE,kBAAkB,CAAC,aAAa,CAAC,GAAI,CACpD,CACR,CACG;QACL,gBAAgB,IAAI,CACnB;YACE,oBAAC,OAAO,IACN,UAAU,EAAE,UAAA,QAAQ,IAAI,OAAA,YAAY,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAAhC,CAAgC,EACxD,QAAQ,EAAE,cAAc,EACxB,cAAc,EAAE,QAAQ,EACxB,QAAQ,EAAE,OAAO,MAAM,CAAC,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,GAC3F,CACD,CACJ,CACE,CACN,CAAC;AACJ,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 InternalIcon from '../../icon/internal';\nimport useFocusVisible from '../../internal/hooks/focus-visible';\nimport { KeyCode } from '../../internal/keycode';\nimport { TableProps } from '../interfaces';\nimport { getAriaSort, getSortingIconName, getSortingStatus, isSorted } from './utils';\nimport styles from './styles.css.js';\nimport { Resizer } from '../resizer';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\n\ninterface TableHeaderCellProps {\n className?: string;\n style?: React.CSSProperties;\n tabIndex: number;\n column: TableProps.ColumnDefinition<any>;\n activeSortingColumn: TableProps.SortingColumn<any> | undefined;\n sortingDescending: boolean | undefined;\n sortingDisabled: boolean | undefined;\n wrapLines: boolean | undefined;\n showFocusRing: boolean;\n hidden?: boolean;\n onClick(detail: TableProps.SortingState<any>): void;\n onResizeFinish: () => void;\n colIndex: number;\n updateColumn: (colIndex: number, newWidth: number) => void;\n onFocus?: () => void;\n onBlur?: () => void;\n resizableColumns?: boolean;\n}\n\nexport function TableHeaderCell({\n className,\n style,\n tabIndex,\n column,\n activeSortingColumn,\n sortingDescending,\n sortingDisabled,\n wrapLines,\n showFocusRing,\n hidden,\n onClick,\n colIndex,\n onFocus,\n onBlur,\n updateColumn,\n resizableColumns,\n onResizeFinish,\n}: TableHeaderCellProps) {\n const focusVisible = useFocusVisible();\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 <th\n className={clsx(className, {\n [styles['header-cell-resizable']]: !!resizableColumns,\n [styles['header-cell-sortable']]: sortingStatus,\n [styles['header-cell-sorted']]: sortingStatus === 'ascending' || sortingStatus === 'descending',\n [styles['header-cell-disabled']]: sortingDisabled,\n [styles['header-cell-ascending']]: sortingStatus === 'ascending',\n [styles['header-cell-descending']]: sortingStatus === 'descending',\n [styles['header-cell-hidden']]: hidden,\n })}\n aria-sort={sortingStatus && getAriaSort(sortingStatus)}\n style={style}\n scope=\"col\"\n >\n <div\n className={clsx(styles['header-cell-content'], {\n [styles['header-cell-fake-focus']]: showFocusRing && focusVisible['data-awsui-focus-visible'],\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 {...(sortingDisabled || !sortingStatus\n ? { ['aria-disabled']: 'true' }\n : {\n onKeyPress: handleKeyPress,\n tabIndex: tabIndex,\n role: 'button',\n ...focusVisible,\n onClick: handleClick,\n onFocus,\n onBlur,\n })}\n >\n <div className={clsx(styles['header-cell-text'], wrapLines && styles['header-cell-text-wrap'])} id={headerId}>\n {column.header}\n </div>\n {sortingStatus && (\n <span className={styles['sorting-icon']}>\n <InternalIcon name={getSortingIconName(sortingStatus)} />\n </span>\n )}\n </div>\n {resizableColumns && (\n <>\n <Resizer\n onDragMove={newWidth => updateColumn(colIndex, newWidth)}\n onFinish={onResizeFinish}\n ariaLabelledby={headerId}\n minWidth={typeof column.minWidth === 'string' ? parseInt(column.minWidth) : column.minWidth}\n />\n </>\n )}\n </th>\n );\n}\n"]}
|
|
@@ -1,24 +1,23 @@
|
|
|
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
|
-
"header-cell-resizable": "awsui_header-cell-
|
|
11
|
-
"sorting-icon": "awsui_sorting-
|
|
12
|
-
"
|
|
13
|
-
"header-cell-
|
|
14
|
-
"header-cell-
|
|
15
|
-
"header-cell-
|
|
16
|
-
"header-cell-
|
|
17
|
-
"header-cell-text": "awsui_header-cell-
|
|
18
|
-
"header-cell-
|
|
19
|
-
"header-cell-
|
|
20
|
-
"
|
|
21
|
-
"
|
|
22
|
-
"has-striped-rows": "awsui_has-striped-rows_1spae_lzlsa_232"
|
|
4
|
+
"header-cell": "awsui_header-cell_1spae_1d6sg_93",
|
|
5
|
+
"header-cell-sticky": "awsui_header-cell-sticky_1spae_1d6sg_105",
|
|
6
|
+
"header-cell-stuck": "awsui_header-cell-stuck_1spae_1d6sg_108",
|
|
7
|
+
"header-cell-variant-full-page": "awsui_header-cell-variant-full-page_1spae_1d6sg_108",
|
|
8
|
+
"header-cell-hidden": "awsui_header-cell-hidden_1spae_1d6sg_111",
|
|
9
|
+
"header-cell-sortable": "awsui_header-cell-sortable_1spae_1d6sg_114",
|
|
10
|
+
"header-cell-resizable": "awsui_header-cell-resizable_1spae_1d6sg_126",
|
|
11
|
+
"sorting-icon": "awsui_sorting-icon_1spae_1d6sg_130",
|
|
12
|
+
"header-cell-disabled": "awsui_header-cell-disabled_1spae_1d6sg_137",
|
|
13
|
+
"header-cell-sorted": "awsui_header-cell-sorted_1spae_1d6sg_137",
|
|
14
|
+
"header-cell-content": "awsui_header-cell-content_1spae_1d6sg_137",
|
|
15
|
+
"header-cell-fake-focus": "awsui_header-cell-fake-focus_1spae_1d6sg_170",
|
|
16
|
+
"header-cell-text": "awsui_header-cell-text_1spae_1d6sg_199",
|
|
17
|
+
"header-cell-text-wrap": "awsui_header-cell-text-wrap_1spae_1d6sg_199",
|
|
18
|
+
"header-cell-ascending": "awsui_header-cell-ascending_1spae_1d6sg_205",
|
|
19
|
+
"header-cell-descending": "awsui_header-cell-descending_1spae_1d6sg_206",
|
|
20
|
+
"is-visual-refresh": "awsui_is-visual-refresh_1spae_1d6sg_216",
|
|
21
|
+
"has-striped-rows": "awsui_has-striped-rows_1spae_1d6sg_227"
|
|
23
22
|
};
|
|
24
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_header-
|
|
93
|
+
.awsui_header-cell_1spae_1d6sg_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-nkh1jb, grayscale);
|
|
103
103
|
padding: var(--space-scaled-xxs-95dhkm, 4px) var(--space-scaled-xs-6859qs, 8px);
|
|
104
104
|
}
|
|
105
|
-
.awsui_header-cell-
|
|
105
|
+
.awsui_header-cell-sticky_1spae_1d6sg_105:not(#\9) {
|
|
106
106
|
border-bottom: var(--border-table-sticky-width-h1tlxy, 2px) solid var(--color-border-divider-default-7s2wjw, #e9ebed);
|
|
107
107
|
}
|
|
108
|
-
.awsui_header-cell-
|
|
108
|
+
.awsui_header-cell-stuck_1spae_1d6sg_108:not(#\9):not(.awsui_header-cell-variant-full-page_1spae_1d6sg_108) {
|
|
109
109
|
border-bottom-color: transparent;
|
|
110
110
|
}
|
|
111
|
-
.awsui_header-cell-variant-full-
|
|
111
|
+
.awsui_header-cell-variant-full-page_1spae_1d6sg_108.awsui_header-cell-hidden_1spae_1d6sg_111:not(#\9) {
|
|
112
112
|
border-bottom-color: transparent;
|
|
113
113
|
}
|
|
114
|
-
.awsui_header-
|
|
114
|
+
.awsui_header-cell_1spae_1d6sg_93:not(#\9):last-child, .awsui_header-cell_1spae_1d6sg_93.awsui_header-cell-sortable_1spae_1d6sg_114:not(#\9) {
|
|
115
115
|
padding-right: var(--space-xs-rsr2qu, 8px);
|
|
116
116
|
}
|
|
117
|
-
.awsui_header-
|
|
117
|
+
.awsui_header-cell_1spae_1d6sg_93:not(#\9):not(:last-child):before {
|
|
118
118
|
content: "";
|
|
119
119
|
position: absolute;
|
|
120
120
|
right: 0;
|
|
@@ -123,42 +123,40 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
123
123
|
border-left: var(--border-divider-section-width-4wm2it, 2px) solid var(--color-border-divider-default-7s2wjw, #e9ebed);
|
|
124
124
|
box-sizing: border-box;
|
|
125
125
|
}
|
|
126
|
-
.awsui_header-cell-
|
|
126
|
+
.awsui_header-cell-resizable_1spae_1d6sg_126:not(#\9):not(:last-child):before {
|
|
127
127
|
border-left-color: var(--color-border-divider-interactive-default-rcasvw, #e9ebed);
|
|
128
128
|
}
|
|
129
129
|
|
|
130
|
-
.awsui_sorting-
|
|
130
|
+
.awsui_sorting-icon_1spae_1d6sg_130:not(#\9) {
|
|
131
131
|
position: absolute;
|
|
132
132
|
top: var(--space-scaled-xxs-95dhkm, 4px);
|
|
133
133
|
right: var(--space-xxs-ynfts5, 4px);
|
|
134
134
|
color: var(--color-text-column-sorting-icon-q5sr09, #414d5c);
|
|
135
135
|
}
|
|
136
136
|
|
|
137
|
-
.
|
|
138
|
-
|
|
139
|
-
margin-top: var(--space-scaled-xxs-95dhkm, 4px);
|
|
140
|
-
color: inherit;
|
|
137
|
+
.awsui_header-cell-disabled_1spae_1d6sg_137.awsui_header-cell-sorted_1spae_1d6sg_137 > .awsui_header-cell-content_1spae_1d6sg_137 > .awsui_sorting-icon_1spae_1d6sg_130:not(#\9) {
|
|
138
|
+
color: var(--color-text-interactive-disabled-3pbb07, #9ba7b6);
|
|
141
139
|
}
|
|
142
140
|
|
|
143
|
-
.awsui_header-cell-
|
|
141
|
+
.awsui_header-cell-content_1spae_1d6sg_137:not(#\9) {
|
|
144
142
|
position: relative;
|
|
145
143
|
padding: var(--space-scaled-xxs-95dhkm, 4px) var(--space-s-hv8c1d, 12px);
|
|
146
144
|
}
|
|
147
|
-
.awsui_header-cell-
|
|
145
|
+
.awsui_header-cell-sortable_1spae_1d6sg_114 > .awsui_header-cell-content_1spae_1d6sg_137:not(#\9) {
|
|
148
146
|
padding-right: calc(var(--space-xl-a39hup, 24px) + var(--space-xxs-ynfts5, 4px));
|
|
149
147
|
}
|
|
150
|
-
.awsui_header-cell-
|
|
148
|
+
.awsui_header-cell-content_1spae_1d6sg_137:not(#\9):focus {
|
|
151
149
|
outline: none;
|
|
152
150
|
text-decoration: none;
|
|
153
151
|
}
|
|
154
|
-
.awsui_header-cell-
|
|
152
|
+
.awsui_header-cell-content_1spae_1d6sg_137[data-awsui-focus-visible=true]:not(#\9):focus {
|
|
155
153
|
position: relative;
|
|
156
154
|
}
|
|
157
|
-
.awsui_header-cell-
|
|
155
|
+
.awsui_header-cell-content_1spae_1d6sg_137[data-awsui-focus-visible=true]:not(#\9):focus {
|
|
158
156
|
outline: 2px dotted transparent;
|
|
159
157
|
outline-offset: calc(var(--space-table-header-focus-outline-gutter-rbx7m7, 0px) - 1px);
|
|
160
158
|
}
|
|
161
|
-
.awsui_header-cell-
|
|
159
|
+
.awsui_header-cell-content_1spae_1d6sg_137[data-awsui-focus-visible=true]:not(#\9):focus::before {
|
|
162
160
|
content: " ";
|
|
163
161
|
display: block;
|
|
164
162
|
position: absolute;
|
|
@@ -169,14 +167,14 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
169
167
|
border-radius: var(--border-radius-control-default-focus-ring-7661kz, 4px);
|
|
170
168
|
box-shadow: 0 0 0 2px var(--color-border-item-focused-ap3b6s, #0972d3);
|
|
171
169
|
}
|
|
172
|
-
.awsui_header-cell-
|
|
170
|
+
.awsui_header-cell-content_1spae_1d6sg_137.awsui_header-cell-fake-focus_1spae_1d6sg_170:not(#\9) {
|
|
173
171
|
position: relative;
|
|
174
172
|
}
|
|
175
|
-
.awsui_header-cell-
|
|
173
|
+
.awsui_header-cell-content_1spae_1d6sg_137.awsui_header-cell-fake-focus_1spae_1d6sg_170:not(#\9) {
|
|
176
174
|
outline: 2px dotted transparent;
|
|
177
175
|
outline-offset: calc(var(--space-table-header-focus-outline-gutter-rbx7m7, 0px) - 1px);
|
|
178
176
|
}
|
|
179
|
-
.awsui_header-cell-
|
|
177
|
+
.awsui_header-cell-content_1spae_1d6sg_137.awsui_header-cell-fake-focus_1spae_1d6sg_170:not(#\9)::before {
|
|
180
178
|
content: " ";
|
|
181
179
|
display: block;
|
|
182
180
|
position: absolute;
|
|
@@ -187,57 +185,54 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
187
185
|
border-radius: var(--border-radius-control-default-focus-ring-7661kz, 4px);
|
|
188
186
|
box-shadow: 0 0 0 2px var(--color-border-item-focused-ap3b6s, #0972d3);
|
|
189
187
|
}
|
|
190
|
-
.awsui_header-cell-disabled_1spae_lzlsa_190.awsui_header-cell-sorted_1spae_lzlsa_190 > .awsui_header-cell-content_1spae_lzlsa_143 > .awsui_sorting-icon_1spae_lzlsa_130:not(#\9) {
|
|
191
|
-
color: var(--color-text-interactive-disabled-3pbb07, #9ba7b6);
|
|
192
|
-
}
|
|
193
188
|
|
|
194
|
-
.awsui_header-cell-
|
|
189
|
+
.awsui_header-cell-sortable_1spae_1d6sg_114:not(#\9):not(.awsui_header-cell-disabled_1spae_1d6sg_137) > .awsui_header-cell-content_1spae_1d6sg_137 {
|
|
195
190
|
cursor: pointer;
|
|
196
191
|
}
|
|
197
|
-
.awsui_header-cell-
|
|
192
|
+
.awsui_header-cell-sortable_1spae_1d6sg_114:not(#\9):not(.awsui_header-cell-disabled_1spae_1d6sg_137) > .awsui_header-cell-content_1spae_1d6sg_137:hover, .awsui_header-cell-sortable_1spae_1d6sg_114:not(#\9):not(.awsui_header-cell-disabled_1spae_1d6sg_137).awsui_header-cell-sorted_1spae_1d6sg_137 > .awsui_header-cell-content_1spae_1d6sg_137 {
|
|
198
193
|
color: var(--color-text-interactive-active-vol84d, #000716);
|
|
199
194
|
}
|
|
200
|
-
.awsui_header-cell-
|
|
195
|
+
.awsui_header-cell-sortable_1spae_1d6sg_114:not(#\9):not(.awsui_header-cell-disabled_1spae_1d6sg_137) > .awsui_header-cell-content_1spae_1d6sg_137:hover > .awsui_sorting-icon_1spae_1d6sg_130, .awsui_header-cell-sortable_1spae_1d6sg_114:not(#\9):not(.awsui_header-cell-disabled_1spae_1d6sg_137).awsui_header-cell-sorted_1spae_1d6sg_137 > .awsui_header-cell-content_1spae_1d6sg_137 > .awsui_sorting-icon_1spae_1d6sg_130 {
|
|
201
196
|
color: var(--color-text-interactive-active-vol84d, #000716);
|
|
202
197
|
}
|
|
203
198
|
|
|
204
|
-
.awsui_header-cell-
|
|
199
|
+
.awsui_header-cell-text_1spae_1d6sg_199:not(#\9):not(.awsui_header-cell-text-wrap_1spae_1d6sg_199) {
|
|
205
200
|
white-space: nowrap;
|
|
206
201
|
overflow: hidden;
|
|
207
202
|
text-overflow: ellipsis;
|
|
208
203
|
}
|
|
209
204
|
|
|
210
|
-
.awsui_header-cell-
|
|
211
|
-
.awsui_header-cell-
|
|
205
|
+
.awsui_header-cell-ascending_1spae_1d6sg_205:not(#\9),
|
|
206
|
+
.awsui_header-cell-descending_1spae_1d6sg_206:not(#\9) {
|
|
212
207
|
/* used in test-utils */
|
|
213
208
|
}
|
|
214
209
|
|
|
215
210
|
/*
|
|
216
211
|
In Visual Refresh the first cell in the header should align
|
|
217
|
-
with the left edge of the table as closely as possible. If the
|
|
218
|
-
last header cell is sortable the sort icon should align with the
|
|
212
|
+
with the left edge of the table as closely as possible. If the
|
|
213
|
+
last header cell is sortable the sort icon should align with the
|
|
219
214
|
settings icon in the pagination slot.
|
|
220
215
|
*/
|
|
221
|
-
.awsui_header-
|
|
216
|
+
.awsui_header-cell_1spae_1d6sg_93:not(#\9):not(.awsui_is-visual-refresh_1spae_1d6sg_216):first-child {
|
|
222
217
|
padding-left: var(--space-xs-rsr2qu, 8px);
|
|
223
218
|
}
|
|
224
219
|
|
|
225
|
-
.awsui_header-
|
|
220
|
+
.awsui_header-cell_1spae_1d6sg_93.awsui_is-visual-refresh_1spae_1d6sg_216:not(#\9) {
|
|
226
221
|
/*
|
|
227
|
-
Striped rows requires additional left padding because the
|
|
228
|
-
shaded background makes the child content appear too close
|
|
222
|
+
Striped rows requires additional left padding because the
|
|
223
|
+
shaded background makes the child content appear too close
|
|
229
224
|
to the table edge.
|
|
230
225
|
*/
|
|
231
226
|
}
|
|
232
|
-
.awsui_header-
|
|
227
|
+
.awsui_header-cell_1spae_1d6sg_93.awsui_is-visual-refresh_1spae_1d6sg_216:not(#\9):first-child:not(.awsui_has-striped-rows_1spae_1d6sg_227) {
|
|
233
228
|
padding-left: var(--space-xxxs-k2w98v, 2px);
|
|
234
229
|
}
|
|
235
|
-
.awsui_header-
|
|
230
|
+
.awsui_header-cell_1spae_1d6sg_93.awsui_is-visual-refresh_1spae_1d6sg_216:not(#\9):first-child.awsui_has-striped-rows_1spae_1d6sg_227 {
|
|
236
231
|
padding-left: var(--space-xxs-ynfts5, 4px);
|
|
237
232
|
}
|
|
238
|
-
.awsui_header-
|
|
233
|
+
.awsui_header-cell_1spae_1d6sg_93.awsui_is-visual-refresh_1spae_1d6sg_216:not(#\9):first-child > .awsui_header-cell-content_1spae_1d6sg_137 {
|
|
239
234
|
padding-left: 0;
|
|
240
235
|
}
|
|
241
|
-
.awsui_header-
|
|
236
|
+
.awsui_header-cell_1spae_1d6sg_93.awsui_is-visual-refresh_1spae_1d6sg_216:not(#\9):last-child.awsui_header-cell-sortable_1spae_1d6sg_114 {
|
|
242
237
|
padding-right: var(--space-xxxs-k2w98v, 2px);
|
|
243
238
|
}
|
|
@@ -2,24 +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
|
-
"header-cell": "awsui_header-
|
|
6
|
-
"header-cell-sticky": "awsui_header-cell-
|
|
7
|
-
"header-cell-stuck": "awsui_header-cell-
|
|
8
|
-
"header-cell-variant-full-page": "awsui_header-cell-variant-full-
|
|
9
|
-
"header-cell-hidden": "awsui_header-cell-
|
|
10
|
-
"header-cell-sortable": "awsui_header-cell-
|
|
11
|
-
"header-cell-resizable": "awsui_header-cell-
|
|
12
|
-
"sorting-icon": "awsui_sorting-
|
|
13
|
-
"
|
|
14
|
-
"header-cell-
|
|
15
|
-
"header-cell-
|
|
16
|
-
"header-cell-
|
|
17
|
-
"header-cell-
|
|
18
|
-
"header-cell-text": "awsui_header-cell-
|
|
19
|
-
"header-cell-
|
|
20
|
-
"header-cell-
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
"has-striped-rows": "awsui_has-striped-rows_1spae_lzlsa_232"
|
|
5
|
+
"header-cell": "awsui_header-cell_1spae_1d6sg_93",
|
|
6
|
+
"header-cell-sticky": "awsui_header-cell-sticky_1spae_1d6sg_105",
|
|
7
|
+
"header-cell-stuck": "awsui_header-cell-stuck_1spae_1d6sg_108",
|
|
8
|
+
"header-cell-variant-full-page": "awsui_header-cell-variant-full-page_1spae_1d6sg_108",
|
|
9
|
+
"header-cell-hidden": "awsui_header-cell-hidden_1spae_1d6sg_111",
|
|
10
|
+
"header-cell-sortable": "awsui_header-cell-sortable_1spae_1d6sg_114",
|
|
11
|
+
"header-cell-resizable": "awsui_header-cell-resizable_1spae_1d6sg_126",
|
|
12
|
+
"sorting-icon": "awsui_sorting-icon_1spae_1d6sg_130",
|
|
13
|
+
"header-cell-disabled": "awsui_header-cell-disabled_1spae_1d6sg_137",
|
|
14
|
+
"header-cell-sorted": "awsui_header-cell-sorted_1spae_1d6sg_137",
|
|
15
|
+
"header-cell-content": "awsui_header-cell-content_1spae_1d6sg_137",
|
|
16
|
+
"header-cell-fake-focus": "awsui_header-cell-fake-focus_1spae_1d6sg_170",
|
|
17
|
+
"header-cell-text": "awsui_header-cell-text_1spae_1d6sg_199",
|
|
18
|
+
"header-cell-text-wrap": "awsui_header-cell-text-wrap_1spae_1d6sg_199",
|
|
19
|
+
"header-cell-ascending": "awsui_header-cell-ascending_1spae_1d6sg_205",
|
|
20
|
+
"header-cell-descending": "awsui_header-cell-descending_1spae_1d6sg_206",
|
|
21
|
+
"is-visual-refresh": "awsui_is-visual-refresh_1spae_1d6sg_216",
|
|
22
|
+
"has-striped-rows": "awsui_has-striped-rows_1spae_1d6sg_227"
|
|
24
23
|
};
|
|
25
24
|
|
|
@@ -3,6 +3,6 @@ type SortingStatus = 'sortable' | 'ascending' | 'descending';
|
|
|
3
3
|
export declare const getSortingStatus: (sortable: boolean, sorted: boolean, descending: boolean, disabled: boolean) => SortingStatus | undefined;
|
|
4
4
|
export declare const getSortingIconName: (sortingState: SortingStatus) => "caret-down-filled" | "caret-down" | "caret-up-filled";
|
|
5
5
|
export declare const getAriaSort: (sortingState: SortingStatus) => "none" | "ascending" | "descending";
|
|
6
|
-
export declare const isSorted: <T>(column: TableProps.ColumnDefinition<T
|
|
6
|
+
export declare const isSorted: <T>(column: TableProps.ColumnDefinition<T>, sortingColumn: TableProps.SortingColumn<T>) => boolean;
|
|
7
7
|
export {};
|
|
8
8
|
//# sourceMappingURL=utils.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/table/header-cell/utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,KAAK,aAAa,GAAG,UAAU,GAAG,WAAW,GAAG,YAAY,CAAC;AAY7D,eAAO,MAAM,gBAAgB,aACjB,OAAO,UACT,OAAO,cACH,OAAO,YACT,OAAO,KAChB,aAAa,GAAG,SAWlB,CAAC;AAEF,eAAO,MAAM,kBAAkB,iBAAkB,aAAa,2DAA8B,CAAC;AAC7F,eAAO,MAAM,WAAW,iBAAkB,aAAa,wCAAkC,CAAC;AAC1F,eAAO,MAAM,QAAQ,
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/table/header-cell/utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,KAAK,aAAa,GAAG,UAAU,GAAG,WAAW,GAAG,YAAY,CAAC;AAY7D,eAAO,MAAM,gBAAgB,aACjB,OAAO,UACT,OAAO,cACH,OAAO,YACT,OAAO,KAChB,aAAa,GAAG,SAWlB,CAAC;AAEF,eAAO,MAAM,kBAAkB,iBAAkB,aAAa,2DAA8B,CAAC;AAC7F,eAAO,MAAM,WAAW,iBAAkB,aAAa,wCAAkC,CAAC;AAC1F,eAAO,MAAM,QAAQ,oGAGqF,CAAC"}
|
package/table/interfaces.d.ts
CHANGED
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { BaseComponentProps } from '../internal/base-component';
|
|
3
3
|
import { NonCancelableEventHandler, CancelableEventHandler } from '../internal/events';
|
|
4
|
-
import { Optional } from '../internal/types';
|
|
5
4
|
export interface TableForwardRefType {
|
|
6
5
|
<T>(props: TableProps<T> & {
|
|
7
6
|
ref?: React.Ref<TableProps.Ref>;
|
|
8
7
|
}): JSX.Element;
|
|
9
8
|
}
|
|
10
|
-
export interface TableProps<T = any
|
|
9
|
+
export interface TableProps<T = any> extends BaseComponentProps {
|
|
11
10
|
/**
|
|
12
11
|
* Heading element of the table container. Use the [header component](/components/header/).
|
|
13
12
|
*/
|
|
@@ -54,8 +53,7 @@ export interface TableProps<T = any, V = any> extends BaseComponentProps {
|
|
|
54
53
|
* fills the remaining space of the table so the specified width is ignored.
|
|
55
54
|
* * `minWidth` (string | number) - Specifies the minimum column width. Corresponds to the `min-width` css-property. When
|
|
56
55
|
* `resizableColumns` property is set to `true`, additional constraints apply: 1) string values are not allowed,
|
|
57
|
-
* and 2) the column can't resize below than the specified width (defaults to "120px").
|
|
58
|
-
* of at least 176px for columns that are editable.
|
|
56
|
+
* and 2) the column can't resize below than the specified width (defaults to "120px").
|
|
59
57
|
* * `maxWidth` (string | number) - Specifies the maximum column width. Corresponds to the `max-width` css-property.
|
|
60
58
|
* Note that when the `resizableColumns` property is set to `true` this property is ignored.
|
|
61
59
|
* * `ariaLabel` (LabelData => string) - An optional function that's called to provide an `aria-label` for the cell header.
|
|
@@ -70,16 +68,9 @@ export interface TableProps<T = any, V = any> extends BaseComponentProps {
|
|
|
70
68
|
* to reorder the items. This property accepts a custom comparator that is used to compare two items.
|
|
71
69
|
* The comparator must implement ascending ordering, and the output is inverted automatically in case of descending order.
|
|
72
70
|
* If present, the `sortingField` property is ignored.
|
|
73
|
-
* * `editConfig` (EditConfig) - Enables inline editing in column when present. The value is used to configure the editing behavior.
|
|
74
|
-
* * * `editConfig.ariaLabel` (string) - Specifies a label for the edit control. Visually hidden but read by screen readers.
|
|
75
|
-
* * * `editConfig.errorIconAriaLabel` (string) - Specifies an ariaLabel for the error icon that is displayed when the validation fails.
|
|
76
|
-
* * * `editConfig.editIconAriaLabel` (string) - Specifies an alternate text for the edit icon used in column header.
|
|
77
|
-
* * * `editConfig.constraintText` (string) - Constraint text that is displayed below the edit control.
|
|
78
|
-
* * * `editConfig.validation` ((item, value) => string) - A function that allows you to validate the value of the edit control.
|
|
79
|
-
* Return a string from the function to display an error message. Return `undefined` (or no return) from the function to indicate that the value is valid.
|
|
80
71
|
*
|
|
81
72
|
*/
|
|
82
|
-
columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<T
|
|
73
|
+
columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<T>>;
|
|
83
74
|
/**
|
|
84
75
|
* Specifies the selection type (`'single' | 'multi'`).
|
|
85
76
|
*/
|
|
@@ -123,21 +114,15 @@ export interface TableProps<T = any, V = any> extends BaseComponentProps {
|
|
|
123
114
|
* * `allItemsSelectionLabel` ((SelectionState) => string) - Specifies the alternative text for multi-selection column header.
|
|
124
115
|
* * `selectionGroupLabel` (string) - Specifies the alternative text for the whole selection and single-selection column header.
|
|
125
116
|
* It is prefixed to `itemSelectionLabel` and `allItemsSelectionLabel` when they are set.
|
|
126
|
-
* * `tableLabel` (string) - Provides
|
|
117
|
+
* * `tableLabel` (string) - Provides a alternative text for the table. If you use a header for this table, you may reuse the string
|
|
127
118
|
* to provide a caption-like description. For example, tableLabel=Instances will be announced as 'Instances table'.
|
|
119
|
+
*
|
|
128
120
|
* You can use the first argument of type `SelectionState` to access the current selection
|
|
129
121
|
* state of the component (for example, the `selectedItems` list). The `itemSelectionLabel` for individual
|
|
130
122
|
* items also receives the corresponding `Item` object. You can use the `selectionGroupLabel` to
|
|
131
123
|
* add a meaningful description to the whole selection.
|
|
132
|
-
*
|
|
133
|
-
* * `activateEditLabel` (EditableColumnDefinition) => string -
|
|
134
|
-
* Specifies an alternative text for the edit button in editable cells.
|
|
135
|
-
* * `cancelEditLabel` (EditableColumnDefinition) => string -
|
|
136
|
-
* Specifies an alternative text for the cancel button in editable cells.
|
|
137
|
-
* * `submitEditLabel` (EditableColumnDefinition) => string -
|
|
138
|
-
* Specifies an alternative text for the submit button in editable cells.
|
|
139
124
|
*/
|
|
140
|
-
ariaLabels?: TableProps.AriaLabels<T
|
|
125
|
+
ariaLabels?: TableProps.AriaLabels<T>;
|
|
141
126
|
/**
|
|
142
127
|
* Specifies the definition object of the currently sorted column. Make sure you pass an object that's
|
|
143
128
|
* present in the `columnDefinitions` array.
|
|
@@ -227,70 +212,18 @@ export interface TableProps<T = any, V = any> extends BaseComponentProps {
|
|
|
227
212
|
* Requires the properties firstIndex and totalItemsCount to be set correctly.
|
|
228
213
|
*/
|
|
229
214
|
renderAriaLive?: (data: TableProps.LiveAnnouncement) => string;
|
|
230
|
-
/**
|
|
231
|
-
* Specifies a function that will be called after user submits an inline edit.
|
|
232
|
-
* Return a promise to keep loading state while the submit request is in progress.
|
|
233
|
-
*/
|
|
234
|
-
submitEdit?: TableProps.SubmitEditFunction<T, V>;
|
|
235
|
-
/**
|
|
236
|
-
* Called whenever user cancels an inline edit. Use this function to reset any
|
|
237
|
-
* validation states, or show warning for unsaved changes.
|
|
238
|
-
*/
|
|
239
|
-
onEditCancel?: CancelableEventHandler;
|
|
240
215
|
}
|
|
241
216
|
export declare namespace TableProps {
|
|
242
217
|
type TrackBy<T> = string | ((item: T) => string);
|
|
243
|
-
type
|
|
244
|
-
interface CellContext<V> {
|
|
245
|
-
isEditing?: boolean;
|
|
246
|
-
currentValue: Optional<V>;
|
|
247
|
-
setValue: (value: V | undefined) => void;
|
|
248
|
-
}
|
|
249
|
-
type CellRenderer<T> = (item: T) => React.ReactNode;
|
|
250
|
-
type EditableCellRenderer<T, V = any> = (item: T, context: CellContext<V>) => React.ReactNode;
|
|
251
|
-
interface EditConfig<T, V = any> {
|
|
252
|
-
/**
|
|
253
|
-
* Specifies a label for the edit control. Visually hidden but read
|
|
254
|
-
* by screen readers.
|
|
255
|
-
*/
|
|
256
|
-
ariaLabel?: string;
|
|
257
|
-
/**
|
|
258
|
-
* Specifies an ariaLabel for the error icon that is displayed when
|
|
259
|
-
* the validation fails.
|
|
260
|
-
*/
|
|
261
|
-
errorIconAriaLabel?: string;
|
|
262
|
-
/**
|
|
263
|
-
* Specifies an alternate text for the edit icon used in column header.
|
|
264
|
-
*/
|
|
265
|
-
editIconAriaLabel?: string;
|
|
266
|
-
/**
|
|
267
|
-
* Constraint text that is displayed below the edit control.
|
|
268
|
-
*/
|
|
269
|
-
constraintText?: string;
|
|
270
|
-
/**
|
|
271
|
-
* A function that allows you to validate the value of the edit control. Return
|
|
272
|
-
* a string from the function to display an error message. Return
|
|
273
|
-
* `undefined` (or no return) from the function to indicate that the value is valid.
|
|
274
|
-
* @param item - The item that is being edited.
|
|
275
|
-
* @param value - The current value of the edit control.
|
|
276
|
-
*/
|
|
277
|
-
validation?: (item: T, value: Optional<V>) => Optional<string>;
|
|
278
|
-
}
|
|
279
|
-
type ColumnEditConfig<ItemType, ValueType> = {
|
|
280
|
-
editConfig?: undefined;
|
|
281
|
-
cell: CellRenderer<ItemType>;
|
|
282
|
-
} | {
|
|
283
|
-
editConfig: EditConfig<ItemType, ValueType>;
|
|
284
|
-
cell: EditableCellRenderer<ItemType, ValueType>;
|
|
285
|
-
};
|
|
286
|
-
type ColumnDefinition<ItemType, ValueType = any> = {
|
|
218
|
+
type ColumnDefinition<T> = {
|
|
287
219
|
id?: string;
|
|
288
220
|
header: React.ReactNode;
|
|
221
|
+
cell(item: T): React.ReactNode;
|
|
289
222
|
ariaLabel?(data: LabelData): string;
|
|
290
223
|
width?: number | string;
|
|
291
224
|
minWidth?: number | string;
|
|
292
225
|
maxWidth?: number | string;
|
|
293
|
-
} & SortingColumn<
|
|
226
|
+
} & SortingColumn<T>;
|
|
294
227
|
type SelectionType = 'single' | 'multi';
|
|
295
228
|
type Variant = 'container' | 'embedded' | 'stacked' | 'full-page';
|
|
296
229
|
interface SelectionState<T> {
|
|
@@ -300,14 +233,11 @@ export declare namespace TableProps {
|
|
|
300
233
|
selectedItems: T[];
|
|
301
234
|
}
|
|
302
235
|
type IsItemDisabled<T> = (item: T) => boolean;
|
|
303
|
-
interface AriaLabels<T
|
|
236
|
+
interface AriaLabels<T> {
|
|
304
237
|
allItemsSelectionLabel?: (data: TableProps.SelectionState<T>) => string;
|
|
305
238
|
itemSelectionLabel?: (data: TableProps.SelectionState<T>, row: T) => string;
|
|
306
239
|
selectionGroupLabel?: string;
|
|
307
240
|
tableLabel?: string;
|
|
308
|
-
activateEditLabel?: (column: EditableColumnDefinition<T, V>) => string;
|
|
309
|
-
cancelEditLabel?: (column: EditableColumnDefinition<T, V>) => string;
|
|
310
|
-
submitEditLabel?: (column: EditableColumnDefinition<T, V>) => string;
|
|
311
241
|
}
|
|
312
242
|
interface SortingState<T> {
|
|
313
243
|
isDescending?: boolean;
|
|
@@ -346,11 +276,6 @@ export declare namespace TableProps {
|
|
|
346
276
|
* scroll parent scrolls to reveal the first row of the table.
|
|
347
277
|
*/
|
|
348
278
|
scrollToTop(): void;
|
|
349
|
-
/**
|
|
350
|
-
* Dismiss an inline edit if currently active.
|
|
351
|
-
*/
|
|
352
|
-
cancelEdit?(): void;
|
|
353
279
|
}
|
|
354
|
-
type SubmitEditFunction<ItemType, ValueType = any> = (item: ItemType, column: ColumnDefinition<ItemType, ValueType>, newValue: ValueType) => Promise<void> | void;
|
|
355
280
|
}
|
|
356
281
|
//# sourceMappingURL=interfaces.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/table/interfaces.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/table/interfaces.tsx"],"names":[],"mappings":"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"}
|