@noya-app/noya-designsystem 0.1.41 → 0.1.42

package/src/contexts/DesignSystemConfiguration.tsx

@@ -1,13 +1,5 @@
 import { getCurrentPlatform, PlatformName } from "@noya-app/noya-keymap";
-import React, {
-  createContext,
-  memo,
-  ReactNode,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
+import * as React from "react";
 import { ToastProvider } from "../components/Toast";
 import { DialogProvider } from "./DialogContext";
 import { FloatingWindowProvider } from "./FloatingWindowContext";
@@ -17,23 +9,22 @@ export type DesignSystemConfigurationContextValue = {
 };
 
 const DesignSystemConfigurationContext =
-  createContext<DesignSystemConfigurationContextValue>({
+  React.createContext<DesignSystemConfigurationContextValue>({
     platform: "key",
   });
 
-export const DesignSystemConfigurationProvider = memo(
+export const DesignSystemConfigurationProvider = React.memo(
   function DesignSystemConfigurationProvider({
     children,
     platform,
   }: {
-    children: ReactNode;
+    children: React.ReactNode;
     platform?: PlatformName;
   }) {
-    const [internalPlatform, setInternalPlatform] = useState<PlatformName>(
-      platform ?? "key"
-    );
+    const [internalPlatform, setInternalPlatform] =
+      React.useState<PlatformName>(platform ?? "key");
 
-    useEffect(() => {
+    React.useEffect(() => {
       if (platform !== undefined) return;
 
       if (typeof navigator !== "undefined") {
@@ -41,23 +32,23 @@ export const DesignSystemConfigurationProvider = memo(
       }
     }, [platform]);
 
-    const contextValue = useMemo(
+    const contextValue = React.useMemo(
       () => ({ platform: platform ?? internalPlatform }),
       [platform, internalPlatform]
     );
 
     return (
       <DesignSystemConfigurationContext.Provider value={contextValue}>
-          <DialogProvider>
-            <ToastProvider>
-              <FloatingWindowProvider>{children}</FloatingWindowProvider>
-            </ToastProvider>
-          </DialogProvider>
+        <DialogProvider>
+          <ToastProvider>
+            <FloatingWindowProvider>{children}</FloatingWindowProvider>
+          </ToastProvider>
+        </DialogProvider>
       </DesignSystemConfigurationContext.Provider>
     );
   }
 );
 
 export function useDesignSystemConfiguration(): DesignSystemConfigurationContextValue {
-  return useContext(DesignSystemConfigurationContext);
-}
+  return React.useContext(DesignSystemConfigurationContext);
+}

package/src/contexts/DialogContext.tsx

@@ -36,37 +36,60 @@ export type DialogContextValue = {
         }
   ): Promise<string | undefined>;
 
+  openConfirmationDialog(
+    options:
+      | string
+      | {
+          title: string;
+          description?: ReactNode;
+        }
+  ): Promise<boolean>;
+
   containsElement(element: HTMLElement): boolean;
 };
 
 const DialogContext = createContext<DialogContextValue | undefined>(undefined);
 
+type InputDialogContents = {
+  type: "input";
+  title: string;
+  description?: ReactNode;
+  placeholder?: string;
+  inputValue: string;
+  resolve: (value: string | undefined) => void;
+};
+
+type ConfirmationDialogContents = {
+  type: "confirmation";
+  title: string;
+  description?: ReactNode;
+  resolve: (value: boolean) => void;
+};
+
+type DialogContents = InputDialogContents | ConfirmationDialogContents;
+
 export const DialogProvider = function DialogProvider({
   children,
 }: {
   children: ReactNode;
 }) {
-  const [contents, setContents] = useState<
-    | {
-        title: string;
-        description?: ReactNode;
-        placeholder?: string;
-        inputValue: string;
-        resolve: (value: string | undefined) => void;
-      }
-    | undefined
-  >();
+  const [contents, setContents] = useState<DialogContents | undefined>();
 
   const isOpen = !!contents;
 
   const close = useCallback(() => {
     if (!contents) return;
 
-    contents.resolve(undefined);
+    if (contents.type === "input") {
+      contents.resolve(undefined);
+    } else {
+      contents.resolve(false);
+    }
+    setContents(undefined);
   }, [contents]);
 
   const submit = useCallback(() => {
-    if (!contents || !contents.inputValue) return;
+    if (!contents || contents.type !== "input") return;
 
     contents.resolve(contents.inputValue);
     setContents(undefined);
@@ -79,11 +102,12 @@ export const DialogProvider = function DialogProvider({
       typeof options === "string" ? { title: options } : options;
 
     setContents({
+      type: "input",
       title,
       description,
       inputValue: initialValue ?? "",
       placeholder,
-      resolve: (value) => {
+      resolve: (value: string | undefined) => {
         resolve(value);
         setContents(undefined);
       },
@@ -92,6 +116,26 @@ export const DialogProvider = function DialogProvider({
     return promise;
   }, []);
 
+  const openConfirmation: DialogContextValue["openConfirmationDialog"] =
+    useCallback((options) => {
+      const { promise, resolve } = createDeferredPromise<boolean>();
+
+      const { title, description } =
+        typeof options === "string" ? { title: options } : options;
+
+      setContents({
+        type: "confirmation",
+        title,
+        description,
+        resolve: (value: boolean) => {
+          resolve(value);
+          setContents(undefined);
+        },
+      });
+
+      return promise;
+    }, []);
+
   const handleKeyDown = useCallback(
     (event: React.KeyboardEvent<HTMLInputElement>) => {
       if (event.key !== "Enter") return;
@@ -117,8 +161,12 @@ export const DialogProvider = function DialogProvider({
     <>
       <DialogContext.Provider
         value={useMemo(
-          () => ({ openInputDialog: open, containsElement }),
-          [containsElement, open]
+          () => ({
+            openInputDialog: open,
+            openConfirmationDialog: openConfirmation,
+            containsElement,
+          }),
+          [containsElement, open, openConfirmation]
         )}
       >
         {children}
@@ -136,43 +184,79 @@ export const DialogProvider = function DialogProvider({
           },
           [close]
         )}
-        onOpenAutoFocus={useCallback((event: Event) => {
-          event.stopPropagation();
-          event.preventDefault();
+        onOpenAutoFocus={useCallback(
+          (event: Event) => {
+            event.stopPropagation();
+            event.preventDefault();
 
-          inputRef.current?.focus();
+            if (!contents || contents.type !== "input") return;
 
-          // Select the entire input value
-          inputRef.current?.setSelectionRange(0, inputRef.current.value.length);
-        }, [])}
+            inputRef.current?.focus();
+            inputRef.current?.setSelectionRange(
+              0,
+              inputRef.current.value.length
+            );
+          },
+          [contents]
+        )}
       >
-        <InputField.Root>
-          <InputField.Input
-            ref={inputRef}
-            placeholder={contents?.placeholder}
-            value={contents?.inputValue ?? ""}
-            onChange={(value) => {
-              setContents((contents) =>
-                contents
-                  ? {
-                      ...contents,
-                      inputValue: value,
-                    }
-                  : undefined
-              );
-            }}
-            onKeyDown={handleKeyDown}
-          />
-        </InputField.Root>
-        <Spacer.Vertical size={20} />
-        <div className="flex flex-1 flex-row items-center">
-          <Spacer.Horizontal />
-          <Button onClick={close}>Cancel</Button>
-          <Spacer.Horizontal size={16} />
-          <Button disabled={!contents?.inputValue} onClick={submit}>
-            Submit
-          </Button>
-        </div>
+        {contents?.type === "confirmation" ? (
+          <div className="flex flex-1 flex-row items-center">
+            <Spacer.Horizontal />
+            <Button
+              onClick={() => {
+                contents.resolve(false);
+                setContents(undefined);
+              }}
+            >
+              Cancel
+            </Button>
+            <Spacer.Horizontal size={16} />
+            <Button
+              onClick={() => {
+                contents.resolve(true);
+                setContents(undefined);
+              }}
+            >
+              OK
+            </Button>
+          </div>
+        ) : (
+          <>
+            <InputField.Root>
+              <InputField.Input
+                ref={inputRef}
+                placeholder={contents?.placeholder}
+                value={contents?.type === "input" ? contents.inputValue : ""}
+                onChange={(value: string) => {
+                  setContents((contents) =>
+                    contents?.type === "input"
+                      ? {
+                          ...contents,
+                          inputValue: value,
+                        }
+                      : undefined
+                  );
+                }}
+                onKeyDown={handleKeyDown}
+              />
+            </InputField.Root>
+            <Spacer.Vertical size={20} />
+            <div className="flex flex-1 flex-row items-center">
+              <Spacer.Horizontal />
+              <Button onClick={close}>Cancel</Button>
+              <Spacer.Horizontal size={16} />
+              <Button
+                disabled={
+                  !contents || contents.type !== "input" || !contents.inputValue
+                }
+                onClick={submit}
+              >
+                Submit
+              </Button>
+            </div>
+          </>
+        )}
       </Dialog>
     </>
   );
@@ -195,3 +279,7 @@ export function useOpenInputDialog() {
 export function useDialogContainsElement() {
   return useDialog().containsElement;
 }
+
+export function useOpenConfirmationDialog() {
+  return useDialog().openConfirmationDialog;
+}

package/src/contexts/ImageDataContext.tsx

@@ -1,27 +1,21 @@
-import React, {
-  createContext,
-  memo,
-  ReactNode,
-  useContext,
-  useMemo,
-} from "react";
+import * as React from "react";
 
 export type ImageDataContextValue = {
   getImageData: (ref: string) => ArrayBuffer | undefined;
 };
 
-const ImageDataContext = createContext<ImageDataContextValue | undefined>(
+const ImageDataContext = React.createContext<ImageDataContextValue | undefined>(
   undefined
 );
 
-export const ImageDataProvider = memo(function ImageDataProvider({
+export const ImageDataProvider = React.memo(function ImageDataProvider({
   children,
   getImageData,
 }: {
-  children: ReactNode;
+  children: React.ReactNode;
   getImageData?: (ref: string) => ArrayBuffer | undefined;
 }) {
-  const contextValue = useMemo(
+  const contextValue = React.useMemo(
     () => ({ getImageData: getImageData ?? (() => undefined) }),
     [getImageData]
   );
@@ -34,7 +28,7 @@ export const ImageDataProvider = memo(function ImageDataProvider({
 });
 
 export function useImageData(ref: string): ArrayBuffer | undefined {
-  const value = useContext(ImageDataContext);
+  const value = React.useContext(ImageDataContext);
 
   if (!value) {
     throw new Error("Missing ImageDataProvider");

package/src/index.css

@@ -39,7 +39,6 @@
   --listview-editing-background: #fff;
   --slider-thumb-background: white;
   --slider-border: #9698ac;
-  --radio-group-background: white;
   --mask: rgb(12, 193, 67);
   --transparent-checker: rgba(255, 255, 255, 0.8);
   --scrollbar: rgba(199, 199, 199, 0.8);
@@ -62,7 +61,7 @@
   --icon: rgb(129, 131, 165);
   --icon-selected: rgb(220, 220, 220);
   --warning: rgb(251, 211, 0);
-  --radio-group-item: rgb(139, 139, 139);
+  --segmented-control-item: rgb(139, 139, 139);
   --dot: rgba(0, 0, 0, 0.25);
   --row-highlight: #3390ff10;
   --table-row-background: var(--background);
@@ -106,7 +105,6 @@
   --listview-raised-background: rgba(181, 178, 255, 0.1);
   --listview-editing-background: #000;
   --slider-thumb-background: rgb(248, 248, 250);
-  --radio-group-background: rgba(181, 178, 255, 0.08);
   --mask: rgb(102, 187, 106);
   --transparent-checker: rgba(255, 255, 255, 0.3);
   --scrollbar: rgba(199, 199, 199, 0.2);

package/src/index.tsx

@@ -6,6 +6,7 @@ export * from "./components/Button";
 export * from "./components/Checkbox";
 export * from "./components/Chip";
 export * from "./components/Combobox";
+export * from "./components/ComboboxMenu";
 export * from "./components/ContextMenu";
 export * from "./components/Dialog";
 export * from "./components/Divider";
@@ -20,7 +21,11 @@ export * from "./components/IconButton";
 export * from "./components/Icons";
 export * from "./components/InputField";
 export * from "./components/InspectorContainer";
-export { KeyboardShortcut, SEPARATOR_ITEM } from "./components/internal/Menu";
+export {
+  KeyboardShortcut,
+  SEPARATOR_ITEM,
+  getKeyboardShortcutsForMenuItems,
+} from "./components/internal/Menu";
 export type {
   ExtractMenuItemType,
   MenuItem,
@@ -29,10 +34,11 @@ export type {
 export * from "./components/Label";
 export * from "./components/LabeledElementView";
 export * from "./components/ListView";
+export * from "./components/Message";
 export * from "./components/Popover";
 export * from "./components/Progress";
-export * from "./components/RadioGroup";
 export * from "./components/ScrollArea";
+export * from "./components/SegmentedControl";
 export * from "./components/SelectMenu";
 export * from "./components/Slider";
 export * from "./components/Sortable";
@@ -64,7 +70,7 @@ export * from "./utils/createSectionedMenu";
 export * from "./utils/getGradientBackground";
 // Utils
 export * from "./utils/colorFromString";
-export * from "./utils/completions";
+export * from "./utils/combobox";
 export * from "./utils/fuzzyScorer";
 export * from "./utils/sketchColor";
 export * from "./utils/sketchPattern";
@@ -73,3 +79,6 @@ export { default as withSeparatorElements } from "./utils/withSeparatorElements"
 // Avoid dependency cycles
 export * from "./components/DimensionInput";
 export * as InspectorPrimitives from "./components/InspectorPrimitives";
+
+export * from "./components/BaseToolbar";
+export * from "./components/Toolbar";