@noya-app/noya-designsystem 0.1.45 → 0.1.47

package/src/components/internal/Menu.tsx

@@ -2,15 +2,12 @@ import { getShortcutDisplayParts } from "@noya-app/noya-keymap";
 import React, { memo, ReactNode } from "react";
 import { useDesignSystemConfiguration } from "../../contexts/DesignSystemConfiguration";
 import { cx } from "../../utils/classNames";
+import { IScoredItem } from "../../utils/fuzzyScorer";
 import withSeparatorElements from "../../utils/withSeparatorElements";
 import { IconName } from "../Icons";
 import { Spacer } from "../Spacer";
 import { textStyles } from "../Text";
 
-export type SeparatorItem = {
-  type: "separator";
-};
-
 // From electron
 export type MenuItemRole =
   | "undo"
@@ -61,35 +58,79 @@ export type MenuItemRole =
   | "moveTabToNewWindow"
   | "windowMenu";
 
-export type RegularMenuItem<T extends string> = {
-  value?: T;
-  title: ReactNode;
-  shortcut?: string;
+export type SeparatorItem = {
+  type: "separator";
+};
+
+type BaseMenuItem = {
   checked?: boolean;
   disabled?: boolean;
   icon?: Exclude<ReactNode, string> | IconName;
-  items?: MenuItem<T>[];
   role?: MenuItemRole;
-  type?: undefined;
   alwaysInclude?: boolean;
+  title: NonNullable<ReactNode>;
 };
 
 export type SectionHeaderMenuItem = {
   type: "sectionHeader";
   id: string;
-  title: string;
+  title: ReactNode;
   maxVisibleItems?: number;
   variant?: "normal" | "label";
 };
 
+export type SelectableMenuItem<T extends string> = BaseMenuItem & {
+  type?: undefined;
+  shortcut?: string;
+  value: T;
+};
+
+type SubMenuItem<T extends string> = BaseMenuItem & {
+  type: "submenu";
+  items: MenuItem<T>[];
+  id: string;
+};
+
+export type NonSelectableMenuItem<T extends string> =
+  | SeparatorItem
+  | SectionHeaderMenuItem
+  | SubMenuItem<T>;
+
 export type MenuItem<T extends string> =
   | SeparatorItem
-  | RegularMenuItem<T>
+  | SelectableMenuItem<T>
+  | SectionHeaderMenuItem
+  | SubMenuItem<T>;
+
+type ScoredSelectableMenuItem<T extends string> = SelectableMenuItem<T> &
+  IScoredItem;
+
+export type ScoredMenuItem<T extends string> =
+  | ScoredSelectableMenuItem<T>
   | SectionHeaderMenuItem;
 
 // Extract type T of RegularMenuItem<T> within MenuItem<T>
 export type ExtractMenuItemType<T> =
-  T extends RegularMenuItem<infer U> ? U : never;
+  T extends SelectableMenuItem<infer U> ? U : never;
+
+export const isSelectableMenuItem = <T extends string>(
+  item: MenuItem<T>
+): item is SelectableMenuItem<T> => {
+  return item.type === undefined;
+};
+
+export const isNonSelectableMenuItem = <T extends string>(
+  item: MenuItem<T>
+): item is NonSelectableMenuItem<T> => !isSelectableMenuItem(item);
+
+export const isMenuItemSectionHeader = (
+  item: MenuItem<string>
+): item is SectionHeaderMenuItem => item.type === "sectionHeader";
+
+export const isSelectableMenuItemWithScore = (
+  item: MenuItem<string>
+): item is ScoredSelectableMenuItem<string> =>
+  isSelectableMenuItem(item) && "index" in item && "score" in item;
 
 export const CHECKBOX_WIDTH = 16;
 export const CHECKBOX_RIGHT_INSET = 8;
@@ -132,7 +173,7 @@ function getKeyboardShortcuts<T extends string>(
   if (item.type === "separator") return [];
   if (item.type === "sectionHeader") return [];
 
-  if (item.items) return item.items.flatMap(getKeyboardShortcuts);
+  if (item.type === "submenu") return item.items.flatMap(getKeyboardShortcuts);
 
   if (item.disabled || !item.value || !item.shortcut) return [];
 

package/src/components/internal/MenuViewport.tsx

@@ -65,86 +65,87 @@ export const MenuViewport = <T extends string>({
   return (
     <>
       {items.map((item, index) => {
-        if (item.type === "separator") {
-          return (
-            <Components.Separator
-              key={index}
-              className={styles.separatorStyle}
-            />
-          );
-        }
-
-        if (item.type === "sectionHeader") {
-          return (
-            <SectionHeader
-              isFirst={index === 0}
-              key={item.id}
-              {...item}
-              indented={hasCheckedItem}
-            />
-          );
-        }
+        switch (item.type) {
+          case "separator":
+            return (
+              <Components.Separator
+                key={index}
+                className={styles.separatorStyle}
+              />
+            );
 
-        const value = item.value ?? "";
-
-        if (
-          item.items &&
-          Components.Sub &&
-          Components.SubTrigger &&
-          Components.SubContent &&
-          Components.Portal
-        ) {
-          return (
-            <Components.Sub key={value}>
-              <Components.SubTrigger
-                className={styles.itemStyle({ disabled: item.disabled })}
-                asChild
+          case "sectionHeader":
+            return (
+              <SectionHeader
+                isFirst={index === 0}
+                key={item.id}
+                {...item}
+                indented={hasCheckedItem}
+              />
+            );
+          case "submenu":
+            if (
+              item.items &&
+              Components.Sub &&
+              Components.SubTrigger &&
+              Components.SubContent &&
+              Components.Portal
+            ) {
+              return (
+                <Components.Sub key={item.id}>
+                  <Components.SubTrigger
+                    className={styles.itemStyle({ disabled: item.disabled })}
+                    asChild
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      e.preventDefault();
+                    }}
+                  >
+                    <SelectItem
+                      value={item.id}
+                      icon={item.icon}
+                      checked={item.checked}
+                      onSelect={onSelect}
+                      Components={Components}
+                      indented={hasCheckedItem}
+                    >
+                      <div className="flex items-center flex-1">
+                        {item.title}
+                      </div>
+                      <ChevronRightIcon className="-mr-1" />
+                    </SelectItem>
+                  </Components.SubTrigger>
+                  <Components.Portal>
+                    <Components.SubContent
+                      alignOffset={-5}
+                      className={styles.contentStyle}
+                    >
+                      <MenuViewport
+                        items={item.items}
+                        Components={Components}
+                        onSelect={onSelect}
+                      />
+                    </Components.SubContent>
+                  </Components.Portal>
+                </Components.Sub>
+              );
+            } else return null;
+          default:
+            return (
+              <SelectItem
+                key={item.value}
+                value={item.value}
+                icon={item.icon}
+                checked={item.checked}
+                shortcut={item.shortcut}
+                onSelect={onSelect}
+                Components={Components}
+                indented={hasCheckedItem}
               >
-                <SelectItem
-                  value={value}
-                  icon={item.icon}
-                  checked={item.checked}
-                  shortcut={item.shortcut}
-                  onSelect={onSelect}
-                  Components={Components}
-                  indented={hasCheckedItem}
-                >
-                  <div className="flex items-center flex-1">
-                    {item.title ?? value}
-                  </div>
-                  <ChevronRightIcon className="-mr-1" />
-                </SelectItem>
-              </Components.SubTrigger>
-              <Components.Portal>
-                <Components.SubContent
-                  alignOffset={-5}
-                  className={styles.contentStyle}
-                >
-                  <MenuViewport
-                    items={item.items}
-                    Components={Components}
-                    onSelect={onSelect}
-                  />
-                </Components.SubContent>
-              </Components.Portal>
-            </Components.Sub>
-          );
+                {item.title ?? item.value}
+              </SelectItem>
+            );
         }
-
-        return (
-          <SelectItem
-            key={value}
-            value={value}
-            icon={item.icon}
-            checked={item.checked}
-            shortcut={item.shortcut}
-            onSelect={onSelect}
-            Components={Components}
-            indented={hasCheckedItem}
-          >
-            {item.title ?? value}
-          </SelectItem>
-        );
       })}
     </>
   );

package/src/contexts/DialogContext.tsx

@@ -25,6 +25,12 @@ function createDeferredPromise<T>() {
 }
 
 export type DialogContextValue = {
+  openDialog(options: {
+    title: string;
+    description?: ReactNode;
+    children: ReactNode;
+  }): Promise<void>;
+
   openInputDialog(
     options:
       | string
@@ -66,7 +72,18 @@ type ConfirmationDialogContents = {
   resolve: (value: boolean) => void;
 };
 
-type DialogContents = InputDialogContents | ConfirmationDialogContents;
+type CustomDialogContents = {
+  type: "custom";
+  title: string;
+  description?: ReactNode;
+  children: ReactNode;
+  resolve: () => void;
+};
+
+type DialogContents =
+  | InputDialogContents
+  | ConfirmationDialogContents
+  | CustomDialogContents;
 
 export const DialogProvider = function DialogProvider({
   children,
@@ -136,6 +153,26 @@ export const DialogProvider = function DialogProvider({
       return promise;
     }, []);
 
+  const openCustomDialog: DialogContextValue["openDialog"] = useCallback(
+    (options) => {
+      const { promise, resolve } = createDeferredPromise<void>();
+
+      setContents({
+        type: "custom",
+        title: options.title,
+        description: options.description,
+        children: options.children,
+        resolve: () => {
+          resolve();
+          setContents(undefined);
+        },
+      });
+
+      return promise;
+    },
+    []
+  );
+
   const handleKeyDown = useCallback(
     (event: React.KeyboardEvent<HTMLInputElement>) => {
       if (event.key !== "Enter") return;
@@ -162,11 +199,12 @@ export const DialogProvider = function DialogProvider({
       <DialogContext.Provider
         value={useMemo(
           () => ({
+            openDialog: openCustomDialog,
             openInputDialog: open,
             openConfirmationDialog: openConfirmation,
             containsElement,
           }),
-          [containsElement, open, openConfirmation]
+          [containsElement, open, openConfirmation, openCustomDialog]
         )}
       >
         {children}
@@ -221,12 +259,16 @@ export const DialogProvider = function DialogProvider({
               OK
             </Button>
           </div>
+        ) : contents?.type === "custom" ? (
+          <>{contents.children}</>
         ) : (
           <>
             <InputField.Root>
               <InputField.Input
                 ref={inputRef}
-                placeholder={contents?.placeholder}
+                placeholder={
+                  contents?.type === "input" ? contents.placeholder : undefined
+                }
                 value={contents?.type === "input" ? contents.inputValue : ""}
                 onChange={(value: string) => {
                   setContents((contents) =>
@@ -262,7 +304,7 @@ export const DialogProvider = function DialogProvider({
   );
 };
 
-function useDialog(): DialogContextValue {
+export function useDialogContext(): DialogContextValue {
   const value = useContext(DialogContext);
 
   if (!value) {
@@ -273,13 +315,17 @@ function useDialog(): DialogContextValue {
 }
 
 export function useOpenInputDialog() {
-  return useDialog().openInputDialog;
+  return useDialogContext().openInputDialog;
 }
 
 export function useDialogContainsElement() {
-  return useDialog().containsElement;
+  return useDialogContext().containsElement;
 }
 
 export function useOpenConfirmationDialog() {
-  return useDialog().openConfirmationDialog;
+  return useDialogContext().openConfirmationDialog;
+}
+
+export function useOpenDialog() {
+  return useDialogContext().openDialog;
 }

package/src/index.css

@@ -104,7 +104,8 @@
   --popover-divider: rgba(255, 255, 255, 0.08);
   --listview-raised-background: rgba(181, 178, 255, 0.1);
   --listview-editing-background: #000;
-  --slider-thumb-background: rgb(248, 248, 250);
+  --slider-thumb-background: var(--input-background-light);
+  --slider-border: var(--divider);
   --mask: rgb(102, 187, 106);
   --transparent-checker: rgba(255, 255, 255, 0.3);
   --scrollbar: rgba(199, 199, 199, 0.2);

package/src/index.tsx

@@ -2,9 +2,11 @@
 export * from "./components/ActivityIndicator";
 export * from "./components/AnimatePresence";
 export * from "./components/Avatar";
+export * from "./components/Breadcrumbs";
 export * from "./components/Button";
 export * from "./components/Checkbox";
 export * from "./components/Chip";
+export * from "./components/Collection";
 export * from "./components/Combobox";
 export * from "./components/ComboboxMenu";
 export * from "./components/CommandPalette";
@@ -13,11 +15,13 @@ export * from "./components/Dialog";
 export * from "./components/Divider";
 export * from "./components/DraggableMenuButton";
 export * from "./components/DropdownMenu";
+export * from "./components/EditableText";
 export * from "./components/Fade";
 export * from "./components/FillInputField";
 export * from "./components/FillPreviewBackground";
 export * from "./components/FloatingWindow";
 export * from "./components/GradientPicker";
+export * from "./components/Grid";
 export * from "./components/GridView";
 export * from "./components/IconButton";
 export * from "./components/Icons";
@@ -27,14 +31,13 @@ export * from "./components/internal/Menu";
 export type {
   ExtractMenuItemType,
   MenuItem,
-  RegularMenuItem,
-  SectionHeaderMenuItem,
-  SeparatorItem,
+  SelectableMenuItem,
 } from "./components/internal/Menu";
 export * from "./components/internal/MenuViewport";
 export * from "./components/Label";
 export * from "./components/LabeledElementView";
 export * from "./components/LabeledField";
+export * from "./components/List";
 export * from "./components/ListView";
 export * from "./components/Message";
 export * from "./components/Popover";
@@ -43,7 +46,6 @@ export * from "./components/ScrollArea";
 export * from "./components/SearchCompletionMenu";
 export * from "./components/SegmentedControl";
 export * from "./components/SelectMenu";
-export * from "./components/SidebarList";
 export * from "./components/Slider";
 export * from "./components/Sortable";
 export type { RelativeDropPosition } from "./components/Sortable";