@pfct/purple 1.4.0-rc.3 → 1.4.0-rc.5

package/dist/hooks/useLayoutIsMobile.es.js

@@ -0,0 +1,83 @@
+import { useState as r, useCallback as m } from "react";
+import { MediaQuerySize as p } from "../utils/media.util.es.js";
+import "../core/Colors/index.es.js";
+import "../utils/GenerateColorStyle/mini-button.es.js";
+import "../utils/GenerateColorStyle/datepicker.es.js";
+import "../chunks/jsx-runtime.Drh4NO5G.js";
+import "../chunks/index.styled.BTZpARWY.js";
+import "../core/TextStyles/index.es.js";
+import "../components/Badge/IconBadge/index.styled.es.js";
+import "../components/Badge/TextBadge/index.styled.es.js";
+import "../components/Button/DoubleButton/index.styled.es.js";
+import "../components/MiniButton/BoxMiniButton/index.styled.es.js";
+import "../components/Button/FloatBaseButton/index.styled.es.js";
+import "../components/Button/FloatDoubleButton/index.styled.es.js";
+import "../components/Card/index.styled.es.js";
+import e from "./useResize.es.js";
+import "../components/Comment/index.es.js";
+import "../components/Control/CheckBox/index.styled.es.js";
+import "../components/Control/CheckMark/index.styled.es.js";
+import "../components/Control/Switch/index.styled.es.js";
+import "../components/DatePicker/BaseDatePicker/index.styled.es.js";
+import "../components/DatePicker/BaseDatePicker/YearMonthController/index.styed.es.js";
+import "../Icon/generated/AlarmFill.es.js";
+import "../Icon/generated/Calendar.es.js";
+import "../Icon/generated/Cancel.es.js";
+import "../Icon/generated/CancelCircle.es.js";
+import "../Icon/generated/CartFill.es.js";
+import "../Icon/generated/Check.es.js";
+import "../Icon/generated/ChevronDown.es.js";
+import "../Icon/generated/ChevronLeft.es.js";
+import "../Icon/generated/ChevronRight.es.js";
+import "../Icon/generated/ChevronUp.es.js";
+import "../Icon/generated/DoubleChevronLeft.es.js";
+import "../Icon/generated/DoubleChevronRight.es.js";
+import "../Icon/generated/EyeFill.es.js";
+import "../Icon/generated/EyeSlashFill.es.js";
+import "../Icon/generated/Filter.es.js";
+import "../Icon/generated/Information.es.js";
+import "../Icon/generated/Menu.es.js";
+import "../Icon/generated/More.es.js";
+import "../Icon/generated/PersonFill.es.js";
+import "../Icon/generated/Plus.es.js";
+import "../Icon/generated/QuestionCircle.es.js";
+import "../Icon/generated/Re.es.js";
+import "../Icon/generated/Search.es.js";
+import "../Icon/generated/SettingFill.es.js";
+import "../Icon/generated/Share.es.js";
+import "../Icon/generated/Store.es.js";
+import "../library/IconWithImage/index.styled.es.js";
+import "../library/List/BottomSheetItemList/index.styled.es.js";
+import "lottie-web";
+import "../library/Lottie/index.styled.es.js";
+import "../library/Spacing/index.styled.es.js";
+import "../components/DatePicker/BaseDatePicker/Month/index.styled.es.js";
+import "../components/DatePicker/BaseDatePicker/Week/index.styled.es.js";
+import "../types/date.es.js";
+import "../components/DatePicker/BaseDatePicker/hooks/index.util.es.js";
+import "../components/DatePicker/SingleDatePickerModal/index.styled.es.js";
+import "../components/DatePicker/SingleDatePickerModal/useSingleDatePickerModal.es.js";
+import "../components/DatePicker/RangeDatePickerModal/index.styled.es.js";
+import "../components/DatePicker/RangeDatePickerModal/useRangeDatePickerModal.es.js";
+import "../components/Divider/index.styled.es.js";
+import "../chunks/index.styled.SOJ65tcg.js";
+import "../components/Input/BaseInput/index.es.js";
+import "../components/Input/ResidentNumberInput/index.styled.es.js";
+import "../components/Loading/Skeleton/index.es.js";
+import "../components/Loading/Spinner/index.styled.es.js";
+import "../components/Navigation/index.styled.es.js";
+import "../components/Navigation/BaseNavigation/index.styled.es.js";
+import "../components/Navigation/constant.es.js";
+import "../components/Segment/BaseSegment/index.styled.es.js";
+import "../components/Segment/ExtendSegment/index.styled.es.js";
+import "../components/ToastMessage/Toast/index.styled.es.js";
+import "../components/Tooltip/TooltipBase/index.styled.es.js";
+const Qo = () => {
+  const [o, t] = r(!0), i = m(() => {
+    t(window.outerWidth <= p.Mobile);
+  }, []);
+  return e(i), o;
+};
+export {
+  Qo as default
+};

