@cloudscape-design/components 3.0.154 → 3.0.156

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.
Files changed (91) hide show
  1. package/button/internal.d.ts +0 -1
  2. package/button/internal.d.ts.map +1 -1
  3. package/button/internal.js +2 -2
  4. package/button/internal.js.map +1 -1
  5. package/cards/index.d.ts.map +1 -1
  6. package/cards/index.js +6 -1
  7. package/cards/index.js.map +1 -1
  8. package/form-field/interfaces.d.ts +0 -10
  9. package/form-field/interfaces.d.ts.map +1 -1
  10. package/form-field/interfaces.js.map +1 -1
  11. package/form-field/internal.d.ts +1 -1
  12. package/form-field/internal.d.ts.map +1 -1
  13. package/form-field/internal.js +4 -5
  14. package/form-field/internal.js.map +1 -1
  15. package/input/internal.d.ts.map +1 -1
  16. package/input/internal.js +4 -16
  17. package/input/internal.js.map +1 -1
  18. package/internal/context/form-field-context.d.ts +2 -6
  19. package/internal/context/form-field-context.d.ts.map +1 -1
  20. package/internal/context/form-field-context.js +1 -7
  21. package/internal/context/form-field-context.js.map +1 -1
  22. package/internal/environment.js +1 -1
  23. package/{table → internal/hooks}/use-mouse-down-target.d.ts +0 -0
  24. package/internal/hooks/use-mouse-down-target.d.ts.map +1 -0
  25. package/{table → internal/hooks}/use-mouse-down-target.js +1 -1
  26. package/internal/hooks/use-mouse-down-target.js.map +1 -0
  27. package/internal/manifest.json +1 -1
  28. package/internal/types.d.ts +0 -9
  29. package/internal/types.d.ts.map +1 -1
  30. package/internal/types.js +2 -0
  31. package/internal/types.js.map +1 -1
  32. package/package.json +1 -1
  33. package/select/parts/styles.css.js +9 -9
  34. package/select/parts/styles.scoped.css +9 -27
  35. package/select/parts/styles.selectors.js +9 -9
  36. package/table/body-cell/index.d.ts +20 -11
  37. package/table/body-cell/index.d.ts.map +1 -1
  38. package/table/body-cell/index.js +9 -48
  39. package/table/body-cell/index.js.map +1 -1
  40. package/table/body-cell/styles.css.js +12 -18
  41. package/table/body-cell/styles.scoped.css +46 -229
  42. package/table/body-cell/styles.selectors.js +12 -18
  43. package/table/header-cell/index.d.ts +7 -8
  44. package/table/header-cell/index.d.ts.map +1 -1
  45. package/table/header-cell/index.js +2 -6
  46. package/table/header-cell/index.js.map +1 -1
  47. package/table/header-cell/styles.css.js +18 -19
  48. package/table/header-cell/styles.scoped.css +35 -40
  49. package/table/header-cell/styles.selectors.js +18 -19
  50. package/table/header-cell/utils.d.ts +1 -1
  51. package/table/header-cell/utils.d.ts.map +1 -1
  52. package/table/interfaces.d.ts +10 -85
  53. package/table/interfaces.d.ts.map +1 -1
  54. package/table/interfaces.js.map +1 -1
  55. package/table/internal.d.ts.map +1 -1
  56. package/table/internal.js +19 -69
  57. package/table/internal.js.map +1 -1
  58. package/table/thead.d.ts.map +1 -1
  59. package/table/thead.js +1 -1
  60. package/table/thead.js.map +1 -1
  61. package/table/utils.d.ts +1 -1
  62. package/table/utils.d.ts.map +1 -1
  63. package/test-utils/dom/table/index.d.ts +0 -4
  64. package/test-utils/dom/table/index.js +5 -21
  65. package/test-utils/dom/table/index.js.map +1 -1
  66. package/test-utils/selectors/table/index.d.ts +0 -4
  67. package/test-utils/selectors/table/index.js +5 -21
  68. package/test-utils/selectors/table/index.js.map +1 -1
  69. package/test-utils/tsconfig.tsbuildinfo +1 -1
  70. package/table/body-cell/click-away.d.ts +0 -9
  71. package/table/body-cell/click-away.d.ts.map +0 -1
  72. package/table/body-cell/click-away.js +0 -38
  73. package/table/body-cell/click-away.js.map +0 -1
  74. package/table/body-cell/inline-editor.d.ts +0 -12
  75. package/table/body-cell/inline-editor.d.ts.map +0 -1
  76. package/table/body-cell/inline-editor.js +0 -88
  77. package/table/body-cell/inline-editor.js.map +0 -1
  78. package/table/body-cell/td-element.d.ts +0 -21
  79. package/table/body-cell/td-element.d.ts.map +0 -1
  80. package/table/body-cell/td-element.js +0 -11
  81. package/table/body-cell/td-element.js.map +0 -1
  82. package/table/body-cell/use-stable-scroll-position.d.ts +0 -17
  83. package/table/body-cell/use-stable-scroll-position.d.ts.map +0 -1
  84. package/table/body-cell/use-stable-scroll-position.js +0 -48
  85. package/table/body-cell/use-stable-scroll-position.js.map +0 -1
  86. package/table/use-mouse-down-target.d.ts.map +0 -1
  87. package/table/use-mouse-down-target.js.map +0 -1
  88. package/table/use-table-focus-navigation.d.ts +0 -16
  89. package/table/use-table-focus-navigation.d.ts.map +0 -1
  90. package/table/use-table-focus-navigation.js +0 -131
  91. package/table/use-table-focus-navigation.js.map +0 -1
