@cloudscape-design/components-themeable 3.0.515 → 3.0.517

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 (36) hide show
  1. package/lib/internal/manifest.json +1 -1
  2. package/lib/internal/scss/table/body-cell/styles.scss +21 -8
  3. package/lib/internal/template/internal/base-component/styles.scoped.css +11 -0
  4. package/lib/internal/template/internal/context/single-tab-stop-navigation-context.d.ts +5 -6
  5. package/lib/internal/template/internal/context/single-tab-stop-navigation-context.d.ts.map +1 -1
  6. package/lib/internal/template/internal/context/single-tab-stop-navigation-context.js +7 -8
  7. package/lib/internal/template/internal/context/single-tab-stop-navigation-context.js.map +1 -1
  8. package/lib/internal/template/internal/environment.js +1 -1
  9. package/lib/internal/template/internal/environment.json +1 -1
  10. package/lib/internal/template/internal/generated/theming/index.cjs +31 -0
  11. package/lib/internal/template/internal/generated/theming/index.js +31 -0
  12. package/lib/internal/template/table/body-cell/disabled-inline-editor.d.ts +8 -0
  13. package/lib/internal/template/table/body-cell/disabled-inline-editor.d.ts.map +1 -0
  14. package/lib/internal/template/table/body-cell/disabled-inline-editor.js +54 -0
  15. package/lib/internal/template/table/body-cell/disabled-inline-editor.js.map +1 -0
  16. package/lib/internal/template/table/body-cell/index.d.ts +1 -2
  17. package/lib/internal/template/table/body-cell/index.d.ts.map +1 -1
  18. package/lib/internal/template/table/body-cell/index.js +6 -0
  19. package/lib/internal/template/table/body-cell/index.js.map +1 -1
  20. package/lib/internal/template/table/body-cell/styles.css.js +30 -28
  21. package/lib/internal/template/table/body-cell/styles.scoped.css +93 -88
  22. package/lib/internal/template/table/body-cell/styles.selectors.js +30 -28
  23. package/lib/internal/template/table/interfaces.d.ts +6 -0
  24. package/lib/internal/template/table/interfaces.d.ts.map +1 -1
  25. package/lib/internal/template/table/interfaces.js.map +1 -1
  26. package/lib/internal/template/table/table-role/grid-navigation.d.ts.map +1 -1
  27. package/lib/internal/template/table/table-role/grid-navigation.js +36 -37
  28. package/lib/internal/template/table/table-role/grid-navigation.js.map +1 -1
  29. package/lib/internal/template/table/table-role/interfaces.d.ts +0 -2
  30. package/lib/internal/template/table/table-role/interfaces.d.ts.map +1 -1
  31. package/lib/internal/template/table/table-role/interfaces.js.map +1 -1
  32. package/lib/internal/template/table/table-role/utils.d.ts +1 -0
  33. package/lib/internal/template/table/table-role/utils.d.ts.map +1 -1
  34. package/lib/internal/template/table/table-role/utils.js +3 -0
  35. package/lib/internal/template/table/table-role/utils.js.map +1 -1
  36. package/package.json +1 -1
package/lib/internal/manifest.json CHANGED
@@ -1,3 +1,3 @@
1
1
  {
2
- "commit": "43d19872b1abe3348f59ead968d1b22aa38cb9d9"
2
+ "commit": "6ea0f8008b16df8e7645438830363d87deb6cd7b"
3
3
  }
package/lib/internal/scss/table/body-cell/styles.scss CHANGED
@@ -253,6 +253,11 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
253
253
  flex-shrink: 0;
254
254
  }
255
255
  }
