react-science 0.32.2 → 0.34.0

package/lib-esm/components/modal/useDialog.js

@@ -1,47 +0,0 @@
-import { useCallback, useEffect, useMemo, } from 'react';
-import { useKbsDisableGlobal } from 'react-kbs';
-import { useOnOff } from '../hooks/useOnOff';
-export function useDialog({ dialogRef, isOpen, requestCloseOnEsc, requestCloseOnBackdrop, onRequestClose, }) {
-    useKbsDisableGlobal(isOpen);
-    const [isModalShown, showModal, hideModal] = useOnOff(false);
-    useEffect(() => {
-        const dialog = dialogRef.current;
-        if (dialog && isOpen) {
-            showModal();
-            dialog.showModal();
-            return () => {
-                hideModal();
-                dialog.close();
-            };
-        }
-    }, [dialogRef, isOpen, showModal, hideModal]);
-    const onCancel = useCallback((event) => {
-        if (!requestCloseOnEsc) {
-            event.preventDefault();
-        }
-    }, [requestCloseOnEsc]);
-    const onClick = useCallback((event) => {
-        const dialog = dialogRef.current;
-        if (!dialog) {
-            return;
-        }
-        // Ref: https://stackoverflow.com/questions/25864259/how-to-close-the-new-html-dialog-tag-by-clicking-on-its-backdrop
-        const rect = dialog.getBoundingClientRect();
-        const isInDialog = rect.top <= event.clientY &&
-            event.clientY <= rect.top + rect.height &&
-            rect.left <= event.clientX &&
-            event.clientX <= rect.left + rect.width;
-        event.stopPropagation();
-        // Since the dialog has no size of itself, this condition is only
-        // `true` when we click on the backdrop.
-        if (!isInDialog && requestCloseOnBackdrop) {
-            onRequestClose();
-        }
-    }, [requestCloseOnBackdrop, onRequestClose, dialogRef]);
-    const dialogProps = useMemo(() => ({ onClick, onCancel, onClose: onRequestClose }), [onClick, onCancel, onRequestClose]);
-    return {
-        dialogProps,
-        isModalShown,
-    };
-}
-//# sourceMappingURL=useDialog.js.map

package/lib-esm/components/modal/useDialog.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useDialog.js","sourceRoot":"","sources":["../../../src/components/modal/useDialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,WAAW,EACX,SAAS,EACT,OAAO,GACR,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAEhD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAmB7C,MAAM,UAAU,SAAS,CAAC,EACxB,SAAS,EACT,MAAM,EACN,iBAAiB,EACjB,sBAAsB,EACtB,cAAc,GACG;IACjB,mBAAmB,CAAC,MAAM,CAAC,CAAC;IAC5B,MAAM,CAAC,YAAY,EAAE,SAAS,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE7D,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC;QACjC,IAAI,MAAM,IAAI,MAAM,EAAE,CAAC;YACrB,SAAS,EAAE,CAAC;YACZ,MAAM,CAAC,SAAS,EAAE,CAAC;YACnB,OAAO,GAAG,EAAE;gBACV,SAAS,EAAE,CAAC;gBACZ,MAAM,CAAC,KAAK,EAAE,CAAC;YACjB,CAAC,CAAC;QACJ,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC;IAE9C,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,KAAK,EAAE,EAAE;QACR,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACvB,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC;IACH,CAAC,EACD,CAAC,iBAAiB,CAAC,CACpB,CAAC;IAEF,MAAM,OAAO,GAAG,WAAW,CACzB,CAAC,KAAK,EAAE,EAAE;QACR,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC;QACjC,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,OAAO;QACT,CAAC;QAED,qHAAqH;QACrH,MAAM,IAAI,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC;QAC5C,MAAM,UAAU,GACd,IAAI,CAAC,GAAG,IAAI,KAAK,CAAC,OAAO;YACzB,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM;YACvC,IAAI,CAAC,IAAI,IAAI,KAAK,CAAC,OAAO;YAC1B,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC;QAE1C,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,iEAAiE;QACjE,wCAAwC;QACxC,IAAI,CAAC,UAAU,IAAI,sBAAsB,EAAE,CAAC;YAC1C,cAAc,EAAE,CAAC;QACnB,CAAC;IACH,CAAC,EACD,CAAC,sBAAsB,EAAE,cAAc,EAAE,SAAS,CAAC,CACpD,CAAC;IAEF,MAAM,WAAW,GAAG,OAAO,CACzB,GAAG,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,cAAc,EAAE,CAAC,EACtD,CAAC,OAAO,EAAE,QAAQ,EAAE,cAAc,CAAC,CACpC,CAAC;IAEF,OAAO;QACL,WAAW;QACX,YAAY;KACb,CAAC;AACJ,CAAC"}

