Merge branch 'main' into main

cloudscape-design · Jan 2, 2025 · bd122b0 · bd122b0
2 parents 937f66b + 1e11f46
commit bd122b0
Show file tree

Hide file tree

Showing 43 changed files with 404 additions and 376 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,7 +33,7 @@
     "@dnd-kit/sortable": "^7.0.2",
     "@dnd-kit/utilities": "^3.2.1",
     "@juggle/resize-observer": "^3.3.1",
-    "ace-builds": "^1.34.0",
+    "ace-builds": "1.36.0",
     "balanced-match": "^1.0.2",
     "clsx": "^1.1.0",
     "d3-shape": "^1.3.7",

diff --git a/pages/app-layout/multi-layout-with-hidden-instances-iframe.page.tsx b/pages/app-layout/multi-layout-with-hidden-instances-iframe.page.tsx
@@ -3,6 +3,7 @@
 import React, { useRef, useState } from 'react';
 
 import AppLayout from '~components/app-layout';
+import BreadcrumbGroup from '~components/breadcrumb-group';
 import Header from '~components/header';
 import ScreenreaderOnly from '~components/internal/components/screenreader-only';
 import Link from '~components/link';
@@ -12,7 +13,7 @@ import SpaceBetween from '~components/space-between';
 import './utils/external-widget';
 import { IframeWrapper } from '../utils/iframe-wrapper';
 import ScreenshotArea from '../utils/screenshot-area';
