@noya-app/noya-designsystem 0.1.44 → 0.1.46

package/src/components/List.tsx

@@ -0,0 +1,268 @@
+import {
+  forwardRefGeneric,
+  memoGeneric,
+  useFileDropTarget,
+} from "@noya-app/react-utils";
+import React, { useImperativeHandle, useRef, useState } from "react";
+import { cssVars } from "../theme";
+import { cx } from "../utils/classNames";
+import { updateSelection } from "../utils/selection";
+import { CollectionProps, CollectionRef } from "./Collection";
+import { ListView } from "./ListView";
+import { TreeView } from "./TreeView";
+
+const cssVarOverrides = {
+  "--icon-selected": cssVars.colors.primary,
+};
+
+const emptyArray: string[] = [];
+
+export const List = memoGeneric(
+  forwardRefGeneric(function List<T, M extends string = string>(
+    props: CollectionProps<T, M> & { ref?: React.ForwardedRef<CollectionRef> },
+    ref: React.ForwardedRef<CollectionRef>
+  ) {
+    const {
+      className,
+      items,
+      getId,
+      getName,
+      expandable,
+      getExpanded,
+      getRenamable,
+      getDepth,
+      setExpanded,
+      menuItems,
+      onSelectMenuItem,
+      onRename,
+      renderThumbnail,
+      renderAction,
+      renderDetail,
+      onSelectionChange,
+      itemRoleDescription = "clickable item",
+      detailPosition = "end",
+      size = "medium",
+      testHoveredId,
+      testRenamingId,
+      scrollable = false,
+      acceptsDrop,
+      onMoveItem,
+      onFilesDrop,
+      onDoubleClickItem,
+      renamable,
+      selectedIds = emptyArray,
+    } = props;
+
+    const [internalHoveredId, setHoveredId] = useState<string>();
+    const [internalRenamingId, setRenamingId] = useState<string>();
+
+    const hoveredId = internalHoveredId ?? testHoveredId;
+    const renamingId = testRenamingId ?? internalRenamingId;
+
+    const handleSelect = (itemId: string, event?: ListView.ClickInfo) => {
+      if (!onSelectionChange) return;
+
+      setRenamingId(undefined);
+      const newSelectedIds = updateSelection(
+        items.map(getId),
+        selectedIds,
+        itemId,
+        event
+      );
+      onSelectionChange(newSelectedIds, event);
+    };
+
+    const handleMenuAction = (action: M) => {
+      if (!onSelectMenuItem) return;
+
+      const selectedItems = items.filter((item) =>
+        selectedIds.includes(getId(item))
+      );
+      onSelectMenuItem(action, selectedItems);
+    };
+
+    const ViewComponent = expandable ? TreeView : ListView;
+
+    const fileDropTargetRef = useRef<HTMLDivElement>(null);
+    const { isDropTargetActive, dropTargetProps } = useFileDropTarget(
+      fileDropTargetRef,
+      onFilesDrop
+    );
+
+    useImperativeHandle(ref, () => ({
+      editName: (id: string) => {
+        setRenamingId(id);
+      },
+    }));
+
+    return (
+      <ViewComponent.Root
+        variant="bare"
+        className={cx(className, isDropTargetActive && "bg-primary-pastel")}
+        containerRef={fileDropTargetRef}
+        scrollable={scrollable}
+        data={items}
+        keyExtractor={getId}
+        role="listbox"
+        aria-orientation="vertical"
+        aria-multiselectable={true}
+        expandable={expandable}
+        sortable={expandable}
+        acceptsDrop={acceptsDrop}
+        onMoveItem={onMoveItem}
+        {...dropTargetProps}
+        renderItem={(
+          item: T,
+          _: number,
+          { isDragging }: { isDragging: boolean }
+        ) => {
+          const id = getId(item);
+          const isHovered = hoveredId === id && !isDragging;
+          const expanded = getExpanded?.(item);
+          const itemIsRenamable = getRenamable?.(item) ?? renamable;
+          const isSelected = selectedIds.includes(id);
+          const isRenaming = itemIsRenamable && onRename && renamingId === id;
+          const isTestingRenaming = testRenamingId === id;
+
+          const thumbnail = renderThumbnail?.(item, isSelected);
+          const action =
+            (isHovered || isSelected) &&
+            !isRenaming &&
+            renderAction?.(item, isSelected);
+          const end =
+            action ||
+            (detailPosition === "end" && renderDetail?.(item, isSelected));
+          const below =
+            detailPosition === "below" && renderDetail?.(item, isSelected);
+
+          return (
+            <ViewComponent.Row
+              id={id}
+              key={id}
+              role="option"
+              sortable={expandable}
+              aria-roledescription={itemRoleDescription}
+              aria-label={getName(item)}
+              aria-selected={isSelected}
+              className={cx("cursor-pointer p-1 rounded")}
+              backgroundColor={
+                isSelected ? cssVars.colors.primaryPastel : undefined
+              }
+              chevronClassName={cx(expandable && "relative left-2")}
+              style={cssVarOverrides as React.CSSProperties}
+              hovered={isHovered}
+              selected={isSelected}
+              expanded={expanded}
+              depth={getDepth?.(item)}
+              onHoverChange={(hovered: boolean) =>
+                setHoveredId(hovered ? id : undefined)
+              }
+              onPress={(e: ListView.ClickInfo) => {
+                handleSelect(id, e);
+              }}
+              onDoubleClick={() => {
+                onDoubleClickItem?.(id);
+              }}
+              onKeyDown={(e: React.KeyboardEvent) => {
+                if (e.key !== "Enter" && e.key !== " ") return;
+                e.preventDefault();
+                handleSelect(id, e);
+                if (e.key === "Enter") {
+                  setRenamingId(id);
+                }
+              }}
+              menuItems={menuItems}
+              onSelectMenuItem={handleMenuAction}
+              onContextMenu={() => {
+                if (!isSelected) {
+                  handleSelect(id, {
+                    shiftKey: false,
+                    altKey: false,
+                    metaKey: false,
+                    ctrlKey: false,
+                  });
+                }
+              }}
+              tabIndex={0}
+              onClickChevron={() => {
+                if (!expandable) return;
+                setExpanded?.(item, !expanded);
+              }}
+            >
+              <div className="flex flex-1 items-center px-2 gap-3">
+                {thumbnail && (
+                  <div
+                    className={cx(
+                      "rounded overflow-hidden flex-none flex items-center justify-center",
+                      size === "medium" ? "w-8 h-8" : "w-16 h-16",
+                      isSelected && "text-primary"
+                    )}
+                    style={{
+                      backgroundColor: isSelected
+                        ? cssVars.colors.primaryPastel
+                        : cssVars.colors.inputBackground,
+                    }}
+                    tabIndex={-1}
+                  >
+                    {thumbnail}
+                  </div>
+                )}
+                <div className="flex flex-col flex-1 w-0">
+                  <div className="flex items-center min-h-[27px] flex-1 gap-2">
+                    <div className="flex-1 w-0 flex items-center" tabIndex={-1}>
+                      {isRenaming ? (
+                        <ViewComponent.EditableRowTitle
+                          value={getName(item)}
+                          placeholder="Enter name"
+                          className="font-medium"
+                          autoFocus={!isTestingRenaming}
+                          onSubmitEditing={(value: string) => {
+                            if (value !== getName(item)) {
+                              onRename?.(item, value);
+                            }
+                            setRenamingId(undefined);
+                          }}
+                        />
+                      ) : (
+                        <ViewComponent.RowTitle
+                          className={cx(
+                            "font-medium",
+                            isSelected && "text-primary"
+                          )}
+                        >
+                          {getName(item)}
+                        </ViewComponent.RowTitle>
+                      )}
+                    </div>
+                    {end && (
+                      <div
+                        className={cx(
+                          "flex items-center gap-2",
+                          isSelected && "text-primary"
+                        )}
+                        tabIndex={-1}
+                      >
+                        {end}
+                      </div>
+                    )}
+                  </div>
+                  {below && (
+                    <div
+                      className={cx(
+                        "flex items-center",
+                        isSelected && "text-primary"
+                      )}
+                      tabIndex={-1}
+                    >
+                      {below}
+                    </div>
+                  )}
+                </div>
+              </div>
+            </ViewComponent.Row>
+          );
+        }}
+      />
+    );
+  })
+);

