@noya-app/noya-designsystem 0.1.48 → 0.1.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.48",
+  "version": "0.1.49",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -24,7 +24,7 @@
     "@dnd-kit/sortable": "10.0.0",
     "@noya-app/noya-colorpicker": "0.1.18",
     "@noya-app/noya-utils": "0.1.4",
-    "@noya-app/noya-geometry": "0.1.8",
+    "@noya-app/noya-geometry": "0.1.9",
     "@noya-app/noya-icons": "0.1.6",
     "@noya-app/noya-keymap": "0.1.3",
     "@radix-ui/primitive": "^1.0.0",
@@ -50,6 +50,7 @@
     "vscode-fuzzy-scorer": "^0.0.4"
   },
   "devDependencies": {
+    "@tailwindcss/container-queries": "^0.1.1",
     "@types/react": "*",
     "@types/react-dom": "*",
     "@types/react-virtualized": "^9.21.21",

package/src/__tests__/validateDropIndicator.test.ts

@@ -49,7 +49,7 @@ describe("defaultAcceptsDrop", () => {
 describe("validateDropIndicator", () => {
   const mockAcceptsDrop = (
     sourceIndex: number,
-    destinationIndex: number,
+    targetIndex: number,
     position: "above" | "below" | "inside"
   ) => {
     // Mock that only allows dropping inside
@@ -59,7 +59,7 @@ describe("validateDropIndicator", () => {
 
   const mockAcceptsDropAboveBelow = (
     sourceIndex: number,
-    destinationIndex: number,
+    targetIndex: number,
     position: "above" | "below" | "inside"
   ) => {
     // Mock that only allows dropping above/below
@@ -69,7 +69,7 @@ describe("validateDropIndicator", () => {
 
   const mockAcceptsAll = (
     sourceIndex: number,
-    destinationIndex: number,
+    targetIndex: number,
     position: "above" | "below" | "inside"
   ) => {
     // Mock that allows all drop positions
@@ -78,7 +78,7 @@ describe("validateDropIndicator", () => {
 
   const mockAcceptsAboveAndInside = (
     sourceIndex: number,
-    destinationIndex: number,
+    targetIndex: number,
     position: "above" | "below" | "inside"
   ) => {
     // Mock that allows dropping above and inside, but not below

package/src/components/ActionMenu.tsx

@@ -10,19 +10,29 @@ type ActionMenuProps<TMenu extends string> = {
   onSelect: (action: TMenu) => void;
   selected: boolean;
   onOpenChange: (open: boolean) => void;
+  className?: string;
+  style?: React.CSSProperties;
 };
 
 export const ActionMenu = memoGeneric(function ActionMenu<
   TMenu extends string,
->({ menuItems, onSelect, selected, onOpenChange }: ActionMenuProps<TMenu>) {
-  const style = useMemo(() => {
+>({
+  menuItems,
+  onSelect,
+  selected,
+  onOpenChange,
+  className,
+  style,
+}: ActionMenuProps<TMenu>) {
+  const internalStyle = useMemo(() => {
     return {
       backgroundColor: selected
         ? cssVars.colors.primaryPastel
         : cssVars.colors.inputBackground,
       padding: "4px",
+      ...style,
     };
-  }, [selected]);
+  }, [selected, style]);
 
   return (
     <DropdownMenu
@@ -31,7 +41,8 @@ export const ActionMenu = memoGeneric(function ActionMenu<
       onOpenChange={onOpenChange}
     >
       <IconButton
-        style={style}
+        style={internalStyle}
+        className={className}
         iconName="DotsVerticalIcon"
         color={selected ? cssVars.colors.primary : undefined}
       />

package/src/components/BaseToolbar.tsx

@@ -21,7 +21,7 @@ export function BaseToolbar({
   return (
     <div className="flex flex-col">
       <div
-        className="flex items-center pr-2.5 bg-sidebar-background flex-none relative"
+        className="flex items-center pr-2.5 bg-sidebar-background flex-none relative @container/toolbar"
         style={{
           flex: `0 0 ${cssVars.spacing.toolbarHeight}`,
         }}
@@ -39,7 +39,7 @@ export function BaseToolbar({
             <Spacer.Horizontal size={10} />
           </>
         )}
-        <div className="flex items-center justify-center text-text-muted pointer-events-none lg:absolute inset-0">
+        <div className="flex items-center justify-center text-text-muted pointer-events-none @2xl/toolbar:absolute inset-0">
           <div
             style={{
               display: "flex",

package/src/components/Checkbox.tsx

@@ -58,8 +58,8 @@ export const Checkbox = React.memo(
           className={`
             absolute 
             inset-0
-            h-[27px] 
-            w-[27px] 
+            h-input-height 
+            w-input-height 
             pointer-events-none
             stroke-white
             opacity-0

package/src/components/Chip.tsx

@@ -52,16 +52,16 @@ const ICON_BASE_STYLES = "relative opacity-50 cursor-pointer hover:opacity-85";
 
 const ICON_SIZE_STYLES = {
   large: {
-    add: "ml-[-2px] mr-[2px] -top-[1px] scale-75",
-    delete: "mr-[-2px] ml-[2px] scale-75",
+    add: "ml-[-2px] mr-[2px] -top-[1px] scale-[0.75]",
+    delete: "mr-[-2px] ml-[2px] scale-[0.75]",
   },
   medium: {
-    add: "ml-[-2px] mr-[-2px] scale-60",
-    delete: "mr-[-2px] scale-60",
+    add: "ml-[-2px] mr-[-2px] scale-[0.60]",
+    delete: "mr-[-2px] scale-[0.60]",
   },
   small: {
-    add: "ml-[-2px] mr-[-2px] scale-60",
-    delete: "mr-[-2px] scale-60",
+    add: "ml-[-2px] mr-[-2px] scale-[0.60]",
+    delete: "mr-[-2px] scale-[0.60]",
   },
 } as const;
 
@@ -82,6 +82,7 @@ export interface ChipProps {
   onHoverDeleteChange?: (hovering: boolean) => void;
   style?: React.CSSProperties;
   tabIndex?: number;
+  role?: string;
 }
 
 export const Chip = memo(

package/src/components/Collection.tsx

@@ -7,6 +7,8 @@ import { List } from "./List";
 
 export type CollectionViewType = "grid" | "list";
 
+export type CollectionThumbnailSize = "auto" | "custom";
+
 export type CollectionRef = {
   editName: (id: string) => void;
 };
@@ -16,12 +18,19 @@ export type CollectionThumbnailProps<T> = {
   selected: boolean;
 };
 
+export type CollectionRenderActionProps<T> = {
+  item: T;
+  selected: boolean;
+  onOpenChange: (open: boolean) => void;
+};
+
 export interface CollectionProps<T, M extends string = string> {
   className?: string;
   items: T[];
   getId: (item: T) => string;
   getName: (item: T) => string;
   getExpanded?: (item: T) => boolean | undefined;
+  getPlaceholder?: (item: T) => string;
   /**
    * Whether directories should be expandable.
    * @default true
@@ -39,7 +48,9 @@ export interface CollectionProps<T, M extends string = string> {
     item,
     selected,
   }: CollectionThumbnailProps<T>) => React.ReactNode;
-  renderAction?: "menu" | ((item: T, selected: boolean) => React.ReactNode);
+  renderAction?:
+    | "menu"
+    | ((props: CollectionRenderActionProps<T>) => React.ReactNode);
   renderDetail?: (item: T, selected: boolean) => React.ReactNode;
   /** Callback when selection changes. If not provided, selection will be disabled. */
   onSelectionChange?: (
@@ -52,13 +63,18 @@ export interface CollectionProps<T, M extends string = string> {
   detailPosition?: "end" | "below";
   /** Size of the list items. Defaults to 'medium'. */
   size?: GridViewSize;
+  /** Size of the thumbnail. Defaults to 'auto', which will be based on the size prop. */
+  thumbnailSize?: CollectionThumbnailSize;
   /** For testing: Override the hover state with a specific item ID */
   testHoveredId?: string;
   /** For testing: Override the renaming state with a specific item ID */
   testRenamingId?: string;
+  /** For testing: Override the drop indicator state with a specific item ID */
+  testShowDropIndicatorId?: string;
   setExpanded?: (item: T, expanded: boolean) => void;
   acceptsDrop?: ListViewRootProps["acceptsDrop"];
   onMoveItem?: ListViewRootProps["onMoveItem"];
+  getDropTargetParentIndex?: ListViewRootProps["getDropTargetParentIndex"];
   getDepth?: (item: T) => number;
   onFilesDrop?: (event: React.DragEvent<Element>) => void;
   getRenamable?: (item: T) => boolean;
@@ -68,6 +84,8 @@ export interface CollectionProps<T, M extends string = string> {
   onClickItem?: (itemId: string) => void;
   onDoubleClickItem?: (itemId: string) => void;
   renderEmptyState?: () => React.ReactElement;
+  /** @default false */
+  sortable?: boolean;
 }
 
 export const Collection = forwardRefGeneric(function Collection<

package/src/components/Combobox.tsx

@@ -27,10 +27,6 @@ import {
 import { ListView } from "./ListView";
 import { Small } from "./Text";
 
-const comboboxButtonStyle = {
-  right: "2px",
-};
-
 export type BaseComboboxProps<T extends string> = {
   id?: string;
   loading?: boolean;
@@ -454,6 +450,28 @@ export const Combobox = memoGeneric(
         id={id}
         size={size}
         sideOffset={6}
+        end={
+          <>
+            {loading && (
+              <div className="pr-1.5">
+                <ActivityIndicator />
+              </div>
+            )}
+            {!readOnly && (
+              <InputField.Button
+                variant="floating"
+                onClick={handleChevronClick}
+              >
+                <DropdownChevronIcon
+                  className={cx(
+                    "transition-transform duration-100",
+                    shouldShowMenu ? "rotate-180" : "rotate-0"
+                  )}
+                />
+              </InputField.Button>
+            )}
+          </>
+        }
         renderPopoverContent={({ width }) => {
           const height = Math.min(
             ListView.calculateHeight({
@@ -528,25 +546,6 @@ export const Combobox = memoGeneric(
             />
           )}
         {children}
-        {loading && (
-          <InputField.Label htmlFor={id}>
-            <ActivityIndicator />
-          </InputField.Label>
-        )}
-        {!readOnly && (
-          <InputField.Button
-            variant="floating"
-            onClick={handleChevronClick}
-            style={comboboxButtonStyle}
-          >
-            <DropdownChevronIcon
-              className={cx(
-                "transition-transform duration-100",
-                shouldShowMenu ? "rotate-180" : "rotate-0"
-              )}
-            />
-          </InputField.Button>
-        )}
       </InputField.Root>
     );
   })

package/src/components/ComboboxMenu.tsx

@@ -92,7 +92,7 @@ export const ComboboxMenu = memoGeneric(
               <div className="flex flex-1 min-w-0 items-center">
                 {indented && <Spacer.Horizontal size={CHECKBOX_INDENT_WIDTH} />}
                 {item.checked ? (
-                  <div className={styles.itemIndicatorStyle}>
+                  <div {...styles.itemIndicator}>
                     <CheckIcon />
                   </div>
                 ) : indented ? (

package/src/components/DimensionInput.tsx

@@ -1,6 +1,7 @@
 import { round } from "@noya-app/noya-utils";
 import * as React from "react";
 import { InputField } from "./InputField";
+import { LabeledField } from "./LabeledField";
 
 export type SetNumberMode = "replace" | "adjust";
 
@@ -50,17 +51,18 @@ export const DimensionInput = React.memo(function DimensionInput({
   );
 
   return (
-    <InputField.Root id={id} width={size}>
-      <InputField.NumberInput
-        value={value === undefined ? value : round(value, 2)}
-        placeholder={value === undefined ? placeholder : undefined}
-        onNudge={handleNudgeValue}
-        disabled={disabled}
-        {...(trigger === "change"
-          ? { onChange: handleSetValue }
-          : { onSubmit: handleSetValue })}
-      />
-      {label && <InputField.Label>{label}</InputField.Label>}
-    </InputField.Root>
+    <LabeledField label={label} labelPosition="inset">
+      <InputField.Root id={id} width={size}>
+        <InputField.NumberInput
+          value={value === undefined ? value : round(value, 2)}
+          placeholder={value === undefined ? placeholder : undefined}
+          onNudge={handleNudgeValue}
+          disabled={disabled}
+          {...(trigger === "change"
+            ? { onChange: handleSetValue }
+            : { onSubmit: handleSetValue })}
+        />
+      </InputField.Root>
+    </LabeledField>
   );
 });

package/src/components/EditableText.tsx

@@ -35,6 +35,7 @@ type Props = {
   textClassName?: string;
   readOnly?: boolean;
   onBlur?: () => void;
+  tabIndex?: number;
   /**
    * If true, will render an unfocused input. This should only be used for visual regression tests.
    */
@@ -66,6 +67,7 @@ export const EditableText = memo(
       readOnly,
       onBlur,
       testFocused = false,
+      tabIndex = 0,
       ...props
     }: Props,
     ref: React.ForwardedRef<EditableTextRef>
@@ -136,7 +138,7 @@ export const EditableText = memo(
       children: displayValue,
       onClick: () => setFocused(true),
       ref: previewRef,
-      tabIndex: 0,
+      tabIndex,
       onKeyDown: (e: React.KeyboardEvent) => {
         if (e.key === "Enter" || e.key === " ") {
           setFocused(true);

package/src/components/FillInputField.tsx

@@ -1,8 +1,8 @@
 import { Sketch } from "@noya-app/noya-file-format";
 import React, { forwardRef, memo } from "react";
+import { cx } from "../utils/classNames";
 import { SketchPattern } from "../utils/sketchPattern";
 import { FillPreviewBackground } from "./FillPreviewBackground";
-import { cx } from "../utils/classNames";
 
 const FillButton = forwardRef<
   HTMLButtonElement,
@@ -11,7 +11,7 @@ const FillButton = forwardRef<
   <button
     ref={ref}
     className={cx(
-      `outline-none p-0 w-[50px] h-[27px] rounded overflow-hidden border-none shadow-[0_0_0_1px_var(--divider)_inset] bg-transparent relative focus:shadow-[0_0_0_1px_var(--sidebar-background),0_0_0_3px_var(--primary)] `,
+      `outline-none p-0 w-[50px] h-input-height rounded overflow-hidden border-none shadow-[0_0_0_1px_var(--divider)_inset] bg-transparent relative focus:shadow-[0_0_0_1px_var(--sidebar-background),0_0_0_3px_var(--primary)] `,
       className
     )}
     {...props}

package/src/components/Grid.tsx

@@ -82,6 +82,7 @@ export const Grid = memoGeneric(
       size = "medium",
       testHoveredId,
       testRenamingId,
+      testShowDropIndicatorId,
       scrollable = false,
       //   acceptsDrop,
       //   onMoveItem,
@@ -90,6 +91,7 @@ export const Grid = memoGeneric(
       onClickItem,
       onDoubleClickItem,
       renderEmptyState,
+      // getDropTargetParentIndex,
     } = props;
 
     const [hoveredId, setHoveredId] = useState<string>();
@@ -143,130 +145,148 @@ export const Grid = memoGeneric(
 
     return (
       <GridView.Root
+        role="listbox"
+        aria-orientation="horizontal"
+        aria-multiselectable={true}
         minColumnWidth={minColumnWidth}
-        scrollable={scrollable}
+        scrollable={items.length > 0 && scrollable}
+        contentClassName={cx(items.length === 0 && "flex flex-1")}
         gap={gap}
         className={cx(isDropTargetActive && "bg-primary-pastel", className)}
         {...dropTargetProps}
         ref={fileDropTargetRef}
       >
-        <GridView.Section renderEmptyState={renderEmptyState}>
-          {items.map((item) => {
-            const id = getId(item);
-            const isDropdownOpen = dropdownOpenId === id;
-            const isHovered =
-              testHoveredId === id || currentHoveredId === id || isDropdownOpen;
-            const itemIsRenamable = getRenamable?.(item) ?? renamable;
-            const isSelected = selectedIds.includes(id);
-            const isRenaming = itemIsRenamable && onRename && renamingId === id;
-            const isTestingRenaming = testRenamingId === id;
-            const thumbnail = renderThumbnail?.({
-              item,
-              selected: isSelected,
-            });
-            const action =
-              (isHovered || isSelected) &&
-              !isRenaming &&
-              (typeof renderAction === "function"
-                ? renderAction(item, isSelected)
-                : renderAction === "menu" &&
-                  menuItems && (
-                    <ActionMenu
-                      menuItems={menuItems}
-                      onSelect={(action) => handleMenuAction(action, item)}
-                      selected={isSelected}
-                      onOpenChange={(open) => {
-                        setDropdownOpenId(open ? id : undefined);
+        {items.length > 0 ? (
+          <GridView.Section>
+            {items.map((item) => {
+              const id = getId(item);
+              const isDropdownOpen = dropdownOpenId === id;
+              const isHovered =
+                testHoveredId === id ||
+                currentHoveredId === id ||
+                isDropdownOpen;
+              const itemIsRenamable = getRenamable?.(item) ?? renamable;
+              const isSelected = selectedIds.includes(id);
+              const isRenaming =
+                itemIsRenamable && onRename && renamingId === id;
+              const isTestingRenaming = testRenamingId === id;
+              const thumbnail = renderThumbnail?.({
+                item,
+                selected: isSelected,
+              });
+              const onOpenChange = (open: boolean) => {
+                setDropdownOpenId(open ? id : undefined);
 
-                        if (open && !isSelected) {
-                          handleSelect(id);
+                if (open && !isSelected) {
+                  handleSelect(id);
+                }
+              };
+              const action =
+                (isHovered || isSelected) &&
+                !isRenaming &&
+                (typeof renderAction === "function"
+                  ? renderAction({ item, selected: isSelected, onOpenChange })
+                  : renderAction === "menu" &&
+                    menuItems && (
+                      <ActionMenu
+                        menuItems={menuItems}
+                        onSelect={(action) => handleMenuAction(action, item)}
+                        selected={isSelected}
+                        onOpenChange={onOpenChange}
+                      />
+                    ));
+
+              return (
+                <GridView.Item<M>
+                  key={id}
+                  id={id}
+                  role="option"
+                  aria-selected={isSelected}
+                  aria-label={getName(item)}
+                  hovered={isHovered}
+                  testShowInsideDropIndicator={testShowDropIndicatorId === id}
+                  onHoverChange={(isHovering) => {
+                    setHoveredId(isHovering ? id : undefined);
+                  }}
+                  title={
+                    <EditableText
+                      tabIndex={isRenaming ? undefined : -1}
+                      value={getName(item)}
+                      focused={isRenaming}
+                      testFocused={isTestingRenaming}
+                      readOnly={!itemIsRenamable || !onRename}
+                      onSubmit={(value) => {
+                        if (value !== getName(item)) {
+                          onRename?.(item, value);
                         }
+                        setRenamingId(undefined);
                       }}
-                    />
-                  ));
-
-            return (
-              <GridView.Item<M>
-                key={id}
-                id={id}
-                hovered={isHovered}
-                onHoverChange={(isHovering) => {
-                  setHoveredId(isHovering ? id : undefined);
-                }}
-                title={
-                  <EditableText
-                    value={getName(item)}
-                    focused={isRenaming}
-                    testFocused={isTestingRenaming}
-                    readOnly={!itemIsRenamable || !onRename}
-                    onSubmit={(value) => {
-                      if (value !== getName(item)) {
-                        onRename?.(item, value);
-                      }
-                      setRenamingId(undefined);
-                    }}
-                    onBlur={() => {
-                      setRenamingId(undefined);
-                    }}
-                    // max height ensures preview text and input are one line
-                    textClassName="bg-listview-editing-background max-h-[27px]"
-                  >
-                    {(props) => (
-                      <span
-                        {...props}
-                        className={cx(
-                          isSelected && "text-primary",
-                          "truncate select-none"
-                        )}
-                      />
-                    )}
-                  </EditableText>
-                }
-                subtitle={
-                  <span className={cx(isSelected && "text-primary")}>
-                    {renderDetail?.(item, isSelected)}
-                  </span>
-                }
-                loading={false}
-                selected={isSelected}
-                onClick={() => {
-                  onClickItem?.(id);
-                }}
-                onSelect={(event) => {
-                  handleSelect(id, event);
-                }}
-                onKeyDown={(event) => {
-                  if (event.key === "Enter") {
-                    setRenamingId(id);
+                      onBlur={() => {
+                        setRenamingId(undefined);
+                      }}
+                      // max height ensures preview text and input are one line
+                      textClassName="bg-listview-editing-background max-h-input-height"
+                    >
+                      {(props) => (
+                        <span
+                          {...props}
+                          className={cx(
+                            isSelected && "text-primary",
+                            "truncate select-none"
+                          )}
+                        />
+                      )}
+                    </EditableText>
                   }
-                }}
-                onDoubleClick={() => {
-                  onDoubleClickItem?.(id);
-                }}
-                menuItems={menuItems}
-                onSelectMenuItem={(action) => handleMenuAction(action, item)}
-                action={action}
-                onMenuOpenChange={(open: boolean) => {
-                  if (open && !isSelected) {
-                    handleSelect(id);
+                  subtitle={
+                    <span className={cx(isSelected && "text-primary")}>
+                      {renderDetail?.(item, isSelected)}
+                    </span>
                   }
-                }}
-              >
-                {thumbnail && (
-                  <div
-                    className={cx(
-                      "rounded overflow-hidden flex-none flex w-full",
-                      isSelected && "text-primary"
-                    )}
-                    tabIndex={-1}
-                  >
-                    {thumbnail}
-                  </div>
-                )}
-              </GridView.Item>
-            );
-          })}
-        </GridView.Section>
+                  loading={false}
+                  selected={isSelected}
+                  onClick={() => {
+                    onClickItem?.(id);
+                  }}
+                  onSelect={(event) => {
+                    handleSelect(id, event);
+                  }}
+                  onKeyDown={(event) => {
+                    if (event.key === "Enter") {
+                      setRenamingId(id);
+                    }
+                  }}
+                  onDoubleClick={() => {
+                    onDoubleClickItem?.(id);
+                  }}
+                  menuItems={menuItems}
+                  onSelectMenuItem={(action) => handleMenuAction(action, item)}
+                  action={action}
+                  onMenuOpenChange={(open: boolean) => {
+                    if (open && !isSelected) {
+                      handleSelect(id);
+                    }
+                  }}
+                  // getDropTargetParentIndex={getDropTargetParentIndex}
+                >
+                  {thumbnail && (
+                    <div
+                      className={cx(
+                        "rounded overflow-hidden flex-none flex w-full",
+                        isSelected && "text-primary"
+                      )}
+                      tabIndex={-1}
+                    >
+                      {thumbnail}
+                    </div>
+                  )}
+                </GridView.Item>
+              );
+            })}
+          </GridView.Section>
+        ) : (
+          renderEmptyState?.()
+        )}
       </GridView.Root>
     );
   })