package/dist/hooks/useOverlayPreventScroll.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=require("react");function P(){return f(/^iPhone/)}function I(){return f(/^Mac/)}function k(){return/^((?!chrome|android).)*safari/i.test(navigator.userAgent)}function H(){return f(/^iPad/)||I()&&navigator.maxTouchPoints>1}function O(){return P()||H()}function f(t){return typeof window<"u"&&window.navigator!=null?t.test(window.navigator.platform):void 0}const B=24;let i=null,a="";const M=typeof window<"u"?w.useLayoutEffect:w.useEffect;function S(...t){return(...e)=>{for(const n of t)typeof n=="function"&&n(...e)}}const v=typeof document<"u"&&window.visualViewport;function g(t){const e=window.getComputedStyle(t);return/(auto|scroll)/.test(e.overflow+e.overflowX+e.overflowY)}function h(t){for(g(t)&&(t=t.parentElement);t&&!g(t);)t=t.parentElement;return t||document.scrollingElement||document.documentElement}const C=new Set(["checkbox","radio","range","color","file","image","button","submit","reset"]);let l=0,u;function Y(t={}){const{isDisabled:e}=t;M(()=>{if(!e)return l++,l===1&&O()&&(u=L()),()=>{l--,l===0&&(u==null||u())}},[e])}function L(){let t,e=0;const n=r=>{t=h(r.target),!(t===document.documentElement&&t===document.body)&&(e=r.changedTouches[0].pageY)},c=r=>{if(!t||t===document.documentElement||t===document.body){r.preventDefault();return}const o=r.changedTouches[0].pageY,y=t.scrollTop,b=t.scrollHeight-t.clientHeight;b!==0&&((y<=0&&o>e||y>=b&&o<e)&&r.preventDefault(),e=o)},d=r=>{const o=r.target;E(o)&&o!==document.activeElement&&(r.preventDefault(),o.style.transform="translateY(-2000px)",o.focus(),requestAnimationFrame(()=>{o.style.transform=""}))},m=r=>{const o=r.target;E(o)&&(o.style.transform="translateY(-2000px)",requestAnimationFrame(()=>{o.style.transform="",v&&(v.height<window.innerHeight?requestAnimationFrame(()=>{T(o)}):v.addEventListener("resize",()=>T(o),{once:!0}))}))},p=()=>{window.scrollTo(0,0)},D=window.pageXOffset,F=window.pageYOffset,R=S(W(document.documentElement,"paddingRight",`${window.innerWidth-document.documentElement.clientWidth}px`));window.scrollTo(0,0);const x=S(s(document,"touchstart",n,{passive:!1,capture:!0}),s(document,"touchmove",c,{passive:!1,capture:!0}),s(document,"touchend",d,{passive:!1,capture:!0}),s(document,"focus",m,!0),s(window,"scroll",p));return()=>{R(),x(),window.scrollTo(D,F)}}function W(t,e,n){const c=t.style[e];return t.style[e]=n,()=>{t.style[e]=c}}function s(t,e,n,c){return t.addEventListener(e,n,c),()=>{t.removeEventListener(e,n,c)}}function T(t){const e=document.scrollingElement||document.documentElement;for(;t&&t!==e;){const n=h(t);if(n!==document.documentElement&&n!==document.body&&n!==t){const c=n.getBoundingClientRect().top,d=t.getBoundingClientRect().top,m=t.getBoundingClientRect().bottom,p=n.getBoundingClientRect().bottom+B;m>p&&(n.scrollTop+=d-c)}t=n.parentElement}}function E(t){return t instanceof HTMLInputElement&&!C.has(t.type)||t instanceof HTMLTextAreaElement||t instanceof HTMLElement&&t.isContentEditable}const q=({throttleKeyword:t,globalScrollTarget:e=document==null?void 0:document.body})=>{i=e,a=t},K=t=>{w.useEffect(()=>{if(!i||!a){console.warn("GLOBAL_SCROLL_TARGET 혹은 THROTTLE_KEWORD 이 등록되지 않았습니다.");return}return t&&(i==null||i.classList.add(a)),()=>{i==null||i.classList.remove(a)}},[t]),Y({isDisabled:!t})};exports.getScrollParent=h;exports.isIOS=O;exports.isIPad=H;exports.isIPhone=P;exports.isInput=E;exports.isMac=I;exports.isSafari=k;exports.isScrollable=g;exports.registerHookForOverlayPreventScroll=q;exports.testPlatform=f;exports.useIsomorphicLayoutEffect=M;exports.useOverlayPreventScroll=K;exports.usePreventScroll=Y;

package/dist/hooks/useOverlayPreventScroll.d.ts

