@noya-app/noya-designsystem 0.1.47 → 0.1.49

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/Drawer.tsx

@@ -0,0 +1,98 @@
+import { useControlledOrUncontrolled } from "@noya-app/react-utils";
+import * as Dialog from "@radix-ui/react-dialog";
+import * as React from "react";
+import { useImperativeHandle } from "react";
+import { cx } from "../utils/classNames";
+import { SidebarRef } from "./workspace/types";
+
+export type DrawerProps = {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  trigger: React.ReactNode;
+  children: React.ReactNode;
+  title?: React.ReactNode;
+  className?: string;
+  id?: string;
+  style?: React.CSSProperties;
+  positioning?: "fixed" | "absolute";
+  side?: "left" | "right";
+  portalled?: boolean;
+  portalContainer?: HTMLElement | null;
+};
+
+export const Drawer = React.memo(
+  React.forwardRef(function Drawer(
+    {
+      open,
+      onOpenChange,
+      trigger,
+      children,
+      title,
+      className,
+      id,
+      style,
+      positioning = "fixed",
+      side = "left",
+      portalled = true,
+      portalContainer,
+    }: DrawerProps,
+    forwardedRef: React.ForwardedRef<SidebarRef>
+  ) {
+    const [internalOpen, setInternalOpen] = useControlledOrUncontrolled({
+      defaultValue: false,
+      value: open,
+      onChange: onOpenChange,
+    });
+
+    useImperativeHandle(forwardedRef, () => ({
+      expand: () => {
+        setInternalOpen(true);
+      },
+      collapse: () => {
+        setInternalOpen(false);
+      },
+      isExpanded: () => {
+        return internalOpen;
+      },
+    }));
+
+    const inner = (
+      <>
+        <Dialog.Overlay
+          className={cx(
+            "inset-0 bg-black/50",
+            positioning === "absolute" ? "absolute" : "fixed"
+          )}
+        />
+        <Dialog.Content
+          id={id}
+          style={style}
+          className={cx(
+            `top-0 bottom-0 z-50 overflow-y-auto bg-sidebar-background rounded-none max-h-none max-w-none sm:max-w-sm w-full border-divider-strong`,
+            positioning === "absolute" ? "absolute" : "fixed",
+            side === "left" ? "left-0 border-r" : "right-0 border-l",
+            className
+          )}
+        >
+          {title && <Dialog.Title>{title}</Dialog.Title>}
+          {children}
+        </Dialog.Content>
+      </>
+    );
+
+    return (
+      <Dialog.Root
+        key="dialog"
+        open={internalOpen}
+        onOpenChange={setInternalOpen}
+      >
+        <Dialog.Trigger key="trigger">{trigger}</Dialog.Trigger>
+        {portalled ? (
+          <Dialog.Portal container={portalContainer}>{inner}</Dialog.Portal>
+        ) : (
+          inner
+        )}
+      </Dialog.Root>
+    );
+  })
+);

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

@@ -1,10 +1,12 @@
-import React, { useImperativeHandle, useState } from "react";
+import { useFileDropTarget } from "@noya-app/react-utils";
+import React, { useImperativeHandle, useRef, useState } from "react";
 import {
   forwardRefGeneric,
   memoGeneric,
 } from "../../../noya-react-utils/src/utils/reactGenerics";
 import { cx } from "../utils/classNames";
 import { updateSelection } from "../utils/selection";
+import { ActionMenu } from "./ActionMenu";
 import { CollectionProps, CollectionRef } from "./Collection";
 import { EditableText } from "./EditableText";
 import { GridView } from "./GridView";
@@ -35,15 +37,15 @@ export const getGridSize = (size: GridViewSize) => {
     },
     medium: {
       minColumnWidth: "220px",
-      gap: 20,
+      gap: 30,
     },
     large: {
       minColumnWidth: "280px",
-      gap: 24,
+      gap: 40,
     },
     xl: {
       minColumnWidth: "400px",
-      gap: 32,
+      gap: 48,
     },
   };
 
@@ -80,16 +82,21 @@ export const Grid = memoGeneric(
       size = "medium",
       testHoveredId,
       testRenamingId,
+      testShowDropIndicatorId,
       scrollable = false,
       //   acceptsDrop,
       //   onMoveItem,
-      //   onFilesDrop,
+      onFilesDrop,
       renamable,
+      onClickItem,
       onDoubleClickItem,
+      renderEmptyState,
+      // getDropTargetParentIndex,
     } = props;
 
     const [hoveredId, setHoveredId] = useState<string>();
     const [internalRenamingId, setRenamingId] = useState<string>();
+    const [dropdownOpenId, setDropdownOpenId] = useState<string>();
 
     useImperativeHandle(ref, () => ({
       editName: (id: string) => {
@@ -104,139 +111,182 @@ export const Grid = memoGeneric(
       if (!onSelectionChange) return;
 
       setRenamingId(undefined);
+
       const newSelectedIds = updateSelection(
         items.map(getId),
         selectedIds,
         itemId,
         event
       );
+
       onSelectionChange(newSelectedIds, event);
     };
 
-    const handleMenuAction = (action: M) => {
+    const handleMenuAction = (action: M, actionItem: T) => {
       if (!onSelectMenuItem) return;
 
       const selectedItems = items.filter((item) =>
         selectedIds.includes(getId(item))
       );
-      onSelectMenuItem(action, selectedItems);
+
+      onSelectMenuItem(
+        action,
+        selectedItems.length === 0 ? [actionItem] : selectedItems
+      );
     };
 
-    //   const fileDropTargetRef = useRef<HTMLDivElement>(null);
-    //   const { isDropTargetActive, dropTargetProps } = useFileDropTarget(
-    //     fileDropTargetRef,
-    //     onFilesDrop
-    //   );
+    const fileDropTargetRef = useRef<HTMLDivElement>(null);
+    const { isDropTargetActive, dropTargetProps } = useFileDropTarget(
+      fileDropTargetRef,
+      onFilesDrop
+    );
 
     const { minColumnWidth, gap } = getGridSize(size);
 
     return (
       <GridView.Root
+        role="listbox"
+        aria-orientation="horizontal"
+        aria-multiselectable={true}
         minColumnWidth={minColumnWidth}
-        scrollable={scrollable}
-        className={className}
+        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>
-          {items.map((item) => {
-            const id = getId(item);
-            const isHovered = currentHoveredId === id;
-            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);
-
-            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>
+        {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);
                 }
-                loading={false}
-                selected={isSelected}
-                onSelect={(event) => {
-                  handleSelect(id, event);
-                }}
-                onKeyDown={(event) => {
-                  if (event.key === "Enter") {
-                    setRenamingId(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);
+                      }}
+                      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={handleMenuAction}
-                action={action}
-                testHoveredId={testHoveredId}
-                onMenuOpenChange={(open: boolean) => {
-                  if (open && !isSelected) {
-                    handleSelect(id, {
-                      shiftKey: false,
-                      altKey: false,
-                      metaKey: false,
-                      ctrlKey: false,
-                    });
+                  subtitle={
+                    <span className={cx(isSelected && "text-primary")}>
+                      {renderDetail?.(item, isSelected)}
+                    </span>
                   }
-                }}
-              >
-                {thumbnail && (
-                  <div
-                    className={cx(
-                      "rounded overflow-hidden flex-none flex items-center w-full justify-center aspect-square",
-                      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>
     );
   })