@noya-app/noya-designsystem 0.1.45 → 0.1.47

package/src/components/List.tsx

@@ -0,0 +1,268 @@
+import {
+  forwardRefGeneric,
+  memoGeneric,
+  useFileDropTarget,
+} from "@noya-app/react-utils";
+import React, { useImperativeHandle, useRef, useState } from "react";
+import { cssVars } from "../theme";
+import { cx } from "../utils/classNames";
+import { updateSelection } from "../utils/selection";
+import { CollectionProps, CollectionRef } from "./Collection";
+import { ListView } from "./ListView";
+import { TreeView } from "./TreeView";
+
+const cssVarOverrides = {
+  "--icon-selected": cssVars.colors.primary,
+};
+
+const emptyArray: string[] = [];
+
+export const List = memoGeneric(
+  forwardRefGeneric(function List<T, M extends string = string>(
+    props: CollectionProps<T, M> & { ref?: React.ForwardedRef<CollectionRef> },
+    ref: React.ForwardedRef<CollectionRef>
+  ) {
+    const {
+      className,
+      items,
+      getId,
+      getName,
+      expandable,
+      getExpanded,
+      getRenamable,
+      getDepth,
+      setExpanded,
+      menuItems,
+      onSelectMenuItem,
+      onRename,
+      renderThumbnail,
+      renderAction,
+      renderDetail,
+      onSelectionChange,
+      itemRoleDescription = "clickable item",
+      detailPosition = "end",
+      size = "medium",
+      testHoveredId,
+      testRenamingId,
+      scrollable = false,
+      acceptsDrop,
+      onMoveItem,
+      onFilesDrop,
+      onDoubleClickItem,
+      renamable,
+      selectedIds = emptyArray,
+    } = props;
+
+    const [internalHoveredId, setHoveredId] = useState<string>();
+    const [internalRenamingId, setRenamingId] = useState<string>();
+
+    const hoveredId = internalHoveredId ?? testHoveredId;
+    const renamingId = testRenamingId ?? internalRenamingId;
+
+    const handleSelect = (itemId: string, event?: ListView.ClickInfo) => {
+      if (!onSelectionChange) return;
+
+      setRenamingId(undefined);
+      const newSelectedIds = updateSelection(
+        items.map(getId),
+        selectedIds,
+        itemId,
+        event
+      );
+      onSelectionChange(newSelectedIds, event);
+    };
+
+    const handleMenuAction = (action: M) => {
+      if (!onSelectMenuItem) return;
+
+      const selectedItems = items.filter((item) =>
+        selectedIds.includes(getId(item))
+      );
+      onSelectMenuItem(action, selectedItems);
+    };
+
+    const ViewComponent = expandable ? TreeView : ListView;
+
+    const fileDropTargetRef = useRef<HTMLDivElement>(null);
+    const { isDropTargetActive, dropTargetProps } = useFileDropTarget(
+      fileDropTargetRef,
+      onFilesDrop
+    );
+
+    useImperativeHandle(ref, () => ({
+      editName: (id: string) => {
+        setRenamingId(id);
+      },
+    }));
+
+    return (
+      <ViewComponent.Root
+        variant="bare"
+        className={cx(className, isDropTargetActive && "bg-primary-pastel")}
+        containerRef={fileDropTargetRef}
+        scrollable={scrollable}
+        data={items}
+        keyExtractor={getId}
+        role="listbox"
+        aria-orientation="vertical"
+        aria-multiselectable={true}
+        expandable={expandable}
+        sortable={expandable}
+        acceptsDrop={acceptsDrop}
+        onMoveItem={onMoveItem}
+        {...dropTargetProps}
+        renderItem={(
+          item: T,
+          _: number,
+          { isDragging }: { isDragging: boolean }
+        ) => {
+          const id = getId(item);
+          const isHovered = hoveredId === id && !isDragging;
+          const expanded = getExpanded?.(item);
+          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);
+          const end =
+            action ||
+            (detailPosition === "end" && renderDetail?.(item, isSelected));
+          const below =
+            detailPosition === "below" && renderDetail?.(item, isSelected);
+
+          return (
+            <ViewComponent.Row
+              id={id}
+              key={id}
+              role="option"
+              sortable={expandable}
+              aria-roledescription={itemRoleDescription}
+              aria-label={getName(item)}
+              aria-selected={isSelected}
+              className={cx("cursor-pointer p-1 rounded")}
+              backgroundColor={
+                isSelected ? cssVars.colors.primaryPastel : undefined
+              }
+              chevronClassName={cx(expandable && "relative left-2")}
+              style={cssVarOverrides as React.CSSProperties}
+              hovered={isHovered}
+              selected={isSelected}
+              expanded={expanded}
+              depth={getDepth?.(item)}
+              onHoverChange={(hovered: boolean) =>
+                setHoveredId(hovered ? id : undefined)
+              }
+              onPress={(e: ListView.ClickInfo) => {
+                handleSelect(id, e);
+              }}
+              onDoubleClick={() => {
+                onDoubleClickItem?.(id);
+              }}
+              onKeyDown={(e: React.KeyboardEvent) => {
+                if (e.key !== "Enter" && e.key !== " ") return;
+                e.preventDefault();
+                handleSelect(id, e);
+                if (e.key === "Enter") {
+                  setRenamingId(id);
+                }
+              }}
+              menuItems={menuItems}
+              onSelectMenuItem={handleMenuAction}
+              onContextMenu={() => {
+                if (!isSelected) {
+                  handleSelect(id, {
+                    shiftKey: false,
+                    altKey: false,
+                    metaKey: false,
+                    ctrlKey: false,
+                  });
+                }
+              }}
+              tabIndex={0}
+              onClickChevron={() => {
+                if (!expandable) return;
+                setExpanded?.(item, !expanded);
+              }}
+            >
+              <div className="flex flex-1 items-center px-2 gap-3">
+                {thumbnail && (
+                  <div
+                    className={cx(
+                      "rounded overflow-hidden flex-none flex items-center justify-center",
+                      size === "medium" ? "w-8 h-8" : "w-16 h-16",
+                      isSelected && "text-primary"
+                    )}
+                    style={{
+                      backgroundColor: isSelected
+                        ? cssVars.colors.primaryPastel
+                        : cssVars.colors.inputBackground,
+                    }}
+                    tabIndex={-1}
+                  >
+                    {thumbnail}
+                  </div>
+                )}
+                <div className="flex flex-col flex-1 w-0">
+                  <div className="flex items-center min-h-[27px] flex-1 gap-2">
+                    <div className="flex-1 w-0 flex items-center" tabIndex={-1}>
+                      {isRenaming ? (
+                        <ViewComponent.EditableRowTitle
+                          value={getName(item)}
+                          placeholder="Enter name"
+                          className="font-medium"
+                          autoFocus={!isTestingRenaming}
+                          onSubmitEditing={(value: string) => {
+                            if (value !== getName(item)) {
+                              onRename?.(item, value);
+                            }
+                            setRenamingId(undefined);
+                          }}
+                        />
+                      ) : (
+                        <ViewComponent.RowTitle
+                          className={cx(
+                            "font-medium",
+                            isSelected && "text-primary"
+                          )}
+                        >
+                          {getName(item)}
+                        </ViewComponent.RowTitle>
+                      )}
+                    </div>
+                    {end && (
+                      <div
+                        className={cx(
+                          "flex items-center gap-2",
+                          isSelected && "text-primary"
+                        )}
+                        tabIndex={-1}
+                      >
+                        {end}
+                      </div>
+                    )}
+                  </div>
+                  {below && (
+                    <div
+                      className={cx(
+                        "flex items-center",
+                        isSelected && "text-primary"
+                      )}
+                      tabIndex={-1}
+                    >
+                      {below}
+                    </div>
+                  )}
+                </div>
+              </div>
+            </ViewComponent.Row>
+          );
+        }}
+      />
+    );
+  })
+);

