feat: Table grid navigation (#1893)

cloudscape-design · Feb 16, 2024 · ae7711b · ae7711b
1 parent 2c12a6b
commit ae7711b
Show file tree

Hide file tree

Showing 37 changed files with 850 additions and 432 deletions.
diff --git a/pages/table/editable.page.tsx b/pages/table/editable.page.tsx
@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { ForwardedRef, forwardRef, useEffect, useRef, useState } from 'react';
+import React, { ForwardedRef, forwardRef, useContext, useEffect, useRef, useState } from 'react';
 import Header from '~components/header';
 import Input from '~components/input';
 import Alert from '~components/alert';
@@ -9,9 +9,16 @@ import Select, { SelectProps } from '~components/select';
 import TimeInput, { TimeInputProps } from '~components/time-input';
 import Autosuggest, { AutosuggestProps } from '~components/autosuggest';
 import Multiselect, { MultiselectProps } from '~components/multiselect';
-import { Link, Box, Button, Modal, SpaceBetween } from '~components';
+import { Link, Box, Button, Modal, SpaceBetween, Checkbox } from '~components';
 import { initialItems, DistributionInfo, tlsVersions, originSuggestions, tagOptions } from './editable-data';
 import ScreenshotArea from '../utils/screenshot-area';
+import AppContext, { AppContextType } from '../app/app-context';
+
+type PageContext = React.Context<
+  AppContextType<{
+    enableKeyboardNavigation: boolean;
+  }>
+>;
 
 let __editStateDirty = false;
 
@@ -211,6 +218,7 @@ const Demo = forwardRef(
     tableRef: ForwardedRef<TableProps.Ref>
   ) => {
     const [items, setItems] = useState(initialItems);
+    const { urlParams } = useContext(AppContext as PageContext);
 
     const handleSubmit: TableProps.SubmitEditFunction<DistributionInfo> = async (currentItem, column, newValue) => {
       let value = newValue;
@@ -259,12 +267,14 @@ const Demo = forwardRef(
         resizableColumns={true}
         ariaLabels={ariaLabels}
         stickyHeader={true}
+        enableKeyboardNavigation={urlParams.enableKeyboardNavigation}
       />
     );
   }
 );
 
 export default function () {
+  const { urlParams, setUrlParams } = useContext(AppContext as PageContext);
   const [modalVisible, setModalVisible] = useState(false);
   const tableRef = useRef<TableProps.Ref>(null);
 
@@ -281,37 +291,52 @@ export default function () {
   });
 
   return (
-    <ScreenshotArea disableAnimations={true}>
-      <input data-testid="focus" aria-label="focus input" />
-      <Demo setModalVisible={setModalVisible} ref={tableRef} />
-      <Modal
-        visible={modalVisible}
-        header="Discard changes"
-        closeAriaLabel="Close modal"
-        onDismiss={withCleanState(() => setModalVisible(false))}
-        footer={
-          <Box float="right">
-            <SpaceBetween direction="horizontal" size="xs">
-              <Button variant="link" onClick={withCleanState(() => setModalVisible(false))}>
-                Cancel
-              </Button>
-              <Button
-                variant="primary"
-                onClick={withCleanState(() => {
-                  setModalVisible(false);
-                  tableRef.current?.cancelEdit?.();
-                })}
-              >
-                Discard
-              </Button>
-            </SpaceBetween>
-          </Box>
-        }
-      >
-        <Alert type="warning" statusIconAriaLabel="Warning">
-          Are you sure you want to discard any unsaved changes?
-        </Alert>
-      </Modal>
-    </ScreenshotArea>
+    <Box margin="s">
+      <SpaceBetween size="s">
+        <Checkbox
+          checked={urlParams.enableKeyboardNavigation}
+          onChange={event => {
+            setUrlParams({ enableKeyboardNavigation: event.detail.checked });
+            window.location.reload();
+          }}
+        >
+          Keyboard navigation
+        </Checkbox>
+
+        <input data-testid="focus" aria-label="focus input" />
+      </SpaceBetween>
+
+      <ScreenshotArea disableAnimations={true}>
+        <Demo setModalVisible={setModalVisible} ref={tableRef} />
+        <Modal
+          visible={modalVisible}
+          header="Discard changes"
+          closeAriaLabel="Close modal"
+          onDismiss={withCleanState(() => setModalVisible(false))}
+          footer={
+            <Box float="right">
+              <SpaceBetween direction="horizontal" size="xs">
+                <Button variant="link" onClick={withCleanState(() => setModalVisible(false))}>
+                  Cancel
+                </Button>
+                <Button
+                  variant="primary"
+                  onClick={withCleanState(() => {
+                    setModalVisible(false);
+                    tableRef.current?.cancelEdit?.();
+                  })}
+                >
+                  Discard
+                </Button>
+              </SpaceBetween>
+            </Box>
+          }
+        >
+          <Alert type="warning" statusIconAriaLabel="Warning">
+            Are you sure you want to discard any unsaved changes?
+          </Alert>
+        </Modal>
+      </ScreenshotArea>
+    </Box>
   );
 }
