@noya-app/noya-designsystem 0.1.21 → 0.1.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.21",
+  "version": "0.1.23",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -13,9 +13,9 @@
     "@dnd-kit/core": "3.1.1",
     "@dnd-kit/modifiers": "3.0.0",
     "@dnd-kit/sortable": "4.0.0",
-    "@noya-app/noya-colorpicker": "0.1.9",
-    "@noya-app/noya-utils": "0.1.1",
-    "@noya-app/noya-geometry": "0.1.3",
+    "@noya-app/noya-colorpicker": "0.1.10",
+    "@noya-app/noya-utils": "0.1.2",
+    "@noya-app/noya-geometry": "0.1.4",
     "@noya-app/noya-icons": "0.1.4",
     "@noya-app/noya-keymap": "0.1.2",
     "@radix-ui/primitive": "^1.0.0",
@@ -34,6 +34,7 @@
     "@radix-ui/react-toggle-group": "^1.0.1",
     "@radix-ui/react-tooltip": "^1.0.2",
     "@radix-ui/react-utils": "^0.0.5",
+    "@radix-ui/react-select": "^2.1.1",
     "immer": "9.0.5",
     "kiwi.js": "^1.1.3",
     "react-resizable-panels": "2.0.22",

package/src/components/Button.tsx

@@ -57,10 +57,10 @@ export const ButtonElement = styled.button<{
     borderRadius: "4px",
     paddingTop: $variant === "none" ? "0px" : "4px",
     paddingRight:
-      $variant === "none" ? "0px" : $variant === "thin" ? "1px" : "8px",
+      $variant === "none" ? "0px" : $variant === "thin" ? "1px" : "6px",
     paddingBottom: $variant === "none" ? "0px" : "4px",
     paddingLeft:
-      $variant === "none" ? "0px" : $variant === "thin" ? "1px" : "8px",
+      $variant === "none" ? "0px" : $variant === "thin" ? "1px" : "6px",
     ...($size === "large" && {
       paddingTop: "12px",
       paddingRight: "16px",

package/src/components/Chip.tsx

@@ -1,5 +1,5 @@
 import { Cross1Icon, PlusIcon } from "@noya-app/noya-icons";
-import React, { memo } from "react";
+import React, { forwardRef, memo } from "react";
 import styled from "styled-components";
 import { useDesignSystemTheme } from "../contexts/DesignSystemConfiguration";
 import { useHover } from "../hooks/useHover";
@@ -141,10 +141,13 @@ const AddElement = styled(PlusIcon).withConfig({
 }));
 
 export interface ChipProps {
+  id?: string;
+  className?: string;
   colorScheme?: ChipColorScheme;
   variant?: ChipVariant;
   size?: ChipSize;
   children?: React.ReactNode;
+  clickable?: boolean;
   deletable?: boolean;
   addable?: boolean;
   monospace?: boolean;
@@ -156,78 +159,87 @@ export interface ChipProps {
   tabIndex?: number;
 }
 
-export const Chip = memo(function Chip({
-  colorScheme,
-  children,
-  deletable,
-  addable,
-  style,
-  size = "medium",
-  variant = "solid",
-  monospace = false,
-  tabIndex,
-  onDelete,
-  onClick,
-  onAdd,
-  onHoverDeleteChange,
-}: ChipProps) {
-  const theme = useDesignSystemTheme();
-
-  const { hoverProps: hoverDeleteProps } = useHover({
-    onHoverChange: onHoverDeleteChange,
-  });
-
-  const handleClick = !children && !deletable && addable ? onAdd : onClick;
-
-  const color =
-    colorScheme === "primary"
-      ? theme.colors.primary
-      : colorScheme === "secondary"
-        ? theme.colors.secondary
-        : theme.colors.text;
-
-  return (
-    <ChipElement
-      $variant={variant}
-      $colorScheme={colorScheme}
-      style={style}
-      onClick={handleClick}
-      $size={size}
-      $monospace={monospace}
-      $isInteractive={!!handleClick}
-      tabIndex={tabIndex}
-    >
-      {addable && (
-        <AddElement
-          size={size}
-          isOnlyChild={!children && !deletable}
-          onClick={
-            onAdd
-              ? (event) => {
-                  event.stopPropagation();
-                  onAdd?.();
-                }
-              : undefined
-          }
-          color={color}
-        />
-      )}
-      {children}
-      {deletable && (
-        <DeleteElement
-          size={size}
-          {...(hoverDeleteProps as any)}
-          onClick={
-            onDelete
-              ? (event) => {
-                  event.stopPropagation();
-                  onDelete?.();
-                }
-              : undefined
-          }
-          color={color}
-        />
-      )}
-    </ChipElement>
-  );
-});
+export const Chip = memo(
+  forwardRef(function Chip(
+    {
+      colorScheme,
+      children,
+      deletable,
+      addable,
+      clickable,
+      style,
+      size = "medium",
+      variant = "solid",
+      monospace = false,
+      tabIndex,
+      onDelete,
+      onClick,
+      onAdd,
+      onHoverDeleteChange,
+      ...rest
+    }: ChipProps,
+    forwardedRef: React.ForwardedRef<HTMLSpanElement>
+  ) {
+    const theme = useDesignSystemTheme();
+
+    const { hoverProps: hoverDeleteProps } = useHover({
+      onHoverChange: onHoverDeleteChange,
+    });
+
+    const handleClick = !children && !deletable && addable ? onAdd : onClick;
+
+    const color =
+      colorScheme === "primary"
+        ? theme.colors.primary
+        : colorScheme === "secondary"
+          ? theme.colors.secondary
+          : theme.colors.text;
+
+    return (
+      <ChipElement
+        ref={forwardedRef}
+        $variant={variant}
+        $colorScheme={colorScheme}
+        style={style}
+        onClick={handleClick}
+        $size={size}
+        $monospace={monospace}
+        $isInteractive={!!handleClick || clickable === true}
+        tabIndex={tabIndex}
+        {...rest}
+      >
+        {addable && (
+          <AddElement
+            size={size}
+            isOnlyChild={!children && !deletable}
+            onClick={
+              onAdd
+                ? (event) => {
+                    event.stopPropagation();
+                    onAdd?.();
+                  }
+                : undefined
+            }
+            color={color}
+          />
+        )}
+        {children}
+        {deletable && (
+          <DeleteElement
+            size={size}
+            {...(hoverDeleteProps as any)}
+            onClick={
+              onDelete
+                ? (event) => {
+                    event.stopPropagation();
+                    onDelete?.();
+                  }
+                : undefined
+            }
+            color={color}
+          />
+        )}
+      </ChipElement>
+    );
+  })
+);

package/src/components/ContextMenu.tsx

@@ -1,15 +1,9 @@
-import { CheckIcon, ChevronRightIcon } from '@noya-app/noya-icons';
-import { useKeyboardShortcuts } from '@noya-app/noya-keymap';
-import * as RadixContextMenu from '@radix-ui/react-context-menu';
-import React, {
-  ReactElement,
-  ReactNode,
-  memo,
-  useCallback,
-  useMemo,
-} from 'react';
-import styled from 'styled-components';
-import { Spacer } from './Spacer';
+import { CheckIcon, ChevronRightIcon } from "@noya-app/noya-icons";
+import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
+import * as RadixContextMenu from "@radix-ui/react-context-menu";
+import React, { ReactNode, memo, useCallback, useMemo } from "react";
+import styled from "styled-components";
+import { Spacer } from "./Spacer";
 import {
   CHECKBOX_RIGHT_INSET,
   CHECKBOX_WIDTH,
@@ -18,14 +12,14 @@ import {
   SEPARATOR_ITEM,
   getKeyboardShortcutsForMenuItems,
   styles,
-} from './internal/Menu';
+} from "./internal/Menu";
 
 /* ----------------------------------------------------------------------------
  * Separator
  * ------------------------------------------------------------------------- */
 
 const SeparatorElement = styled(RadixContextMenu.Separator)(
-  styles.separatorStyle,
+  styles.separatorStyle
 );
 
 /* ----------------------------------------------------------------------------
@@ -35,11 +29,11 @@ const SeparatorElement = styled(RadixContextMenu.Separator)(
 const ItemElement = styled(RadixContextMenu.Item)(styles.itemStyle);
 
 const CheckboxItemElement = styled(RadixContextMenu.CheckboxItem)(
-  styles.itemStyle,
+  styles.itemStyle
 );
 
 const StyledItemIndicator = styled(RadixContextMenu.ItemIndicator)(
-  styles.itemIndicatorStyle,
+  styles.itemIndicatorStyle
 );
 
 export interface MenuItemProps<T extends string> {
@@ -50,7 +44,7 @@ export interface MenuItemProps<T extends string> {
   disabled: boolean;
   indented: boolean;
   shortcut?: string;
-  icon?: ReactElement;
+  icon?: ReactNode;
   items?: MenuItem<T>[];
 }
 
@@ -69,7 +63,7 @@ const ContextMenuItem = memo(function ContextMenuItem<T extends string>({
   // context menu unless we stop it here.
   const handlePointerDown = useCallback(
     (event: React.PointerEvent) => event.stopPropagation(),
-    [],
+    []
   );
 
   const handleSelectItem = useCallback(() => {
@@ -162,7 +156,7 @@ function ContextMenuRoot<T extends string>({
   onOpenChange,
 }: MenuProps<T>) {
   const hasCheckedItem = items.some(
-    (item) => item !== SEPARATOR_ITEM && item.checked,
+    (item) => item !== SEPARATOR_ITEM && item.checked
   );
 
   const keymap = useMemo(
@@ -170,7 +164,7 @@ function ContextMenuRoot<T extends string>({
       isNested || shouldBindKeyboardShortcuts === false
         ? {}
         : getKeyboardShortcutsForMenuItems(items, onSelect),
-    [isNested, items, onSelect, shouldBindKeyboardShortcuts],
+    [isNested, items, onSelect, shouldBindKeyboardShortcuts]
   );
 
   useKeyboardShortcuts(keymap);
@@ -213,7 +207,7 @@ function ContextMenuRoot<T extends string>({
               >
                 {item.title}
               </ContextMenuItem>
-            ),
+            )
           )}
         </ContentComponent>
       </RadixContextMenu.Portal>

package/src/components/InputField.tsx

@@ -15,6 +15,7 @@ import React, {
   useLayoutEffect,
   useMemo,
   useRef,
+  useState,
 } from "react";
 import styled from "styled-components";
 import handleNudge from "../utils/handleNudge";
@@ -431,10 +432,15 @@ function parseNumber(value: string) {
 }
 
 function InputFieldNumberInput(props: InputFieldNumberInputProps) {
-  const { value, placeholder, onNudge, ...rest } = props;
+  const { value, placeholder, onNudge, onBlur, ...rest } = props;
   const onSubmit = "onSubmit" in props ? props.onSubmit : undefined;
   const onChange = "onChange" in props ? props.onChange : undefined;
 
+  // Internal value is used to handle empty string as a valid state,
+  // e.g. when the user deletes the value before entering a new one.
+  // This is only used for in the onChange case.
+  const [internalValue, setInternalValue] = useState<string | undefined>();
+
   const handleSubmit = useCallback(
     (value: string) => {
       const newValue = parseNumber(value);
@@ -453,6 +459,7 @@ function InputFieldNumberInput(props: InputFieldNumberInputProps) {
       if (!amount) return;
 
       onNudge?.(amount);
+      setInternalValue(undefined);
 
       event.preventDefault();
       event.stopPropagation();
@@ -462,17 +469,48 @@ function InputFieldNumberInput(props: InputFieldNumberInputProps) {
 
   const handleChange = useCallback(
     (value: string) => {
-      onChange?.(parseNumber(value));
+      if (value === "" || value === "-" || value === ".") {
+        setInternalValue(value);
+        return;
+      }
+
+      if (value.endsWith(".")) {
+        setInternalValue(value);
+        return;
+      }
+
+      setInternalValue(undefined);
+
+      const newValue = parseNumber(value);
+
+      if (!isNaN(newValue)) {
+        onChange?.(newValue);
+      }
     },
     [onChange]
   );
 
+  const handleBlur = useCallback(
+    (event: React.FocusEvent<HTMLInputElement>) => {
+      setInternalValue(undefined);
+      onBlur?.(event);
+    },
+    [onBlur]
+  );
+
   return (
     <InputFieldInput
       {...rest}
-      value={value === undefined ? "" : String(value)}
+      value={
+        internalValue !== undefined
+          ? String(internalValue)
+          : value === undefined
+            ? ""
+            : String(value)
+      }
       placeholder={placeholder}
       onKeyDown={handleKeyDown}
+      onBlur={handleBlur}
       {...("onChange" in props
         ? { onChange: handleChange }
         : { onSubmit: handleSubmit })}
@@ -505,6 +543,8 @@ interface InputFieldRootProps {
   size?: InputFieldSize;
   renderPopoverContent?: (options: { width: number }) => ReactNode;
   onFocusChange?: (isFocused: boolean) => void;
+  style?: React.CSSProperties;
+  className?: string;
 }
 
 function InputFieldRoot({
@@ -517,6 +557,8 @@ function InputFieldRoot({
   size = "medium",
   renderPopoverContent,
   onFocusChange,
+  style,
+  className,
 }: InputFieldRootProps) {
   const childrenArray = Children.toArray(children);
 
@@ -579,7 +621,13 @@ function InputFieldRoot({
   );
 
   const rootElement = (
-    <RootContainer id={id} $width={width} $flex={flex}>
+    <RootContainer
+      id={id}
+      $width={width}
+      $flex={flex}
+      style={style}
+      className={className}
+    >
       {children}
     </RootContainer>
   );

package/src/components/ListView.tsx

@@ -333,6 +333,13 @@ interface ListViewRowProps<MenuItemType extends string = string> {
   onMenuOpenChange?: (isOpen: boolean) => void;
   onKeyDown?: (event: React.KeyboardEvent) => void;
   style?: CSSProperties;
+  dragIndicatorStyle?:
+    | CSSProperties
+    | ((props: {
+        depth: number;
+        indentation: number;
+        position: RelativeDropPosition;
+      }) => CSSProperties);
 }
 
 const ListViewRow = forwardRef(function ListViewRow<
@@ -359,6 +366,7 @@ const ListViewRow = forwardRef(function ListViewRow<
     onMenuOpenChange,
     onKeyDown,
     style,
+    dragIndicatorStyle,
   }: ListViewRowProps<MenuItemType>,
   forwardedRef: ForwardedRef<HTMLElement>
 ) {
@@ -461,7 +469,16 @@ const ListViewRow = forwardRef(function ListViewRow<
             $colorScheme={colorScheme}
             $relativeDropPosition={relativeDropPosition}
             $offsetLeft={33 + depth * indentation}
-            $gap={listGap}
+            $gap={listGap + (divider ? 1 : 0)}
+            style={
+              typeof dragIndicatorStyle === "function"
+                ? dragIndicatorStyle({
+                    depth,
+                    indentation,
+                    position: relativeDropPosition,
+                  })
+                : dragIndicatorStyle
+            }
           />
         )}
         {depth > 0 && <Spacer.Horizontal size={depth * indentation} />}
@@ -676,6 +693,9 @@ type ListViewVariant = "normal" | "padded" | "bare";
 type ListViewSectionHeaderVariant = "normal" | "label";
 
 type ListViewRootProps = {
+  id?: string;
+  className?: string;
+  style?: CSSProperties;
   onPress?: () => void;
   scrollable?: boolean;
   expandable?: boolean;
@@ -696,6 +716,9 @@ type ListViewRootProps = {
 
 const ListViewRootInner = forwardRef(function ListViewRootInner<T>(
   {
+    id,
+    className,
+    style,
     onPress,
     scrollable = false,
     expandable = true,
@@ -895,6 +918,9 @@ const ListViewRootInner = forwardRef(function ListViewRootInner<T>(
   return (
     <DraggingContext.Provider value={draggingContextValue}>
       <RootContainer
+        id={id}
+        className={className}
+        style={style}
         {...{
           [pressEventName]: handleClick,
         }}

package/src/components/Popover.tsx

@@ -93,12 +93,12 @@ export function Popover({
           collisionPadding={8}
           arrowPadding={2}
           // Don't propagate pointer down events to the canvas
-          onPointerDown={(event) => {
-            event.stopPropagation();
-          }}
-          onWheel={(event) => {
-            event.stopPropagation();
-          }}
+          // onPointerDown={(event) => {
+          //   event.stopPropagation();
+          // }}
+          // onWheel={(event) => {
+          //   event.stopPropagation();
+          // }}
         >
           {children}
           {showArrow && <ArrowElement />}

package/src/components/Select.tsx

@@ -77,7 +77,7 @@ const SelectElement = styled.select<{ $flex: CSSProperties["flex"] }>(
     borderRadius: "4px",
     paddingTop: "4px",
     paddingBottom: "4px",
-    paddingLeft: "8px",
+    paddingLeft: "6px",
     paddingRight: "23px",
     background: [
       `calc(100% - 6px) / 15px url("data:image/svg+xml;utf8,${createChevronSVGString(
@@ -120,7 +120,7 @@ type Props<T extends string> = ChildrenProps<T> & {
   id: string;
   flex?: CSSProperties["flex"];
   value: T;
-  label?: string;
+  label?: ReactNode;
 };
 
 export const Select = memo(function Select<T extends string>({

package/src/components/SelectMenu.tsx

@@ -0,0 +1,100 @@
+import { DropdownChevronIcon } from "@noya-app/noya-icons";
+import * as Select from "@radix-ui/react-select";
+import React, { memo } from "react";
+import { styled } from "styled-components";
+import { Button } from "./Button";
+import { Spacer } from "./Spacer";
+import { MenuItem, RegularMenuItem, styles } from "./internal/Menu";
+
+type Props<T extends string> = {
+  id?: string;
+  style?: React.CSSProperties;
+  className?: string;
+  menuItems: MenuItem<T>[];
+  value: T;
+  onSelect?: (value: T) => void;
+  placeholder?: string;
+};
+
+export const SelectMenu = memo(function SelectMenu<T extends string = string>({
+  id,
+  style,
+  className,
+  menuItems,
+  value,
+  onSelect,
+  placeholder,
+}: Props<T>) {
+  const selectedItem = menuItems.find(
+    (item): item is RegularMenuItem<T> =>
+      typeof item !== "string" && item.value === value
+  );
+  const icon = selectedItem?.icon;
+
+  return (
+    <Select.Root value={value} onValueChange={onSelect}>
+      <Select.SelectTrigger asChild>
+        <Button id={id} style={style} className={className}>
+          {icon && (
+            <>
+              {icon}
+              <Spacer.Horizontal size={8} />
+            </>
+          )}
+          <Select.Value placeholder={placeholder} />
+          <Spacer.Horizontal />
+          <DropdownChevronIcon />
+        </Button>
+      </Select.SelectTrigger>
+      <Select.Portal>
+        <SelectContent>
+          <SelectViewport>
+            {menuItems.map((menuItem) => {
+              if (typeof menuItem === "string") {
+                return <StyledSeparator />;
+              }
+
+              const value = menuItem.value ?? "";
+
+              return (
+                <SelectItem key={value} value={value} icon={menuItem.icon}>
+                  {menuItem.title ?? value}
+                </SelectItem>
+              );
+            })}
+          </SelectViewport>
+        </SelectContent>
+      </Select.Portal>
+    </Select.Root>
+  );
+});
+
+const SelectContent = styled(Select.Content)(styles.contentStyle);
+
+const SelectViewport = styled(Select.Viewport)({});
+
+const SelectItem = React.forwardRef(
+  (
+    {
+      children,
+      icon,
+      ...props
+    }: Select.SelectItemProps & { icon?: React.ReactNode },
+    forwardedRef: React.ForwardedRef<HTMLDivElement>
+  ) => {
+    return (
+      <StyledItem {...props} ref={forwardedRef}>
+        {icon && (
+          <>
+            {icon}
+            <Spacer.Horizontal size={8} />
+          </>
+        )}
+        <Select.ItemText>{children}</Select.ItemText>
+      </StyledItem>
+    );
+  }
+);
+
+const StyledItem = styled(Select.Item)(styles.itemStyle);
+const StyledSeparator = styled(Select.Separator)(styles.separatorStyle);

package/src/components/Stack.tsx

@@ -89,7 +89,17 @@ const Element = styled.div<{
 }));
 
 const StackBase = forwardRef(function StackBase(
-  { id, as, children, separator, breakpoints, tabIndex, href, ...rest }: Props,
+  {
+    id,
+    className,
+    as,
+    children,
+    separator,
+    breakpoints,
+    tabIndex,
+    href,
+    ...rest
+  }: Props,
   forwardedRef: ForwardedRef<HTMLElement>
 ) {
   const elements = separator
@@ -107,6 +117,7 @@ const StackBase = forwardRef(function StackBase(
     <Element
       ref={forwardedRef as any}
       id={id}
+      className={className}
       as={as}
       $styleProps={styleProps}
       $breakpoints={breakpoints}