@noya-app/noya-designsystem 0.1.44 → 0.1.45

package/src/hooks/usePreservePanelSize.tsx

@@ -130,26 +130,57 @@ export function usePreservePanelSize(
         });
       }
     } else if (currentLayout.length === 2) {
-      const leftSidebarWidth = (oldPanelPercentages[0] / 100) * oldWindowWidth;
-
-      const newLeftSidebarPercentage =
-        (leftSidebarWidth / windowSize.width) * 100;
-
-      const newLayout = [
-        newLeftSidebarPercentage,
-        100 - newLeftSidebarPercentage,
+      // Check if this is a right sidebar layout by looking at the panel IDs
+      const panelGroup = document.querySelector(
+        `[data-panel-group-id="${EDITOR_PANEL_GROUP_ID}"]`
+      );
+      const panels = [
+        ...(panelGroup?.querySelectorAll<HTMLElement>("[data-panel]") ?? []),
       ];
-
-      try {
-        panelGroupRef.current?.setLayout(newLayout);
-      } catch (e) {
-        console.error(e);
-        console.info("snapshot on error", {
-          oldWindowWidth,
-          oldPanelPercentages,
-          newLayout,
-          currentLayout,
-        });
+      const isRightSidebarLayout = panels[1]?.id === RIGHT_SIDEBAR_ID;
+
+      if (isRightSidebarLayout) {
+        const rightSidebarWidth =
+          (oldPanelPercentages[1] / 100) * oldWindowWidth;
+        const newRightSidebarPercentage =
+          (rightSidebarWidth / windowSize.width) * 100;
+        const newLayout = [
+          100 - newRightSidebarPercentage,
+          newRightSidebarPercentage,
+        ];
+
+        try {
+          panelGroupRef.current?.setLayout(newLayout);
+        } catch (e) {
+          console.error(e);
+          console.info("snapshot on error", {
+            oldWindowWidth,
+            oldPanelPercentages,
+            newLayout,
+            currentLayout,
+          });
+        }
+      } else {
+        const leftSidebarWidth =
+          (oldPanelPercentages[0] / 100) * oldWindowWidth;
+        const newLeftSidebarPercentage =
+          (leftSidebarWidth / windowSize.width) * 100;
+        const newLayout = [
+          newLeftSidebarPercentage,
+          100 - newLeftSidebarPercentage,
+        ];
+
+        try {
+          panelGroupRef.current?.setLayout(newLayout);
+        } catch (e) {
+          console.error(e);
+          console.info("snapshot on error", {
+            oldWindowWidth,
+            oldPanelPercentages,
+            newLayout,
+            currentLayout,
+          });
+        }
       }
     }
   }, [panelGroupRef, windowSize.width]);

package/src/index.tsx

@@ -7,11 +7,13 @@ export * from "./components/Checkbox";
 export * from "./components/Chip";
 export * from "./components/Combobox";
 export * from "./components/ComboboxMenu";
+export * from "./components/CommandPalette";
 export * from "./components/ContextMenu";
 export * from "./components/Dialog";
 export * from "./components/Divider";
 export * from "./components/DraggableMenuButton";
 export * from "./components/DropdownMenu";
+export * from "./components/Fade";
 export * from "./components/FillInputField";
 export * from "./components/FillPreviewBackground";
 export * from "./components/FloatingWindow";
@@ -21,25 +23,27 @@ export * from "./components/IconButton";
 export * from "./components/Icons";
 export * from "./components/InputField";
 export * from "./components/InspectorContainer";
-export {
-  KeyboardShortcut,
-  SEPARATOR_ITEM,
-  getKeyboardShortcutsForMenuItems,
-} from "./components/internal/Menu";
+export * from "./components/internal/Menu";
 export type {
   ExtractMenuItemType,
   MenuItem,
   RegularMenuItem,
+  SectionHeaderMenuItem,
+  SeparatorItem,
 } from "./components/internal/Menu";
+export * from "./components/internal/MenuViewport";
 export * from "./components/Label";
 export * from "./components/LabeledElementView";
+export * from "./components/LabeledField";
 export * from "./components/ListView";
 export * from "./components/Message";
 export * from "./components/Popover";
 export * from "./components/Progress";
 export * from "./components/ScrollArea";
+export * from "./components/SearchCompletionMenu";
 export * from "./components/SegmentedControl";
 export * from "./components/SelectMenu";
