@noya-app/noya-designsystem 0.1.64 → 0.1.65

package/src/components/listView/ListViewRow.tsx

@@ -0,0 +1,475 @@
+"use client";
+
+import { forwardRefGeneric, memoGeneric } from "@noya-app/react-utils";
+import { composeRefs } from "@radix-ui/react-compose-refs";
+import React, {
+  CSSProperties,
+  ForwardedRef,
+  forwardRef,
+  ReactNode,
+  Ref,
+  useCallback,
+  useContext,
+  useMemo,
+} from "react";
+import { mergeEventHandlers } from "../../hooks/mergeEventHandlers";
+import { useHover } from "../../hooks/useHover";
+import { cssVars } from "../../theme";
+import { cx } from "../../utils/classNames";
+import { ContextMenu } from "../ContextMenu";
+import { MenuItem } from "../internal/Menu";
+import { Sortable } from "../sorting/Sortable";
+import { RelativeDropPosition } from "../sorting/sorting";
+import { Spacer } from "../Spacer";
+import {
+  ListRowContext,
+  ListViewContext,
+  ListViewDraggingContext,
+} from "./ListViewContexts";
+import {
+  ListColorScheme,
+  ListRowMarginType,
+  ListRowPosition,
+  ListViewSectionHeaderVariant,
+  ListViewVariant,
+} from "./types";
+
+/* ----------------------------------------------------------------------------
+ * Row
+ * ------------------------------------------------------------------------- */
+
+const RowContainer = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & {
+    $marginType: ListRowMarginType;
+    $selected: boolean;
+    $selectedPosition: ListRowPosition;
+    $disabled: boolean;
+    $hovered: boolean;
+    $variant: ListViewVariant;
+    $divider: boolean;
+    $isSectionHeader: boolean;
+    $showsActiveState: boolean;
+    $sectionHeaderVariant: ListViewSectionHeaderVariant;
+    $colorScheme: ListColorScheme;
+    $backgroundColor?: CSSProperties["backgroundColor"];
+    $clickable?: boolean;
+    href?: string;
+    as?: React.ElementType;
+  }
+>(
+  (
+    {
+      as: Component = "div",
+      href,
+      className,
+      $marginType,
+      $selected,
+      $selectedPosition,
+      $disabled,
+      $hovered,
+      $variant,
+      $divider,
+      $isSectionHeader,
+      $showsActiveState,
+      $sectionHeaderVariant,
+      $colorScheme,
+      $backgroundColor,
+      style,
+      $clickable,
+      "aria-describedby": _, // Causes hydration warning
+      role,
+      "aria-label": ariaLabel,
+      "aria-roledescription": ariaRoleDescription,
+      "aria-selected": ariaSelected,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <Component
+        ref={ref}
+        href={href}
+        role={role}
+        aria-label={ariaLabel}
+        aria-roledescription={ariaRoleDescription}
+        aria-selected={ariaSelected ?? $selected}
+        className={cx(
+          $isSectionHeader && $sectionHeaderVariant === "label"
+            ? "n-font-sans n-text-label n-uppercase n-leading-3 n-font-bold n-text-text-muted"
+            : "n-font-sans n-text-heading5 n-font-normal",
+          !$isSectionHeader &&
+            $selected &&
+            "n-text-selected-list-item-text active:n-bg-selected-list-item-background",
+          !$isSectionHeader && $disabled && "n-text-text-disabled",
+          $clickable ? "n-cursor-pointer" : "n-cursor-default",
+          $isSectionHeader && "n-bg-listview-raised-background",
+          "n-flex n-flex-[0_0_auto] n-select-none n-items-center n-relative",
+          className
+        )}
+        style={{
+          ...($variant !== "bare" && {
+            paddingTop: $selected ? "4px" : "6px",
+            paddingRight: $selected ? "8px" : "12px",
+            paddingBottom: $selected ? "4px" : "6px",
+            paddingLeft: $selected ? "8px" : "12px",
+            borderRadius: $selected ? "4px" : "",
+            marginLeft: $selected ? "4px" : "",
+            marginRight: $selected ? "4px" : "",
+            marginTop: $selected ? "2px" : "",
+            marginBottom: $selected ? "2px" : "",
+          }),
+          ...($selected &&
+            !$isSectionHeader && {
+              backgroundColor:
+                $colorScheme === "primary"
+                  ? cssVars.colors["selectedListItemBackground"]
+                  : cssVars.colors[$colorScheme],
+            }),
+          ...($selected &&
+            !$isSectionHeader &&
+            ($selectedPosition === "middle" ||
+              $selectedPosition === "last") && {
+              borderTopRightRadius: "0px",
+              borderTopLeftRadius: "0px",
+            }),
+          ...($selected &&
+            !$isSectionHeader &&
+            ($selectedPosition === "middle" ||
+              $selectedPosition === "first") && {
+              borderBottomRightRadius: "0px",
+              borderBottomLeftRadius: "0px",
+            }),
+          ...($hovered &&
+            !$selected && {
+              background: cssVars.colors.listViewHoverBackground,
+            }),
+          // ...($showsActiveState && {
+          //   "&:active": {
+          //     backgroundColor: $selected
+          //       ? $colorScheme === "secondary"
+          //         ? cssVars.colors.secondaryLight
+          //         : cssVars.colors.selectedListItemBackground
+          //       : cssVars.colors.activeBackground,
+          //   },
+          // }),
+          ...($divider && {
+            borderBottom: `1px solid ${cssVars.colors.dividerSubtle}`,
+          }),
+          // ...($backgroundColor && {
+          //   backgroundColor: $backgroundColor,
+          //   "&:hover": {
+          //     backgroundColor: $backgroundColor,
+          //   },
+          //   "&:active": {
+          //     backgroundColor: $backgroundColor,
+          //   },
+          // }),
+          ...style,
+        }}
+        {...props}
+      />
+    );
+  }
+);
+
+export const ListViewDragIndicatorElement = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & {
+    $relativeDropPosition?: RelativeDropPosition;
+    $gap: number;
+    $offsetLeft: number;
+    $colorScheme: ListColorScheme;
+  }
+>(
+  (
+    {
+      className,
+      $relativeDropPosition,
+      $offsetLeft,
+      $colorScheme,
+      $gap,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        {...props}
+        className={className}
+        style={{
+          zIndex: 1000,
+          position: "absolute",
+          borderRadius: "3px",
+          pointerEvents: "none",
+          ...($relativeDropPosition === "inside"
+            ? {
+                inset: 2,
+                boxShadow: `0 0 0 1px ${cssVars.colors.sidebarBackground}, 0 0 0 3px ${
+                  $colorScheme === "secondary"
+                    ? cssVars.colors.secondary
+                    : cssVars.colors.dragOutline
+                }`,
+              }
+            : {
+                top:
+                  $relativeDropPosition === "above"
+                    ? -(3 + $gap / 2)
+                    : undefined,
+                bottom:
+                  $relativeDropPosition === "below"
+                    ? -(3 + $gap / 2)
+                    : undefined,
+                left: $offsetLeft,
+                right: 0,
+                height: 6,
+                backgroundColor:
+                  $colorScheme === "secondary"
+                    ? cssVars.colors.secondary
+                    : cssVars.colors.dragOutline,
+                border: `2px solid white`,
+                boxShadow: "0 0 2px rgba(0,0,0,0.5)",
+              }),
+          ...style,
+        }}
+      />
+    );
+  }
+);
+
+export interface ListViewClickInfo {
+  shiftKey: boolean;
+  altKey: boolean;
+  metaKey: boolean;
+  ctrlKey: boolean;
+  stopPropagation: () => void;
+}
+
+export interface ListViewRowProps<MenuItemType extends string = string> {
+  id?: string;
+  tabIndex?: number;
+  role?: string;
+  selected?: boolean;
+  /** @default 0 */
+  depth?: number;
+  disabled?: boolean;
+  // draggable?: boolean;
+  hovered?: boolean;
+  sortable?: boolean;
+  backgroundColor?: CSSProperties["backgroundColor"];
+  onPress?: (info: ListViewClickInfo) => void;
+  onDoubleClick?: () => void;
+  onHoverChange?: (isHovering: boolean) => void;
+  children?: ReactNode;
+  isSectionHeader?: boolean;
+  menuItems?: MenuItem<MenuItemType>[];
+  onSelectMenuItem?: (value: MenuItemType) => void;
+  onContextMenu?: () => void;
+  onMenuOpenChange?: (isOpen: boolean) => void;
+  onKeyDown?: (event: React.KeyboardEvent) => void;
+  style?: CSSProperties;
+  className?: string;
+  dragIndicatorStyle?:
+    | CSSProperties
+    | ((props: DragIndicatorStyleProps) => CSSProperties);
+  testRelativeDropPosition?: RelativeDropPosition;
+  href?: string;
+  as?: React.ElementType;
+}
+
+export type DragIndicatorStyleProps = {
+  depth: number;
+  indentation: number;
+  position: RelativeDropPosition;
+};
+
+export const ListViewRow = memoGeneric(
+  forwardRefGeneric(function ListViewRow<MenuItemType extends string>(
+    {
+      id,
+      tabIndex = 0,
+      role,
+      backgroundColor,
+      selected = false,
+      depth = 0,
+      disabled = false,
+      hovered = false,
+      isSectionHeader = false,
+      sortable: overrideSortable,
+      onPress,
+      onDoubleClick,
+      onHoverChange,
+      children,
+      menuItems,
+      onContextMenu,
+      onSelectMenuItem,
+      onMenuOpenChange,
+      onKeyDown,
+      style,
+      dragIndicatorStyle,
+      className,
+      testRelativeDropPosition,
+      href,
+      as,
+    }: ListViewRowProps<MenuItemType>,
+    forwardedRef: ForwardedRef<HTMLElement>
+  ) {
+    depth = Math.max(0, depth);
+
+    const {
+      pressEventName,
+      colorScheme,
+      gap: listGap,
+      sectionHeaderVariant,
+      variant,
+      divider,
+      sortable,
+      indentation,
+    } = useContext(ListViewContext);
+
+    const { marginType, selectedPosition } = useContext(ListRowContext);
+    const { hoverProps } = useHover({
+      onHoverChange,
+    });
+    const { isDragOverlay } = useContext(ListViewDraggingContext);
+
+    const handlePress = useCallback(
+      (event: React.MouseEvent) => {
+        // We use preventDefault as a hack to mark this event as handled. We check for
+        // this in the ListView.Root. We can't stopPropagation here or existing ContextMenus
+        // won't close (onPointerDownOutside won't fire).
+        // event.preventDefault();
+
+        // We only want to handle left clicks
+        if (event.button !== 0) return;
+
+        onPress?.(event);
+      },
+      [onPress]
+    );
+
+    const handleDoubleClick = useCallback(
+      (event: React.MouseEvent) => {
+        event.stopPropagation();
+
+        onDoubleClick?.();
+      },
+      [onDoubleClick]
+    );
+
+    const mergedStyle = useMemo(() => {
+      return isDragOverlay
+        ? {
+            // TODO: Where do these offsets actually come from?
+            transform: `translate3d(-36px, -6px, 0)`,
+            width: `calc(100% + 48px)`,
+            ...style,
+          }
+        : style;
+    }, [isDragOverlay, style]);
+
+    const renderContent = (
+      renderProps: React.ComponentProps<typeof RowContainer>,
+      ref: Ref<HTMLElement>,
+      relativeDropPositionProp: RelativeDropPosition | undefined
+    ) => {
+      const Component = RowContainer;
+      const relativeDropPosition =
+        testRelativeDropPosition ?? relativeDropPositionProp;
+
+      const element = (
+        <Component
+          as={as}
+          href={href}
+          ref={ref as any}
+          $colorScheme={colorScheme}
+          onContextMenu={onContextMenu}
+          $isSectionHeader={isSectionHeader}
+          id={id}
+          role={role}
+          $backgroundColor={backgroundColor}
+          {...hoverProps}
+          onDoubleClick={handleDoubleClick}
+          $marginType={marginType ?? "none"}
+          $disabled={disabled}
+          $hovered={hovered}
+          $selected={selected}
+          $variant={variant}
+          $sectionHeaderVariant={sectionHeaderVariant}
+          $selectedPosition={selectedPosition}
+          $showsActiveState={pressEventName === "onClick"}
+          aria-selected={selected}
+          $divider={!isDragOverlay && divider}
+          onKeyDown={onKeyDown}
+          style={mergedStyle}
+          {...(renderProps as Partial<
+            React.ComponentProps<typeof RowContainer>
+          >)}
+          {...mergeEventHandlers(
+            { onPointerDown: renderProps.onPointerDown! },
+            { [pressEventName]: handlePress }
+          )}
+          tabIndex={tabIndex}
+          className={className}
+          $clickable={!!onPress}
+        >
+          {relativeDropPosition && (
+            <ListViewDragIndicatorElement
+              key={relativeDropPosition}
+              $colorScheme={colorScheme}
+              $relativeDropPosition={relativeDropPosition}
+              $offsetLeft={depth * indentation}
+              $gap={listGap + (divider ? 1 : 0)}
+              style={
+                typeof dragIndicatorStyle === "function"
+                  ? dragIndicatorStyle({
+                      depth,
+                      indentation,
+                      position: relativeDropPosition,
+                    })
+                  : dragIndicatorStyle
+              }
+            />
+          )}
+          {depth > 0 && <Spacer.Horizontal size={depth * indentation} />}
+          {children}
+        </Component>
+      );
+
+      if (menuItems && onSelectMenuItem) {
+        return (
+          <ContextMenu<MenuItemType>
+            items={menuItems}
+            onSelect={onSelectMenuItem}
+            onOpenChange={onMenuOpenChange}
+          >
+            {element}
+          </ContextMenu>
+        );
+      }
+
+      return element;
+    };
+
+    if (sortable && id) {
+      return (
+        <Sortable.Item<HTMLElement>
+          id={id}
+          disabled={overrideSortable === false}
+        >
+          {({ ref: sortableRef, ...sortableProps }, { relativeDropPosition }) =>
+            renderContent(
+              sortableProps as any,
+              composeRefs(sortableRef, forwardedRef),
+              relativeDropPosition
+            )
+          }
+        </Sortable.Item>
+      );
+    }
+
+    return renderContent({} as any, forwardedRef, undefined);
+  })
+);

