@owp/core 2.2.2 → 2.2.4

package/dist/components/OwpSection/OwpSection.js

@@ -1,55 +1,116 @@
-var u = Object.defineProperty;
-var o = (s, m) => u(s, "name", { value: m, configurable: !0 });
-import { jsxs as l, jsx as n, Fragment as w } 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 b from "../../node_modules/.pnpm/@mui_icons-material@7.3.9_@mui_material@7.3.9_@emotion_react@11.14.0_@types_react@19.2._dc2be6bc014bebdac88a574e3e02c144/node_modules/@mui/icons-material/esm/Fitbit.js";
-import { Divider as h } from "@mui/material";
-import { clsx as v } from "../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
-import { OwpPageTitle as j } from "../OwpPageTitle/OwpPageTitle.js";
-const R = /* @__PURE__ */ o(({
-  className: s,
-  title: m,
-  disableTitleIcon: x,
-  headerProps: i,
-  usePageTitle: e,
-  actions: c,
-  leftSlot: d,
-  centerSlot: a,
-  children: r,
-  iconSize: f
+var j = Object.defineProperty;
+var w = (r, l) => j(r, "name", { value: l, configurable: !0 });
+import { jsxs as n, jsx as e } 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 O from "../../node_modules/.pnpm/@mui_icons-material@7.3.9_@mui_material@7.3.9_@emotion_react@11.14.0_@types_react@19.2._dc2be6bc014bebdac88a574e3e02c144/node_modules/@mui/icons-material/esm/Fitbit.js";
+import { Divider as R } from "@mui/material";
+import { useHeaderWrapState as k } from "../../hooks/useHeaderWrapState.js";
+import { clsx as m } from "../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
+import { OwpPageTitle as B } from "../OwpPageTitle/OwpPageTitle.js";
+const z = /* @__PURE__ */ w(({
+  className: r,
+  title: l,
+  disableTitleIcon: o,
+  headerProps: s,
+  usePageTitle: x,
+  actions: f,
+  leftSlot: a,
+  centerSlot: i,
+  children: t,
+  iconSize: d
 }) => {
-  const N = m != null && m !== "";
-  return /* @__PURE__ */ l("div", { className: s, children: [
-    (e ? !!(N || c || d || a) : !!(m || c)) && (e ? /* @__PURE__ */ l("div", { children: [
-      /* @__PURE__ */ n("div", { ...i, className: v("w-full", i == null ? void 0 : i.className), children: /* @__PURE__ */ n(
-        j,
+  const u = l != null && l !== "", p = !!(a || i), { containerRef: N, titleRef: h, slotsRef: v, actionsRef: y, isWrapped: c } = k([
+    l,
+    a,
+    i,
+    f,
+    o,
+    d
+  ]), g = !!(u || f || a || i);
+  return /* @__PURE__ */ n("div", { className: m("OwpSection-root flex h-full w-full flex-col", r), children: [
+    g && (x ? /* @__PURE__ */ n("div", { className: "OwpSection-header", children: [
+      /* @__PURE__ */ e("div", { ...s, className: m("w-full", s == null ? void 0 : s.className), children: /* @__PURE__ */ e(
+        B,
         {
-          title: m,
-          leftSlot: d,
-          centerSlot: a,
-          actions: c
+          title: l,
+          leftSlot: a,
+          centerSlot: i,
+          actions: f
         }
       ) }),
-      /* @__PURE__ */ n(h, { className: "my-12" })
-    ] }) : /* @__PURE__ */ l("div", { className: "flex w-full justify-between items-center mb-12 min-h-36", children: [
-      /* @__PURE__ */ l("div", { ...i, className: v("flex items-center gap-8", i == null ? void 0 : i.className), children: [
-        m && /* @__PURE__ */ l(w, { children: [
-          !x && /* @__PURE__ */ n(
-            b,
+      /* @__PURE__ */ e(R, { className: "my-12" })
+    ] }) : /* @__PURE__ */ e("div", { className: "OwpSection-header mb-12 min-h-36 w-full", children: /* @__PURE__ */ n(
+      "div",
+      {
+        ref: N,
+        ...s,
+        className: m(
+          "min-h-36 w-full",
+          c ? "flex flex-col gap-8" : "grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-x-8 gap-y-8",
+          s == null ? void 0 : s.className
+        ),
+        children: [
+          l && /* @__PURE__ */ n(
+            "div",
             {
-              fontSize: f,
-              sx: { fontSize: f ? void 0 : 24, color: "secondary.main" }
+              ref: h,
+              className: m(
+                "flex shrink-0 items-center gap-8 whitespace-nowrap",
+                c ? "order-1 self-start" : "col-start-1"
+              ),
+              children: [
+                !o && /* @__PURE__ */ e(
+                  O,
+                  {
+                    className: "shrink-0",
+                    fontSize: d,
+                    sx: { fontSize: d ? void 0 : 24, color: "secondary.main" }
+                  }
+                ),
+                /* @__PURE__ */ e("h6", { className: "shrink-0 whitespace-nowrap text-2xl font-medium", children: l })
+              ]
             }
           ),
-          /* @__PURE__ */ n("h6", { className: "text-2xl font-medium", children: m })
-        ] }),
-        d && /* @__PURE__ */ n("div", { children: d })
-      ] }),
-      c && /* @__PURE__ */ n("div", { className: "space-x-8", children: c })
-    ] })),
-    r
+          p && /* @__PURE__ */ e(
+            "div",
+            {
+              ref: v,
+              className: m(
+                "flex max-w-full",
+                c ? "order-2 self-end justify-end" : "col-start-2 justify-self-center"
+              ),
+              children: /* @__PURE__ */ n(
+                "div",
+                {
+                  className: m(
+                    "flex max-w-full items-center gap-8",
+                    c ? "flex-wrap justify-end" : "flex-nowrap justify-center"
+                  ),
+                  children: [
+                    a && /* @__PURE__ */ e("div", { className: "max-w-full", children: a }),
+                    i && /* @__PURE__ */ e("div", { className: "max-w-full", children: i })
+                  ]
+                }
+              )
+            }
+          ),
+          f && /* @__PURE__ */ e(
+            "div",
+            {
+              ref: y,
+              className: m(
+                "flex max-w-full justify-end",
+                c ? "order-3 self-end" : "col-start-3 justify-self-end"
+              ),
+              children: /* @__PURE__ */ e("div", { className: "flex max-w-full flex-wrap items-center gap-8", children: f })
+            }
+          )
+        ]
+      }
+    ) })),
+    /* @__PURE__ */ e("div", { className: "OwpSection-body flex min-h-0 flex-1 flex-col", children: t })
   ] });
 }, "OwpSection");
 export {
-  R as OwpSection
+  z as OwpSection
 };
 //# sourceMappingURL=OwpSection.js.map

package/dist/components/OwpSection/OwpSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"OwpSection.js","sources":["../../../src/components/OwpSection/OwpSection.tsx"],"sourcesContent":["import FitbitIcon from '@mui/icons-material/Fitbit';\nimport { Divider, IconProps } from '@mui/material';\nimport clsx from 'clsx';\nimport type { HTMLAttributes, ReactNode } from 'react';\nimport { OwpPageTitle } from '../OwpPageTitle';\n\ninterface OwpSectionProps {\n  className?: string;\n  headerProps?: HTMLAttributes<HTMLDivElement>;\n  disableTitleIcon?: boolean;\n  usePageTitle?: boolean;\n  title?: ReactNode;\n  actions?: ReactNode;\n  leftSlot?: ReactNode;\n  centerSlot?: ReactNode;\n  children?: ReactNode;\n  iconSize?: IconProps['fontSize'];\n}\n\n/**\n * OwpSection 컴포넌트\n * @param className CSS 클래스명\n * @param title 제목\n * @param disableTitleIcon disableTitleIcon 값\n * @param headerProps headerProps props\n * @param usePageTitle usePageTitle 값\n * @param actions 액션 영역\n */\nconst OwpSection = ({\n  className,\n  title,\n  disableTitleIcon,\n  headerProps,\n  usePageTitle,\n  actions,\n  leftSlot,\n  centerSlot,\n  children,\n  iconSize,\n}: OwpSectionProps) => {\n  const hasTitle = title !== undefined && title !== null && title !== '';\n  const shouldRenderHeader = usePageTitle\n    ? Boolean(hasTitle || actions || leftSlot || centerSlot)\n    : Boolean(title || actions);\n\n  return (\n    <div className={className}>\n      {shouldRenderHeader &&\n        (usePageTitle ? (\n          <div>\n            <div {...headerProps} className={clsx('w-full', headerProps?.className)}>\n              <OwpPageTitle\n                title={title}\n                leftSlot={leftSlot}\n                centerSlot={centerSlot}\n                actions={actions}\n              />\n            </div>\n            <Divider className=\"my-12\" />\n          </div>\n        ) : (\n          <div className=\"flex w-full justify-between items-center mb-12 min-h-36\">\n            <div {...headerProps} className={clsx('flex items-center gap-8', headerProps?.className)}>\n              {title && (\n                <>\n                  {!disableTitleIcon && (\n                    <FitbitIcon\n                      fontSize={iconSize}\n                      sx={{ fontSize: iconSize ? undefined : 24, color: 'secondary.main' }}\n                    />\n                  )}\n                  <h6 className=\"text-2xl font-medium\">{title}</h6>\n                </>\n              )}\n              {leftSlot && <div>{leftSlot}</div>}\n            </div>\n            {actions && <div className=\"space-x-8\">{actions}</div>}\n          </div>\n        ))}\n      {children}\n    </div>\n  );\n};\n\nexport { OwpSection };\n"],"names":["OwpSection","__name","className","title","disableTitleIcon","headerProps","usePageTitle","actions","leftSlot","centerSlot","children","iconSize","hasTitle","jsxs","jsx","clsx","OwpPageTitle","Divider","Fragment","FitbitIcon"],"mappings":";;;;;;;AA4BA,MAAMA,IAAa,gBAAAC,EAAA,CAAC;AAAA,EAClB,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACF,MAAuB;AACrB,QAAMC,IAAkCT,KAAU,QAAQA,MAAU;AAKpE,SACE,gBAAAU,EAAC,SAAI,WAAAX,GACF,UAAA;AAAA,KANsBI,IACvB,GAAQM,KAAYL,KAAWC,KAAYC,KAC3C,GAAQN,KAASI,QAKdD,sBACE,OAAA,EACC,UAAA;AAAA,MAAA,gBAAAQ,EAAC,OAAA,EAAK,GAAGT,GAAa,WAAWU,EAAK,UAAUV,KAAA,gBAAAA,EAAa,SAAS,GACpE,UAAA,gBAAAS;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,OAAAb;AAAA,UACA,UAAAK;AAAA,UACA,YAAAC;AAAA,UACA,SAAAF;AAAA,QAAA;AAAA,MAAA,GAEJ;AAAA,MACA,gBAAAO,EAACG,GAAA,EAAQ,WAAU,QAAA,CAAQ;AAAA,IAAA,EAAA,CAC7B,IAEA,gBAAAJ,EAAC,OAAA,EAAI,WAAU,2DACb,UAAA;AAAA,MAAA,gBAAAA,EAAC,OAAA,EAAK,GAAGR,GAAa,WAAWU,EAAK,2BAA2BV,KAAA,gBAAAA,EAAa,SAAS,GACpF,UAAA;AAAA,QAAAF,KACC,gBAAAU,EAAAK,GAAA,EACG,UAAA;AAAA,UAAA,CAACd,KACA,gBAAAU;AAAA,YAACK;AAAA,YAAA;AAAA,cACC,UAAUR;AAAA,cACV,IAAI,EAAE,UAAUA,IAAW,SAAY,IAAI,OAAO,iBAAA;AAAA,YAAiB;AAAA,UAAA;AAAA,UAGvE,gBAAAG,EAAC,MAAA,EAAG,WAAU,wBAAwB,UAAAX,EAAA,CAAM;AAAA,QAAA,GAC9C;AAAA,QAEDK,KAAY,gBAAAM,EAAC,OAAA,EAAK,UAAAN,EAAA,CAAS;AAAA,MAAA,GAC9B;AAAA,MACCD,KAAW,gBAAAO,EAAC,OAAA,EAAI,WAAU,aAAa,UAAAP,EAAA,CAAQ;AAAA,IAAA,EAAA,CAClD;AAAA,IAEHG;AAAA,EAAA,GACH;AAEJ,GAtDmB;"}
+{"version":3,"file":"OwpSection.js","sources":["../../../src/components/OwpSection/OwpSection.tsx"],"sourcesContent":["import FitbitIcon from '@mui/icons-material/Fitbit';\nimport { Divider, type IconProps } from '@mui/material';\nimport { useHeaderWrapState } from '@/hooks/useHeaderWrapState';\nimport clsx from 'clsx';\nimport type { HTMLAttributes, ReactNode } from 'react';\nimport { OwpPageTitle } from '../OwpPageTitle';\n\ninterface OwpSectionProps {\n  className?: string;\n  headerProps?: HTMLAttributes<HTMLDivElement>;\n  disableTitleIcon?: boolean;\n  usePageTitle?: boolean;\n  title?: ReactNode;\n  actions?: ReactNode;\n  leftSlot?: ReactNode;\n  centerSlot?: ReactNode;\n  children?: ReactNode;\n  iconSize?: IconProps['fontSize'];\n}\n\n/**\n * OwpSection 컴포넌트\n * @param className CSS 클래스명\n * @param title 제목\n * @param disableTitleIcon disableTitleIcon 값\n * @param headerProps headerProps props\n * @param usePageTitle usePageTitle 값\n * @param leftSlot leftSlot 값\n * @param centerSlot centerSlot 값\n * @param actions 액션 영역\n */\nconst OwpSection = ({\n  className,\n  title,\n  disableTitleIcon,\n  headerProps,\n  usePageTitle,\n  actions,\n  leftSlot,\n  centerSlot,\n  children,\n  iconSize,\n}: OwpSectionProps) => {\n  const hasTitle = title !== undefined && title !== null && title !== '';\n  const hasSlots = Boolean(leftSlot || centerSlot);\n  const { containerRef, titleRef, slotsRef, actionsRef, isWrapped } = useHeaderWrapState([\n    title,\n    leftSlot,\n    centerSlot,\n    actions,\n    disableTitleIcon,\n    iconSize,\n  ]);\n  const shouldRenderHeader = usePageTitle\n    ? Boolean(hasTitle || actions || leftSlot || centerSlot)\n    : Boolean(hasTitle || actions || leftSlot || centerSlot);\n\n  return (\n    <div className={clsx('OwpSection-root flex h-full w-full flex-col', className)}>\n      {shouldRenderHeader &&\n        (usePageTitle ? (\n          <div className=\"OwpSection-header\">\n            <div {...headerProps} className={clsx('w-full', headerProps?.className)}>\n              <OwpPageTitle\n                title={title}\n                leftSlot={leftSlot}\n                centerSlot={centerSlot}\n                actions={actions}\n              />\n            </div>\n            <Divider className=\"my-12\" />\n          </div>\n        ) : (\n          <div className=\"OwpSection-header mb-12 min-h-36 w-full\">\n            <div\n              ref={containerRef}\n              {...headerProps}\n              className={clsx(\n                'min-h-36 w-full',\n                isWrapped\n                  ? 'flex flex-col gap-8'\n                  : 'grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-x-8 gap-y-8',\n                headerProps?.className,\n              )}\n            >\n              {title && (\n                <div\n                  ref={titleRef}\n                  className={clsx(\n                    'flex shrink-0 items-center gap-8 whitespace-nowrap',\n                    isWrapped ? 'order-1 self-start' : 'col-start-1',\n                  )}\n                >\n                  {!disableTitleIcon && (\n                    <FitbitIcon\n                      className=\"shrink-0\"\n                      fontSize={iconSize}\n                      sx={{ fontSize: iconSize ? undefined : 24, color: 'secondary.main' }}\n                    />\n                  )}\n                  <h6 className=\"shrink-0 whitespace-nowrap text-2xl font-medium\">{title}</h6>\n                </div>\n              )}\n              {hasSlots && (\n                <div\n                  ref={slotsRef}\n                  className={clsx(\n                    'flex max-w-full',\n                    isWrapped ? 'order-2 self-end justify-end' : 'col-start-2 justify-self-center',\n                  )}\n                >\n                  <div\n                    className={clsx(\n                      'flex max-w-full items-center gap-8',\n                      isWrapped ? 'flex-wrap justify-end' : 'flex-nowrap justify-center',\n                    )}\n                  >\n                    {leftSlot && <div className=\"max-w-full\">{leftSlot}</div>}\n                    {centerSlot && <div className=\"max-w-full\">{centerSlot}</div>}\n                  </div>\n                </div>\n              )}\n              {actions && (\n                <div\n                  ref={actionsRef}\n                  className={clsx(\n                    'flex max-w-full justify-end',\n                    isWrapped ? 'order-3 self-end' : 'col-start-3 justify-self-end',\n                  )}\n                >\n                  <div className=\"flex max-w-full flex-wrap items-center gap-8\">{actions}</div>\n                </div>\n              )}\n            </div>\n          </div>\n        ))}\n      <div className=\"OwpSection-body flex min-h-0 flex-1 flex-col\">{children}</div>\n    </div>\n  );\n};\n\nexport { OwpSection };\n"],"names":["OwpSection","__name","className","title","disableTitleIcon","headerProps","usePageTitle","actions","leftSlot","centerSlot","children","iconSize","hasTitle","hasSlots","containerRef","titleRef","slotsRef","actionsRef","isWrapped","useHeaderWrapState","shouldRenderHeader","clsx","jsxs","jsx","OwpPageTitle","Divider","FitbitIcon"],"mappings":";;;;;;;;AA+BA,MAAMA,IAAa,gBAAAC,EAAA,CAAC;AAAA,EAClB,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACF,MAAuB;AACrB,QAAMC,IAAkCT,KAAU,QAAQA,MAAU,IAC9DU,IAAW,GAAQL,KAAYC,IAC/B,EAAE,cAAAK,GAAc,UAAAC,GAAU,UAAAC,GAAU,YAAAC,GAAY,WAAAC,EAAA,IAAcC,EAAmB;AAAA,IACrFhB;AAAA,IACAK;AAAA,IACAC;AAAA,IACAF;AAAA,IACAH;AAAA,IACAO;AAAA,EAAA,CACD,GACKS,IACF,GAAQR,KAAYL,KAAWC,KAAYC;AAG/C,2BACG,OAAA,EAAI,WAAWY,EAAK,+CAA+CnB,CAAS,GAC1E,UAAA;AAAA,IAAAkB,MACEd,IACC,gBAAAgB,EAAC,OAAA,EAAI,WAAU,qBACb,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAA,EAAK,GAAGlB,GAAa,WAAWgB,EAAK,UAAUhB,KAAA,gBAAAA,EAAa,SAAS,GACpE,UAAA,gBAAAkB;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,OAAArB;AAAA,UACA,UAAAK;AAAA,UACA,YAAAC;AAAA,UACA,SAAAF;AAAA,QAAA;AAAA,MAAA,GAEJ;AAAA,MACA,gBAAAgB,EAACE,GAAA,EAAQ,WAAU,QAAA,CAAQ;AAAA,IAAA,EAAA,CAC7B,IAEA,gBAAAF,EAAC,OAAA,EAAI,WAAU,2CACb,UAAA,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKR;AAAA,QACJ,GAAGT;AAAA,QACJ,WAAWgB;AAAA,UACT;AAAA,UACAH,IACI,wBACA;AAAA,UACJb,KAAA,gBAAAA,EAAa;AAAA,QAAA;AAAA,QAGd,UAAA;AAAA,UAAAF,KACC,gBAAAmB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAKP;AAAA,cACL,WAAWM;AAAA,gBACT;AAAA,gBACAH,IAAY,uBAAuB;AAAA,cAAA;AAAA,cAGpC,UAAA;AAAA,gBAAA,CAACd,KACA,gBAAAmB;AAAA,kBAACG;AAAA,kBAAA;AAAA,oBACC,WAAU;AAAA,oBACV,UAAUf;AAAA,oBACV,IAAI,EAAE,UAAUA,IAAW,SAAY,IAAI,OAAO,iBAAA;AAAA,kBAAiB;AAAA,gBAAA;AAAA,gBAGvE,gBAAAY,EAAC,MAAA,EAAG,WAAU,mDAAmD,UAAApB,EAAA,CAAM;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAG1EU,KACC,gBAAAU;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAKP;AAAA,cACL,WAAWK;AAAA,gBACT;AAAA,gBACAH,IAAY,iCAAiC;AAAA,cAAA;AAAA,cAG/C,UAAA,gBAAAI;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWD;AAAA,oBACT;AAAA,oBACAH,IAAY,0BAA0B;AAAA,kBAAA;AAAA,kBAGvC,UAAA;AAAA,oBAAAV,KAAY,gBAAAe,EAAC,OAAA,EAAI,WAAU,cAAc,UAAAf,GAAS;AAAA,oBAClDC,KAAc,gBAAAc,EAAC,OAAA,EAAI,WAAU,cAAc,UAAAd,EAAA,CAAW;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YACzD;AAAA,UAAA;AAAA,UAGHF,KACC,gBAAAgB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAKN;AAAA,cACL,WAAWI;AAAA,gBACT;AAAA,gBACAH,IAAY,qBAAqB;AAAA,cAAA;AAAA,cAGnC,UAAA,gBAAAK,EAAC,OAAA,EAAI,WAAU,gDAAgD,UAAAhB,EAAA,CAAQ;AAAA,YAAA;AAAA,UAAA;AAAA,QACzE;AAAA,MAAA;AAAA,IAAA,EAEJ,CACF;AAAA,IAEJ,gBAAAgB,EAAC,OAAA,EAAI,WAAU,gDAAgD,UAAAb,EAAA,CAAS;AAAA,EAAA,GAC1E;AAEJ,GA5GmB;"}