@noya-app/noya-designsystem 0.1.43 → 0.1.45

package/src/components/SelectMenu.tsx

@@ -12,17 +12,19 @@ import React, {
   useMemo,
   useState,
 } 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 { Spacer } from "./Spacer";
+import { MenuComponents, MenuViewport } from "./internal/MenuViewport";
+import { InsetLabel } from "./Label";
 
 type Props<T extends string> = {
   id?: string;
   style?: React.CSSProperties;
   className?: string;
-  menuItems: MenuItem<T>[];
+  items: MenuItem<T>[];
   value: T;
   onSelect?: (value: T) => void;
   placeholder?: string;
@@ -31,6 +33,7 @@ type Props<T extends string> = {
   label?: React.ReactNode;
   onFocus?: FocusEventHandler;
   onBlur?: FocusEventHandler;
+  contentStyle?: React.CSSProperties;
 } & Pick<SelectProps, "open" | "onOpenChange">;
 
 const readOnlyStyle: CSSProperties = {
@@ -38,9 +41,6 @@ const readOnlyStyle: CSSProperties = {
   textAlign: "left",
 };
 
-export const labelTextStyles = `font-sans text-label uppercase text-text-disabled leading-[19px] font-bold text-[60%]`;
-const labelStyles = `pointer-events-none flex items-center absolute top-0 bottom-0 right-[1.3rem] z-label`;
-
 const scrollButtonStyles = `
   flex 
   items-center 
@@ -51,31 +51,109 @@ const scrollButtonStyles = `
   hover:text-text
 `;
 
+interface SelectMenuTriggerProps {
+  id?: string;
+  style?: React.CSSProperties;
+  className?: string;
+  disabled?: boolean;
+  icon?: React.ReactNode;
+  placeholder?: string;
+  isOpen?: boolean;
+  onFocus?: FocusEventHandler;
+  onBlur?: FocusEventHandler;
+  label?: React.ReactNode;
+}
+
+const SelectMenuTrigger = memoGeneric(function SelectMenuTrigger({
+  style,
+  className,
+  disabled,
+  icon,
+  placeholder,
+  isOpen,
+  onFocus,
+  onBlur,
+  ...props
+}: SelectMenuTriggerProps) {
+  const { label, fieldId: id } = useLabel({
+    label: props.label,
+    fieldId: props.id,
+  });
+  const labelPosition = useLabelPosition();
+
+  return (
+    <Select.SelectTrigger asChild onFocus={onFocus} onBlur={onBlur}>
+      <Button
+        id={id}
+        style={style}
+        className={cx(
+          className ?? "flex w-full gap-1.5",
+          "flex-1 focus:z-interactable relative",
+          isOpen && "ring-2 ring-primary"
+        )}
+        disabled={disabled}
+      >
+        {icon && <span className="pr-1.5">{renderIcon(icon)}</span>}
+        {label && labelPosition === "inset" && (
+          <InsetLabel className="pr-4" htmlFor={id}>
+            {label}
+          </InsetLabel>
+        )}
+        <span className="flex-1 flex">
+          <Select.Value placeholder={placeholder} />
+        </span>
+
+        <span className="px-0.5">
+          <DropdownChevronIcon
+            className={cx(
+              "transition-transform duration-100",
+              isOpen ? "rotate-180" : "rotate-0"
+            )}
+          />
+        </span>
+      </Button>
+    </Select.SelectTrigger>
+  );
+});
+
+const Components: MenuComponents = {
+  Item: Select.Item,
+  ItemText: Select.ItemText,
+  Separator: Select.Separator,
+};
+
 export const SelectMenu = memoGeneric(function SelectMenu<
   T extends string = string,
 >({
-  id,
   style,
   className,
-  menuItems,
+  items,
   value,
   onSelect,
   placeholder,
   disabled,
   readOnly,
-  label,
   open,
   onFocus,
   onBlur,
   onOpenChange,
+  contentStyle,
+  ...props
 }: Props<T>) {
-  const selectedItem = menuItems.find(
+  const selectedItem = items.find(
     (item): item is RegularMenuItem<T> =>
-      typeof item !== "string" && item.value === value
+      item.type !== "separator" &&
+      item.type !== "sectionHeader" &&
+      item.value === value
   );
   const icon = selectedItem?.icon;
   const [internalOpen, setInternalOpen] = useState(open);
 
+  const { label, fieldId: id } = useLabel({
+    label: props.label,
+    fieldId: props.id,
+  });
+
   const handleOpenChange = (open: boolean) => {
     if (onOpenChange) {
       onOpenChange(open);
@@ -89,92 +167,35 @@ export const SelectMenu = memoGeneric(function SelectMenu<
         id={id}
         style={style}
         contentStyle={readOnlyStyle}
-        className={cx(`${className} flex-1 focus:z-interactable`)}
+        className={cx(`${className} flex-1 focus:z-interactable gap-1.5`)}
         disabled={disabled}
       >
-        {icon && (
-          <>
-            {renderIcon(icon)}
-            <Spacer.Horizontal inline size={6} />
-          </>
-        )}
+        {icon && renderIcon(icon)}
         <span className="flex flex-1">{selectedItem?.title ?? value}</span>
       </Button>
     ),
     [icon, id, style, className, disabled, value, selectedItem]
   );
 
-  const trigger = useMemo(
-    () => (
-      <Select.SelectTrigger asChild onFocus={onFocus} onBlur={onBlur}>
-        <Button
-          id={id}
-          style={style}
-          className={cx(
-            className ?? "w-full",
-            "flex-1 focus:z-interactable relative",
-            internalOpen && "ring-2 ring-primary"
-          )}
-          disabled={disabled}
-        >
-          {icon && (
-            <>
-              {renderIcon(icon)}
-              <Spacer.Horizontal inline size={6} />
-            </>
-          )}
-          <span className="flex flex-1 mr-1.5">
-            <Select.Value placeholder={placeholder} />
-          </span>
-          {label && (
-            <label htmlFor={id} className={cx(labelStyles, labelTextStyles)}>
-              {label}
-            </label>
-          )}
-          <DropdownChevronIcon
-            className={cx(
-              "transition-transform duration-100",
-              internalOpen ? "rotate-180" : "rotate-0"
-            )}
-          />
-        </Button>
-      </Select.SelectTrigger>
-    ),
-    [
-      onFocus,
-      onBlur,
-      id,
-      style,
-      className,
-      disabled,
-      icon,
-      placeholder,
-      label,
-      internalOpen,
-    ]
-  );
-
-  if (readOnly) {
-    return label ? (
-      <div className="flex flex-col relative">
-        {readOnlyButton}
-        <label className={labelStyles} htmlFor={id}>
-          {label}
-        </label>
-      </div>
-    ) : (
-      readOnlyButton
-    );
-  }
-
-  return (
+  const content = (
     <Select.Root
       value={value}
       onValueChange={onSelect}
       open={open}
       onOpenChange={handleOpenChange}
     >
-      {trigger}
+      <SelectMenuTrigger
+        id={id}
+        style={style}
+        className={className}
+        disabled={disabled}
+        icon={icon}
+        placeholder={placeholder}
+        isOpen={internalOpen}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        label={label}
+      />
       <Select.Portal>
         <Select.Content
           className={styles.contentStyle}
@@ -184,6 +205,8 @@ export const SelectMenu = memoGeneric(function SelectMenu<
           align="end"
           style={{
             width: "var(--radix-select-trigger-width)",
+            maxHeight: "500px",
+            ...contentStyle,
           }}
         >
           <Select.ScrollUpButton className={scrollButtonStyles}>
@@ -192,19 +215,7 @@ export const SelectMenu = memoGeneric(function SelectMenu<
             />
           </Select.ScrollUpButton>
           <Select.Viewport>
-            {menuItems.map((menuItem) => {
-              if (typeof menuItem === "string") {
-                return <Select.Separator className={styles.separatorStyle} />;
-              }
-
-              const value = menuItem.value ?? "";
-
-              return (
-                <SelectItem key={value} value={value} icon={menuItem.icon}>
-                  {menuItem.title ?? value}
-                </SelectItem>
-              );
-            })}
+            <MenuViewport items={items} Components={Components} />
           </Select.Viewport>
           <Select.ScrollDownButton className={scrollButtonStyles}>
             <ChevronDownIcon />
@@ -213,33 +224,6 @@ export const SelectMenu = memoGeneric(function SelectMenu<
       </Select.Portal>
     </Select.Root>
   );
-});
 
-const SelectItem = React.forwardRef(
-  (
-    {
-      children,
-      icon,
-      disabled,
-      ...props
-    }: Select.SelectItemProps & { icon?: React.ReactNode },
-    forwardedRef: React.ForwardedRef<HTMLDivElement>
-  ) => {
-    return (
-      <Select.Item
-        className={styles.itemStyle({ disabled })}
-        disabled={disabled}
-        {...props}
-        ref={forwardedRef}
-      >
-        {icon && (
-          <>
-            {renderIcon(icon)}
-            <Spacer.Horizontal size={8} />
-          </>
-        )}
-        <Select.ItemText>{children}</Select.ItemText>
-      </Select.Item>
-    );
-  }
-);
+  return readOnly ? readOnlyButton : content;
+});

package/src/components/SidebarList.tsx

@@ -0,0 +1,252 @@
+import { useFileDropTarget } from "@noya-app/react-utils";
+import React, { useRef, useState } from "react";
+import { cssVars } from "../theme";
+import { cx } from "../utils/classNames";
+import { updateSelection } from "../utils/selection";
+import { MenuItem } from "./internal/Menu";
+import type { ListViewRootProps } from "./ListView";
+import { ListView } from "./ListView";
+import { TreeView } from "./TreeView";
+
+interface SidebarListProps<T, M extends string = string> {
+  className?: string;
+  items: T[];
+  getId: (item: T) => string;
+  getName: (item: T) => string;
+  getExpanded?: (item: T) => boolean | undefined;
+  expandable?: boolean;
+  menuItems?: MenuItem<M>[];
+  onSelectMenuItem?: (action: M, selectedItems: T[]) => void;
+  onRename?: (itemId: string, newName: string) => void;
+  renderThumbnail?: (item: T) => React.ReactNode;
+  renderHoverAction?: (item: T, selected: boolean) => React.ReactNode;
+  renderDetail?: (item: T) => React.ReactNode;
+  onSelectionChange?: (selectedItems: T[]) => void;
+  scrollable?: boolean;
+  itemRoleDescription?: string;
+  /** Position of the detail content. Defaults to 'end'. */
+  detailPosition?: "end" | "below";
+  /** Size of the list items. Defaults to 'medium'. */
+  size?: "medium" | "large";
+  /** For testing: Override the hover state with a specific item ID */
+  testHoveredId?: string;
+  /** For testing: Override the renaming state with a specific item ID */
+  testRenamingId?: string;
+  setExpanded?: (item: T, expanded: boolean) => void;
+  acceptsDrop?: ListViewRootProps["acceptsDrop"];
+  onMoveItem?: ListViewRootProps["onMoveItem"];
+  getDepth?: (item: T) => number;
+  onFilesDrop?: (event: React.DragEvent<Element>) => void;
+}
+
+export function SidebarList<T, M extends string = string>({
+  className,
+  items,
+  getId,
+  getName,
+  expandable,
+  getExpanded,
+  getDepth,
+  setExpanded,
+  menuItems,
+  onSelectMenuItem,
+  onRename,
+  renderThumbnail,
+  renderHoverAction,
+  renderDetail,
+  onSelectionChange,
+  itemRoleDescription = "clickable item",
+  detailPosition = "end",
+  size = "medium",
+  testHoveredId,
+  testRenamingId,
+  scrollable,
+  acceptsDrop,
+  onMoveItem,
+  onFilesDrop,
+}: SidebarListProps<T, M>) {
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
+  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) => {
+    const newSelectedIds = updateSelection(
+      items.map(getId),
+      selectedIds,
+      itemId,
+      event
+    );
+    setSelectedIds(newSelectedIds);
+
+    if (onSelectionChange) {
+      const selectedItems = items.filter((item) =>
+        newSelectedIds.includes(getId(item))
+      );
+      onSelectionChange(selectedItems);
+    }
+  };
+
+  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
+  );
+
+  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 isSelected = selectedIds.includes(id);
+        const isRenaming = renamingId === id;
+
+        const thumbnail = renderThumbnail?.(item);
+        const action =
+          isHovered && !isRenaming && renderHoverAction?.(item, isSelected);
+        const end =
+          action ?? (detailPosition === "end" && renderDetail?.(item));
+        const below = detailPosition === "below" && renderDetail?.(item);
+
+        return (
+          <ViewComponent.Row
+            id={id}
+            key={id}
+            role="option"
+            sortable={expandable}
+            aria-roledescription={itemRoleDescription}
+            aria-label={getName(item)}
+            aria-selected={isSelected}
+            className="cursor-pointer p-1"
+            chevronClassName={expandable ? "relative left-2" : undefined}
+            hovered={isHovered}
+            selected={isSelected}
+            expanded={expanded}
+            depth={getDepth?.(item)}
+            onHoverChange={(hovered: boolean) =>
+              setHoveredId(hovered ? id : undefined)
+            }
+            onPress={(e: ListView.ClickInfo) => handleSelect(id, e)}
+            onKeyDown={(e: React.KeyboardEvent) => {
+              if (e.key !== "Enter" && e.key !== " ") return;
+
+              e.preventDefault();
+              handleSelect(id, e);
+            }}
+            menuItems={menuItems}
+            onSelectMenuItem={handleMenuAction}
+            onMenuOpenChange={(open: boolean) => {
+              if (open && !isSelected) {
+                handleSelect(id, {
+                  shiftKey: false,
+                  altKey: false,
+                  metaKey: false,
+                  ctrlKey: false,
+                });
+              }
+            }}
+            tabIndex={0}
+            onClickChevron={() => {
+              if (expanded === undefined) 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"
+                  )}
+                  style={{
+                    backgroundColor: 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={cx(
+                          "font-medium",
+                          testRenamingId && "bg-primary-pastel"
+                        )}
+                        autoFocus
+                        onSubmitEditing={(value: string) => {
+                          if (value !== getName(item) && onRename) {
+                            onRename(id, value);
+                          }
+                          setRenamingId(undefined);
+                        }}
+                      />
+                    ) : (
+                      <ViewComponent.RowTitle
+                        className="font-medium"
+                        onDoubleClick={(e: React.MouseEvent) => {
+                          e.stopPropagation();
+                          if (onRename) {
+                            setRenamingId(id);
+                          }
+                        }}
+                      >
+                        {getName(item)}
+                      </ViewComponent.RowTitle>
+                    )}
+                  </div>
+                  {end && (
+                    <div className="flex items-center gap-2" tabIndex={-1}>
+                      {end}
+                    </div>
+                  )}
+                </div>
+                {below && (
+                  <div className="flex items-center" tabIndex={-1}>
+                    {below}
+                  </div>
+                )}
+              </div>
+            </div>
+          </ViewComponent.Row>
+        );
+      }}
+    />
+  );
+}

package/src/components/Slider.tsx

@@ -1,6 +1,8 @@
 import * as RadixSlider from "@radix-ui/react-slider";
 import React, { FocusEventHandler, memo, useCallback, useMemo } from "react";
+import { useLabel, useLabelPosition } from "../hooks/useLabel";
 import { cx } from "../utils/classNames";
+import { InsetLabel } from "./Label";
 
 type ColorScheme = "primary" | "secondary";
 
@@ -20,8 +22,6 @@ interface Props {
   readOnly?: boolean;
 }
 
-const labelStyles = `font-sans text-label uppercase text-text-disabled leading-[19px] font-bold text-[60%] pointer-events-none flex items-center z-label`;
-
 const THUMB_WIDTH = 8; // Width of the thumb in pixels
 
 const thumbStyle = {
@@ -29,7 +29,6 @@ const thumbStyle = {
 };
 
 export const Slider = memo(function Slider({
-  id,
   style,
   className,
   value,
@@ -38,16 +37,22 @@ export const Slider = memo(function Slider({
   max,
   step,
   colorScheme,
-  label,
   onFocus,
   onBlur,
   readOnly = false,
+  ...props
 }: Props) {
   const arrayValue = useMemo(
     () => [Math.min(Math.max(value, min), max)],
     [value, min, max]
   );
 
+  const { label, fieldId: id } = useLabel({
+    label: props.label,
+    fieldId: props.id,
+  });
+  const labelPosition = useLabelPosition();
+
   const handleValueChange = useCallback(
     (arrayValue: number[]) => {
       onValueChange(arrayValue[0]);
@@ -90,7 +95,7 @@ export const Slider = memo(function Slider({
       value={arrayValue}
       onValueChange={handleValueChange}
       className={cx(
-        "flex relative items-center select-none touch-none h-[27px] rounded overflow-hidden w-full",
+        "flex relative items-center select-none touch-none h-[27px] rounded overflow-hidden flex-grow max-h-[27px]",
         className
       )}
       style={style}
@@ -98,25 +103,24 @@ export const Slider = memo(function Slider({
       onBlur={onBlur}
       disabled={readOnly}
     >
-      <RadixSlider.Track className="relative flex-grow h-full rounded overflow-hidden bg-input-background">
-        {label && (
-          <label
-            htmlFor={id}
-            className={cx(labelStyles, "absolute top-0 bottom-0 right-2")}
-          >
-            {label}
-          </label>
+      <RadixSlider.Track className="flex-grow h-full rounded overflow-hidden bg-input-background">
+        {label && labelPosition === "inset" && (
+          <InsetLabel htmlFor={id}>{label}</InsetLabel>
         )}
         <div
           style={trackFillStyle}
           className={cx(
             "absolute inset-0 w-full h-full rounded overflow-hidden",
-            colorScheme === undefined && "bg-slider-border",
             colorScheme === "primary" && "bg-primary",
             colorScheme === "secondary" && "bg-secondary"
           )}
         />
       </RadixSlider.Track>
+      {label && labelPosition === "inset" && colorScheme !== undefined && (
+        <InsetLabel className="text-white overflow-hidden" style={labelStyle}>
+          {label}
+        </InsetLabel>
+      )}
       <RadixSlider.Thumb
         style={thumbStyle}
         className={cx(
@@ -126,18 +130,6 @@ export const Slider = memo(function Slider({
           colorScheme === "secondary" && "border-secondary"
         )}
       />
-      {label && (
-        <label
-          htmlFor={id}
-          className={cx(
-            labelStyles,
-            "absolute top-0 bottom-0 left-2 right-2 text-white overflow-hidden flex justify-end"
-          )}
-          style={labelStyle}
-        >
-          {label}
-        </label>
-      )}
     </RadixSlider.Root>
   );
 });

package/src/components/Text.tsx

@@ -55,6 +55,7 @@ export type TextProps = {
   variant: Variant;
   color?: KebabToCamelCase<ThemeColor>;
   children: ReactNode;
+  id?: string;
   onClick?: () => void;
   onDoubleClick?: () => void;
   onKeyDown?: (event: React.KeyboardEvent<HTMLSpanElement>) => void;