@noya-app/noya-designsystem 0.1.44 → 0.1.46

package/src/components/internal/SelectItem.tsx

@@ -0,0 +1,111 @@
+import { renderIcon } from "../Icons";
+
+import { CheckIcon } from "@noya-app/noya-icons";
+import * as Select from "@radix-ui/react-select";
+import React, { useCallback } from "react";
+import { Spacer } from "../Spacer";
+import {
+  CHECKBOX_RIGHT_INSET,
+  CHECKBOX_WIDTH,
+  KeyboardShortcut,
+  styles,
+} from "./Menu";
+import { MenuComponents } from "./MenuViewport";
+
+export const SelectItem = React.forwardRef(
+  (
+    {
+      children,
+      icon,
+      disabled,
+      checked,
+      Components,
+      value,
+      onSelect,
+      shortcut,
+      indented,
+      ...props
+    }: Select.SelectItemProps & {
+      icon?: React.ReactNode;
+      checked?: boolean | "indeterminate";
+      Components: MenuComponents;
+      onSelect?: (value: any) => void;
+      shortcut?: string;
+      indented?: boolean;
+    },
+    forwardedRef: React.ForwardedRef<HTMLDivElement>
+  ) => {
+    const handleSelectItem = useCallback(() => {
+      if (!value) return;
+      onSelect?.(value);
+    }, [onSelect, value]);
+
+    if (checked && Components.CheckboxItem) {
+      return (
+        <Components.CheckboxItem
+          checked={checked}
+          disabled={disabled}
+          onSelect={handleSelectItem}
+          className={styles.itemStyle({ disabled })}
+        >
+          {Components.ItemIndicator && (
+            <Components.ItemIndicator className={styles.itemIndicatorStyle}>
+              <CheckIcon />
+            </Components.ItemIndicator>
+          )}
+          {icon && (
+            <>
+              {renderIcon(icon)}
+              <Spacer.Horizontal size={8} />
+            </>
+          )}
+          {children}
+          {shortcut && (
+            <>
+              <Spacer.Horizontal />
+              <Spacer.Horizontal size={24} />
+              <KeyboardShortcut shortcut={shortcut} />
+            </>
+          )}
+        </Components.CheckboxItem>
+      );
+    }
+
+    return (
+      <div className="px-1">
+        <Components.Item
+          className={styles.itemStyle({ disabled })}
+          disabled={disabled}
+          value={value}
+          ref={forwardedRef}
+          onSelect={handleSelectItem}
+          {...props}
+        >
+          <div className="flex flex-1 items-center">
+            {checked ? (
+              <div className={styles.itemIndicatorStyle}>
+                <CheckIcon />
+              </div>
+            ) : indented ? (
+              <Spacer.Horizontal size={CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET} />
+            ) : null}
+            {icon && (
+              <>
+                {renderIcon(icon)}
+                <Spacer.Horizontal size={8} />
+              </>
+            )}
+            <Components.ItemText>{children}</Components.ItemText>
+            {shortcut && (
+              <>
+                <Spacer.Horizontal />
+                <Spacer.Horizontal size={24} />
+                <KeyboardShortcut shortcut={shortcut} />
+              </>
+            )}
+          </div>
+        </Components.Item>
+      </div>
+    );
+  }
+);

package/src/hooks/useIndent.ts

@@ -0,0 +1,12 @@
+import React from "react";
+
+export const IndentContext = React.createContext<{
+  indentLevel: number;
+}>({
+  indentLevel: 0,
+});
+
+export const useIndent = () => {
+  const { indentLevel } = React.useContext(IndentContext);
+  return indentLevel;
+};

package/src/hooks/useLabel.ts

@@ -0,0 +1,51 @@
+import React, { ReactNode } from "react";
+import { LabelPosition } from "../components/Label";
+
+export const LabelContext = React.createContext<{
+  fieldId?: string;
+  label?: React.ReactNode;
+}>({
+  fieldId: "",
+  label: undefined,
+});
+
+type UseLabelParams = {
+  label?: ReactNode;
+  fieldId?: string;
+};
+
+export const useLabel = ({ label, fieldId }: UseLabelParams) => {
+  const { label: labelFromContext, fieldId: fieldIdFromContext } =
+    React.useContext(LabelContext);
+
+  return {
+    label: label ?? labelFromContext,
+    fieldId: fieldId ?? fieldIdFromContext,
+  };
+};
+
+export const LabelPositionContext =
+  React.createContext<LabelPositionContextValue>({
+    position: "start",
+  });
+
+export const useLabelPosition = () => {
+  const { position } = React.useContext(LabelPositionContext);
+  return position;
+};
+
+export type LabelPositionContextValue = {
+  position: LabelPosition;
+};
+
+export type LabelWidthContextValue = {
+  width: number;
+};
+export const LabelWidthContext = React.createContext<LabelWidthContextValue>({
+  width: 100,
+});
+
+export const useLabelWidth = () => {
+  const { width } = React.useContext(LabelWidthContext);
+  return width;
+};

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

@@ -2,42 +2,48 @@
 export * from "./components/ActivityIndicator";
 export * from "./components/AnimatePresence";
 export * from "./components/Avatar";
+export * from "./components/Breadcrumbs";
 export * from "./components/Button";
 export * from "./components/Checkbox";
 export * from "./components/Chip";
+export * from "./components/Collection";
 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/EditableText";
+export * from "./components/Fade";
 export * from "./components/FillInputField";
 export * from "./components/FillPreviewBackground";
 export * from "./components/FloatingWindow";
 export * from "./components/GradientPicker";
+export * from "./components/Grid";
 export * from "./components/GridView";
 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,
+  SelectableMenuItem,
 } from "./components/internal/Menu";
+export * from "./components/internal/MenuViewport";
 export * from "./components/Label";
 export * from "./components/LabeledElementView";
+export * from "./components/LabeledField";
+export * from "./components/List";
 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/Slider";
@@ -60,6 +66,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 +80,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";