@@ -1,3 +1,25 @@
+import { useLayoutEffect } from 'react';
+export declare function isIPhone(): boolean | undefined;
+export declare function isMac(): boolean | undefined;
+export declare function isSafari(): boolean | undefined;
+export declare function isIPad(): boolean | undefined;
+export declare function isIOS(): boolean | undefined;
+export declare function testPlatform(re: RegExp): boolean | undefined;
+export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
+interface PreventScrollOptions {
+    /** Whether the scroll lock is disabled. */
+    isDisabled?: boolean;
+    focusCallback?: () => void;
+}
+export declare function isScrollable(node: Element): boolean;
+export declare function getScrollParent(node: Element): Element;
+/**
+ * Prevents scrolling on the document body on mount, and
+ * restores it on unmount. Also ensures that content does not
+ * shift due to the scrollbars disappearing.
+ */
+export declare function usePreventScroll(options?: PreventScrollOptions): void;
+export declare function isInput(target: Element): boolean;
 declare const registerHookForOverlayPreventScroll: ({ throttleKeyword, globalScrollTarget, }: {
     throttleKeyword: string;
     globalScrollTarget: HTMLElement;

package/dist/hooks/useOverlayPreventScroll.es.js

@@ -0,0 +1,158 @@
+import { useEffect as b, useLayoutEffect as D } from "react";
+function I() {
+  return w(/^iPhone/);
+}
+function F() {
+  return w(/^Mac/);
+}
+function K() {
+  return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+}
+function M() {
+  return w(/^iPad/) || // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
+  F() && navigator.maxTouchPoints > 1;
+}
+function R() {
+  return I() || M();
+}
+function w(t) {
+  return typeof window < "u" && window.navigator != null ? t.test(window.navigator.platform) : void 0;
+}
+const O = 24;
+let i = null, a = "";
+const B = typeof window < "u" ? D : b;
+function g(...t) {
+  return (...e) => {
+    for (const n of t)
+      typeof n == "function" && n(...e);
+  };
+}
+const p = typeof document < "u" && window.visualViewport;
+function h(t) {
+  const e = window.getComputedStyle(t);
+  return /(auto|scroll)/.test(e.overflow + e.overflowX + e.overflowY);
+}
+function S(t) {
+  for (h(t) && (t = t.parentElement); t && !h(t); )
+    t = t.parentElement;
+  return t || document.scrollingElement || document.documentElement;
+}
+const C = /* @__PURE__ */ new Set([
+  "checkbox",
+  "radio",
+  "range",
+  "color",
+  "file",
+  "image",
+  "button",
+  "submit",
+  "reset"
+]);
+let l = 0, u;
+function W(t = {}) {
+  const { isDisabled: e } = t;
+  B(() => {
+    if (!e)
+      return l++, l === 1 && R() && (u = k()), () => {
+        l--, l === 0 && (u == null || u());
+      };
+  }, [e]);
+}
+function k() {
+  let t, e = 0;
+  const n = (r) => {
+    t = S(r.target), !(t === document.documentElement && t === document.body) && (e = r.changedTouches[0].pageY);
+  }, c = (r) => {
+    if (!t || t === document.documentElement || t === document.body) {
+      r.preventDefault();
+      return;
+    }
+    const o = r.changedTouches[0].pageY, v = t.scrollTop, E = t.scrollHeight - t.clientHeight;
+    E !== 0 && ((v <= 0 && o > e || v >= E && o < e) && r.preventDefault(), e = o);
+  }, f = (r) => {
+    const o = r.target;
+    T(o) && o !== document.activeElement && (r.preventDefault(), o.style.transform = "translateY(-2000px)", o.focus(), requestAnimationFrame(() => {
+      o.style.transform = "";
+    }));
+  }, d = (r) => {
+    const o = r.target;
+    T(o) && (o.style.transform = "translateY(-2000px)", requestAnimationFrame(() => {
+      o.style.transform = "", p && (p.height < window.innerHeight ? requestAnimationFrame(() => {
+        y(o);
+      }) : p.addEventListener("resize", () => y(o), { once: !0 }));
+    }));
+  }, m = () => {
+    window.scrollTo(0, 0);
+  }, H = window.pageXOffset, P = window.pageYOffset, Y = g(
+    L(document.documentElement, "paddingRight", `${window.innerWidth - document.documentElement.clientWidth}px`)
+    // setStyle(document.documentElement, 'overflow', 'hidden'),
+    // setStyle(document.body, 'marginTop', `-${scrollY}px`),
+  );
+  window.scrollTo(0, 0);
+  const x = g(
+    s(document, "touchstart", n, { passive: !1, capture: !0 }),
+    s(document, "touchmove", c, { passive: !1, capture: !0 }),
+    s(document, "touchend", f, { passive: !1, capture: !0 }),
+    s(document, "focus", d, !0),
+    s(window, "scroll", m)
+  );
+  return () => {
+    Y(), x(), window.scrollTo(H, P);
+  };
+}
+function L(t, e, n) {
+  const c = t.style[e];
+  return t.style[e] = n, () => {
+    t.style[e] = c;
+  };
+}
+function s(t, e, n, c) {
+  return t.addEventListener(e, n, c), () => {
+    t.removeEventListener(e, n, c);
+  };
+}
+function y(t) {
+  const e = document.scrollingElement || document.documentElement;
+  for (; t && t !== e; ) {
+    const n = S(t);
+    if (n !== document.documentElement && n !== document.body && n !== t) {
+      const c = n.getBoundingClientRect().top, f = t.getBoundingClientRect().top, d = t.getBoundingClientRect().bottom, m = n.getBoundingClientRect().bottom + O;
+      d > m && (n.scrollTop += f - c);
+    }
+    t = n.parentElement;
+  }
+}
+function T(t) {
+  return t instanceof HTMLInputElement && !C.has(t.type) || t instanceof HTMLTextAreaElement || t instanceof HTMLElement && t.isContentEditable;
+}
+const V = ({
+  throttleKeyword: t,
+  globalScrollTarget: e = document == null ? void 0 : document.body
+}) => {
+  i = e, a = t;
+}, X = (t) => {
+  b(() => {
+    if (!i || !a) {
+      console.warn("GLOBAL_SCROLL_TARGET 혹은 THROTTLE_KEWORD 이 등록되지 않았습니다.");
+      return;
+    }
+    return t && (i == null || i.classList.add(a)), () => {
+      i == null || i.classList.remove(a);
+    };
+  }, [t]), W({ isDisabled: !t });
+};
+export {
+  S as getScrollParent,
+  R as isIOS,
+  M as isIPad,
+  I as isIPhone,
+  T as isInput,
+  F as isMac,
+  K as isSafari,
+  h as isScrollable,
+  V as registerHookForOverlayPreventScroll,
+  w as testPlatform,
+  B as useIsomorphicLayoutEffect,
+  X as useOverlayPreventScroll,
+  W as usePreventScroll
+};

package/dist/hooks/useOverlayPreventScroll.js

@@ -1,10 +1,275 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useOverlayPreventScroll = exports.registerHookForOverlayPreventScroll = void 0;
+exports.useOverlayPreventScroll = exports.registerHookForOverlayPreventScroll = exports.useIsomorphicLayoutEffect = void 0;
+exports.isIPhone = isIPhone;
+exports.isMac = isMac;
+exports.isSafari = isSafari;
+exports.isIPad = isIPad;
+exports.isIOS = isIOS;
+exports.testPlatform = testPlatform;
+exports.isScrollable = isScrollable;
+exports.getScrollParent = getScrollParent;
+exports.usePreventScroll = usePreventScroll;
+exports.isInput = isInput;
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 const react_1 = require("react");
+function isIPhone() {
+    return testPlatform(/^iPhone/);
+}
+function isMac() {
+    return testPlatform(/^Mac/);
+}
+function isSafari() {
+    return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+}
+function isIPad() {
+    return (testPlatform(/^iPad/) ||
+        // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
+        (isMac() && navigator.maxTouchPoints > 1));
+}
+function isIOS() {
+    return isIPhone() || isIPad();
+}
+function testPlatform(re) {
+    return typeof window !== 'undefined' && window.navigator != null ? re.test(window.navigator.platform) : undefined;
+}
+const KEYBOARD_BUFFER = 24;
 // init
 let GLOBAL_SCROLL_TARGET = null;
 let THROTTLE_KEWORD = '';
+exports.useIsomorphicLayoutEffect = typeof window !== 'undefined' ? react_1.useLayoutEffect : react_1.useEffect;
+function chain(...callbacks) {
+    return (...args) => {
+        for (const callback of callbacks) {
+            if (typeof callback === 'function') {
+                callback(...args);
+            }
+        }
+    };
+}
+// @ts-ignore
+const visualViewport = typeof document !== 'undefined' && window.visualViewport;
+function isScrollable(node) {
+    const style = window.getComputedStyle(node);
+    return /(auto|scroll)/.test(style.overflow + style.overflowX + style.overflowY);
+}
+function getScrollParent(node) {
+    if (isScrollable(node)) {
+        node = node.parentElement;
+    }
+    while (node && !isScrollable(node)) {
+        node = node.parentElement;
+    }
+    return node || document.scrollingElement || document.documentElement;
+}
+// HTML input types that do not cause the software keyboard to appear.
+const nonTextInputTypes = new Set([
+    'checkbox',
+    'radio',
+    'range',
+    'color',
+    'file',
+    'image',
+    'button',
+    'submit',
+    'reset',
+]);
+// The number of active usePreventScroll calls. Used to determine whether to revert back to the original page style/scroll position
+let preventScrollCount = 0;
+let restore;
+/**
+ * Prevents scrolling on the document body on mount, and
+ * restores it on unmount. Also ensures that content does not
+ * shift due to the scrollbars disappearing.
+ */
+function usePreventScroll(options = {}) {
+    const { isDisabled } = options;
+    (0, exports.useIsomorphicLayoutEffect)(() => {
+        if (isDisabled) {
+            return;
+        }
+        preventScrollCount++;
+        if (preventScrollCount === 1) {
+            if (isIOS()) {
+                restore = preventScrollMobileSafari();
+            }
+        }
+        return () => {
+            preventScrollCount--;
+            if (preventScrollCount === 0) {
+                restore === null || restore === void 0 ? void 0 : restore();
+            }
+        };
+    }, [isDisabled]);
+}
+// Mobile Safari is a whole different beast. Even with overflow: hidden,
+// it still scrolls the page in many situations:
+//
+// 1. When the bottom toolbar and address bar are collapsed, page scrolling is always allowed.
+// 2. When the keyboard is visible, the viewport does not resize. Instead, the keyboard covers part of
+//    it, so it becomes scrollable.
+// 3. When tapping on an input, the page always scrolls so that the input is centered in the visual viewport.
+//    This may cause even fixed position elements to scroll off the screen.
+// 4. When using the next/previous buttons in the keyboard to navigate between inputs, the whole page always
+//    scrolls, even if the input is inside a nested scrollable element that could be scrolled instead.
+//
+// In order to work around these cases, and prevent scrolling without jankiness, we do a few things:
+//
+// 1. Prevent default on `touchmove` events that are not in a scrollable element. This prevents touch scrolling
+//    on the window.
+// 2. Prevent default on `touchmove` events inside a scrollable element when the scroll position is at the
+//    top or bottom. This avoids the whole page scrolling instead, but does prevent overscrolling.
+// 3. Prevent default on `touchend` events on input elements and handle focusing the element ourselves.
+// 4. When focusing an input, apply a transform to trick Safari into thinking the input is at the top
+//    of the page, which prevents it from scrolling the page. After the input is focused, scroll the element
+//    into view ourselves, without scrolling the whole page.
+// 5. Offset the body by the scroll position using a negative margin and scroll to the top. This should appear the
+//    same visually, but makes the actual scroll position always zero. This is required to make all of the
+//    above work or Safari will still try to scroll the page when focusing an input.
+// 6. As a last resort, handle window scroll events, and scroll back to the top. This can happen when attempting
+//    to navigate to an input with the next/previous buttons that's outside a modal.
+function preventScrollMobileSafari() {
+    let scrollable;
+    let lastY = 0;
+    const onTouchStart = (e) => {
+        // Store the nearest scrollable parent element from the element that the user touched.
+        scrollable = getScrollParent(e.target);
+        if (scrollable === document.documentElement && scrollable === document.body) {
+            return;
+        }
+        lastY = e.changedTouches[0].pageY;
+    };
+    const onTouchMove = (e) => {
+        // Prevent scrolling the window.
+        if (!scrollable || scrollable === document.documentElement || scrollable === document.body) {
+            e.preventDefault();
+            return;
+        }
+        // Prevent scrolling up when at the top and scrolling down when at the bottom
+        // of a nested scrollable area, otherwise mobile Safari will start scrolling
+        // the window instead. Unfortunately, this disables bounce scrolling when at
+        // the top but it's the best we can do.
+        const y = e.changedTouches[0].pageY;
+        const scrollTop = scrollable.scrollTop;
+        const bottom = scrollable.scrollHeight - scrollable.clientHeight;
+        if (bottom === 0) {
+            return;
+        }
+        if ((scrollTop <= 0 && y > lastY) || (scrollTop >= bottom && y < lastY)) {
+            e.preventDefault();
+        }
+        lastY = y;
+    };
+    const onTouchEnd = (e) => {
+        const target = e.target;
+        // Apply this change if we're not already focused on the target element
+        if (isInput(target) && target !== document.activeElement) {
+            e.preventDefault();
+            // Apply a transform to trick Safari into thinking the input is at the top of the page
+            // so it doesn't try to scroll it into view. When tapping on an input, this needs to
+            // be done before the "focus" event, so we have to focus the element ourselves.
+            target.style.transform = 'translateY(-2000px)';
+            target.focus();
+            requestAnimationFrame(() => {
+                target.style.transform = '';
+            });
+        }
+    };
+    const onFocus = (e) => {
+        const target = e.target;
+        if (isInput(target)) {
+            // Transform also needs to be applied in the focus event in cases where focus moves
+            // other than tapping on an input directly, e.g. the next/previous buttons in the
+            // software keyboard. In these cases, it seems applying the transform in the focus event
+            // is good enough, whereas when tapping an input, it must be done before the focus event. 🤷‍♂️
+            target.style.transform = 'translateY(-2000px)';
+            requestAnimationFrame(() => {
+                target.style.transform = '';
+                // This will have prevented the browser from scrolling the focused element into view,
+                // so we need to do this ourselves in a way that doesn't cause the whole page to scroll.
+                if (visualViewport) {
+                    if (visualViewport.height < window.innerHeight) {
+                        // If the keyboard is already visible, do this after one additional frame
+                        // to wait for the transform to be removed.
+                        requestAnimationFrame(() => {
+                            scrollIntoView(target);
+                        });
+                    }
+                    else {
+                        // Otherwise, wait for the visual viewport to resize before scrolling so we can
+                        // measure the correct position to scroll to.
+                        visualViewport.addEventListener('resize', () => scrollIntoView(target), { once: true });
+                    }
+                }
+            });
+        }
+    };
+    const onWindowScroll = () => {
+        // Last resort. If the window scrolled, scroll it back to the top.
+        // It should always be at the top because the body will have a negative margin (see below).
+        window.scrollTo(0, 0);
+    };
+    // Record the original scroll position so we can restore it.
+    // Then apply a negative margin to the body to offset it by the scroll position. This will
+    // enable us to scroll the window to the top, which is required for the rest of this to work.
+    const scrollX = window.pageXOffset;
+    const scrollY = window.pageYOffset;
+    const restoreStyles = chain(setStyle(document.documentElement, 'paddingRight', `${window.innerWidth - document.documentElement.clientWidth}px`));
+    // Scroll to the top. The negative margin on the body will make this appear the same.
+    window.scrollTo(0, 0);
+    const removeEvents = chain(addEvent(document, 'touchstart', onTouchStart, { passive: false, capture: true }), addEvent(document, 'touchmove', onTouchMove, { passive: false, capture: true }), addEvent(document, 'touchend', onTouchEnd, { passive: false, capture: true }), addEvent(document, 'focus', onFocus, true), addEvent(window, 'scroll', onWindowScroll));
+    return () => {
+        // Restore styles and scroll the page back to where it was.
+        restoreStyles();
+        removeEvents();
+        window.scrollTo(scrollX, scrollY);
+    };
+}
+// Sets a CSS property on an element, and returns a function to revert it to the previous value.
+function setStyle(element, style, value) {
+    // https://github.com/microsoft/TypeScript/issues/17827#issuecomment-391663310
+    // @ts-ignore
+    const cur = element.style[style];
+    // @ts-ignore
+    element.style[style] = value;
+    return () => {
+        // @ts-ignore
+        element.style[style] = cur;
+    };
+}
+// Adds an event listener to an element, and returns a function to remove it.
+function addEvent(target, event, handler, options) {
+    // @ts-ignore
+    target.addEventListener(event, handler, options);
+    return () => {
+        // @ts-ignore
+        target.removeEventListener(event, handler, options);
+    };
+}
+function scrollIntoView(target) {
+    const root = document.scrollingElement || document.documentElement;
+    while (target && target !== root) {
+        // Find the parent scrollable element and adjust the scroll position if the target is not already in view.
+        const scrollable = getScrollParent(target);
+        if (scrollable !== document.documentElement && scrollable !== document.body && scrollable !== target) {
+            const scrollableTop = scrollable.getBoundingClientRect().top;
+            const targetTop = target.getBoundingClientRect().top;
+            const targetBottom = target.getBoundingClientRect().bottom;
+            // Buffer is needed for some edge cases
+            const keyboardHeight = scrollable.getBoundingClientRect().bottom + KEYBOARD_BUFFER;
+            if (targetBottom > keyboardHeight) {
+                scrollable.scrollTop += targetTop - scrollableTop;
+            }
+        }
+        // @ts-ignore
+        target = scrollable.parentElement;
+    }
+}
+function isInput(target) {
+    return ((target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type)) ||
+        target instanceof HTMLTextAreaElement ||
+        (target instanceof HTMLElement && target.isContentEditable));
+}
 // WARN : 무조건 _app에서 불러야 사용 가능
 const registerHookForOverlayPreventScroll = ({ throttleKeyword, globalScrollTarget = document === null || document === void 0 ? void 0 : document.body, }) => {
     GLOBAL_SCROLL_TARGET = globalScrollTarget;
@@ -24,6 +289,7 @@ const useOverlayPreventScroll = (view) => {
             GLOBAL_SCROLL_TARGET === null || GLOBAL_SCROLL_TARGET === void 0 ? void 0 : GLOBAL_SCROLL_TARGET.classList.remove(THROTTLE_KEWORD);
         };
     }, [view]);
