@noya-app/noya-designsystem 0.1.63 → 0.1.65

package/src/components/internal/Menu.tsx

@@ -68,7 +68,7 @@ export const separator: SeparatorItem = {
 
 type FalsyReactNode = false | "" | null | undefined;
 
-export type MenuItemIcon = IconName | React.ReactElement | FalsyReactNode;
+export type MenuItemIcon = IconName | React.ReactElement<any> | FalsyReactNode;
 
 type BaseMenuItem = {
   checked?: boolean;
@@ -93,6 +93,7 @@ export type SelectableMenuItem<T extends string> = BaseMenuItem & {
   value: T;
   testSelected?: boolean;
   tooltip?: ReactNode;
+  drawer?: ReactNode;
 };
 
 export type SubMenuItem<T extends string> = BaseMenuItem & {
@@ -147,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> =>
@@ -179,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>(
@@ -237,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}
@@ -275,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,
@@ -291,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,13 +1,22 @@
+"use client";
+
 import { ChevronRightIcon } from "@noya-app/noya-icons";
-import * as RadixContextMenu from "@radix-ui/react-context-menu";
-import * as RadixDropdownMenu from "@radix-ui/react-dropdown-menu";
+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 }>;
@@ -83,7 +92,7 @@ export const MenuViewport = <T extends string>({
 
           case "sectionHeader":
             return (
-              <SectionHeader
+              <SectionHeaderMenuItem
                 isFirst={index === 0}
                 key={item.id}
                 {...item}
@@ -123,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

@@ -1,9 +1,12 @@
+"use client";
+
 import { renderIcon } from "../Icons";
 
-import * as Select from "@radix-ui/react-select";
+import { Select } from "radix-ui";
 import React, { useCallback } from "react";
 import { cx } from "../../utils/classNames";
 import { Spacer } from "../Spacer";
+import { Checkmark } from "./Checkmark";
 import {
   CHECKBOX_INDENT_WIDTH,
   CHECKBOX_RIGHT_INSET,
@@ -53,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}
@@ -90,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 }),
@@ -104,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}>
@@ -133,25 +136,3 @@ export const SelectItem = React.forwardRef(
     );
   }
 );
-
-function Checkmark() {
-  return (
-    <svg
-      viewBox="0 0 15 15"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
-      width={15}
-      height={15}
-    >
-      <path
-        className="scale-90 origin-center"
-        d="M3 8L6 11L12 5"
-        strokeWidth="1.1"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        stroke="currentColor"
-      />
-    </svg>
-  );
-}

package/src/components/internal/TextInput.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { composeRefs } from "@radix-ui/react-compose-refs";
 import React, {
   AriaRole,
@@ -53,7 +55,7 @@ const ReadOnlyTextInput = forwardRef(function ReadOnlyTextInput(
       value={value}
       onKeyDown={onKeyDown}
       readOnly
-      className="focus:z-interactable"
+      className="focus:n-z-interactable"
     />
   );
 });
@@ -296,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}
+    />
+  );
+});