feat: TreeView

.stylelintrc

@@ -41,7 +41,6 @@
         ]
       }
     ],
-    "@cloudscape-design/no-motion-outside-of-mixin": [true],
     "@cloudscape-design/z-index-value-constraint": [true],
     "plugin/no-unsupported-browser-features": [
       true,
@@ -58,7 +57,8 @@
       ],
       "rules": {
         "property-disallowed-list": ["border", "border-radius", "border-style", "margin", "padding"],
-        "csstools/use-logical": "always"
+        "csstools/use-logical": "always",
+        "@cloudscape-design/no-motion-outside-of-mixin": [true]
       }
     }
   ],

build-tools/utils/pluralize.js

@@ -80,6 +80,7 @@ const pluralizationMap = {
   ToggleButton: 'ToggleButtons',
   TokenGroup: 'TokenGroups',
   TopNavigation: 'TopNavigations',
+  TreeView: 'TreeViews',
   TutorialPanel: 'TutorialPanels',
   Wizard: 'Wizards',
 };

pages/tree-view/basic.page.tsx

@@ -0,0 +1,112 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+import clsx from 'clsx';
+
+import Box from '~components/box';
+import Container from '~components/container';
+import FormField from '~components/form-field';
+import Grid from '~components/grid';
+import Icon from '~components/icon';
+import Select, { SelectProps } from '~components/select';
+import TreeView, { TreeViewProps } from '~components/tree-view';
+
+import ScreenshotArea from '../utils/screenshot-area';
+import { Actions } from './common';
+import { items } from './items/basic-page-items';
+
+import styles from './styles.scss';
+
+export default function BasicTreeView() {
+  const [expandedItems, setExpandedItems] = useState<Array<string>>(['1', '4.1']);
+  const [toggleIconType, setToggleIconType] = useState<SelectProps.Option>({
+    label: 'Default',
+    value: 'default',
+  });
+
+  const renderItemToggleIcon = ({ expanded }: TreeViewProps.ItemToggleRenderIconData) => {
+    if (toggleIconType.value === 'custom') {
+      return <Icon size="small" name={expanded ? 'treeview-collapse' : 'treeview-expand'} ariaLabel="Toggle" />;
+    }
+
+    if (toggleIconType.value === 'custom-with-slow-animation') {
+      return (
+        <Icon
+          size="small"
+          name="angle-down"
+          className={clsx(styles.animation, expanded && styles['animation-expanded'])}
+        />
+      );
+    }
+  };
+
+  return (
+    <ScreenshotArea>
+      <h1>Basic tree view</h1>
+
+      <Grid gridDefinition={[{ colspan: { m: 7, xs: 12 } }]}>
+        <div>
+          <FormField label="Toggle icon" stretch={true}>
+            <Select
+              selectedOption={toggleIconType}
+              onChange={({ detail }) => setToggleIconType(detail.selectedOption)}
+              options={[
+                {
+                  label: 'Default',
+                  value: 'default',
+                },
+                {
+                  label: 'Custom',
+                  value: 'custom',
+                },
+                {
+                  label: 'Custom with slow animation',
+                  value: 'custom-with-slow-animation',
+                },
+              ]}
+            />
+          </FormField>
+
+          <br />
+
+          <Container>
+            <TreeView
+              ariaLabel="Basic tree view"
+              items={items}
+              renderItem={item => {
+                return {
+                  icon: item.hideIcon ? undefined : (
+                    <Icon name={expandedItems.includes(item.id) ? 'folder-open' : 'folder'} ariaLabel="folder" />
+                  ),
+                  content: item.content,
+                  secondaryContent: item.details && <Box color="text-status-inactive">{item.details}</Box>,
+                  actions: item.hasActions ? (
+                    <Actions
+                      actionType="inline-button-dropdown"
+                      itemLabel={item.announcementLabel ?? (item.content as string)}
+                    />
+                  ) : undefined,
+                };
+              }}
+              getItemId={item => item.id}
+              getItemChildren={item => item.children}
+              onItemToggle={({ detail }: any) =>
+                setExpandedItems(prev =>
+                  detail.expanded ? [...prev, detail.item.id] : prev.filter(id => id !== detail.item.id)
+                )
+              }
+              expandedItems={expandedItems}
+              i18nStrings={{
+                expandButtonLabel: () => 'Expand item',
+                collapseButtonLabel: () => 'Collapse item',
+              }}
+              renderItemToggleIcon={renderItemToggleIcon}
+            />
+          </Container>
+        </div>
+      </Grid>
+
+      <div style={{ marginTop: '10px' }}>Expanded items: {expandedItems.map(id => `Item ${id}`).join(', ')}</div>
+    </ScreenshotArea>
+  );
+}