-import { Breadcrumbs, Tools } from './utils/content-blocks';
+import { Tools } from './utils/content-blocks';
 import labels from './utils/labels';
 
 function createView(name: string) {
@@ -21,7 +22,17 @@ function createView(name: string) {
       <AppLayout
         data-testid="secondary-layout"
         ariaLabels={labels}
-        breadcrumbs={<Breadcrumbs />}
+        breadcrumbs={
+          name !== 'page2' && (
+            <BreadcrumbGroup
+              onFollow={event => event.preventDefault()}
+              items={[
+                { text: 'Home', href: '#' },
+                { text: name, href: `#${name}` },
+              ]}
+            />
+          )
+        }
         navigationHide={true}
         content={
           <SpaceBetween size="s">

diff --git a/pages/dnd/commons.tsx b/pages/dnd/commons.tsx
@@ -4,12 +4,12 @@
 import React from 'react';
 
 import { Box, Button, SpaceBetween, StatusIndicator } from '~components';
-import { DndContainerProps } from '~components/internal/components/dnd-container/interfaces';
+import { DndAreaProps } from '~components/internal/components/dnd-area/interfaces';
 
 import { Instance } from '../table/generate-data';
 import { stateToStatusIndicator } from '../table/shared-configs';
 
-export const i18nStrings: DndContainerProps<unknown>['i18nStrings'] = {
+export const i18nStrings: DndAreaProps<unknown>['i18nStrings'] = {
   dragHandleAriaLabel: 'Drag handle',
   dragHandleAriaDescription:
     "Use Space or Enter to activate drag for an item, then use the arrow keys to move the item's position. To complete the position move, use Space or Enter, or to discard the move, use Escape.",

diff --git a/pages/dnd/reorderable-containers.tsx b/pages/dnd/reorderable-containers.tsx
@@ -1,11 +1,11 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { ForwardedRef, forwardRef } from 'react';
+import React, { ForwardedRef } from 'react';
 import clsx from 'clsx';
 
 import { Box, Container, SpaceBetween } from '~components';
-import { DndContainer } from '~components/internal/components/dnd-container';
+import { DndArea } from '~components/internal/components/dnd-area';
 import DragHandle, { DragHandleProps } from '~components/internal/components/drag-handle';
 
 import { ArrowButtons, i18nStrings } from './commons';
@@ -15,8 +15,7 @@ import styles from './styles.scss';
 interface OptionProps<Option> {
   ref?: ForwardedRef<HTMLDivElement>;
   option: Option;
-  dragHandleAttributes: DragHandleProps['attributes'];
-  dragHandleListeners?: DragHandleProps['listeners'];
+  dragHandleProps: DragHandleProps;
 }
 
 export function ReorderableContainers<Option extends { id: string; title: string }>({
@@ -29,58 +28,46 @@ export function ReorderableContainers<Option extends { id: string; title: string
   renderOption: (props: OptionProps<Option>) => React.ReactNode;
 }) {
   return (
-    <DndContainer
+    <DndArea
       items={options.map(option => ({ id: option.id, label: option.title, data: option }))}
       onItemsChange={items => onReorder(items.map(item => item.data))}
-      renderItem={props => {
-        const className = clsx(styles.container, props.isDragging && styles.placeholder);
+      renderItem={({ ref, className, style, ...props }) => {
         const content = renderOption({ ...props, option: props.item.data });
-        return props.isActive ? (
-          <Box>{content}</Box>
-        ) : (
-          <div className={className} style={props.style}>
+        return (
+          <div ref={ref} className={clsx(className, styles.container)} style={style}>
             {content}
           </div>
         );
       }}
       i18nStrings={i18nStrings}
-      dragOverlayClassName={styles['drag-overlay-container']}
+      borderRadiusVariant="container"
     />
   );
 }
 
-export const ContainerWithDragHandle = forwardRef(
-  (
-    {
-      dragHandleAttributes,
-      dragHandleListeners,
-      option,
-      ...arrowButtonsProps
-    }: {
-      dragHandleAttributes: DragHandleProps['attributes'];
-      dragHandleListeners?: DragHandleProps['listeners'];
-      option: { id: string; title: string; content: React.ReactNode };
-      disabledUp?: boolean;
-      disabledDown?: boolean;
-      onMoveUp: () => void;
-      onMoveDown: () => void;
-    },
-    ref: ForwardedRef<HTMLDivElement>
-  ) => {
-    return (
-      <div ref={ref} className={styles['container-option']}>
-        <Container
-          header={
-            <SpaceBetween size="xs" direction="horizontal" alignItems="center">
-              <DragHandle attributes={dragHandleAttributes} listeners={dragHandleListeners} />
-              <Box variant="h2">{option.title}</Box>
-              <ArrowButtons {...arrowButtonsProps} />
-            </SpaceBetween>
-          }
-        >
-          {option.content}
-        </Container>
-      </div>
-    );
-  }
-);
+export const ContainerWithDragHandle = ({
+  dragHandleProps,
+  option,
+  ...arrowButtonsProps
+}: {
+  dragHandleProps: DragHandleProps;
+  option: { id: string; title: string; content: React.ReactNode };
+  disabledUp?: boolean;
+  disabledDown?: boolean;
+  onMoveUp: () => void;
+  onMoveDown: () => void;
+}) => {
+  return (
+    <Container
+      header={
+        <SpaceBetween size="xs" direction="horizontal" alignItems="center">
+          <DragHandle {...dragHandleProps} />
+          <Box variant="h2">{option.title}</Box>
+          <ArrowButtons {...arrowButtonsProps} />
+        </SpaceBetween>
+      }
+    >
+      {option.content}
+    </Container>
+  );
+};
diff --git a/pages/dnd/reorderable-list.tsx b/pages/dnd/reorderable-list.tsx
@@ -1,12 +1,12 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { ForwardedRef, forwardRef } from 'react';
+import React, { ForwardedRef } from 'react';
 import { useUniqueId } from '@dnd-kit/utilities';
 import clsx from 'clsx';
 
-import { Box, SpaceBetween } from '~components';
-import { DndContainer } from '~components/internal/components/dnd-container';
+import { SpaceBetween } from '~components';
+import { DndArea } from '~components/internal/components/dnd-area';
 import DragHandle, { DragHandleProps } from '~components/internal/components/drag-handle';
 
 import { Instance } from '../table/generate-data';
@@ -17,8 +17,7 @@ import styles from './styles.scss';
 interface OptionProps<Option> {
   ref?: ForwardedRef<HTMLDivElement>;
   option: Option;
-  dragHandleAttributes: DragHandleProps['attributes'];
-  dragHandleListeners?: DragHandleProps['listeners'];
+  dragHandleProps: DragHandleProps;
 }
 
 export function ReorderableList<Option extends { id: string }>({
@@ -41,16 +40,14 @@ export function ReorderableList<Option extends { id: string }>({
       {staticOptions.map(option => (
         <li key={option.id}>{renderStaticOption?.(option)}</li>
       ))}
-      <DndContainer
+      <DndArea
         items={sortableOptions.map(option => ({ id: option.id, label: option.id, data: option }))}
         onItemsChange={items => onReorder([...staticOptions, ...items.map(item => item.data)])}
-        renderItem={props => {
-          const className = clsx(props.isDragging && styles.placeholder, props.isSorting && styles.sorting);
+        renderItem={({ ref, className, style, ...props }) => {
+          className = clsx(className, styles.option, props.isSorting && styles.sorting);
           const content = renderOption({ ...props, option: props.item.data });
-          return props.isActive ? (
-            <Box>{content}</Box>
-          ) : (
-            <li className={className} style={props.style}>
+          return (
+            <li ref={ref} className={className} style={style}>
               {content}
             </li>
           );
@@ -61,49 +58,34 @@ export function ReorderableList<Option extends { id: string }>({
   );
 }
 
-export const InstanceOption = forwardRef(
-  (
-    {
-      dragHandleAttributes,
-      dragHandleListeners,
-      option,
-      sortable = true,
-    }: {
-      dragHandleAttributes?: DragHandleProps['attributes'];
-      dragHandleListeners?: DragHandleProps['listeners'];
-      option: Instance;
-      sortable?: boolean;
-    },
-    ref: ForwardedRef<HTMLDivElement>
-  ) => {
-    const idPrefix = useUniqueId('option');
-    const controlId = `${idPrefix}-control-${option.id}`;
-    return (
-      <div ref={ref} className={styles['option-body']}>
-        <DragHandle
-          attributes={{
-            ...dragHandleAttributes,
-            ['aria-disabled']: !sortable,
-          }}
-          listeners={dragHandleListeners}
-        />
-
-        <SpaceBetween size="s">
-          <SpaceBetween size="s" direction="horizontal">
-            <div style={{ width: 120 }}>
-              <label className={styles['option-label']} htmlFor={controlId}>
-                {option.id}
-              </label>
-            </div>
-            <div style={{ width: 120 }}>{option.type}</div>
-            <div style={{ width: 120 }}>
-              <Status {...option} />
-            </div>
-          </SpaceBetween>
+export const InstanceOption = ({
+  dragHandleProps,
+  option,
+}: {
+  dragHandleProps?: DragHandleProps;
+  option: Instance;
+}) => {
+  const idPrefix = useUniqueId('option');
+  const controlId = `${idPrefix}-control-${option.id}`;
+  return (
+    <div className={styles['option-body']}>
+      {dragHandleProps ? <DragHandle {...dragHandleProps} /> : <DragHandle ariaLabel="" disabled={true} />}
 
-          <DnsName {...option} />
+      <SpaceBetween size="s">
+        <SpaceBetween size="s" direction="horizontal">
+          <div style={{ width: 120 }}>
+            <label className={styles['option-label']} htmlFor={controlId}>
+              {option.id}
+            </label>
+          </div>
+          <div style={{ width: 120 }}>{option.type}</div>
+          <div style={{ width: 120 }}>
+            <Status {...option} />
+          </div>
         </SpaceBetween>
-      </div>
-    );
-  }
-);
+
+        <DnsName {...option} />
+      </SpaceBetween>
+    </div>
+  );
+};
diff --git a/pages/dnd/reorderable-samples.page.tsx b/pages/dnd/reorderable-samples.page.tsx
@@ -41,7 +41,7 @@ export default function Page() {
           options={options1}
           onReorder={o => setOptions1([...o])}
           renderOption={props => <InstanceOption {...props} />}
-          renderStaticOption={option => <InstanceOption option={option} sortable={false} />}
+          renderStaticOption={option => <InstanceOption option={option} />}
           fixedOptionsStart={fixedOptions ? 3 : 0}
         />
       </SpaceBetween>