@noya-app/noya-designsystem 0.1.6 → 0.1.7

package/package.json

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

package/src/components/DraggableMenuButton.tsx

@@ -35,8 +35,8 @@ export const DraggableMenuButton = memo(function DraggableMenuButton<
   onSelect,
   isVisible = true,
 }: {
-  items: MenuItem<T>[];
-  onSelect: (value: T) => void;
+  items?: MenuItem<T>[];
+  onSelect?: (value: T) => void;
   isVisible?: boolean;
 }) {
   const color = useDesignSystemTheme().colors.icon;
@@ -98,19 +98,25 @@ export const DraggableMenuButton = memo(function DraggableMenuButton<
         event.preventDefault();
       }}
     >
-      <DropdownMenu
-        open={open}
-        onOpenChange={handleOpenChange}
-        items={items}
-        onSelect={onSelect}
-        shouldBindKeyboardShortcuts={false}
-      >
-        <TriggerElement>
-          <DragHandleDots2Icon
-            color={isVisible || open ? color : "transparent"}
-          />
-        </TriggerElement>
-      </DropdownMenu>
+      {items && onSelect ? (
+        <DropdownMenu
+          open={open}
+          onOpenChange={handleOpenChange}
+          items={items}
+          onSelect={onSelect}
+          shouldBindKeyboardShortcuts={false}
+        >
+          <TriggerElement>
+            <DragHandleDots2Icon
+              color={isVisible || open ? color : "transparent"}
+            />
+          </TriggerElement>
+        </DropdownMenu>
+      ) : (
+        <DragHandleDots2Icon
+          color={isVisible || open ? color : "transparent"}
+        />
+      )}
     </DotButtonElement>
   );
 });

package/src/components/InspectorPrimitives.tsx

@@ -90,6 +90,7 @@ export const RowLabel = styled.span<{
         fontWeight: "bold",
       }),
   lineHeight: "19px", // Button height
+  alignItems: "center",
 }));
 
 export const LabeledRow = memo(function LabeledRow({

package/src/components/ListView.tsx

@@ -332,6 +332,7 @@ interface ListViewRowProps<MenuItemType extends string = string> {
   onContextMenu?: () => void;
   onMenuOpenChange?: (isOpen: boolean) => void;
   onKeyDown?: (event: React.KeyboardEvent) => void;
+  style?: CSSProperties;
 }
 
 const ListViewRow = forwardRef(function ListViewRow<
@@ -357,6 +358,7 @@ const ListViewRow = forwardRef(function ListViewRow<
     onSelectMenuItem,
     onMenuOpenChange,
     onKeyDown,
+    style,
   }: ListViewRowProps<MenuItemType>,
   forwardedRef: ForwardedRef<HTMLElement>
 ) {
@@ -402,15 +404,16 @@ const ListViewRow = forwardRef(function ListViewRow<
     [onDoubleClick]
   );
 
-  const isDraggingStyle = useMemo(() => {
+  const mergedStyle = useMemo(() => {
     return isDragging
       ? {
           // TODO: Where do these offsets actually come from?
           transform: `translate3d(-36px, -6px, 0)`,
           width: `calc(100% + 48px)`,
+          ...style,
         }
-      : undefined;
-  }, [isDragging]);
+      : style;
+  }, [isDragging, style]);
 
   const renderContent = (
     {
@@ -443,7 +446,7 @@ const ListViewRow = forwardRef(function ListViewRow<
         aria-selected={selected}
         divider={!isDragging && divider}
         onKeyDown={onKeyDown}
-        style={isDraggingStyle}
+        style={mergedStyle}
         {...renderProps}
         {...mergeEventHandlers(
           { onPointerDown: renderProps.onPointerDown },
@@ -655,7 +658,9 @@ type RenderProps<T> = {
   renderItem: (item: T, index: number, info: ListViewItemInfo) => ReactNode;
   keyExtractor: (item: T, index: number) => string;
   /**
-   * Each item must have an `id` in order to be sortable
+   * Each item must have an `id` in order to be sortable.
+   *
+   * Additionally, the key extracted with `keyExtractor` must match the ListItem.Row `id`.
    */
   sortable?: boolean;
   virtualized?: Size;

package/src/components/Select.tsx

@@ -87,7 +87,7 @@ type ChildrenProps<T> =
       children: ReactNode;
     }
   | {
-      options: T[];
+      options: readonly T[];
       getTitle?: (option: T, index: number) => string;
       onChange: (value: T) => void;
     };