@owp/core 2.2.3 → 2.2.5

package/dist/components/OwpQuerySelector/OwpQuerySelector.js

@@ -0,0 +1,232 @@
+var ct = Object.defineProperty;
+var c = (t, u) => ct(t, "name", { value: u, configurable: !0 });
+import { jsx as ut } 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 { OwpSelectorBase as it } from "../OwpSelectorBase/OwpSelectorBase.js";
+import { splitSelectorValue as K, mergeSelectorOptions as at } from "../OwpSelectorBase/utils/querySelectorUtils.js";
+import { STORAGE_ACCESS_TOKEN_KEY as lt } from "../../constants/localStorageKeys.js";
+import { useOwpAppContext as ft } from "../../contexts/OwpAppProvider.js";
+import { useGetCurrentUser as dt } from "../../hooks/useCurrentUser.js";
+import { createJsonString as mt } from "../../utils/createJsonString.js";
+import { getApiLanguageCode as pt } from "../../utils/language.js";
+import { useQuery as C } from "@tanstack/react-query";
+import { useState as L, useMemo as j, useEffect as I } from "react";
+import { isFunction as gt } from "../../node_modules/.pnpm/es-toolkit@1.39.10/node_modules/es-toolkit/dist/compat/predicate/isFunction.js";
+import { isArray as bt } from "../../node_modules/.pnpm/es-toolkit@1.39.10/node_modules/es-toolkit/dist/compat/predicate/isArray.js";
+const Ot = "resultData", U = /* @__PURE__ */ c((t) => typeof t == "string" || typeof t == "number" ? `${t}` : "", "getQuerySelectorOptionLabelText"), wt = /* @__PURE__ */ c((t) => ({
+  jsondata: mt(t)
+}), "defaultBuildRequestQuery"), St = /* @__PURE__ */ c((t, u, a, m) => {
+  const b = new URL(t.endsWith("/") ? t : `${t}/`), r = new URL(u.startsWith("/") ? u.slice(1) : u, b);
+  return Object.entries(a).forEach(([f, d]) => {
+    d != null && r.searchParams.set(f, typeof d == "string" ? d : JSON.stringify(d));
+  }), m && r.searchParams.set("TOKEN", m), r.searchParams.set("i18nextLng", pt()), r.toString();
+}, "createQuerySelectorRequestUrl"), Qt = /* @__PURE__ */ c((t, u) => {
+  if (!t || typeof t != "object")
+    return [];
+  const a = t[u];
+  return bt(a) ? a : [];
+}, "getQuerySelectorResponseList"), ht = /* @__PURE__ */ c((t, u, a) => `${(a ? a(t) : `${(t == null ? void 0 : t[u ?? ""]) ?? ""}`) ?? ""}`.trim(), "resolveQuerySelectorValue"), Et = /* @__PURE__ */ c((t, u, a) => `${(a ? a(t) : `${(t == null ? void 0 : t[u ?? ""]) ?? ""}`) ?? ""}`.trim(), "resolveQuerySelectorLabel"), Lt = /* @__PURE__ */ c((t, u, a, m, b) => t.map((r) => {
+  const f = ht(r, u, m);
+  return f ? {
+    label: Et(r, a, b),
+    raw: r,
+    value: f
+  } : null;
+}).filter((r) => r != null), "mapQuerySelectorOptions"), Nt = /* @__PURE__ */ c(({
+  apiUrl: t,
+  asyncSearch: u,
+  buildRequestQuery: a = wt,
+  disableAllValueItem: m,
+  filterOptions: b,
+  multiple: r,
+  query: f,
+  responseListKey: d = Ot,
+  selectorType: z = "select",
+  value: g,
+  valueKey: Q,
+  valueResolver: P,
+  labelKey: h,
+  labelResolver: v,
+  onChange: M,
+  defaultValue: y,
+  textFieldProps: O,
+  ...tt
+}) => {
+  const { env: _ } = ft(), V = dt(), E = `${(_ == null ? void 0 : _.apiBaseUrl) ?? ""}`.trim(), et = `${(V == null ? void 0 : V.token) ?? localStorage.getItem(lt) ?? ""}`.trim(), o = z === "autocomplete" ? u : void 0, s = o != null, H = s ? !0 : m, ot = (o == null ? void 0 : o.minLength) ?? 1, X = (o == null ? void 0 : o.debounceMs) ?? 300, [R, D] = L(g ?? y ?? ""), [nt, p] = L(""), [Z, B] = L(""), [N, q] = L(""), [A, rt] = L({}), w = j(() => K(R), [R]), k = s && N.trim().length >= ot;
+  I(() => {
+    g !== void 0 && D(g);
+  }, [g]), I(() => {
+    g === void 0 && D(y ?? "");
+  }, [y, g]), I(() => {
+    if (!s)
+      return;
+    const e = window.setTimeout(() => {
+      q(Z.trim());
+    }, X);
+    return () => {
+      window.clearTimeout(e);
+    };
+  }, [X, s, Z]);
+  const T = /* @__PURE__ */ c(async (e) => {
+    const n = await fetch(
+      St(E, t, a(e), et)
+    ), i = await n.json();
+    if (!n.ok || (i == null ? void 0 : i.resultCode) === "STATUS_0")
+      throw new Error(`${(i == null ? void 0 : i.resultMessage) ?? "Failed to fetch selector options"}`);
+    const l = Qt(i, d), F = gt(b) ? b(l) : l;
+    return Lt(
+      F,
+      Q,
+      h,
+      P,
+      v
+    );
+  }, "fetchOptions"), G = C({
+    queryKey: ["owp", "query-selector", t, f, d, Q, h],
+    enabled: !!E && !s,
+    queryFn: /* @__PURE__ */ c(() => T(f), "queryFn")
+  }), J = C({
+    queryKey: [
+      "owp",
+      "query-selector",
+      "search",
+      t,
+      f,
+      N,
+      d,
+      Q,
+      h
+    ],
+    enabled: !!E && s && k,
+    queryFn: /* @__PURE__ */ c(() => T({
+      ...f,
+      ...(o == null ? void 0 : o.buildKeywordQuery(N)) ?? {}
+    }), "queryFn")
+  }), W = C({
+    queryKey: ["owp", "query-selector", "all", t, f, d, Q, h],
+    enabled: !!E && s && (!!w.length || !!r && !H),
+    queryFn: /* @__PURE__ */ c(() => {
+      var e;
+      return T({
+        ...f,
+        ...((e = o == null ? void 0 : o.buildAllQuery) == null ? void 0 : e.call(o)) ?? {}
+      });
+    }, "queryFn")
+  }), Y = C({
+    queryKey: [
+      "owp",
+      "query-selector",
+      "selected",
+      t,
+      w,
+      d,
+      Q,
+      h
+    ],
+    enabled: !!E && s && !!w.length && !!(o != null && o.buildSelectedQuery),
+    queryFn: /* @__PURE__ */ c(() => {
+      var e;
+      return T({
+        ...f,
+        ...((e = o == null ? void 0 : o.buildSelectedQuery) == null ? void 0 : e.call(o, w)) ?? {}
+      });
+    }, "queryFn")
+  }), x = j(() => s ? k ? J.data ?? [] : [] : G.data ?? [], [
+    G.data,
+    s,
+    J.data,
+    k
+  ]), S = j(
+    () => at(
+      x,
+      W.data,
+      Y.data,
+      Object.values(A)
+    ),
+    [W.data, A, x, Y.data]
+  ), $ = j(
+    () => {
+      const e = {};
+      return S.forEach((n) => {
+        e[n.value] = n;
+      }), e;
+    },
+    [S]
+  ), st = G.isLoading || J.isLoading || W.isLoading || Y.isLoading;
+  return I(() => {
+    S.length && rt((e) => {
+      const n = { ...e };
+      let i = !1;
+      return S.forEach((l) => {
+        n[l.value] !== l && (n[l.value] = l, i = !0);
+      }), i ? n : e;
+    });
+  }, [S]), I(() => {
+    var n;
+    if (!s)
+      return;
+    if (r) {
+      p("");
+      return;
+    }
+    const e = w[0];
+    if (!e) {
+      p("");
+      return;
+    }
+    p(U(((n = $[e]) == null ? void 0 : n.label) ?? ""));
+  }, [s, r, $, w]), /* @__PURE__ */ ut(
+    it,
+    {
+      ...tt,
+      allOptions: S,
+      allValueMode: "joined",
+      autocompleteInputValue: s ? nt : void 0,
+      defaultValue: y,
+      disableAllValueItem: H,
+      disableClientFilter: s,
+      loading: st,
+      multiple: r,
+      onAutocompleteInputChange: s ? (e, n) => {
+        n !== "reset" && (r && n !== "input" || (p(e), B(e)));
+      } : void 0,
+      onChange: /* @__PURE__ */ c((e) => {
+        var n;
+        if (D(e.target.value), s) {
+          const i = K(e.target.value);
+          if (r)
+            p(""), B(""), q("");
+          else {
+            const l = i[0], F = l ? U(((n = $[l]) == null ? void 0 : n.label) ?? "") : "";
+            p(F), B(""), q("");
+          }
+        }
+        M == null || M(e);
+      }, "onChange"),
+      options: x,
+      selectorType: z,
+      textFieldProps: {
+        ...O,
+        onBlur: /* @__PURE__ */ c((e) => {
+          var n, i;
+          if (s) {
+            if (r)
+              p("");
+            else {
+              const l = K(R)[0];
+              p(
+                l ? U(((n = $[l]) == null ? void 0 : n.label) ?? "") : ""
+              );
+            }
+            B(""), q("");
+          }
+          (i = O == null ? void 0 : O.onBlur) == null || i.call(O, e);
+        }, "onBlur")
+      },
+      value: g
+    }
+  );
+}, "OwpQuerySelector");
+export {
+  Nt as OwpQuerySelector
+};
+//# sourceMappingURL=OwpQuerySelector.js.map