package/internal/types.js CHANGED
@@ -1,2 +1,4 @@
1
+ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2
+ // SPDX-License-Identifier: Apache-2.0
1
3
  export {};
2
4
  //# sourceMappingURL=types.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/internal/types.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n/**\n * Makes specified properties required.\n *\n * @example\n * ```\n * import { AlertProps } from '~components/alert/interfaces'\n *\n * type InternalAlertProps = SomeRequired<AlertProps, 'type'>\n *\n * function Alert(props: AlertProps) { ... }\n * function InternalAlert(props: InternalAlertProps) { ... }\n * ```\n */\nexport type SomeRequired<Type, Keys extends keyof Type> = Type & {\n [Key in Keys]-?: Type[Key];\n};\n\n/**\n * Utility type that makes a union of given type and undefined.\n * @example\n * ```\n * type OptionalString = Optional<string>\n * type OptionalStringOrNumber = Optional<string | number>\n * ```\n */\nexport type Optional<Type> = Type | undefined;\n"]}
1
+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/internal/types.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n/**\n * Makes specified properties required.\n *\n * @example\n * ```\n * import { AlertProps } from '~components/alert/interfaces'\n *\n * type InternalAlertProps = SomeRequired<AlertProps, 'type'>\n *\n * function Alert(props: AlertProps) { ... }\n * function InternalAlert(props: InternalAlertProps) { ... }\n * ```\n */\nexport type SomeRequired<Type, Keys extends keyof Type> = Type & {\n [Key in Keys]-?: Type[Key];\n};\n"]}
package/package.json CHANGED
@@ -112,6 +112,6 @@
112
112
  "./internal/base-component/index.js",
113
113
  "./internal/base-component/styles.css.js"
114
114
  ],
115
- "version": "3.0.154",
115
+ "version": "3.0.156",
116
116
  "license": "Apache-2.0"
117
117
  }
@@ -1,14 +1,14 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "placeholder": "awsui_placeholder_dwuol_1dl3j_93",
5
- "item": "awsui_item_dwuol_1dl3j_98",
6
- "checkbox": "awsui_checkbox_dwuol_1dl3j_102",
7
- "filter": "awsui_filter_dwuol_1dl3j_111",
8
- "trigger": "awsui_trigger_dwuol_1dl3j_116",
9
- "layout-strut": "awsui_layout-strut_dwuol_1dl3j_140",
10
- "list-bottom": "awsui_list-bottom_dwuol_1dl3j_146",
11
- "selected-icon": "awsui_selected-icon_dwuol_1dl3j_150",
12
- "show-label-tag": "awsui_show-label-tag_dwuol_1dl3j_154"
4
+ "placeholder": "awsui_placeholder_dwuol_agn1m_93",
5
+ "item": "awsui_item_dwuol_agn1m_98",
6
+ "checkbox": "awsui_checkbox_dwuol_agn1m_102",
7
+ "filter": "awsui_filter_dwuol_agn1m_111",
8
+ "trigger": "awsui_trigger_dwuol_agn1m_116",
9
+ "layout-strut": "awsui_layout-strut_dwuol_agn1m_122",
10
+ "list-bottom": "awsui_list-bottom_dwuol_agn1m_128",
11
+ "selected-icon": "awsui_selected-icon_dwuol_agn1m_132",
12
+ "show-label-tag": "awsui_show-label-tag_dwuol_agn1m_136"
13
13
  };
14
14
 
