@tipp/ui 1.1.16 → 1.1.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tipp/ui",
-  "version": "1.1.16",
+  "version": "1.1.17",
   "private": false,
   "sideEffects": false,
   "type": "module",
@@ -53,8 +53,8 @@
     "postcss-nesting": "12.0.2",
     "tsup": "^8.0.2",
     "typescript": "^5.3.3",
-    "@tipp/typescript-config": "1.0.0",
-    "@tipp/eslint-config": "1.0.0"
+    "@tipp/eslint-config": "1.0.0",
+    "@tipp/typescript-config": "1.0.0"
   },
   "scripts": {
     "build": "pnpm run build:js && pnpm run build:css",

package/src/atoms/dialog.tsx

@@ -1 +1,69 @@
-export { Dialog } from '@radix-ui/themes';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import { Cross1Icon } from '@radix-ui/react-icons';
+import { Flex, IconButton } from '@radix-ui/themes';
+import { useEffect, useRef } from 'react';
+
+function Content(props: RadixDialog.DialogContentProps): React.ReactElement {
+  const { children, style = {}, ...rest } = props;
+
+  const containerRef = useRef<Element | null>(null);
+
+  useEffect(() => {
+    containerRef.current = document.getElementsByClassName('radix-themes')[0];
+  }, []);
+
+  return (
+    <RadixDialog.Portal container={containerRef.current}>
+      <RadixDialog.Overlay className="DialogOverlay">
+        <RadixDialog.Content
+          className="DialogContent"
+          style={{ ...style }}
+          {...rest}
+        >
+          <Flex direction="column" style={{ position: 'relative' }}>
+            <RadixDialog.Close
+              asChild
+              style={{ zIndex: 9999, position: 'absolute', right: 0, top: 0 }}
+            >
+              <IconButton variant="ghost">
+                <Cross1Icon />
+              </IconButton>
+            </RadixDialog.Close>
+            {children}
+          </Flex>
+        </RadixDialog.Content>
+      </RadixDialog.Overlay>
+    </RadixDialog.Portal>
+  );
+}
+
+function Close({
+  children,
+  ...rest
+}: RadixDialog.DialogCloseProps): React.ReactElement {
+  return (
+    <RadixDialog.Close asChild {...rest}>
+      {children}
+    </RadixDialog.Close>
+  );
+}
+
+function Trigger({
+  children,
+  ...rest
+}: RadixDialog.DialogTriggerProps): React.ReactElement {
+  return (
+    <RadixDialog.Trigger asChild {...rest}>
+      {children}
+    </RadixDialog.Trigger>
+  );
+}
+
+export const Dialog = {
+  Root: RadixDialog.Root,
+  Trigger,
+  Content,
+  Close,
+  Description: RadixDialog.Description,
+  Title: RadixDialog.Title,
+};

package/src/atoms/drawer.tsx

@@ -15,10 +15,10 @@ type ContentProps = Dialog.DialogContentProps & {
 export function Content(props: ContentProps): React.ReactNode {
   const { position = 'right', className, children, ...rest } = props;
 
-  const containerRef = useRef<HTMLElement | null>(null);
+  const containerRef = useRef<Element | null>(null);
 
   useEffect(() => {
-    containerRef.current = document.getElementsByTagName('main')[0];
+    containerRef.current = document.getElementsByClassName('radix-themes')[0];
   }, []);
 
   return (