package/dist/components/OwpQuerySelector/OwpQuerySelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OwpQuerySelector.js","sources":["../../../src/components/OwpQuerySelector/OwpQuerySelector.tsx"],"sourcesContent":["import { OwpSelectorBase } from '@/components/OwpSelectorBase/OwpSelectorBase';\nimport type { OwpSelectorBaseOption } from '@/components/OwpSelectorBase/types';\nimport { mergeSelectorOptions, splitSelectorValue } from '@/components/OwpSelectorBase/utils';\nimport { STORAGE_ACCESS_TOKEN_KEY } from '@/constants/localStorageKeys';\nimport { useOwpAppContext } from '@/contexts/OwpAppProvider';\nimport { useGetCurrentUser } from '@/hooks/useCurrentUser';\nimport { createJsonString } from '@/utils/createJsonString';\nimport { getApiLanguageCode } from '@/utils/language';\nimport { useQuery } from '@tanstack/react-query';\nimport { isArray, isFunction } from 'es-toolkit/compat';\nimport { useEffect, useMemo, useState } from 'react';\nimport type { OwpQuerySelectorProps } from './types';\n\nconst DEFAULT_RESPONSE_LIST_KEY = 'resultData';\n\n/**\n * 선택 옵션 라벨 문자열 변환\n * @param label 선택 옵션 라벨\n */\nconst getQuerySelectorOptionLabelText = (label: OwpSelectorBaseOption['label']) => {\n  return typeof label === 'string' || typeof label === 'number' ? `${label}` : '';\n};\n\n/**\n * 요청 query 객체 구성\n * @param query 원본 query\n */\nconst defaultBuildRequestQuery = (query: Record<string, unknown>) => {\n  return {\n    jsondata: createJsonString(query),\n  };\n};\n\n/**\n * API 요청 URL 생성\n * @param apiBaseUrl API base URL\n * @param apiUrl API path\n * @param requestQuery 요청 query\n * @param accessToken 접근 토큰\n */\nconst createQuerySelectorRequestUrl = (\n  apiBaseUrl: string,\n  apiUrl: string,\n  requestQuery: Record<string, unknown>,\n  accessToken: string,\n) => {\n  const baseUrl = new URL(apiBaseUrl.endsWith('/') ? apiBaseUrl : `${apiBaseUrl}/`);\n  const requestUrl = new URL(apiUrl.startsWith('/') ? apiUrl.slice(1) : apiUrl, baseUrl);\n\n  Object.entries(requestQuery).forEach(([key, value]) => {\n    if (value == null) {\n      return;\n    }\n\n    requestUrl.searchParams.set(key, typeof value === 'string' ? value : JSON.stringify(value));\n  });\n\n  if (accessToken) {\n    requestUrl.searchParams.set('TOKEN', accessToken);\n  }\n\n  requestUrl.searchParams.set('i18nextLng', getApiLanguageCode());\n\n  return requestUrl.toString();\n};\n\n/**\n * 원격 선택기 응답 목록 정규화\n * @param data 응답 데이터\n * @param responseListKey 목록 키\n */\nconst getQuerySelectorResponseList = (data: unknown, responseListKey: string) => {\n  if (!data || typeof data !== 'object') {\n    return [];\n  }\n\n  const responseList = (data as Record<string, unknown>)[responseListKey];\n\n  return isArray(responseList) ? (responseList as Record<string, unknown>[]) : [];\n};\n\n/**\n * 원격 아이템 value 계산\n * @param item 응답 아이템\n * @param valueKey value key\n * @param valueResolver value resolver\n */\nconst resolveQuerySelectorValue = (\n  item: Record<string, unknown>,\n  valueKey?: string,\n  valueResolver?: (item: Record<string, unknown>) => string,\n) => {\n  const value = valueResolver ? valueResolver(item) : `${item?.[valueKey ?? ''] ?? ''}`;\n\n  return `${value ?? ''}`.trim();\n};\n\n/**\n * 원격 아이템 label 계산\n * @param item 응답 아이템\n * @param labelKey label key\n * @param labelResolver label resolver\n */\nconst resolveQuerySelectorLabel = (\n  item: Record<string, unknown>,\n  labelKey?: string,\n  labelResolver?: (item: Record<string, unknown>) => string,\n) => {\n  const label = labelResolver ? labelResolver(item) : `${item?.[labelKey ?? ''] ?? ''}`;\n\n  return `${label ?? ''}`.trim();\n};\n\n/**\n * 원격 응답 데이터를 선택 옵션으로 변환\n * @param items 응답 아이템 목록\n * @param valueKey value key\n * @param labelKey label key\n * @param valueResolver value resolver\n * @param labelResolver label resolver\n */\nconst mapQuerySelectorOptions = (\n  items: Record<string, unknown>[],\n  valueKey?: string,\n  labelKey?: string,\n  valueResolver?: (item: Record<string, unknown>) => string,\n  labelResolver?: (item: Record<string, unknown>) => string,\n) => {\n  return items\n    .map((item) => {\n      const value = resolveQuerySelectorValue(item, valueKey, valueResolver);\n\n      if (!value) {\n        return null;\n      }\n\n      return {\n        label: resolveQuerySelectorLabel(item, labelKey, labelResolver),\n        raw: item,\n        value,\n      } as OwpSelectorBaseOption<Record<string, unknown>>;\n    })\n    .filter((option): option is OwpSelectorBaseOption<Record<string, unknown>> => option != null);\n};\n\n/**\n * 원격 조회형 공통 선택기\n * @param props 원격 선택기 props\n */\nexport const OwpQuerySelector = ({\n  apiUrl,\n  asyncSearch,\n  buildRequestQuery = defaultBuildRequestQuery,\n  disableAllValueItem,\n  filterOptions,\n  multiple,\n  query,\n  responseListKey = DEFAULT_RESPONSE_LIST_KEY,\n  selectorType = 'select',\n  value,\n  valueKey,\n  valueResolver,\n  labelKey,\n  labelResolver,\n  onChange,\n  defaultValue,\n  textFieldProps,\n  ...selectorBaseProps\n}: OwpQuerySelectorProps) => {\n  const { env } = useOwpAppContext();\n  const currentUser = useGetCurrentUser();\n  const apiBaseUrl = `${env?.apiBaseUrl ?? ''}`.trim();\n  const accessToken = `${currentUser?.token ?? localStorage.getItem(STORAGE_ACCESS_TOKEN_KEY) ?? ''}`.trim();\n  const resolvedAsyncSearch = selectorType === 'autocomplete' ? asyncSearch : undefined;\n  const isAsyncSearchEnabled = resolvedAsyncSearch != null;\n  const resolvedDisableAllValueItem = isAsyncSearchEnabled ? true : disableAllValueItem;\n  const minLength = resolvedAsyncSearch?.minLength ?? 1;\n  const debounceMs = resolvedAsyncSearch?.debounceMs ?? 300;\n  const [currentSelectionValue, setCurrentSelectionValue] = useState(value ?? defaultValue ?? '');\n  const [autocompleteInputValue, setAutocompleteInputValue] = useState('');\n  const [searchKeyword, setSearchKeyword] = useState('');\n  const [debouncedSearchKeyword, setDebouncedSearchKeyword] = useState('');\n  const [cachedOptions, setCachedOptions] = useState<Record<string, OwpSelectorBaseOption<Record<string, unknown>>>>({});\n  const selectedIds = useMemo(() => splitSelectorValue(currentSelectionValue), [currentSelectionValue]);\n  const shouldFetchSearchOptions = isAsyncSearchEnabled && debouncedSearchKeyword.trim().length >= minLength;\n\n  useEffect(() => {\n    if (value === undefined) {\n      return;\n    }\n\n    setCurrentSelectionValue(value);\n  }, [value]);\n\n  useEffect(() => {\n    if (value !== undefined) {\n      return;\n    }\n\n    setCurrentSelectionValue(defaultValue ?? '');\n  }, [defaultValue, value]);\n\n  useEffect(() => {\n    if (!isAsyncSearchEnabled) {\n      return;\n    }\n\n    const timer = window.setTimeout(() => {\n      setDebouncedSearchKeyword(searchKeyword.trim());\n    }, debounceMs);\n\n    return () => {\n      window.clearTimeout(timer);\n    };\n  }, [debounceMs, isAsyncSearchEnabled, searchKeyword]);\n\n  const fetchOptions = async (nextQuery: Record<string, unknown>) => {\n    const response = await fetch(\n      createQuerySelectorRequestUrl(apiBaseUrl, apiUrl, buildRequestQuery(nextQuery), accessToken),\n    );\n    const data = (await response.json()) as Record<string, unknown>;\n\n    if (!response.ok || data?.resultCode === 'STATUS_0') {\n      throw new Error(`${data?.resultMessage ?? 'Failed to fetch selector options'}`);\n    }\n\n    const responseList = getQuerySelectorResponseList(data, responseListKey);\n    const filteredItems = isFunction(filterOptions) ? filterOptions(responseList) : responseList;\n\n    return mapQuerySelectorOptions(\n      filteredItems,\n      valueKey,\n      labelKey,\n      valueResolver,\n      labelResolver,\n    );\n  };\n\n  const baseOptionsQuery = useQuery({\n    queryKey: ['owp', 'query-selector', apiUrl, query, responseListKey, valueKey, labelKey],\n    enabled: Boolean(apiBaseUrl) && !isAsyncSearchEnabled,\n    queryFn: () => fetchOptions(query),\n  });\n  const searchOptionsQuery = useQuery({\n    queryKey: [\n      'owp',\n      'query-selector',\n      'search',\n      apiUrl,\n      query,\n      debouncedSearchKeyword,\n      responseListKey,\n      valueKey,\n      labelKey,\n    ],\n    enabled: Boolean(apiBaseUrl) && isAsyncSearchEnabled && shouldFetchSearchOptions,\n    queryFn: () =>\n      fetchOptions({\n        ...query,\n        ...(resolvedAsyncSearch?.buildKeywordQuery(debouncedSearchKeyword) ?? {}),\n      }),\n  });\n  const allOptionsQuery = useQuery({\n    queryKey: ['owp', 'query-selector', 'all', apiUrl, query, responseListKey, valueKey, labelKey],\n    enabled:\n      Boolean(apiBaseUrl) &&\n      isAsyncSearchEnabled &&\n      (Boolean(selectedIds.length) || (Boolean(multiple) && !resolvedDisableAllValueItem)),\n    queryFn: () =>\n      fetchOptions({\n        ...query,\n        ...(resolvedAsyncSearch?.buildAllQuery?.() ?? {}),\n      }),\n  });\n  const selectedOptionsQuery = useQuery({\n    queryKey: [\n      'owp',\n      'query-selector',\n      'selected',\n      apiUrl,\n      selectedIds,\n      responseListKey,\n      valueKey,\n      labelKey,\n    ],\n    enabled: Boolean(apiBaseUrl) && isAsyncSearchEnabled && Boolean(selectedIds.length) && Boolean(resolvedAsyncSearch?.buildSelectedQuery),\n    queryFn: () =>\n      fetchOptions({\n        ...query,\n        ...(resolvedAsyncSearch?.buildSelectedQuery?.(selectedIds) ?? {}),\n      }),\n  });\n\n  const currentOptions = useMemo(() => {\n    if (isAsyncSearchEnabled) {\n      return shouldFetchSearchOptions ? (searchOptionsQuery.data ?? []) : [];\n    }\n\n    return baseOptionsQuery.data ?? [];\n  }, [\n    baseOptionsQuery.data,\n    isAsyncSearchEnabled,\n    searchOptionsQuery.data,\n    shouldFetchSearchOptions,\n  ]);\n  const resolvedAllOptions = useMemo(\n    () =>\n      mergeSelectorOptions(\n        currentOptions,\n        allOptionsQuery.data,\n        selectedOptionsQuery.data,\n        Object.values(cachedOptions),\n      ),\n    [allOptionsQuery.data, cachedOptions, currentOptions, selectedOptionsQuery.data],\n  );\n  const optionMap = useMemo(\n    () => {\n      const nextOptionMap: Record<string, OwpSelectorBaseOption<Record<string, unknown>>> = {};\n\n      resolvedAllOptions.forEach((option) => {\n        nextOptionMap[option.value] = option;\n      });\n\n      return nextOptionMap;\n    },\n    [resolvedAllOptions],\n  );\n  const isLoading =\n    baseOptionsQuery.isLoading ||\n    searchOptionsQuery.isLoading ||\n    allOptionsQuery.isLoading ||\n    selectedOptionsQuery.isLoading;\n\n  useEffect(() => {\n    if (!resolvedAllOptions.length) {\n      return;\n    }\n\n    setCachedOptions((previousCachedOptions) => {\n      const nextCachedOptions = { ...previousCachedOptions };\n      let hasChanged = false;\n\n      resolvedAllOptions.forEach((option) => {\n        if (nextCachedOptions[option.value] === option) {\n          return;\n        }\n\n        nextCachedOptions[option.value] = option;\n        hasChanged = true;\n      });\n\n      return hasChanged ? nextCachedOptions : previousCachedOptions;\n    });\n  }, [resolvedAllOptions]);\n\n  useEffect(() => {\n    if (!isAsyncSearchEnabled) {\n      return;\n    }\n\n    if (multiple) {\n      setAutocompleteInputValue('');\n      return;\n    }\n\n    const selectedId = selectedIds[0];\n\n    if (!selectedId) {\n      setAutocompleteInputValue('');\n      return;\n    }\n\n    setAutocompleteInputValue(getQuerySelectorOptionLabelText(optionMap[selectedId]?.label ?? ''));\n  }, [isAsyncSearchEnabled, multiple, optionMap, selectedIds]);\n\n  return (\n    <OwpSelectorBase\n      {...selectorBaseProps}\n      allOptions={resolvedAllOptions}\n      allValueMode=\"joined\"\n      autocompleteInputValue={isAsyncSearchEnabled ? autocompleteInputValue : undefined}\n      defaultValue={defaultValue}\n      disableAllValueItem={resolvedDisableAllValueItem}\n      disableClientFilter={isAsyncSearchEnabled}\n      loading={isLoading}\n      multiple={multiple}\n      onAutocompleteInputChange={\n        isAsyncSearchEnabled\n          ? (nextInputValue, reason) => {\n              if (reason === 'reset') {\n                return;\n              }\n\n              if (multiple && reason !== 'input') {\n                return;\n              }\n\n              setAutocompleteInputValue(nextInputValue);\n              setSearchKeyword(nextInputValue);\n            }\n          : undefined\n      }\n      onChange={(event) => {\n        setCurrentSelectionValue(event.target.value);\n\n        if (isAsyncSearchEnabled) {\n          const nextSelectedIds = splitSelectorValue(event.target.value);\n\n          if (multiple) {\n            setAutocompleteInputValue('');\n            setSearchKeyword('');\n            setDebouncedSearchKeyword('');\n          } else {\n            const nextSelectedId = nextSelectedIds[0];\n            const nextLabel = nextSelectedId\n              ? getQuerySelectorOptionLabelText(optionMap[nextSelectedId]?.label ?? '')\n              : '';\n\n            setAutocompleteInputValue(nextLabel);\n            setSearchKeyword('');\n            setDebouncedSearchKeyword('');\n          }\n        }\n\n        onChange?.(event);\n      }}\n      options={currentOptions}\n      selectorType={selectorType}\n      textFieldProps={{\n        ...textFieldProps,\n        onBlur: (event) => {\n          if (isAsyncSearchEnabled) {\n            if (multiple) {\n              setAutocompleteInputValue('');\n            } else {\n              const selectedId = splitSelectorValue(currentSelectionValue)[0];\n\n              setAutocompleteInputValue(\n                selectedId ? getQuerySelectorOptionLabelText(optionMap[selectedId]?.label ?? '') : '',\n              );\n            }\n\n            setSearchKeyword('');\n            setDebouncedSearchKeyword('');\n          }\n\n          textFieldProps?.onBlur?.(event);\n        },\n      }}\n      value={value}\n    />\n  );\n};\n"],"names":["DEFAULT_RESPONSE_LIST_KEY","getQuerySelectorOptionLabelText","__name","label","defaultBuildRequestQuery","query","createJsonString","createQuerySelectorRequestUrl","apiBaseUrl","apiUrl","requestQuery","accessToken","baseUrl","requestUrl","key","value","getApiLanguageCode","getQuerySelectorResponseList","data","responseListKey","responseList","isArray","resolveQuerySelectorValue","item","valueKey","valueResolver","resolveQuerySelectorLabel","labelKey","labelResolver","mapQuerySelectorOptions","items","option","OwpQuerySelector","asyncSearch","buildRequestQuery","disableAllValueItem","filterOptions","multiple","selectorType","onChange","defaultValue","textFieldProps","selectorBaseProps","env","useOwpAppContext","currentUser","useGetCurrentUser","STORAGE_ACCESS_TOKEN_KEY","resolvedAsyncSearch","isAsyncSearchEnabled","resolvedDisableAllValueItem","minLength","debounceMs","currentSelectionValue","setCurrentSelectionValue","useState","autocompleteInputValue","setAutocompleteInputValue","searchKeyword","setSearchKeyword","debouncedSearchKeyword","setDebouncedSearchKeyword","cachedOptions","setCachedOptions","selectedIds","useMemo","splitSelectorValue","shouldFetchSearchOptions","useEffect","timer","fetchOptions","nextQuery","response","filteredItems","isFunction","baseOptionsQuery","useQuery","searchOptionsQuery","allOptionsQuery","_a","selectedOptionsQuery","currentOptions","resolvedAllOptions","mergeSelectorOptions","optionMap","nextOptionMap","isLoading","previousCachedOptions","nextCachedOptions","hasChanged","selectedId","jsx","OwpSelectorBase","nextInputValue","reason","event","nextSelectedIds","nextSelectedId","nextLabel","_b"],"mappings":";;;;;;;;;;;;;;AAaA,MAAMA,KAA4B,cAM5BC,IAAkC,gBAAAC,EAAA,CAACC,MAChC,OAAOA,KAAU,YAAY,OAAOA,KAAU,WAAW,GAAGA,CAAK,KAAK,IADvC,oCAQlCC,KAA2B,gBAAAF,EAAA,CAACG,OACzB;AAAA,EACL,UAAUC,GAAiBD,CAAK;AAAA,IAFH,6BAa3BE,KAAgC,gBAAAL,EAAA,CACpCM,GACAC,GACAC,GACAC,MACG;AACH,QAAMC,IAAU,IAAI,IAAIJ,EAAW,SAAS,GAAG,IAAIA,IAAa,GAAGA,CAAU,GAAG,GAC1EK,IAAa,IAAI,IAAIJ,EAAO,WAAW,GAAG,IAAIA,EAAO,MAAM,CAAC,IAAIA,GAAQG,CAAO;AAErF,gBAAO,QAAQF,CAAY,EAAE,QAAQ,CAAC,CAACI,GAAKC,CAAK,MAAM;AACrD,IAAIA,KAAS,QAIbF,EAAW,aAAa,IAAIC,GAAK,OAAOC,KAAU,WAAWA,IAAQ,KAAK,UAAUA,CAAK,CAAC;AAAA,EAC5F,CAAC,GAEGJ,KACFE,EAAW,aAAa,IAAI,SAASF,CAAW,GAGlDE,EAAW,aAAa,IAAI,cAAcG,GAAA,CAAoB,GAEvDH,EAAW,SAAA;AACpB,GAxBsC,kCA+BhCI,KAA+B,gBAAAf,EAAA,CAACgB,GAAeC,MAA4B;AAC/E,MAAI,CAACD,KAAQ,OAAOA,KAAS;AAC3B,WAAO,CAAA;AAGT,QAAME,IAAgBF,EAAiCC,CAAe;AAEtE,SAAOE,GAAQD,CAAY,IAAKA,IAA6C,CAAA;AAC/E,GARqC,iCAgB/BE,KAA4B,gBAAApB,EAAA,CAChCqB,GACAC,GACAC,MAIO,IAFOA,IAAgBA,EAAcF,CAAI,IAAI,IAAGA,KAAA,gBAAAA,EAAOC,KAAY,QAAO,EAAE,OAEhE,EAAE,GAAG,KAAA,GAPQ,8BAgB5BE,KAA4B,gBAAAxB,EAAA,CAChCqB,GACAI,GACAC,MAIO,IAFOA,IAAgBA,EAAcL,CAAI,IAAI,IAAGA,KAAA,gBAAAA,EAAOI,KAAY,QAAO,EAAE,OAEhE,EAAE,GAAG,KAAA,GAPQ,8BAkB5BE,KAA0B,gBAAA3B,EAAA,CAC9B4B,GACAN,GACAG,GACAF,GACAG,MAEOE,EACJ,IAAI,CAACP,MAAS;AACb,QAAMR,IAAQO,GAA0BC,GAAMC,GAAUC,CAAa;AAErE,SAAKV,IAIE;AAAA,IACL,OAAOW,GAA0BH,GAAMI,GAAUC,CAAa;AAAA,IAC9D,KAAKL;AAAA,IACL,OAAAR;AAAA,EAAA,IANO;AAQX,CAAC,EACA,OAAO,CAACgB,MAAqEA,KAAU,IAAI,GArBhE,4BA4BnBC,KAAmB,gBAAA9B,EAAA,CAAC;AAAA,EAC/B,QAAAO;AAAA,EACA,aAAAwB;AAAA,EACA,mBAAAC,IAAoB9B;AAAA,EACpB,qBAAA+B;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAhC;AAAA,EACA,iBAAAc,IAAkBnB;AAAA,EAClB,cAAAsC,IAAe;AAAA,EACf,OAAAvB;AAAA,EACA,UAAAS;AAAA,EACA,eAAAC;AAAA,EACA,UAAAE;AAAA,EACA,eAAAC;AAAA,EACA,UAAAW;AAAA,EACA,cAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,GAAGC;AACL,MAA6B;AAC3B,QAAM,EAAE,KAAAC,EAAA,IAAQC,GAAA,GACVC,IAAcC,GAAA,GACdtC,IAAa,IAAGmC,KAAA,gBAAAA,EAAK,eAAc,EAAE,GAAG,KAAA,GACxChC,KAAc,IAAGkC,KAAA,gBAAAA,EAAa,UAAS,aAAa,QAAQE,EAAwB,KAAK,EAAE,GAAG,KAAA,GAC9FC,IAAsBV,MAAiB,iBAAiBL,IAAc,QACtEgB,IAAuBD,KAAuB,MAC9CE,IAA8BD,IAAuB,KAAOd,GAC5DgB,MAAYH,KAAA,gBAAAA,EAAqB,cAAa,GAC9CI,KAAaJ,KAAA,gBAAAA,EAAqB,eAAc,KAChD,CAACK,GAAuBC,CAAwB,IAAIC,EAASxC,KAASyB,KAAgB,EAAE,GACxF,CAACgB,IAAwBC,CAAyB,IAAIF,EAAS,EAAE,GACjE,CAACG,GAAeC,CAAgB,IAAIJ,EAAS,EAAE,GAC/C,CAACK,GAAwBC,CAAyB,IAAIN,EAAS,EAAE,GACjE,CAACO,GAAeC,EAAgB,IAAIR,EAAyE,CAAA,CAAE,GAC/GS,IAAcC,EAAQ,MAAMC,EAAmBb,CAAqB,GAAG,CAACA,CAAqB,CAAC,GAC9Fc,IAA2BlB,KAAwBW,EAAuB,KAAA,EAAO,UAAUT;AAEjG,EAAAiB,EAAU,MAAM;AACd,IAAIrD,MAAU,UAIduC,EAAyBvC,CAAK;AAAA,EAChC,GAAG,CAACA,CAAK,CAAC,GAEVqD,EAAU,MAAM;AACd,IAAIrD,MAAU,UAIduC,EAAyBd,KAAgB,EAAE;AAAA,EAC7C,GAAG,CAACA,GAAczB,CAAK,CAAC,GAExBqD,EAAU,MAAM;AACd,QAAI,CAACnB;AACH;AAGF,UAAMoB,IAAQ,OAAO,WAAW,MAAM;AACpC,MAAAR,EAA0BH,EAAc,MAAM;AAAA,IAChD,GAAGN,CAAU;AAEb,WAAO,MAAM;AACX,aAAO,aAAaiB,CAAK;AAAA,IAC3B;AAAA,EACF,GAAG,CAACjB,GAAYH,GAAsBS,CAAa,CAAC;AAEpD,QAAMY,IAAe,gBAAApE,EAAA,OAAOqE,MAAuC;AACjE,UAAMC,IAAW,MAAM;AAAA,MACrBjE,GAA8BC,GAAYC,GAAQyB,EAAkBqC,CAAS,GAAG5D,EAAW;AAAA,IAAA,GAEvFO,IAAQ,MAAMsD,EAAS,KAAA;AAE7B,QAAI,CAACA,EAAS,OAAMtD,KAAA,gBAAAA,EAAM,gBAAe;AACvC,YAAM,IAAI,MAAM,IAAGA,KAAA,gBAAAA,EAAM,kBAAiB,kCAAkC,EAAE;AAGhF,UAAME,IAAeH,GAA6BC,GAAMC,CAAe,GACjEsD,IAAgBC,GAAWtC,CAAa,IAAIA,EAAchB,CAAY,IAAIA;AAEhF,WAAOS;AAAA,MACL4C;AAAA,MACAjD;AAAA,MACAG;AAAA,MACAF;AAAA,MACAG;AAAA,IAAA;AAAA,EAEJ,GApBqB,iBAsBf+C,IAAmBC,EAAS;AAAA,IAChC,UAAU,CAAC,OAAO,kBAAkBnE,GAAQJ,GAAOc,GAAiBK,GAAUG,CAAQ;AAAA,IACtF,SAAS,EAAQnB,KAAe,CAACyC;AAAA,IACjC,SAAS,gBAAA/C,EAAA,MAAMoE,EAAajE,CAAK,GAAxB;AAAA,EAAwB,CAClC,GACKwE,IAAqBD,EAAS;AAAA,IAClC,UAAU;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACAnE;AAAA,MACAJ;AAAA,MACAuD;AAAA,MACAzC;AAAA,MACAK;AAAA,MACAG;AAAA,IAAA;AAAA,IAEF,SAAS,EAAQnB,KAAeyC,KAAwBkB;AAAA,IACxD,SAAS,gBAAAjE,EAAA,MACPoE,EAAa;AAAA,MACX,GAAGjE;AAAA,MACH,IAAI2C,KAAA,gBAAAA,EAAqB,kBAAkBY,OAA2B,CAAA;AAAA,IAAC,CACxE,GAJM;AAAA,EAIN,CACJ,GACKkB,IAAkBF,EAAS;AAAA,IAC/B,UAAU,CAAC,OAAO,kBAAkB,OAAOnE,GAAQJ,GAAOc,GAAiBK,GAAUG,CAAQ;AAAA,IAC7F,SACE,EAAQnB,KACRyC,MACC,EAAQe,EAAY,UAAY,EAAQ3B,KAAa,CAACa;AAAA,IACzD,SAAS,gBAAAhD,EAAA,MAAA;;AACP,aAAAoE,EAAa;AAAA,QACX,GAAGjE;AAAA,QACH,KAAI0E,IAAA/B,KAAA,gBAAAA,EAAqB,kBAArB,gBAAA+B,EAAA,KAAA/B,OAA0C,CAAA;AAAA,MAAC,CAChD;AAAA,OAJM;AAAA,EAIN,CACJ,GACKgC,IAAuBJ,EAAS;AAAA,IACpC,UAAU;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACAnE;AAAA,MACAuD;AAAA,MACA7C;AAAA,MACAK;AAAA,MACAG;AAAA,IAAA;AAAA,IAEF,SAAS,EAAQnB,KAAeyC,KAAwB,EAAQe,EAAY,UAAW,GAAQhB,KAAA,QAAAA,EAAqB;AAAA,IACpH,SAAS,gBAAA9C,EAAA,MAAA;;AACP,aAAAoE,EAAa;AAAA,QACX,GAAGjE;AAAA,QACH,KAAI0E,IAAA/B,KAAA,gBAAAA,EAAqB,uBAArB,gBAAA+B,EAAA,KAAA/B,GAA0CgB,OAAgB,CAAA;AAAA,MAAC,CAChE;AAAA,OAJM;AAAA,EAIN,CACJ,GAEKiB,IAAiBhB,EAAQ,MACzBhB,IACKkB,IAA4BU,EAAmB,QAAQ,CAAA,IAAM,CAAA,IAG/DF,EAAiB,QAAQ,CAAA,GAC/B;AAAA,IACDA,EAAiB;AAAA,IACjB1B;AAAA,IACA4B,EAAmB;AAAA,IACnBV;AAAA,EAAA,CACD,GACKe,IAAqBjB;AAAA,IACzB,MACEkB;AAAA,MACEF;AAAA,MACAH,EAAgB;AAAA,MAChBE,EAAqB;AAAA,MACrB,OAAO,OAAOlB,CAAa;AAAA,IAAA;AAAA,IAE/B,CAACgB,EAAgB,MAAMhB,GAAemB,GAAgBD,EAAqB,IAAI;AAAA,EAAA,GAE3EI,IAAYnB;AAAA,IAChB,MAAM;AACJ,YAAMoB,IAAgF,CAAA;AAEtF,aAAAH,EAAmB,QAAQ,CAACnD,MAAW;AACrC,QAAAsD,EAActD,EAAO,KAAK,IAAIA;AAAA,MAChC,CAAC,GAEMsD;AAAA,IACT;AAAA,IACA,CAACH,CAAkB;AAAA,EAAA,GAEfI,KACJX,EAAiB,aACjBE,EAAmB,aACnBC,EAAgB,aAChBE,EAAqB;AAEvB,SAAAZ,EAAU,MAAM;AACd,IAAKc,EAAmB,UAIxBnB,GAAiB,CAACwB,MAA0B;AAC1C,YAAMC,IAAoB,EAAE,GAAGD,EAAA;AAC/B,UAAIE,IAAa;AAEjB,aAAAP,EAAmB,QAAQ,CAACnD,MAAW;AACrC,QAAIyD,EAAkBzD,EAAO,KAAK,MAAMA,MAIxCyD,EAAkBzD,EAAO,KAAK,IAAIA,GAClC0D,IAAa;AAAA,MACf,CAAC,GAEMA,IAAaD,IAAoBD;AAAA,IAC1C,CAAC;AAAA,EACH,GAAG,CAACL,CAAkB,CAAC,GAEvBd,EAAU,MAAM;;AACd,QAAI,CAACnB;AACH;AAGF,QAAIZ,GAAU;AACZ,MAAAoB,EAA0B,EAAE;AAC5B;AAAA,IACF;AAEA,UAAMiC,IAAa1B,EAAY,CAAC;AAEhC,QAAI,CAAC0B,GAAY;AACf,MAAAjC,EAA0B,EAAE;AAC5B;AAAA,IACF;AAEA,IAAAA,EAA0BxD,IAAgC8E,IAAAK,EAAUM,CAAU,MAApB,gBAAAX,EAAuB,UAAS,EAAE,CAAC;AAAA,EAC/F,GAAG,CAAC9B,GAAsBZ,GAAU+C,GAAWpB,CAAW,CAAC,GAGzD,gBAAA2B;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGlD;AAAA,MACJ,YAAYwC;AAAA,MACZ,cAAa;AAAA,MACb,wBAAwBjC,IAAuBO,KAAyB;AAAA,MACxE,cAAAhB;AAAA,MACA,qBAAqBU;AAAA,MACrB,qBAAqBD;AAAA,MACrB,SAASqC;AAAA,MACT,UAAAjD;AAAA,MACA,2BACEY,IACI,CAAC4C,GAAgBC,MAAW;AAC1B,QAAIA,MAAW,YAIXzD,KAAYyD,MAAW,YAI3BrC,EAA0BoC,CAAc,GACxClC,EAAiBkC,CAAc;AAAA,MACjC,IACA;AAAA,MAEN,UAAU,gBAAA3F,EAAA,CAAC6F,MAAU;;AAGnB,YAFAzC,EAAyByC,EAAM,OAAO,KAAK,GAEvC9C,GAAsB;AACxB,gBAAM+C,IAAkB9B,EAAmB6B,EAAM,OAAO,KAAK;AAE7D,cAAI1D;AACF,YAAAoB,EAA0B,EAAE,GAC5BE,EAAiB,EAAE,GACnBE,EAA0B,EAAE;AAAA,eACvB;AACL,kBAAMoC,IAAiBD,EAAgB,CAAC,GAClCE,IAAYD,IACdhG,IAAgC8E,IAAAK,EAAUa,CAAc,MAAxB,gBAAAlB,EAA2B,UAAS,EAAE,IACtE;AAEJ,YAAAtB,EAA0ByC,CAAS,GACnCvC,EAAiB,EAAE,GACnBE,EAA0B,EAAE;AAAA,UAC9B;AAAA,QACF;AAEA,QAAAtB,KAAA,QAAAA,EAAWwD;AAAA,MACb,GAvBU;AAAA,MAwBV,SAASd;AAAA,MACT,cAAA3C;AAAA,MACA,gBAAgB;AAAA,QACd,GAAGG;AAAA,QACH,QAAQ,gBAAAvC,EAAA,CAAC6F,MAAU;;AACjB,cAAI9C,GAAsB;AACxB,gBAAIZ;AACF,cAAAoB,EAA0B,EAAE;AAAA,iBACvB;AACL,oBAAMiC,IAAaxB,EAAmBb,CAAqB,EAAE,CAAC;AAE9D,cAAAI;AAAA,gBACEiC,IAAazF,IAAgC8E,IAAAK,EAAUM,CAAU,MAApB,gBAAAX,EAAuB,UAAS,EAAE,IAAI;AAAA,cAAA;AAAA,YAEvF;AAEA,YAAApB,EAAiB,EAAE,GACnBE,EAA0B,EAAE;AAAA,UAC9B;AAEA,WAAAsC,IAAA1D,KAAA,gBAAAA,EAAgB,WAAhB,QAAA0D,EAAA,KAAA1D,GAAyBsD;AAAA,QAC3B,GAjBQ;AAAA,MAiBR;AAAA,MAEF,OAAAhF;AAAA,IAAA;AAAA,EAAA;AAGN,GA/SgC;"}

