@noya-app/noya-designsystem 0.1.48 → 0.1.49

package/src/components/Label.tsx

@@ -1,72 +1,9 @@
-import React, {
-  CSSProperties,
-  LabelHTMLAttributes,
-  forwardRef,
-  memo,
-  useMemo,
-} from "react";
+import React, { LabelHTMLAttributes, forwardRef, memo } from "react";
 import { cx } from "../utils/classNames";
-import { InputFieldSize } from "./InputField";
 
 export type LabelPosition = "inset" | "start" | "end" | "above";
 
-export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
-  /** @default start */
-  position?: Exclude<LabelPosition, "inset">;
-}
-
-export type InsetLabelProps = {
-  /** @default medium */
-  size?: InputFieldSize;
-  /** when used with an InputField.Root and label position is inset, it will add padding to the right of the label to account for the button */
-  buttonWidth?: number;
-} & LabelHTMLAttributes<HTMLLabelElement>;
-
-// apply to <label
-export const insetLabelTextStyles = `font-sans text-label uppercase text-text-disabled leading-[19px] font-bold text-[60%] truncate pointer-events-none text-right`;
-
-// InsetLabelContainer
-export const insetLabelStyles = `flex items-center absolute top-0 bottom-0 z-label`;
-const getInsetLabelPosition = ({
-  buttonWidth,
-}: {
-  buttonWidth?: number;
-}): CSSProperties => ({
-  right: `${6 + (buttonWidth ?? 0)}px`,
-});
-
-export const InsetLabel = memo(
-  forwardRef<HTMLLabelElement, InsetLabelProps>(function InsetLabel(
-    { children, buttonWidth, size = "medium", className, style, ...props },
-    ref
-  ) {
-    const styles = useMemo(
-      () => ({
-        ...getInsetLabelPosition({
-          buttonWidth,
-        }),
-        ...style,
-      }),
-      [buttonWidth, style]
-    );
-
-    return (
-      <label
-        ref={ref}
-        style={styles}
-        className={cx(
-          insetLabelStyles,
-          insetLabelTextStyles,
-          size === "small" ? "min-h-[19px]" : "min-h-[27px]",
-          className
-        )}
-        {...props}
-      >
-        {children}
-      </label>
-    );
-  })
-);
+export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {}
 
 const labelStyles = "flex items-center select-none z-label relative";
 const labelTextStyles =
