Merge branch 'main' into main

cloudscape-design · Dec 20, 2024 · 3abd8c0 · 3abd8c0
2 parents 52b28e0 + d0ecb9a
commit 3abd8c0
Show file tree

Hide file tree

Showing 27 changed files with 277 additions and 335 deletions.
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>

diff --git a/pages/dnd/reorderable-table.tsx b/pages/dnd/reorderable-table.tsx
@@ -5,7 +5,7 @@ import React, { useEffect, useRef } from 'react';
 import clsx from 'clsx';
 
 import { Box, 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 { i18nStrings } from './commons';
@@ -28,18 +28,15 @@ export function ReorderableTable<Item extends { id: string }>({
   onReorder: (items: readonly Item[]) => void;
   columnDefinitions: readonly ColumnDefinition<Item>[];
 }) {
-  const getColumnDefinitions = (props: {
-    dragHandleAttributes: DragHandleProps['attributes'];
-    dragHandleListeners?: DragHandleProps['listeners'];
-  }) => {
+  const getColumnDefinitions = (props: { dragHandleProps: DragHandleProps }) => {
     const firstColumn = columnDefinitions[0];
     const enhancedColumns = columnDefinitions.map(def => ({ ...def }));
     enhancedColumns[0] = {
       key: firstColumn.key,
       label: firstColumn.label,
       render: item => (
         <SpaceBetween size="xs" direction="horizontal" alignItems="center">
-          <DragHandle attributes={props.dragHandleAttributes} listeners={props.dragHandleListeners} />
+          <DragHandle {...props.dragHandleProps} />
           <Box>{firstColumn.render(item)}</Box>
         </SpaceBetween>
       ),
@@ -69,37 +66,35 @@ export function ReorderableTable<Item extends { id: string }>({
           </tr>
         </thead>
         <tbody>
-          <DndContainer
+          <DndArea
             items={items.map(data => ({ id: data.id, label: data.id, data }))}
             onItemsChange={items => onReorder(items.map(item => item.data))}
-            renderItem={props => {
+            renderItem={({ item, ref, className, style, isActive, dragHandleProps }) => {
               const row = (
                 <tr
-                  ref={props.ref}
-                  className={clsx(props.isActive ? styles['active-row'] : clsx(props.isDragging && styles.placeholder))}
-                  style={props.isActive ? {} : props.style}
+                  ref={ref}
+                  className={clsx(className, styles.row, isActive && styles['active-row'])}
+                  style={isActive ? {} : style}
                 >
-                  {getColumnDefinitions(props).map((column, index) => (
+                  {getColumnDefinitions({ dragHandleProps }).map((column, index) => (
                     <td
                       key={column.key}
                       className={tableStyles['custom-table-cell']}
-                      style={props.isActive ? { width: columnWidthsRef.current[index] ?? 0 } : undefined}
+                      style={isActive ? { width: columnWidthsRef.current[index] ?? 0 } : undefined}
                     >
-                      {column.render(props.item.data)}
+                      {column.render(item.data)}
                     </td>
                   ))}
                 </tr>
               );
-              return !props.isActive ? (
+              return !isActive ? (
                 row
               ) : (
-                <Box>
-                  <div className={tableStyles['custom-table']}>
-                    <table className={clsx(tableStyles['custom-table-table'], tableStyles['use-wrapper-paddings'])}>
-                      <tbody>{row}</tbody>
-                    </table>
-                  </div>
-                </Box>
+                <div className={tableStyles['custom-table']}>
+                  <table className={clsx(tableStyles['custom-table-table'], tableStyles['use-wrapper-paddings'])}>
+                    <tbody>{row}</tbody>
+                  </table>
+                </div>
               );
             }}
             i18nStrings={i18nStrings}