From 9b06680bd2f72065a5b042d1feb7fbab36dc703c Mon Sep 17 00:00:00 2001
From: baegofda <molly.daleo3o@gmail.com>
Date: Thu, 7 Dec 2023 16:22:13 +0900
Subject: [PATCH] (#0) npm publish (0.0.87)

---
 package.json                                  |  2 +-
 .../InputDatePicker.stories.tsx               | 28 ++++++++++++-------
 .../Input/InputDatePicker/index.tsx           |  5 ++--
 .../Input/InputDatePicker/types/index.ts      | 15 +++++++++-
 4 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index 3e09e3e..e8e03e0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bbodek-ui",
-  "version": "0.0.85",
+  "version": "0.0.87",
   "type": "module",
   "author": "Bbodek",
   "license": "MIT",
diff --git a/src/core/components/Input/InputDatePicker/InputDatePicker.stories.tsx b/src/core/components/Input/InputDatePicker/InputDatePicker.stories.tsx
index 6e8fa58..ed2328c 100644
--- a/src/core/components/Input/InputDatePicker/InputDatePicker.stories.tsx
+++ b/src/core/components/Input/InputDatePicker/InputDatePicker.stories.tsx
@@ -14,27 +14,35 @@ const meta = {
 
 export default meta;
 
-export const Default = () => {
+const DefaultLayout = () => {
+  const overlay = useOverlay();
 
+  return (
+    <div className = "flex gap-2">
+      <div className = "w-[500px]">
+        <InputDatePicker overlay = {overlay} useTab />
+      </div>
+    </div>
+  );
+};
+
+export const Default = () => {
   return (
     <OverlayProvider>
       <div id = "modal"/>
-      <div className = "flex gap-2">
-        <div className = "w-[500px]">
-          <InputDatePicker useTab />
-        </div>
-      </div>
+      <DefaultLayout />
     </OverlayProvider>
   );
 };
 
-const Layout = () => {
+const InputDatePickerInModalPopUpLayout = () => {
   const overlay = useOverlay();
+  const inputDatePickerOverlay = useOverlay();
   const onOverlay = () => {
     overlay.open(({ isOpen }) => {
       return (
         <ModalPopUp isOpen = {isOpen}>
-          <InputDatePicker useTab = {false} />
+          <InputDatePicker overlay = {inputDatePickerOverlay} useTab = {false} />
         </ModalPopUp>
       );
     });
@@ -45,11 +53,11 @@ const Layout = () => {
   );
 };
 
-export const ModalDatePicker = () => {
+export const InputDatePickerInModalPopUp = () => {
   return (
     <OverlayProvider>
       <div id = "modal"/>
-      <Layout />
+      <InputDatePickerInModalPopUpLayout />
     </OverlayProvider>
   );
 };
diff --git a/src/core/components/Input/InputDatePicker/index.tsx b/src/core/components/Input/InputDatePicker/index.tsx
index a7e4450..11dbc84 100644
--- a/src/core/components/Input/InputDatePicker/index.tsx
+++ b/src/core/components/Input/InputDatePicker/index.tsx
@@ -1,20 +1,19 @@
 import { CalendarBlank } from "@phosphor-icons/react";
-
-import { useOverlay } from "@toss/use-overlay";
 import dayjs from "dayjs";
 import { useState } from "react";
+
 import { PeriodDates } from "../../Calendar/DatePickerCalendar/types/CalendarComponentProps";
 import Typography from "../../Typography";
 import DatePicker from "./DatePicker";
 import { InputDatePickerProps } from "./types";
 
 const InputDatePicker = ({
+  overlay,
   disabledDates,
   currentMonth,
   useTab = false,
   disabled = false,
 }: InputDatePickerProps) => {
-  const overlay = useOverlay();
   const [ periodDates, setPeriodDates ] = useState<PeriodDates>({
     startDate: "",
     endDate: "",
diff --git a/src/core/components/Input/InputDatePicker/types/index.ts b/src/core/components/Input/InputDatePicker/types/index.ts
index c8c0bed..b06ff8e 100644
--- a/src/core/components/Input/InputDatePicker/types/index.ts
+++ b/src/core/components/Input/InputDatePicker/types/index.ts
@@ -5,4 +5,17 @@ export interface DatePickerProps extends Pick<CalendarComponentProps, "currentMo
   close: (periodDates: PeriodDates) => void;
   useTab?: boolean;
 }
-export interface InputDatePickerProps extends Omit<DatePickerProps, "isOpen"| "close"> {}
+
+type CreateOverlayElement = (props: {
+  isOpen: boolean;
+  close: () => void;
+  exit: () => void;
+}) => JSX.Element;
+
+export interface InputDatePickerProps extends Omit<DatePickerProps, "isOpen"| "close"> {
+  overlay: {
+    open: (overlayElement: CreateOverlayElement) => void;
+    close: () => void;
+    exit: () => void;
+  }
+}