@noya-app/noya-designsystem 0.1.44 → 0.1.45

package/src/components/ListView.tsx

@@ -28,7 +28,7 @@ import { useHover } from "../hooks/useHover";
 import { cssVars } from "../theme";
 import { cx } from "../utils/classNames";
 import { ContextMenu } from "./ContextMenu";
-import { InputField, InputFieldInputProps } from "./InputField";
+import { InputField } from "./InputField";
 import { MenuItem } from "./internal/Menu";
 import { ScrollArea } from "./ScrollArea";
 import {
@@ -38,7 +38,6 @@ import {
   Sortable,
 } from "./Sortable";
 import { Spacer } from "./Spacer";
-import { labelTextStyles } from "./SelectMenu";
 
 export type ListRowMarginType = "none" | "top" | "bottom" | "vertical";
 export type ListRowPosition = "only" | "first" | "middle" | "last";
@@ -122,24 +121,12 @@ const ListViewRowTitle = ({
  * EditableRowTitle
  * ------------------------------------------------------------------------- */
 
-const ListViewEditableRowTitleElement = forwardRef(
-  (
-    { className, ...props }: InputFieldInputProps,
-    forwardedRef: ForwardedRef<HTMLInputElement>
-  ) => (
-    <InputField.Input
-      ref={forwardedRef}
-      className={cx(`bg-listview-editing-background `, className)}
-      {...props}
-    />
-  )
-);
-
 export interface EditableRowProps {
   value: string;
   onSubmitEditing: (value: string) => void;
   autoFocus: boolean;
   placeholder?: string;
+  className?: string;
 }
 
 function ListViewEditableRowTitle({
@@ -147,6 +134,7 @@ function ListViewEditableRowTitle({
   onSubmitEditing,
   autoFocus,
   placeholder,
+  className,
 }: EditableRowProps) {
   const inputRef = useRef<HTMLInputElement | null>(null);
 
@@ -165,24 +153,17 @@ function ListViewEditableRowTitle({
   }, [autoFocus]);
 
   return (
-    <ListViewEditableRowTitleElement
+    <InputField.Input
       ref={inputRef}
-      variant="bare"
       value={value}
       placeholder={placeholder}
       onSubmit={onSubmitEditing}
       allowSubmittingWithSameValue
+      className={cx("-mx-1.5 -my-1 bg-listview-editing-background", className)}
     />
   );
 }
 
-function getPositionMargin(marginType: ListRowMarginType) {
-  return {
-    top: marginType === "top" || marginType === "vertical" ? 8 : 0,
-    bottom: marginType === "bottom" || marginType === "vertical" ? 8 : 0,
-  };
-}
-
 /* ----------------------------------------------------------------------------
  * Row
  * ------------------------------------------------------------------------- */
@@ -225,18 +206,24 @@ const RowContainer = forwardRef<
       style,
       $clickable,
       "aria-describedby": _, // Causes hydration warning
+      role,
+      "aria-label": ariaLabel,
+      "aria-roledescription": ariaRoleDescription,
+      "aria-selected": ariaSelected,
       ...props
     },
     ref
   ) => {
-    const margin = getPositionMargin($marginType);
-
     return (
       <div
         ref={ref}
+        role={role}
+        aria-label={ariaLabel}
+        aria-roledescription={ariaRoleDescription}
+        aria-selected={ariaSelected ?? $selected}
         className={cx(
           $isSectionHeader && $sectionHeaderVariant === "label"
-            ? labelTextStyles
+            ? "font-sans text-label uppercase leading-3 font-bold text-text-muted"
             : "font-sans text-heading5 font-normal",
           !$isSectionHeader &&
             $selected &&
@@ -254,22 +241,11 @@ const RowContainer = forwardRef<
             paddingRight: $selected ? "8px" : "12px",
             paddingBottom: $selected ? "4px" : "6px",
             paddingLeft: $selected ? "8px" : "12px",
-            borderRadius:
-              $variant === "padded" ? "2px" : $selected ? "4px" : "",
-            marginLeft: $variant === "padded" ? "8px" : $selected ? "4px" : "",
-            marginRight: $variant === "padded" ? "8px" : $selected ? "4px" : "",
-            marginTop:
-              $variant === "padded"
-                ? `${margin.top}px`
-                : $selected
-                  ? "2px"
-                  : "",
-            marginBottom:
-              $variant === "padded"
-                ? `${margin.bottom}px`
-                : $selected
-                  ? "2px"
-                  : "",
+            borderRadius: $selected ? "4px" : "",
+            marginLeft: $selected ? "4px" : "",
+            marginRight: $selected ? "4px" : "",
+            marginTop: $selected ? "2px" : "",
+            marginBottom: $selected ? "2px" : "",
           }),
           ...($selected &&
             !$isSectionHeader && {
@@ -351,6 +327,7 @@ const ListViewDragIndicatorElement = forwardRef<
           zIndex: 1000,
           position: "absolute",
           borderRadius: "3px",
+          pointerEvents: "none",
           ...($relativeDropPosition === "inside"
             ? {
                 inset: 2,
@@ -396,6 +373,7 @@ interface ListViewClickInfo {
 interface ListViewRowProps<MenuItemType extends string = string> {
   id?: string;
   tabIndex?: number;
+  role?: string;
   selected?: boolean;
   /** @default 0 */
   depth?: number;
@@ -432,6 +410,7 @@ const ListViewRow = forwardRefGeneric(function ListViewRow<
   {
     id,
     tabIndex = 0,
+    role,
     gap,
     backgroundColor,
     selected = false,
@@ -526,6 +505,7 @@ const ListViewRow = forwardRefGeneric(function ListViewRow<
         onContextMenu={onContextMenu}
         $isSectionHeader={isSectionHeader}
         id={id}
+        role={role}
         $gap={gap ?? 0}
         $backgroundColor={backgroundColor}
         {...hoverProps}
@@ -764,14 +744,18 @@ type RenderProps<T> = {
   virtualized?: Size;
 };
 
-type ListViewVariant = "normal" | "padded" | "bare";
+type ListViewVariant = "normal" | "bare";
 
 type ListViewSectionHeaderVariant = "normal" | "label";
 
-type ListViewRootProps = {
+export type ListViewRootProps = {
   id?: string;
   className?: string;
   style?: CSSProperties;
+  role?: string;
+  "aria-labelledby"?: string;
+  "aria-orientation"?: "vertical" | "horizontal";
+  "aria-multiselectable"?: boolean;
   onPress?: () => void;
   scrollable?: boolean;
   expandable?: boolean;
@@ -788,6 +772,11 @@ type ListViewRootProps = {
   divider?: boolean;
   gap?: number;
   colorScheme?: ListColorScheme;
+  containerRef?: React.RefObject<HTMLDivElement>;
+  onDragOver?: React.DragEventHandler<HTMLDivElement>;
+  onDragEnter?: React.DragEventHandler<HTMLDivElement>;
+  onDragLeave?: React.DragEventHandler<HTMLDivElement>;
+  onDrop?: React.DragEventHandler<HTMLDivElement>;
 };
 
 const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
@@ -795,6 +784,10 @@ const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
     id,
     className,
     style,
+    role,
+    "aria-labelledby": ariaLabelledby,
+    "aria-orientation": ariaOrientation,
+    "aria-multiselectable": ariaMultiselectable,
     onPress,
     scrollable = false,
     expandable = true,
@@ -812,6 +805,11 @@ const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
     pressEventName = "onClick",
     colorScheme = "primary",
     gap = 0,
+    containerRef,
+    onDragOver,
+    onDragEnter,
+    onDragLeave,
+    onDrop,
   }: RenderProps<T> & ListViewRootProps,
   forwardedRef: ForwardedRef<IVirtualizedList>
 ) {
@@ -1002,17 +1000,13 @@ const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
   const getItemHeight = useCallback(
     (index: number) => {
       const child = getItemContextValue(index);
-      const margin = child?.marginType
-        ? getPositionMargin(child.marginType)
-        : { top: 0, bottom: 0 };
       const height =
-        (child?.isSectionHeader && child.sectionHeaderVariant === "label"
+        child?.isSectionHeader && child.sectionHeaderVariant === "label"
           ? SECTION_HEADER_LABEL_HEIGHT
-          : ROW_HEIGHT) +
-        (variant === "padded" ? margin.top + margin.bottom : 0);
+          : ROW_HEIGHT;
       return height;
     },
-    [getItemContextValue, variant]
+    [getItemContextValue]
   );
 
   const getKey = useCallback(
@@ -1027,6 +1021,10 @@ const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
     <ListViewDraggingContext.Provider value={draggingContextValue}>
       <div
         id={id}
+        role={role}
+        aria-labelledby={ariaLabelledby}
+        aria-orientation={ariaOrientation}
+        aria-multiselectable={ariaMultiselectable}
         className={cx(
           `flex flex-col text-text-muted ${scrollable ? "flex-1" : "flex-none"} `,
           className
@@ -1035,6 +1033,11 @@ const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
         {...{
           [pressEventName]: handleClick,
         }}
+        ref={containerRef}
+        onDragOver={onDragOver}
+        onDragEnter={onDragEnter}
+        onDragLeave={onDragLeave}
+        onDrop={onDrop}
       >
         {withScrollable((scrollElementRef: HTMLDivElement | null) =>
           withSortable(

package/src/components/Popover.tsx

@@ -1,5 +1,6 @@
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import React, { ComponentProps } from "react";
+import { cx } from "../utils/classNames";
 import { IconButton } from "./IconButton";
 
 const closeStyles: React.CSSProperties = {
@@ -28,6 +29,7 @@ interface Props
   sideOffset?: number;
   onClickClose?: () => void;
   showArrow?: boolean;
+  className?: string;
 }
 
 export function Popover({
@@ -46,13 +48,22 @@ export function Popover({
   onInteractOutside,
   onFocusOutside,
   onClickClose,
+  className,
 }: Props) {
   return (
     <PopoverPrimitive.Root open={open} onOpenChange={onOpenChange}>
       <PopoverPrimitive.Trigger asChild>{trigger}</PopoverPrimitive.Trigger>
       <PopoverPrimitive.Portal>
         <PopoverPrimitive.Content
-          className={`rounded font-[14px] bg-popover-background shadow-[0_2px_4px_rgba(0,0,0,0.2),0_0_12px_rgba(0,0,0,0.1)] max-h-[600px] overflow-y-auto text-text-muted z-[1000] ${variant === "large" ? "w-[680px]" : variant === "normal" ? "w-[240px]" : ""}`}
+          className={cx(
+            "rounded font-[14px] bg-popover-background shadow-[0_2px_4px_rgba(0,0,0,0.2),0_0_12px_rgba(0,0,0,0.1)] max-h-[600px] overflow-y-auto text-text-muted z-[1000]",
+            variant === "large"
+              ? "w-[680px]"
+              : variant === "normal"
+                ? "w-[240px]"
+                : "",
+            className
+          )}
           side={side}
           align="center"
           sideOffset={sideOffset}

package/src/components/SearchCompletionMenu.tsx

@@ -0,0 +1,206 @@
+import {
+  ComboboxMenu,
+  ComboboxOption,
+  Divider,
+  IScoredItem,
+  InputField,
+  ListView,
+  Small,
+  fuzzyFilter,
+  getNextIndex,
+} from "@noya-app/noya-designsystem";
+import { getCurrentPlatform, handleKeyboardEvent } from "@noya-app/noya-keymap";
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+export interface ISearchCompletionMenu {
+  focus: () => void;
+}
+
+export const SearchCompletionMenu = forwardRef(function SearchCompletionMenu(
+  {
+    onSelect,
+    onHover,
+    onClose,
+    items,
+    width = 200,
+  }: {
+    onSelect: (item: ComboboxOption) => void;
+    onHover?: (item: ComboboxOption) => void;
+    onClose: () => void;
+    items: ComboboxOption[];
+    width?: number;
+  },
+  forwardedRef: React.ForwardedRef<ISearchCompletionMenu>
+) {
+  const [state, setState] = useState({
+    search: "",
+    index: 0,
+  });
+
+  const { index, search } = state;
+
+  const listRef = React.useRef<ListView.VirtualizedList>(null);
+
+  useEffect(() => {
+    listRef.current?.scrollToIndex(index);
+  }, [index]);
+
+  const results = useMemo(
+    () =>
+      fuzzyFilter({
+        items: items.map((item) => item.name),
+        query: search,
+      }).map((item) => ({
+        ...item,
+        ...items[item.index],
+      })) as (ComboboxOption & IScoredItem)[],
+    [items, search]
+  );
+
+  const setSearch = useCallback((search: string) => {
+    setState((state) => ({ ...state, search, index: 0 }));
+  }, []);
+
+  const setIndex = useCallback((index: number) => {
+    setState((state) => ({ ...state, index }));
+  }, []);
+
+  useEffect(() => {
+    onHover?.(results[index]!);
+  }, [index, onHover, results]);
+
+  const searchHeight = 31;
+
+  const listSize =
+    results.length > 0
+      ? {
+          width,
+          height: Math.min(results.length * 31, 31 * 6.5),
+        }
+      : {
+          width,
+          height: 60,
+        };
+
+  const elementSize = {
+    width: listSize.width,
+    height: searchHeight + listSize.height,
+  };
+
+  const selectAndClose = useCallback(
+    (item: ComboboxOption) => {
+      onSelect(item);
+      onClose();
+    },
+    [onSelect, onClose]
+  );
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement>) => {
+      handleKeyboardEvent(event.nativeEvent, getCurrentPlatform(navigator), {
+        ArrowUp: () => {
+          const nextIndex = getNextIndex(
+            results,
+            index,
+            "previous",
+            (item) => item.disabled ?? false
+          );
+          setIndex(nextIndex);
+        },
+        ArrowDown: () => {
+          const nextIndex = getNextIndex(
+            results,
+            index,
+            "next",
+            (item) => item.disabled ?? false
+          );
+          setIndex(nextIndex);
+        },
+        Tab: () => selectAndClose(results[index]!),
+        Enter: () => selectAndClose(results[index]!),
+        Escape: () => onClose(),
+      });
+    },
+    [index, onClose, selectAndClose, results, setIndex]
+  );
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useImperativeHandle(forwardedRef, () => ({
+    focus: () => {
+      inputRef.current?.focus();
+    },
+  }));
+
+  return (
+    <div {...elementSize} className="flex flex-col overflow-hidden">
+      <InputField.Root className="flex flex-0">
+        <InputField.Input
+          ref={inputRef}
+          value={search}
+          placeholder="Filter..."
+          style={{
+            height: searchHeight,
+            borderRadius: 0,
+            outline: "none",
+            boxShadow: "none",
+            backgroundColor: "white",
+            padding: "4px 12px",
+          }}
+          onChange={setSearch}
+          onKeyDown={handleKeyDown}
+          // onBlur={(event) => {
+          //   const isWithinPopover =
+          //     event.relatedTarget &&
+          //     event.relatedTarget instanceof HTMLElement &&
+          //     event.relatedTarget.role === 'dialog';
+
+          //   if (isWithinPopover) {
+          //     inputRef.current?.focus();
+
+          //     event.stopPropagation();
+          //     event.preventDefault();
+          //   }
+          // }}
+          // onPointerDown={(event) => {
+          //   event.stopPropagation();
+          //   event.preventDefault();
+          // }}
+          // onFocusCapture={(event) => {
+          //   event.stopPropagation();
+          //   event.preventDefault();
+          // }}
+        />
+      </InputField.Root>
+      <Divider />
+      {results.length > 0 ? (
+        <ComboboxMenu
+          ref={listRef}
+          listSize={listSize}
+          items={results}
+          selectedIndex={index}
+          onSelectItem={(item) => {
+            if (item.type === "sectionHeader") return;
+            selectAndClose(item);
+          }}
+          onHoverIndex={setIndex}
+        />
+      ) : (
+        <div
+          {...listSize}
+          className="flex flex-col p-20 items-center justify-center"
+        >
+          <Small color="textDisabled">No results</Small>
+        </div>
+      )}
+    </div>
+  );
+});

package/src/components/SegmentedControl.tsx

@@ -8,6 +8,7 @@ import React, {
   useContext,
   useMemo,
 } from "react";
+import { useLabel } from "../hooks/useLabel";
 import { cx } from "../utils/classNames";
 import { renderIcon } from "./Icons";
 import { RegularMenuItem } from "./internal/Menu";
@@ -77,6 +78,7 @@ const SegmentedControlItem = forwardRef(function SegmentedControlItem<
             : "aria-checked:bg-background aria-checked:text-text",
         "focus:z-interactable",
         "aria-checked:shadow-[0_1px_1px_rgba(0,0,0,0.1)]",
+        "whitespace-pre",
         className
       )}
       {...props}
@@ -105,7 +107,7 @@ const Separator = ({ transparent }: { transparent: boolean }) => (
 export const SegmentedControl = memo(function SegmentedControl<
   T extends string,
 >({
-  id,
+  id: idProp,
   value,
   onValueChange,
   colorScheme,
@@ -116,6 +118,7 @@ export const SegmentedControl = memo(function SegmentedControl<
   style,
 }: SegmentedControlProps<T>) {
   const contextValue = useMemo(() => ({ colorScheme }), [colorScheme]);
+  const { fieldId: id } = useLabel({ fieldId: idProp });
 
   const handleValueChange = useCallback(
     (value: T) => {
@@ -135,7 +138,7 @@ export const SegmentedControl = memo(function SegmentedControl<
         value={value}
         onValueChange={handleValueChange}
         className={cx(
-          `flex items-stretch w-full appearance-none relative outline-none min-h-[27px] rounded bg-input-background py-[2px] px-[2px]`,
+          `flex items-stretch flex-auto appearance-none relative outline-none min-h-[27px] rounded bg-input-background py-[2px] px-[2px]`,
           className
         )}
         style={style}