256
+
257
+ &.body-cell-disabled-edit > .body-cell-editor {
258
+ color: awsui.$color-text-disabled-inline-edit;
259
+ }
260
+
256
261
  &.body-cell-editable {
257
262
  position: relative;
258
263
  cursor: pointer;
@@ -286,33 +291,40 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
286
291
  // It's therefore important to display the focus outline, even when a keyboard user wasn't detected.
287
292
  // For example, when an edit button is selected from the VoiceOver rotor menu.
288
293
  &:focus-within {
289
- padding-right: calc(#{$cell-horizontal-padding} + #{awsui.$space-l});
290
- &.body-cell-has-success {
291
- // After a successful edit, we display the success icon next to the edit button and need additional padding to not let the text overflow the success icon.
292
- padding-right: calc(#{$cell-horizontal-padding} + #{awsui.$space-l} + #{$icon-width-with-spacing});
293
- }
294
- @include focused-editor-styles;
295
294
  @include styles.focus-highlight(
296
295
  (
297
296
  'vertical': calc(-1 * #{awsui.$space-scaled-xxs}),
298
297
  'horizontal': calc(-1 * #{awsui.$space-scaled-xxs}),
299
298
  )
300
299
  );
300
+ }
301
+
302
+ &:focus-within,
303
+ &.body-cell-edit-disabled-popover {
304
+ padding-right: calc(#{$cell-horizontal-padding} + #{awsui.$space-l});
305
+ &.body-cell-has-success {
306
+ // After a successful edit, we display the success icon next to the edit button and need additional padding to not let the text overflow the success icon.
307
+ padding-right: calc(#{$cell-horizontal-padding} + #{awsui.$space-l} + #{$icon-width-with-spacing});
308
+ }
309
+ @include focused-editor-styles;
301
310
  &.sticky-cell {
302
311
  position: sticky;
303
312
  }
304
313
  }
314
+
305
315
  &:hover {
306
- position: relative;
307
316
  background-color: awsui.$color-background-dropdown-item-hover;
308
317
  border: awsui.$border-divider-list-width solid awsui.$color-border-editable-cell-hover;
309
318
  left: calc(-1 * #{awsui.$border-divider-list-width});
310
319
  right: calc(-1 * #{awsui.$border-divider-list-width});
311
- @include focused-editor-styles;
320
+
321
+ position: relative;
322
+
312
323
  &:first-child {
313
324
  left: 0;
314
325
  right: 0;
315
326
  }
327
+
316
328
  & > .body-cell-editor {
317
329
  padding-right: calc(#{$edit-button-padding-right} - (2 * #{awsui.$border-divider-list-width}));
318
330
  }
@@ -335,6 +347,7 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
335
347
  &.sticky-cell {
336
348
  position: sticky;
337
349
  }
350
+ @include focused-editor-styles;
338
351
  }
339
352
  }
340
353
  }
package/lib/internal/template/internal/base-component/styles.scoped.css CHANGED
@@ -308,6 +308,7 @@
308
308
  --color-text-control-disabled-nl82op:#aab7b8;
309
309
  --color-text-counter-f3a2pb:#687078;
310
310
  --color-text-disabled-govsss:#aab7b8;
311
+ --color-text-disabled-inline-edit-64vc6h:#545b64;
311
312
  --color-text-dropdown-footer-rnmaph:#687078;
312
313
  --color-text-dropdown-group-label-sizd89:#545b64;
313
314
  --color-text-dropdown-header-z1le22:#16191f;
@@ -887,6 +888,7 @@
887
888
  --color-text-control-disabled-nl82op:#687078;
888
889
  --color-text-counter-f3a2pb:#95a5a6;
889
890
  --color-text-disabled-govsss:#687078;
891
+ --color-text-disabled-inline-edit-64vc6h:#95a5a6;
890
892
  --color-text-dropdown-footer-rnmaph:#95a5a6;
891
893
  --color-text-dropdown-group-label-sizd89:#95a5a6;
892
894
  --color-text-dropdown-header-z1le22:#fafafa;
@@ -1171,6 +1173,7 @@
1171
1173
  --color-text-control-disabled-nl82op:#687078;
1172
1174
  --color-text-counter-f3a2pb:#95a5a6;
1173
1175
  --color-text-disabled-govsss:#687078;
1176
+ --color-text-disabled-inline-edit-64vc6h:#95a5a6;
1174
1177
  --color-text-dropdown-footer-rnmaph:#95a5a6;
1175
1178
  --color-text-dropdown-group-label-sizd89:#95a5a6;
1176
1179
  --color-text-dropdown-header-z1le22:#fafafa;
@@ -1468,6 +1471,7 @@
1468
1471
  --color-text-control-disabled-nl82op:#9ba7b6;
1469
1472
  --color-text-counter-f3a2pb:#5f6b7a;
1470
1473
  --color-text-disabled-govsss:#9ba7b6;
1474
+ --color-text-disabled-inline-edit-64vc6h:#414d5c;
1471
1475
  --color-text-dropdown-footer-rnmaph:#5f6b7a;
1472
1476
  --color-text-dropdown-group-label-sizd89:#414d5c;
1473
1477
  --color-text-dropdown-header-z1le22:#000716;
@@ -1805,6 +1809,7 @@
1805
1809
  --color-text-control-disabled-nl82op:#5f6b7a;
1806
1810
  --color-text-counter-f3a2pb:#8d99a8;
1807
1811
  --color-text-disabled-govsss:#5f6b7a;
1812
+ --color-text-disabled-inline-edit-64vc6h:#9ba7b6;
1808
1813
  --color-text-dropdown-footer-rnmaph:#8d99a8;
1809
1814
  --color-text-dropdown-group-label-sizd89:#b6bec9;
1810
1815
  --color-text-dropdown-header-z1le22:#fbfbfb;
@@ -2066,6 +2071,7 @@
2066
2071
  --color-text-control-disabled-nl82op:#5f6b7a;
2067
2072
  --color-text-counter-f3a2pb:#8d99a8;
2068
2073
  --color-text-disabled-govsss:#5f6b7a;
2074
+ --color-text-disabled-inline-edit-64vc6h:#9ba7b6;
2069
2075
  --color-text-dropdown-footer-rnmaph:#8d99a8;
2070
2076
  --color-text-dropdown-group-label-sizd89:#b6bec9;
2071
2077
  --color-text-dropdown-header-z1le22:#fbfbfb;
@@ -2252,6 +2258,7 @@
2252
2258
  --color-text-control-disabled-nl82op:#5f6b7a;
2253
2259
  --color-text-counter-f3a2pb:#8d99a8;
2254
2260
  --color-text-disabled-govsss:#5f6b7a;
2261
+ --color-text-disabled-inline-edit-64vc6h:#9ba7b6;
2255
2262
  --color-text-dropdown-footer-rnmaph:#8d99a8;
2256
2263
  --color-text-dropdown-group-label-sizd89:#b6bec9;
2257
2264
  --color-text-dropdown-header-z1le22:#fbfbfb;
@@ -2439,6 +2446,7 @@
2439
2446
  --color-text-control-disabled-nl82op:#5f6b7a;
2440
2447
  --color-text-counter-f3a2pb:#8d99a8;
2441
2448
  --color-text-disabled-govsss:#5f6b7a;
2449
+ --color-text-disabled-inline-edit-64vc6h:#9ba7b6;
2442
2450
  --color-text-dropdown-footer-rnmaph:#8d99a8;
2443
2451
  --color-text-dropdown-group-label-sizd89:#b6bec9;
2444
2452
  --color-text-dropdown-header-z1le22:#fbfbfb;
@@ -2638,6 +2646,7 @@
2638
2646
  --color-text-control-disabled-nl82op:#5f6b7a;
2639
2647
  --color-text-counter-f3a2pb:#8d99a8;
2640
2648
  --color-text-disabled-govsss:#5f6b7a;
2649
+ --color-text-disabled-inline-edit-64vc6h:#9ba7b6;
2641
2650
  --color-text-dropdown-footer-rnmaph:#8d99a8;
2642
2651
  --color-text-dropdown-group-label-sizd89:#b6bec9;
2643
2652
  --color-text-dropdown-header-z1le22:#fbfbfb;
@@ -3023,6 +3032,7 @@
3023
3032
  --color-text-control-disabled-nl82op:#5f6b7a;
3024
3033
  --color-text-counter-f3a2pb:#8d99a8;
3025
3034
  --color-text-disabled-govsss:#5f6b7a;
3035
+ --color-text-disabled-inline-edit-64vc6h:#9ba7b6;
3026
3036
  --color-text-dropdown-footer-rnmaph:#8d99a8;
3027
3037
  --color-text-dropdown-group-label-sizd89:#b6bec9;
3028
3038
  --color-text-dropdown-header-z1le22:#fbfbfb;
@@ -3210,6 +3220,7 @@
3210
3220
  --color-text-control-disabled-nl82op:#5f6b7a;
3211
3221
  --color-text-counter-f3a2pb:#8d99a8;
3212
3222
  --color-text-disabled-govsss:#5f6b7a;
3223
+ --color-text-disabled-inline-edit-64vc6h:#9ba7b6;
3213
3224
  --color-text-dropdown-footer-rnmaph:#8d99a8;
3214
3225
  --color-text-dropdown-group-label-sizd89:#b6bec9;
3215
3226
  --color-text-dropdown-header-z1le22:#fbfbfb;
package/lib/internal/template/internal/context/single-tab-stop-navigation-context.d.ts CHANGED
@@ -1,6 +1,5 @@
1
- import React from 'react';
2
- export type FocusableDefinition = React.RefObject<Element>;
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: React.Context<{
10
+ export declare const SingleTabStopNavigationContext: import("react").Context<{
12
11
  navigationActive: boolean;
13
- registerFocusable(focusable: FocusableDefinition, handler: FocusableChangeHandler): () => void;
12
+ registerFocusable(focusable: Element, handler: FocusableChangeHandler): () => void;
14
13
  }>;
15
- export declare function useSingleTabStopNavigation(focusable: null | FocusableDefinition, options?: {
14
+ export declare function useSingleTabStopNavigation(focusable: null | React.RefObject<Element>, options?: {
16
15
  tabIndex?: number;
17
16
  }): {
18
17
  navigationActive: boolean;
package/lib/internal/template/internal/context/single-tab-stop-navigation-context.d.ts.map CHANGED
@@ -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":"AAGA,OAAO,KAAsE,MAAM,OAAO,CAAC;AAE3F,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;AAE3D,MAAM,MAAM,sBAAsB,GAAG,CAAC,WAAW,EAAE,IAAI,GAAG,OAAO,EAAE,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;AAEhG,MAAM,WAAW,8BAA8B;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;GAGG;AACH,eAAO,MAAM,8BAA8B;sBACvB,OAAO;+DACkC,sBAAsB,GAAG,MAAM,IAAI;EAI9F,CAAC;AAEH,wBAAgB,0BAA0B,CAAC,SAAS,EAAE,IAAI,GAAG,mBAAmB,EAAE,OAAO,CAAC,EAAE;IAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE;;;EA2BhH"}
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"}
package/lib/internal/template/internal/context/single-tab-stop-navigation-context.js CHANGED
@@ -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, useCallback, useContext, useEffect, useState } from 'react';
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: contextRegisterFocusable } = useContext(SingleTabStopNavigationContext);
14
+ const { navigationActive: contextNavigationActive, registerFocusable } = useContext(SingleTabStopNavigationContext);
15
15
  const [focusTargetActive, setFocusTargetActive] = useState(false);
16
- const navigationActive = contextNavigationActive && (!(options === null || options === void 0 ? void 0 : options.tabIndex) || (options === null || options === void 0 ? void 0 : options.tabIndex) >= 0);
17
- const registerFocusable = useCallback((focusable, changeHandler) => navigationActive ? contextRegisterFocusable(focusable, changeHandler) : () => { }, [navigationActive, contextRegisterFocusable]);
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 changeHandler = (element, suppressed) => setFocusTargetActive(focusable.current === element || suppressed);
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
- }, [focusable, registerFocusable]);
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;
package/lib/internal/template/internal/context/single-tab-stop-navigation-context.js.map CHANGED
@@ -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,OAAc,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAU3F;;;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,CAAC,SAAqC,EAAE,OAA+B;;IAC/G,MAAM,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,wBAAwB,EAAE,GAC9F,UAAU,CAAC,8BAA8B,CAAC,CAAC;IAC7C,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElE,MAAM,gBAAgB,GAAG,uBAAuB,IAAI,CAAC,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAAA,IAAI,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,KAAI,CAAC,CAAC,CAAC;IACnG,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,SAA8B,EAAE,aAAqC,EAAE,EAAE,CACxE,gBAAgB,CAAC,CAAC,CAAC,wBAAwB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,GAAE,CAAC,EAClF,CAAC,gBAAgB,EAAE,wBAAwB,CAAC,CAC7C,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,EAAE;YACb,MAAM,aAAa,GAAG,CAAC,OAAuB,EAAE,UAAmB,EAAE,EAAE,CACrE,oBAAoB,CAAC,SAAS,CAAC,OAAO,KAAK,OAAO,IAAI,UAAU,CAAC,CAAC;YACpE,MAAM,UAAU,GAAG,iBAAiB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;YAC/D,OAAO,GAAG,EAAE,CAAC,UAAU,EAAE,CAAC;SAC3B;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAEnC,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 React, { createContext, useCallback, useContext, useEffect, useState } from 'react';\n\nexport type FocusableDefinition = React.RefObject<Element>;\n\nexport type FocusableChangeHandler = (focusTarget: null | Element, suppressed: 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: FocusableDefinition, handler: FocusableChangeHandler): () => void;\n}>({\n navigationActive: false,\n registerFocusable: () => () => {},\n});\n\nexport function useSingleTabStopNavigation(focusable: null | FocusableDefinition, options?: { tabIndex?: number }) {\n const { navigationActive: contextNavigationActive, registerFocusable: contextRegisterFocusable } =\n useContext(SingleTabStopNavigationContext);\n const [focusTargetActive, setFocusTargetActive] = useState(false);\n\n const navigationActive = contextNavigationActive && (!options?.tabIndex || options?.tabIndex >= 0);\n const registerFocusable = useCallback(\n (focusable: FocusableDefinition, changeHandler: FocusableChangeHandler) =>\n navigationActive ? contextRegisterFocusable(focusable, changeHandler) : () => {},\n [navigationActive, contextRegisterFocusable]\n );\n\n useEffect(() => {\n if (focusable) {\n const changeHandler = (element: null | Element, suppressed: boolean) =>\n setFocusTargetActive(focusable.current === element || suppressed);\n const unregister = registerFocusable(focusable, changeHandler);\n return () => unregister();\n }\n }, [focusable, registerFocusable]);\n\n let tabIndex = options?.tabIndex;\n if (navigationActive) {\n tabIndex = !focusTargetActive ? -1 : options?.tabIndex ?? 0;\n }\n\n return { navigationActive, tabIndex };\n}\n"]}
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/lib/internal/template/internal/environment.js CHANGED
@@ -1,4 +1,4 @@
1
1
  export var PACKAGE_SOURCE = "components";
2
- export var PACKAGE_VERSION = "3.0.0 (43d19872)";
2
+ export var PACKAGE_VERSION = "3.0.0 (6ea0f800)";
3
3
  export var THEME = "open-source-visual-refresh";
4
4
  export var ALWAYS_VISUAL_REFRESH = true;
package/lib/internal/template/internal/environment.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "PACKAGE_SOURCE": "components",
3
- "PACKAGE_VERSION": "3.0.0 (43d19872)",
3
+ "PACKAGE_VERSION": "3.0.0 (6ea0f800)",
4
4
  "THEME": "default",
5
5
  "ALWAYS_VISUAL_REFRESH": false
6
6
  }
package/lib/internal/template/internal/generated/theming/index.cjs 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",
package/lib/internal/template/internal/generated/theming/index.js CHANGED
@@ -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/lib/internal/template/table/body-cell/disabled-inline-editor.d.ts ADDED
@@ -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
package/lib/internal/template/table/body-cell/disabled-inline-editor.d.ts.map ADDED
@@ -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"}
package/lib/internal/template/table/body-cell/disabled-inline-editor.js ADDED
@@ -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
package/lib/internal/template/table/body-cell/disabled-inline-editor.js.map ADDED
@@ -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"]}
package/lib/internal/template/table/body-cell/index.d.ts CHANGED
@@ -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
package/lib/internal/template/table/body-cell/index.d.ts.map CHANGED
@@ -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;AAUnE,UAAU,kBAAkB,CAAC,QAAQ,CAAE,SAAQ,mBAAmB;IAChE,MAAM,EAAE,UAAU,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC9C,IAAI,EAAE,QAAQ,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;IACnB,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,eAMxD"}
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/lib/internal/template/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
  }