diff --git a/pages/table/empty-state.page.tsx b/pages/table/empty-state.page.tsx
@@ -1,10 +1,18 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useRef } from 'react';
+import React, { useContext, useRef } from 'react';
 import Button from '~components/button';
 import Table, { TableProps } from '~components/table';
 import SpaceBetween from '~components/space-between';
 import ScreenshotArea from '../utils/screenshot-area';
+import AppContext, { AppContextType } from '../app/app-context';
+import { Checkbox } from '~components';
+
+type PageContext = React.Context<
+  AppContextType<{
+    enableKeyboardNavigation: boolean;
+  }>
+>;
 
 const columns: TableProps.ColumnDefinition<any>[] = [
   {
@@ -30,6 +38,7 @@ const columns: TableProps.ColumnDefinition<any>[] = [
 ];
 
 export default function () {
+  const { urlParams, setUrlParams } = useContext(AppContext as PageContext);
   const rootRef = useRef<HTMLDivElement>(null);
 
   function scrollContainers() {
@@ -43,9 +52,20 @@ export default function () {
   return (
     <div ref={rootRef}>
       <h1>Tables with empty states</h1>
-      <Button id="scroll-content" onClick={scrollContainers}>
-        Align scroll position
-      </Button>
+      <SpaceBetween direction="horizontal" size="s" alignItems="center">
+        <Button id="scroll-content" onClick={scrollContainers}>
+          Align scroll position
+        </Button>
+        <Checkbox
+          checked={urlParams.enableKeyboardNavigation}
+          onChange={event => {
+            setUrlParams({ enableKeyboardNavigation: event.detail.checked });
+            window.location.reload();
+          }}
+        >
+          Keyboard navigation
+        </Checkbox>
+      </SpaceBetween>
       <ScreenshotArea disableAnimations={true}>
         <SpaceBetween size="l">
           <Table
@@ -57,11 +77,23 @@ export default function () {
                 <Button>Create some</Button>
               </>
             }
+            enableKeyboardNavigation={urlParams.enableKeyboardNavigation}
+          />
+          <Table
+            items={[]}
+            columnDefinitions={columns}
+            loading={true}
+            loadingText="Loading resources"
+            enableKeyboardNavigation={urlParams.enableKeyboardNavigation}
           />
-          <Table items={[]} columnDefinitions={columns} loading={true} loadingText="Loading resources" />
           {/* Regression test for: AWSUI-11339 */}
           <div style={{ width: 600.25 }}>
-            <Table items={[]} columnDefinitions={columns.slice(0, 2)} empty="In container with fractional width" />
+            <Table
+              items={[]}
+              columnDefinitions={columns.slice(0, 2)}
+              empty="In container with fractional width"
+              enableKeyboardNavigation={urlParams.enableKeyboardNavigation}
+            />
           </div>
         </SpaceBetween>
       </ScreenshotArea>

diff --git a/pages/table/inline-actions.page.tsx b/pages/table/inline-actions.page.tsx
@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
+import React, { useContext } from 'react';
 import Box from '~components/box';
 import Button from '~components/button';
 import ButtonDropdown from '~components/button-dropdown';
@@ -11,6 +11,14 @@ import ScreenshotArea from '../utils/screenshot-area';
 import { Instance, generateItems } from './generate-data';
 import { columnsConfig, selectionLabels } from './shared-configs';
 import Link from '~components/link';
+import AppContext, { AppContextType } from '../app/app-context';
+import { Checkbox } from '~components';
+
+type PageContext = React.Context<
+  AppContextType<{
+    enableKeyboardNavigation: boolean;
+  }>
+>;
 
 const items = generateItems(10);
 
@@ -148,8 +156,20 @@ const columnDefinitionsOnlyIcons: TableProps.ColumnDefinition<Instance>[] = [
 ];
 
 export default function () {
+  const { urlParams, setUrlParams } = useContext(AppContext as PageContext);
+
   return (
     <ScreenshotArea style={{ padding: '10px 50px' }}>
+      <Checkbox
+        checked={urlParams.enableKeyboardNavigation}
+        onChange={event => {
+          setUrlParams({ enableKeyboardNavigation: event.detail.checked });
+          window.location.reload();
+        }}
+      >
+        Keyboard navigation
+      </Checkbox>
+
       <Box padding="l">
         <h1>Tables with inline actions</h1>
         <SpaceBetween size="l">
@@ -158,12 +178,14 @@ export default function () {
             header={<Header>Table with single actions</Header>}
             columnDefinitions={columnDefinitionsSingle}
             items={items}
+            enableKeyboardNavigation={urlParams.enableKeyboardNavigation}
           />
           <Table
             ariaLabels={selectionLabels}
             header={<Header>Table with multiple actions</Header>}
             columnDefinitions={columnDefinitionsMultiple}
             items={items}
+            enableKeyboardNavigation={urlParams.enableKeyboardNavigation}
           />
           <Table
             ariaLabels={selectionLabels}
@@ -190,18 +212,21 @@ export default function () {
             selectionType="multi"
             columnDefinitions={columnDefinitionsDropdown}
             items={items}
+            enableKeyboardNavigation={urlParams.enableKeyboardNavigation}
           />
           <Table
             ariaLabels={selectionLabels}
             header={<Header>Table with mixed actions</Header>}
             columnDefinitions={columnDefinitionsMixed}
             items={items}
+            enableKeyboardNavigation={urlParams.enableKeyboardNavigation}
           />
           <Table
             ariaLabels={selectionLabels}
             header={<Header>Table with only icon actions</Header>}
             columnDefinitions={columnDefinitionsOnlyIcons}
             items={items}
+            enableKeyboardNavigation={urlParams.enableKeyboardNavigation}
           />
         </SpaceBetween>
       </Box>

diff --git a/pages/table/performance.page.tsx b/pages/table/performance.page.tsx
@@ -1,12 +1,20 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import Button from '~components/button';
 import Box from '~components/box';
 import Header from '~components/header';
 import Input from '~components/input';
 import Table, { TableProps } from '~components/table';
 import ScreenshotArea from '../utils/screenshot-area';
+import AppContext, { AppContextType } from '../app/app-context';
+import { Checkbox, SpaceBetween } from '~components';
+
+type PageContext = React.Context<
+  AppContextType<{
+    enableKeyboardNavigation: boolean;
+  }>
+>;
 
 const COLUMN_COUNT = 100;
 
@@ -49,9 +57,11 @@ const columnDefinitions: Array<TableProps.ColumnDefinition<Item>> = [...new Arra
 
 export default function App() {
   const [isActive, setIsActive] = useState(false);
+  const { urlParams, setUrlParams } = useContext(AppContext as PageContext);
   return (
     <ScreenshotArea>
       <h1>Table performance test</h1>
+
       {isActive ? (
         <Table
           columnDefinitions={columnDefinitions}
@@ -71,17 +81,27 @@ export default function App() {
             </Box>
           }
           header={<Header>Table with inline editing</Header>}
+          enableKeyboardNavigation={urlParams.enableKeyboardNavigation}
         />
       ) : (
-        <Button
-          onClick={() => {
-            setIsActive(true);
-            console.time('render');
-            requestAnimationFrame(() => console.timeEnd('render'));
-          }}
-        >
-          Render Table
-        </Button>
+        <SpaceBetween size="s">
+          <Checkbox
+            checked={urlParams.enableKeyboardNavigation}
+            onChange={event => setUrlParams({ enableKeyboardNavigation: event.detail.checked })}
+          >
+            Keyboard navigation
+          </Checkbox>
+
+          <Button
+            onClick={() => {
+              setIsActive(true);
+              console.time('render');
+              requestAnimationFrame(() => console.timeEnd('render'));
+            }}
+          >
+            Render Table
+          </Button>
+        </SpaceBetween>
       )}
     </ScreenshotArea>
   );