@lets-events/react 12.10.17 → 12.11.0

package/src/components/Modal.tsx

@@ -1,114 +1,130 @@
-import { ComponentProps } from "react";
-import { styled } from "../styles";
-import { Dialog as ModalRadix } from "radix-ui";
-import Icon from "./Icon";
-import { Box } from "./Box";
-import { Text } from "./Text";
-
-const ModalContentStyled = styled(ModalRadix.Content, {
-  fontFamily: "$default",
-  lineHeight: "$base",
-  fontSize: "$13",
-  maxWidth: "502px",
-  width: "calc(100% - 2rem)",
-  border: "1px solid $neutral",
-  borderRadius: "$2xl",
-  boxShadow:
-    "0px 4px 4px 0px rgba(35, 53, 67, 0.08), 0px 2px 4px 0px rgba(35, 53, 67, 0.16)",
-  position: "fixed",
-  top: "50%",
-  left: "50%",
-  transform: "translate(-50%, -50%)",
-  backgroundColor: "$dark50",
-  zIndex: "10001",
-  display: 'flex',
-  flexDirection: 'column',
-  maxHeight: '80vh',
-  overflow: 'hidden'
-});
-
-const ModalOverlay = styled(ModalRadix.Overlay, {
-  position: "fixed",
-  inset: 0,
-  opacity: 1,
-  backgroundColor: "rgba(0, 0, 0, .5)",
-  zIndex: "10000",
-});
-
-const ModalHeaderStyled = styled("div", {
-  borderBottom: "1px solid $neutral300",
-  padding: "$18 $24",
-  textAlign: "center",
-  position: "relative",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-});
-
-const ModalIconClose = styled(Icon, {
-  position: "absolute",
-  right: "$24",
-  cursor: "pointer",
-});
-
-const ModalTitleStyled = styled(ModalRadix.Title, {
-  fontFamily: "$default",
-  lineHeight: "$base",
-  fontSize: "$18",
-  fontWeight: "medium",
-  fontStyle: "normal",
-  textTransform: "uppercase",
-});
-
-export type ModalProps = ComponentProps<typeof ModalRadix.Root> & {
-  trigger?: React.ReactNode;
-  title?: string;
-  children: React.ReactNode;
-  zIndex?: number;
-  maxWidth?: number;
-};
-
-export function Modal({
-  children,
-  title,
-  trigger,
-  zIndex,
-  maxWidth,
-  ...props
-}: ModalProps) {
-  const { onOpenChange } = props;
-  return (
-    <ModalRadix.Root {...props}>
-      {trigger && <ModalRadix.Trigger asChild>{trigger}</ModalRadix.Trigger>}
-      <ModalRadix.Portal>
-        <ModalOverlay
-          css={{
-            zIndex,
-          }}
-        >
-          <ModalContentStyled
-            css={{
-              maxWidth,
-            }}
-          >
-            {title && (
-              <ModalHeaderStyled>
-                <ModalTitleStyled asChild>
-                  <Text typography={"headline6"} fontWeight={"medium"}>
-                    {title}
-                  </Text>
-                </ModalTitleStyled>
-                {(onOpenChange || trigger) && (
-                  <ModalRadix.Close asChild>
-                    <ModalIconClose name="close" size="xl" />
-                  </ModalRadix.Close>
-                )}
-              </ModalHeaderStyled>
-            )}
-            {children}
-          </ModalContentStyled>
-        </ModalOverlay>
-      </ModalRadix.Portal>
-    </ModalRadix.Root>
-  );
-}
+import { ComponentProps } from "react";
+import { styled } from "../styles";
+import { Dialog as ModalRadix } from "radix-ui";
+import Icon from "./Icon";
+import { Box } from "./Box";
+import { Text } from "./Text";
+
+const ModalContentStyled = styled(ModalRadix.Content, {
+  fontFamily: "$default",
+  lineHeight: "$base",
+  fontSize: "$13",
+  maxWidth: "502px",
+  width: "calc(100% - 2rem)",
+  border: "1px solid $neutral",
+  borderRadius: "$2xl",
+  boxShadow:
+    "0px 4px 4px 0px rgba(35, 53, 67, 0.08), 0px 2px 4px 0px rgba(35, 53, 67, 0.16)",
+  position: "fixed",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  backgroundColor: "$dark50",
+  zIndex: "10001",
+  display: 'flex',
+  flexDirection: 'column',
+  maxHeight: '80vh',
+  overflow: 'hidden',
+});
+
+const ModalOverlay = styled(ModalRadix.Overlay, {
+  position: "fixed",
+  inset: 0,
+  opacity: 1,
+  backgroundColor: "rgba(0, 0, 0, .5)",
+  zIndex: "10000",
+});
+
+const ModalHeaderStyled = styled("div", {
+  borderBottom: "1px solid $neutral300",
+  padding: "$18 $24",
+  textAlign: "center",
+  position: "relative",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+});
+
+const ModalIconClose = styled(Icon, {
+  position: "absolute",
+  right: "$24",
+  cursor: "pointer",
+});
+
+const ModalTitleStyled = styled(ModalRadix.Title, {
+  fontFamily: "$default",
+  lineHeight: "$base",
+  fontSize: "$18",
+  fontWeight: "medium",
+  fontStyle: "normal",
+  textTransform: "uppercase",
+});
+
+export type ModalProps = ComponentProps<typeof ModalRadix.Root> & {
+  trigger?: React.ReactNode;
+  title?: string;
+  children: React.ReactNode;
+  zIndex?: number;
+  maxWidth?: number;
+  maxHeight?: string;
+  height?: string;
+  preventAutoFocus?: boolean;
+  fitContent?: boolean;
+};
+
+export function Modal({
+  children,
+  title,
+  trigger,
+  zIndex,
+  maxWidth,
+  maxHeight,
+  height,
+  preventAutoFocus = false,
+  fitContent = false,
+  ...props
+}: ModalProps) {
+  const { onOpenChange } = props;
+  return (
+    <ModalRadix.Root {...props}>
+      {trigger && <ModalRadix.Trigger asChild>{trigger}</ModalRadix.Trigger>}
+      <ModalRadix.Portal>
+        <ModalOverlay
+          css={{
+            zIndex,
+          }}
+        >
+          <ModalContentStyled
+            onOpenAutoFocus={(event) => {
+              if (preventAutoFocus) {
+                event.preventDefault();
+              }
+            }}
+            css={{
+              maxWidth,
+              ...(maxHeight !== undefined && { maxHeight }),
+              ...(height !== undefined && { height }),
+              ...(fitContent && height === undefined && { height: "fit-content" }),
+            }}
+          >
+            {title && (
+              <ModalHeaderStyled>
+                <ModalTitleStyled asChild>
+                  <Text typography={"headline6"} fontWeight={"medium"}>
+                    {title}
+                  </Text>
+                </ModalTitleStyled>
+                {(onOpenChange || trigger) && (
+                  <ModalRadix.Close asChild>
+                    <ModalIconClose name="close" size="xl" />
+                  </ModalRadix.Close>
+                )}
+              </ModalHeaderStyled>
+            )}
+            {children}
+          </ModalContentStyled>
+        </ModalOverlay>
+      </ModalRadix.Portal>
+    </ModalRadix.Root>
+  );
+}