package/src/components/listView/ListViewRowTitle.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import React, { HTMLAttributes, memo } from "react";
+import { cx } from "../../utils/classNames";
+
+export const ListViewRowTitle = memo(function ListViewRowTitle({
+  className,
+  ...props
+}: {
+  className?: string;
+} & HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <span
+      className={cx(
+        "n-flex-1 n-overflow-hidden n-text-ellipsis n-whitespace-pre",
+        className
+      )}
+      {...props}
+    />
+  );
+});

package/src/components/listView/types.ts

@@ -0,0 +1,11 @@
+export type ListRowMarginType = "none" | "top" | "bottom" | "vertical";
+
+export type ListRowPosition = "only" | "first" | "middle" | "last";
+
+export type ListColorScheme = "primary" | "secondary";
+
+export type PressEventName = "onClick" | "onPointerDown";
+
+export type ListViewVariant = "normal" | "bare";
+
+export type ListViewSectionHeaderVariant = "normal" | "label";

package/src/components/pipeline/PipelineResultLayout.tsx

@@ -5,19 +5,19 @@ import { Small } from "../Text";
 
 export const PipelineResultLink = ({ url }: { url: string }) => {
   return (
-    <div className="flex flex-col gap-0.5">
+    <div className="n-flex n-flex-col gap-0.5">
       {/* <Label position="start">{name}</Label> */}
       <a
         href={url}
         target="_blank"
         rel="noopener noreferrer"
-        className="flex text-primary hover:opacity-80 border border-divider rounded-md"
+        className="n-flex n-text-primary hover:n-opacity-80 n-border n-border-divider n-rounded-md"
       >
-        <div className="flex gap-1 items-center p-2">
-          <Link1Icon className="w-[15px] h-[15px] flex-shrink-0" />
+        <div className="n-flex n-gap-1 n-items-center n-p-2">
+          <Link1Icon className="n-w-[15px] n-h-[15px] n-flex-shrink-0" />
         </div>
         <DividerVertical />
-        <Small className="truncate p-2 flex-1">{url}</Small>
+        <Small className="n-truncate n-p-2 n-flex-1">{url}</Small>
       </a>
     </div>
   );
@@ -28,7 +28,7 @@ export const PipelineResultLayout = ({
 }: {
   children: React.ReactNode;
 }) => {
-  return <div className="flex flex-col gap-2">{children}</div>;
+  return <div className="n-flex n-flex-col n-gap-2">{children}</div>;
 };
 
 export function getPipelineResultLink(

package/src/components/sorting/DragRegistration.tsx

@@ -10,7 +10,7 @@ import {
 import { ClientRect, UniqueIdentifier } from "@dnd-kit/core";
 import { AcceptsFromList } from "./sorting";
 
-import { Point } from "@noya-app/noya-geometry";
+import { Insets, Point } from "@noya-app/noya-geometry";
 import React from "react";
 
 export type GetDropIndicatorParameters = {
@@ -33,6 +33,7 @@ export interface RegisteredList {
     parameters: GetDropIndicatorParameters,
     acceptsDrop: AcceptsDrop
   ) => RelativeDropPosition | undefined;
+  itemHitSlop?: Insets;
 }
 
 export interface DragRegistrationContextType {