@cloudscape-design/components 3.0.500 → 3.0.502
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/internal/base-component/styles.scoped.css +5 -0
- package/internal/context/single-tab-stop-navigation-context.d.ts +5 -6
- package/internal/context/single-tab-stop-navigation-context.d.ts.map +1 -1
- package/internal/context/single-tab-stop-navigation-context.js +7 -8
- package/internal/context/single-tab-stop-navigation-context.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/generated/theming/index.cjs +31 -0
- package/internal/generated/theming/index.js +31 -0
- package/internal/manifest.json +1 -1
- package/package.json +1 -1
- package/table/body-cell/disabled-inline-editor.d.ts +8 -0
- package/table/body-cell/disabled-inline-editor.d.ts.map +1 -0
- package/table/body-cell/disabled-inline-editor.js +54 -0
- package/table/body-cell/disabled-inline-editor.js.map +1 -0
- package/table/body-cell/index.d.ts +1 -2
- package/table/body-cell/index.d.ts.map +1 -1
- package/table/body-cell/index.js +6 -0
- package/table/body-cell/index.js.map +1 -1
- package/table/body-cell/styles.css.js +30 -28
- package/table/body-cell/styles.scoped.css +93 -88
- package/table/body-cell/styles.selectors.js +30 -28
- package/table/interfaces.d.ts +6 -0
- package/table/interfaces.d.ts.map +1 -1
- package/table/interfaces.js.map +1 -1
- package/table/table-role/grid-navigation.d.ts.map +1 -1
- package/table/table-role/grid-navigation.js +36 -37
- package/table/table-role/grid-navigation.js.map +1 -1
- package/table/table-role/interfaces.d.ts +0 -2
- package/table/table-role/interfaces.d.ts.map +1 -1
- package/table/table-role/interfaces.js.map +1 -1
- package/table/table-role/utils.d.ts +1 -0
- package/table/table-role/utils.d.ts.map +1 -1
- package/table/table-role/utils.js +3 -0
- package/table/table-role/utils.js.map +1 -1
|
@@ -308,6 +308,7 @@
|
|
|
308
308
|
--color-text-control-disabled-ircsnq:#9ba7b6;
|
|
309
309
|
--color-text-counter-zqugin:#5f6b7a;
|
|
310
310
|
--color-text-disabled-f4c52h:#9ba7b6;
|
|
311
|
+
--color-text-disabled-inline-edit-zrb7bp:#414d5c;
|
|
311
312
|
--color-text-dropdown-footer-7d1eld:#5f6b7a;
|
|
312
313
|
--color-text-dropdown-group-label-4x4uyw:#414d5c;
|
|
313
314
|
--color-text-dropdown-header-ga95zo:#000716;
|
|
@@ -891,6 +892,7 @@
|
|
|
891
892
|
--color-text-control-disabled-ircsnq:#5f6b7a;
|
|
892
893
|
--color-text-counter-zqugin:#8d99a8;
|
|
893
894
|
--color-text-disabled-f4c52h:#5f6b7a;
|
|
895
|
+
--color-text-disabled-inline-edit-zrb7bp:#9ba7b6;
|
|
894
896
|
--color-text-dropdown-footer-7d1eld:#8d99a8;
|
|
895
897
|
--color-text-dropdown-group-label-4x4uyw:#b6bec9;
|
|
896
898
|
--color-text-dropdown-header-ga95zo:#fbfbfb;
|
|
@@ -1170,6 +1172,7 @@
|
|
|
1170
1172
|
--color-text-control-disabled-ircsnq:#5f6b7a;
|
|
1171
1173
|
--color-text-counter-zqugin:#8d99a8;
|
|
1172
1174
|
--color-text-disabled-f4c52h:#5f6b7a;
|
|
1175
|
+
--color-text-disabled-inline-edit-zrb7bp:#9ba7b6;
|
|
1173
1176
|
--color-text-dropdown-footer-7d1eld:#8d99a8;
|
|
1174
1177
|
--color-text-dropdown-group-label-4x4uyw:#b6bec9;
|
|
1175
1178
|
--color-text-dropdown-header-ga95zo:#fbfbfb;
|
|
@@ -1357,6 +1360,7 @@
|
|
|
1357
1360
|
--color-text-control-disabled-ircsnq:#5f6b7a;
|
|
1358
1361
|
--color-text-counter-zqugin:#8d99a8;
|
|
1359
1362
|
--color-text-disabled-f4c52h:#5f6b7a;
|
|
1363
|
+
--color-text-disabled-inline-edit-zrb7bp:#9ba7b6;
|
|
1360
1364
|
--color-text-dropdown-footer-7d1eld:#8d99a8;
|
|
1361
1365
|
--color-text-dropdown-group-label-4x4uyw:#b6bec9;
|
|
1362
1366
|
--color-text-dropdown-header-ga95zo:#fbfbfb;
|
|
@@ -1639,6 +1643,7 @@
|
|
|
1639
1643
|
--color-text-control-disabled-ircsnq:#5f6b7a;
|
|
1640
1644
|
--color-text-counter-zqugin:#8d99a8;
|
|
1641
1645
|
--color-text-disabled-f4c52h:#5f6b7a;
|
|
1646
|
+
--color-text-disabled-inline-edit-zrb7bp:#9ba7b6;
|
|
1642
1647
|
--color-text-dropdown-footer-7d1eld:#8d99a8;
|
|
1643
1648
|
--color-text-dropdown-group-label-4x4uyw:#b6bec9;
|
|
1644
1649
|
--color-text-dropdown-header-ga95zo:#fbfbfb;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
export type
|
|
3
|
-
export type FocusableChangeHandler = (focusTarget: null | Element, suppressed: boolean) => void;
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export type FocusableChangeHandler = (isFocusable: boolean) => void;
|
|
4
3
|
export interface SingleTabStopNavigationOptions {
|
|
5
4
|
tabIndex?: number;
|
|
6
5
|
}
|
|
@@ -8,11 +7,11 @@ export interface SingleTabStopNavigationOptions {
|
|
|
8
7
|
* Single tab stop navigation context is used together with keyboard navigation that requires a single tab stop.
|
|
9
8
|
* It instructs interactive elements to override tab indices for just a single one to remain user-focusable.
|
|
10
9
|
*/
|
|
11
|
-
export declare const SingleTabStopNavigationContext:
|
|
10
|
+
export declare const SingleTabStopNavigationContext: import("react").Context<{
|
|
12
11
|
navigationActive: boolean;
|
|
13
|
-
registerFocusable(focusable:
|
|
12
|
+
registerFocusable(focusable: Element, handler: FocusableChangeHandler): () => void;
|
|
14
13
|
}>;
|
|
15
|
-
export declare function useSingleTabStopNavigation(focusable: null |
|
|
14
|
+
export declare function useSingleTabStopNavigation(focusable: null | React.RefObject<Element>, options?: {
|
|
16
15
|
tabIndex?: number;
|
|
17
16
|
}): {
|
|
18
17
|
navigationActive: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"single-tab-stop-navigation-context.d.ts","sourceRoot":"lib/default/","sources":["internal/context/single-tab-stop-navigation-context.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"single-tab-stop-navigation-context.d.ts","sourceRoot":"lib/default/","sources":["internal/context/single-tab-stop-navigation-context.tsx"],"names":[],"mappings":";AAKA,MAAM,MAAM,sBAAsB,GAAG,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;AAEpE,MAAM,WAAW,8BAA8B;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;GAGG;AACH,eAAO,MAAM,8BAA8B;sBACvB,OAAO;iCACI,OAAO,WAAW,sBAAsB,GAAG,MAAM,IAAI;EAIlF,CAAC;AAEH,wBAAgB,0BAA0B,CACxC,SAAS,EAAE,IAAI,GAAG,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,EAC1C,OAAO,CAAC,EAAE;IAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE;;;EAoBhC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
-
import { createContext,
|
|
3
|
+
import { createContext, useContext, useEffect, useState } from 'react';
|
|
4
4
|
/**
|
|
5
5
|
* Single tab stop navigation context is used together with keyboard navigation that requires a single tab stop.
|
|
6
6
|
* It instructs interactive elements to override tab indices for just a single one to remain user-focusable.
|
|
@@ -11,17 +11,16 @@ export const SingleTabStopNavigationContext = createContext({
|
|
|
11
11
|
});
|
|
12
12
|
export function useSingleTabStopNavigation(focusable, options) {
|
|
13
13
|
var _a;
|
|
14
|
-
const { navigationActive: contextNavigationActive, registerFocusable
|
|
14
|
+
const { navigationActive: contextNavigationActive, registerFocusable } = useContext(SingleTabStopNavigationContext);
|
|
15
15
|
const [focusTargetActive, setFocusTargetActive] = useState(false);
|
|
16
|
-
const
|
|
17
|
-
const
|
|
16
|
+
const navigationDisabled = (options === null || options === void 0 ? void 0 : options.tabIndex) && (options === null || options === void 0 ? void 0 : options.tabIndex) < 0;
|
|
17
|
+
const navigationActive = contextNavigationActive && !navigationDisabled;
|
|
18
18
|
useEffect(() => {
|
|
19
|
-
if (focusable) {
|
|
20
|
-
const
|
|
21
|
-
const unregister = registerFocusable(focusable, changeHandler);
|
|
19
|
+
if (!navigationDisabled && focusable && focusable.current) {
|
|
20
|
+
const unregister = registerFocusable(focusable.current, isFocusable => setFocusTargetActive(isFocusable));
|
|
22
21
|
return () => unregister();
|
|
23
22
|
}
|
|
24
|
-
}
|
|
23
|
+
});
|
|
25
24
|
let tabIndex = options === null || options === void 0 ? void 0 : options.tabIndex;
|
|
26
25
|
if (navigationActive) {
|
|
27
26
|
tabIndex = !focusTargetActive ? -1 : (_a = options === null || options === void 0 ? void 0 : options.tabIndex) !== null && _a !== void 0 ? _a : 0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"single-tab-stop-navigation-context.js","sourceRoot":"lib/default/","sources":["internal/context/single-tab-stop-navigation-context.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,
|
|
1
|
+
{"version":3,"file":"single-tab-stop-navigation-context.js","sourceRoot":"lib/default/","sources":["internal/context/single-tab-stop-navigation-context.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAQvE;;;GAGG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAG,aAAa,CAGxD;IACD,gBAAgB,EAAE,KAAK;IACvB,iBAAiB,EAAE,GAAG,EAAE,CAAC,GAAG,EAAE,GAAE,CAAC;CAClC,CAAC,CAAC;AAEH,MAAM,UAAU,0BAA0B,CACxC,SAA0C,EAC1C,OAA+B;;IAE/B,MAAM,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,GAAG,UAAU,CAAC,8BAA8B,CAAC,CAAC;IACpH,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClE,MAAM,kBAAkB,GAAG,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,KAAI,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,IAAG,CAAC,CAAC;IACtE,MAAM,gBAAgB,GAAG,uBAAuB,IAAI,CAAC,kBAAkB,CAAC;IAExE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,kBAAkB,IAAI,SAAS,IAAI,SAAS,CAAC,OAAO,EAAE;YACzD,MAAM,UAAU,GAAG,iBAAiB,CAAC,SAAS,CAAC,OAAO,EAAE,WAAW,CAAC,EAAE,CAAC,oBAAoB,CAAC,WAAW,CAAC,CAAC,CAAC;YAC1G,OAAO,GAAG,EAAE,CAAC,UAAU,EAAE,CAAC;SAC3B;IACH,CAAC,CAAC,CAAC;IAEH,IAAI,QAAQ,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAAC;IACjC,IAAI,gBAAgB,EAAE;QACpB,QAAQ,GAAG,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,mCAAI,CAAC,CAAC;KAC7D;IAED,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,CAAC;AACxC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { createContext, useContext, useEffect, useState } from 'react';\n\nexport type FocusableChangeHandler = (isFocusable: boolean) => void;\n\nexport interface SingleTabStopNavigationOptions {\n tabIndex?: number;\n}\n\n/**\n * Single tab stop navigation context is used together with keyboard navigation that requires a single tab stop.\n * It instructs interactive elements to override tab indices for just a single one to remain user-focusable.\n */\nexport const SingleTabStopNavigationContext = createContext<{\n navigationActive: boolean;\n registerFocusable(focusable: Element, handler: FocusableChangeHandler): () => void;\n}>({\n navigationActive: false,\n registerFocusable: () => () => {},\n});\n\nexport function useSingleTabStopNavigation(\n focusable: null | React.RefObject<Element>,\n options?: { tabIndex?: number }\n) {\n const { navigationActive: contextNavigationActive, registerFocusable } = useContext(SingleTabStopNavigationContext);\n const [focusTargetActive, setFocusTargetActive] = useState(false);\n const navigationDisabled = options?.tabIndex && options?.tabIndex < 0;\n const navigationActive = contextNavigationActive && !navigationDisabled;\n\n useEffect(() => {\n if (!navigationDisabled && focusable && focusable.current) {\n const unregister = registerFocusable(focusable.current, isFocusable => setFocusTargetActive(isFocusable));\n return () => unregister();\n }\n });\n\n let tabIndex = options?.tabIndex;\n if (navigationActive) {\n tabIndex = !focusTargetActive ? -1 : options?.tabIndex ?? 0;\n }\n\n return { navigationActive, tabIndex };\n}\n"]}
|
package/internal/environment.js
CHANGED
|
@@ -1383,6 +1383,10 @@ module.exports.preset = {
|
|
|
1383
1383
|
"light": "{colorGrey400}",
|
|
1384
1384
|
"dark": "{colorGrey550}"
|
|
1385
1385
|
},
|
|
1386
|
+
"colorTextDisabledInlineEdit": {
|
|
1387
|
+
"light": "{colorGrey600}",
|
|
1388
|
+
"dark": "{colorGrey400}"
|
|
1389
|
+
},
|
|
1386
1390
|
"colorTextDropdownFooter": {
|
|
1387
1391
|
"light": "{colorTextFormSecondary}",
|
|
1388
1392
|
"dark": "{colorTextFormSecondary}"
|
|
@@ -3421,6 +3425,10 @@ module.exports.preset = {
|
|
|
3421
3425
|
"light": "{colorGrey550}",
|
|
3422
3426
|
"dark": "{colorGrey550}"
|
|
3423
3427
|
},
|
|
3428
|
+
"colorTextDisabledInlineEdit": {
|
|
3429
|
+
"light": "{colorGrey400}",
|
|
3430
|
+
"dark": "{colorGrey400}"
|
|
3431
|
+
},
|
|
3424
3432
|
"colorTextDropdownFooter": {
|
|
3425
3433
|
"light": "{colorTextFormSecondary}",
|
|
3426
3434
|
"dark": "{colorTextFormSecondary}"
|
|
@@ -4439,6 +4447,10 @@ module.exports.preset = {
|
|
|
4439
4447
|
"light": "{colorGrey550}",
|
|
4440
4448
|
"dark": "{colorGrey550}"
|
|
4441
4449
|
},
|
|
4450
|
+
"colorTextDisabledInlineEdit": {
|
|
4451
|
+
"light": "{colorGrey400}",
|
|
4452
|
+
"dark": "{colorGrey400}"
|
|
4453
|
+
},
|
|
4442
4454
|
"colorTextDropdownFooter": {
|
|
4443
4455
|
"light": "{colorTextFormSecondary}",
|
|
4444
4456
|
"dark": "{colorTextFormSecondary}"
|
|
@@ -5389,6 +5401,10 @@ module.exports.preset = {
|
|
|
5389
5401
|
"light": "{colorGrey400}",
|
|
5390
5402
|
"dark": "{colorGrey550}"
|
|
5391
5403
|
},
|
|
5404
|
+
"colorTextDisabledInlineEdit": {
|
|
5405
|
+
"light": "{colorGrey600}",
|
|
5406
|
+
"dark": "{colorGrey400}"
|
|
5407
|
+
},
|
|
5392
5408
|
"colorTextDropdownFooter": {
|
|
5393
5409
|
"light": "{colorTextFormSecondary}",
|
|
5394
5410
|
"dark": "{colorTextFormSecondary}"
|
|
@@ -6339,6 +6355,10 @@ module.exports.preset = {
|
|
|
6339
6355
|
"light": "{colorGrey400}",
|
|
6340
6356
|
"dark": "{colorGrey550}"
|
|
6341
6357
|
},
|
|
6358
|
+
"colorTextDisabledInlineEdit": {
|
|
6359
|
+
"light": "{colorGrey600}",
|
|
6360
|
+
"dark": "{colorGrey400}"
|
|
6361
|
+
},
|
|
6342
6362
|
"colorTextDropdownFooter": {
|
|
6343
6363
|
"light": "{colorTextFormSecondary}",
|
|
6344
6364
|
"dark": "{colorTextFormSecondary}"
|
|
@@ -7289,6 +7309,10 @@ module.exports.preset = {
|
|
|
7289
7309
|
"light": "{colorGrey400}",
|
|
7290
7310
|
"dark": "{colorGrey550}"
|
|
7291
7311
|
},
|
|
7312
|
+
"colorTextDisabledInlineEdit": {
|
|
7313
|
+
"light": "{colorGrey600}",
|
|
7314
|
+
"dark": "{colorGrey400}"
|
|
7315
|
+
},
|
|
7292
7316
|
"colorTextDropdownFooter": {
|
|
7293
7317
|
"light": "{colorTextFormSecondary}",
|
|
7294
7318
|
"dark": "{colorTextFormSecondary}"
|
|
@@ -8241,6 +8265,10 @@ module.exports.preset = {
|
|
|
8241
8265
|
"light": "{colorGrey550}",
|
|
8242
8266
|
"dark": "{colorGrey550}"
|
|
8243
8267
|
},
|
|
8268
|
+
"colorTextDisabledInlineEdit": {
|
|
8269
|
+
"light": "{colorGrey400}",
|
|
8270
|
+
"dark": "{colorGrey400}"
|
|
8271
|
+
},
|
|
8244
8272
|
"colorTextDropdownFooter": {
|
|
8245
8273
|
"light": "{colorTextFormSecondary}",
|
|
8246
8274
|
"dark": "{colorTextFormSecondary}"
|
|
@@ -8836,6 +8864,7 @@ module.exports.preset = {
|
|
|
8836
8864
|
"colorTextControlDisabled": "color",
|
|
8837
8865
|
"colorTextCounter": "color",
|
|
8838
8866
|
"colorTextDisabled": "color",
|
|
8867
|
+
"colorTextDisabledInlineEdit": "color",
|
|
8839
8868
|
"colorTextDropdownFooter": "color",
|
|
8840
8869
|
"colorTextDropdownGroupLabel": "color",
|
|
8841
8870
|
"colorTextDropdownHeader": "color",
|
|
@@ -10001,6 +10030,7 @@ module.exports.preset = {
|
|
|
10001
10030
|
"colorTextControlDisabled": "color-text-control-disabled",
|
|
10002
10031
|
"colorTextCounter": "color-text-counter",
|
|
10003
10032
|
"colorTextDisabled": "color-text-disabled",
|
|
10033
|
+
"colorTextDisabledInlineEdit": "color-text-disabled-inline-edit",
|
|
10004
10034
|
"colorTextDropdownFooter": "color-text-dropdown-footer",
|
|
10005
10035
|
"colorTextDropdownGroupLabel": "color-text-dropdown-group-label",
|
|
10006
10036
|
"colorTextDropdownHeader": "color-text-dropdown-header",
|
|
@@ -10687,6 +10717,7 @@ module.exports.preset = {
|
|
|
10687
10717
|
"colorTextControlDisabled": "--color-text-control-disabled-ircsnq",
|
|
10688
10718
|
"colorTextCounter": "--color-text-counter-zqugin",
|
|
10689
10719
|
"colorTextDisabled": "--color-text-disabled-f4c52h",
|
|
10720
|
+
"colorTextDisabledInlineEdit": "--color-text-disabled-inline-edit-zrb7bp",
|
|
10690
10721
|
"colorTextDropdownFooter": "--color-text-dropdown-footer-7d1eld",
|
|
10691
10722
|
"colorTextDropdownGroupLabel": "--color-text-dropdown-group-label-4x4uyw",
|
|
10692
10723
|
"colorTextDropdownHeader": "--color-text-dropdown-header-ga95zo",
|
|
@@ -1383,6 +1383,10 @@ export var preset = {
|
|
|
1383
1383
|
"light": "{colorGrey400}",
|
|
1384
1384
|
"dark": "{colorGrey550}"
|
|
1385
1385
|
},
|
|
1386
|
+
"colorTextDisabledInlineEdit": {
|
|
1387
|
+
"light": "{colorGrey600}",
|
|
1388
|
+
"dark": "{colorGrey400}"
|
|
1389
|
+
},
|
|
1386
1390
|
"colorTextDropdownFooter": {
|
|
1387
1391
|
"light": "{colorTextFormSecondary}",
|
|
1388
1392
|
"dark": "{colorTextFormSecondary}"
|
|
@@ -3421,6 +3425,10 @@ export var preset = {
|
|
|
3421
3425
|
"light": "{colorGrey550}",
|
|
3422
3426
|
"dark": "{colorGrey550}"
|
|
3423
3427
|
},
|
|
3428
|
+
"colorTextDisabledInlineEdit": {
|
|
3429
|
+
"light": "{colorGrey400}",
|
|
3430
|
+
"dark": "{colorGrey400}"
|
|
3431
|
+
},
|
|
3424
3432
|
"colorTextDropdownFooter": {
|
|
3425
3433
|
"light": "{colorTextFormSecondary}",
|
|
3426
3434
|
"dark": "{colorTextFormSecondary}"
|
|
@@ -4439,6 +4447,10 @@ export var preset = {
|
|
|
4439
4447
|
"light": "{colorGrey550}",
|
|
4440
4448
|
"dark": "{colorGrey550}"
|
|
4441
4449
|
},
|
|
4450
|
+
"colorTextDisabledInlineEdit": {
|
|
4451
|
+
"light": "{colorGrey400}",
|
|
4452
|
+
"dark": "{colorGrey400}"
|
|
4453
|
+
},
|
|
4442
4454
|
"colorTextDropdownFooter": {
|
|
4443
4455
|
"light": "{colorTextFormSecondary}",
|
|
4444
4456
|
"dark": "{colorTextFormSecondary}"
|
|
@@ -5389,6 +5401,10 @@ export var preset = {
|
|
|
5389
5401
|
"light": "{colorGrey400}",
|
|
5390
5402
|
"dark": "{colorGrey550}"
|
|
5391
5403
|
},
|
|
5404
|
+
"colorTextDisabledInlineEdit": {
|
|
5405
|
+
"light": "{colorGrey600}",
|
|
5406
|
+
"dark": "{colorGrey400}"
|
|
5407
|
+
},
|
|
5392
5408
|
"colorTextDropdownFooter": {
|
|
5393
5409
|
"light": "{colorTextFormSecondary}",
|
|
5394
5410
|
"dark": "{colorTextFormSecondary}"
|
|
@@ -6339,6 +6355,10 @@ export var preset = {
|
|
|
6339
6355
|
"light": "{colorGrey400}",
|
|
6340
6356
|
"dark": "{colorGrey550}"
|
|
6341
6357
|
},
|
|
6358
|
+
"colorTextDisabledInlineEdit": {
|
|
6359
|
+
"light": "{colorGrey600}",
|
|
6360
|
+
"dark": "{colorGrey400}"
|
|
6361
|
+
},
|
|
6342
6362
|
"colorTextDropdownFooter": {
|
|
6343
6363
|
"light": "{colorTextFormSecondary}",
|
|
6344
6364
|
"dark": "{colorTextFormSecondary}"
|
|
@@ -7289,6 +7309,10 @@ export var preset = {
|
|
|
7289
7309
|
"light": "{colorGrey400}",
|
|
7290
7310
|
"dark": "{colorGrey550}"
|
|
7291
7311
|
},
|
|
7312
|
+
"colorTextDisabledInlineEdit": {
|
|
7313
|
+
"light": "{colorGrey600}",
|
|
7314
|
+
"dark": "{colorGrey400}"
|
|
7315
|
+
},
|
|
7292
7316
|
"colorTextDropdownFooter": {
|
|
7293
7317
|
"light": "{colorTextFormSecondary}",
|
|
7294
7318
|
"dark": "{colorTextFormSecondary}"
|
|
@@ -8241,6 +8265,10 @@ export var preset = {
|
|
|
8241
8265
|
"light": "{colorGrey550}",
|
|
8242
8266
|
"dark": "{colorGrey550}"
|
|
8243
8267
|
},
|
|
8268
|
+
"colorTextDisabledInlineEdit": {
|
|
8269
|
+
"light": "{colorGrey400}",
|
|
8270
|
+
"dark": "{colorGrey400}"
|
|
8271
|
+
},
|
|
8244
8272
|
"colorTextDropdownFooter": {
|
|
8245
8273
|
"light": "{colorTextFormSecondary}",
|
|
8246
8274
|
"dark": "{colorTextFormSecondary}"
|
|
@@ -8836,6 +8864,7 @@ export var preset = {
|
|
|
8836
8864
|
"colorTextControlDisabled": "color",
|
|
8837
8865
|
"colorTextCounter": "color",
|
|
8838
8866
|
"colorTextDisabled": "color",
|
|
8867
|
+
"colorTextDisabledInlineEdit": "color",
|
|
8839
8868
|
"colorTextDropdownFooter": "color",
|
|
8840
8869
|
"colorTextDropdownGroupLabel": "color",
|
|
8841
8870
|
"colorTextDropdownHeader": "color",
|
|
@@ -10001,6 +10030,7 @@ export var preset = {
|
|
|
10001
10030
|
"colorTextControlDisabled": "color-text-control-disabled",
|
|
10002
10031
|
"colorTextCounter": "color-text-counter",
|
|
10003
10032
|
"colorTextDisabled": "color-text-disabled",
|
|
10033
|
+
"colorTextDisabledInlineEdit": "color-text-disabled-inline-edit",
|
|
10004
10034
|
"colorTextDropdownFooter": "color-text-dropdown-footer",
|
|
10005
10035
|
"colorTextDropdownGroupLabel": "color-text-dropdown-group-label",
|
|
10006
10036
|
"colorTextDropdownHeader": "color-text-dropdown-header",
|
|
@@ -10687,6 +10717,7 @@ export var preset = {
|
|
|
10687
10717
|
"colorTextControlDisabled": "--color-text-control-disabled-ircsnq",
|
|
10688
10718
|
"colorTextCounter": "--color-text-counter-zqugin",
|
|
10689
10719
|
"colorTextDisabled": "--color-text-disabled-f4c52h",
|
|
10720
|
+
"colorTextDisabledInlineEdit": "--color-text-disabled-inline-edit-zrb7bp",
|
|
10690
10721
|
"colorTextDropdownFooter": "--color-text-dropdown-footer-7d1eld",
|
|
10691
10722
|
"colorTextDropdownGroupLabel": "--color-text-dropdown-group-label-4x4uyw",
|
|
10692
10723
|
"colorTextDropdownHeader": "--color-text-dropdown-header-ga95zo",
|
package/internal/manifest.json
CHANGED
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"name":"@cloudscape-design/components","main":"./index.js","exports":{".":"./index.js","./package.json":"./package.json","./theming":"./theming/index.js","./test-utils/dom":"./test-utils/dom/index.js","./test-utils/selectors":"./test-utils/selectors/index.js","./interfaces":"./interfaces.js","./contexts/form-field":"./contexts/form-field.js","./alert":"./alert/index.js","./anchor-navigation":"./anchor-navigation/index.js","./annotation-context":"./annotation-context/index.js","./app-layout":"./app-layout/index.js","./area-chart":"./area-chart/index.js","./attribute-editor":"./attribute-editor/index.js","./autosuggest":"./autosuggest/index.js","./badge":"./badge/index.js","./bar-chart":"./bar-chart/index.js","./box":"./box/index.js","./breadcrumb-group":"./breadcrumb-group/index.js","./button":"./button/index.js","./button-dropdown":"./button-dropdown/index.js","./calendar":"./calendar/index.js","./cards":"./cards/index.js","./checkbox":"./checkbox/index.js","./code-editor":"./code-editor/index.js","./collection-preferences":"./collection-preferences/index.js","./column-layout":"./column-layout/index.js","./container":"./container/index.js","./content-layout":"./content-layout/index.js","./date-input":"./date-input/index.js","./date-picker":"./date-picker/index.js","./date-range-picker":"./date-range-picker/index.js","./drawer":"./drawer/index.js","./expandable-section":"./expandable-section/index.js","./file-upload":"./file-upload/index.js","./flashbar":"./flashbar/index.js","./form":"./form/index.js","./form-field":"./form-field/index.js","./grid":"./grid/index.js","./header":"./header/index.js","./help-panel":"./help-panel/index.js","./hotspot":"./hotspot/index.js","./icon":"./icon/index.js","./input":"./input/index.js","./line-chart":"./line-chart/index.js","./link":"./link/index.js","./mixed-line-bar-chart":"./mixed-line-bar-chart/index.js","./modal":"./modal/index.js","./multiselect":"./multiselect/index.js","./pagination":"./pagination/index.js","./pie-chart":"./pie-chart/index.js","./popover":"./popover/index.js","./progress-bar":"./progress-bar/index.js","./property-filter":"./property-filter/index.js","./radio-group":"./radio-group/index.js","./s3-resource-selector":"./s3-resource-selector/index.js","./segmented-control":"./segmented-control/index.js","./select":"./select/index.js","./side-navigation":"./side-navigation/index.js","./space-between":"./space-between/index.js","./spinner":"./spinner/index.js","./split-panel":"./split-panel/index.js","./status-indicator":"./status-indicator/index.js","./table":"./table/index.js","./tabs":"./tabs/index.js","./tag-editor":"./tag-editor/index.js","./text-content":"./text-content/index.js","./text-filter":"./text-filter/index.js","./textarea":"./textarea/index.js","./tiles":"./tiles/index.js","./time-input":"./time-input/index.js","./toggle":"./toggle/index.js","./token-group":"./token-group/index.js","./top-navigation":"./top-navigation/index.js","./tutorial-panel":"./tutorial-panel/index.js","./wizard":"./wizard/index.js","./top-navigation/1.0-beta":"./top-navigation/1.0-beta/index.js","./i18n":"./i18n/index.js","./i18n/messages/all.all":"./i18n/messages/all.all.js","./i18n/messages/all.all.json":"./i18n/messages/all.all.json","./i18n/messages/all.de":"./i18n/messages/all.de.js","./i18n/messages/all.de.json":"./i18n/messages/all.de.json","./i18n/messages/all.en-GB":"./i18n/messages/all.en-GB.js","./i18n/messages/all.en-GB.json":"./i18n/messages/all.en-GB.json","./i18n/messages/all.en":"./i18n/messages/all.en.js","./i18n/messages/all.en.json":"./i18n/messages/all.en.json","./i18n/messages/all.es":"./i18n/messages/all.es.js","./i18n/messages/all.es.json":"./i18n/messages/all.es.json","./i18n/messages/all.fr":"./i18n/messages/all.fr.js","./i18n/messages/all.fr.json":"./i18n/messages/all.fr.json","./i18n/messages/all.id":"./i18n/messages/all.id.js","./i18n/messages/all.id.json":"./i18n/messages/all.id.json","./i18n/messages/all.it":"./i18n/messages/all.it.js","./i18n/messages/all.it.json":"./i18n/messages/all.it.json","./i18n/messages/all.ja":"./i18n/messages/all.ja.js","./i18n/messages/all.ja.json":"./i18n/messages/all.ja.json","./i18n/messages/all.ko":"./i18n/messages/all.ko.js","./i18n/messages/all.ko.json":"./i18n/messages/all.ko.json","./i18n/messages/all.pt-BR":"./i18n/messages/all.pt-BR.js","./i18n/messages/all.pt-BR.json":"./i18n/messages/all.pt-BR.json","./i18n/messages/all.th":"./i18n/messages/all.th.js","./i18n/messages/all.th.json":"./i18n/messages/all.th.json","./i18n/messages/all.tr":"./i18n/messages/all.tr.js","./i18n/messages/all.tr.json":"./i18n/messages/all.tr.json","./i18n/messages/all.zh-CN":"./i18n/messages/all.zh-CN.js","./i18n/messages/all.zh-CN.json":"./i18n/messages/all.zh-CN.json","./i18n/messages/all.zh-TW":"./i18n/messages/all.zh-TW.js","./i18n/messages/all.zh-TW.json":"./i18n/messages/all.zh-TW.json"},"sideEffects":["*.css","./internal/base-component/index.js","./internal/base-component/styles.css.js"],"version":"3.0.
|
|
1
|
+
{"name":"@cloudscape-design/components","main":"./index.js","exports":{".":"./index.js","./package.json":"./package.json","./theming":"./theming/index.js","./test-utils/dom":"./test-utils/dom/index.js","./test-utils/selectors":"./test-utils/selectors/index.js","./interfaces":"./interfaces.js","./contexts/form-field":"./contexts/form-field.js","./alert":"./alert/index.js","./anchor-navigation":"./anchor-navigation/index.js","./annotation-context":"./annotation-context/index.js","./app-layout":"./app-layout/index.js","./area-chart":"./area-chart/index.js","./attribute-editor":"./attribute-editor/index.js","./autosuggest":"./autosuggest/index.js","./badge":"./badge/index.js","./bar-chart":"./bar-chart/index.js","./box":"./box/index.js","./breadcrumb-group":"./breadcrumb-group/index.js","./button":"./button/index.js","./button-dropdown":"./button-dropdown/index.js","./calendar":"./calendar/index.js","./cards":"./cards/index.js","./checkbox":"./checkbox/index.js","./code-editor":"./code-editor/index.js","./collection-preferences":"./collection-preferences/index.js","./column-layout":"./column-layout/index.js","./container":"./container/index.js","./content-layout":"./content-layout/index.js","./date-input":"./date-input/index.js","./date-picker":"./date-picker/index.js","./date-range-picker":"./date-range-picker/index.js","./drawer":"./drawer/index.js","./expandable-section":"./expandable-section/index.js","./file-upload":"./file-upload/index.js","./flashbar":"./flashbar/index.js","./form":"./form/index.js","./form-field":"./form-field/index.js","./grid":"./grid/index.js","./header":"./header/index.js","./help-panel":"./help-panel/index.js","./hotspot":"./hotspot/index.js","./icon":"./icon/index.js","./input":"./input/index.js","./line-chart":"./line-chart/index.js","./link":"./link/index.js","./mixed-line-bar-chart":"./mixed-line-bar-chart/index.js","./modal":"./modal/index.js","./multiselect":"./multiselect/index.js","./pagination":"./pagination/index.js","./pie-chart":"./pie-chart/index.js","./popover":"./popover/index.js","./progress-bar":"./progress-bar/index.js","./property-filter":"./property-filter/index.js","./radio-group":"./radio-group/index.js","./s3-resource-selector":"./s3-resource-selector/index.js","./segmented-control":"./segmented-control/index.js","./select":"./select/index.js","./side-navigation":"./side-navigation/index.js","./space-between":"./space-between/index.js","./spinner":"./spinner/index.js","./split-panel":"./split-panel/index.js","./status-indicator":"./status-indicator/index.js","./table":"./table/index.js","./tabs":"./tabs/index.js","./tag-editor":"./tag-editor/index.js","./text-content":"./text-content/index.js","./text-filter":"./text-filter/index.js","./textarea":"./textarea/index.js","./tiles":"./tiles/index.js","./time-input":"./time-input/index.js","./toggle":"./toggle/index.js","./token-group":"./token-group/index.js","./top-navigation":"./top-navigation/index.js","./tutorial-panel":"./tutorial-panel/index.js","./wizard":"./wizard/index.js","./top-navigation/1.0-beta":"./top-navigation/1.0-beta/index.js","./i18n":"./i18n/index.js","./i18n/messages/all.all":"./i18n/messages/all.all.js","./i18n/messages/all.all.json":"./i18n/messages/all.all.json","./i18n/messages/all.de":"./i18n/messages/all.de.js","./i18n/messages/all.de.json":"./i18n/messages/all.de.json","./i18n/messages/all.en-GB":"./i18n/messages/all.en-GB.js","./i18n/messages/all.en-GB.json":"./i18n/messages/all.en-GB.json","./i18n/messages/all.en":"./i18n/messages/all.en.js","./i18n/messages/all.en.json":"./i18n/messages/all.en.json","./i18n/messages/all.es":"./i18n/messages/all.es.js","./i18n/messages/all.es.json":"./i18n/messages/all.es.json","./i18n/messages/all.fr":"./i18n/messages/all.fr.js","./i18n/messages/all.fr.json":"./i18n/messages/all.fr.json","./i18n/messages/all.id":"./i18n/messages/all.id.js","./i18n/messages/all.id.json":"./i18n/messages/all.id.json","./i18n/messages/all.it":"./i18n/messages/all.it.js","./i18n/messages/all.it.json":"./i18n/messages/all.it.json","./i18n/messages/all.ja":"./i18n/messages/all.ja.js","./i18n/messages/all.ja.json":"./i18n/messages/all.ja.json","./i18n/messages/all.ko":"./i18n/messages/all.ko.js","./i18n/messages/all.ko.json":"./i18n/messages/all.ko.json","./i18n/messages/all.pt-BR":"./i18n/messages/all.pt-BR.js","./i18n/messages/all.pt-BR.json":"./i18n/messages/all.pt-BR.json","./i18n/messages/all.th":"./i18n/messages/all.th.js","./i18n/messages/all.th.json":"./i18n/messages/all.th.json","./i18n/messages/all.tr":"./i18n/messages/all.tr.js","./i18n/messages/all.tr.json":"./i18n/messages/all.tr.json","./i18n/messages/all.zh-CN":"./i18n/messages/all.zh-CN.js","./i18n/messages/all.zh-CN.json":"./i18n/messages/all.zh-CN.json","./i18n/messages/all.zh-TW":"./i18n/messages/all.zh-TW.js","./i18n/messages/all.zh-TW.json":"./i18n/messages/all.zh-TW.json"},"sideEffects":["*.css","./internal/base-component/index.js","./internal/base-component/styles.css.js"],"version":"3.0.502","repository":{"type":"git","url":"https://github.com/cloudscape-design/components.git"},"homepage":"https://cloudscape.design","dependencies":{"@cloudscape-design/collection-hooks":"^1.0.0","@cloudscape-design/component-toolkit":"^1.0.0-beta","@cloudscape-design/test-utils-core":"^1.0.0","@cloudscape-design/theming-runtime":"^1.0.0","@dnd-kit/core":"^6.0.8","@dnd-kit/sortable":"^7.0.2","@dnd-kit/utilities":"^3.2.1","@juggle/resize-observer":"^3.3.1","ace-builds":"^1.23.0","balanced-match":"^1.0.2","clsx":"^1.1.0","d3-shape":"^1.3.7","date-fns":"^2.25.0","intl-messageformat":"^10.3.1","mnth":"^2.0.0","react-keyed-flatten-children":"^1.3.0","react-transition-group":"^4.4.2","react-virtual":"^2.8.2","tslib":"^2.4.0","weekstart":"^1.1.0"},"peerDependencies":{"react":"^16.8 || ^17 || ^18","react-dom":"^16.8 || ^17 || ^18"},"license":"Apache-2.0"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { TableBodyCellProps } from './index';
|
|
3
|
+
interface DisabledInlineEditorProps<ItemType> extends TableBodyCellProps<ItemType> {
|
|
4
|
+
editDisabledReason: string;
|
|
5
|
+
}
|
|
6
|
+
export declare function DisabledInlineEditor<ItemType>({ className, item, column, ariaLabels, isEditing, onEditStart, onEditEnd, editDisabledReason, isVisualRefresh, ...rest }: DisabledInlineEditorProps<ItemType>): JSX.Element;
|
|
7
|
+
export {};
|
|
8
|
+
//# sourceMappingURL=disabled-inline-editor.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"disabled-inline-editor.d.ts","sourceRoot":"lib/default/","sources":["table/body-cell/disabled-inline-editor.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAG7C,UAAU,yBAAyB,CAAC,QAAQ,CAAE,SAAQ,kBAAkB,CAAC,QAAQ,CAAC;IAChF,kBAAkB,EAAE,MAAM,CAAC;CAC5B;AAED,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,EAC7C,SAAS,EACT,IAAI,EACJ,MAAM,EACN,UAAU,EACV,SAAS,EACT,WAAW,EACX,SAAS,EACT,kBAAkB,EAClB,eAAe,EACf,GAAG,IAAI,EACR,EAAE,yBAAyB,CAAC,QAAQ,CAAC,eA6FrC"}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { __rest } from "tslib";
|
|
2
|
+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
3
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
4
|
+
import React, { useRef, useState } from 'react';
|
|
5
|
+
import clsx from 'clsx';
|
|
6
|
+
import useHiddenDescription from '../../button-dropdown/utils/use-hidden-description';
|
|
7
|
+
import Icon from '../../icon/internal';
|
|
8
|
+
import PopoverContainer from '../../popover/container';
|
|
9
|
+
import PopoverBody from '../../popover/body';
|
|
10
|
+
import Portal from '../../internal/components/portal';
|
|
11
|
+
import { usePortalModeClasses } from '../../internal/hooks/use-portal-mode-classes';
|
|
12
|
+
import Arrow from '../../popover/arrow';
|
|
13
|
+
import { useClickAway } from './click-away';
|
|
14
|
+
import { TableTdElement } from './td-element';
|
|
15
|
+
import styles from './styles.css.js';
|
|
16
|
+
export function DisabledInlineEditor(_a) {
|
|
17
|
+
var _b;
|
|
18
|
+
var { className, item, column, ariaLabels, isEditing, onEditStart, onEditEnd, editDisabledReason, isVisualRefresh } = _a, rest = __rest(_a, ["className", "item", "column", "ariaLabels", "isEditing", "onEditStart", "onEditEnd", "editDisabledReason", "isVisualRefresh"]);
|
|
19
|
+
const clickAwayRef = useClickAway(() => {
|
|
20
|
+
if (isEditing) {
|
|
21
|
+
onEditEnd(true);
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
const [hasHover, setHasHover] = useState(false);
|
|
25
|
+
const [hasFocus, setHasFocus] = useState(false);
|
|
26
|
+
const showIcon = hasHover || hasFocus || isEditing;
|
|
27
|
+
const iconRef = useRef(null);
|
|
28
|
+
const buttonRef = useRef(null);
|
|
29
|
+
const portalRef = useRef(null);
|
|
30
|
+
function handleEscape(event) {
|
|
31
|
+
if (event.key === 'Escape') {
|
|
32
|
+
onEditEnd(true);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
const onClick = () => {
|
|
36
|
+
var _a;
|
|
37
|
+
onEditStart();
|
|
38
|
+
(_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
39
|
+
};
|
|
40
|
+
const { targetProps, descriptionEl } = useHiddenDescription(editDisabledReason);
|
|
41
|
+
const portalClasses = usePortalModeClasses(portalRef);
|
|
42
|
+
return (React.createElement(TableTdElement, Object.assign({}, rest, { nativeAttributes: { 'data-inline-editing-active': isEditing.toString() }, className: clsx(className, styles['body-cell-editable'], styles['body-cell-disabled-edit'], isEditing && styles['body-cell-edit-disabled-popover'], isVisualRefresh && styles['is-visual-refresh']), onClick: !isEditing ? onClick : undefined, onMouseEnter: () => setHasHover(true), onMouseLeave: () => setHasHover(false), ref: clickAwayRef }),
|
|
43
|
+
column.cell(item),
|
|
44
|
+
React.createElement("button", Object.assign({ ref: buttonRef, tabIndex: 0, className: styles['body-cell-editor'], "aria-label": (_b = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.activateEditLabel) === null || _b === void 0 ? void 0 : _b.call(ariaLabels, column, item), "aria-haspopup": "dialog", "aria-disabled": "true", onFocus: () => setHasFocus(true), onBlur: () => setHasFocus(false), onKeyDown: handleEscape }, targetProps),
|
|
45
|
+
showIcon && React.createElement(Icon, { name: "lock-private", variant: "normal", __internalRootRef: iconRef }),
|
|
46
|
+
descriptionEl),
|
|
47
|
+
isEditing && (React.createElement("span", { ref: portalRef },
|
|
48
|
+
React.createElement(Portal, null,
|
|
49
|
+
React.createElement("span", { className: portalClasses },
|
|
50
|
+
React.createElement(PopoverContainer, { size: "medium", fixedWidth: false, position: "top", trackRef: iconRef, arrow: position => React.createElement(Arrow, { position: position }), renderWithPortal: true, zIndex: 2000 },
|
|
51
|
+
React.createElement(PopoverBody, { dismissButton: false, dismissAriaLabel: undefined, header: null, onDismiss: () => { }, overflowVisible: "both" },
|
|
52
|
+
React.createElement("span", { "aria-live": "polite" }, editDisabledReason)))))))));
|
|
53
|
+
}
|
|
54
|
+
//# sourceMappingURL=disabled-inline-editor.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"disabled-inline-editor.js","sourceRoot":"lib/default/","sources":["table/body-cell/disabled-inline-editor.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 React, { useRef, useState } from 'react';\nimport clsx from 'clsx';\nimport useHiddenDescription from '../../button-dropdown/utils/use-hidden-description';\nimport Icon from '../../icon/internal';\nimport PopoverContainer from '../../popover/container';\nimport PopoverBody from '../../popover/body';\nimport Portal from '../../internal/components/portal';\nimport { usePortalModeClasses } from '../../internal/hooks/use-portal-mode-classes';\nimport Arrow from '../../popover/arrow';\nimport { useClickAway } from './click-away';\nimport { TableTdElement, TableTdElementProps } from './td-element';\nimport { TableBodyCellProps } from './index';\nimport styles from './styles.css.js';\n\ninterface DisabledInlineEditorProps<ItemType> extends TableBodyCellProps<ItemType> {\n editDisabledReason: string;\n}\n\nexport function DisabledInlineEditor<ItemType>({\n className,\n item,\n column,\n ariaLabels,\n isEditing,\n onEditStart,\n onEditEnd,\n editDisabledReason,\n isVisualRefresh,\n ...rest\n}: DisabledInlineEditorProps<ItemType>) {\n const clickAwayRef = useClickAway(() => {\n if (isEditing) {\n onEditEnd(true);\n }\n });\n\n const [hasHover, setHasHover] = useState(false);\n const [hasFocus, setHasFocus] = useState(false);\n const showIcon = hasHover || hasFocus || isEditing;\n\n const iconRef = useRef(null);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const portalRef = useRef<HTMLSpanElement>(null);\n\n function handleEscape(event: React.KeyboardEvent): void {\n if (event.key === 'Escape') {\n onEditEnd(true);\n }\n }\n\n const onClick = () => {\n onEditStart();\n buttonRef.current?.focus();\n };\n\n const { targetProps, descriptionEl } = useHiddenDescription(editDisabledReason);\n const portalClasses = usePortalModeClasses(portalRef);\n\n return (\n <TableTdElement\n {...rest}\n nativeAttributes={\n { 'data-inline-editing-active': isEditing.toString() } as TableTdElementProps['nativeAttributes']\n }\n className={clsx(\n className,\n styles['body-cell-editable'],\n styles['body-cell-disabled-edit'],\n isEditing && styles['body-cell-edit-disabled-popover'],\n isVisualRefresh && styles['is-visual-refresh']\n )}\n onClick={!isEditing ? onClick : undefined}\n onMouseEnter={() => setHasHover(true)}\n onMouseLeave={() => setHasHover(false)}\n ref={clickAwayRef}\n >\n {column.cell(item)}\n\n <button\n ref={buttonRef}\n tabIndex={0}\n className={styles['body-cell-editor']}\n aria-label={ariaLabels?.activateEditLabel?.(column, item)}\n aria-haspopup=\"dialog\"\n aria-disabled=\"true\"\n onFocus={() => setHasFocus(true)}\n onBlur={() => setHasFocus(false)}\n onKeyDown={handleEscape}\n {...targetProps}\n >\n {showIcon && <Icon name=\"lock-private\" variant=\"normal\" __internalRootRef={iconRef} />}\n {descriptionEl}\n </button>\n {isEditing && (\n <span ref={portalRef}>\n <Portal>\n <span className={portalClasses}>\n <PopoverContainer\n size=\"medium\"\n fixedWidth={false}\n position=\"top\"\n trackRef={iconRef}\n arrow={position => <Arrow position={position} />}\n renderWithPortal={true}\n zIndex={2000}\n >\n <PopoverBody\n dismissButton={false}\n dismissAriaLabel={undefined}\n header={null}\n onDismiss={() => {}}\n overflowVisible=\"both\"\n >\n <span aria-live=\"polite\">{editDisabledReason}</span>\n </PopoverBody>\n </PopoverContainer>\n </span>\n </Portal>\n </span>\n )}\n </TableTdElement>\n );\n}\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { TableProps } from '../interfaces';
|
|
3
3
|
import { TableTdElementProps } from './td-element';
|
|
4
|
-
interface TableBodyCellProps<ItemType> extends TableTdElementProps {
|
|
4
|
+
export interface TableBodyCellProps<ItemType> extends TableTdElementProps {
|
|
5
5
|
column: TableProps.ColumnDefinition<ItemType>;
|
|
6
6
|
item: ItemType;
|
|
7
7
|
isEditing: boolean;
|
|
@@ -14,5 +14,4 @@ interface TableBodyCellProps<ItemType> extends TableTdElementProps {
|
|
|
14
14
|
export declare function TableBodyCell<ItemType>({ isEditable, ...rest }: TableBodyCellProps<ItemType> & {
|
|
15
15
|
isEditable: boolean;
|
|
16
16
|
}): JSX.Element;
|
|
17
|
-
export {};
|
|
18
17
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["table/body-cell/index.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAkB,mBAAmB,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["table/body-cell/index.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAkB,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAWnE,MAAM,WAAW,kBAAkB,CAAC,QAAQ,CAAE,SAAQ,mBAAmB;IACvE,MAAM,EAAE,UAAU,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC9C,IAAI,EAAE,QAAQ,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,SAAS,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,UAAU,CAAC,EAAE,UAAU,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACrD,UAAU,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;CACtC;AAgHD,wBAAgB,aAAa,CAAC,QAAQ,EAAE,EACtC,UAAU,EACV,GAAG,IAAI,EACR,EAAE,kBAAkB,CAAC,QAAQ,CAAC,GAAG;IAAE,UAAU,EAAE,OAAO,CAAA;CAAE,eAYxD"}
|
package/table/body-cell/index.js
CHANGED
|
@@ -10,6 +10,7 @@ import { InlineEditor } from './inline-editor';
|
|
|
10
10
|
import LiveRegion from '../../internal/components/live-region/index.js';
|
|
11
11
|
import { useInternalI18n } from '../../i18n/context';
|
|
12
12
|
import { usePrevious } from '../../internal/hooks/use-previous';
|
|
13
|
+
import { DisabledInlineEditor } from './disabled-inline-editor';
|
|
13
14
|
const submitHandlerFallback = () => {
|
|
14
15
|
throw new Error('The function `handleSubmit` is required for editable columns');
|
|
15
16
|
};
|
|
@@ -62,7 +63,12 @@ function TableCellEditable(_a) {
|
|
|
62
63
|
React.createElement("button", { className: styles['body-cell-editor'], "aria-label": (_d = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.activateEditLabel) === null || _d === void 0 ? void 0 : _d.call(ariaLabels, column, item), ref: editActivateRef, onFocus: () => setHasFocus(true), onBlur: () => setHasFocus(false) }, showIcon && React.createElement(Icon, { name: "edit" }))))));
|
|
63
64
|
}
|
|
64
65
|
export function TableBodyCell(_a) {
|
|
66
|
+
var _b, _c;
|
|
65
67
|
var { isEditable } = _a, rest = __rest(_a, ["isEditable"]);
|
|
68
|
+
const editDisabledReason = (_c = (_b = rest.column.editConfig) === null || _b === void 0 ? void 0 : _b.disabledReason) === null || _c === void 0 ? void 0 : _c.call(_b, rest.item);
|
|
69
|
+
if (editDisabledReason) {
|
|
70
|
+
return React.createElement(DisabledInlineEditor, Object.assign({ editDisabledReason: editDisabledReason }, rest));
|
|
71
|
+
}
|
|
66
72
|
if (isEditable || rest.isEditing) {
|
|
67
73
|
return React.createElement(TableCellEditable, Object.assign({}, rest));
|
|
68
74
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["table/body-cell/index.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["table/body-cell/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport React, { useEffect, useRef, useState } from 'react';\nimport Icon from '../../icon/internal';\nimport { TableProps } from '../interfaces';\nimport { TableTdElement, TableTdElementProps } from './td-element';\nimport { InlineEditor } from './inline-editor';\nimport LiveRegion from '../../internal/components/live-region/index.js';\nimport { useInternalI18n } from '../../i18n/context';\nimport { usePrevious } from '../../internal/hooks/use-previous';\nimport { DisabledInlineEditor } from './disabled-inline-editor';\n\nconst submitHandlerFallback = () => {\n throw new Error('The function `handleSubmit` is required for editable columns');\n};\n\nexport interface TableBodyCellProps<ItemType> extends TableTdElementProps {\n column: TableProps.ColumnDefinition<ItemType>;\n item: ItemType;\n isEditing: boolean;\n successfulEdit?: boolean;\n onEditStart: () => void;\n onEditEnd: (cancelled: boolean) => void;\n submitEdit?: TableProps.SubmitEditFunction<ItemType>;\n ariaLabels: TableProps['ariaLabels'];\n}\n\nfunction TableCellEditable<ItemType>({\n className,\n item,\n column,\n isEditing,\n onEditStart,\n onEditEnd,\n submitEdit,\n ariaLabels,\n isVisualRefresh,\n successfulEdit = false,\n ...rest\n}: TableBodyCellProps<ItemType>) {\n const i18n = useInternalI18n('table');\n const editActivateRef = useRef<HTMLButtonElement>(null);\n const tdNativeAttributes = {\n 'data-inline-editing-active': isEditing.toString(),\n };\n const isFocusMoveNeededRef = useRef(false);\n\n useEffect(() => {\n if (!isEditing && editActivateRef.current && isFocusMoveNeededRef.current) {\n isFocusMoveNeededRef.current = false;\n editActivateRef.current.focus();\n }\n }, [isEditing]);\n // To improve the initial page render performance we only show the edit icon when necessary.\n const [hasHover, setHasHover] = useState(false);\n const [hasFocus, setHasFocus] = useState(false);\n const showIcon = hasHover || hasFocus;\n\n const prevSuccessfulEdit = usePrevious(successfulEdit);\n const prevHasFocus = usePrevious(hasFocus);\n const [showSuccessIcon, setShowSuccessIcon] = useState(false);\n\n useEffect(() => {\n // Hide the success icon after a successful edit, when cell loses focus.\n if (successfulEdit && prevSuccessfulEdit && !hasFocus && prevHasFocus) {\n setShowSuccessIcon(false);\n }\n // Show success icon right after a successful edit, when `successfulEdit` switches to true.\n if (successfulEdit && !prevSuccessfulEdit) {\n setShowSuccessIcon(true);\n }\n }, [hasFocus, successfulEdit, prevHasFocus, prevSuccessfulEdit]);\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 showSuccessIcon && showIcon && styles['body-cell-has-success'],\n isVisualRefresh && styles['is-visual-refresh']\n )}\n onClick={!isEditing ? onEditStart : undefined}\n onMouseEnter={() => setHasHover(true)}\n onMouseLeave={() => setHasHover(false)}\n >\n {isEditing ? (\n <InlineEditor\n ariaLabels={ariaLabels}\n column={column}\n item={item}\n onEditEnd={options => {\n setShowSuccessIcon(false);\n isFocusMoveNeededRef.current = options.refocusCell;\n onEditEnd(options.cancelled);\n }}\n submitEdit={submitEdit ?? submitHandlerFallback}\n />\n ) : (\n <>\n {column.cell(item)}\n {showSuccessIcon && showIcon && (\n <>\n <span\n className={styles['body-cell-success']}\n aria-label={ariaLabels?.successfulEditLabel?.(column)}\n role=\"img\"\n onMouseDown={e => {\n // Prevent the editor's Button blur event to be fired when clicking the success icon.\n // This prevents unfocusing the button and triggers the `TableTdElement` onClick event which initiates the edit mode.\n e.preventDefault();\n }}\n >\n <Icon name=\"status-positive\" variant=\"success\" />\n </span>\n <LiveRegion>\n {i18n('ariaLabels.successfulEditLabel', ariaLabels?.successfulEditLabel?.(column))}\n </LiveRegion>\n </>\n )}\n <button\n className={styles['body-cell-editor']}\n aria-label={ariaLabels?.activateEditLabel?.(column, item)}\n ref={editActivateRef}\n onFocus={() => setHasFocus(true)}\n onBlur={() => setHasFocus(false)}\n >\n {showIcon && <Icon name=\"edit\" />}\n </button>\n </>\n )}\n </TableTdElement>\n );\n}\n\nexport function TableBodyCell<ItemType>({\n isEditable,\n ...rest\n}: TableBodyCellProps<ItemType> & { isEditable: boolean }) {\n const editDisabledReason = rest.column.editConfig?.disabledReason?.(rest.item);\n\n if (editDisabledReason) {\n return <DisabledInlineEditor editDisabledReason={editDisabledReason} {...rest} />;\n }\n\n if (isEditable || rest.isEditing) {\n return <TableCellEditable {...rest} />;\n }\n const { column, item } = rest;\n return <TableTdElement {...rest}>{column.cell(item)}</TableTdElement>;\n}\n"]}
|