package/src/components/ListView.tsx

@@ -147,9 +147,10 @@ function ListViewEditableRowTitle({
     // 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();
-    }, 0);
+    }, 1);
   }, [autoFocus]);
 
   return (
@@ -1124,15 +1125,15 @@ export namespace ListView {
   export const DragIndicator = ListViewDragIndicatorElement;
   export const rowHeight = ROW_HEIGHT;
   export const sectionHeaderLabelHeight = SECTION_HEADER_LABEL_HEIGHT;
-  export const calculateHeight = (
-    items: number,
-    headerCount: number,
-    headerVariant: ListViewSectionHeaderVariant
-  ) => {
+  export const calculateHeight = ({
+    menuItemsCount,
+    sectionHeaderCount,
+  }: {
+    menuItemsCount: number;
+    sectionHeaderCount: number;
+  }) => {
     return (
-      items * rowHeight +
-      headerCount *
-        (headerVariant === "label" ? sectionHeaderLabelHeight : rowHeight)
+      menuItemsCount * rowHeight + sectionHeaderCount * sectionHeaderLabelHeight
     );
   };
   export const normalizeDestinationIndex = normalizeListDestinationIndex;

package/src/components/SearchCompletionMenu.tsx

@@ -1,13 +1,15 @@
 import {
   ComboboxMenu,
-  ComboboxOption,
   Divider,
   IScoredItem,
   InputField,
   ListView,
+  SelectableMenuItem,
   Small,
+  cssVars,
   fuzzyFilter,
   getNextIndex,
+  isSelectableMenuItem,
 } from "@noya-app/noya-designsystem";
 import { getCurrentPlatform, handleKeyboardEvent } from "@noya-app/noya-keymap";
 import React, {
@@ -32,10 +34,10 @@ export const SearchCompletionMenu = forwardRef(function SearchCompletionMenu(
     items,
     width = 200,
   }: {
-    onSelect: (item: ComboboxOption) => void;
-    onHover?: (item: ComboboxOption) => void;
+    onSelect: (item: SelectableMenuItem<string>) => void;
+    onHover?: (item: SelectableMenuItem<string>) => void;
     onClose: () => void;
-    items: ComboboxOption[];
+    items: SelectableMenuItem<string>[];
     width?: number;
   },
   forwardedRef: React.ForwardedRef<ISearchCompletionMenu>
@@ -56,12 +58,14 @@ export const SearchCompletionMenu = forwardRef(function SearchCompletionMenu(
   const results = useMemo(
     () =>
       fuzzyFilter({
-        items: items.map((item) => item.name),
+        items: items.map((item) =>
+          typeof item.title === "string" ? item.title : item.value
+        ),
         query: search,
       }).map((item) => ({
         ...item,
         ...items[item.index],
-      })) as (ComboboxOption & IScoredItem)[],
+      })) as (SelectableMenuItem<string> & IScoredItem)[],
     [items, search]
   );
 
@@ -96,7 +100,7 @@ export const SearchCompletionMenu = forwardRef(function SearchCompletionMenu(
   };
 
   const selectAndClose = useCallback(
-    (item: ComboboxOption) => {
+    (item: SelectableMenuItem<string>) => {
       onSelect(item);
       onClose();
     },
@@ -152,32 +156,11 @@ export const SearchCompletionMenu = forwardRef(function SearchCompletionMenu(
             borderRadius: 0,
             outline: "none",
             boxShadow: "none",
-            backgroundColor: "white",
+            backgroundColor: cssVars.colors.inputBackground,
             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 />
@@ -188,8 +171,9 @@ export const SearchCompletionMenu = forwardRef(function SearchCompletionMenu(
           items={results}
           selectedIndex={index}
           onSelectItem={(item) => {
-            if (item.type === "sectionHeader") return;
-            selectAndClose(item);
+            if (isSelectableMenuItem(item)) {
+              selectAndClose(item);
+            }
           }}
           onHoverIndex={setIndex}
         />

package/src/components/SegmentedControl.tsx

@@ -2,16 +2,16 @@ import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import React, {
   createContext,
   forwardRef,
-  memo,
   ReactNode,
   useCallback,
   useContext,
   useMemo,
 } from "react";
+import { memoGeneric } from "../../../noya-react-utils/src/utils/reactGenerics";
 import { useLabel } from "../hooks/useLabel";
 import { cx } from "../utils/classNames";
 import { renderIcon } from "./Icons";
-import { RegularMenuItem } from "./internal/Menu";
+import { SelectableMenuItem } from "./internal/Menu";
 import { Tooltip } from "./Tooltip";
 
 type SegmentedControlColorScheme = "primary" | "secondary";
@@ -43,7 +43,10 @@ export type SegmentedControlItemProps<T extends string> = {
   className?: string;
   style?: React.CSSProperties;
   tooltip?: ReactNode;
-} & Pick<RegularMenuItem<T>, "value" | "disabled" | "icon" | "role">;
+} & Pick<
+  SelectableMenuItem<T>,
+  "value" | "disabled" | "icon" | "role" | "title"
+>;
 
 const SegmentedControlItem = forwardRef(function SegmentedControlItem<
   T extends string,
@@ -104,7 +107,7 @@ const Separator = ({ transparent }: { transparent: boolean }) => (
   />
 );
 
-export const SegmentedControl = memo(function SegmentedControl<
+export const SegmentedControl = memoGeneric(function SegmentedControl<
   T extends string,
 >({
   id: idProp,

package/src/components/SelectMenu.tsx

@@ -14,9 +14,15 @@ import React, {
 } from "react";
 import { useLabel, useLabelPosition } from "../hooks/useLabel";
 import { cx } from "../utils/classNames";
+
 import { Button } from "./Button";
 import { renderIcon } from "./Icons";
-import { MenuItem, RegularMenuItem, styles } from "./internal/Menu";
+import {
+  isSelectableMenuItem,
+  MenuItem,
+  SelectableMenuItem,
+  styles,
+} from "./internal/Menu";
 import { MenuComponents, MenuViewport } from "./internal/MenuViewport";
 import { InsetLabel } from "./Label";
 
@@ -141,10 +147,8 @@ export const SelectMenu = memoGeneric(function SelectMenu<
   ...props
 }: Props<T>) {
   const selectedItem = items.find(
-    (item): item is RegularMenuItem<T> =>
-      item.type !== "separator" &&
-      item.type !== "sectionHeader" &&
-      item.value === value
+    (item): item is SelectableMenuItem<T> =>
+      isSelectableMenuItem(item) && item.value === value
   );
   const icon = selectedItem?.icon;
   const [internalOpen, setInternalOpen] = useState(open);

package/src/components/Switch.tsx

@@ -38,7 +38,7 @@ export const Switch = function Switch({
         onChange(newValue);
       }}
       className={cx(
-        "all-unset w-8 h-[19px] bg-active-background rounded-full relative cursor-pointer [webkit-tap-highlight-color:rgba(0,0,0,0)] focus:ring-2 focus:ring-primary focus:ring-offset-[1px] outline-none data-[state=checked]:bg-primary transition-all",
+        "all-unset w-8 h-[19px] bg-active-background rounded-full relative cursor-pointer ring-offset-background [webkit-tap-highlight-color:rgba(0,0,0,0)] focus:ring-2 focus:ring-primary focus:ring-offset-[1px] outline-none data-[state=checked]:bg-primary transition-all",
         colorScheme === "secondary" && "data-[state=checked]:bg-secondary",
         "focus:z-interactable",
         className

package/src/components/Toolbar.tsx

@@ -1,14 +1,15 @@
 import { DropdownChevronIcon } from "@noya-app/noya-icons";
 import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
 import React from "react";
+
 import { BaseToolbar } from "./BaseToolbar";
 import { Button } from "./Button";
 import { DropdownMenu } from "./DropdownMenu";
 import { renderIcon } from "./Icons";
-import type { MenuItem } from "./internal/Menu";
 import {
   getKeyboardShortcutsForMenuItems,
-  SectionHeader,
+  isSelectableMenuItem,
+  MenuItem,
 } from "./internal/Menu";
 import { Spacer } from "./Spacer";
 
@@ -86,9 +87,9 @@ export function ToolbarMenu<T extends string>({
     <>
       {items.map((item, i) => {
         if (item.type === "separator") return null;
-        if (item.type === "sectionHeader") return <SectionHeader {...item} />;
+        if (item.type === "sectionHeader") return null;
 
-        if (!item.items) {
+        if (isSelectableMenuItem(item)) {
           return (
             <Button
               key={i}

package/src/components/TreeView.tsx

@@ -14,6 +14,7 @@ type TreeRowBaseProps = {
   expanded?: boolean;
   chevronClassName?: string;
   onClickChevron?: ({ altKey }: { altKey: boolean }) => void;
+  onDoubleClick?: () => void;
 };
 
 type TreeViewRowProps<MenuItemType extends string> =

package/src/components/WorkspaceLayout.tsx

@@ -73,17 +73,17 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
     children,
     onChangeLayoutState,
     leftOptions: {
-      initialSize: leftInitialSize = 280,
       minSize: leftMinSize = 200,
       maxSize: leftMaxSize = 500,
+      initialSize: leftInitialSize = 280,
       resizable: leftResizable = true,
       style: leftStyle,
       className: leftClassName,
     } = {},
     rightOptions: {
-      initialSize: rightInitialSize = 280,
       minSize: rightMinSize = 200,
       maxSize: rightMaxSize = 500,
+      initialSize: rightInitialSize = 280,
       resizable: rightResizable = true,
       style: rightStyle,
       className: rightClassName,
@@ -99,8 +99,21 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
       : (size / windowSize.width) * 100;
   }
 
-  const leftSidebarPercentage = getPercentage(leftInitialSize);
-  const rightSidebarPercentage = getPercentage(rightInitialSize);
+  function clampPercentage(
+    value: number,
+    min: number | undefined,
+    max: number | undefined
+  ) {
+    let result = value;
+    if (min !== undefined) {
+      result = Math.max(result, min);
+    }
+    if (max !== undefined) {
+      result = Math.min(result, max);
+    }
+    return result;
+  }
+
   const leftSidebarMinPercentage =
     leftMinSize !== undefined ? getPercentage(leftMinSize) : undefined;
   const rightSidebarMinPercentage =
@@ -110,6 +123,17 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
   const rightSidebarMaxPercentage =
     rightMaxSize !== undefined ? getPercentage(rightMaxSize) : undefined;
 
+  const leftSidebarPercentage = clampPercentage(
+    getPercentage(leftInitialSize),
+    leftSidebarMinPercentage,
+    leftSidebarMaxPercentage
+  );
+  const rightSidebarPercentage = clampPercentage(
+    getPercentage(rightInitialSize),
+    rightSidebarMinPercentage,
+    rightSidebarMaxPercentage
+  );
+
   const panelGroupRef = useRef<ImperativePanelGroupHandle>(null);
   const leftSidebarRef = useRef<ImperativePanelHandle>(null);
   const rightSidebarRef = useRef<ImperativePanelHandle>(null);