package/lib-esm/components/tabs/Tabs.d.ts

@@ -1,16 +0,0 @@
-import { ReactNode } from 'react';
-type TabsOrientation = 'vertical' | 'horizontal';
-export interface TabItem<T extends string = string> {
-    id: T;
-    title: ReactNode;
-    content: ReactNode;
-}
-interface TabsProps<T extends string = string> {
-    opened?: T;
-    orientation?: TabsOrientation;
-    items: Array<TabItem<T>>;
-    onClick?: (id: T) => void;
-}
-export declare function Tabs<T extends string = string>(props: TabsProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=Tabs.d.ts.map

package/lib-esm/components/tabs/Tabs.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAI3C,KAAK,eAAe,GAAG,UAAU,GAAG,YAAY,CAAC;AAEjD,MAAM,WAAW,OAAO,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAChD,EAAE,EAAE,CAAC,CAAC;IACN,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,EAAE,SAAS,CAAC;CACpB;AAQD,UAAU,SAAS,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAC3C,MAAM,CAAC,EAAE,CAAC,CAAC;IACX,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,IAAI,CAAC;CAC3B;AA4CD,wBAAgB,IAAI,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,oDAmBlE"}

package/lib-esm/components/tabs/Tabs.js

@@ -1,95 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
-import { useMemo } from 'react';
-import { TabsProvider, useTabsContext } from './TabsContext';
-const styles = {
-    scroll: css({
-        '&::-webkit-scrollbar': {
-            height: '7px',
-            width: '7px',
-        },
-        '&::-webkit-scrollbar-track': {
-            backgroundColor: 'rgba(0,0,0,.05)',
-        },
-        '&::-webkit-scrollbar-thumb': {
-            backgroundColor: 'rgba(0,0,0,.2)',
-        },
-    }),
-    item: (isSelected, orientation) => {
-        return css([
-            {
-                padding: '0.25em 1em',
-                border: '1px solid hsl(0deg, 0%, 80%)',
-                fontSize: '1.125em',
-                ':hover': {
-                    backgroundColor: 'hsl(0deg, 0%, 90%)',
-                },
-                whiteSpace: 'nowrap',
-            },
-            isSelected && {
-                backgroundColor: 'hsl(0deg, 0%, 95%)',
-                ':hover': {
-                    backgroundColor: 'hsl(0deg, 0%, 90%)',
-                },
-            },
-            orientation === 'horizontal' && {
-                margin: '0px 2px 0px 2px',
-                borderBottom: 'none',
-            },
-            orientation === 'vertical' && {
-                margin: '2px 0px 2px 0px',
-                borderRight: 'none',
-            },
-        ]);
-    },
-};
-export function Tabs(props) {
-    const { orientation = 'horizontal', items, onClick, opened } = props;
-    const item = useMemo(() => items.find(({ id: itemId }) => itemId === opened), [items, opened]);
-    if (orientation === 'horizontal') {
-        return (_jsx(TabsProvider, { opened: item, children: _jsx(TabsHorizontal, { items: items, onClick: onClick }) }));
-    }
-    return (_jsx(TabsProvider, { opened: item, children: _jsx(TabsVertical, { items: items, onClick: onClick }) }));
-}
-function TabsItem(props) {
-    const item = useTabsContext();
-    return (_jsx("button", { type: "button", onClick: props.onClick, css: styles.item(item?.id === props.id, props.orientation), children: props.title }));
-}
-function TabsVertical(props) {
-    const { items, onClick } = props;
-    const item = useTabsContext();
-    return (_jsxs("div", { style: {
-            display: 'flex',
-            flexDirection: 'row',
-            flex: '1 1 0%',
-            overflowY: 'hidden',
-            height: '100%',
-        }, children: [_jsx("div", { style: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    borderRight: '1px solid hsl(0deg, 0%, 80%)',
-                    overflowY: 'auto',
-                }, css: styles.scroll, children: items.map((item) => (_jsx(TabsItem, { orientation: "vertical", title: item.title, id: item.id, onClick: () => {
-                        onClick?.(item.id);
-                    } }, item.id))) }), item && (_jsx("div", { style: { flex: '1 1 0%', overflowX: 'auto' }, children: item.content }))] }));
-}
-function TabsHorizontal(props) {
-    const { items, onClick } = props;
-    const item = useTabsContext();
-    return (_jsxs("div", { style: {
-            display: 'flex',
-            flexDirection: 'column',
-            overflowX: 'hidden',
-            height: '100%',
-        }, children: [_jsx("div", { style: {
-                    display: 'flex',
-                    flexDirection: 'row',
-                    borderBottom: '1px solid hsl(0deg, 0%, 80%)',
-                    overflowX: 'auto',
-                    overflowY: 'hidden',
-                }, css: styles.scroll, children: items.map((item) => (_jsx(TabsItem, { orientation: "horizontal", id: item.id, title: item.title, onClick: () => {
-                        onClick?.(item.id);
-                    } }, item.id))) }), item && (_jsx("div", { style: { flex: '1 1 0%', overflowX: 'auto' }, children: item.content }))] }));
-}
-//# sourceMappingURL=Tabs.js.map