+    usePreventScroll({ isDisabled: !view });
     return;
 };
 exports.useOverlayPreventScroll = useOverlayPreventScroll;

package/dist/hooks/useResize.cjs.js

@@ -0,0 +1 @@
+"use strict";const s=require("react"),t=require("./useEventListener.cjs.js"),o=e=>{t("resize",e),s.useEffect(()=>{e()},[e])};module.exports=o;

package/dist/hooks/useResize.es.js

@@ -0,0 +1,10 @@
+import { useEffect as t } from "react";
+import o from "./useEventListener.es.js";
+const r = (e) => {
+  o("resize", e), t(() => {
+    e();
+  }, [e]);
+};
+export {
+  r as default
+};

package/dist/index.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./chunks/index.styled.SwCr6Bqs.js"),s=require("./components/Badge/IconBadge/index.cjs.js"),_=require("./components/Badge/TextBadge/index.cjs.js"),u=require("./components/Button/FloatSingleButton/index.cjs.js"),d=require("./components/Button/FloatDoubleButton/index.cjs.js"),p=require("./components/Button/FloatBaseButton/index.cjs.js"),m=require("./components/Button/TestButton/index.cjs.js"),h=require("./components/Card/index.cjs.js"),S=require("./components/Comment/index.cjs.js"),B=require("./components/Control/RadioButton/index.cjs.js"),g=require("./components/Control/CheckBox/index.cjs.js"),y=require("./components/Control/CheckMark/index.cjs.js"),I=require("./components/Control/Switch/index.cjs.js"),C=require("./components/DatePicker/BaseDatePicker/index.cjs.js"),q=require("./components/DatePicker/SingleDatePicker/hooks/useSingleDatePicker.cjs.js"),T=require("./components/DatePicker/RangeDatePicker/hooks/useRangeDatePicker.cjs.js"),x=require("./components/DatePicker/SingleDatePickerModal/index.cjs.js"),P=require("./components/DatePicker/RangeDatePickerModal/index.cjs.js"),k=require("./components/Divider/index.cjs.js"),D=require("./components/Input/common/InputFrame/index.cjs.js"),M=require("./components/Input/BaseInput/index.cjs.js");require("./chunks/jsx-runtime.713F0z8w.js");require("react");const n=require("./utils/media.util.cjs.js"),c=require("./utils/format.util.cjs.js"),r=require("./utils/GenerateColorStyle/common/type.cjs.js"),b=require("./utils/GenerateColorStyle/single-button.cjs.js"),F=require("./utils/GenerateColorStyle/mini-button.cjs.js"),v=require("./utils/GenerateColorStyle/datepicker.cjs.js"),L=require("./utils/GenerateColorStyle/control/switch.cjs.js"),R=require("./utils/GenerateColorStyle/control/radio-button.cjs.js"),A=require("./utils/GenerateColorStyle/control/check-box.cjs.js"),f=require("./utils/GenerateColorStyle/control/check-mark.cjs.js"),E=require("./utils/GenerateColorStyle/progress-bar.cjs.js"),H=require("./utils/GenerateColorStyle/tag.cjs.js"),N=require("./components/Input/ResidentNumberInput/index.cjs.js"),w=require("./components/Loading/ProgressBar/index.cjs.js"),G=require("./components/Loading/Skeleton/index.cjs.js"),O=require("./components/MiniButton/BoxMiniButton/index.cjs.js"),z=require("./components/MiniButton/IconMiniButton/index.cjs.js"),Q=require("./components/Segment/BaseSegment/index.cjs.js"),U=require("./components/Segment/ExtendSegment/index.cjs.js"),W=require("./components/SelectBox/index.cjs.js"),K=require("./components/Chips/BasicChips/index.cjs.js"),Y=require("./components/Chips/ChipItem/index.cjs.js"),j=require("./components/Chips/ChipsFrame/index.cjs.js"),J=require("./components/Tabs/TextTabs/index.cjs.js"),V=require("./components/Tabs/FillTabs/index.cjs.js"),X=require("./components/Tag/index.cjs.js"),Z=require("./components/Title/index.cjs.js"),$=require("./components/ToastMessage/Toast/index.cjs.js"),ee=require("./components/Tooltip/BasicTooltip/index.cjs.js"),te=require("./components/Tooltip/ImpactTooltip/index.cjs.js"),i=require("./core/Colors/index.cjs.js"),oe=require("./core/Display/Pc.cjs.js"),ne=require("./core/Display/Mobile.cjs.js"),re=require("./core/Theme/index.cjs.js"),t=require("./core/TextStyles/index.cjs.js"),ie=require("./core/Typography/Headline1.cjs.js"),ae=require("./core/Typography/Headline2.cjs.js"),ce=require("./core/Typography/Headline6.cjs.js"),le=require("./core/Typography/Body1.cjs.js"),se=require("./core/Typography/Body2.cjs.js"),_e=require("./core/Typography/Title1.cjs.js"),ue=require("./core/Typography/Title2.cjs.js"),de=require("./core/Typography/Title4.cjs.js"),o=require("./hooks/useOverlayPreventScroll.cjs.js"),pe=require("./hooks/useLayoutIsMobile.cjs.js"),me=require("./hooks/useResize.cjs.js"),he=require("./hooks/useEventListener.cjs.js"),Se=require("./Icon/generated/AlarmFill.cjs.js"),Be=require("./Icon/generated/Calendar.cjs.js"),ge=require("./Icon/generated/Cancel.cjs.js"),ye=require("./Icon/generated/CancelCircle.cjs.js"),Ie=require("./Icon/generated/CartFill.cjs.js"),Ce=require("./Icon/generated/Check.cjs.js"),qe=require("./Icon/generated/ChevronDown.cjs.js"),Te=require("./Icon/generated/ChevronLeft.cjs.js"),xe=require("./Icon/generated/ChevronRight.cjs.js"),Pe=require("./Icon/generated/ChevronUp.cjs.js"),ke=require("./Icon/generated/DoubleChevronLeft.cjs.js"),De=require("./Icon/generated/DoubleChevronRight.cjs.js"),Me=require("./Icon/generated/EyeFill.cjs.js"),be=require("./Icon/generated/EyeSlashFill.cjs.js"),Fe=require("./Icon/generated/Filter.cjs.js"),ve=require("./Icon/generated/Information.cjs.js"),Le=require("./Icon/generated/Menu.cjs.js"),Re=require("./Icon/generated/More.cjs.js"),Ae=require("./Icon/generated/PersonFill.cjs.js"),fe=require("./Icon/generated/Plus.cjs.js"),Ee=require("./Icon/generated/QuestionCircle.cjs.js"),He=require("./Icon/generated/Re.cjs.js"),Ne=require("./Icon/generated/Search.cjs.js"),we=require("./Icon/generated/SettingFill.cjs.js"),Ge=require("./Icon/generated/Share.cjs.js"),Oe=require("./Icon/generated/Store.cjs.js"),ze=require("./library/IconWithImage/index.cjs.js"),Qe=require("./library/List/BottomSheetItemList/index.cjs.js"),Ue=require("./library/Lottie/index.cjs.js"),We=require("./library/Spacing/index.cjs.js"),a=require("./types/date.cjs.js"),l=require("./constants/style.constants.cjs.js"),Ke=require("./components/DatePicker/SingleDatePickerModal/useSingleDatePickerModal.cjs.js"),Ye=require("./components/DatePicker/RangeDatePickerModal/useRangeDatePickerModal.cjs.js"),je=require("./chunks/index.styled.DkE3TbtV.js"),Je=require("./chunks/index.styled.bRkhLIZX.js");exports.BaseBottomSheet=e.BaseBottomSheet;exports.BaseBottomSheetBody=e.BaseBottomSheetBody;exports.BaseBottomSheetCTADoubleButton=e.BaseBottomSheetCTADoubleButton;exports.BaseBottomSheetCTASingleButton=e.BaseBottomSheetCTASingleButton;exports.BaseBottomSheetComp=e.BaseBottomSheetComp;exports.BaseBottomSheetHeader=e.BaseBottomSheetHeader;exports.BaseModal=e.BaseModal;exports.BaseTypography=e.BaseTypography;exports.BottomSheetNavigationTemplate=e.BottomSheetNavigationTemplate;exports.DoubleButton=e.DoubleButton;exports.Headline3=e.Headline3;exports.Headline4=e.Headline4;exports.Headline5=e.Headline5;exports.Modal=e.Modal;exports.NavBottomSheet=e.NavBottomSheet;exports.Navigation=e.Navigation;exports.PostfixInput=e.PostfixInput;exports.SelectBoxStyled=e.index_styled;exports.SingleButton=e.SingleButton;exports.Spinner=e.Spinner;exports.Title3=e.Title3;exports.TitleBottomSheet=e.TitleBottomSheet;exports.UnderLineMiniButton=e.UnderLineMiniButton;exports.chipColorStyle=e.chipColorStyle;exports.fillTabColorStyle=e.fillTabColorStyle;exports.textTabColorStyle=e.textTabColorStyle;exports.typographyList=e.typographyList;exports.IconBadge=s.IconBadge;exports.TextBadge=_.TextBadge;exports.FloatSingleButton=u.FloatSingleButton;exports.FloatDoubleButton=d.FloatDoubleButton;exports.FloatBaseButton=p.FloatBaseButton;exports.TestButton=m.TestButton;exports.Card=h.Card;exports.Comment=S.Comment;exports.RadioButton=B.RadioButton;exports.CheckBox=g.CheckBox;exports.CheckMark=y.CheckMark;exports.Switch=I.Switch;exports.BaseDatePicker=C.BaseDatePicker;exports.useSingleDatePicker=q.useSingleDatePicker;exports.useRangeDatePicker=T.useRangeDatePicker;exports.SingleDatePickerModal=x.SingleDatePickerModal;exports.RangeDatePickerModal=P.RangeDatePickerModal;exports.Divider=k.Divider;exports.InputFrame=D.InputFrame;exports.BaseInput=M.BaseInput;exports.Between=n.Between;exports.BetweenPcAndMobile=n.BetweenPcAndMobile;exports.Larger=n.Larger;exports.MediaQuerySize=n.MediaQuerySize;exports.Smaller=n.Smaller;exports.extractNumber=c.extractNumber;exports.formatKoreaCurrency=c.formatKoreaCurrency;exports.numberAccept=c.numberAccept;exports.ColorTypeArray=r.ColorTypeArray;exports.PurposeArray=r.PurposeArray;exports.StateArray=r.StateArray;exports.StatusArray=r.StatusArray;exports.singleButtonColorStyle=b;exports.miniButtonColorStyle=F;exports.datepickerColorStyle=v;exports.switchColorStyle=L;exports.radioButtonColorStyle=R;exports.checkBoxColorStyle=A;exports.checkMarkColorStyle=f;exports.progressBarColorStyle=E;exports.tagColorStyle=H;exports.ResidentNumberInput=N.ResidentNumberInput;exports.ProgressBar=w.ProgressBar;exports.Skeleton=G.Skeleton;exports.BoxMiniButton=O.BoxMiniButton;exports.IconMiniButton=z.IconMiniButton;exports.Segment=Q.Segment;exports.ExtendSegment=U.ExtendSegment;exports.SelectBox=W.SelectBox;exports.BasicChips=K.BasicChips;exports.ChipItem=Y.ChipItem;exports.ChipsFrame=j.ChipsFrame;exports.TextTabs=J.TextTabs;exports.FillTabs=V.FillTabs;exports.Tag=X.Tag;exports.Title=Z.Title;exports.Toast=$.Toast;exports.BasicTooltip=ee;exports.ImpactTooltip=te;exports.basicColors=i.basicColors;exports.generateHexWithAlphaInLightMode=i.generateHexWithAlphaInLightMode;exports.semanticColors=i.semanticColors;exports.semanticColorsMethod=i.semanticColorsMethod;exports.Pc=oe;exports.Mobile=ne;exports.Theme=re.Theme;exports.body1=t.body1;exports.body2=t.body2;exports.headline1=t.headline1;exports.headline2=t.headline2;exports.headline3=t.headline3;exports.headline4=t.headline4;exports.headline5=t.headline5;exports.headline6=t.headline6;exports.title1=t.title1;exports.title2=t.title2;exports.title3=t.title3;exports.title4=t.title4;exports.typography=t.typography;exports.Headline1=ie.Headline1;exports.Headline2=ae.Headline2;exports.Headline6=ce.Headline6;exports.Body1=le.Body1;exports.Body2=se.Body2;exports.Title1=_e.Title1;exports.Title2=ue.Title2;exports.Title4=de.Title4;exports.getScrollParent=o.getScrollParent;exports.isIOS=o.isIOS;exports.isIPad=o.isIPad;exports.isIPhone=o.isIPhone;exports.isInput=o.isInput;exports.isMac=o.isMac;exports.isSafari=o.isSafari;exports.isScrollable=o.isScrollable;exports.registerHookForOverlayPreventScroll=o.registerHookForOverlayPreventScroll;exports.testPlatform=o.testPlatform;exports.useIsomorphicLayoutEffect=o.useIsomorphicLayoutEffect;exports.useOverlayPreventScroll=o.useOverlayPreventScroll;exports.usePreventScroll=o.usePreventScroll;exports.useLayoutIsMobile=pe;exports.useResize=me;exports.useEventListener=he;exports.AlarmFillIcon=Se.AlarmFill;exports.CalendarIcon=Be.Calendar;exports.CancelIcon=ge.Cancel;exports.CancelCircleIcon=ye.CancelCircle;exports.CartFillIcon=Ie.CartFill;exports.CheckIcon=Ce.Check;exports.ChevronDownIcon=qe.ChevronDown;exports.ChevronLeftIcon=Te.ChevronLeft;exports.ChevronRightIcon=xe.ChevronRight;exports.ChevronUpIcon=Pe.ChevronUp;exports.DoubleChevronLeftIcon=ke.DoubleChevronLeft;exports.DoubleChevronRightIcon=De.DoubleChevronRight;exports.EyeFillIcon=Me.EyeFill;exports.EyeSlashFillIcon=be.EyeSlashFill;exports.FilterIcon=Fe.Filter;exports.InformationIcon=ve.Information;exports.MenuIcon=Le.Menu;exports.MoreIcon=Re.More;exports.PersonFillIcon=Ae.PersonFill;exports.PlusIcon=fe.Plus;exports.QuestionCircleIcon=Ee.QuestionCircle;exports.ReIcon=He.Re;exports.SearchIcon=Ne.Search;exports.SettingFillIcon=we.SettingFill;exports.ShareIcon=Ge.Share;exports.StoreIcon=Oe.Store;exports.IconWithImage=ze.IconWithImage;exports.BottomSheetItemList=Qe.BottomSheetItemList;exports.Lottie=Ue.Lottie;exports.Spacing=We.Spacing;exports.EMPTY_DATE=a.EMPTY_DATE;exports.END_DATE=a.END_DATE;exports.PurpleDate=a.PurpleDate;exports.START_DATE=a.START_DATE;exports.LayoutSpacing=l.LayoutSpacing;exports.zIndex=l.zIndex;exports.useSingleDatePickerModal=Ke.useSingleDatePickerModal;exports.useRangeDatePickerModal=Ye.useRangeDatePickerModal;exports.InputFrameStyled=je.index_styled;exports.BaseInputStyled=Je.index_styled;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import './style/global.css';
 export * from './components';
 export * from './core';
 export * from './hooks';