@lunit/design-system 2.1.0 → 2.2.3

package/src/components/Dialog/Dialog.styled.ts

@@ -1,172 +1,170 @@
-import { styled } from "@mui/material/styles";
+import { styled } from '@mui/material/styles';
 
-import type { DialogBase } from "./Dialog";
-import type { CSSObject } from "@mui/material/styles";
+import type { DialogBaseProps } from './Dialog';
+import type { CSSObject } from '@mui/material/styles';
 
 export interface DialogElementStyle {
   [key: string]: CSSObject;
 }
 
-export type DialogStyle = Pick<DialogBase, "size" | "type" | "nonModal">;
+export type DialogStyle = Pick<DialogBaseProps, 'size' | 'type' | 'nonModal'>;
 
 const DIALOG_WRAPPER_STYLE: DialogElementStyle = {
   small: {
-    width: "320px",
-    maxWidth: "320px",
+    width: '320px',
+    maxWidth: '320px',
   },
   medium: {
-    width: "500px",
-    maxWidth: "840px",
+    width: '500px',
+    maxWidth: '840px',
   },
   modal: {
-    position: "relative",
+    position: 'relative',
   },
   nonModal: {
-    position: "fixed",
-    top: "30px",
-    right: "30px",
+    position: 'fixed',
+    top: '30px',
+    right: '30px',
   },
 };
 
 const DIALOG_TITLE_STYLE: DialogElementStyle = {
   small: {
-    display: "flex",
-    alignItems: "center",
-    height: "52px",
-    maxHeight: "100%",
-    padding: "20px 20px 4px 20px", // Title's X button pluses 2px to paddingTop and Bottom
+    display: 'flex',
+    alignItems: 'center',
+    height: '52px',
+    maxHeight: '100%',
+    padding: '20px 20px 4px 20px', // Title's X button pluses 2px to paddingTop and Bottom
   },
   medium: {
-    display: "flex",
-    alignItems: "center",
-    height: "64px",
-    maxHeight: "100%",
-    padding: "30px 32px 6px 32px", // Title's X button pluses 2px to paddingTop and Bottom
+    display: 'flex',
+    alignItems: 'center',
+    height: '64px',
+    maxHeight: '100%',
+    padding: '30px 32px 6px 32px', // Title's X button pluses 2px to paddingTop and Bottom
   },
 };
 
 const DIALOG_CONTENT_STYLE: DialogElementStyle = {
   small: {
-    paddingInline: "20px calc(20px - 10px)",
-    paddingTop: "8px",
-    paddingBottom: "28px",
+    paddingInline: '20px calc(20px - 10px)',
+    paddingTop: '8px',
+    paddingBottom: '28px',
   },
   smallAction: {
-    paddingInline: "20px calc(20px - 10px)",
-    paddingBlock: "8px",
+    paddingInline: '20px calc(20px - 10px)',
+    paddingBlock: '8px',
   },
   medium: {
-    paddingInline: "32px calc(32px - 14px)",
-    paddingTop: "16px",
-    paddingBottom: "32px",
+    paddingInline: '32px calc(32px - 14px)',
+    paddingTop: '16px',
+    paddingBottom: '32px',
   },
   mediumAction: {
-    paddingInline: "32px calc(32px - 14px)",
-    paddingBlock: "16px",
+    paddingInline: '32px calc(32px - 14px)',
+    paddingBlock: '16px',
   },
 };
 
 const DIALOG_ACTION_STYLE: DialogElementStyle = {
   small: {
-    height: "64px",
-    padding: "8px 20px 20px 20px",
+    height: '64px',
+    padding: '8px 20px 20px 20px',
   },
   medium: {
-    height: "84px",
-    padding: "16px 32px 32px 32px",
+    height: '84px',
+    padding: '16px 32px 32px 32px',
   },
 };
 