package/lib-esm/components/tabs/Tabs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.tsx"],"names":[],"mappings":"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"}

package/lib-esm/components/tabs/TabsContext.d.ts

@@ -1,8 +0,0 @@
-import { ReactNode } from 'react';
-import type { TabItem } from './Tabs';
-export declare function useTabsContext(): TabItem<string> | undefined;
-export declare function TabsProvider<T extends string = string>(props: {
-    children: ReactNode;
-    opened?: TabItem<T>;
-}): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=TabsContext.d.ts.map

package/lib-esm/components/tabs/TabsContext.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TabsContext.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/TabsContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAc,MAAM,OAAO,CAAC;AAE7D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAItC,wBAAgB,cAAc,gCAO7B;AAED,wBAAgB,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,KAAK,EAAE;IAC7D,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;CACrB,2CAGA"}

package/lib-esm/components/tabs/TabsContext.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext } from 'react';
-const tabsContext = createContext(null);
-export function useTabsContext() {
-    const context = useContext(tabsContext);
-    if (context === null) {
-        throw new Error('TabsContext was not found');
-    }
-    return context;
-}
-export function TabsProvider(props) {
-    const { children, opened } = props;
-    return _jsx(tabsContext.Provider, { value: opened, children: children });
-}
-//# sourceMappingURL=TabsContext.js.map

package/lib-esm/components/tabs/TabsContext.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TabsContext.js","sourceRoot":"","sources":["../../../src/components/tabs/TabsContext.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAa,UAAU,EAAE,MAAM,OAAO,CAAC;AAI7D,MAAM,WAAW,GAAG,aAAa,CAA6B,IAAI,CAAC,CAAC;AAEpE,MAAM,UAAU,cAAc;IAC5B,MAAM,OAAO,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IACxC,IAAI,OAAO,KAAK,IAAI,EAAE,CAAC;QACrB,MAAM,IAAI,KAAK,CAAC,2BAA2B,CAAC,CAAC;IAC/C,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,MAAM,UAAU,YAAY,CAA4B,KAGvD;IACC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACnC,OAAO,KAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,MAAM,YAAG,QAAQ,GAAwB,CAAC;AAChF,CAAC"}