@@ -74,7 +11,7 @@ const labelTextStyles =
 
 export const Label = memo(
   forwardRef<HTMLLabelElement, LabelProps>(function Label(
-    { className, position = "start", children, ...props },
+    { className, children, ...props },
     ref
   ) {
     return (
@@ -83,8 +20,7 @@ export const Label = memo(
         className={cx(
           labelStyles,
           labelTextStyles,
-          "text-left min-h-[27px]",
-          (position === "start" || position === "end") && "self-start",
+          "text-left min-h-input-height",
           className
         )}
         {...props}

package/src/components/LabeledField.tsx

@@ -91,7 +91,13 @@ export const LabeledField = memo(function LabeledField({
           <div className={labeledFieldClasses}>
             <Label
               htmlFor={fieldId}
-              position={labelPosition}
+              // we do this so presence avatars are aligned to the right when position is above
+              // and when start/end position with textarea it aligns label to the top of the field
+              className={
+                labelPosition === "start" || labelPosition === "end"
+                  ? "self-start"
+                  : undefined
+              }
               style={labelStyle}
               {...props}
             >

package/src/components/List.tsx

@@ -3,14 +3,16 @@ import {
   memoGeneric,
   useFileDropTarget,
 } from "@noya-app/react-utils";
-import React, { useImperativeHandle, useRef, useState } from "react";
+import React, { memo, useImperativeHandle, useRef, useState } from "react";
 import { cssVars } from "../theme";
 import { cx } from "../utils/classNames";
 import { updateSelection } from "../utils/selection";
 import { ActionMenu } from "./ActionMenu";
 import { CollectionProps, CollectionRef } from "./Collection";
-import { ListView } from "./ListView";
+import { GridViewSize } from "./Grid";
+import { ListView, ListViewItemInfo } from "./ListView";
 import { TreeView } from "./TreeView";
+
 const cssVarOverrides = {
   "--icon-selected": cssVars.colors.primary,
 };
@@ -42,8 +44,10 @@ export const List = memoGeneric(
       itemRoleDescription = "clickable item",
       detailPosition = "end",
       size = "medium",
+      thumbnailSize = "auto",
       testHoveredId,
       testRenamingId,
+      testShowDropIndicatorId,
       scrollable = false,
       acceptsDrop,
       onMoveItem,
@@ -52,6 +56,10 @@ export const List = memoGeneric(
       renamable,
       selectedIds = emptyArray,
       renderEmptyState,
+      sortable,
+      getDropTargetParentIndex,
+      getPlaceholder,
+      onClickItem,
     } = props;
 
     const [internalHoveredId, setHoveredId] = useState<string>();
@@ -116,19 +124,21 @@ export const List = memoGeneric(
         aria-orientation="vertical"
         aria-multiselectable={true}
         expandable={expandable}
-        sortable={expandable}
+        sortable={sortable}
         acceptsDrop={acceptsDrop}
         onMoveItem={onMoveItem}
         renderEmptyState={renderEmptyState}
+        getDropTargetParentIndex={getDropTargetParentIndex}
         {...dropTargetProps}
         renderItem={(
           item: T,
           _: number,
-          { isDragging }: { isDragging: boolean }
+          { isDragOverlay }: ListViewItemInfo
         ) => {
           const id = getId(item);
           const isDropdownOpen = dropdownOpenId === id;
-          const isHovered = (hoveredId === id || isDropdownOpen) && !isDragging;
+          const isHovered =
+            (hoveredId === id || isDropdownOpen) && !isDragOverlay;
           const expanded = getExpanded?.(item);
           const itemIsRenamable = getRenamable?.(item) ?? renamable;
           const isSelected = selectedIds.includes(id);
@@ -139,24 +149,25 @@ export const List = memoGeneric(
             item,
             selected: isSelected,
           });
+          const onOpenChange = (open: boolean) => {
+            setDropdownOpenId(open ? id : undefined);
+
+            if (open && !isSelected) {
+              handleSelect(id);
+            }
+          };
           const action =
             (isHovered || isSelected) &&
             !isRenaming &&
             (typeof renderAction === "function"
-              ? renderAction(item, isSelected)
+              ? renderAction({ item, selected: isSelected, onOpenChange })
               : renderAction === "menu" &&
                 menuItems && (
                   <ActionMenu
                     menuItems={menuItems}
                     onSelect={(action) => handleMenuAction(action, item)}
                     selected={isSelected}
-                    onOpenChange={(open) => {
-                      setDropdownOpenId(open ? id : undefined);
-
-                      if (open && !isSelected) {
-                        handleSelect(id);
-                      }
-                    }}
+                    onOpenChange={onOpenChange}
                   />
                 ));
 
@@ -171,14 +182,17 @@ export const List = memoGeneric(
               id={id}
               key={id}
               role="option"
-              sortable={expandable}
+              sortable={sortable}
               aria-roledescription={itemRoleDescription}
               aria-label={getName(item)}
               aria-selected={isSelected}
-              className={cx("cursor-pointer p-1 rounded")}
+              className={cx("cursor-pointer rounded px-1", pyMap[size])}
               backgroundColor={
                 isSelected ? cssVars.colors.primaryPastel : undefined
               }
+              testRelativeDropPosition={
+                testShowDropIndicatorId === id ? "inside" : undefined
+              }
               chevronClassName={cx(expandable && "relative left-2")}
               style={cssVarOverrides as React.CSSProperties}
               hovered={isHovered}
@@ -190,6 +204,7 @@ export const List = memoGeneric(
               }
               onPress={(e: ListView.ClickInfo) => {
                 handleSelect(id, e);
+                onClickItem?.(id);
               }}
               onDoubleClick={() => {
                 onDoubleClickItem?.(id);
@@ -215,44 +230,44 @@ export const List = memoGeneric(
                 setExpanded?.(item, !expanded);
               }}
             >
-              <div className="flex flex-1 items-center px-2 gap-3">
+              <div
+                className={cx("flex flex-1 items-center px-2", rowGapMap[size])}
+              >
                 {thumbnail && (
                   <div
                     className={cx(
                       "rounded overflow-hidden flex-none flex items-center justify-center",
-                      size === "medium" ? "w-8 h-8" : "w-16 h-16",
+                      thumbnailSize === "auto" && thumbnailSizeMap[size],
                       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 items-center min-h-input-height 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"
+                          placeholder={getPlaceholder?.(item) ?? "Enter name"}
+                          className={fontStyleMap[size]}
                           autoFocus={!isTestingRenaming}
                           onSubmitEditing={(value: string) => {
-                            if (value !== getName(item)) {
+                            if (value !== getName(item) && value !== "") {
                               onRename?.(item, value);
                             }
                             setRenamingId(undefined);
                           }}
+                          onKeyDown={(e: React.KeyboardEvent) => {
+                            e.stopPropagation();
+                          }}
                         />
                       ) : (
                         <ViewComponent.RowTitle
                           className={cx(
-                            "font-medium",
+                            fontStyleMap[size],
                             isSelected && "text-primary"
                           )}
                         >
@@ -260,30 +275,21 @@ export const List = memoGeneric(
                         </ViewComponent.RowTitle>
                       )}
                     </div>
-                    {end && (
-                      <div
-                        className={cx(
-                          "flex items-center gap-2",
-                          isSelected && "text-primary"
-                        )}
-                        tabIndex={-1}
-                      >
+                    {end && detailPosition === "end" && (
+                      <DetailContainer selected={isSelected}>
                         {end}
-                      </div>
+                      </DetailContainer>
                     )}
                   </div>
                   {below && (
-                    <div
-                      className={cx(
-                        "flex items-center",
-                        isSelected && "text-primary"
-                      )}
-                      tabIndex={-1}
-                    >
+                    <DetailContainer selected={isSelected}>
                       {below}
-                    </div>
+                    </DetailContainer>
                   )}
                 </div>
+                {end && detailPosition === "below" && (
+                  <DetailContainer selected={isSelected}>{end}</DetailContainer>
+                )}
               </div>
             </ViewComponent.Row>
           );
@@ -292,3 +298,56 @@ export const List = memoGeneric(
     );
   })
 );
+
+const DetailContainer = memo(function DetailContainer({
+  children,
+  selected,
+}: {
+  children: React.ReactNode;
+  selected: boolean;
+}) {
+  return (
+    <div
+      className={cx("flex items-center gap-2", selected && "text-primary")}
+      tabIndex={-1}
+    >
+      {children}
+    </div>
+  );
+});
+
+const pyMap: Record<GridViewSize, string> = {
+  xxs: "py-1",
+  xs: "py-1",
+  small: "py-1",
+  medium: "py-1",
+  large: "py-2",
+  xl: "py-3",
+};
+
+const thumbnailSizeMap: Record<GridViewSize, string> = {
+  xxs: "w-4 h-4",
+  xs: "w-4 h-4",
+  small: "w-6 h-6",
+  medium: "w-8 h-8",
+  large: "w-16 h-16",
+  xl: "w-24 h-24",
+};
+
+const rowGapMap: Record<GridViewSize, string> = {
+  xxs: "gap-3",
+  xs: "gap-3",
+  small: "gap-3",
+  medium: "gap-3",
+  large: "gap-3",
+  xl: "gap-4",
+};
+
+const fontStyleMap: Record<GridViewSize, string> = {
+  xxs: "font-medium",
+  xs: "font-medium",
+  small: "font-medium",
+  medium: "font-medium",
+  large: "font-medium",
+  xl: "font-medium text-heading4 text-text",
+};

package/src/components/ListView.tsx

@@ -25,7 +25,7 @@ import { WindowScroller, WindowScrollerChildProps } from "react-virtualized";
 import { ListChildComponentProps, VariableSizeList } from "react-window";
 import { mergeEventHandlers } from "../hooks/mergeEventHandlers";
 import { useHover } from "../hooks/useHover";
-import { cssVars } from "../theme";
+import { cssVars, INPUT_HEIGHT } from "../theme";
 import { cx } from "../utils/classNames";
 import { ContextMenu } from "./ContextMenu";
 import { InputField } from "./InputField";
@@ -33,9 +33,10 @@ import { MenuItem } from "./internal/Menu";
 import { ScrollArea } from "./ScrollArea";
 import {
   DropValidator,
-  normalizeListDestinationIndex,
+  normalizeListTargetIndex,
   RelativeDropPosition,
   Sortable,
+  type SortableItemContextProps,
 } from "./Sortable";
 import { Spacer } from "./Spacer";
 
@@ -43,7 +44,7 @@ export type ListRowMarginType = "none" | "top" | "bottom" | "vertical";
 export type ListRowPosition = "only" | "first" | "middle" | "last";
 
 const ROW_HEIGHT = 31;
-const SECTION_HEADER_LABEL_HEIGHT = 27;
+const SECTION_HEADER_LABEL_HEIGHT = INPUT_HEIGHT;
 
 type ListColorScheme = "primary" | "secondary";
 
@@ -71,7 +72,7 @@ type ListRowContextValue = {
 // and the dragged row doesn't have a ListRowContextValue.
 type ListViewDraggingContextValue = {
   indentation: number;
-  isDragging?: boolean;
+  isDragOverlay?: boolean;
 };
 
 const ListViewDraggingContext = createContext<ListViewDraggingContextValue>({
@@ -127,6 +128,7 @@ export interface EditableRowProps {
   autoFocus: boolean;
   placeholder?: string;
   className?: string;
+  onKeyDown?: (e: React.KeyboardEvent) => void;
 }
 
 function ListViewEditableRowTitle({
@@ -135,6 +137,7 @@ function ListViewEditableRowTitle({
   autoFocus,
   placeholder,
   className,
+  onKeyDown,
 }: EditableRowProps) {
   const inputRef = useRef<HTMLInputElement | null>(null);
 
@@ -161,6 +164,7 @@ function ListViewEditableRowTitle({
       onSubmit={onSubmitEditing}
       allowSubmittingWithSameValue
       className={cx("-mx-1.5 -my-1 bg-listview-editing-background", className)}
+      onKeyDown={onKeyDown}
     />
   );
 }
@@ -266,9 +270,10 @@ const RowContainer = forwardRef<
               borderBottomRightRadius: "0px",
               borderBottomLeftRadius: "0px",
             }),
-          ...($hovered && {
-            boxShadow: `0 0 0 1px ${cssVars.colors[$colorScheme]} inset`,
-          }),
+          ...($hovered &&
+            !$selected && {
+              background: cssVars.colors.listViewHoverBackground,
+            }),
           ...($showsActiveState && {
             "&:active": {
               backgroundColor: $selected
@@ -301,7 +306,7 @@ const RowContainer = forwardRef<
 const ListViewDragIndicatorElement = forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement> & {
-    $relativeDropPosition: RelativeDropPosition;
+    $relativeDropPosition?: RelativeDropPosition;
     $gap: number;
     $offsetLeft: number;
     $colorScheme: ListColorScheme;
@@ -398,13 +403,16 @@ interface ListViewRowProps<MenuItemType extends string = string> {
   className?: string;
   dragIndicatorStyle?:
     | CSSProperties
-    | ((props: {
-        depth: number;
-        indentation: number;
-        position: RelativeDropPosition;
-      }) => CSSProperties);
+    | ((props: DragIndicatorStyleProps) => CSSProperties);
+  testRelativeDropPosition?: RelativeDropPosition;
 }
 
+export type DragIndicatorStyleProps = {
+  depth: number;
+  indentation: number;
+  position: RelativeDropPosition;
+};
+
 const ListViewRow = forwardRefGeneric(function ListViewRow<
   MenuItemType extends string,
 >(
@@ -432,6 +440,7 @@ const ListViewRow = forwardRefGeneric(function ListViewRow<
     style,
     dragIndicatorStyle,
     className,
+    testRelativeDropPosition,
   }: ListViewRowProps<MenuItemType>,
   forwardedRef: ForwardedRef<HTMLElement>
 ) {
@@ -451,7 +460,7 @@ const ListViewRow = forwardRefGeneric(function ListViewRow<
   const { hoverProps } = useHover({
     onHoverChange,
   });
-  const { indentation, isDragging } = useContext(ListViewDraggingContext);
+  const { indentation, isDragOverlay } = useContext(ListViewDraggingContext);
 
   const handlePress = useCallback(
     (event: React.MouseEvent) => {
@@ -478,7 +487,7 @@ const ListViewRow = forwardRefGeneric(function ListViewRow<
   );
 
   const mergedStyle = useMemo(() => {
-    return isDragging
+    return isDragOverlay
       ? {
           // TODO: Where do these offsets actually come from?
           transform: `translate3d(-36px, -6px, 0)`,
@@ -486,11 +495,11 @@ const ListViewRow = forwardRefGeneric(function ListViewRow<
           ...style,
         }
       : style;
-  }, [isDragging, style]);
+  }, [isDragOverlay, style]);
 
   const renderContent = (
     {
-      relativeDropPosition,
+      relativeDropPosition: relativeDropPositionProp,
       ...renderProps
     }: React.ComponentProps<typeof RowContainer> & {
       relativeDropPosition?: RelativeDropPosition;
@@ -498,6 +507,8 @@ const ListViewRow = forwardRefGeneric(function ListViewRow<
     ref: Ref<HTMLElement>
   ) => {
     const Component = RowContainer;
+    const relativeDropPosition =
+      testRelativeDropPosition ?? relativeDropPositionProp;
 
     const element = (
       <Component
@@ -520,7 +531,7 @@ const ListViewRow = forwardRefGeneric(function ListViewRow<
         $selectedPosition={selectedPosition}
         $showsActiveState={pressEventName === "onClick"}
         aria-selected={selected}
-        $divider={!isDragging && divider}
+        $divider={!isDragOverlay && divider}
         onKeyDown={onKeyDown}
         style={mergedStyle}
         {...(renderProps as Partial<React.ComponentProps<typeof RowContainer>>)}
@@ -534,9 +545,10 @@ const ListViewRow = forwardRefGeneric(function ListViewRow<
       >
         {relativeDropPosition && (
           <ListViewDragIndicatorElement
+            key={relativeDropPosition}
             $colorScheme={colorScheme}
             $relativeDropPosition={relativeDropPosition}
-            $offsetLeft={33 + depth * indentation}
+            $offsetLeft={depth * indentation}
             $gap={listGap + (divider ? 1 : 0)}
             style={
               typeof dragIndicatorStyle === "function"
@@ -724,8 +736,9 @@ const VirtualizedList = memo(
  * Root
  * ------------------------------------------------------------------------- */
 
-type ListViewItemInfo = {
-  isDragging: boolean;
+export type ListViewItemInfo = {
+  isDragOverlay: boolean;
+  activeDragIndex?: number;
 };
 
 type ChildrenProps = {
@@ -762,7 +775,7 @@ export type ListViewRootProps = {
   expandable?: boolean;
   onMoveItem?: (
     sourceIndex: number,
-    destinationIndex: number,
+    targetIndex: number,
     position: RelativeDropPosition
   ) => void;
   indentation?: number;
@@ -779,6 +792,7 @@ export type ListViewRootProps = {
   onDragLeave?: React.DragEventHandler<HTMLDivElement>;
   onDrop?: React.DragEventHandler<HTMLDivElement>;
   renderEmptyState?: () => ReactNode;
+  getDropTargetParentIndex?: SortableItemContextProps["getDropTargetParentIndex"];
 };
 
 const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
@@ -813,6 +827,7 @@ const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
     onDragLeave,
     onDrop,
     renderEmptyState,
+    getDropTargetParentIndex,
   }: RenderProps<T> & ListViewRootProps,
   forwardedRef: ForwardedRef<IVirtualizedList>
 ) {
@@ -834,7 +849,7 @@ const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
   );
 
   const renderChild = useCallback(
-    (index: number) => renderItem(data[index], index, { isDragging: false }),
+    (index: number) => renderItem(data[index], index, { isDragOverlay: false }),
     [data, renderItem]
   );
 
@@ -949,7 +964,7 @@ const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
   );
 
   const draggingContextOverlayValue = useMemo(
-    () => ({ indentation, isDragging: true }),
+    (): ListViewDraggingContextValue => ({ indentation, isDragOverlay: true }),
     [indentation]
   );
 
@@ -957,7 +972,7 @@ const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
     (index: number) => (
       <div style={{ opacity: 0.25 }}>
         <ListViewDraggingContext.Provider value={draggingContextOverlayValue}>
-          {renderItem(data[index], index, { isDragging: true })}
+          {renderItem(data[index], index, { isDragOverlay: true })}
         </ListViewDraggingContext.Provider>
       </div>
     ),
@@ -989,6 +1004,7 @@ const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
         keys={ids}
         renderOverlay={renderOverlay}
         acceptsDrop={acceptsDrop}
+        getDropTargetParentIndex={getDropTargetParentIndex}
       >
         {children}
       </Sortable.Root>
@@ -1140,5 +1156,5 @@ export namespace ListView {
       menuItemsCount * rowHeight + sectionHeaderCount * sectionHeaderLabelHeight
     );
   };
-  export const normalizeDestinationIndex = normalizeListDestinationIndex;
+  export const normalizeTargetIndex = normalizeListTargetIndex;
 }

package/src/components/MediaThumbnail.tsx

@@ -43,18 +43,18 @@ const getColors = (colorScheme: ColorScheme, selected: boolean) => {
     case "primary":
       return {
         icon: cssVars.colors.primary,
-        background: cssVars.colors.inputBackground,
+        background: cssVars.colors.listViewThumbnailBackground,
       };
     case "warning":
       return {
         icon: cssVars.colors.warning,
-        background: cssVars.colors.inputBackground,
+        background: cssVars.colors.listViewThumbnailBackground,
       };
     case "icon":
     default:
       return {
         icon: cssVars.colors.icon,
-        background: cssVars.colors.inputBackground,
+        background: cssVars.colors.listViewThumbnailBackground,
       };
   }
 };