+export * from "./components/SidebarList";
 export * from "./components/Slider";
 export * from "./components/Sortable";
 export type { RelativeDropPosition } from "./components/Sortable";
@@ -60,6 +64,8 @@ export * from "./contexts/GlobalInputBlurContext";
 export * from "./contexts/ImageDataContext";
 // Hooks
 export * from "./hooks/useHover";
+export * from "./hooks/useIndent";
+export * from "./hooks/useLabel";
 export * from "./hooks/usePlatform";
 export * from "./hooks/usePreservePanelSize";
 export * from "./hooks/useTheme";
@@ -72,6 +78,7 @@ export * from "./utils/getGradientBackground";
 export * from "./utils/colorFromString";
 export * from "./utils/combobox";
 export * from "./utils/fuzzyScorer";
+export * from "./utils/selection";
 export * from "./utils/sketchColor";
 export * from "./utils/sketchPattern";
 export { default as withSeparatorElements } from "./utils/withSeparatorElements";

package/src/utils/combobox.ts

@@ -7,7 +7,10 @@ export type ComboboxOption = {
   id: string;
   name: string;
   icon?: ReactNode;
+  shortcut?: string;
+  disabled?: boolean;
   alwaysInclude?: boolean;
+  checked?: boolean;
 };
 
 export type ComboboxSectionHeader = {
@@ -326,7 +329,7 @@ function filterWithGroupedSections(
   return result;
 }
 
-function getNextIndex<T>(
+export function getNextIndex<T>(
   items: T[],
   currentIndex: number,
   direction: "next" | "previous",

package/src/utils/createSectionedMenu.ts

@@ -1,16 +1,19 @@
 import {
   MenuItem,
   RegularMenuItem,
-  SEPARATOR_ITEM,
-} from '../components/internal/Menu';
+  SeparatorItem,
+} from "../components/internal/Menu";
 
 export type Optional<T> = T | false | null | undefined;
 
-function withSeparators<T>(elements: T[], separator: T) {
-  const result: T[] = [];
+function withSeparators<T extends string>(
+  elements: RegularMenuItem<T>[][],
+  separator: SeparatorItem
+): MenuItem<T>[] {
+  const result: MenuItem<T>[] = [];
 
   for (let i = 0; i < elements.length; i++) {
-    result.push(elements[i]);
+    result.push(...elements[i]);
 
     if (i !== elements.length - 1) {
       result.push(separator);
@@ -32,7 +35,7 @@ export function createSectionedMenu<T extends string>(
     .map((section) => section.flatMap((item) => (item ? [item] : [])))
     .filter((section) => section.length > 0);
 
-  return withSeparators<MenuItem<T>[]>(nonEmptySections, [
-    SEPARATOR_ITEM,
-  ]).flat();
+  return withSeparators(nonEmptySections, {
+    type: "separator",
+  }).flat();
 }

package/src/utils/selection.ts

@@ -0,0 +1,36 @@
+/**
+ * Updates the selection state based on user interaction.
+ * Handles single selection, multi-selection with meta/ctrl, and range selection with shift.
+ */
+export function updateSelection(
+  allIds: string[],
+  selectedIds: string[],
+  clickedId: string,
+  event?: { shiftKey?: boolean; metaKey?: boolean; ctrlKey?: boolean }
+): string[] {
+  const metaOrCtrl = event?.metaKey || event?.ctrlKey;
+
+  if (!event || (!event.shiftKey && !metaOrCtrl)) {
+    return [clickedId];
+  }
+
+  if (metaOrCtrl) {
+    const isSelected = selectedIds.includes(clickedId);
+    return isSelected
+      ? selectedIds.filter((id) => id !== clickedId)
+      : [...selectedIds, clickedId];
+  }
+
+  if (event.shiftKey && selectedIds.length > 0) {
+    const lastSelectedId = selectedIds[selectedIds.length - 1];
+    const lastSelectedIndex = allIds.indexOf(lastSelectedId);
+    const clickedIndex = allIds.indexOf(clickedId);
+
+    const start = Math.min(lastSelectedIndex, clickedIndex);
+    const end = Math.max(lastSelectedIndex, clickedIndex);
+
+    return allIds.slice(start, end + 1);
+  }
+
+  return [clickedId];
+}