@noya-app/noya-designsystem 0.1.46 → 0.1.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.46",
+  "version": "0.1.47",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/components/Dialog.tsx

@@ -70,20 +70,6 @@ const StyledDescription = forwardRef<
   />
 ));
 
-const CloseButtonContainer = forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cx(
-      `absolute top-dialog-padding right-dialog-padding z-[1] bg-popover-background p-[4px_6px] rounded-[2px] border border-[rgba(128,128,128,0.2)] `,
-      className
-    )}
-    {...props}
-  />
-));
-
 export interface IDialog {
   containsElement: (element: HTMLElement) => boolean;
 }
@@ -141,11 +127,17 @@ export const Dialog = forwardRef(function Dialog(
         })}
       >
         {showCloseButton && (
-          <CloseButtonContainer>
-            <DialogPrimitive.Close asChild>
-              <IconButton iconName="Cross1Icon" />
-            </DialogPrimitive.Close>
-          </CloseButtonContainer>
+          <DialogPrimitive.Close asChild>
+            <IconButton
+              iconName="Cross1Icon"
+              className="z-[1]"
+              style={{
+                position: "absolute",
+                top: "var(--dialog-padding)",
+                right: "var(--dialog-padding)",
+              }}
+            />
+          </DialogPrimitive.Close>
         )}
         {title && (
           <>

package/src/components/SearchCompletionMenu.tsx

@@ -6,6 +6,7 @@ import {
   ListView,
   SelectableMenuItem,
   Small,
+  cssVars,
   fuzzyFilter,
   getNextIndex,
   isSelectableMenuItem,
@@ -155,32 +156,11 @@ export const SearchCompletionMenu = forwardRef(function SearchCompletionMenu(
             borderRadius: 0,
             outline: "none",
             boxShadow: "none",
-            backgroundColor: "white",
+            backgroundColor: cssVars.colors.inputBackground,
             padding: "4px 12px",
           }}
           onChange={setSearch}
           onKeyDown={handleKeyDown}
-          // onBlur={(event) => {
-          //   const isWithinPopover =
-          //     event.relatedTarget &&
-          //     event.relatedTarget instanceof HTMLElement &&
-          //     event.relatedTarget.role === 'dialog';
-
-          //   if (isWithinPopover) {
-          //     inputRef.current?.focus();
-
-          //     event.stopPropagation();
-          //     event.preventDefault();
-          //   }
-          // }}
-          // onPointerDown={(event) => {
-          //   event.stopPropagation();
-          //   event.preventDefault();
-          // }}
-          // onFocusCapture={(event) => {
-          //   event.stopPropagation();
-          //   event.preventDefault();
-          // }}
         />
       </InputField.Root>
       <Divider />

package/src/components/Switch.tsx

@@ -38,7 +38,7 @@ export const Switch = function Switch({
         onChange(newValue);
       }}
       className={cx(
-        "all-unset w-8 h-[19px] bg-active-background rounded-full relative cursor-pointer [webkit-tap-highlight-color:rgba(0,0,0,0)] focus:ring-2 focus:ring-primary focus:ring-offset-[1px] outline-none data-[state=checked]:bg-primary transition-all",
+        "all-unset w-8 h-[19px] bg-active-background rounded-full relative cursor-pointer ring-offset-background [webkit-tap-highlight-color:rgba(0,0,0,0)] focus:ring-2 focus:ring-primary focus:ring-offset-[1px] outline-none data-[state=checked]:bg-primary transition-all",
         colorScheme === "secondary" && "data-[state=checked]:bg-secondary",
         "focus:z-interactable",
         className

package/src/contexts/DialogContext.tsx

@@ -25,6 +25,12 @@ function createDeferredPromise<T>() {
 }
 
 export type DialogContextValue = {
+  openDialog(options: {
+    title: string;
+    description?: ReactNode;
+    children: ReactNode;
+  }): Promise<void>;
+
   openInputDialog(
     options:
       | string
@@ -66,7 +72,18 @@ type ConfirmationDialogContents = {
   resolve: (value: boolean) => void;
 };
 
-type DialogContents = InputDialogContents | ConfirmationDialogContents;
+type CustomDialogContents = {
+  type: "custom";
+  title: string;
+  description?: ReactNode;
+  children: ReactNode;
+  resolve: () => void;
+};
+
+type DialogContents =
+  | InputDialogContents
+  | ConfirmationDialogContents
+  | CustomDialogContents;
 
 export const DialogProvider = function DialogProvider({
   children,
@@ -136,6 +153,26 @@ export const DialogProvider = function DialogProvider({
       return promise;
     }, []);
 
+  const openCustomDialog: DialogContextValue["openDialog"] = useCallback(
+    (options) => {
+      const { promise, resolve } = createDeferredPromise<void>();
+
+      setContents({
+        type: "custom",
+        title: options.title,
+        description: options.description,
+        children: options.children,
+        resolve: () => {
+          resolve();
+          setContents(undefined);
+        },
+      });
+
+      return promise;
+    },
+    []
+  );
+
   const handleKeyDown = useCallback(
     (event: React.KeyboardEvent<HTMLInputElement>) => {
       if (event.key !== "Enter") return;
@@ -162,11 +199,12 @@ export const DialogProvider = function DialogProvider({
       <DialogContext.Provider
         value={useMemo(
           () => ({
+            openDialog: openCustomDialog,
             openInputDialog: open,
             openConfirmationDialog: openConfirmation,
             containsElement,
           }),
-          [containsElement, open, openConfirmation]
+          [containsElement, open, openConfirmation, openCustomDialog]
         )}
       >
         {children}
@@ -221,12 +259,16 @@ export const DialogProvider = function DialogProvider({
               OK
             </Button>
           </div>
+        ) : contents?.type === "custom" ? (
+          <>{contents.children}</>
         ) : (
           <>
             <InputField.Root>
               <InputField.Input
                 ref={inputRef}
-                placeholder={contents?.placeholder}
+                placeholder={
+                  contents?.type === "input" ? contents.placeholder : undefined
+                }
                 value={contents?.type === "input" ? contents.inputValue : ""}
                 onChange={(value: string) => {
                   setContents((contents) =>
@@ -262,7 +304,7 @@ export const DialogProvider = function DialogProvider({
   );
 };
 
-function useDialog(): DialogContextValue {
+export function useDialogContext(): DialogContextValue {
   const value = useContext(DialogContext);
 
   if (!value) {
@@ -273,13 +315,17 @@ function useDialog(): DialogContextValue {
 }
 
 export function useOpenInputDialog() {
-  return useDialog().openInputDialog;
+  return useDialogContext().openInputDialog;
 }
 
 export function useDialogContainsElement() {
-  return useDialog().containsElement;
+  return useDialogContext().containsElement;
 }
 
 export function useOpenConfirmationDialog() {
-  return useDialog().openConfirmationDialog;
+  return useDialogContext().openConfirmationDialog;
+}
+
+export function useOpenDialog() {
+  return useDialogContext().openDialog;
 }

package/src/index.css

@@ -104,7 +104,8 @@
   --popover-divider: rgba(255, 255, 255, 0.08);
   --listview-raised-background: rgba(181, 178, 255, 0.1);
   --listview-editing-background: #000;
-  --slider-thumb-background: rgb(248, 248, 250);
+  --slider-thumb-background: var(--input-background-light);
+  --slider-border: var(--divider);
   --mask: rgb(102, 187, 106);
   --transparent-checker: rgba(255, 255, 255, 0.3);
   --scrollbar: rgba(199, 199, 199, 0.2);