@@ -90,16 +90,16 @@ 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_placeholder_dwuol_1dl3j_93:not(#\9) {
93
+ .awsui_placeholder_dwuol_agn1m_93:not(#\9) {
94
94
  color: var(--color-text-input-placeholder-j53j3c, #5f6b7a);
95
95
  font-style: italic;
96
96
  }
97
97
 
98
- .awsui_item_dwuol_1dl3j_98:not(#\9) {
98
+ .awsui_item_dwuol_agn1m_98:not(#\9) {
99
99
  display: flex;
100
100
  align-items: center;
101
101
  }
102
- .awsui_item_dwuol_1dl3j_98 > .awsui_checkbox_dwuol_1dl3j_102:not(#\9) {
102
+ .awsui_item_dwuol_agn1m_98 > .awsui_checkbox_dwuol_agn1m_102:not(#\9) {
103
103
  position: relative;
104
104
  min-height: var(--size-control-n9i4yo, 16px);
105
105
  min-width: var(--size-control-n9i4yo, 16px);
@@ -108,49 +108,31 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
108
108
  margin-right: var(--space-field-horizontal-89h2yr, 12px);
109
109
  }
110
110
 
111
- .awsui_filter_dwuol_1dl3j_111:not(#\9) {
111
+ .awsui_filter_dwuol_agn1m_111:not(#\9) {
112
112
  z-index: 4;
113
113
  flex-shrink: 0;
114
114
  }
115
115
 
116
- .awsui_trigger_dwuol_1dl3j_116:not(#\9) {
116
+ .awsui_trigger_dwuol_agn1m_116:not(#\9) {
117
117
  white-space: nowrap;
118
118
  overflow: hidden;
119
119
  text-overflow: ellipsis;
120
120
  }
121
- .awsui_trigger_dwuol_1dl3j_116[data-awsui-focus-visible=true]:not(#\9):focus {
122
- position: relative;
123
- }
124
- .awsui_trigger_dwuol_1dl3j_116[data-awsui-focus-visible=true]:not(#\9):focus {
125
- outline: 2px dotted transparent;
126
- outline-offset: calc(calc(-1 * var(--space-scaled-xs-6859qs, 8px)) - 1px);
127
- }
128
- .awsui_trigger_dwuol_1dl3j_116[data-awsui-focus-visible=true]:not(#\9):focus::before {
129
- content: " ";
130
- display: block;
131
- position: absolute;
132
- left: calc(-1 * calc(-1 * var(--space-scaled-xs-6859qs, 8px)));
133
- top: calc(-1 * calc(-1 * var(--space-scaled-xxs-95dhkm, 4px)));
134
- width: calc(100% + 2 * calc(-1 * var(--space-scaled-xs-6859qs, 8px)));
135
- height: calc(100% + 2 * calc(-1 * var(--space-scaled-xxs-95dhkm, 4px)));
136
- border-radius: var(--border-radius-control-default-focus-ring-7661kz, 4px);
137
- box-shadow: 0 0 0 2px var(--color-border-item-focused-ap3b6s, #0972d3);
138
- }
139
121
 
140
- .awsui_layout-strut_dwuol_1dl3j_140:not(#\9) {
122
+ .awsui_layout-strut_dwuol_agn1m_122:not(#\9) {
141
123
  width: 100%;
142
124
  position: relative;
143
125
  transform: translate3d(0, 0, 0);
144
126
  }
145
127
 
146
- .awsui_list-bottom_dwuol_1dl3j_146:not(#\9) {
128
+ .awsui_list-bottom_dwuol_agn1m_128:not(#\9) {
147
129
  /* used in unit-tests */
148
130
  }
149
131
 
150
- .awsui_selected-icon_dwuol_1dl3j_150:not(#\9) {
132
+ .awsui_selected-icon_dwuol_agn1m_132:not(#\9) {
151
133
  color: var(--color-border-item-focused-ap3b6s, #0972d3);
152
134
  }
153
135
 
154
- .awsui_show-label-tag_dwuol_1dl3j_154 > .awsui_selected-icon_dwuol_1dl3j_150:not(#\9) {
136
+ .awsui_show-label-tag_dwuol_agn1m_136 > .awsui_selected-icon_dwuol_agn1m_132:not(#\9) {
155
137
  padding-left: var(--space-scaled-s-cu1hzn, 12px);
156
138
  }
@@ -2,14 +2,14 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "placeholder": "awsui_placeholder_dwuol_1dl3j_93",
6
- "item": "awsui_item_dwuol_1dl3j_98",
7
- "checkbox": "awsui_checkbox_dwuol_1dl3j_102",
8
- "filter": "awsui_filter_dwuol_1dl3j_111",
9
- "trigger": "awsui_trigger_dwuol_1dl3j_116",
10
- "layout-strut": "awsui_layout-strut_dwuol_1dl3j_140",
11
- "list-bottom": "awsui_list-bottom_dwuol_1dl3j_146",
12
- "selected-icon": "awsui_selected-icon_dwuol_1dl3j_150",
13
- "show-label-tag": "awsui_show-label-tag_dwuol_1dl3j_154"
5
+ "placeholder": "awsui_placeholder_dwuol_agn1m_93",
6
+ "item": "awsui_item_dwuol_agn1m_98",
7
+ "checkbox": "awsui_checkbox_dwuol_agn1m_102",
8
+ "filter": "awsui_filter_dwuol_agn1m_111",
9
+ "trigger": "awsui_trigger_dwuol_agn1m_116",
10
+ "layout-strut": "awsui_layout-strut_dwuol_agn1m_122",
11
+ "list-bottom": "awsui_list-bottom_dwuol_agn1m_128",
12
+ "selected-icon": "awsui_selected-icon_dwuol_agn1m_132",
13
+ "show-label-tag": "awsui_show-label-tag_dwuol_agn1m_136"
14
14
  };
15
15
 
@@ -1,16 +1,25 @@
1
+ import React from 'react';
1
2
  import { TableProps } from '../interfaces';
2
- import { TableTdElementProps } from './td-element';
3
- interface TableBodyCellProps<ItemType, ValueType> extends TableTdElementProps {
4
- column: TableProps.EditableColumnDefinition<ItemType, ValueType>;
3
+ interface TableBodyCellProps {
4
+ className?: string;
5
+ style?: React.CSSProperties;
6
+ wrapLines: boolean | undefined;
7
+ isFirstRow: boolean;
8
+ isLastRow: boolean;
9
+ isEvenRow?: boolean;
10
+ stripedRows?: boolean;
11
+ isSelected: boolean;
12
+ isNextSelected: boolean;
13
+ isPrevSelected: boolean;
14
+ children?: React.ReactNode;
15
+ hasSelection?: boolean;
16
+ hasFooter?: boolean;
17
+ }
18
+ export declare function TableBodyCell({ className, style, children, wrapLines, isFirstRow, isLastRow, isSelected, isNextSelected, isPrevSelected, isEvenRow, stripedRows, hasSelection, hasFooter, }: TableBodyCellProps): JSX.Element;
19
+ interface TableBodyCellContentProps<ItemType> extends TableBodyCellProps {
20
+ column: TableProps.ColumnDefinition<ItemType>;
5
21
  item: ItemType;
6
- isEditing: boolean;
7
- onEditStart: () => void;
8
- onEditEnd: () => void;
9
- submitEdit?: TableProps.SubmitEditFunction<ItemType, ValueType>;
10
- ariaLabels: TableProps['ariaLabels'];
11
22
  }
12
- export declare function TableBodyCell<ItemType, ValueType>({ isEditable, ...rest }: TableBodyCellProps<ItemType, ValueType> & {
13
- isEditable: boolean;
14
- }): JSX.Element;
23
+ export declare function TableBodyCellContent<ItemType>({ item, column, ...rest }: TableBodyCellContentProps<ItemType>): JSX.Element;
15
24
  export {};
16
25
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/table/body-cell/index.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAkB,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAcnE,UAAU,kBAAkB,CAAC,QAAQ,EAAE,SAAS,CAAE,SAAQ,mBAAmB;IAC3E,MAAM,EAAE,UAAU,CAAC,wBAAwB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IACjE,IAAI,EAAE,QAAQ,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,UAAU,CAAC,kBAAkB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAChE,UAAU,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;CACtC;AAsFD,wBAAgB,aAAa,CAAC,QAAQ,EAAE,SAAS,EAAE,EACjD,UAAU,EACV,GAAG,IAAI,EACR,EAAE,kBAAkB,CAAC,QAAQ,EAAE,SAAS,CAAC,GAAG;IAAE,UAAU,EAAE,OAAO,CAAA;CAAE,eAMnE"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/table/body-cell/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAG3C,UAAU,kBAAkB;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,OAAO,CAAC;IACxB,cAAc,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,KAAK,EACL,QAAQ,EACR,SAAS,EACT,UAAU,EACV,SAAS,EACT,UAAU,EACV,cAAc,EACd,cAAc,EACd,SAAS,EACT,WAAW,EACX,YAAY,EACZ,SAAS,GACV,EAAE,kBAAkB,eAyBpB;AAED,UAAU,yBAAyB,CAAC,QAAQ,CAAE,SAAQ,kBAAkB;IACtE,MAAM,EAAE,UAAU,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC9C,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,yBAAyB,CAAC,QAAQ,CAAC,eAE5G"}
@@ -3,54 +3,15 @@ import { __assign, __rest } from "tslib";
3
3
  // SPDX-License-Identifier: Apache-2.0
4
4
  import clsx from 'clsx';
5
5
  import styles from './styles.css.js';
6
- import React, { useCallback, useRef } from 'react';
7
- import useFocusVisible from '../../internal/hooks/focus-visible';
8
- import { useEffectOnUpdate } from '../../internal/hooks/use-effect-on-update';
9
- import Button from '../../button/internal';
10
- import { TableTdElement } from './td-element';
11
- import { InlineEditor } from './inline-editor';
12
- import { useStableScrollPosition } from './use-stable-scroll-position';
13
- var readonlyState = Object.freeze({
14
- isEditing: false,
15
- currentValue: undefined,
16
- setValue: function () { }
17
- });
18
- var submitHandlerFallback = function () {
19
- throw new Error('The function `handleSubmit` is required for editable columns');
20
- };
21
- function TableCellEditable(_a) {
22
- var _b;
23
- var className = _a.className, item = _a.item, column = _a.column, isEditing = _a.isEditing, onEditStart = _a.onEditStart, onEditEnd = _a.onEditEnd, submitEdit = _a.submitEdit, ariaLabels = _a.ariaLabels, isVisualRefresh = _a.isVisualRefresh, rest = __rest(_a, ["className", "item", "column", "isEditing", "onEditStart", "onEditEnd", "submitEdit", "ariaLabels", "isVisualRefresh"]);
24
- var editActivateRef = useRef(null);
25
- var cellRef = useRef(null);
26
- var focusVisible = useFocusVisible();
27
- var _c = useStableScrollPosition(cellRef), storeScrollPosition = _c.storeScrollPosition, restoreScrollPosition = _c.restoreScrollPosition;
28
- var handleEditStart = function () {
29
- storeScrollPosition();
30
- if (!isEditing) {
31
- onEditStart();
32
- }
33
- };
34
- var scheduleRestoreScrollPosition = useCallback(function () { return setTimeout(restoreScrollPosition, 0); }, [restoreScrollPosition]);
35
- var tdNativeAttributes = __assign(__assign({}, focusVisible), { onFocus: scheduleRestoreScrollPosition, 'data-inline-editing-active': isEditing.toString() });
36
- useEffectOnUpdate(function () {
37
- if (!isEditing && editActivateRef.current) {
38
- editActivateRef.current.focus({ preventScroll: true });
39
- }
40
- var timer = scheduleRestoreScrollPosition();
41
- return function () { return clearTimeout(timer); };
42
- }, [isEditing, scheduleRestoreScrollPosition]);
43
- return (React.createElement(TableTdElement, __assign({}, rest, { nativeAttributes: tdNativeAttributes, className: clsx(className, styles['body-cell-editable'], isEditing && styles['body-cell-edit-active'], isVisualRefresh && styles['is-visual-refresh']), onClick: handleEditStart, ref: cellRef }), isEditing ? (React.createElement(InlineEditor, { ariaLabels: ariaLabels, column: column, item: item, onEditEnd: onEditEnd, submitEdit: submitEdit !== null && submitEdit !== void 0 ? submitEdit : submitHandlerFallback, __onRender: restoreScrollPosition })) : (React.createElement(React.Fragment, null,
44
- column.cell(item, readonlyState),
45
- React.createElement("span", { className: styles['body-cell-editor'] },
46
- React.createElement(Button, { __hideFocusOutline: true, __internalRootRef: editActivateRef, ariaLabel: (_b = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.activateEditLabel) === null || _b === void 0 ? void 0 : _b.call(ariaLabels, column), formAction: "none", iconName: "edit", variant: "inline-icon" }))))));
47
- }
6
+ import React from 'react';
7
+ import { useVisualRefresh } from '../../internal/hooks/use-visual-mode';
48
8
  export function TableBodyCell(_a) {
49
- var isEditable = _a.isEditable, rest = __rest(_a, ["isEditable"]);
50
- if (isEditable || rest.isEditing) {
51
- return React.createElement(TableCellEditable, __assign({}, rest));
52
- }
53
- var column = rest.column, item = rest.item;
54
- return React.createElement(TableTdElement, __assign({}, rest), column.cell(item, readonlyState));
9
+ var className = _a.className, style = _a.style, children = _a.children, wrapLines = _a.wrapLines, isFirstRow = _a.isFirstRow, isLastRow = _a.isLastRow, isSelected = _a.isSelected, isNextSelected = _a.isNextSelected, isPrevSelected = _a.isPrevSelected, isEvenRow = _a.isEvenRow, stripedRows = _a.stripedRows, hasSelection = _a.hasSelection, hasFooter = _a.hasFooter;
10
+ var isVisualRefresh = useVisualRefresh();
11
+ return (React.createElement("td", { style: style, className: clsx(className, styles['body-cell'], wrapLines && styles['body-cell-wrap'], isFirstRow && styles['body-cell-first-row'], isLastRow && styles['body-cell-last-row'], isSelected && styles['body-cell-selected'], isNextSelected && styles['body-cell-next-selected'], isPrevSelected && styles['body-cell-prev-selected'], !isEvenRow && stripedRows && styles['body-cell-shaded'], stripedRows && styles['has-striped-rows'], isVisualRefresh && styles['is-visual-refresh'], hasSelection && styles['has-selection'], hasFooter && styles['has-footer']) }, children));
12
+ }
13
+ export function TableBodyCellContent(_a) {
14
+ var item = _a.item, column = _a.column, rest = __rest(_a, ["item", "column"]);
15
+ return React.createElement(TableBodyCell, __assign({}, rest), column.cell(item));
55
16
  }
56
17
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table/body-cell/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,eAAe,MAAM,oCAAoC,CAAC;AACjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAC;AAC9E,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAG3C,OAAO,EAAE,cAAc,EAAuB,MAAM,cAAc,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AAEvE,IAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC;IAClC,SAAS,EAAE,KAAK;IAChB,YAAY,EAAE,SAAS;IACvB,QAAQ,EAAE,cAAO,CAAC;CACnB,CAAC,CAAC;AAEH,IAAM,qBAAqB,GAAG;IAC5B,MAAM,IAAI,KAAK,CAAC,8DAA8D,CAAC,CAAC;AAClF,CAAC,CAAC;AAYF,SAAS,iBAAiB,CAAsB,EAWN;;IAVxC,IAAA,SAAS,eAAA,EACT,IAAI,UAAA,EACJ,MAAM,YAAA,EACN,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,SAAS,eAAA,EACT,UAAU,gBAAA,EACV,UAAU,gBAAA,EACV,eAAe,qBAAA,EACZ,IAAI,cAVuC,uHAW/C,CADQ;IAEP,IAAM,eAAe,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IACtD,IAAM,OAAO,GAAG,MAAM,CAAuB,IAAI,CAAC,CAAC;IACnD,IAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IACjC,IAAA,KAAiD,uBAAuB,CAAC,OAAO,CAAC,EAA/E,mBAAmB,yBAAA,EAAE,qBAAqB,2BAAqC,CAAC;IAExF,IAAM,eAAe,GAAG;QACtB,mBAAmB,EAAE,CAAC;QACtB,IAAI,CAAC,SAAS,EAAE;YACd,WAAW,EAAE,CAAC;SACf;IACH,CAAC,CAAC;IAEF,IAAM,6BAA6B,GAAG,WAAW,CAC/C,cAAM,OAAA,UAAU,CAAC,qBAAqB,EAAE,CAAC,CAAC,EAApC,CAAoC,EAC1C,CAAC,qBAAqB,CAAC,CACxB,CAAC;IAEF,IAAM,kBAAkB,yBAClB,YAAuC,KAC3C,OAAO,EAAE,6BAA6B,EACtC,4BAA4B,EAAE,SAAS,CAAC,QAAQ,EAAE,GACnD,CAAC;IAEF,iBAAiB,CAAC;QAChB,IAAI,CAAC,SAAS,IAAI,eAAe,CAAC,OAAO,EAAE;YACzC,eAAe,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;SACxD;QACD,IAAM,KAAK,GAAG,6BAA6B,EAAE,CAAC;QAC9C,OAAO,cAAM,OAAA,YAAY,CAAC,KAAK,CAAC,EAAnB,CAAmB,CAAC;IACnC,CAAC,EAAE,CAAC,SAAS,EAAE,6BAA6B,CAAC,CAAC,CAAC;IAE/C,OAAO,CACL,oBAAC,cAAc,eACT,IAAI,IACR,gBAAgB,EAAE,kBAA6D,EAC/E,SAAS,EAAE,IAAI,CACb,SAAS,EACT,MAAM,CAAC,oBAAoB,CAAC,EAC5B,SAAS,IAAI,MAAM,CAAC,uBAAuB,CAAC,EAC5C,eAAe,IAAI,MAAM,CAAC,mBAAmB,CAAC,CAC/C,EACD,OAAO,EAAE,eAAe,EACxB,GAAG,EAAE,OAAO,KAEX,SAAS,CAAC,CAAC,CAAC,CACX,oBAAC,YAAY,IACX,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,qBAAqB,EAC/C,UAAU,EAAE,qBAAqB,GACjC,CACH,CAAC,CAAC,CAAC,CACF;QACG,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,aAAa,CAAC;QACjC,8BAAM,SAAS,EAAE,MAAM,CAAC,kBAAkB,CAAC;YACzC,oBAAC,MAAM,IACL,kBAAkB,EAAE,IAAI,EACxB,iBAAiB,EAAE,eAAe,EAClC,SAAS,EAAE,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,iBAAiB,2DAAG,MAAM,CAAC,EAClD,UAAU,EAAC,MAAM,EACjB,QAAQ,EAAC,MAAM,EACf,OAAO,EAAC,aAAa,GACrB,CACG,CACN,CACJ,CACc,CAClB,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,aAAa,CAAsB,EAGiB;IAFlE,IAAA,UAAU,gBAAA,EACP,IAAI,cAF0C,cAGlD,CADQ;IAEP,IAAI,UAAU,IAAI,IAAI,CAAC,SAAS,EAAE;QAChC,OAAO,oBAAC,iBAAiB,eAAK,IAAI,EAAI,CAAC;KACxC;IACO,IAAA,MAAM,GAAW,IAAI,OAAf,EAAE,IAAI,GAAK,IAAI,KAAT,CAAU;IAC9B,OAAO,oBAAC,cAAc,eAAK,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,aAAa,CAAC,CAAkB,CAAC;AACvF,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport React, { useCallback, useRef } from 'react';\nimport useFocusVisible from '../../internal/hooks/focus-visible';\nimport { useEffectOnUpdate } from '../../internal/hooks/use-effect-on-update';\nimport Button from '../../button/internal';\nimport { ButtonProps } from '../../button/interfaces';\nimport { TableProps } from '../interfaces';\nimport { TableTdElement, TableTdElementProps } from './td-element';\nimport { InlineEditor } from './inline-editor';\nimport { useStableScrollPosition } from './use-stable-scroll-position';\n\nconst readonlyState = Object.freeze({\n isEditing: false,\n currentValue: undefined,\n setValue: () => {},\n});\n\nconst submitHandlerFallback = () => {\n throw new Error('The function `handleSubmit` is required for editable columns');\n};\n\ninterface TableBodyCellProps<ItemType, ValueType> extends TableTdElementProps {\n column: TableProps.EditableColumnDefinition<ItemType, ValueType>;\n item: ItemType;\n isEditing: boolean;\n onEditStart: () => void;\n onEditEnd: () => void;\n submitEdit?: TableProps.SubmitEditFunction<ItemType, ValueType>;\n ariaLabels: TableProps['ariaLabels'];\n}\n\nfunction TableCellEditable<ItemType, ValueType>({\n className,\n item,\n column,\n isEditing,\n onEditStart,\n onEditEnd,\n submitEdit,\n ariaLabels,\n isVisualRefresh,\n ...rest\n}: TableBodyCellProps<ItemType, ValueType>) {\n const editActivateRef = useRef<ButtonProps.Ref>(null);\n const cellRef = useRef<HTMLTableCellElement>(null);\n const focusVisible = useFocusVisible();\n const { storeScrollPosition, restoreScrollPosition } = useStableScrollPosition(cellRef);\n\n const handleEditStart = () => {\n storeScrollPosition();\n if (!isEditing) {\n onEditStart();\n }\n };\n\n const scheduleRestoreScrollPosition = useCallback(\n () => setTimeout(restoreScrollPosition, 0),\n [restoreScrollPosition]\n );\n\n const tdNativeAttributes = {\n ...(focusVisible as Record<string, string>),\n onFocus: scheduleRestoreScrollPosition,\n 'data-inline-editing-active': isEditing.toString(),\n };\n\n useEffectOnUpdate(() => {\n if (!isEditing && editActivateRef.current) {\n editActivateRef.current.focus({ preventScroll: true });\n }\n const timer = scheduleRestoreScrollPosition();\n return () => clearTimeout(timer);\n }, [isEditing, scheduleRestoreScrollPosition]);\n\n return (\n <TableTdElement\n {...rest}\n nativeAttributes={tdNativeAttributes as TableTdElementProps['nativeAttributes']}\n className={clsx(\n className,\n styles['body-cell-editable'],\n isEditing && styles['body-cell-edit-active'],\n isVisualRefresh && styles['is-visual-refresh']\n )}\n onClick={handleEditStart}\n ref={cellRef}\n >\n {isEditing ? (\n <InlineEditor\n ariaLabels={ariaLabels}\n column={column}\n item={item}\n onEditEnd={onEditEnd}\n submitEdit={submitEdit ?? submitHandlerFallback}\n __onRender={restoreScrollPosition}\n />\n ) : (\n <>\n {column.cell(item, readonlyState)}\n <span className={styles['body-cell-editor']}>\n <Button\n __hideFocusOutline={true}\n __internalRootRef={editActivateRef}\n ariaLabel={ariaLabels?.activateEditLabel?.(column)}\n formAction=\"none\"\n iconName=\"edit\"\n variant=\"inline-icon\"\n />\n </span>\n </>\n )}\n </TableTdElement>\n );\n}\n\nexport function TableBodyCell<ItemType, ValueType>({\n isEditable,\n ...rest\n}: TableBodyCellProps<ItemType, ValueType> & { isEditable: boolean }) {\n if (isEditable || rest.isEditing) {\n return <TableCellEditable {...rest} />;\n }\n const { column, item } = rest;\n return <TableTdElement {...rest}>{column.cell(item, readonlyState)}</TableTdElement>;\n}\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table/body-cell/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAkBxE,MAAM,UAAU,aAAa,CAAC,EAcT;QAbnB,SAAS,eAAA,EACT,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,UAAU,gBAAA,EACV,SAAS,eAAA,EACT,UAAU,gBAAA,EACV,cAAc,oBAAA,EACd,cAAc,oBAAA,EACd,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,YAAY,kBAAA,EACZ,SAAS,eAAA;IAET,IAAM,eAAe,GAAG,gBAAgB,EAAE,CAAC;IAE3C,OAAO,CACL,4BACE,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAI,CACb,SAAS,EACT,MAAM,CAAC,WAAW,CAAC,EACnB,SAAS,IAAI,MAAM,CAAC,gBAAgB,CAAC,EACrC,UAAU,IAAI,MAAM,CAAC,qBAAqB,CAAC,EAC3C,SAAS,IAAI,MAAM,CAAC,oBAAoB,CAAC,EACzC,UAAU,IAAI,MAAM,CAAC,oBAAoB,CAAC,EAC1C,cAAc,IAAI,MAAM,CAAC,yBAAyB,CAAC,EACnD,cAAc,IAAI,MAAM,CAAC,yBAAyB,CAAC,EACnD,CAAC,SAAS,IAAI,WAAW,IAAI,MAAM,CAAC,kBAAkB,CAAC,EACvD,WAAW,IAAI,MAAM,CAAC,kBAAkB,CAAC,EACzC,eAAe,IAAI,MAAM,CAAC,mBAAmB,CAAC,EAC9C,YAAY,IAAI,MAAM,CAAC,eAAe,CAAC,EACvC,SAAS,IAAI,MAAM,CAAC,YAAY,CAAC,CAClC,IAEA,QAAQ,CACN,CACN,CAAC;AACJ,CAAC;AAOD,MAAM,UAAU,oBAAoB,CAAW,EAA8D;IAA5D,IAAA,IAAI,UAAA,EAAE,MAAM,YAAA,EAAK,IAAI,cAAvB,kBAAyB,CAAF;IACpE,OAAO,oBAAC,aAAa,eAAK,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAiB,CAAC;AACtE,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport React from 'react';\nimport { TableProps } from '../interfaces';\nimport { useVisualRefresh } from '../../internal/hooks/use-visual-mode';\n\ninterface TableBodyCellProps {\n className?: string;\n style?: React.CSSProperties;\n wrapLines: boolean | undefined;\n isFirstRow: boolean;\n isLastRow: boolean;\n isEvenRow?: boolean;\n stripedRows?: boolean;\n isSelected: boolean;\n isNextSelected: boolean;\n isPrevSelected: boolean;\n children?: React.ReactNode;\n hasSelection?: boolean;\n hasFooter?: boolean;\n}\n\nexport function TableBodyCell({\n className,\n style,\n children,\n wrapLines,\n isFirstRow,\n isLastRow,\n isSelected,\n isNextSelected,\n isPrevSelected,\n isEvenRow,\n stripedRows,\n hasSelection,\n hasFooter,\n}: TableBodyCellProps) {\n const isVisualRefresh = useVisualRefresh();\n\n return (\n <td\n style={style}\n className={clsx(\n className,\n styles['body-cell'],\n wrapLines && styles['body-cell-wrap'],\n isFirstRow && styles['body-cell-first-row'],\n isLastRow && styles['body-cell-last-row'],\n isSelected && styles['body-cell-selected'],\n isNextSelected && styles['body-cell-next-selected'],\n isPrevSelected && styles['body-cell-prev-selected'],\n !isEvenRow && stripedRows && styles['body-cell-shaded'],\n stripedRows && styles['has-striped-rows'],\n isVisualRefresh && styles['is-visual-refresh'],\n hasSelection && styles['has-selection'],\n hasFooter && styles['has-footer']\n )}\n >\n {children}\n </td>\n );\n}\n\ninterface TableBodyCellContentProps<ItemType> extends TableBodyCellProps {\n column: TableProps.ColumnDefinition<ItemType>;\n item: ItemType;\n}\n\nexport function TableBodyCellContent<ItemType>({ item, column, ...rest }: TableBodyCellContentProps<ItemType>) {\n return <TableBodyCell {...rest}>{column.cell(item)}</TableBodyCell>;\n}\n"]}
@@ -1,23 +1,17 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "body-cell": "awsui_body-cell_c6tup_17cg6_93",
5
- "body-cell-wrap": "awsui_body-cell-wrap_c6tup_17cg6_102",
6
- "is-visual-refresh": "awsui_is-visual-refresh_c6tup_17cg6_114",
7
- "has-striped-rows": "awsui_has-striped-rows_c6tup_17cg6_126",
8
- "body-cell-edit-active": "awsui_body-cell-edit-active_c6tup_17cg6_129",
9
- "body-cell-editable": "awsui_body-cell-editable_c6tup_17cg6_129",
10
- "has-selection": "awsui_has-selection_c6tup_17cg6_135",
11
- "body-cell-first-row": "awsui_body-cell-first-row_c6tup_17cg6_141",
12
- "body-cell-last-row": "awsui_body-cell-last-row_c6tup_17cg6_144",
13
- "body-cell-selected": "awsui_body-cell-selected_c6tup_17cg6_144",
14
- "has-footer": "awsui_has-footer_c6tup_17cg6_144",
15
- "body-cell-shaded": "awsui_body-cell-shaded_c6tup_17cg6_154",
16
- "body-cell-next-selected": "awsui_body-cell-next-selected_c6tup_17cg6_176",
17
- "body-cell-prev-selected": "awsui_body-cell-prev-selected_c6tup_17cg6_180",
18
- "body-cell-editor": "awsui_body-cell-editor_c6tup_17cg6_204",
19
- "body-cell-editor-form": "awsui_body-cell-editor-form_c6tup_17cg6_214",
20
- "body-cell-editor-row": "awsui_body-cell-editor-row_c6tup_17cg6_223",
21
- "body-cell-editor-controls": "awsui_body-cell-editor-controls_c6tup_17cg6_233"
4
+ "body-cell": "awsui_body-cell_c6tup_9o7yk_9",
5
+ "body-cell-wrap": "awsui_body-cell-wrap_c6tup_9o7yk_18",
6
+ "body-cell-first-row": "awsui_body-cell-first-row_c6tup_9o7yk_30",
7
+ "body-cell-last-row": "awsui_body-cell-last-row_c6tup_9o7yk_33",
8
+ "body-cell-selected": "awsui_body-cell-selected_c6tup_9o7yk_33",
9
+ "has-footer": "awsui_has-footer_c6tup_9o7yk_33",
10
+ "body-cell-shaded": "awsui_body-cell-shaded_c6tup_9o7yk_43",
11
+ "body-cell-next-selected": "awsui_body-cell-next-selected_c6tup_9o7yk_65",
12
+ "body-cell-prev-selected": "awsui_body-cell-prev-selected_c6tup_9o7yk_69",
13
+ "is-visual-refresh": "awsui_is-visual-refresh_c6tup_9o7yk_98",
14
+ "has-selection": "awsui_has-selection_c6tup_9o7yk_114",
15
+ "has-striped-rows": "awsui_has-striped-rows_c6tup_9o7yk_117"
22
16
  };
23
17