package/src/components/ListView.tsx

@@ -28,7 +28,7 @@ import { useHover } from "../hooks/useHover";
 import { cssVars } from "../theme";
 import { cx } from "../utils/classNames";
 import { ContextMenu } from "./ContextMenu";
-import { InputField, InputFieldInputProps } from "./InputField";
+import { InputField } from "./InputField";
 import { MenuItem } from "./internal/Menu";
 import { ScrollArea } from "./ScrollArea";
 import {
@@ -38,7 +38,6 @@ import {
   Sortable,
 } from "./Sortable";
 import { Spacer } from "./Spacer";
-import { labelTextStyles } from "./SelectMenu";
 
 export type ListRowMarginType = "none" | "top" | "bottom" | "vertical";
 export type ListRowPosition = "only" | "first" | "middle" | "last";
@@ -122,24 +121,12 @@ const ListViewRowTitle = ({
  * EditableRowTitle
  * ------------------------------------------------------------------------- */
 
-const ListViewEditableRowTitleElement = forwardRef(
-  (
-    { className, ...props }: InputFieldInputProps,
-    forwardedRef: ForwardedRef<HTMLInputElement>
-  ) => (
-    <InputField.Input
-      ref={forwardedRef}
-      className={cx(`bg-listview-editing-background `, className)}
-      {...props}
-    />
-  )
-);
-
 export interface EditableRowProps {
   value: string;
   onSubmitEditing: (value: string) => void;
   autoFocus: boolean;
   placeholder?: string;
+  className?: string;
 }
 
 function ListViewEditableRowTitle({
@@ -147,6 +134,7 @@ function ListViewEditableRowTitle({
   onSubmitEditing,
   autoFocus,
   placeholder,
+  className,
 }: EditableRowProps) {
   const inputRef = useRef<HTMLInputElement | null>(null);
 
@@ -159,30 +147,24 @@ function ListViewEditableRowTitle({
     // the `onBlur` fires correctly.
     element.focus();
 
+    // must be a delay of 1ms or more to ensure any radix ui components have finished any focus behaviors
     setTimeout(() => {
       element.select();
-    }, 0);
+    }, 1);
   }, [autoFocus]);
 
   return (
-    <ListViewEditableRowTitleElement
+    <InputField.Input
       ref={inputRef}
-      variant="bare"
       value={value}
       placeholder={placeholder}
       onSubmit={onSubmitEditing}
       allowSubmittingWithSameValue
+      className={cx("-mx-1.5 -my-1 bg-listview-editing-background", className)}
     />
   );
 }
 
-function getPositionMargin(marginType: ListRowMarginType) {
-  return {
-    top: marginType === "top" || marginType === "vertical" ? 8 : 0,
-    bottom: marginType === "bottom" || marginType === "vertical" ? 8 : 0,
-  };
-}
-
 /* ----------------------------------------------------------------------------
  * Row
  * ------------------------------------------------------------------------- */
@@ -225,18 +207,24 @@ const RowContainer = forwardRef<
       style,
       $clickable,
       "aria-describedby": _, // Causes hydration warning
+      role,
+      "aria-label": ariaLabel,
+      "aria-roledescription": ariaRoleDescription,
+      "aria-selected": ariaSelected,
       ...props
     },
     ref
   ) => {
-    const margin = getPositionMargin($marginType);
-
     return (
       <div
         ref={ref}
+        role={role}
+        aria-label={ariaLabel}
+        aria-roledescription={ariaRoleDescription}
+        aria-selected={ariaSelected ?? $selected}
         className={cx(
           $isSectionHeader && $sectionHeaderVariant === "label"
-            ? labelTextStyles
+            ? "font-sans text-label uppercase leading-3 font-bold text-text-muted"
             : "font-sans text-heading5 font-normal",
           !$isSectionHeader &&
             $selected &&
@@ -254,22 +242,11 @@ const RowContainer = forwardRef<
             paddingRight: $selected ? "8px" : "12px",
             paddingBottom: $selected ? "4px" : "6px",
             paddingLeft: $selected ? "8px" : "12px",
-            borderRadius:
-              $variant === "padded" ? "2px" : $selected ? "4px" : "",
-            marginLeft: $variant === "padded" ? "8px" : $selected ? "4px" : "",
-            marginRight: $variant === "padded" ? "8px" : $selected ? "4px" : "",
-            marginTop:
-              $variant === "padded"
-                ? `${margin.top}px`
-                : $selected
-                  ? "2px"
-                  : "",
-            marginBottom:
-              $variant === "padded"
-                ? `${margin.bottom}px`
-                : $selected
-                  ? "2px"
-                  : "",
+            borderRadius: $selected ? "4px" : "",
+            marginLeft: $selected ? "4px" : "",
+            marginRight: $selected ? "4px" : "",
+            marginTop: $selected ? "2px" : "",
+            marginBottom: $selected ? "2px" : "",
           }),
           ...($selected &&
             !$isSectionHeader && {
@@ -351,6 +328,7 @@ const ListViewDragIndicatorElement = forwardRef<
           zIndex: 1000,
           position: "absolute",
           borderRadius: "3px",
+          pointerEvents: "none",
           ...($relativeDropPosition === "inside"
             ? {
                 inset: 2,
@@ -396,6 +374,7 @@ interface ListViewClickInfo {
 interface ListViewRowProps<MenuItemType extends string = string> {
   id?: string;
   tabIndex?: number;
+  role?: string;
   selected?: boolean;
   /** @default 0 */
   depth?: number;
@@ -432,6 +411,7 @@ const ListViewRow = forwardRefGeneric(function ListViewRow<
   {
     id,
     tabIndex = 0,
+    role,
     gap,
     backgroundColor,
     selected = false,
@@ -526,6 +506,7 @@ const ListViewRow = forwardRefGeneric(function ListViewRow<
         onContextMenu={onContextMenu}
         $isSectionHeader={isSectionHeader}
         id={id}
+        role={role}
         $gap={gap ?? 0}
         $backgroundColor={backgroundColor}
         {...hoverProps}
@@ -764,14 +745,18 @@ type RenderProps<T> = {
   virtualized?: Size;
 };
 
-type ListViewVariant = "normal" | "padded" | "bare";
+type ListViewVariant = "normal" | "bare";
 
 type ListViewSectionHeaderVariant = "normal" | "label";
 
-type ListViewRootProps = {
+export type ListViewRootProps = {
   id?: string;
   className?: string;
   style?: CSSProperties;
+  role?: string;
+  "aria-labelledby"?: string;
+  "aria-orientation"?: "vertical" | "horizontal";
+  "aria-multiselectable"?: boolean;
   onPress?: () => void;
   scrollable?: boolean;
   expandable?: boolean;
@@ -788,6 +773,11 @@ type ListViewRootProps = {
   divider?: boolean;
   gap?: number;
   colorScheme?: ListColorScheme;
+  containerRef?: React.RefObject<HTMLDivElement>;
+  onDragOver?: React.DragEventHandler<HTMLDivElement>;
+  onDragEnter?: React.DragEventHandler<HTMLDivElement>;
+  onDragLeave?: React.DragEventHandler<HTMLDivElement>;
+  onDrop?: React.DragEventHandler<HTMLDivElement>;
 };
 
 const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
@@ -795,6 +785,10 @@ const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
     id,
     className,
     style,
+    role,
+    "aria-labelledby": ariaLabelledby,
+    "aria-orientation": ariaOrientation,
+    "aria-multiselectable": ariaMultiselectable,
     onPress,
     scrollable = false,
     expandable = true,
@@ -812,6 +806,11 @@ const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
     pressEventName = "onClick",
     colorScheme = "primary",
     gap = 0,
+    containerRef,
+    onDragOver,
+    onDragEnter,
+    onDragLeave,
+    onDrop,
   }: RenderProps<T> & ListViewRootProps,
   forwardedRef: ForwardedRef<IVirtualizedList>
 ) {
@@ -1002,17 +1001,13 @@ const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
   const getItemHeight = useCallback(
     (index: number) => {
       const child = getItemContextValue(index);
-      const margin = child?.marginType
-        ? getPositionMargin(child.marginType)
-        : { top: 0, bottom: 0 };
       const height =
-        (child?.isSectionHeader && child.sectionHeaderVariant === "label"
+        child?.isSectionHeader && child.sectionHeaderVariant === "label"
           ? SECTION_HEADER_LABEL_HEIGHT
-          : ROW_HEIGHT) +
-        (variant === "padded" ? margin.top + margin.bottom : 0);
+          : ROW_HEIGHT;
       return height;
     },
-    [getItemContextValue, variant]
+    [getItemContextValue]
   );
 
   const getKey = useCallback(
@@ -1027,6 +1022,10 @@ const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
     <ListViewDraggingContext.Provider value={draggingContextValue}>
       <div
         id={id}
+        role={role}
+        aria-labelledby={ariaLabelledby}
+        aria-orientation={ariaOrientation}
+        aria-multiselectable={ariaMultiselectable}
         className={cx(
           `flex flex-col text-text-muted ${scrollable ? "flex-1" : "flex-none"} `,
           className
@@ -1035,6 +1034,11 @@ const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
         {...{
           [pressEventName]: handleClick,
         }}
+        ref={containerRef}
+        onDragOver={onDragOver}
+        onDragEnter={onDragEnter}
+        onDragLeave={onDragLeave}
+        onDrop={onDrop}
       >
         {withScrollable((scrollElementRef: HTMLDivElement | null) =>
           withSortable(
@@ -1121,15 +1125,15 @@ export namespace ListView {
   export const DragIndicator = ListViewDragIndicatorElement;
   export const rowHeight = ROW_HEIGHT;
   export const sectionHeaderLabelHeight = SECTION_HEADER_LABEL_HEIGHT;
-  export const calculateHeight = (
-    items: number,
-    headerCount: number,
-    headerVariant: ListViewSectionHeaderVariant
-  ) => {
+  export const calculateHeight = ({
+    menuItemsCount,
+    sectionHeaderCount,
+  }: {
+    menuItemsCount: number;
+    sectionHeaderCount: number;
+  }) => {
     return (
-      items * rowHeight +
-      headerCount *
-        (headerVariant === "label" ? sectionHeaderLabelHeight : rowHeight)
+      menuItemsCount * rowHeight + sectionHeaderCount * sectionHeaderLabelHeight
     );
   };
   export const normalizeDestinationIndex = normalizeListDestinationIndex;

package/src/components/Popover.tsx

@@ -1,5 +1,6 @@
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import React, { ComponentProps } from "react";
+import { cx } from "../utils/classNames";
 import { IconButton } from "./IconButton";
 
 const closeStyles: React.CSSProperties = {
@@ -28,6 +29,7 @@ interface Props
   sideOffset?: number;
   onClickClose?: () => void;
   showArrow?: boolean;
+  className?: string;
 }
 
 export function Popover({
@@ -46,13 +48,22 @@ export function Popover({
   onInteractOutside,
   onFocusOutside,
   onClickClose,
+  className,
 }: Props) {
   return (
     <PopoverPrimitive.Root open={open} onOpenChange={onOpenChange}>
       <PopoverPrimitive.Trigger asChild>{trigger}</PopoverPrimitive.Trigger>
       <PopoverPrimitive.Portal>
         <PopoverPrimitive.Content
-          className={`rounded font-[14px] bg-popover-background shadow-[0_2px_4px_rgba(0,0,0,0.2),0_0_12px_rgba(0,0,0,0.1)] max-h-[600px] overflow-y-auto text-text-muted z-[1000] ${variant === "large" ? "w-[680px]" : variant === "normal" ? "w-[240px]" : ""}`}
+          className={cx(
+            "rounded font-[14px] bg-popover-background shadow-[0_2px_4px_rgba(0,0,0,0.2),0_0_12px_rgba(0,0,0,0.1)] max-h-[600px] overflow-y-auto text-text-muted z-[1000]",
+            variant === "large"
+              ? "w-[680px]"
+              : variant === "normal"
+                ? "w-[240px]"
+                : "",
+            className
+          )}
           side={side}
           align="center"
           sideOffset={sideOffset}