@noya-app/noya-designsystem 0.1.44 → 0.1.45

package/src/components/DropdownMenu.tsx

@@ -1,4 +1,3 @@
-import { CheckIcon, ChevronRightIcon } from "@noya-app/noya-icons";
 import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
 import { forwardRefGeneric, memoGeneric } from "@noya-app/react-utils";
 import * as RadixDropdownMenu from "@radix-ui/react-dropdown-menu";
@@ -6,132 +5,46 @@ import React, {
   ComponentProps,
   ForwardedRef,
   SyntheticEvent,
-  useCallback,
   useMemo,
 } from "react";
-import { MenuItemProps, MenuProps } from "./ContextMenu";
-import { renderIcon } from "./Icons";
-import { Spacer } from "./Spacer";
-import {
-  CHECKBOX_RIGHT_INSET,
-  CHECKBOX_WIDTH,
-  KeyboardShortcut,
-  SEPARATOR_ITEM,
-  getKeyboardShortcutsForMenuItems,
-  styles,
-} from "./internal/Menu";
-
-const DropdownMenuItem = memoGeneric(function ContextMenuItem<
-  T extends string,
->({
-  value,
-  children,
-  onSelect,
-  checked,
-  disabled,
-  indented,
-  icon,
-  items,
-  shortcut,
-}: MenuItemProps<T>) {
-  const handleSelectItem = useCallback(() => {
-    if (!value) return;
-
-    onSelect(value);
-  }, [onSelect, value]);
-
-  if (checked) {
-    return (
-      <RadixDropdownMenu.CheckboxItem
-        checked={checked}
-        disabled={disabled}
-        onSelect={handleSelectItem}
-        className={styles.itemStyle({ disabled })}
-      >
-        <RadixDropdownMenu.ItemIndicator className={styles.itemIndicatorStyle}>
-          <CheckIcon />
-        </RadixDropdownMenu.ItemIndicator>
-        {icon && (
-          <>
-            {renderIcon(icon)}
-            <Spacer.Horizontal size={8} />
-          </>
-        )}
-        {children}
-      </RadixDropdownMenu.CheckboxItem>
-    );
-  }
-
-  const element = (
-    <RadixDropdownMenu.Item
-      disabled={disabled}
-      onSelect={handleSelectItem}
-      className={styles.itemStyle({ disabled })}
-    >
-      {indented && (
-        <Spacer.Horizontal size={CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET} />
-      )}
-      {icon && (
-        <>
-          {renderIcon(icon)}
-          <Spacer.Horizontal size={8} />
-        </>
-      )}
-      {children}
-      {shortcut && (
-        <>
-          <Spacer.Horizontal />
-          <Spacer.Horizontal size={24} />
-          <KeyboardShortcut shortcut={shortcut} />
-        </>
-      )}
-      {items && items.length > 0 && (
-        <>
-          <Spacer.Horizontal />
-          <Spacer.Horizontal size={16} />
-          <ChevronRightIcon />
-        </>
-      )}
-    </RadixDropdownMenu.Item>
-  );
-
-  if (items && items.length > 0) {
-    return (
-      <DropdownMenuRoot
-        isNested
-        items={items}
-        onSelect={onSelect}
-        alignOffset={-5}
-      >
-        {element}
-      </DropdownMenuRoot>
-    );
-  } else {
-    return element;
-  }
-});
+import { MenuProps } from "./ContextMenu";
+import { getKeyboardShortcutsForMenuItems, styles } from "./internal/Menu";
+import { MenuViewport } from "./internal/MenuViewport";
 
 /* ----------------------------------------------------------------------------
  * Root
  * ------------------------------------------------------------------------- */
 
