@noya-app/noya-designsystem 0.1.64 → 0.1.65

package/src/components/file-explorer/FileExplorerLayout.tsx

@@ -9,7 +9,7 @@ import {
   SectionProps,
 } from "@noya-app/noya-designsystem";
 import { forwardRefGeneric } from "@noya-app/react-utils";
-import React from "react";
+import React, { CSSProperties } from "react";
 import { cx } from "../../utils/classNames";
 import {
   Collection,
@@ -23,7 +23,7 @@ export const FileExplorerLayout = ({
   className,
   ...props
 }: SectionProps) => (
-  <Section className={cx(className, "px-3 flex-1")} {...props}>
+  <Section className={cx(className, "n-px-3 n-flex-1")} {...props}>
     {children}
   </Section>
 );
@@ -39,7 +39,7 @@ export const FileExplorerUploadButton = ({
   isUploading?: boolean;
   children?: React.ReactNode;
 }) => (
-  <div className="flex items-center gap-2">
+  <div className="n-flex n-items-center n-gap-2">
     {showUploadButton && (
       <Button
         icon={isUploading ? <ActivityIndicator size={15} /> : "UploadIcon"}
@@ -60,7 +60,9 @@ export const FileExplorerCollection = forwardRefGeneric(
     { ...props }: CollectionProps<T, M>,
     ref: React.ForwardedRef<CollectionRef>
   ) {
-    return <Collection<T, M> ref={ref} className="-mx-3 flex-1" {...props} />;
+    return (
+      <Collection<T, M> ref={ref} className="-n-mx-3 n-flex-1" {...props} />
+    );
   }
 );
 
@@ -68,22 +70,32 @@ export const FileExplorerDetail = ({
   selected,
   size,
   children,
+  className,
+  style,
 }: {
   selected: boolean;
   children: React.ReactNode;
   size?: CollectionItemSize;
+  className?: string;
+  style?: CSSProperties;
 }) => (
   <span
     className={cx(
-      size === "small" ? "text-list-small" : "text-sm",
-      selected ? "text-primary" : "text-text-muted"
+      size === "small" ? "n-text-list-small" : "n-text-sm",
+      selected ? "n-text-primary" : "n-text-text-muted",
+      className
     )}
+    style={style}
   >
     {children}
   </span>
 );
 
 export const FileExplorerEmptyState = ({
-  label = "No files",
+  children: label = "No files",
   ...props
-}: BannerProps) => <Banner label={label} className="mx-3" {...props} />;
+}: BannerProps) => (
+  <Banner className="n-mx-3" {...props}>
+    {label}
+  </Banner>
+);

package/src/components/internal/Checkmark.tsx

@@ -12,7 +12,7 @@ export function Checkmark(props: React.SVGProps<SVGSVGElement>) {
       {...props}
     >
       <path
-        className="scale-90 origin-center"
+        className="n-scale-90 n-origin-center"
         d="M3 8L6 11L12 5"
         strokeWidth="1.1"
         strokeLinecap="round"

package/src/components/internal/Menu.tsx

@@ -148,6 +148,10 @@ export const isMenuItemSectionHeader = (
   item: MenuItem<string>
 ): item is SectionHeaderMenuItem => item.type === "sectionHeader";
 
+export const isSubMenuItem = <T extends string>(
+  item: MenuItem<T>
+): item is SubMenuItem<T> => item.type === "submenu";
+
 export const isSelectableMenuItemWithScore = (
   item: MenuItem<string>
 ): item is ScoredSelectableMenuItem<string> =>
@@ -180,27 +184,27 @@ export const CHECKBOX_RIGHT_INSET = 6;
 export const CHECKBOX_INDENT_WIDTH = 6;
 
 export const styles = {
-  separatorStyle: "h-px bg-divider mx-3 my-1",
+  separatorStyle: "n-h-px n-bg-divider n-mx-3 n-my-1",
   selectedItemStyle:
-    "focus:outline-none focus:text-selected-list-item-text focus:bg-selected-list-item-background focus:kbd:text-selected-list-item-text",
+    "focus:n-outline-none focus:n-text-selected-list-item-text focus:n-bg-selected-list-item-background focus:kbd:n-text-selected-list-item-text",
   testSelectedItemStyle:
-    "outline-none text-selected-list-item-text bg-selected-list-item-background kbd:text-selected-list-item-text",
+    "n-outline-none n-text-selected-list-item-text n-bg-selected-list-item-background kbd:n-text-selected-list-item-text",
   itemStyle: ({ disabled }: { disabled?: boolean }) => `
-    flex-none select-none cursor-pointer rounded
-    py-1.5 px-2
-    transition-colors
-    flex items-center
-    font-sans text-button font-medium
-    ${disabled ? "text-text-disabled" : ""}
+    n-flex-none n-select-none n-cursor-pointer n-rounded
+    n-py-1.5 n-px-2
+    n-transition-colors
+    n-flex n-items-center
+    n-font-sans n-text-button n-font-medium
+    ${disabled ? "n-text-text-disabled" : ""}
   `,
   itemIndicator: {
-    className: "flex items-center relative -left-2.5",
+    className: "n-flex n-items-center n-relative -n-left-2.5",
     style: {
       marginRight: -CHECKBOX_RIGHT_INSET,
     },
   },
   contentStyle:
-    "rounded bg-popover-background text-text shadow-popover z-menu py-1",
+    "n-rounded n-bg-popover-background n-text-text n-shadow-popover n-z-menu n-py-1",
 };
 
 function getKeyboardShortcuts<T extends string>(
@@ -238,8 +242,8 @@ const ShortcutElement = ({
   <kbd
     className={cx(
       textStyles.small,
-      "text-inherit opacity-60 tabular-nums",
-      fixedWidth && "w-[0.9rem] text-center"
+      "n-text-inherit n-opacity-60 n-tabular-nums",
+      fixedWidth && "n-w-[0.9rem] n-text-center"
     )}
   >
     {children}
@@ -276,7 +280,7 @@ export const KeyboardShortcut = memo(function KeyboardShortcut({
   );
 });
 
-export const SectionHeader = memo(function SectionHeader({
+export const SectionHeaderMenuItem = memo(function SectionHeaderMenuItem({
   title,
   variant = "normal",
   id,
@@ -292,10 +296,10 @@ export const SectionHeader = memo(function SectionHeader({
       className={mergeConflictingClassNames(
         [
           variant === "label"
-            ? `text-label ${textStyles.label} font-bold text-text-disabled`
-            : "font-sans text-heading5 font-normal",
-          "bg-listview-raised-background flex items-center py-1.5 px-3",
-          isFirst && "-mt-1",
+            ? `${textStyles.label} n-font-bold n-text-text-disabled`
+            : "n-font-sans n-text-heading5 n-font-normal",
+          "n-bg-listview-raised-background n-flex n-items-center n-py-1.5 n-px-3",
+          isFirst && "-n-mt-1",
         ],
         {
           categories: ["font"],

package/src/components/internal/MenuViewport.tsx

@@ -1,15 +1,22 @@
 "use client";
 
 import { ChevronRightIcon } from "@noya-app/noya-icons";
-import { ContextMenu as RadixContextMenu } from "radix-ui";
-import { DropdownMenu as RadixDropdownMenu } from "radix-ui";
+import {
+  ContextMenu as RadixContextMenu,
+  DropdownMenu as RadixDropdownMenu,
+} from "radix-ui";
 import React from "react";
 import {
   portalScopeProps,
   usePortalScopeId,
 } from "../../contexts/PortalScopeContext";
 import { cx } from "../../utils/classNames";
-import { isSelectableMenuItem, MenuItem, SectionHeader, styles } from "./Menu";
+import {
+  isSelectableMenuItem,
+  MenuItem,
+  SectionHeaderMenuItem,
+  styles,
+} from "./Menu";
 import { SelectItem } from "./SelectItem";
 
 type MenuSeparatorComponent = React.FC<{ className?: string }>;
@@ -85,7 +92,7 @@ export const MenuViewport = <T extends string>({
 
           case "sectionHeader":
             return (
-              <SectionHeader
+              <SectionHeaderMenuItem
                 isFirst={index === 0}
                 key={item.id}
                 {...item}
@@ -125,10 +132,10 @@ export const MenuViewport = <T extends string>({
                       indented={hasCheckedItem}
                       disabled={item.disabled}
                     >
-                      <div className="flex items-center flex-1">
+                      <div className="n-flex n-items-center n-flex-1">
                         {item.title}
                       </div>
-                      <ChevronRightIcon className="-mr-1" />
+                      <ChevronRightIcon className="-n-mr-1" />
                     </SelectItem>
                   </Components.SubTrigger>
                   <Components.Portal>

package/src/components/internal/SelectItem.tsx

@@ -56,7 +56,7 @@ export const SelectItem = React.forwardRef(
 
     if (checked && Components.CheckboxItem) {
       return (
-        <div className="px-1">
+        <div className="n-px-1">
           <Components.CheckboxItem
             checked={checked}
             disabled={disabled}
@@ -93,7 +93,7 @@ export const SelectItem = React.forwardRef(
     }
 
     return (
-      <div className="px-1">
+      <div className="n-px-1">
         <Components.Item
           className={cx(
             styles.itemStyle({ disabled }),
@@ -107,7 +107,7 @@ export const SelectItem = React.forwardRef(
           onSelect={handleSelectItem}
           {...props}
         >
-          <div className="flex flex-1 items-center">
+          <div className="n-flex n-flex-1 n-items-center">
             {indented && <Spacer.Horizontal size={CHECKBOX_INDENT_WIDTH} />}
             {checked ? (
               <div {...styles.itemIndicator}>

package/src/components/internal/TextInput.tsx

@@ -55,7 +55,7 @@ const ReadOnlyTextInput = forwardRef(function ReadOnlyTextInput(
       value={value}
       onKeyDown={onKeyDown}
       readOnly
-      className="focus:z-interactable"
+      className="focus:n-z-interactable"
     />
   );
 });
@@ -298,6 +298,10 @@ export default forwardRef(function TextInput(
       (event: React.MouseEvent) => event.stopPropagation(),
       []
     ),
+    onDoubleClick: useCallback(
+      (event: React.MouseEvent) => event.stopPropagation(),
+      []
+    ),
     autoComplete: "off",
     autoCapitalize: "off",
     autoCorrect: "off",

package/src/components/listView/ListViewContexts.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { createContext, ReactNode } from "react";
+import {
+  ListColorScheme,
+  ListRowMarginType,
+  ListRowPosition,
+  ListViewSectionHeaderVariant,
+  ListViewVariant,
+  PressEventName,
+} from "./types";
+
+export type ListViewContextValue = {
+  pressEventName: PressEventName;
+  colorScheme: ListColorScheme;
+  gap: number;
+  sectionHeaderVariant: ListViewSectionHeaderVariant;
+  variant: ListViewVariant;
+  divider: boolean;
+  sortable: boolean;
+  expandable: boolean; // Used only by TreeView
+  indentation: number;
+};
+
+export const ListViewContext = createContext<ListViewContextValue>({
+  pressEventName: "onClick",
+  colorScheme: "primary",
+  gap: 0,
+  sectionHeaderVariant: "normal",
+  variant: "normal",
+  divider: false,
+  sortable: false,
+  expandable: true,
+  indentation: 12,
+});
+(ListViewContext as any).displayName = "ListViewContext";
+
+// TODO: Some of these could be passed in a single context value that's
+// the same for all rows. But doing this seems to cause an infinite loop and
+// prevents drag and drop from working.
+export type ListRowContextValue = {
+  marginType: ListRowMarginType;
+  selectedPosition: ListRowPosition;
+  isSectionHeader: boolean;
+};
+
+// The dragged item isn't passed a context value (doing so causes an infinite loop),
+// so we pass this separately. Rows need the indentation to look correct when dragging,
+// and the dragged row doesn't have a ListRowContextValue.
+export type ListViewDraggingContextValue = {
+  isDragOverlay?: boolean;
+};
+
+export const ListViewDraggingContext =
+  createContext<ListViewDraggingContextValue>({});
+(ListViewDraggingContext as any).displayName = "ListViewDraggingContext";
+
+export const ListRowContext = createContext<ListRowContextValue>({
+  marginType: "none",
+  selectedPosition: "only",
+  isSectionHeader: false,
+});
+(ListRowContext as any).displayName = "ListRowContext";
+
+export const RenderItemContext = createContext<(index: number) => ReactNode>(
+  () => null
+);
+(RenderItemContext as any).displayName = "RenderItemContext";

package/src/components/listView/ListViewEditableRowTitle.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import React, { memo, useLayoutEffect, useRef } from "react";
+import { cx } from "../../utils/classNames";
+import { InputField } from "../InputField";
+
+export interface EditableRowTitleProps {
+  value: string;
+  onSubmitEditing: (value: string) => void;
+  autoFocus: boolean;
+  placeholder?: string;
+  className?: string;
+  onKeyDown?: (e: React.KeyboardEvent) => void;
+}
+
+export const ListViewEditableRowTitle = memo(function ListViewEditableRowTitle({
+  value,
+  onSubmitEditing,
+  autoFocus,
+  placeholder,
+  className,
+  onKeyDown,
+}: EditableRowTitleProps) {
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  useLayoutEffect(() => {
+    const element = inputRef.current;
+
+    if (!element || !autoFocus) return;
+
+    // Calling `focus` is necessary, in addition to `select`, to ensure
+    // 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();
+    }, 1);
+  }, [autoFocus]);
+
+  return (
+    <InputField.Input
+      ref={inputRef}
+      value={value}
+      placeholder={placeholder}
+      onSubmit={onSubmitEditing}
+      allowSubmittingWithSameValue
+      className={cx(
+        "-n-mx-1.5 -n-my-1 n-bg-listview-editing-background",
+        className
+      )}
+      onKeyDown={onKeyDown}
+    />
+  );
+});