@cloudscape-design/components 3.0.471 → 3.0.472

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 (17) hide show
  1. package/internal/environment.js +1 -1
  2. package/internal/environment.json +1 -1
  3. package/internal/manifest.json +1 -1
  4. package/package.json +1 -1
  5. package/table/table-role/{use-grid-navigation.d.ts → grid-navigation.d.ts} +3 -2
  6. package/table/table-role/grid-navigation.d.ts.map +1 -0
  7. package/table/table-role/{use-grid-navigation.js → grid-navigation.js} +10 -19
  8. package/table/table-role/grid-navigation.js.map +1 -0
  9. package/table/table-role/index.d.ts +1 -1
  10. package/table/table-role/index.d.ts.map +1 -1
  11. package/table/table-role/index.js +1 -1
  12. package/table/table-role/index.js.map +1 -1
  13. package/table/table-role/interfaces.d.ts +2 -1
  14. package/table/table-role/interfaces.d.ts.map +1 -1
  15. package/table/table-role/interfaces.js.map +1 -1
  16. package/table/table-role/use-grid-navigation.d.ts.map +0 -1
  17. package/table/table-role/use-grid-navigation.js.map +0 -1
package/internal/environment.js CHANGED
@@ -1,4 +1,4 @@
1
1
  export var PACKAGE_SOURCE = "components";
2
- export var PACKAGE_VERSION = "3.0.0 (15f75e3a)";
2
+ export var PACKAGE_VERSION = "3.0.0 (6a6c6bf8)";
3
3
  export var THEME = "open-source-visual-refresh";
4
4
  export var ALWAYS_VISUAL_REFRESH = true;
package/internal/environment.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "PACKAGE_SOURCE": "components",
3
- "PACKAGE_VERSION": "3.0.0 (15f75e3a)",
3
+ "PACKAGE_VERSION": "3.0.0 (6a6c6bf8)",
4
4
  "THEME": "default",
5
5
  "ALWAYS_VISUAL_REFRESH": false
6
6
  }
package/internal/manifest.json CHANGED
@@ -1,3 +1,3 @@
1
1
  {
2
- "commit": "15f75e3ae207ef5e8ea4f132e85286fbb8014dc5"
2
+ "commit": "6a6c6bf8dac915ff5aadce9c1fe196554aede58a"
3
3
  }
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.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.471","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"}
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.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.472","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"}
package/table/table-role/{use-grid-navigation.d.ts → grid-navigation.d.ts} RENAMED
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  import { GridNavigationProps } from './interfaces';
2
3
  /**
3
4
  * Makes table navigable with keyboard commands.
@@ -6,5 +7,5 @@ import { GridNavigationProps } from './interfaces';
6
7
  * The hook attaches the GridNavigationHelper helper when active=true.
7
8
  * See GridNavigationHelper for more details.
8
9
  */
