@puredesktop/puredesktop-ui-bridge 1.0.0-beta.1 → 2.1.0

package/src/components/common/lists/reorderable/ReorderableSections.tsx

@@ -1,344 +1,344 @@
-import type { DragEvent, ReactNode } from 'react'
-import { styled } from 'styled-components'
-import { Text } from '../../typography/Text.js'
-import { ReorderableListRow } from './ReorderableListRow.js'
-import { insertIndexFromRowRect } from './reorderableUtils.js'
-import type {
-  ReorderableItem,
-  ReorderableItemRenderContext,
-  ReorderableMove,
-  ReorderableSection,
-} from './types.js'
-import { useReorderableDragState } from './useReorderableDragState.js'
-
-//#region styled-components
-
-export type ReorderableSectionsDensity = 'default' | 'compact'
-
-const StyledRoot = styled.div<{ $density: ReorderableSectionsDensity }>`
-  display: flex;
-  flex-direction: column;
-  gap: ${({ $density }) => ($density === 'compact' ? '6px' : '8px')};
-  min-width: 0;
-`
-
-const StyledSection = styled.section<{ $density: ReorderableSectionsDensity }>`
-  display: flex;
-  flex-direction: column;
-  gap: ${({ $density }) => ($density === 'compact' ? '0' : '2px')};
-  min-width: 0;
-`
-
-const StyledSectionHeader = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  min-width: 0;
-  padding: 4px 6px;
-`
-
-const StyledSectionLabel = styled(Text)`
-  flex: 1;
-  min-width: 0;
-  color: var(--platform-colors-text-secondary);
-  font-size: var(--platform-typography-font-size-xs);
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-`
-
-const StyledSectionActions = styled.div`
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  gap: 4px;
-`
-
-const StyledList = styled.ul<{ $density: ReorderableSectionsDensity }>`
-  display: flex;
-  flex-direction: column;
-  gap: ${({ $density }) => ($density === 'compact' ? '2px' : '4px')};
-  margin: 0;
-  padding: ${({ $density }) =>
-    $density === 'compact' ? '0 0 0 4px' : '0 0 0 8px'};
-  list-style: none;
-`
-
-const StyledEmpty = styled.li<{
-  $active?: boolean
-  $density: ReorderableSectionsDensity
-}>`
-  padding: ${({ $density }) => ($density === 'compact' ? '7px 9px' : '12px 14px')};
-  border: 1px dashed
-    ${({ $active }) =>
-      $active
-        ? 'var(--platform-colors-border-strong, var(--platform-colors-border))'
-        : 'var(--platform-colors-border)'};
-  border-radius: var(--platform-radius-sm);
-  color: var(--platform-colors-text-secondary);
-  font-size: ${({ $density }) =>
-    $density === 'compact'
-      ? 'var(--platform-typography-font-size-xs)'
-      : 'var(--platform-typography-font-size-sm)'};
-  list-style: none;
-`
-
-const StyledItemButton = styled.button<{ $selected?: boolean }>`
-  display: block;
-  width: 100%;
-  padding: 6px 8px;
-  border: 1px solid
-    ${({ $selected }) =>
-      $selected
-        ? 'var(--platform-colors-border-strong, var(--platform-colors-border))'
-        : 'transparent'};
-  border-radius: var(--platform-radius-sm);
-  background: ${({ $selected }) =>
-    $selected
-      ? 'var(--platform-colors-surface-hover, var(--platform-colors-surface))'
-      : 'transparent'};
-  color: var(--platform-colors-text);
-  font-size: var(--platform-typography-font-size-sm);
-  text-align: left;
-  cursor: pointer;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  &:hover:not(:disabled) {
-    background: var(
-      --platform-colors-surface-hover,
-      var(--platform-colors-surface)
-    );
-  }
-
-  &:disabled {
-    cursor: default;
-    opacity: 0.55;
-  }
-`
-
-//#endregion
-
-export interface ReorderableSectionsProps<TId extends string = string> {
-  sections: ReadonlyArray<ReorderableSection<TId>>
-  selectedId?: TId
-  readonly?: boolean
-  density?: ReorderableSectionsDensity
-  'aria-label'?: string
-  onSelect?: (id: TId) => void
-  onMove?: (move: ReorderableMove<TId>) => void
-  renderItem?: (ctx: ReorderableItemRenderContext<TId>) => ReactNode
-  renderSectionHeader?: (ctx: { section: ReorderableSection<TId> }) => ReactNode
-  renderSectionFooter?: (ctx: { section: ReorderableSection<TId> }) => ReactNode
-}
-
-export function ReorderableSections<TId extends string = string>({
-  sections,
-  selectedId,
-  readonly = false,
-  density = 'default',
-  'aria-label': ariaLabel = 'Reorderable sections',
-  onSelect,
-  onMove,
-  renderItem,
-  renderSectionHeader,
-  renderSectionFooter,
-}: ReorderableSectionsProps<TId>): React.ReactElement {
-  const {
-    draggedId,
-    dropTarget,
-    beginDrag,
-    endDrag,
-    hoverDrop,
-    takeCommittedMove,
-  } = useReorderableDragState<TId>()
-
-  const canReorder = !readonly && Boolean(onMove)
-
-  const commitDrop = (sectionKey: string, insertIndex: number): void => {
-    if (!canReorder) return
-    hoverDrop({ sectionKey, insertIndex })
-    const committed = takeCommittedMove()
-    endDrag()
-    if (!committed || !onMove) return
-    onMove({
-      itemId: committed.drag.itemId,
-      from: committed.drag.from,
-      to: committed.to,
-    })
-  }
-
-  const renderRowContent = (
-    id: TId,
-    disabled: boolean,
-    ctx: ReorderableItemRenderContext<TId>,
-  ): ReactNode => {
-    if (renderItem) return renderItem(ctx)
-    return (
-      <StyledItemButton
-        type="button"
-        $selected={ctx.selected}
-        disabled={disabled}
-        onClick={() => {
-          if (!disabled) onSelect?.(id)
-        }}
-      >
-        {id}
-      </StyledItemButton>
-    )
-  }
-
-  return (
-    <StyledRoot aria-label={ariaLabel} $density={density}>
-      {sections.map(section => {
-        const handleRowDragOver = (
-          event: DragEvent<HTMLDivElement>,
-          index: number,
-        ): void => {
-          if (!canReorder || !draggedId) return
-          event.preventDefault()
-          event.dataTransfer.dropEffect = 'move'
-          hoverDrop({
-            sectionKey: section.key,
-            insertIndex: insertIndexFromRowRect(
-              event.clientY,
-              event.currentTarget.getBoundingClientRect(),
-              index,
-            ),
-          })
-        }
-
-        const handleRowDrop = (
-          event: DragEvent<HTMLDivElement>,
-          index: number,
-        ): void => {
-          if (!canReorder || !draggedId) return
-          event.preventDefault()
-          event.stopPropagation()
-          commitDrop(
-            section.key,
-            insertIndexFromRowRect(
-              event.clientY,
-              event.currentTarget.getBoundingClientRect(),
-              index,
-            ),
-          )
-        }
-
-        const handleEmptyDragOver = (event: DragEvent<HTMLLIElement>): void => {
-          if (!canReorder || !draggedId) return
-          event.preventDefault()
-          event.dataTransfer.dropEffect = 'move'
-          hoverDrop({ sectionKey: section.key, insertIndex: 0 })
-        }
-
-        const handleEmptyDrop = (event: DragEvent<HTMLLIElement>): void => {
-          if (!canReorder || !draggedId) return
-          event.preventDefault()
-          commitDrop(section.key, 0)
-        }
-
-        return (
-          <StyledSection
-            key={section.key}
-            $density={density}
-            aria-label={String(section.label ?? section.key)}
-          >
-            {renderSectionHeader ? (
-              renderSectionHeader({ section })
-            ) : section.label ? (
-              <StyledSectionHeader>
-                <StyledSectionLabel as="span">
-                  {section.label}
-                </StyledSectionLabel>
-                {section.headerActions ? (
-                  <StyledSectionActions>
-                    {section.headerActions}
-                  </StyledSectionActions>
-                ) : null}
-              </StyledSectionHeader>
-            ) : section.headerActions ? (
-              <StyledSectionHeader>
-                <StyledSectionActions>
-                  {section.headerActions}
-                </StyledSectionActions>
-              </StyledSectionHeader>
-            ) : null}
-
-            {section.items.length === 0 ? (
-              <StyledList role="list" $density={density}>
-                <StyledEmpty
-                  $density={density}
-                  $active={
-                    Boolean(draggedId) && dropTarget?.sectionKey === section.key
-                  }
-                  onDragOver={handleEmptyDragOver}
-                  onDrop={handleEmptyDrop}
-                >
-                  <Text as="span">{section.emptyLabel ?? 'No items'}</Text>
-                </StyledEmpty>
-              </StyledList>
-            ) : (
-              <StyledList role="list" $density={density}>
-                {section.items.map(
-                  (item: ReorderableItem<TId>, index: number) => {
-                    const dragging = item.id === draggedId
-                    const dropAbove =
-                      dropTarget?.sectionKey === section.key &&
-                      dropTarget.insertIndex === index
-                    const dropBelow =
-                      dropTarget?.sectionKey === section.key &&
-                      dropTarget.insertIndex === index + 1
-                    const disabled = Boolean(item.disabled)
-                    const ctx: ReorderableItemRenderContext<TId> = {
-                      id: item.id,
-                      sectionKey: section.key,
-                      index,
-                      item,
-                      selected: selectedId === item.id,
-                      dragging,
-                      disabled,
-                    }
-
-                    return (
-                      <li key={`${section.key}:${item.id}`}>
-                        <ReorderableListRow
-                          dragging={dragging}
-                          dropAbove={dropAbove}
-                          dropBelow={dropBelow}
-                          readonly={readonly || disabled}
-                          draggable={!disabled}
-                          onDragOver={(event: DragEvent<HTMLDivElement>) =>
-                            handleRowDragOver(event, index)
-                          }
-                          onDrop={(event: DragEvent<HTMLDivElement>) =>
-                            handleRowDrop(event, index)
-                          }
-                          onDragHandleStart={(
-                            event: DragEvent<HTMLSpanElement>,
-                          ) => {
-                            event.dataTransfer.setData('text/plain', item.id)
-                            event.dataTransfer.effectAllowed = 'move'
-                            beginDrag(item.id, {
-                              sectionKey: section.key,
-                              index,
-                            })
-                          }}
-                          onDragEnd={endDrag}
-                        >
-                          {renderRowContent(item.id, disabled, ctx)}
-                        </ReorderableListRow>
-                      </li>
-                    )
-                  },
-                )}
-              </StyledList>
-            )}
-            {renderSectionFooter ? renderSectionFooter({ section }) : null}
-          </StyledSection>
-        )
-      })}
-    </StyledRoot>
-  )
-}
+import type { DragEvent, ReactNode } from 'react'
+import { styled } from 'styled-components'
+import { Text } from '../../typography/Text.js'
+import { ReorderableListRow } from './ReorderableListRow.js'
+import { insertIndexFromRowRect } from './reorderableUtils.js'
+import type {
+  ReorderableItem,
+  ReorderableItemRenderContext,
+  ReorderableMove,
+  ReorderableSection,
+} from './types.js'
+import { useReorderableDragState } from './useReorderableDragState.js'
+
+//#region styled-components
+
+export type ReorderableSectionsDensity = 'default' | 'compact'
+
+const StyledRoot = styled.div<{ $density: ReorderableSectionsDensity }>`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ $density }) => ($density === 'compact' ? '6px' : '8px')};
+  min-width: 0;
+`
+
+const StyledSection = styled.section<{ $density: ReorderableSectionsDensity }>`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ $density }) => ($density === 'compact' ? '0' : '2px')};
+  min-width: 0;
+`
+
+const StyledSectionHeader = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  padding: 4px 6px;
+`
+
+const StyledSectionLabel = styled(Text)`
+  flex: 1;
+  min-width: 0;
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-xs);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+`
+
+const StyledSectionActions = styled.div`
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 4px;
+`
+
+const StyledList = styled.ul<{ $density: ReorderableSectionsDensity }>`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ $density }) => ($density === 'compact' ? '2px' : '4px')};
+  margin: 0;
+  padding: ${({ $density }) =>
+    $density === 'compact' ? '0 0 0 4px' : '0 0 0 8px'};
+  list-style: none;
+`
+
+const StyledEmpty = styled.li<{
+  $active?: boolean
+  $density: ReorderableSectionsDensity
+}>`
+  padding: ${({ $density }) => ($density === 'compact' ? '7px 9px' : '12px 14px')};
+  border: 1px dashed
+    ${({ $active }) =>
+      $active
+        ? 'var(--platform-colors-border-strong, var(--platform-colors-border))'
+        : 'var(--platform-colors-border)'};
+  border-radius: var(--platform-radius-sm);
+  color: var(--platform-colors-text-secondary);
+  font-size: ${({ $density }) =>
+    $density === 'compact'
+      ? 'var(--platform-typography-font-size-xs)'
+      : 'var(--platform-typography-font-size-sm)'};
+  list-style: none;
+`
+
+const StyledItemButton = styled.button<{ $selected?: boolean }>`
+  display: block;
+  width: 100%;
+  padding: 6px 8px;
+  border: 1px solid
+    ${({ $selected }) =>
+      $selected
+        ? 'var(--platform-colors-border-strong, var(--platform-colors-border))'
+        : 'transparent'};
+  border-radius: var(--platform-radius-sm);
+  background: ${({ $selected }) =>
+    $selected
+      ? 'var(--platform-colors-surface-hover, var(--platform-colors-surface))'
+      : 'transparent'};
+  color: var(--platform-colors-text);
+  font-size: var(--platform-typography-font-size-sm);
+  text-align: left;
+  cursor: pointer;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &:hover:not(:disabled) {
+    background: var(
+      --platform-colors-surface-hover,
+      var(--platform-colors-surface)
+    );
+  }
+
+  &:disabled {
+    cursor: default;
+    opacity: 0.55;
+  }
+`
+
+//#endregion
+
+export interface ReorderableSectionsProps<TId extends string = string> {
+  sections: ReadonlyArray<ReorderableSection<TId>>
+  selectedId?: TId
+  readonly?: boolean
+  density?: ReorderableSectionsDensity
+  'aria-label'?: string
+  onSelect?: (id: TId) => void
+  onMove?: (move: ReorderableMove<TId>) => void
+  renderItem?: (ctx: ReorderableItemRenderContext<TId>) => ReactNode
+  renderSectionHeader?: (ctx: { section: ReorderableSection<TId> }) => ReactNode
+  renderSectionFooter?: (ctx: { section: ReorderableSection<TId> }) => ReactNode
+}
+
+export function ReorderableSections<TId extends string = string>({
+  sections,
+  selectedId,
+  readonly = false,
+  density = 'default',
+  'aria-label': ariaLabel = 'Reorderable sections',
+  onSelect,
+  onMove,
+  renderItem,
+  renderSectionHeader,
+  renderSectionFooter,
+}: ReorderableSectionsProps<TId>): React.ReactElement {
+  const {
+    draggedId,
+    dropTarget,
+    beginDrag,
+    endDrag,
+    hoverDrop,
+    takeCommittedMove,
+  } = useReorderableDragState<TId>()
+
+  const canReorder = !readonly && Boolean(onMove)
+
+  const commitDrop = (sectionKey: string, insertIndex: number): void => {
+    if (!canReorder) return
+    hoverDrop({ sectionKey, insertIndex })
+    const committed = takeCommittedMove()
+    endDrag()
+    if (!committed || !onMove) return
+    onMove({
+      itemId: committed.drag.itemId,
+      from: committed.drag.from,
+      to: committed.to,
+    })
+  }
+
+  const renderRowContent = (
+    id: TId,
+    disabled: boolean,
+    ctx: ReorderableItemRenderContext<TId>,
+  ): ReactNode => {
+    if (renderItem) return renderItem(ctx)
+    return (
+      <StyledItemButton
+        type="button"
+        $selected={ctx.selected}
+        disabled={disabled}
+        onClick={() => {
+          if (!disabled) onSelect?.(id)
+        }}
+      >
+        {id}
+      </StyledItemButton>
+    )
+  }
+
+  return (
+    <StyledRoot aria-label={ariaLabel} $density={density}>
+      {sections.map(section => {
+        const handleRowDragOver = (
+          event: DragEvent<HTMLDivElement>,
+          index: number,
+        ): void => {
+          if (!canReorder || !draggedId) return
+          event.preventDefault()
+          event.dataTransfer.dropEffect = 'move'
+          hoverDrop({
+            sectionKey: section.key,
+            insertIndex: insertIndexFromRowRect(
+              event.clientY,
+              event.currentTarget.getBoundingClientRect(),
+              index,
+            ),
+          })
+        }
+
+        const handleRowDrop = (
+          event: DragEvent<HTMLDivElement>,
+          index: number,
+        ): void => {
+          if (!canReorder || !draggedId) return
+          event.preventDefault()
+          event.stopPropagation()
+          commitDrop(
+            section.key,
+            insertIndexFromRowRect(
+              event.clientY,
+              event.currentTarget.getBoundingClientRect(),
+              index,
+            ),
+          )
+        }
+
+        const handleEmptyDragOver = (event: DragEvent<HTMLLIElement>): void => {
+          if (!canReorder || !draggedId) return
+          event.preventDefault()
+          event.dataTransfer.dropEffect = 'move'
+          hoverDrop({ sectionKey: section.key, insertIndex: 0 })
+        }
+
+        const handleEmptyDrop = (event: DragEvent<HTMLLIElement>): void => {
+          if (!canReorder || !draggedId) return
+          event.preventDefault()
+          commitDrop(section.key, 0)
+        }
+
+        return (
+          <StyledSection
+            key={section.key}
+            $density={density}
+            aria-label={String(section.label ?? section.key)}
+          >
+            {renderSectionHeader ? (
+              renderSectionHeader({ section })
+            ) : section.label ? (
+              <StyledSectionHeader>
+                <StyledSectionLabel as="span">
+                  {section.label}
+                </StyledSectionLabel>
+                {section.headerActions ? (
+                  <StyledSectionActions>
+                    {section.headerActions}
+                  </StyledSectionActions>
+                ) : null}
+              </StyledSectionHeader>
+            ) : section.headerActions ? (
+              <StyledSectionHeader>
+                <StyledSectionActions>
+                  {section.headerActions}
+                </StyledSectionActions>
+              </StyledSectionHeader>
+            ) : null}
+
+            {section.items.length === 0 ? (
+              <StyledList role="list" $density={density}>
+                <StyledEmpty
+                  $density={density}
+                  $active={
+                    Boolean(draggedId) && dropTarget?.sectionKey === section.key
+                  }
+                  onDragOver={handleEmptyDragOver}
+                  onDrop={handleEmptyDrop}
+                >
+                  <Text as="span">{section.emptyLabel ?? 'No items'}</Text>
+                </StyledEmpty>
+              </StyledList>
+            ) : (
+              <StyledList role="list" $density={density}>
+                {section.items.map(
+                  (item: ReorderableItem<TId>, index: number) => {
+                    const dragging = item.id === draggedId
+                    const dropAbove =
+                      dropTarget?.sectionKey === section.key &&
+                      dropTarget.insertIndex === index
+                    const dropBelow =
+                      dropTarget?.sectionKey === section.key &&
+                      dropTarget.insertIndex === index + 1
+                    const disabled = Boolean(item.disabled)
+                    const ctx: ReorderableItemRenderContext<TId> = {
+                      id: item.id,
+                      sectionKey: section.key,
+                      index,
+                      item,
+                      selected: selectedId === item.id,
+                      dragging,
+                      disabled,
+                    }
+
+                    return (
+                      <li key={`${section.key}:${item.id}`}>
+                        <ReorderableListRow
+                          dragging={dragging}
+                          dropAbove={dropAbove}
+                          dropBelow={dropBelow}
+                          readonly={readonly || disabled}
+                          draggable={!disabled}
+                          onDragOver={(event: DragEvent<HTMLDivElement>) =>
+                            handleRowDragOver(event, index)
+                          }
+                          onDrop={(event: DragEvent<HTMLDivElement>) =>
+                            handleRowDrop(event, index)
+                          }
+                          onDragHandleStart={(
+                            event: DragEvent<HTMLSpanElement>,
+                          ) => {
+                            event.dataTransfer.setData('text/plain', item.id)
+                            event.dataTransfer.effectAllowed = 'move'
+                            beginDrag(item.id, {
+                              sectionKey: section.key,
+                              index,
+                            })
+                          }}
+                          onDragEnd={endDrag}
+                        >
+                          {renderRowContent(item.id, disabled, ctx)}
+                        </ReorderableListRow>
+                      </li>
+                    )
+                  },
+                )}
+              </StyledList>
+            )}
+            {renderSectionFooter ? renderSectionFooter({ section }) : null}
+          </StyledSection>
+        )
+      })}
+    </StyledRoot>
+  )
+}