package/dist/components/OwpSearchFilter/OwpSearchFilter.js

@@ -1,44 +1,59 @@
-var f = Object.defineProperty;
-var t = (a, e) => f(a, "name", { value: e, configurable: !0 });
-import { jsx as r, jsxs as c } 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 { useOwpTranslation as u } from "../../hooks/useOwpTranslation.js";
-import x 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/RestartAlt.js";
-import h 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/Search.js";
-import { Button as i, Box as p } from "@mui/material";
-const b = /* @__PURE__ */ t(({
-  title: a,
-  children: e,
-  actions: m,
-  onSubmit: l,
-  onReset: o,
-  skeleton: d = !1
+var w = Object.defineProperty;
+var a = (t, r) => w(t, "name", { value: r, configurable: !0 });
+import { jsx as e, jsxs as n } 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 { useThemeMediaQuery as v } from "../../hooks/useThemeMediaQuery.js";
+import { useOwpTranslation as g } from "../../hooks/useOwpTranslation.js";
+import N 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/RestartAlt.js";
+import y 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/Search.js";
+import { Button as d, Box as p } from "@mui/material";
+import { clsx as k } from "../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
+const C = /* @__PURE__ */ a(({
+  title: t,
+  children: r,
+  actions: s,
+  onSubmit: o,
+  onReset: i,
+  skeleton: u = !1
 }) => {
-  const { t: n } = u();
-  return d ? /* @__PURE__ */ r(p, { sx: { bgcolor: "background.paper" }, className: "w-full p-20 mt-16 rounded-lg shadow-1", children: /* @__PURE__ */ r("div", { className: "min-w-0", children: e }) }) : /* @__PURE__ */ r(
+  const { t: c } = g(), x = v((l) => l.breakpoints.up(1600)), m = t != null && t !== "", f = r != null && r !== "", h = s != null && s !== "";
+  return u ? /* @__PURE__ */ e(p, { sx: { bgcolor: "background.paper" }, className: "w-full p-20 mt-16 rounded-lg shadow-1", children: /* @__PURE__ */ e("div", { className: "min-w-0", children: r }) }) : /* @__PURE__ */ e(
     p,
     {
       component: "form",
       sx: { bgcolor: "background.paper" },
       className: "w-full p-20 mt-16 rounded-lg shadow-1",
-      onSubmit: /* @__PURE__ */ t((s) => {
-        s.preventDefault(), l == null || l();
+      onSubmit: /* @__PURE__ */ a((l) => {
+        l.preventDefault(), o == null || o();
       }, "onSubmit"),
-      onReset: /* @__PURE__ */ t((s) => {
-        s.preventDefault(), o == null || o();
+      onReset: /* @__PURE__ */ a((l) => {
+        l.preventDefault(), i == null || i();
       }, "onReset"),
-      children: /* @__PURE__ */ c("div", { className: "flex gap-12 justify-between items-center", children: [
-        a,
-        /* @__PURE__ */ r("div", { className: "flex flex-wrap gap-12", children: e }),
-        /* @__PURE__ */ c("div", { className: "flex flex-shrink-0 gap-x-12", children: [
-          /* @__PURE__ */ r(i, { type: "submit", variant: "outlined", startIcon: /* @__PURE__ */ r(h, {}), children: n("Button.검색") }),
-          /* @__PURE__ */ r(i, { type: "reset", variant: "outlined", startIcon: /* @__PURE__ */ r(x, {}), children: n("Button.초기화") }),
-          m
-        ] })
+      children: /* @__PURE__ */ n("div", { className: "flex items-start justify-between gap-12", children: [
+        (m || f) && /* @__PURE__ */ n("div", { className: "flex min-w-0 flex-1 flex-col items-start gap-12 text-left md:flex-row md:items-center", children: [
+          m && /* @__PURE__ */ e("div", { className: "shrink-0 whitespace-nowrap", children: t }),
+          f && /* @__PURE__ */ e("div", { className: "flex w-full min-w-0 flex-wrap content-start items-center gap-12 md:w-auto md:flex-1", children: r })
+        ] }),
+        /* @__PURE__ */ n(
+          "div",
+          {
+            className: k(
+              "flex flex-shrink-0 flex-col items-end justify-start gap-y-12",
+              x ? "self-center" : "self-start"
+            ),
+            children: [
+              /* @__PURE__ */ n("div", { className: "flex flex-shrink-0 gap-x-12", children: [
+                /* @__PURE__ */ e(d, { type: "submit", variant: "outlined", startIcon: /* @__PURE__ */ e(y, {}), children: c("Button.검색") }),
+                /* @__PURE__ */ e(d, { type: "reset", variant: "outlined", startIcon: /* @__PURE__ */ e(N, {}), children: c("Button.초기화") })
+              ] }),
+              h && /* @__PURE__ */ e("div", { className: "flex max-w-full flex-wrap justify-end gap-12", children: s })
+            ]
+          }
+        )
       ] })
     }
   );
 }, "OwpSearchFilter");
 export {
-  b as OwpSearchFilter
+  C as OwpSearchFilter
 };
 //# sourceMappingURL=OwpSearchFilter.js.map

package/dist/components/OwpSearchFilter/OwpSearchFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"OwpSearchFilter.js","sources":["../../../src/components/OwpSearchFilter/OwpSearchFilter.tsx"],"sourcesContent":["import { useOwpTranslation } from '@/hooks/useOwpTranslation';\nimport RestartAltIcon from '@mui/icons-material/RestartAlt';\nimport SearchIcon from '@mui/icons-material/Search';\nimport { Box, Button } from '@mui/material';\nimport type { ReactNode } from 'react';\n\ninterface OwpSearchFilterProps {\n  title?: ReactNode | string;\n  children?: ReactNode;\n  actions?: ReactNode;\n  onSubmit?: () => void;\n  onReset?: () => void;\n  skeleton?: boolean;\n}\n\n/**\n * OwpSearchFilter 컴포넌트\n * @param title 제목\n * @param children 하위 콘텐츠\n * @param actions 액션 영역\n * @param onSubmit 제출 핸들러\n * @param onReset 초기화 핸들러\n * @param skeleton 스켈레톤 모드 여부\n */\nconst OwpSearchFilter = ({\n  title,\n  children,\n  actions,\n  onSubmit,\n  onReset,\n  skeleton = false,\n}: OwpSearchFilterProps) => {\n  const { t } = useOwpTranslation();\n\n  if (skeleton) {\n    return (\n      <Box sx={{ bgcolor: 'background.paper' }} className=\"w-full p-20 mt-16 rounded-lg shadow-1\">\n        <div className=\"min-w-0\">{children}</div>\n      </Box>\n    );\n  }\n\n  return (\n    <Box\n      component=\"form\"\n      sx={{ bgcolor: 'background.paper' }}\n      className=\"w-full p-20 mt-16 rounded-lg shadow-1\"\n      onSubmit={(event) => {\n        event.preventDefault();\n        onSubmit?.();\n      }}\n      onReset={(event) => {\n        event.preventDefault();\n        onReset?.();\n      }}\n    >\n        <div className=\"flex gap-12 justify-between items-center\">\n        {title}\n        <div className=\"flex flex-wrap gap-12\">{children}</div>\n        <div className=\"flex flex-shrink-0 gap-x-12\">\n          <Button type=\"submit\" variant=\"outlined\" startIcon={<SearchIcon />}>\n            {t('Button.검색')}\n          </Button>\n          <Button type=\"reset\" variant=\"outlined\" startIcon={<RestartAltIcon />}>\n            {t('Button.초기화')}\n          </Button>\n          {actions}\n        </div>\n      </div>\n    </Box>\n  );\n};\n\nexport { OwpSearchFilter };\n"],"names":["OwpSearchFilter","__name","title","children","actions","onSubmit","onReset","skeleton","t","useOwpTranslation","jsx","Box","event","jsxs","Button","SearchIcon","RestartAltIcon"],"mappings":";;;;;;;AAwBA,MAAMA,IAAkB,gBAAAC,EAAA,CAAC;AAAA,EACvB,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC,IAAW;AACb,MAA4B;AAC1B,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA;AAEd,SAAIF,IAEA,gBAAAG,EAACC,GAAA,EAAI,IAAI,EAAE,SAAS,mBAAA,GAAsB,WAAU,yCAClD,UAAA,gBAAAD,EAAC,OAAA,EAAI,WAAU,WAAW,UAAAP,GAAS,GACrC,IAKF,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,IAAI,EAAE,SAAS,mBAAA;AAAA,MACf,WAAU;AAAA,MACV,UAAU,gBAAAV,EAAA,CAACW,MAAU;AACnB,QAAAA,EAAM,eAAA,GACNP,KAAA,QAAAA;AAAA,MACF,GAHU;AAAA,MAIV,SAAS,gBAAAJ,EAAA,CAACW,MAAU;AAClB,QAAAA,EAAM,eAAA,GACNN,KAAA,QAAAA;AAAA,MACF,GAHS;AAAA,MAKP,UAAA,gBAAAO,EAAC,OAAA,EAAI,WAAU,4CACd,UAAA;AAAA,QAAAX;AAAA,QACD,gBAAAQ,EAAC,OAAA,EAAI,WAAU,yBAAyB,UAAAP,EAAA,CAAS;AAAA,QACjD,gBAAAU,EAAC,OAAA,EAAI,WAAU,+BACb,UAAA;AAAA,UAAA,gBAAAH,EAACI,GAAA,EAAO,MAAK,UAAS,SAAQ,YAAW,WAAW,gBAAAJ,EAACK,GAAA,CAAA,CAAW,GAC7D,UAAAP,EAAE,WAAW,GAChB;AAAA,UACA,gBAAAE,EAACI,GAAA,EAAO,MAAK,SAAQ,SAAQ,YAAW,WAAW,gBAAAJ,EAACM,GAAA,CAAA,CAAe,GAChE,UAAAR,EAAE,YAAY,GACjB;AAAA,UACCJ;AAAA,QAAA,EAAA,CACH;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN,GA/CwB;"}
+{"version":3,"file":"OwpSearchFilter.js","sources":["../../../src/components/OwpSearchFilter/OwpSearchFilter.tsx"],"sourcesContent":["import { useThemeMediaQuery } from '@/hooks/useThemeMediaQuery';\nimport { useOwpTranslation } from '@/hooks/useOwpTranslation';\nimport RestartAltIcon from '@mui/icons-material/RestartAlt';\nimport SearchIcon from '@mui/icons-material/Search';\nimport { Box, Button } from '@mui/material';\nimport clsx from 'clsx';\nimport type { ReactNode } from 'react';\n\ninterface OwpSearchFilterProps {\n  title?: ReactNode | string;\n  children?: ReactNode;\n  actions?: ReactNode;\n  onSubmit?: () => void;\n  onReset?: () => void;\n  skeleton?: boolean;\n}\n\n/**\n * OwpSearchFilter 컴포넌트\n * @param title 제목\n * @param children 하위 콘텐츠\n * @param actions 액션 영역\n * @param onSubmit 제출 핸들러\n * @param onReset 초기화 핸들러\n * @param skeleton 스켈레톤 모드 여부\n */\nconst OwpSearchFilter = ({\n  title,\n  children,\n  actions,\n  onSubmit,\n  onReset,\n  skeleton = false,\n}: OwpSearchFilterProps) => {\n  const { t } = useOwpTranslation();\n  const isWideScreen = useThemeMediaQuery((theme) => theme.breakpoints.up(1600));\n  const hasTitle = title !== undefined && title !== null && title !== '';\n  const hasChildren = children !== undefined && children !== null && children !== '';\n  const hasActions = actions !== undefined && actions !== null && actions !== '';\n\n  if (skeleton) {\n    return (\n      <Box sx={{ bgcolor: 'background.paper' }} className=\"w-full p-20 mt-16 rounded-lg shadow-1\">\n        <div className=\"min-w-0\">{children}</div>\n      </Box>\n    );\n  }\n\n  return (\n    <Box\n      component=\"form\"\n      sx={{ bgcolor: 'background.paper' }}\n      className=\"w-full p-20 mt-16 rounded-lg shadow-1\"\n      onSubmit={(event) => {\n        event.preventDefault();\n        onSubmit?.();\n      }}\n      onReset={(event) => {\n        event.preventDefault();\n        onReset?.();\n      }}\n    >\n      <div className=\"flex items-start justify-between gap-12\">\n        {(hasTitle || hasChildren) && (\n          <div className=\"flex min-w-0 flex-1 flex-col items-start gap-12 text-left md:flex-row md:items-center\">\n            {hasTitle && <div className=\"shrink-0 whitespace-nowrap\">{title}</div>}\n            {hasChildren && (\n              <div className=\"flex w-full min-w-0 flex-wrap content-start items-center gap-12 md:w-auto md:flex-1\">\n                {children}\n              </div>\n            )}\n          </div>\n        )}\n        <div\n          className={clsx(\n            'flex flex-shrink-0 flex-col items-end justify-start gap-y-12',\n            isWideScreen ? 'self-center' : 'self-start',\n          )}\n        >\n          <div className=\"flex flex-shrink-0 gap-x-12\">\n            <Button type=\"submit\" variant=\"outlined\" startIcon={<SearchIcon />}>\n              {t('Button.검색')}\n            </Button>\n            <Button type=\"reset\" variant=\"outlined\" startIcon={<RestartAltIcon />}>\n              {t('Button.초기화')}\n            </Button>\n          </div>\n          {hasActions && <div className=\"flex max-w-full flex-wrap justify-end gap-12\">{actions}</div>}\n        </div>\n      </div>\n    </Box>\n  );\n};\n\nexport { OwpSearchFilter };\n"],"names":["OwpSearchFilter","__name","title","children","actions","onSubmit","onReset","skeleton","t","useOwpTranslation","isWideScreen","useThemeMediaQuery","theme","hasTitle","hasChildren","hasActions","jsx","Box","event","jsxs","clsx","Button","SearchIcon","RestartAltIcon"],"mappings":";;;;;;;;;AA0BA,MAAMA,IAAkB,gBAAAC,EAAA,CAAC;AAAA,EACvB,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC,IAAW;AACb,MAA4B;AAC1B,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACRC,IAAeC,EAAmB,CAACC,MAAUA,EAAM,YAAY,GAAG,IAAI,CAAC,GACvEC,IAAkCX,KAAU,QAAQA,MAAU,IAC9DY,IAAwCX,KAAa,QAAQA,MAAa,IAC1EY,IAAsCX,KAAY,QAAQA,MAAY;AAE5E,SAAIG,IAEA,gBAAAS,EAACC,GAAA,EAAI,IAAI,EAAE,SAAS,mBAAA,GAAsB,WAAU,yCAClD,UAAA,gBAAAD,EAAC,OAAA,EAAI,WAAU,WAAW,UAAAb,GAAS,GACrC,IAKF,gBAAAa;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,IAAI,EAAE,SAAS,mBAAA;AAAA,MACf,WAAU;AAAA,MACV,UAAU,gBAAAhB,EAAA,CAACiB,MAAU;AACnB,QAAAA,EAAM,eAAA,GACNb,KAAA,QAAAA;AAAA,MACF,GAHU;AAAA,MAIV,SAAS,gBAAAJ,EAAA,CAACiB,MAAU;AAClB,QAAAA,EAAM,eAAA,GACNZ,KAAA,QAAAA;AAAA,MACF,GAHS;AAAA,MAKT,UAAA,gBAAAa,EAAC,OAAA,EAAI,WAAU,2CACX,UAAA;AAAA,SAAAN,KAAYC,MACZ,gBAAAK,EAAC,OAAA,EAAI,WAAU,yFACZ,UAAA;AAAA,UAAAN,KAAY,gBAAAG,EAAC,OAAA,EAAI,WAAU,8BAA8B,UAAAd,GAAM;AAAA,UAC/DY,KACC,gBAAAE,EAAC,OAAA,EAAI,WAAU,uFACZ,UAAAb,EAAA,CACH;AAAA,QAAA,GAEJ;AAAA,QAEF,gBAAAgB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC;AAAA,cACT;AAAA,cACAV,IAAe,gBAAgB;AAAA,YAAA;AAAA,YAGjC,UAAA;AAAA,cAAA,gBAAAS,EAAC,OAAA,EAAI,WAAU,+BACb,UAAA;AAAA,gBAAA,gBAAAH,EAACK,GAAA,EAAO,MAAK,UAAS,SAAQ,YAAW,WAAW,gBAAAL,EAACM,GAAA,CAAA,CAAW,GAC7D,UAAAd,EAAE,WAAW,GAChB;AAAA,gBACA,gBAAAQ,EAACK,GAAA,EAAO,MAAK,SAAQ,SAAQ,YAAW,WAAW,gBAAAL,EAACO,GAAA,CAAA,CAAe,GAChE,UAAAf,EAAE,YAAY,EAAA,CACjB;AAAA,cAAA,GACF;AAAA,cACCO,KAAc,gBAAAC,EAAC,OAAA,EAAI,WAAU,gDAAgD,UAAAZ,EAAA,CAAQ;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACxF,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN,GAlEwB;"}

package/dist/components/OwpSection/OwpSection.js

@@ -1,55 +1,116 @@
-var u = Object.defineProperty;
-var x = (s, l) => u(s, "name", { value: l, configurable: !0 });
-import { jsxs as n, jsx as i, Fragment as t } 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 h 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 O } from "@mui/material";
-import { clsx as a } from "../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
-import { OwpPageTitle as b } from "../OwpPageTitle/OwpPageTitle.js";
-const S = /* @__PURE__ */ x(({
-  className: s,
+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: v,
-  headerProps: c,
-  usePageTitle: o,
-  actions: m,
-  leftSlot: e,
-  centerSlot: d,
-  children: N,
-  iconSize: f
+  disableTitleIcon: o,
+  headerProps: s,
+  usePageTitle: x,
+  actions: f,
+  leftSlot: a,
+  centerSlot: i,
+  children: t,
+  iconSize: d
 }) => {
-  const r = l != null && l !== "", w = o ? !!(r || m || e || d) : !!(l || m);
-  return /* @__PURE__ */ n("div", { className: a("OwpSection-root flex h-full w-full flex-col", s), children: [
-    w && (o ? /* @__PURE__ */ n("div", { className: "OwpSection-header", children: [
-      /* @__PURE__ */ i("div", { ...c, className: a("w-full", c == null ? void 0 : c.className), children: /* @__PURE__ */ i(
-        b,
+  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: l,
-          leftSlot: e,
-          centerSlot: d,
-          actions: m
+          leftSlot: a,
+          centerSlot: i,
+          actions: f
         }
       ) }),
-      /* @__PURE__ */ i(O, { className: "my-12" })
-    ] }) : /* @__PURE__ */ n("div", { className: "OwpSection-header mb-12 flex min-h-36 w-full items-center justify-between", children: [
-      /* @__PURE__ */ n("div", { ...c, className: a("flex items-center gap-8", c == null ? void 0 : c.className), children: [
-        l && /* @__PURE__ */ n(t, { children: [
-          !v && /* @__PURE__ */ i(
-            h,
+      /* @__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__ */ i("h6", { className: "text-2xl font-medium", children: l })
-        ] }),
-        e && /* @__PURE__ */ i("div", { children: e })
-      ] }),
-      m && /* @__PURE__ */ i("div", { className: "space-x-8", children: m })
-    ] })),
-    /* @__PURE__ */ i("div", { className: "OwpSection-body flex min-h-0 flex-1 flex-col", children: N })
+          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 {
-  S 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={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 flex min-h-36 w-full items-center justify-between\">\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      <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","shouldRenderHeader","clsx","jsxs","jsx","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,IAC9DU,IAAqBP,IACvB,GAAQM,KAAYL,KAAWC,KAAYC,KAC3C,GAAQN,KAASI;AAErB,2BACG,OAAA,EAAI,WAAWO,EAAK,+CAA+CZ,CAAS,GAC1E,UAAA;AAAA,IAAAW,MACEP,IACC,gBAAAS,EAAC,OAAA,EAAI,WAAU,qBACb,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAA,EAAK,GAAGX,GAAa,WAAWS,EAAK,UAAUT,KAAA,gBAAAA,EAAa,SAAS,GACpE,UAAA,gBAAAW;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,OAAAd;AAAA,UACA,UAAAK;AAAA,UACA,YAAAC;AAAA,UACA,SAAAF;AAAA,QAAA;AAAA,MAAA,GAEJ;AAAA,MACA,gBAAAS,EAACE,GAAA,EAAQ,WAAU,QAAA,CAAQ;AAAA,IAAA,EAAA,CAC7B,IAEA,gBAAAH,EAAC,OAAA,EAAI,WAAU,6EACb,UAAA;AAAA,MAAA,gBAAAA,EAAC,OAAA,EAAK,GAAGV,GAAa,WAAWS,EAAK,2BAA2BT,KAAA,gBAAAA,EAAa,SAAS,GACpF,UAAA;AAAA,QAAAF,KACC,gBAAAY,EAAAI,GAAA,EACG,UAAA;AAAA,UAAA,CAACf,KACA,gBAAAY;AAAA,YAACI;AAAA,YAAA;AAAA,cACC,UAAUT;AAAA,cACV,IAAI,EAAE,UAAUA,IAAW,SAAY,IAAI,OAAO,iBAAA;AAAA,YAAiB;AAAA,UAAA;AAAA,UAGvE,gBAAAK,EAAC,MAAA,EAAG,WAAU,wBAAwB,UAAAb,EAAA,CAAM;AAAA,QAAA,GAC9C;AAAA,QAEDK,KAAY,gBAAAQ,EAAC,OAAA,EAAK,UAAAR,EAAA,CAAS;AAAA,MAAA,GAC9B;AAAA,MACCD,KAAW,gBAAAS,EAAC,OAAA,EAAI,WAAU,aAAa,UAAAT,EAAA,CAAQ;AAAA,IAAA,EAAA,CAClD;AAAA,IAEJ,gBAAAS,EAAC,OAAA,EAAI,WAAU,gDAAgD,UAAAN,EAAA,CAAS;AAAA,EAAA,GAC1E;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":"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"}