9
- export declare function useGridNavigation({ keyboardNavigation, suppressKeyboardNavigationFor, pageSize, getTable, }: GridNavigationProps): void;
10
- //# sourceMappingURL=use-grid-navigation.d.ts.map
10
+ export declare function GridNavigationProvider({ keyboardNavigation, pageSize, getTable, children }: GridNavigationProps): JSX.Element;
11
+ //# sourceMappingURL=grid-navigation.d.ts.map
package/table/table-role/grid-navigation.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"grid-navigation.d.ts","sourceRoot":"lib/default/","sources":["table/table-role/grid-navigation.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAe,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAMhE;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CAAC,EAAE,kBAAkB,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,mBAAmB,eAoB/G"}
package/table/table-role/{use-grid-navigation.js → grid-navigation.js} RENAMED
@@ -5,6 +5,7 @@ import { defaultIsSuppressed, findFocusinCell, moveFocusBy, muteElementFocusable
5
5
  import { KeyCode } from '../../internal/keycode';
6
6
  import { nodeContains } from '@cloudscape-design/component-toolkit/dom';
7
7
  import { useStableCallback } from '@cloudscape-design/component-toolkit/internal';
8
+ import React from 'react';
8
9
  /**
9
10
  * Makes table navigable with keyboard commands.
10
11
  * See https://www.w3.org/WAI/ARIA/apg/patterns/grid
@@ -12,30 +13,22 @@ import { useStableCallback } from '@cloudscape-design/component-toolkit/internal
12
13
  * The hook attaches the GridNavigationHelper helper when active=true.
13
14
  * See GridNavigationHelper for more details.
14
15
  */
15
- export function useGridNavigation({ keyboardNavigation, suppressKeyboardNavigationFor, pageSize, getTable, }) {
16
+ export function GridNavigationProvider({ keyboardNavigation, pageSize, getTable, children }) {
16
17
  const gridNavigation = useMemo(() => new GridNavigationHelper(), []);
17
18
  const getTableStable = useStableCallback(getTable);
18
- const isSuppressedStable = useStableCallback((element) => {
19
- if (typeof suppressKeyboardNavigationFor === 'function') {
20
- return suppressKeyboardNavigationFor(element);
21
- }
22
- if (typeof suppressKeyboardNavigationFor === 'string') {
23
- return element.matches(suppressKeyboardNavigationFor);
24
- }
25
- return false;
26
- });
27
- // Initialize the model with the table container assuming it is mounted synchronously and only once.
19
+ // Initialize the helper with the table container assuming it is mounted synchronously and only once.
28
20
  useEffect(() => {
29
21
  if (keyboardNavigation) {
30
22
  const table = getTableStable();
31
- table && gridNavigation.init(table, isSuppressedStable);
23
+ table && gridNavigation.init(table);
32
24
  }
33
25
  return () => gridNavigation.cleanup();
34
- }, [keyboardNavigation, gridNavigation, getTableStable, isSuppressedStable]);
35
- // Notify the model of the props change.
26
+ }, [keyboardNavigation, gridNavigation, getTableStable]);
27
+ // Notify the helper of the props change.
36
28
  useEffect(() => {
37
29
  gridNavigation.update({ pageSize });
38
30
  }, [gridNavigation, pageSize]);
31
+ return React.createElement(React.Fragment, null, children);
39
32
  }
