@owp/core 2.5.34 → 2.5.35

package/dist/components/OwpNumberField/OwpNumberField.js

@@ -1,28 +1,49 @@
-var o = Object.defineProperty;
-var e = (r, t) => o(r, "name", { value: t, configurable: !0 });
-import { jsx as u } from "../../node_modules/.pnpm/@emotion_react@11.14.0_@types_react@19.2.14_react@19.2.4/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js";
-import { TextField as i } from "@mui/material";
-import { clsx as p } from "../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
-import { NumericFormat as c } from "../../node_modules/.pnpm/react-number-format@5.4.4_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/react-number-format/dist/react-number-format.es.js";
-const l = /* @__PURE__ */ e(({
-  className: r,
-  inputAlign: t,
-  ...m
-}) => /* @__PURE__ */ u(
-  c,
-  {
-    ...m,
-    className: p(r, {
-      "[&_input]:text-left": t === "left",
-      "[&_input]:text-center": t === "center",
-      "[&_input]:text-right": t === "right"
-    }),
-    customInput: i,
-    thousandSeparator: !0,
-    valueIsNumericString: !0
+var d = Object.defineProperty;
+var p = (t, e) => d(t, "name", { value: e, configurable: !0 });
+import { jsx as g } from "../../node_modules/.pnpm/@emotion_react@11.14.0_@types_react@19.2.14_react@19.2.4/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js";
+import { TextField as x } from "@mui/material";
+import { clsx as N } from "../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
+import { forwardRef as v, useCallback as R } from "react";
+import { NumericFormat as F } from "../../node_modules/.pnpm/react-number-format@5.4.4_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/react-number-format/dist/react-number-format.es.js";
+const a = /* @__PURE__ */ p((t, e) => {
+  if (t) {
+    if (typeof t == "function") {
+      t(e);
+      return;
+    }
+    t.current = e;
   }
-), "OwpNumberField");
+}, "assignRef"), b = v((t, e) => {
+  const { className: c, inputAlign: i, getInputRef: o, onChange: u, onValueChange: m, ...l } = t, f = R(
+    (r) => {
+      a(o, r), a(e, r);
+    },
+    [o, e]
+  );
+  return /* @__PURE__ */ g(
+    F,
+    {
+      ...l,
+      className: N(c, {
+        "[&_input]:text-left": i === "left",
+        "[&_input]:text-center": i === "center",
+        "[&_input]:text-right": i === "right"
+      }),
+      customInput: x,
+      getInputRef: f,
+      onValueChange: /* @__PURE__ */ p((r, n) => {
+        if (m == null || m(r, n), n.source !== "event" || !n.event)
+          return;
+        const s = n.event;
+        s.target.value = r.value, u == null || u(s);
+      }, "onValueChange"),
+      thousandSeparator: !0,
+      valueIsNumericString: !0
+    }
+  );
+});
+b.displayName = "OwpNumberField";
 export {
-  l as OwpNumberField
+  b as OwpNumberField
 };
 //# sourceMappingURL=OwpNumberField.js.map

package/dist/components/OwpNumberField/OwpNumberField.js.map

@@ -1 +1 @@
-{"version":3,"file":"OwpNumberField.js","sources":["../../../src/components/OwpNumberField/OwpNumberField.tsx"],"sourcesContent":["import { TextField, TextFieldProps } from '@mui/material';\nimport clsx from 'clsx';\nimport { ComponentProps } from 'react';\nimport { NumericFormat } from 'react-number-format';\n\n/**\n * OwpNumberField 컴포넌트\n * @param className CSS 클래스명\n * @param inputAlign inputAlign 값\n */\nconst OwpNumberField = ({\n  className,\n  inputAlign,\n  ...props\n}: ComponentProps<\n  typeof NumericFormat<TextFieldProps & { inputAlign?: 'left' | 'center' | 'right' }>\n>) => {\n  return (\n    <NumericFormat\n      {...props}\n      className={clsx(className, {\n        '[&_input]:text-left': inputAlign === 'left',\n        '[&_input]:text-center': inputAlign === 'center',\n        '[&_input]:text-right': inputAlign === 'right',\n      })}\n      customInput={TextField}\n      thousandSeparator\n      valueIsNumericString\n    />\n  );\n};\n\nexport { OwpNumberField };\n"],"names":["OwpNumberField","__name","className","inputAlign","props","jsx","NumericFormat","clsx","TextField"],"mappings":";;;;;;AAUA,MAAMA,IAAiB,gBAAAC,EAAA,CAAC;AAAA,EACtB,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,GAAGC;AACL,MAII,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACE,GAAGF;AAAA,IACJ,WAAWG,EAAKL,GAAW;AAAA,MACzB,uBAAuBC,MAAe;AAAA,MACtC,yBAAyBA,MAAe;AAAA,MACxC,wBAAwBA,MAAe;AAAA,IAAA,CACxC;AAAA,IACD,aAAaK;AAAA,IACb,mBAAiB;AAAA,IACjB,sBAAoB;AAAA,EAAA;AAAA,GAjBH;"}
+{"version":3,"file":"OwpNumberField.js","sources":["../../../src/components/OwpNumberField/OwpNumberField.tsx"],"sourcesContent":["import { TextField, TextFieldProps } from '@mui/material';\nimport clsx from 'clsx';\nimport { ChangeEvent, ComponentProps, forwardRef, Ref, useCallback } from 'react';\nimport { NumericFormat } from 'react-number-format';\n\ntype OwpNumberFieldProps = ComponentProps<\n  typeof NumericFormat<TextFieldProps & { inputAlign?: 'left' | 'center' | 'right' }>\n>;\n\n/**\n * ref 값 할당\n * @param ref 대상 ref\n * @param value 할당 값\n */\nconst assignRef = <T,>(ref: Ref<T> | undefined, value: T | null) => {\n  if (!ref) {\n    return;\n  }\n\n  if (typeof ref === 'function') {\n    ref(value);\n    return;\n  }\n\n  ref.current = value;\n};\n\n/**\n * OwpNumberField 컴포넌트\n * @param className CSS 클래스명\n * @param inputAlign inputAlign 값\n * @param ref input 참조\n */\nconst OwpNumberField = forwardRef<HTMLInputElement, OwpNumberFieldProps>((props, ref) => {\n  const { className, inputAlign, getInputRef, onChange, onValueChange, ...restProps } = props;\n  const handleInputRef = useCallback(\n    (input: HTMLInputElement | null) => {\n      assignRef(getInputRef, input);\n      assignRef(ref, input);\n    },\n    [getInputRef, ref],\n  );\n\n  return (\n    <NumericFormat\n      {...restProps}\n      className={clsx(className, {\n        '[&_input]:text-left': inputAlign === 'left',\n        '[&_input]:text-center': inputAlign === 'center',\n        '[&_input]:text-right': inputAlign === 'right',\n      })}\n      customInput={TextField}\n      getInputRef={handleInputRef}\n      onValueChange={(values, sourceInfo) => {\n        onValueChange?.(values, sourceInfo);\n\n        if (sourceInfo.source !== 'event' || !sourceInfo.event) {\n          return;\n        }\n\n        const event = sourceInfo.event as ChangeEvent<HTMLInputElement>;\n        event.target.value = values.value;\n        onChange?.(event);\n      }}\n      thousandSeparator\n      valueIsNumericString\n    />\n  );\n});\n\nOwpNumberField.displayName = 'OwpNumberField';\n\nexport { OwpNumberField };\n"],"names":["assignRef","__name","ref","value","OwpNumberField","forwardRef","props","className","inputAlign","getInputRef","onChange","onValueChange","restProps","handleInputRef","useCallback","input","jsx","NumericFormat","clsx","TextField","values","sourceInfo","event"],"mappings":";;;;;;;AAcA,MAAMA,IAAY,gBAAAC,EAAA,CAAKC,GAAyBC,MAAoB;AAClE,MAAKD,GAIL;AAAA,QAAI,OAAOA,KAAQ,YAAY;AAC7B,MAAAA,EAAIC,CAAK;AACT;AAAA,IACF;AAEA,IAAAD,EAAI,UAAUC;AAAA;AAChB,GAXkB,cAmBZC,IAAiBC,EAAkD,CAACC,GAAOJ,MAAQ;AACvF,QAAM,EAAE,WAAAK,GAAW,YAAAC,GAAY,aAAAC,GAAa,UAAAC,GAAU,eAAAC,GAAe,GAAGC,MAAcN,GAChFO,IAAiBC;AAAA,IACrB,CAACC,MAAmC;AAClC,MAAAf,EAAUS,GAAaM,CAAK,GAC5Bf,EAAUE,GAAKa,CAAK;AAAA,IACtB;AAAA,IACA,CAACN,GAAaP,CAAG;AAAA,EAAA;AAGnB,SACE,gBAAAc;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGL;AAAA,MACJ,WAAWM,EAAKX,GAAW;AAAA,QACzB,uBAAuBC,MAAe;AAAA,QACtC,yBAAyBA,MAAe;AAAA,QACxC,wBAAwBA,MAAe;AAAA,MAAA,CACxC;AAAA,MACD,aAAaW;AAAA,MACb,aAAaN;AAAA,MACb,eAAe,gBAAAZ,EAAA,CAACmB,GAAQC,MAAe;AAGrC,YAFAV,KAAA,QAAAA,EAAgBS,GAAQC,IAEpBA,EAAW,WAAW,WAAW,CAACA,EAAW;AAC/C;AAGF,cAAMC,IAAQD,EAAW;AACzB,QAAAC,EAAM,OAAO,QAAQF,EAAO,OAC5BV,KAAA,QAAAA,EAAWY;AAAA,MACb,GAVe;AAAA,MAWf,mBAAiB;AAAA,MACjB,sBAAoB;AAAA,IAAA;AAAA,EAAA;AAG1B,CAAC;AAEDlB,EAAe,cAAc;"}

package/dist/components/OwpScrollbars/OwpScrollbars.js

@@ -1,17 +1,18 @@
-var j = Object.defineProperty;
-var u = (t, o) => j(t, "name", { value: o, configurable: !0 });
-import { jsx as k } from "../../node_modules/.pnpm/@emotion_react@11.14.0_@types_react@19.2.14_react@19.2.4/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js";
-import { useGetCustomScrollbarsEnabled as B } from "../../hooks/useOwpSettings.js";
-import { styled as M } from "@mui/material/styles";
-import U from "../../_virtual/mobile-detect.js";
-import X from "../../node_modules/.pnpm/perfect-scrollbar@1.5.6/node_modules/perfect-scrollbar/dist/perfect-scrollbar.esm.js";
-/* empty css                                                                                                        */
-import { forwardRef as Y, useRef as f, useState as D, useCallback as p, useEffect as a } from "react";
-import { useLocation as H } from "react-router-dom";
-const N = M("div")(() => ({
+var q = Object.defineProperty;
+var h = (p, e) => q(p, "name", { value: e, configurable: !0 });
+import { jsx as F } from "../../node_modules/.pnpm/@emotion_react@11.14.0_@types_react@19.2.14_react@19.2.4/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js";
+import { useGetCustomScrollbarsEnabled as I } from "../../hooks/useOwpSettings.js";
+import { styled as J } from "@mui/material/styles";
+import K from "../../_virtual/mobile-detect.js";
+import Q from "../../node_modules/.pnpm/perfect-scrollbar@1.5.6/node_modules/perfect-scrollbar/dist/perfect-scrollbar.esm.js";
+import { forwardRef as V, useRef as a, useState as W, useMemo as Z, useCallback as d, useEffect as i } from "react";
+import { useLocation as _ } from "react-router-dom";
+const $ = J("div")(() => ({
   overscrollBehavior: "contain",
   minHeight: "100%"
-})), P = new U(window.navigator.userAgent), y = P.mobile(), g = Object.freeze({
+})), oo = new K(window.navigator.userAgent), O = oo.mobile(), T = Object.freeze({
+  wheelPropagation: !0
+}), x = {
   "ps-scroll-y": "onScrollY",
   "ps-scroll-x": "onScrollX",
   "ps-scroll-up": "onScrollUp",
@@ -22,59 +23,85 @@ const N = M("div")(() => ({
   "ps-y-reach-end": "onYReachEnd",
   "ps-x-reach-start": "onXReachStart",
   "ps-x-reach-end": "onXReachEnd"
-}), V = Y((t, o) => {
+}, io = V((p, e) => {
   const {
-    className: T = "",
-    children: h,
-    id: x = "",
-    scrollToTopOnChildChange: m = !0,
-    scrollToTopOnRouteChange: d = !1,
-    enable: S = !0,
-    option: b = {
-      wheelPropagation: !0
-    }
-  } = t, r = f(null), n = f(null), i = f(/* @__PURE__ */ new Map()), [C, v] = D({}), c = B(), O = H(), { pathname: L } = O, E = p(() => {
-    Object.keys(g).forEach((e) => {
-      const s = t[g[e]];
-      if (s) {
-        const R = /* @__PURE__ */ u(() => s(r.current), "handler");
-        i.current.set(e, R), r.current && r.current.addEventListener(e, R, !1);
-      }
+    className: P = "",
+    children: m,
+    id: Y = "",
+    scrollToTopOnChildChange: S = !0,
+    scrollToTopOnRouteChange: R = !1,
+    enable: t = !0,
+    option: n = T,
+    onScrollY: C,
+    onScrollX: L,
+    onScrollUp: k,
+    onScrollDown: B,
+    onScrollLeft: M,
+    onScrollRight: N,
+    onYReachStart: U,
+    onYReachEnd: j,
+    onXReachStart: D,
+    onXReachEnd: H
+  } = p, r = a(null), c = a(null), u = a(/* @__PURE__ */ new Map()), w = a({}), [z, v] = W({}), l = I(), A = _(), { pathname: G } = A, b = Z(() => {
+    const o = {
+      wheelPropagation: n.wheelPropagation ?? T.wheelPropagation
+    };
+    return n.suppressScrollX !== void 0 && (o.suppressScrollX = n.suppressScrollX), o;
+  }, [n.suppressScrollX, n.wheelPropagation]);
+  w.current = {
+    onScrollY: C,
+    onScrollX: L,
+    onScrollUp: k,
+    onScrollDown: B,
+    onScrollLeft: M,
+    onScrollRight: N,
+    onYReachStart: U,
+    onYReachEnd: j,
+    onXReachStart: D,
+    onXReachEnd: H
+  };
+  const E = d(() => {
+    Object.keys(x).forEach((o) => {
+      const f = x[o], y = /* @__PURE__ */ h(() => {
+        const X = w.current[f];
+        X && r.current && X(r.current);
+      }, "handler");
+      u.current.set(o, y), r.current && r.current.addEventListener(o, y, !1);
     });
-  }, [t]), w = p(() => {
-    i.current.forEach((e, s) => {
-      r.current && r.current.removeEventListener(s, e, !1);
-    }), i.current.clear();
+  }, []), g = d(() => {
+    u.current.forEach((o, f) => {
+      r.current && r.current.removeEventListener(f, o, !1);
+    }), u.current.clear();
   }, []);
-  a(() => (c && r.current && !y && (n.current = new X(r.current, b), E()), () => {
-    n.current && (n.current.destroy(), n.current = null, w());
-  }), [c, E, b, w]);
-  const l = p(() => {
+  i(() => (l && t && r.current && !O && (c.current = new Q(r.current, b), E()), () => {
+    c.current && (c.current.destroy(), c.current = null, g());
+  }), [l, t, E, b, g]);
+  const s = d(() => {
     r.current && (r.current.scrollTop = 0);
   }, []);
-  return a(() => {
-    m && l();
-  }, [l, h, m]), a(() => {
-    d && l();
-  }, [L, l, d]), a(() => {
-    v(c && S && !y ? {
+  return i(() => {
+    S && s();
+  }, [s, m, S]), i(() => {
+    R && s();
+  }, [G, s, R]), i(() => {
+    v(l && t && !O ? {
       position: "relative",
       overflow: "hidden!important"
     } : {});
-  }, [c, S]), /* @__PURE__ */ k(
-    N,
+  }, [l, t]), /* @__PURE__ */ F(
+    $,
     {
-      id: x,
-      className: T,
-      style: C,
-      ref: /* @__PURE__ */ u((e) => {
-        r.current = e, typeof o == "function" ? o(e) : o && (o.current = e);
+      id: Y,
+      className: P,
+      style: z,
+      ref: /* @__PURE__ */ h((o) => {
+        r.current = o, typeof e == "function" ? e(o) : e && (e.current = o);
       }, "ref"),
-      children: h
+      children: m
     }
   );
 });
 export {
-  V as OwpScrollbars
+  io as OwpScrollbars
 };
 //# sourceMappingURL=OwpScrollbars.js.map

package/dist/components/OwpScrollbars/OwpScrollbars.js.map

@@ -1 +1 @@
-{"version":3,"file":"OwpScrollbars.js","sources":["../../../src/components/OwpScrollbars/OwpScrollbars.tsx"],"sourcesContent":["import { useGetCustomScrollbarsEnabled } from '@/hooks/useOwpSettings';\nimport { styled } from '@mui/material/styles';\nimport MobileDetect from 'mobile-detect';\nimport PerfectScrollbar from 'perfect-scrollbar';\nimport 'perfect-scrollbar/css/perfect-scrollbar.css';\nimport { forwardRef, ReactNode, useCallback, useEffect, useRef, useState } from 'react';\nimport { useLocation } from 'react-router-dom';\n\nconst Root = styled('div')(() => ({\n  overscrollBehavior: 'contain',\n  minHeight: '100%',\n}));\n\nconst md = new MobileDetect(window.navigator.userAgent);\nconst isMobile = md.mobile();\n\nconst handlerNameByEvent = Object.freeze({\n  'ps-scroll-y': 'onScrollY',\n  'ps-scroll-x': 'onScrollX',\n  'ps-scroll-up': 'onScrollUp',\n  'ps-scroll-down': 'onScrollDown',\n  'ps-scroll-left': 'onScrollLeft',\n  'ps-scroll-right': 'onScrollRight',\n  'ps-y-reach-start': 'onYReachStart',\n  'ps-y-reach-end': 'onYReachEnd',\n  'ps-x-reach-start': 'onXReachStart',\n  'ps-x-reach-end': 'onXReachEnd',\n});\n\ntype OwpScrollbarsProps = {\n  id?: string;\n  className?: string;\n  children: ReactNode;\n  enable?: boolean;\n  scrollToTopOnChildChange?: boolean;\n  scrollToTopOnRouteChange?: boolean;\n  option?: {\n    wheelPropagation?: boolean;\n    suppressScrollX?: boolean;\n  };\n};\n\n/**\n * OwpScrollbars 컴포넌트\n * @param props 컴포넌트 props\n * @param ref forwardRef 참조\n */\nconst OwpScrollbars = forwardRef<HTMLDivElement, OwpScrollbarsProps>((props, ref) => {\n  const {\n    className = '',\n    children,\n    id = '',\n    scrollToTopOnChildChange = true,\n    scrollToTopOnRouteChange = false,\n    enable = true,\n    option = {\n      wheelPropagation: true,\n    },\n  } = props;\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const psRef = useRef<PerfectScrollbar | null>(null);\n  const handlerByEvent = useRef<Map<string, EventListener>>(new Map());\n  const [style, setStyle] = useState({});\n  const customScrollbars = useGetCustomScrollbarsEnabled();\n  const location = useLocation();\n  const { pathname } = location;\n\n  const hookUpEvents = useCallback(() => {\n    Object.keys(handlerNameByEvent).forEach((key) => {\n      const callback = props[handlerNameByEvent[key] as keyof OwpScrollbarsProps] as (\n        T: HTMLDivElement,\n      ) => void;\n\n      if (callback) {\n        const handler: EventListener = () => callback(containerRef.current);\n        handlerByEvent.current.set(key, handler);\n\n        if (containerRef.current) {\n          containerRef.current.addEventListener(key, handler, false);\n        }\n      }\n    });\n  }, [props]);\n\n  const unHookUpEvents = useCallback(() => {\n    handlerByEvent.current.forEach((value, key) => {\n      if (containerRef.current) {\n        containerRef.current.removeEventListener(key, value, false);\n      }\n    });\n    handlerByEvent.current.clear();\n  }, []);\n\n  useEffect(() => {\n    if (customScrollbars && containerRef.current && !isMobile) {\n      psRef.current = new PerfectScrollbar(containerRef.current, option);\n      hookUpEvents();\n    }\n\n    return () => {\n      if (psRef.current) {\n        psRef.current.destroy();\n        psRef.current = null;\n        unHookUpEvents();\n      }\n    };\n  }, [customScrollbars, hookUpEvents, option, unHookUpEvents]);\n\n  const scrollToTop = useCallback(() => {\n    if (containerRef.current) {\n      containerRef.current.scrollTop = 0;\n    }\n  }, []);\n\n  useEffect(() => {\n    if (scrollToTopOnChildChange) {\n      scrollToTop();\n    }\n  }, [scrollToTop, children, scrollToTopOnChildChange]);\n\n  useEffect(() => {\n    if (scrollToTopOnRouteChange) {\n      scrollToTop();\n    }\n  }, [pathname, scrollToTop, scrollToTopOnRouteChange]);\n\n  useEffect(() => {\n    if (customScrollbars && enable && !isMobile) {\n      setStyle({\n        position: 'relative',\n        overflow: 'hidden!important',\n      });\n    } else {\n      setStyle({});\n    }\n  }, [customScrollbars, enable]);\n\n  return (\n    <Root\n      id={id}\n      className={className}\n      style={style}\n      ref={(el) => {\n        containerRef.current = el;\n\n        if (typeof ref === 'function') {\n          ref(el);\n        } else if (ref) {\n          ref.current = el;\n        }\n      }}\n    >\n      {children}\n    </Root>\n  );\n});\n\nexport { OwpScrollbars };\n"],"names":["Root","styled","md","MobileDetect","isMobile","handlerNameByEvent","OwpScrollbars","forwardRef","props","ref","className","children","id","scrollToTopOnChildChange","scrollToTopOnRouteChange","enable","option","containerRef","useRef","psRef","handlerByEvent","style","setStyle","useState","customScrollbars","useGetCustomScrollbarsEnabled","location","useLocation","pathname","hookUpEvents","useCallback","key","callback","handler","__name","unHookUpEvents","value","useEffect","PerfectScrollbar","scrollToTop","jsx","el"],"mappings":"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"}
+{"version":3,"file":"OwpScrollbars.js","sources":["../../../src/components/OwpScrollbars/OwpScrollbars.tsx"],"sourcesContent":["import { useGetCustomScrollbarsEnabled } from '@/hooks/useOwpSettings';\nimport { styled } from '@mui/material/styles';\nimport MobileDetect from 'mobile-detect';\nimport PerfectScrollbar from 'perfect-scrollbar';\nimport { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { useLocation } from 'react-router-dom';\n\nconst Root = styled('div')(() => ({\n  overscrollBehavior: 'contain',\n  minHeight: '100%',\n}));\n\nconst md = new MobileDetect(window.navigator.userAgent);\nconst isMobile = md.mobile();\n\ntype OwpScrollbarOption = {\n  wheelPropagation?: boolean;\n  suppressScrollX?: boolean;\n};\n\nconst defaultOption: Readonly<OwpScrollbarOption> = Object.freeze({\n  wheelPropagation: true,\n});\n\nconst handlerNameByEvent = {\n  'ps-scroll-y': 'onScrollY',\n  'ps-scroll-x': 'onScrollX',\n  'ps-scroll-up': 'onScrollUp',\n  'ps-scroll-down': 'onScrollDown',\n  'ps-scroll-left': 'onScrollLeft',\n  'ps-scroll-right': 'onScrollRight',\n  'ps-y-reach-start': 'onYReachStart',\n  'ps-y-reach-end': 'onYReachEnd',\n  'ps-x-reach-start': 'onXReachStart',\n  'ps-x-reach-end': 'onXReachEnd',\n} as const;\n\ntype OwpScrollbarEventName = keyof typeof handlerNameByEvent;\ntype OwpScrollbarHandlerName = (typeof handlerNameByEvent)[OwpScrollbarEventName];\ntype OwpScrollbarEventCallback = (container: HTMLDivElement) => void;\ntype OwpScrollbarEventProps = Partial<Record<OwpScrollbarHandlerName, OwpScrollbarEventCallback>>;\n\ntype OwpScrollbarsProps = OwpScrollbarEventProps & {\n  id?: string;\n  className?: string;\n  children: ReactNode;\n  enable?: boolean;\n  scrollToTopOnChildChange?: boolean;\n  scrollToTopOnRouteChange?: boolean;\n  option?: OwpScrollbarOption;\n};\n\n/**\n * OwpScrollbars 컴포넌트\n * @param props 컴포넌트 props\n * @param ref forwardRef 참조\n */\nconst OwpScrollbars = forwardRef<HTMLDivElement, OwpScrollbarsProps>((props, ref) => {\n  const {\n    className = '',\n    children,\n    id = '',\n    scrollToTopOnChildChange = true,\n    scrollToTopOnRouteChange = false,\n    enable = true,\n    option = defaultOption,\n    onScrollY,\n    onScrollX,\n    onScrollUp,\n    onScrollDown,\n    onScrollLeft,\n    onScrollRight,\n    onYReachStart,\n    onYReachEnd,\n    onXReachStart,\n    onXReachEnd,\n  } = props;\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const psRef = useRef<PerfectScrollbar | null>(null);\n  const handlerByEvent = useRef<Map<string, EventListener>>(new Map());\n  const callbackByNameRef = useRef<OwpScrollbarEventProps>({});\n  const [style, setStyle] = useState({});\n  const customScrollbars = useGetCustomScrollbarsEnabled();\n  const location = useLocation();\n  const { pathname } = location;\n  const resolvedOption = useMemo(() => {\n    const nextOption: NonNullable<OwpScrollbarsProps['option']> = {\n      wheelPropagation: option.wheelPropagation ?? defaultOption.wheelPropagation,\n    };\n\n    if (option.suppressScrollX !== undefined) {\n      nextOption.suppressScrollX = option.suppressScrollX;\n    }\n\n    return nextOption;\n  }, [option.suppressScrollX, option.wheelPropagation]);\n\n  callbackByNameRef.current = {\n    onScrollY,\n    onScrollX,\n    onScrollUp,\n    onScrollDown,\n    onScrollLeft,\n    onScrollRight,\n    onYReachStart,\n    onYReachEnd,\n    onXReachStart,\n    onXReachEnd,\n  };\n\n  const hookUpEvents = useCallback(() => {\n    Object.keys(handlerNameByEvent).forEach((key) => {\n      const handlerName = handlerNameByEvent[key as OwpScrollbarEventName];\n      const handler: EventListener = () => {\n        const callback = callbackByNameRef.current[handlerName];\n\n        if (callback && containerRef.current) {\n          callback(containerRef.current);\n        }\n      };\n      handlerByEvent.current.set(key, handler);\n\n      if (containerRef.current) {\n        containerRef.current.addEventListener(key, handler, false);\n      }\n    });\n  }, []);\n\n  const unHookUpEvents = useCallback(() => {\n    handlerByEvent.current.forEach((value, key) => {\n      if (containerRef.current) {\n        containerRef.current.removeEventListener(key, value, false);\n      }\n    });\n    handlerByEvent.current.clear();\n  }, []);\n\n  useEffect(() => {\n    if (customScrollbars && enable && containerRef.current && !isMobile) {\n      psRef.current = new PerfectScrollbar(containerRef.current, resolvedOption);\n      hookUpEvents();\n    }\n\n    return () => {\n      if (psRef.current) {\n        psRef.current.destroy();\n        psRef.current = null;\n        unHookUpEvents();\n      }\n    };\n  }, [customScrollbars, enable, hookUpEvents, resolvedOption, unHookUpEvents]);\n\n  const scrollToTop = useCallback(() => {\n    if (containerRef.current) {\n      containerRef.current.scrollTop = 0;\n    }\n  }, []);\n\n  useEffect(() => {\n    if (scrollToTopOnChildChange) {\n      scrollToTop();\n    }\n  }, [scrollToTop, children, scrollToTopOnChildChange]);\n\n  useEffect(() => {\n    if (scrollToTopOnRouteChange) {\n      scrollToTop();\n    }\n  }, [pathname, scrollToTop, scrollToTopOnRouteChange]);\n\n  useEffect(() => {\n    if (customScrollbars && enable && !isMobile) {\n      setStyle({\n        position: 'relative',\n        overflow: 'hidden!important',\n      });\n    } else {\n      setStyle({});\n    }\n  }, [customScrollbars, enable]);\n\n  return (\n    <Root\n      id={id}\n      className={className}\n      style={style}\n      ref={(el) => {\n        containerRef.current = el;\n\n        if (typeof ref === 'function') {\n          ref(el);\n        } else if (ref) {\n          ref.current = el;\n        }\n      }}\n    >\n      {children}\n    </Root>\n  );\n});\n\nexport { OwpScrollbars };\n"],"names":["Root","styled","md","MobileDetect","isMobile","defaultOption","handlerNameByEvent","OwpScrollbars","forwardRef","props","ref","className","children","id","scrollToTopOnChildChange","scrollToTopOnRouteChange","enable","option","onScrollY","onScrollX","onScrollUp","onScrollDown","onScrollLeft","onScrollRight","onYReachStart","onYReachEnd","onXReachStart","onXReachEnd","containerRef","useRef","psRef","handlerByEvent","callbackByNameRef","style","setStyle","useState","customScrollbars","useGetCustomScrollbarsEnabled","location","useLocation","pathname","resolvedOption","useMemo","nextOption","hookUpEvents","useCallback","key","handlerName","handler","__name","callback","unHookUpEvents","value","useEffect","PerfectScrollbar","scrollToTop","jsx","el"],"mappings":"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"}