package/lib-esm/components/tabs/index.d.ts

@@ -1,2 +0,0 @@
-export * from './Tabs';
-//# sourceMappingURL=index.d.ts.map

package/lib-esm/components/tabs/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}

package/lib-esm/components/tabs/index.js

@@ -1,2 +0,0 @@
-export * from './Tabs';
-//# sourceMappingURL=index.js.map

package/lib-esm/components/tabs/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/tabs/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}

package/src/components/modal/ConfirmModal.tsx

@@ -1,134 +0,0 @@
-import styled from '@emotion/styled';
-import type { ReactNode } from 'react';
-import { useCallback, useImperativeHandle, useRef, useState } from 'react';
-
-import { Button } from '..';
-import { Portal } from '../root-layout/Portal';
-import { RootLayoutProvider } from '../root-layout/RootLayoutContext';
-
-import { useDialog } from './useDialog';
-
-interface ConfirmModalProps {
-  children: ReactNode;
-  isOpen: boolean;
-  requestCloseOnEsc?: boolean;
-  requestCloseOnBackdrop?: boolean;
-  onConfirm: () => void;
-  onCancel?: () => void;
-  onRequestClose: () => void;
-  saveText?: string;
-  cancelText?: string;
-  headerColor: string;
-  maxWidth?: number;
-}
-
-const ConfirmModalDialog = styled.dialog`
-  background-color: transparent;
-  :focus {
-    outline: none;
-  }
-  ::backdrop {
-    background-color: rgba(113, 113, 122, 0.75);
-  }
-`;
-
-const ConfirmModalContents = styled.div<{
-  headerColor: string;
-}>`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  background-color: white;
-  width: 100%;
-  border-radius: 0.5rem;
-  box-shadow:
-    0 0 0 0,
-    0 0px 16px rgba(0, 0, 0, 0.3);
-  border-top: 10px solid ${({ headerColor }) => headerColor};
-`;
-
-const ConfirmModalChildrenRoot = styled.div<{ headerColor: string }>`
-  color: ${({ headerColor }) => headerColor};
-  display: flex;
-  flex: 1 1 0%;
-  font-weight: bold;
-  padding: 20px;
-  font-size: 14px;
-`;
-
-const ConfirmModalFooter = styled.div`
-  border-top: 2px solid rgb(247, 247, 247);
-  padding: 10px 20px 10px 20px;
-  display: flex;
-  flex-direction: row-reverse;
-  gap: 10px;
-`;
-
-type MaybeHTMLDialogElement = HTMLDialogElement | null;
-
-export function ConfirmModal(props: ConfirmModalProps) {
-  const {
-    isOpen,
-    saveText = 'Save',
-    cancelText = 'Cancel',
-    headerColor,
-    maxWidth,
-    onRequestClose,
-    onCancel = onRequestClose,
-    onConfirm,
-    requestCloseOnBackdrop = true,
-    requestCloseOnEsc = true,
-    children,
-  } = props;
-
-  const dialogRef = useRef<HTMLDialogElement>(null);
-  const { dialogProps, isModalShown } = useDialog({
-    dialogRef,
-    isOpen,
-    requestCloseOnEsc,
-    requestCloseOnBackdrop,
-    onRequestClose,
-  });
-  const [portalDomNode, setPortalDomNode] =
-    useState<MaybeHTMLDialogElement>(null);
-  const dialogCallbackRef = useCallback((node: MaybeHTMLDialogElement) => {
-    setPortalDomNode(node);
-  }, []);
-
-  useImperativeHandle<MaybeHTMLDialogElement, MaybeHTMLDialogElement>(
-    dialogCallbackRef,
-    () => dialogRef.current,
-  );
-
-  if (!isOpen) {
-    return null;
-  }
-
-  return (
-    <Portal>
-      <ConfirmModalDialog {...dialogProps} ref={dialogRef}>
-        {isModalShown && (
-          <RootLayoutProvider innerRef={portalDomNode}>
-            <ConfirmModalContents
-              headerColor={headerColor}
-              style={{ maxWidth }}
-            >
-              <ConfirmModalChildrenRoot headerColor={headerColor}>
-                {children}
-              </ConfirmModalChildrenRoot>
-
-              <ConfirmModalFooter>
-                <Button intent="primary" onClick={onConfirm}>
-                  {saveText}
-                </Button>
-                <Button intent="danger" onClick={onCancel}>
-                  {cancelText}
-                </Button>
-              </ConfirmModalFooter>
-            </ConfirmModalContents>
-          </RootLayoutProvider>
-        )}
-      </ConfirmModalDialog>
-    </Portal>
-  );
-}

