@noya-app/noya-designsystem 0.1.8 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -13,11 +13,11 @@
     "@dnd-kit/core": "3.1.1",
     "@dnd-kit/modifiers": "3.0.0",
     "@dnd-kit/sortable": "4.0.0",
-    "@noya-app/noya-colorpicker": "0.1.6",
+    "@noya-app/noya-colorpicker": "0.1.7",
     "@noya-app/noya-utils": "0.1.0",
     "@noya-app/noya-geometry": "0.1.2",
     "@noya-app/noya-icons": "0.1.2",
-    "@noya-app/noya-keymap": "0.1.0",
+    "@noya-app/noya-keymap": "0.1.1",
     "@radix-ui/primitive": "^1.0.0",
     "@radix-ui/react-avatar": "^1.0.1",
     "@radix-ui/react-compose-refs": "^1.0.0",

package/src/components/Button.tsx

@@ -30,107 +30,120 @@ export const ButtonElement = styled.button<{
   variant: ButtonVariant;
   size: ButtonSize;
   flex?: CSSProperties["flex"];
-}>(({ theme, active, disabled, variant, size, flex }) => ({
-  ...(size === "large" ? theme.textStyles.heading4 : theme.textStyles.small),
-  textDecoration: "none",
-  lineHeight: "1",
-  flex: flex ?? "0 0 auto",
-  position: "relative",
-  border: "0",
-  outline: "none",
-  WebkitAppRegion: "no-drag",
-  userSelect: "none",
-  minWidth: variant === "normal" ? "31px" : undefined,
-  textAlign: "left",
-  borderRadius: "4px",
-  paddingTop: variant === "none" ? "0px" : "4px",
-  paddingRight: variant === "none" ? "0px" : variant === "thin" ? "1px" : "8px",
-  paddingBottom: variant === "none" ? "0px" : "4px",
-  paddingLeft: variant === "none" ? "0px" : variant === "thin" ? "1px" : "8px",
-  ...(size === "large" && {
-    paddingTop: "12px",
-    paddingRight: "16px",
-    paddingBottom: "12px",
-    paddingLeft: "16px",
-  }),
-  background: active
-    ? theme.colors.primary
-    : variant === "primaryGradient"
-      ? `linear-gradient(90deg, ${theme.colors.primary}, ${theme.colors.primaryLight})`
-      : variant === "none" || variant === "thin"
-        ? "transparent"
-        : theme.colors.inputBackground,
-  color: active ? "white" : theme.colors.text,
-  opacity: disabled ? 0.25 : 1,
-  "&:focus": {
-    boxShadow: `0 0 0 1px ${theme.colors.sidebar.background}, 0 0 0 3px ${theme.colors.primary}`,
-  },
-  "&:hover": {
-    background:
-      variant === "primaryGradient" || active
-        ? theme.colors.primaryLight
-        : theme.colors.inputBackgroundLight,
-  },
-  "&:active": {
-    background:
-      variant === "primaryGradient"
-        ? theme.colors.primary
-        : theme.colors.activeBackground,
-  },
-  ...(variant === "primary" && {
-    background: theme.colors.primary,
-    color: "white",
-    "&:hover": {
-      background: theme.colors.primaryLight,
-    },
-    "&:active": {
-      background: theme.colors.primary,
-    },
-  }),
-  ...(variant === "secondary" && {
-    background: theme.colors.secondary,
-    color: "white",
-    "&:hover": {
-      background: theme.colors.secondaryLight,
-    },
-    "&:active": {
-      background: theme.colors.secondary,
-    },
-  }),
-  ...(variant === "secondaryBright" && {
-    background: "#0ab557",
-    color: "white",
-    "&:hover": {
-      opacity: 0.8,
-    },
-    "&:active": {
-      opacity: 0.9,
+  defaultBackground?: string;
+}>(
+  ({
+    theme,
+    active,
+    disabled,
+    variant,
+    size,
+    flex,
+    defaultBackground = theme.colors.inputBackground,
+  }) => ({
+    ...(size === "large" ? theme.textStyles.heading4 : theme.textStyles.small),
+    textDecoration: "none",
+    lineHeight: "1",
+    flex: flex ?? "0 0 auto",
+    position: "relative",
+    border: "0",
+    outline: "none",
+    WebkitAppRegion: "no-drag",
+    userSelect: "none",
+    minWidth: variant === "normal" ? "31px" : undefined,
+    textAlign: "left",
+    borderRadius: "4px",
+    paddingTop: variant === "none" ? "0px" : "4px",
+    paddingRight:
+      variant === "none" ? "0px" : variant === "thin" ? "1px" : "8px",
+    paddingBottom: variant === "none" ? "0px" : "4px",
+    paddingLeft:
+      variant === "none" ? "0px" : variant === "thin" ? "1px" : "8px",
+    ...(size === "large" && {
+      paddingTop: "12px",
+      paddingRight: "16px",
+      paddingBottom: "12px",
+      paddingLeft: "16px",
+    }),
+    background: active
+      ? theme.colors.primary
+      : variant === "primaryGradient"
+        ? `linear-gradient(90deg, ${theme.colors.primary}, ${theme.colors.primaryLight})`
+        : variant === "none" || variant === "thin"
+          ? "transparent"
+          : defaultBackground,
+    color: active ? "white" : theme.colors.text,
+    opacity: disabled ? 0.25 : 1,
+    "&:focus": {
+      boxShadow: `0 0 0 1px ${theme.colors.sidebar.background}, 0 0 0 3px ${theme.colors.primary}`,
     },
-  }),
-  ...(variant === "white" && {
-    background: "white",
     "&:hover": {
-      opacity: 0.8,
+      background:
+        variant === "primaryGradient" || active
+          ? theme.colors.primaryLight
+          : theme.colors.inputBackgroundLight,
     },
     "&:active": {
-      opacity: 0.9,
+      background:
+        variant === "primaryGradient" || active
+          ? theme.colors.primary
+          : theme.colors.activeBackground,
     },
-  }),
-  ...(variant === "floating" && {
-    background: "white",
-    color: theme.colors.text,
-    boxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
-    fontSize: "12px",
-    padding: "0px 4px",
-  }),
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
+    ...(variant === "primary" && {
+      background: theme.colors.primary,
+      color: "white",
+      "&:hover": {
+        background: theme.colors.primaryLight,
+      },
+      "&:active": {
+        background: theme.colors.primary,
+      },
+    }),
+    ...(variant === "secondary" && {
+      background: theme.colors.secondary,
+      color: "white",
+      "&:hover": {
+        background: theme.colors.secondaryLight,
+      },
+      "&:active": {
+        background: theme.colors.secondary,
+      },
+    }),
+    ...(variant === "secondaryBright" && {
+      background: "#0ab557",
+      color: "white",
+      "&:hover": {
+        opacity: 0.8,
+      },
+      "&:active": {
+        opacity: 0.9,
+      },
+    }),
+    ...(variant === "white" && {
+      background: "white",
+      "&:hover": {
+        opacity: 0.8,
+      },
+      "&:active": {
+        opacity: 0.9,
+      },
+    }),
+    ...(variant === "floating" && {
+      background: "white",
+      color: theme.colors.text,
+      boxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
+      fontSize: "12px",
+      padding: "0px 4px",
+    }),
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
 
-  "& *": {
-    pointerEvents: "none",
-  },
-}));
+    "& *": {
+      pointerEvents: "none",
+    },
+  })
+);
 
 /* ----------------------------------------------------------------------------
  * Content
@@ -168,6 +181,7 @@ export interface ButtonRootProps {
   onClick?: (event: React.MouseEvent) => void;
   onPointerDown?: (event: React.PointerEvent) => void;
   contentStyle?: CSSProperties;
+  defaultBackground?: string;
   as?: React.ElementType;
   href?: string;
   target?: string;
@@ -187,6 +201,7 @@ export const Button = forwardRef(function Button(
     variant = "normal",
     size = "normal",
     contentStyle,
+    defaultBackground,
     onClick,
     children,
     ...rest // Propagate any other props so this component works as a Slot
@@ -205,6 +220,7 @@ export const Button = forwardRef(function Button(
       disabled={disabled}
       variant={variant}
       size={size}
+      defaultBackground={defaultBackground}
       onClick={onClick}
       // Prevent double clicking a button from triggering any callbacks in ancestors
       onDoubleClick={useCallback((event: React.MouseEvent) => {

package/src/components/DropdownMenu.tsx

@@ -1,17 +1,18 @@
-import { CheckIcon, ChevronRightIcon } from '@noya-app/noya-icons';
-import { useKeyboardShortcuts } from '@noya-app/noya-keymap';
-import * as RadixDropdownMenu from '@radix-ui/react-dropdown-menu';
+import { CheckIcon, ChevronRightIcon } from "@noya-app/noya-icons";
+import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
+import * as RadixDropdownMenu from "@radix-ui/react-dropdown-menu";
 import React, {
+  ComponentProps,
   ForwardedRef,
   SyntheticEvent,
   forwardRef,
   memo,
   useCallback,
   useMemo,
-} from 'react';
-import styled from 'styled-components';
-import { MenuItemProps, MenuProps } from './ContextMenu';
-import { Spacer } from './Spacer';
+} from "react";
+import styled from "styled-components";
+import { MenuItemProps, MenuProps } from "./ContextMenu";
+import { Spacer } from "./Spacer";
 import {
   CHECKBOX_RIGHT_INSET,
   CHECKBOX_WIDTH,
@@ -19,14 +20,14 @@ import {
   SEPARATOR_ITEM,
   getKeyboardShortcutsForMenuItems,
   styles,
-} from './internal/Menu';
+} from "./internal/Menu";
 
 /* ----------------------------------------------------------------------------
  * Separator
  * ------------------------------------------------------------------------- */
 
 const SeparatorElement = styled(RadixDropdownMenu.Separator)(
-  styles.separatorStyle,
+  styles.separatorStyle
 );
 
 /* ----------------------------------------------------------------------------
@@ -36,11 +37,11 @@ const SeparatorElement = styled(RadixDropdownMenu.Separator)(
 const ItemElement = styled(RadixDropdownMenu.Item)(styles.itemStyle);
 
 const CheckboxItemElement = styled(RadixDropdownMenu.CheckboxItem)(
-  styles.itemStyle,
+  styles.itemStyle
 );
 
 const StyledItemIndicator = styled(RadixDropdownMenu.ItemIndicator)(
-  styles.itemIndicatorStyle,
+  styles.itemIndicatorStyle
 );
 
 const DropdownMenuItem = memo(function ContextMenuItem<T extends string>({
@@ -112,7 +113,12 @@ const DropdownMenuItem = memo(function ContextMenuItem<T extends string>({
 
   if (items && items.length > 0) {
     return (
-      <DropdownMenuRoot isNested items={items} onSelect={onSelect}>
+      <DropdownMenuRoot
+        isNested
+        items={items}
+        onSelect={onSelect}
+        alignOffset={-5}
+      >
         {element}
       </DropdownMenuRoot>
     );
@@ -138,14 +144,22 @@ const DropdownMenuRoot = forwardRef(function DropdownMenuRoot<T extends string>(
     onOpenChange,
     open,
     onCloseAutoFocus,
+    side,
+    sideOffset = 4,
+    align,
+    alignOffset,
+    collisionPadding = 8,
   }: MenuProps<T> & {
     open?: boolean;
     onCloseAutoFocus?: React.EventHandler<SyntheticEvent<unknown>>;
-  },
-  forwardedRef: ForwardedRef<HTMLElement>,
+  } & Pick<
+      ComponentProps<typeof RadixDropdownMenu.Content>,
+      "side" | "sideOffset" | "align" | "alignOffset" | "collisionPadding"
+    >,
+  forwardedRef: ForwardedRef<HTMLElement>
 ) {
   const hasCheckedItem = items.some(
-    (item) => item !== SEPARATOR_ITEM && item.checked,
+    (item) => item !== SEPARATOR_ITEM && item.checked
   );
 
   const keymap = useMemo(
@@ -153,7 +167,7 @@ const DropdownMenuRoot = forwardRef(function DropdownMenuRoot<T extends string>(
       isNested || shouldBindKeyboardShortcuts === false
         ? {}
         : getKeyboardShortcutsForMenuItems(items, onSelect),
-    [isNested, items, onSelect, shouldBindKeyboardShortcuts],
+    [isNested, items, onSelect, shouldBindKeyboardShortcuts]
   );
 
   useKeyboardShortcuts(keymap);
@@ -175,9 +189,12 @@ const DropdownMenuRoot = forwardRef(function DropdownMenuRoot<T extends string>(
       </TriggerComponent>
       <RadixDropdownMenu.Portal>
         <ContentComponent
-          sideOffset={4}
+          side={side}
+          sideOffset={sideOffset}
+          align={align}
+          alignOffset={alignOffset}
           style={contentStyle}
-          collisionPadding={8}
+          collisionPadding={collisionPadding}
           {...({ onCloseAutoFocus } as any)}
         >
           {items.map((item, index) =>
@@ -197,7 +214,7 @@ const DropdownMenuRoot = forwardRef(function DropdownMenuRoot<T extends string>(
               >
                 {item.title}
               </DropdownMenuItem>
-            ),
+            )
           )}
         </ContentComponent>
       </RadixDropdownMenu.Portal>

package/src/components/internal/Menu.tsx

@@ -83,7 +83,7 @@ export const styles = {
   separatorStyle: ({ theme }: { theme: Theme }): CSSObject => ({
     height: "1px",
     backgroundColor: theme.colors.divider,
-    margin: "4px 8px",
+    margin: "4px -4px",
   }),
 
   itemStyle: ({
@@ -100,7 +100,7 @@ export const styles = {
     userSelect: "none",
     cursor: "pointer",
     borderRadius: "3px",
-    padding: "4px 8px",
+    padding: "6px 8px",
     ...(disabled && {
       color: theme.colors.textDisabled,
     }),