pages/tree-view/common.tsx

@@ -0,0 +1,134 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+
+import { SpaceBetween } from '~components';
+import Box from '~components/box';
+import Button from '~components/button';
+import ButtonDropdown from '~components/button-dropdown';
+import ButtonGroup from '~components/button-group';
+import StatusIndicator from '~components/status-indicator/internal';
+
+import { Item } from './items/dynamic-items';
+
+export function Content(item: Item) {
+  if (item.status) {
+    return <StatusIndicator type={item.status}>{item.name}</StatusIndicator>;
+  }
+
+  return (
+    <div style={{ display: 'flex', gap: '10px' }}>
+      {item.name}
+
+      {item.errorCount && item.errorCount > 0 && <StatusIndicator type="error">{item.errorCount}</StatusIndicator>}
+      {item.warningCount && item.warningCount > 0 && (
+        <StatusIndicator type="warning">{item.warningCount}</StatusIndicator>
+      )}
+      {item.successCount && item.successCount > 0 && (
+        <StatusIndicator type="success">{item.successCount}</StatusIndicator>
+      )}
+    </div>
+  );
+}
+
+export function Actions(
+  {
+    actionType,
+    itemLabel,
+  }: {
+    actionType?: 'button-group' | 'button-dropdown' | 'inline-button-dropdown' | 'text' | 'custom-inline-button-group';
+    itemLabel?: string;
+  } = {
+    actionType: 'inline-button-dropdown',
+  }
+) {
+  const [markedAsFavorite, setMarkedAsFavorite] = useState(false);
+
+  if (actionType === 'text') {
+    return <Box color="text-status-inactive">Some metadata</Box>;
+  }
+
+  if (actionType === 'button-group') {
+    return (
+      <ButtonGroup
+        variant="icon"
+        items={[
+          {
+            id: 'settings',
+            iconName: 'settings',
+            type: 'icon-button',
+            text: 'Settings',
+          },
+          {
+            type: 'icon-toggle-button',
+            id: 'favorite',
+            text: 'Favorite',
+            pressed: markedAsFavorite,
+            iconName: 'star',
+            pressedIconName: 'star-filled',
+          },
+          {
+            id: 'menu',
+            type: 'menu-dropdown',
+            text: 'Menu',
+            items: [
+              { id: 'start', text: 'Start' },
+              { id: 'stop', text: 'Stop', disabled: true },
+              {
+                id: 'hibernate',
+                text: 'Hibernate',
+                disabled: true,
+              },
+              { id: 'reboot', text: 'Reboot', disabled: true },
+              { id: 'terminate', text: 'Terminate' },
+            ],
+          },
+        ]}
+        onItemClick={({ detail }) => {
+          if (detail.id === 'favorite') {
+            setMarkedAsFavorite(!markedAsFavorite);
+          }
+        }}
+        ariaLabel={itemLabel}
+      />
+    );
+  }
+
+  const buttonDropdownItems = [
+    { id: 'start', text: 'Start' },
+    { id: 'stop', text: 'Stop', disabled: true },
+    {
+      id: 'hibernate',
+      text: 'Hibernate',
+      disabled: true,
+    },
+    { id: 'reboot', text: 'Reboot', disabled: true },
+    { id: 'terminate', text: 'Terminate' },
+  ];
+
+  if (actionType === 'custom-inline-button-group') {
+    return (
+      <SpaceBetween direction="horizontal" size="s">
+        <Button variant="inline-icon" iconName="settings" ariaLabel={`Settings for ${itemLabel}`} />
+        <Button variant="inline-icon" iconName="star" ariaLabel={`Favorite ${itemLabel}`} />
+        <ButtonDropdown
+          items={buttonDropdownItems}
+          ariaLabel={`Control instance for ${itemLabel}`}
+          variant="inline-icon"
+        />
+      </SpaceBetween>
+    );
+  }
+
+  if (actionType === 'inline-button-dropdown') {
+    return (
+      <ButtonDropdown
+        items={buttonDropdownItems}
+        ariaLabel={`Control instance for ${itemLabel}`}
+        variant="inline-icon"
+      />
+    );
+  }
+
+  return <ButtonDropdown items={buttonDropdownItems} ariaLabel={`Control instance for ${itemLabel}`} variant="icon" />;
+}