package/src/components/modal/Modal.tsx

@@ -1,143 +0,0 @@
-import styled from '@emotion/styled';
-import type { ReactElement, ReactNode } from 'react';
-import { useCallback, useImperativeHandle, useRef, useState } from 'react';
-
-import { Button } from '../index';
-import { Portal } from '../root-layout/Portal';
-import { RootLayoutProvider } from '../root-layout/RootLayoutContext';
-
-import { useDialog } from './useDialog';
-
-export interface ModalProps {
-  children: ReactElement | ReactElement[];
-  isOpen: boolean;
-  requestCloseOnEsc?: boolean;
-  hasCloseButton?: boolean;
-  requestCloseOnBackdrop?: boolean;
-  onRequestClose: () => void;
-  maxWidth?: number;
-  width?: number;
-  height?: number;
-}
-
-const DialogRoot = styled.dialog`
-  background-color: transparent;
-  :focus {
-    outline: none;
-  }
-  ::backdrop {
-    background-color: rgba(113, 113, 122, 0.75);
-  }
-`;
-
-const DialogContents = styled.div`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  background-color: white;
-  border-width: 1px;
-  border-color: transparent;
-  border-radius: 0.5rem;
-  box-shadow:
-    0 0 0 0,
-    0 0px 16px rgba(0, 0, 0, 0.3);
-`;
-
-const ModalHeaderStyled = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 20px 10px 20px;
-  border-bottom: 2px solid rgb(247, 247, 247);
-`;
-
-const ModalBodyStyled = styled.div`
-  display: flex;
-  flex: 1 1 0%;
-  overflow-y: auto;
-`;
-
-const ModalFooterStyled = styled.div`
-  border-top: 2px solid rgb(247, 247, 247);
-  padding: 10px 20px 10px 20px;
-`;
-
-type MaybeHTMLDialogElement = HTMLDialogElement | null;
-
-export function Modal(props: ModalProps) {
-  const {
-    isOpen,
-    onRequestClose,
-    hasCloseButton = true,
-    requestCloseOnBackdrop = true,
-    requestCloseOnEsc = true,
-    children,
-    width,
-    maxWidth,
-    height,
-  } = props;
-
-  const dialogRef = useRef<HTMLDialogElement>(null);
-  const { dialogProps, isModalShown } = useDialog({
-    dialogRef,
-    isOpen,
-    requestCloseOnEsc,
-    requestCloseOnBackdrop,
-    onRequestClose,
-  });
-  const [portalDomNode, setPortalDomNode] =
-    useState<MaybeHTMLDialogElement>(null);
-  const dialogCallbackRef = useCallback((node: MaybeHTMLDialogElement) => {
-    setPortalDomNode(node);
-  }, []);
-
-  useImperativeHandle<MaybeHTMLDialogElement, MaybeHTMLDialogElement>(
-    dialogCallbackRef,
-    () => dialogRef.current,
-  );
-
-  if (!isOpen) {
-    return null;
-  }
-
-  return (
-    <Portal>
-      <DialogRoot {...dialogProps} ref={dialogRef}>
-        {isModalShown && (
-          <RootLayoutProvider innerRef={portalDomNode}>
-            <DialogContents
-              style={{
-                maxWidth,
-                height: height || 'max-content',
-                width: width || '100%',
-              }}
-            >
-              {children}
-              {hasCloseButton && (
-                <Button
-                  style={{ position: 'absolute', top: 4, right: 4 }}
-                  onClick={onRequestClose}
-                  intent="danger"
-                  minimal
-                  icon="cross"
-                />
-              )}
-            </DialogContents>
-          </RootLayoutProvider>
-        )}
-      </DialogRoot>
-    </Portal>
-  );
-}
-
-Modal.Header = function ModalHeader(props: { children: ReactNode }) {
-  return <ModalHeaderStyled>{props.children}</ModalHeaderStyled>;
-};
-
-Modal.Body = function ModalBody(props: { children: ReactNode }) {
-  return <ModalBodyStyled>{props.children}</ModalBodyStyled>;
-};
-
-Modal.Footer = function ModalFooter(props: { children: ReactNode }) {
-  return <ModalFooterStyled>{props.children}</ModalFooterStyled>;
-};

package/src/components/modal/index.ts

@@ -1,2 +0,0 @@
-export * from './ConfirmModal';
-export * from './Modal';

package/src/components/modal/useDialog.ts

@@ -1,95 +0,0 @@
-import {
-  MouseEventHandler,
-  ReactEventHandler,
-  RefObject,
-  useCallback,
-  useEffect,
-  useMemo,
-} from 'react';
-import { useKbsDisableGlobal } from 'react-kbs';
-
-import { useOnOff } from '../hooks/useOnOff';
-
-interface UseDialogOptions {
-  dialogRef: RefObject<HTMLDialogElement>;
-  isOpen: boolean;
-  requestCloseOnEsc: boolean;
-  requestCloseOnBackdrop: boolean;
-  onRequestClose: () => void;
-}
-
-interface UseDialogReturn {
-  dialogProps: {
-    onClick: MouseEventHandler<HTMLDialogElement>;
-    onCancel: ReactEventHandler<HTMLDialogElement>;
-    onClose: UseDialogOptions['onRequestClose'];
-  };
-  isModalShown: boolean;
-}
-
-export function useDialog({
-  dialogRef,
-  isOpen,
-  requestCloseOnEsc,
-  requestCloseOnBackdrop,
-  onRequestClose,
-}: UseDialogOptions): UseDialogReturn {
-  useKbsDisableGlobal(isOpen);
-  const [isModalShown, showModal, hideModal] = useOnOff(false);
-
-  useEffect(() => {
-    const dialog = dialogRef.current;
-    if (dialog && isOpen) {
-      showModal();
-      dialog.showModal();
-      return () => {
-        hideModal();
-        dialog.close();
-      };
-    }
-  }, [dialogRef, isOpen, showModal, hideModal]);
-
-  const onCancel = useCallback<ReactEventHandler<HTMLDialogElement>>(
-    (event) => {
-      if (!requestCloseOnEsc) {
-        event.preventDefault();
-      }
-    },
-    [requestCloseOnEsc],
-  );
-
-  const onClick = useCallback<MouseEventHandler<HTMLDialogElement>>(
-    (event) => {
-      const dialog = dialogRef.current;
-      if (!dialog) {
-        return;
-      }
-
-      // Ref: https://stackoverflow.com/questions/25864259/how-to-close-the-new-html-dialog-tag-by-clicking-on-its-backdrop
-      const rect = dialog.getBoundingClientRect();
-      const isInDialog =
-        rect.top <= event.clientY &&
-        event.clientY <= rect.top + rect.height &&
-        rect.left <= event.clientX &&
-        event.clientX <= rect.left + rect.width;
-
-      event.stopPropagation();
-      // Since the dialog has no size of itself, this condition is only
-      // `true` when we click on the backdrop.
-      if (!isInDialog && requestCloseOnBackdrop) {
-        onRequestClose();
-      }
-    },
-    [requestCloseOnBackdrop, onRequestClose, dialogRef],
-  );
-
-  const dialogProps = useMemo<UseDialogReturn['dialogProps']>(
-    () => ({ onClick, onCancel, onClose: onRequestClose }),
-    [onClick, onCancel, onRequestClose],
-  );
-
-  return {
-    dialogProps,
-    isModalShown,
-  };
-}