-export const StyledBackdrop = styled("div")({
-  position: "fixed",
+export const StyledBackdrop = styled('div')({
+  position: 'fixed',
   top: 0,
   left: 0,
-  width: "100%",
-  height: "100%",
-  backgroundColor: "rgba(17, 17, 19, 0.7)",
+  width: '100%',
+  height: '100%',
+  backgroundColor: 'rgba(17, 17, 19, 0.7)',
   zIndex: 1000,
-  display: "grid",
-  placeItems: "center",
+  display: 'grid',
+  placeItems: 'center',
 });
 
-export const StyledDialog = styled("div")<DialogStyle>(
-  ({ theme, size, nonModal, type }) => ({
-    zIndex: 1001,
-    maxHeight: "80vh",
-    display: "flex",
-    flexDirection: "column",
-    boxSizing: "border-box",
-    borderRadius: "10px",
-    backgroundColor: theme.palette.lunit_token.core.bg_03,
-    color: theme.palette.lunit_token.core.text_normal,
-
-    ...DIALOG_WRAPPER_STYLE[size === "small" ? "small" : "medium"],
-    ...DIALOG_WRAPPER_STYLE[nonModal ? "nonModal" : "modal"],
-
-    "& #dialog-title": {
-      ...DIALOG_TITLE_STYLE[size === "small" ? "small" : "medium"],
-    },
+export const StyledDialog = styled('div')<DialogStyle>(({ theme, size, nonModal, type }) => ({
+  zIndex: 1001,
+  maxHeight: '80vh',
+  display: 'flex',
+  flexDirection: 'column',
+  boxSizing: 'border-box',
+  borderRadius: '10px',
+  backgroundColor: theme.palette.lunit_token.core.bg_03,
+  color: theme.palette.lunit_token.core.text_normal,
+
+  ...DIALOG_WRAPPER_STYLE[size === 'small' ? 'small' : 'medium'],
+  ...DIALOG_WRAPPER_STYLE[nonModal ? 'nonModal' : 'modal'],
+
+  '& #dialog-title': {
+    ...DIALOG_TITLE_STYLE[size === 'small' ? 'small' : 'medium'],
+  },
 
-    "& #dialog-content": {
-      ...DIALOG_CONTENT_STYLE[
-        size === "small" && type !== "passive"
-          ? "smallAction"
-          : size === "small"
-          ? "small"
-          : size === "medium" && type !== "passive"
-          ? "mediumAction"
-          : "medium"
-      ],
-
-      scrollbarGutter: "stable",
-      "::-webkit-scrollbar": {
-        width: size === "small" ? "10px" : "14px",
-      },
-      "::webkit-scrollbar-track": {
-        background: "transparent",
-      },
-      "::-webkit-scrollbar-thumb": {
-        backgroundClip: "padding-box",
-        border: `2px solid transparent`,
-        /**
-         * Figma's border-radius is 6px, but actual border radius is 10px since padding 2px is added.
-         */
-        borderRadius: "10px",
-        backgroundColor: theme.palette.lunit_token.component.scrollbars_bg,
-      },
+  '& #dialog-content': {
+    ...DIALOG_CONTENT_STYLE[
+      size === 'small' && type !== 'passive'
+        ? 'smallAction'
+        : size === 'small'
+          ? 'small'
+          : size === 'medium' && type !== 'passive'
+            ? 'mediumAction'
+            : 'medium'
+    ],
+
+    scrollbarGutter: 'stable',
+    '::-webkit-scrollbar': {
+      width: size === 'small' ? '10px' : '14px',
     },
-
-    "& #dialog-action": {
-      ...DIALOG_ACTION_STYLE[size === "small" ? "small" : "medium"],
+    '::webkit-scrollbar-track': {
+      background: 'transparent',
     },
-  })
-);
-
-export const StyledDialogTitle = styled("header")({
-  display: "flex",
-  width: "100%",
-  flex: "0 0 auto",
-  alignItems: "center",
-  justifyContent: "flex-start",
-  gap: "8px",
+    '::-webkit-scrollbar-thumb': {
+      backgroundClip: 'padding-box',
+      border: `2px solid transparent`,
+      /**
+       * Figma's border-radius is 6px, but actual border radius is 10px since padding 2px is added.
+       */
+      borderRadius: '10px',
+      backgroundColor: theme.palette.lunit_token.component.scrollbars_bg,
+    },
+  },
+
+  '& #dialog-action': {
+    ...DIALOG_ACTION_STYLE[size === 'small' ? 'small' : 'medium'],
+  },
+}));
+
+export const StyledDialogTitle = styled('header')({
+  display: 'flex',
+  width: '100%',
+  flex: '0 0 auto',
+  alignItems: 'center',
+  justifyContent: 'flex-start',
+  gap: '8px',
 });
 
-export const StyledDialogTitleIconWrapper = styled("div")({
-  display: "flex",
-  justifyContent: "center",
-  width: "20px",
-  height: "20px",
-  "& .MuiSvgIcon-root": {
-    display: "flex",
-    justifyContent: "center",
-    width: "20px",
-    height: "20px",
-    fontSize: "20px",
+export const StyledDialogTitleIconWrapper = styled('div')({
+  display: 'flex',
+  justifyContent: 'center',
+  width: '20px',
+  height: '20px',
+  '& .MuiSvgIcon-root': {
+    display: 'flex',
+    justifyContent: 'center',
+    width: '20px',
+    height: '20px',
+    fontSize: '20px',
   },
 });
 
-export const StyledDialogContent = styled("div")(({ theme }) => ({
+export const StyledDialogContent = styled('div')(({ theme }) => ({
   ...theme.typography.body2_14_regular,
-  flex: "1 1 auto",
-  overflowY: "scroll",
+  flex: '1 1 auto',
+  overflowY: 'scroll',
 }));

package/src/components/Dialog/Dialog.tsx

@@ -1,45 +1,45 @@
-import React, { useEffect } from "react";
-import { createPortal } from "react-dom";
-import { Close } from "@lunit/design-system-icons";
+import React, { useEffect, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { Close } from '@lunit/design-system-icons';
 
-import { DialogAction } from "./components/DialogAction";
+import { DialogAction } from './components/DialogAction';
 import {
   StyledBackdrop,
   StyledDialog,
   StyledDialogContent,
   StyledDialogTitle,
   StyledDialogTitleIconWrapper,
-} from "./Dialog.styled";
-import Button from "../Button";
-import Typography from "../Typography";
+} from './Dialog.styled';
+import Button from '../Button';
+import Typography from '../Typography';
 
-import type { SxProps } from "@mui/material/styles";
-import type { TypographyProps } from "@mui/material";
+import type { SxProps } from '@mui/material/styles';
+import type { TypographyProps } from '@mui/material';
 
-export interface DialogBase {
+export interface DialogBaseProps {
   isOpen: boolean;
   onClose(): void;
-  type?: "passive" | "action"; // default passive
+  type?: 'passive' | 'action'; // default passive
   nonModal?: boolean; // default false
   title: string;
   titleIcon?: React.ReactNode;
-  titleVariant?: TypographyProps["variant"];
+  titleVariant?: TypographyProps['variant'];
   children: React.ReactNode;
   actions?: React.ReactNode;
   enableBackdropClose?: boolean;
-  size?: "small" | "medium"; // default "small"
+  size?: 'small' | 'medium'; // default "small"
   sx?: SxProps;
   style?: React.CSSProperties;
   className?: string;
 }
 
-export interface PassiveDialogType extends DialogBase {
-  type: "passive";
+export interface PassiveDialogType extends DialogBaseProps {
+  type: 'passive';
   actions?: undefined;
   enableBackdropClose?: true;
 }
-export interface ActionDialogType extends DialogBase {
-  type: "action";
+export interface ActionDialogType extends DialogBaseProps {
+  type: 'action';
   actions: React.ReactNode;
   enableBackdropClose?: boolean;
 }
@@ -66,31 +66,33 @@ export type DialogProps = ModalProps | NonModalProps;
 function Dialog(props: DialogProps) {
   const { isOpen, type, nonModal = false, onClose } = props;
 
-  const isActionModal = type === "action" && !nonModal;
-  const isPassiveModal = type === "passive" && !nonModal;
+  const isActionModal = type === 'action' && !nonModal;
+  const isPassiveModal = type === 'passive' && !nonModal;
 
-  function handleBackdropClose(e: React.MouseEvent<HTMLDivElement>) {
-    const isClosable =
-      isPassiveModal || (isActionModal && props.enableBackdropClose);
+  const handleBackdropClose = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      const isClosable = isPassiveModal || (isActionModal && props.enableBackdropClose);
 
-    if (!isClosable) return;
-    if (e.target !== e.currentTarget) return;
+      if (!isClosable) return;
+      if (e.target !== e.currentTarget) return;
 
-    onClose();
-  }
+      onClose();
+    },
+    [isPassiveModal, isActionModal, props.enableBackdropClose, onClose],
+  );
 
   useEffect(() => {
     const isClosable = isOpen && isPassiveModal;
     if (!isClosable) return;
 
     function handleEscClose(event: KeyboardEvent) {
-      if (event.key === "Escape") onClose();
+      if (event.key === 'Escape') onClose();
     }
 
-    document.addEventListener("keydown", handleEscClose);
+    document.addEventListener('keydown', handleEscClose);
 
     return () => {
-      document.removeEventListener("keydown", handleEscClose);
+      document.removeEventListener('keydown', handleEscClose);
     };
   }, [isOpen, isPassiveModal, onClose]);
 
@@ -99,29 +101,26 @@ function Dialog(props: DialogProps) {
     nonModal ? (
       <DialogBase dialogProps={{ ...props }} />
     ) : (
-      <StyledBackdrop
-        onClick={handleBackdropClose}
-        data-testid="dialog-backdrop"
-      >
+      <StyledBackdrop onClick={handleBackdropClose} data-testid="dialog-backdrop">
         <DialogBase dialogProps={{ ...props }} />
       </StyledBackdrop>
     ),
 
-    document.body
+    document.body,
   );
 }
 
-function DialogBase({ dialogProps }: { dialogProps: DialogBase }) {
+function DialogBase({ dialogProps }: { dialogProps: DialogBaseProps }) {
   const {
     nonModal = false,
     onClose,
     title,
     titleIcon,
-    titleVariant = "headline5",
+    titleVariant = 'headline5',
     children,
     actions,
     type,
-    size = "small",
+    size = 'small',
     sx,
     style,
     className,
@@ -138,7 +137,7 @@ function DialogBase({ dialogProps }: { dialogProps: DialogBase }) {
         ...sx,
       }}
       style={style}
-      className={`dialog elevation2 ${className ?? ""}`}
+      className={`dialog elevation2 ${className ?? ''}`}
     >
       <StyledDialogTitle id="dialog-title" className="dialog-title-wrapper">
         {titleIcon && (
@@ -146,14 +145,10 @@ function DialogBase({ dialogProps }: { dialogProps: DialogBase }) {
             {titleIcon}
           </StyledDialogTitleIconWrapper>
         )}
-        <Typography
-          component="h2"
-          id="dialog-title-text"
-          variant={titleVariant}
-        >
+        <Typography component="h2" id="dialog-title-text" variant={titleVariant}>
           {title}
         </Typography>
-        {type === "passive" && (
+        {type === 'passive' && (
           <Button
             id="dialog-title-close-button"
             data-testid="dialog-title-close-button"
@@ -163,13 +158,13 @@ function DialogBase({ dialogProps }: { dialogProps: DialogBase }) {
             onClick={onClose}
             sx={{
               marginRight: 0,
-              marginLeft: "auto",
+              marginLeft: 'auto',
             }}
           />
         )}
       </StyledDialogTitle>
       <StyledDialogContent id="dialog-content">{children}</StyledDialogContent>
-      {type === "action" && actions !== null ? (
+      {type === 'action' && actions !== null ? (
         // `actions !== null` is used to not render DialogAction when actions is undefined
         // There was a case when actions is undefined, but DialogAction is rendered with null children
         <DialogAction>{actions}</DialogAction>

package/src/components/Dialog/components/DialogAction.tsx

@@ -1,17 +1,17 @@
-import React from "react";
-import { styled } from "@mui/material/styles";
+import React from 'react';
+import { styled } from '@mui/material/styles';
 
 interface DialogActionProps {
   children: React.ReactNode;
-  justifyContent?: React.CSSProperties["justifyContent"];
+  justifyContent?: React.CSSProperties['justifyContent'];
   sx?: React.CSSProperties;
 }
 
-const StyledDialogActions = styled("div")({
-  display: "flex",
-  flex: "0 0 auto",
-  alignItems: "center",
-  justifyContent: "flex-end",
+const StyledDialogActions = styled('div')({
+  display: 'flex',
+  flex: '0 0 auto',
+  alignItems: 'center',
+  justifyContent: 'flex-end',
   gap: 12,
 });
 

package/src/components/Dialog/index.ts

@@ -1,7 +1,7 @@
-export { default } from "./Dialog";
+export { default } from './Dialog';
 
 export type {
-  DialogBase,
+  DialogBaseProps,
   PassiveDialogType,
   ActionDialogType,
   PassiveModalProps,
@@ -11,4 +11,4 @@ export type {
   ModalProps,
   NonModalProps,
   DialogProps,
-} from "./Dialog";
+} from './Dialog';