40
33
  /**
41
34
  * This helper encapsulates the grid navigation behaviors which are:
@@ -55,7 +48,6 @@ class GridNavigationHelper {
55
48
  // Props
56
49
  this._pageSize = 0;
57
50
  this._table = null;
58
- this._isSuppressed = () => false;
59
51
  // State
60
52
  this.prevFocusedCell = null;
61
53
  this.focusedCell = null;
@@ -163,9 +155,8 @@ class GridNavigationHelper {
163
155
  }
164
156
  };
165
157
  }
166
- init(table, isSuppressed) {
158
+ init(table) {
167
159
  this._table = table;
168
- this._isSuppressed = isSuppressed;
169
160
  this.table.addEventListener('focusin', this.onFocusin);
170
161
  this.table.addEventListener('focusout', this.onFocusout);
171
162
  this.table.addEventListener('keydown', this.onKeydown);
@@ -197,7 +188,7 @@ class GridNavigationHelper {
197
188
  return this._table;
198
189
  }
199
190
  isSuppressed(focusedElement) {
200
- return defaultIsSuppressed(focusedElement) || this._isSuppressed(focusedElement);
191
+ return defaultIsSuppressed(focusedElement);
201
192
  }
202
193
  }
203
- //# sourceMappingURL=use-grid-navigation.js.map
194
+ //# sourceMappingURL=grid-navigation.js.map
package/table/table-role/grid-navigation.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"grid-navigation.js","sourceRoot":"lib/default/","sources":["table/table-role/grid-navigation.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\n\nimport { useEffect, useMemo } from 'react';\nimport {\n defaultIsSuppressed,\n findFocusinCell,\n moveFocusBy,\n muteElementFocusables,\n restoreElementFocusables,\n ensureSingleFocusable,\n getFirstFocusable,\n} from './utils';\nimport { FocusedCell, GridNavigationProps } from './interfaces';\nimport { KeyCode } from '../../internal/keycode';\nimport { nodeContains } from '@cloudscape-design/component-toolkit/dom';\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\nimport React from 'react';\n\n/**\n * Makes table navigable with keyboard commands.\n * See https://www.w3.org/WAI/ARIA/apg/patterns/grid\n *\n * The hook attaches the GridNavigationHelper helper when active=true.\n * See GridNavigationHelper for more details.\n */\nexport function GridNavigationProvider({ keyboardNavigation, pageSize, getTable, children }: GridNavigationProps) {\n const gridNavigation = useMemo(() => new GridNavigationHelper(), []);\n\n const getTableStable = useStableCallback(getTable);\n\n // Initialize the helper with the table container assuming it is mounted synchronously and only once.\n useEffect(() => {\n if (keyboardNavigation) {\n const table = getTableStable();\n table && gridNavigation.init(table);\n }\n return () => gridNavigation.cleanup();\n }, [keyboardNavigation, gridNavigation, getTableStable]);\n\n // Notify the helper of the props change.\n useEffect(() => {\n gridNavigation.update({ pageSize });\n }, [gridNavigation, pageSize]);\n\n return <>{children}</>;\n}\n\n/**\n * This helper encapsulates the grid navigation behaviors which are:\n * 1. Responding to keyboard commands and moving the focus accordingly;\n * 2. Muting table interactive elements for only one to be user-focusable at a time;\n * 3. Suppressing the above behaviors when focusing an element inside a dialog or when instructed by the isSuppressed callback.\n *\n * All behaviors are attached upon initialization and are re-evaluated with every focusin, focusout, and keydown events,\n * and also when a node removal inside the table is observed to ensure consistency at any given moment.\n *\n * When the navigation is suppressed the keyboard commands are no longer intercepted and all table interactive elements are made\n * user-focusable to unblock the Tab navigation. The suppression should only be used for interactive elements inside the table that would\n * otherwise conflict with the navigation. Once the interactive element is deactivated or lose focus the table navigation becomes active again.\n */\nclass GridNavigationHelper {\n // Props\n private _pageSize = 0;\n private _table: null | HTMLTableElement = null;\n\n // State\n private prevFocusedCell: null | FocusedCell = null;\n private focusedCell: null | FocusedCell = null;\n\n public init(table: HTMLTableElement) {\n this._table = table;\n\n this.table.addEventListener('focusin', this.onFocusin);\n this.table.addEventListener('focusout', this.onFocusout);\n this.table.addEventListener('keydown', this.onKeydown);\n\n const tableNodesObserver = new MutationObserver(this.onTableNodeMutation);\n tableNodesObserver.observe(table, { childList: true, subtree: true });\n\n muteElementFocusables(this.table, false);\n ensureSingleFocusable(this.table, null);\n\n this.cleanup = () => {\n this.table.removeEventListener('focusin', this.onFocusin);\n this.table.removeEventListener('focusout', this.onFocusout);\n this.table.removeEventListener('keydown', this.onKeydown);\n\n tableNodesObserver.disconnect();\n\n restoreElementFocusables(this.table);\n };\n }\n\n public cleanup() {\n // Do nothing before initialized.\n }\n\n public update({ pageSize }: { pageSize: number }) {\n this._pageSize = pageSize;\n }\n\n private get pageSize() {\n return this._pageSize;\n }\n\n private get table(): HTMLTableElement {\n if (!this._table) {\n throw new Error('Invariant violation: GridNavigationHelper is used before initialization.');\n }\n return this._table;\n }\n\n private isSuppressed(focusedElement: HTMLElement): boolean {\n return defaultIsSuppressed(focusedElement);\n }\n\n private onFocusin = (event: FocusEvent) => {\n const cell = findFocusinCell(event);\n if (!cell) {\n return;\n }\n\n this.prevFocusedCell = cell;\n this.focusedCell = cell;\n\n muteElementFocusables(this.table, this.isSuppressed(cell.element));\n ensureSingleFocusable(this.table, cell);\n\n // Focusing on cell is not eligible when it contains focusable elements in the content.\n // If content focusables are available - move the focus to the first one.\n if (cell.element === cell.cellElement) {\n getFirstFocusable(cell.cellElement)?.focus();\n }\n };\n\n private onFocusout = () => {\n this.focusedCell = null;\n };\n\n private onKeydown = (event: KeyboardEvent) => {\n if (!this.focusedCell) {\n return;\n }\n\n const ctrlKey = event.ctrlKey ? 1 : 0;\n const altKey = event.altKey ? 1 : 0;\n const shiftKey = event.shiftKey ? 1 : 0;\n const metaKey = event.metaKey ? 1 : 0;\n const numModifiersPressed = ctrlKey + altKey + shiftKey + metaKey;\n\n let key = event.keyCode;\n if (numModifiersPressed === 1 && event.ctrlKey) {\n key = -key;\n } else if (numModifiersPressed) {\n return;\n }\n\n const from = this.focusedCell;\n const minExtreme = Number.NEGATIVE_INFINITY;\n const maxExtreme = Number.POSITIVE_INFINITY;\n\n // Do not intercept any keys when the navigation is suppressed.\n if (this.isSuppressed(from.element)) {\n return;\n }\n\n switch (key) {\n case KeyCode.up:\n event.preventDefault();\n return moveFocusBy(this.table, from, { y: -1, x: 0 });\n\n case KeyCode.down:\n event.preventDefault();\n return moveFocusBy(this.table, from, { y: 1, x: 0 });\n\n case KeyCode.left:\n event.preventDefault();\n return moveFocusBy(this.table, from, { y: 0, x: -1 });\n\n case KeyCode.right:\n event.preventDefault();\n return moveFocusBy(this.table, from, { y: 0, x: 1 });\n\n case KeyCode.pageUp:\n event.preventDefault();\n return moveFocusBy(this.table, from, { y: -this.pageSize, x: 0 });\n\n case KeyCode.pageDown:\n event.preventDefault();\n return moveFocusBy(this.table, from, { y: this.pageSize, x: 0 });\n\n case KeyCode.home:\n event.preventDefault();\n return moveFocusBy(this.table, from, { y: 0, x: minExtreme });\n\n case KeyCode.end:\n event.preventDefault();\n return moveFocusBy(this.table, from, { y: 0, x: maxExtreme });\n\n case -KeyCode.home:\n event.preventDefault();\n return moveFocusBy(this.table, from, { y: minExtreme, x: minExtreme });\n\n case -KeyCode.end:\n event.preventDefault();\n return moveFocusBy(this.table, from, { y: maxExtreme, x: maxExtreme });\n\n default:\n return;\n }\n };\n\n private onTableNodeMutation = (mutationRecords: MutationRecord[]) => {\n // When focused cell is un-mounted the focusout event handler removes this.cell,\n // while this.prevFocusedCell is retained until the next focusin event.\n const cell = this.focusedCell ?? this.prevFocusedCell;\n const cellSuppressed = cell ? this.isSuppressed(cell.element) : false;\n\n // Update table elements focus if new nodes were added.\n if (mutationRecords.some(record => record.addedNodes.length > 0)) {\n muteElementFocusables(this.table, cellSuppressed);\n ensureSingleFocusable(this.table, cell);\n }\n\n if (cell) {\n for (const record of mutationRecords) {\n if (record.type === 'childList') {\n // The lost focus in an unmount event is reapplied to the table using the previous cell position.\n // The moveFocusBy takes care of finding the closest position if the previous one no longer exists.\n for (const removedNode of Array.from(record.removedNodes)) {\n if (removedNode === cell.element || nodeContains(removedNode, cell.element)) {\n ensureSingleFocusable(this.table, cell);\n moveFocusBy(this.table, cell, { y: 0, x: 0 });\n }\n }\n }\n }\n }\n };\n}\n"]}
package/table/table-role/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  export { TableRole, GridNavigationProps } from './interfaces';
2
2
  export { getTableCellRoleProps, getTableColHeaderRoleProps, getTableHeaderRowRoleProps, getTableRoleProps, getTableRowRoleProps, getTableWrapperRoleProps, } from './table-role-helper';
3
- export { useGridNavigation } from './use-grid-navigation';
3
+ export { GridNavigationProvider } from './grid-navigation';
4
4
  //# sourceMappingURL=index.d.ts.map
package/table/table-role/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["table/table-role/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAE9D,OAAO,EACL,qBAAqB,EACrB,0BAA0B,EAC1B,0BAA0B,EAC1B,iBAAiB,EACjB,oBAAoB,EACpB,wBAAwB,GACzB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["table/table-role/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAE9D,OAAO,EACL,qBAAqB,EACrB,0BAA0B,EAC1B,0BAA0B,EAC1B,iBAAiB,EACjB,oBAAoB,EACpB,wBAAwB,GACzB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC"}
package/table/table-role/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2
2
  // SPDX-License-Identifier: Apache-2.0
3
3
  export { getTableCellRoleProps, getTableColHeaderRoleProps, getTableHeaderRowRoleProps, getTableRoleProps, getTableRowRoleProps, getTableWrapperRoleProps, } from './table-role-helper';
4
- export { useGridNavigation } from './use-grid-navigation';
4
+ export { GridNavigationProvider } from './grid-navigation';
5
5
  //# sourceMappingURL=index.js.map
package/table/table-role/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["table/table-role/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAItC,OAAO,EACL,qBAAqB,EACrB,0BAA0B,EAC1B,0BAA0B,EAC1B,iBAAiB,EACjB,oBAAoB,EACpB,wBAAwB,GACzB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport { TableRole, GridNavigationProps } from './interfaces';\n\nexport {\n getTableCellRoleProps,\n getTableColHeaderRoleProps,\n getTableHeaderRowRoleProps,\n getTableRoleProps,\n getTableRowRoleProps,\n getTableWrapperRoleProps,\n} from './table-role-helper';\n\nexport { useGridNavigation } from './use-grid-navigation';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["table/table-role/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAItC,OAAO,EACL,qBAAqB,EACrB,0BAA0B,EAC1B,0BAA0B,EAC1B,iBAAiB,EACjB,oBAAoB,EACpB,wBAAwB,GACzB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport { TableRole, GridNavigationProps } from './interfaces';\n\nexport {\n getTableCellRoleProps,\n getTableColHeaderRoleProps,\n getTableHeaderRowRoleProps,\n getTableRoleProps,\n getTableRowRoleProps,\n getTableWrapperRoleProps,\n} from './table-role-helper';\n\nexport { GridNavigationProvider } from './grid-navigation';\n"]}
package/table/table-role/interfaces.d.ts CHANGED
@@ -1,9 +1,10 @@
1
+ /// <reference types="react" />
1
2
  export type TableRole = 'table' | 'grid' | 'grid-default';
2
3
  export interface GridNavigationProps {
3
4
  keyboardNavigation: boolean;
4
- suppressKeyboardNavigationFor?: string | ((focusedElement: HTMLElement) => boolean);
5
5
  pageSize: number;
6
6
  getTable: () => null | HTMLTableElement;
7
+ children: React.ReactNode;
7
8
  }
8
9
  export interface FocusedCell {
9
10
  rowIndex: number;
package/table/table-role/interfaces.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["table/table-role/interfaces.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,cAAc,CAAC;AAE1D,MAAM,WAAW,mBAAmB;IAClC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,6BAA6B,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,cAAc,EAAE,WAAW,KAAK,OAAO,CAAC,CAAC;IACpF,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,IAAI,GAAG,gBAAgB,CAAC;CACzC;AAED,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,mBAAmB,CAAC;IAChC,WAAW,EAAE,oBAAoB,CAAC;IAClC,OAAO,EAAE,WAAW,CAAC;CACtB"}
1
+ {"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["table/table-role/interfaces.ts"],"names":[],"mappings":";AAGA,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,cAAc,CAAC;AAE1D,MAAM,WAAW,mBAAmB;IAClC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,IAAI,GAAG,gBAAgB,CAAC;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,mBAAmB,CAAC;IAChC,WAAW,EAAE,oBAAoB,CAAC;IAClC,OAAO,EAAE,WAAW,CAAC;CACtB"}
package/table/table-role/interfaces.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["table/table-role/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport type TableRole = 'table' | 'grid' | 'grid-default';\n\nexport interface GridNavigationProps {\n keyboardNavigation: boolean;\n suppressKeyboardNavigationFor?: string | ((focusedElement: HTMLElement) => boolean);\n pageSize: number;\n getTable: () => null | HTMLTableElement;\n}\n\nexport interface FocusedCell {\n rowIndex: number;\n colIndex: number;\n elementIndex: number;\n rowElement: HTMLTableRowElement;\n cellElement: HTMLTableCellElement;\n element: HTMLElement;\n}\n"]}
1
+ {"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["table/table-role/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport type TableRole = 'table' | 'grid' | 'grid-default';\n\nexport interface GridNavigationProps {\n keyboardNavigation: boolean;\n pageSize: number;\n getTable: () => null | HTMLTableElement;\n children: React.ReactNode;\n}\n\nexport interface FocusedCell {\n rowIndex: number;\n colIndex: number;\n elementIndex: number;\n rowElement: HTMLTableRowElement;\n cellElement: HTMLTableCellElement;\n element: HTMLElement;\n}\n"]}
package/table/table-role/use-grid-navigation.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"use-grid-navigation.d.ts","sourceRoot":"lib/default/","sources":["table/table-role/use-grid-navigation.ts"],"names":[],"mappings":"AAaA,OAAO,EAAe,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAKhE;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,kBAAkB,EAClB,6BAA6B,EAC7B,QAAQ,EACR,QAAQ,GACT,EAAE,mBAAmB,QA2BrB"}
package/table/table-role/use-grid-navigation.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"use-grid-navigation.js","sourceRoot":"lib/default/","sources":["table/table-role/use-grid-navigation.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { useEffect, useMemo } from 'react';\nimport {\n defaultIsSuppressed,\n findFocusinCell,\n moveFocusBy,\n muteElementFocusables,\n restoreElementFocusables,\n ensureSingleFocusable,\n getFirstFocusable,\n} from './utils';\nimport { FocusedCell, GridNavigationProps } from './interfaces';\nimport { KeyCode } from '../../internal/keycode';\nimport { nodeContains } from '@cloudscape-design/component-toolkit/dom';\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\n\n/**\n * Makes table navigable with keyboard commands.\n * See https://www.w3.org/WAI/ARIA/apg/patterns/grid\n *\n * The hook attaches the GridNavigationHelper helper when active=true.\n * See GridNavigationHelper for more details.\n */\nexport function useGridNavigation({\n keyboardNavigation,\n suppressKeyboardNavigationFor,\n pageSize,\n getTable,\n}: GridNavigationProps) {\n const gridNavigation = useMemo(() => new GridNavigationHelper(), []);\n\n const getTableStable = useStableCallback(getTable);\n const isSuppressedStable = useStableCallback((element: HTMLElement) => {\n if (typeof suppressKeyboardNavigationFor === 'function') {\n return suppressKeyboardNavigationFor(element);\n }\n if (typeof suppressKeyboardNavigationFor === 'string') {\n return element.matches(suppressKeyboardNavigationFor);\n }\n return false;\n });\n\n // Initialize the model with the table container assuming it is mounted synchronously and only once.\n useEffect(() => {\n if (keyboardNavigation) {\n const table = getTableStable();\n table && gridNavigation.init(table, isSuppressedStable);\n }\n return () => gridNavigation.cleanup();\n }, [keyboardNavigation, gridNavigation, getTableStable, isSuppressedStable]);\n\n // Notify the model of the props change.\n useEffect(() => {\n gridNavigation.update({ pageSize });\n }, [gridNavigation, pageSize]);\n}\n\n/**\n * This helper encapsulates the grid navigation behaviors which are:\n * 1. Responding to keyboard commands and moving the focus accordingly;\n * 2. Muting table interactive elements for only one to be user-focusable at a time;\n * 3. Suppressing the above behaviors when focusing an element inside a dialog or when instructed by the isSuppressed callback.\n *\n * All behaviors are attached upon initialization and are re-evaluated with every focusin, focusout, and keydown events,\n * and also when a node removal inside the table is observed to ensure consistency at any given moment.\n *\n * When the navigation is suppressed the keyboard commands are no longer intercepted and all table interactive elements are made\n * user-focusable to unblock the Tab navigation. The suppression should only be used for interactive elements inside the table that would\n * otherwise conflict with the navigation. Once the interactive element is deactivated or lose focus the table navigation becomes active again.\n */\nclass GridNavigationHelper {\n // Props\n private _pageSize = 0;\n private _table: null | HTMLTableElement = null;\n private _isSuppressed: (focusedElement: HTMLElement) => boolean = () => false;\n\n // State\n private prevFocusedCell: null | FocusedCell = null;\n private focusedCell: null | FocusedCell = null;\n\n public init(table: HTMLTableElement, isSuppressed: (focusedElement: HTMLElement) => boolean) {\n this._table = table;\n this._isSuppressed = isSuppressed;\n\n this.table.addEventListener('focusin', this.onFocusin);\n this.table.addEventListener('focusout', this.onFocusout);\n this.table.addEventListener('keydown', this.onKeydown);\n\n const tableNodesObserver = new MutationObserver(this.onTableNodeMutation);\n tableNodesObserver.observe(table, { childList: true, subtree: true });\n\n muteElementFocusables(this.table, false);\n ensureSingleFocusable(this.table, null);\n\n this.cleanup = () => {\n this.table.removeEventListener('focusin', this.onFocusin);\n this.table.removeEventListener('focusout', this.onFocusout);\n this.table.removeEventListener('keydown', this.onKeydown);\n\n tableNodesObserver.disconnect();\n\n restoreElementFocusables(this.table);\n };\n }\n\n public cleanup() {\n // Do nothing before initialized.\n }\n\n public update({ pageSize }: { pageSize: number }) {\n this._pageSize = pageSize;\n }\n\n private get pageSize() {\n return this._pageSize;\n }\n\n private get table(): HTMLTableElement {\n if (!this._table) {\n throw new Error('Invariant violation: GridNavigationHelper is used before initialization.');\n }\n return this._table;\n }\n\n private isSuppressed(focusedElement: HTMLElement): boolean {\n return defaultIsSuppressed(focusedElement) || this._isSuppressed(focusedElement);\n }\n\n private onFocusin = (event: FocusEvent) => {\n const cell = findFocusinCell(event);\n if (!cell) {\n return;\n }\n\n this.prevFocusedCell = cell;\n this.focusedCell = cell;\n\n muteElementFocusables(this.table, this.isSuppressed(cell.element));\n ensureSingleFocusable(this.table, cell);\n\n // Focusing on cell is not eligible when it contains focusable elements in the content.\n // If content focusables are available - move the focus to the first one.\n if (cell.element === cell.cellElement) {\n getFirstFocusable(cell.cellElement)?.focus();\n }\n };\n\n private onFocusout = () => {\n this.focusedCell = null;\n };\n\n private onKeydown = (event: KeyboardEvent) => {\n if (!this.focusedCell) {\n return;\n }\n\n const ctrlKey = event.ctrlKey ? 1 : 0;\n const altKey = event.altKey ? 1 : 0;\n const shiftKey = event.shiftKey ? 1 : 0;\n const metaKey = event.metaKey ? 1 : 0;\n const numModifiersPressed = ctrlKey + altKey + shiftKey + metaKey;\n\n let key = event.keyCode;\n if (numModifiersPressed === 1 && event.ctrlKey) {\n key = -key;\n } else if (numModifiersPressed) {\n return;\n }\n\n const from = this.focusedCell;\n const minExtreme = Number.NEGATIVE_INFINITY;\n const maxExtreme = Number.POSITIVE_INFINITY;\n\n // Do not intercept any keys when the navigation is suppressed.\n if (this.isSuppressed(from.element)) {\n return;\n }\n\n switch (key) {\n case KeyCode.up:\n event.preventDefault();\n return moveFocusBy(this.table, from, { y: -1, x: 0 });\n\n case KeyCode.down:\n event.preventDefault();\n return moveFocusBy(this.table, from, { y: 1, x: 0 });\n\n case KeyCode.left:\n event.preventDefault();\n return moveFocusBy(this.table, from, { y: 0, x: -1 });\n\n case KeyCode.right:\n event.preventDefault();\n return moveFocusBy(this.table, from, { y: 0, x: 1 });\n\n case KeyCode.pageUp:\n event.preventDefault();\n return moveFocusBy(this.table, from, { y: -this.pageSize, x: 0 });\n\n case KeyCode.pageDown:\n event.preventDefault();\n return moveFocusBy(this.table, from, { y: this.pageSize, x: 0 });\n\n case KeyCode.home:\n event.preventDefault();\n return moveFocusBy(this.table, from, { y: 0, x: minExtreme });\n\n case KeyCode.end:\n event.preventDefault();\n return moveFocusBy(this.table, from, { y: 0, x: maxExtreme });\n\n case -KeyCode.home:\n event.preventDefault();\n return moveFocusBy(this.table, from, { y: minExtreme, x: minExtreme });\n\n case -KeyCode.end:\n event.preventDefault();\n return moveFocusBy(this.table, from, { y: maxExtreme, x: maxExtreme });\n\n default:\n return;\n }\n };\n\n private onTableNodeMutation = (mutationRecords: MutationRecord[]) => {\n // When focused cell is un-mounted the focusout event handler removes this.cell,\n // while this.prevFocusedCell is retained until the next focusin event.\n const cell = this.focusedCell ?? this.prevFocusedCell;\n const cellSuppressed = cell ? this.isSuppressed(cell.element) : false;\n\n // Update table elements focus if new nodes were added.\n if (mutationRecords.some(record => record.addedNodes.length > 0)) {\n muteElementFocusables(this.table, cellSuppressed);\n ensureSingleFocusable(this.table, cell);\n }\n\n if (cell) {\n for (const record of mutationRecords) {\n if (record.type === 'childList') {\n // The lost focus in an unmount event is reapplied to the table using the previous cell position.\n // The moveFocusBy takes care of finding the closest position if the previous one no longer exists.\n for (const removedNode of Array.from(record.removedNodes)) {\n if (removedNode === cell.element || nodeContains(removedNode, cell.element)) {\n ensureSingleFocusable(this.table, cell);\n moveFocusBy(this.table, cell, { y: 0, x: 0 });\n }\n }\n }\n }\n }\n };\n}\n"]}