-type DropdownRootProps<T extends string> = MenuProps<T> & {
+export type DropdownRootProps<T extends string> = MenuProps<T> & {
   open?: boolean;
   onCloseAutoFocus?: React.EventHandler<SyntheticEvent<unknown>>;
   emptyState?: React.ReactNode;
+  contentStyle?: React.CSSProperties;
 } & Pick<
     ComponentProps<typeof RadixDropdownMenu.Content>,
     "side" | "sideOffset" | "align" | "alignOffset" | "collisionPadding"
   >;
 
+const Components = {
+  Separator: RadixDropdownMenu.Separator,
+  ItemText: React.Fragment,
+  Item: RadixDropdownMenu.Item,
+  CheckboxItem: RadixDropdownMenu.CheckboxItem,
+  ItemIndicator: RadixDropdownMenu.ItemIndicator,
+  SubTrigger: RadixDropdownMenu.SubTrigger,
+  SubContent: RadixDropdownMenu.SubContent,
+  Sub: RadixDropdownMenu.Sub,
+  Portal: RadixDropdownMenu.Portal,
+};
+
 const DropdownMenuRoot = forwardRefGeneric(function DropdownMenuRoot<
   T extends string,
->(
-  {
+>(props: DropdownRootProps<T>, forwardedRef: ForwardedRef<HTMLElement>) {
+  const {
     items,
     children,
     onSelect,
-    isNested,
+
     shouldBindKeyboardShortcuts,
     onOpenChange,
     open,
@@ -142,77 +55,56 @@ const DropdownMenuRoot = forwardRefGeneric(function DropdownMenuRoot<
     alignOffset,
     collisionPadding = 8,
     emptyState,
-  }: DropdownRootProps<T>,
-  forwardedRef: ForwardedRef<HTMLElement>
-) {
-  const hasCheckedItem = items.some(
-    (item) => item !== SEPARATOR_ITEM && item.checked
-  );
+    contentStyle,
+  } = props;
 
   const keymap = useMemo(
     () =>
-      isNested || shouldBindKeyboardShortcuts === false
+      shouldBindKeyboardShortcuts === false
         ? {}
         : getKeyboardShortcutsForMenuItems(items, onSelect),
-    [isNested, items, onSelect, shouldBindKeyboardShortcuts]
+    [items, onSelect, shouldBindKeyboardShortcuts]
   );
 
   useKeyboardShortcuts(keymap);
 
-  const RootComponent = isNested
-    ? RadixDropdownMenu.Sub
-    : RadixDropdownMenu.Root;
-  const TriggerComponent = isNested
-    ? RadixDropdownMenu.SubTrigger
-    : RadixDropdownMenu.Trigger;
-  const ContentComponent = isNested
-    ? RadixDropdownMenu.SubContent
-    : RadixDropdownMenu.Content;
-
-  const contentStyle = useMemo(() => ({ zIndex: 1000 }), []);
+  const contentStyles = useMemo(
+    () => ({
+      maxHeight: "500px",
+      overflow: "auto",
+      ...contentStyle,
+    }),
+    [contentStyle]
+  );
 
   return (
-    <RootComponent onOpenChange={onOpenChange} open={open}>
-      <TriggerComponent ref={forwardedRef as ForwardedRef<any>} asChild>
+    <RadixDropdownMenu.Root onOpenChange={onOpenChange} open={open}>
+      <RadixDropdownMenu.Trigger
+        ref={forwardedRef as ForwardedRef<any>}
+        asChild
+      >
         {children}
-      </TriggerComponent>
+      </RadixDropdownMenu.Trigger>
       <RadixDropdownMenu.Portal>
-        <ContentComponent
+        <RadixDropdownMenu.Content
           className={styles.contentStyle}
           side={side}
           sideOffset={sideOffset}
           align={align}
           alignOffset={alignOffset}
-          style={contentStyle}
+          style={contentStyles}
           collisionPadding={collisionPadding}
           {...({ onCloseAutoFocus } as any)}
         >
           {items.length === 0 ? emptyState : null}
-          {items.map((item, index) =>
-            item === SEPARATOR_ITEM ? (
-              <RadixDropdownMenu.Separator
-                key={index}
-                className={styles.separatorStyle}
-              />
-            ) : (
-              <DropdownMenuItem
-                key={item.value ?? index}
-                value={item.value}
-                indented={hasCheckedItem}
-                checked={item.checked ?? false}
-                disabled={item.disabled ?? false}
-                icon={item.icon}
-                onSelect={onSelect}
-                items={item.items}
-                shortcut={item.shortcut}
-              >
-                {item.title}
-              </DropdownMenuItem>
-            )
-          )}
-        </ContentComponent>
+          <MenuViewport
+            items={items}
+            Components={Components}
+            onSelect={onSelect}
+          />
+        </RadixDropdownMenu.Content>
       </RadixDropdownMenu.Portal>
-    </RootComponent>
+    </RadixDropdownMenu.Root>
   );
 });
 

package/src/components/Fade.tsx

@@ -0,0 +1,62 @@
+import React, { type ReactNode } from "react";
+import { cx } from "../utils/classNames";
+
+export type FadeDirection = "left" | "right" | "top" | "bottom";
+
+export type FadeProps = {
+  children: ReactNode;
+  direction?: FadeDirection;
+  width?: number;
+  height?: number;
+  className?: string;
+  zIndex?: number;
+  /**
+   * @default "front"
+   * If "back", the fade will be positioned behind the children
+   */
+  position?: "front" | "back";
+};
+
+export const Fade = ({
+  children,
+  direction = "right",
+  width,
+  height,
+  className,
+  zIndex = 0,
+  position = "front",
+}: FadeProps) => {
+  const gradientDirection = {
+    left: "to-l",
+    right: "to-r",
+    top: "to-t",
+    bottom: "to-b",
+  }[direction];
+
+  const positionClasses = {
+    left: "left-0 top-0 bottom-0",
+    right: "right-0 top-0 bottom-0",
+    top: "left-0 right-0 top-0",
+    bottom: "left-0 right-0 bottom-0",
+  }[direction];
+
+  return (
+    <div className={cx("relative", className)} style={{ height }}>
+      {position === "front" ? children : null}
+      <div
+        className={cx(
+          "absolute pointer-events-none",
+          positionClasses,
+          `bg-gradient-${gradientDirection}`,
+          "from-transparent to-background",
+          zIndex && `z-[${zIndex}]`
+        )}
+        style={{
+          width: width ?? "100%",
+          height: height ?? "100%",
+        }}
+      />
+      {position === "back" ? children : null}
+    </div>
+  );
+};