@noya-app/noya-designsystem 0.1.20 → 0.1.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "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/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";
@@ -46,7 +46,8 @@ const ChipElement = styled.span<{
     userSelect: "none",
     display: "inline-flex",
     alignItems: "center",
-    lineHeight: "1.4",
+    // lineHeight: "1.4",
+    lineHeight: "15px",
     whiteSpace: "pre",
     ...($size === "medium"
       ? {
@@ -56,7 +57,6 @@ const ChipElement = styled.span<{
       : {
           fontSize: "9px",
           padding: "0px 4px",
-          lineHeight: "15px",
         }),
     ...($monospace && {
       fontFamily: theme.fonts.monospace,
@@ -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";
@@ -322,7 +323,11 @@ export const InputElement = styled(TextInput)<{
 
 const InputFieldInput = forwardRef(function InputFieldInput(
   // onFocusChange should only be passed from the root, never directly
-  props: TextInputProps & {
+  {
+    textAlign,
+    variant,
+    ...rest
+  }: TextInputProps & {
     textAlign?: Property.TextAlign;
     variant?: "bare";
   },
@@ -357,8 +362,10 @@ const InputFieldInput = forwardRef(function InputFieldInput(
       $hasLabel={hasLabel}
       $hasDropdown={hasDropdown}
       $size={size}
+      $variant={variant}
+      $textAlign={textAlign}
       onFocusChange={handleFocusChange}
-      {...props}
+      {...rest}
     />
   );
 });
@@ -425,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);
@@ -447,6 +459,7 @@ function InputFieldNumberInput(props: InputFieldNumberInputProps) {
       if (!amount) return;
 
       onNudge?.(amount);
+      setInternalValue(undefined);
 
       event.preventDefault();
       event.stopPropagation();
@@ -456,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 })}

package/src/components/ListView.tsx

@@ -676,6 +676,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 +699,9 @@ type ListViewRootProps = {
 
 const ListViewRootInner = forwardRef(function ListViewRootInner<T>(
   {
+    id,
+    className,
+    style,
     onPress,
     scrollable = false,
     expandable = true,
@@ -895,6 +901,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

@@ -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}

package/src/components/Text.tsx

@@ -61,6 +61,8 @@ interface Props extends StyleProps {
   children: ReactNode;
   onClick?: () => void;
   onDoubleClick?: () => void;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLSpanElement>) => void;
+  tabIndex?: number;
 }
 
 const StyledElement = styled.span<{
@@ -84,7 +86,9 @@ export const Text = forwardRef(function Text(
     className,
     color,
     href,
+    tabIndex,
     onClick,
+    onKeyDown,
     ...rest
   }: Props,
   forwardedRef: ForwardedRef<HTMLElement>
@@ -96,11 +100,13 @@ export const Text = forwardRef(function Text(
       ref={forwardedRef}
       as={element}
       className={className}
+      tabIndex={tabIndex}
       $variant={variant}
       $breakpoints={breakpoints}
       $styleProps={rest}
       $color={color}
       onClick={onClick}
+      onKeyDown={onKeyDown}
       {...((href && { href }) as any)}
     >
       {children}