pages/tree-view/dynamic-items.page.tsx

@@ -0,0 +1,87 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+
+import { Button, SpaceBetween } from '~components';
+import Box from '~components/box';
+import Icon from '~components/icon';
+import TreeView from '~components/tree-view';
+
+import { Actions, Content } from './common';
+import { allItems, items } from './items/dynamic-items';
+
+const allExpandableItemIds = allItems.filter(item => item.children && item.children.length > 0).map(item => item.id);
+
+export default function DynamicItemsPage() {
+  const [expandedItems, setExpandedItems] = useState<Array<string>>([]);
+
+  return (
+    <>
+      <h1>Dynamic items page</h1>
+
+      <SpaceBetween size="s">
+        <Button
+          onClick={() => {
+            setExpandedItems(allExpandableItemIds);
+            console.time('expand-all');
+            requestAnimationFrame(() => console.timeEnd('expand-all'));
+          }}
+        >
+          Expand all
+        </Button>
+
+        <Button
+          onClick={() => {
+            setExpandedItems([]);
+            console.time('collapse-all');
+            requestAnimationFrame(() => console.timeEnd('collapse-all'));
+          }}
+        >
+          Collapse all
+        </Button>
+      </SpaceBetween>
+
+      <Box padding="xl">
+        <TreeView
+          items={items}
+          renderItem={item => {
+            const isExpanded = expandedItems.includes(item.id);
+            return {
+              icon: <Icon name={isExpanded ? 'folder-open' : 'folder'} />,
+              content: <Content {...item} />,
+              actions: item.hasActions ? <Actions actionType="button-group" itemLabel={item.name} /> : undefined,
+              secondaryContent: item.tagName ? (
+                <Box color="text-status-inactive">
+                  <SpaceBetween size="xxs" direction="horizontal">
+                    <Icon name="ticket" />
+                    <span>{item.tagName}</span>
+                  </SpaceBetween>
+                </Box>
+              ) : undefined,
+            };
+          }}
+          getItemId={item => item.id}
+          getItemChildren={item => item.children}
+          onItemToggle={({ detail }) => {
+            if (detail.expanded) {
+              const logName = `expand-item-${detail.item.name}`;
+              console.time(logName);
+              requestAnimationFrame(() => console.timeEnd(logName));
+              return setExpandedItems(prev => [...prev, detail.id]);
+            } else {
+              const logName = `collapse-item-${detail.item.name}`;
+              console.time(logName);
+              requestAnimationFrame(() => console.timeEnd(logName));
+              return setExpandedItems(prev => prev.filter(id => id !== detail.id));
+            }
+          }}
+          expandedItems={expandedItems}
+          i18nStrings={{
+            expandButtonLabel: () => 'Expand item',
+            collapseButtonLabel: () => 'Collapse item',
+          }}
+        />
+      </Box>
+    </>
+  );
+}