@noya-app/noya-designsystem 0.1.44 → 0.1.46

package/src/components/SearchCompletionMenu.tsx

@@ -0,0 +1,210 @@
+import {
+  ComboboxMenu,
+  Divider,
+  IScoredItem,
+  InputField,
+  ListView,
+  SelectableMenuItem,
+  Small,
+  fuzzyFilter,
+  getNextIndex,
+  isSelectableMenuItem,
+} 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: SelectableMenuItem<string>) => void;
+    onHover?: (item: SelectableMenuItem<string>) => void;
+    onClose: () => void;
+    items: SelectableMenuItem<string>[];
+    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) =>
+          typeof item.title === "string" ? item.title : item.value
+        ),
+        query: search,
+      }).map((item) => ({
+        ...item,
+        ...items[item.index],
+      })) as (SelectableMenuItem<string> & 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: SelectableMenuItem<string>) => {
+      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 (isSelectableMenuItem(item)) {
+              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

@@ -2,15 +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";
@@ -42,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,
@@ -77,6 +81,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}
@@ -102,10 +107,10 @@ const Separator = ({ transparent }: { transparent: boolean }) => (
   />
 );
 
-export const SegmentedControl = memo(function SegmentedControl<
+export const SegmentedControl = memoGeneric(function SegmentedControl<
   T extends string,
 >({
-  id,
+  id: idProp,
   value,
   onValueChange,
   colorScheme,
@@ -116,6 +121,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 +141,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}

package/src/components/SelectMenu.tsx

@@ -12,17 +12,25 @@ 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 {
+  isSelectableMenuItem,
+  MenuItem,
+  SelectableMenuItem,
+  styles,
+} from "./internal/Menu";
+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;
@@ -39,9 +47,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 
@@ -52,32 +57,107 @@ 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(
-    (item): item is RegularMenuItem<T> =>
-      typeof item !== "string" && item.value === value
+  const selectedItem = items.find(
+    (item): item is SelectableMenuItem<T> =>
+      isSelectableMenuItem(item) && 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);
@@ -91,92 +171,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}
@@ -196,19 +219,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 />
@@ -217,33 +228,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/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;