@owp/core 2.2.5 → 2.3.0

package/dist/components/OwpTable/OwpTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"OwpTable.js","sources":["../../../src/components/OwpTable/OwpTable.tsx"],"sourcesContent":["import { Divider, styled, Typography, type SxProps, type Theme } from '@mui/material';\nimport clsx from 'clsx';\nimport GlobalStyles from '@mui/material/GlobalStyles';\nimport Paper from '@mui/material/Paper';\nimport Table, { type TableProps } from '@mui/material/Table';\nimport TableBody from '@mui/material/TableBody';\nimport TableCell from '@mui/material/TableCell';\nimport TableContainer, { type TableContainerProps } from '@mui/material/TableContainer';\nimport TableHead from '@mui/material/TableHead';\nimport TableRow from '@mui/material/TableRow';\nimport { isArray, isEmpty, isNumber } from 'es-toolkit/compat';\nimport { type ReactNode, useMemo } from 'react';\n\ntype OwpTableCellValue = string | number;\ntype OwpTableHeaderRow = Record<string, OwpTableCellValue>;\ntype OwpTableRowData = Record<string, unknown>;\n\nconst getTableColumnKeys = (row?: Record<string, unknown>) => {\n  if (!row) {\n    return [];\n  }\n\n  return Object.keys(row).filter((keyName) => !keyName.includes('Span'));\n};\n\nconst getTableCellSx = (row: Record<string, unknown>, keyName: string) => {\n  return (row[`${keyName}Sx`] as SxProps<Theme>) ?? {};\n};\n\nconst getTableCellSpan = (\n  row: Record<string, unknown>,\n  keyName: string,\n  spanType: 'ColSpan' | 'RowSpan',\n) => {\n  return (row[`${keyName}${spanType}`] as number | undefined) ?? undefined;\n};\n\nconst mergeSx = (...styles: Array<SxProps<Theme> | undefined | false>): SxProps<Theme> =>\n  styles.reduce<Array<Exclude<SxProps<Theme>, readonly unknown[]>>>((acc, style) => {\n    if (!style) {\n      return acc;\n    }\n\n    return [...acc, ...(isArray(style) ? style : [style])];\n  }, []) as SxProps<Theme>;\n\nconst treeGridContainerSx = {\n  border: 0,\n  borderRadius: 0,\n  overflow: 'visible',\n} as const;\n\nconst treeGridFontFaceStyles = {\n  '@font-face': {\n    fontFamily: 'RobotoLight',\n    fontStyle: 'normal',\n    fontWeight: 'normal',\n    src: \"url('/assets/vendors/Grid/Styles/Roboto-Light.ttf') format('truetype')\",\n  },\n} as const;\n\nconst treeGridFontSx = {\n  fontFamily: 'RobotoLight, sans-serif',\n  fontSize: '14px',\n  fontWeight: 'normal',\n  lineHeight: '16px',\n} as const;\n\ninterface StyledTableProps extends TableProps {\n  canBodyFullHeight?: boolean;\n  canUseTreeGridStyle?: boolean;\n  containerProps?: TableContainerProps;\n  footerSlot?: ReactNode;\n  tableLayout?: 'auto' | 'fixed';\n  title?: string;\n  children: ReactNode;\n}\n\ntype StyledTableInnerProps = Pick<StyledTableProps, 'canBodyFullHeight' | 'canUseTreeGridStyle'>;\n\n/**\n * 총 row 수 표시 영역\n * @param totalCount 전체 row 수\n */\nexport function OwpTableTotalCount({ totalCount }: { totalCount?: number }) {\n  return (\n    <>\n      <Divider />\n      <Typography className=\"h-[30px] w-full pr-12 my-8\" align=\"right\">\n        전체: {isNumber(totalCount) ? totalCount.toLocaleString() : 0} 건\n      </Typography>\n    </>\n  );\n}\n\n/**\n * StyledTable 스타일 컴포넌트\n * @param canBodyFullHeight body full height 사용 여부\n * @param canUseTreeGridStyle TreeGrid 스타일 사용 여부\n * @param children 하위 콘텐츠\n * @param containerProps containerProps props\n * @param footerSlot footer 영역\n * @param tableLayout tableLayout 값\n */\nexport const StyledTable = ({\n  canBodyFullHeight,\n  canUseTreeGridStyle,\n  children,\n  className,\n  containerProps,\n  footerSlot,\n  tableLayout,\n  ...tableProps\n}: StyledTableProps) => {\n  return (\n    <>\n      {canUseTreeGridStyle && <GlobalStyles styles={treeGridFontFaceStyles} />}\n      <TableContainer\n        component={Paper}\n        variant=\"outlined\"\n        {...containerProps}\n        sx={mergeSx(\n          canUseTreeGridStyle && treeGridContainerSx,\n          canBodyFullHeight && { height: '100%' },\n          containerProps?.sx,\n        )}\n      >\n        <StyledTableInner\n          {...tableProps}\n          canBodyFullHeight={canBodyFullHeight}\n          canUseTreeGridStyle={canUseTreeGridStyle}\n          className={clsx(\n            canBodyFullHeight && 'h-full',\n            tableLayout === 'fixed' ? 'table-fixed' : tableLayout === 'auto' ? 'table-auto' : '',\n            className,\n          )}\n        >\n          {children}\n        </StyledTableInner>\n        {footerSlot}\n      </TableContainer>\n    </>\n  );\n};\n\nconst StyledTableInner = styled(Table, {\n  shouldForwardProp: (prop) => prop !== 'canBodyFullHeight' && prop !== 'canUseTreeGridStyle',\n})<StyledTableInnerProps>(({ theme, canBodyFullHeight, canUseTreeGridStyle }) => ({\n  ...(canBodyFullHeight && {\n    height: '100%',\n  }),\n  ...(canBodyFullHeight && {\n    '& .MuiTableBody-root': {\n      height: '100%',\n    },\n    '& .MuiTableBody-root > .MuiTableRow-root': {\n      height: '100%',\n    },\n  }),\n  '& .MuiTableCell-root': canUseTreeGridStyle\n    ? {\n        boxSizing: 'border-box',\n        ...treeGridFontSx,\n        overflow: 'hidden',\n        textOverflow: 'ellipsis',\n        verticalAlign: 'middle',\n        whiteSpace: 'nowrap',\n      }\n    : {\n        fontSize: '1.7rem',\n        padding: '7px 10px',\n        borderLeft: `1px solid ${theme.palette.divider}`,\n        borderRight: `1px solid ${theme.palette.divider}`,\n        '&:first-child': {\n          borderLeft: 'none',\n        },\n        '&:last-child': {\n          borderRight: 'none',\n        },\n      },\n  '& th': canUseTreeGridStyle\n    ? {\n        ...treeGridFontSx,\n        backgroundColor: '#586980',\n        borderTop: '1px solid #6F7F94',\n        borderBottom: '1px solid #6F7F94',\n        borderLeft: 0,\n        borderRight: '1px solid #6F7F94',\n        color: 'white',\n        height: 33,\n        minHeight: 33,\n        padding: '7px 2px 6px 10px',\n        '&:first-of-type': {\n          borderLeft: '1px solid #6F7F94',\n        },\n      }\n    : {\n        backgroundColor: theme.palette.grey[200],\n        fontWeight: 600,\n      },\n  '& td': canUseTreeGridStyle\n    ? {\n        borderBottom: '1px solid #CDD8E4',\n        borderLeft: 0,\n        borderRight: '1px solid #CDD8E4',\n        color: '#111112',\n        padding: '7px 10px 6px',\n        '&:first-of-type': {\n          borderLeft: '1px solid #CDD8E4',\n        },\n      }\n    : {},\n  ...(canUseTreeGridStyle && {\n    '& tbody > tr:first-of-type > th:first-of-type': {\n      borderTopLeftRadius: 'inherit',\n    },\n    '& tbody > tr:first-of-type > td:last-of-type': {\n      borderTopRightRadius: 'inherit',\n    },\n  }),\n}));\n\nexport const StyledTableRow = styled(TableRow)`\n  /* &:last-child th,\n  &:last-child td {\n    border-bottom: 0;\n  } */\n`;\n\ninterface OwpTableProps<T> extends Omit<StyledTableProps, 'children'> {\n  canTotalCountRow?: boolean;\n  headers: OwpTableHeaderRow | OwpTableHeaderRow[];\n  rows: T[];\n  totalCount?: number;\n}\n\n/**\n * OwpTable 컴포넌트\n * @param canTotalCountRow 전체 row 수 표시 여부\n * @param headers headers 값\n * @param rows 행 데이터 목록\n * @param totalCount 전체 row 수\n */\nexport function OwpTable<T>({\n  canTotalCountRow = false,\n  headers,\n  rows,\n  totalCount,\n  ...restTableProps\n}: OwpTableProps<T>) {\n  const resolvedHeaderRows = useMemo(\n    () => (isArray(headers) ? headers : isEmpty(headers) ? [] : [headers]),\n    [headers],\n  );\n  const commonKeyListData = useMemo(\n    () => getTableColumnKeys(isArray(headers) ? headers[0] : headers),\n    [headers],\n  );\n\n  return (\n    <StyledTable\n      {...restTableProps}\n      footerSlot={\n        canTotalCountRow ? (\n          <OwpTableTotalCount totalCount={typeof totalCount === 'undefined' ? rows.length : totalCount} />\n        ) : undefined\n      }\n      className={clsx(restTableProps.tableLayout && 'w-full', restTableProps.className)}\n    >\n      <TableHead>\n        {resolvedHeaderRows.map((headerData, index) => (\n          <StyledTableRow key={`table-header-${index}`}>\n            {getTableColumnKeys(headerData).map((keyName) => (\n              <TableCell\n                key={`table-header-${index}-${keyName}`}\n                className=\"whitespace-pre-wrap\"\n                sx={getTableCellSx(headerData, keyName)}\n                colSpan={getTableCellSpan(headerData, keyName, 'ColSpan')}\n                rowSpan={getTableCellSpan(headerData, keyName, 'RowSpan')}\n                align=\"center\"\n              >\n                {headerData[keyName]}\n              </TableCell>\n            ))}\n          </StyledTableRow>\n        ))}\n      </TableHead>\n      <TableBody>\n        {rows.map((row, index) => {\n          const currentRow = row as OwpTableRowData;\n\n          return (\n            <StyledTableRow key={`table-row-${index}`}>\n              {commonKeyListData.map((keyName) => (\n                <TableCell\n                  key={`table-row-cell-${index}-${keyName}`}\n                  className=\"whitespace-pre-wrap h-64\"\n                  sx={getTableCellSx(currentRow, keyName)}\n                  align=\"center\"\n                >\n                  {currentRow[keyName] as ReactNode}\n                </TableCell>\n              ))}\n            </StyledTableRow>\n          );\n        })}\n      </TableBody>\n    </StyledTable>\n  );\n}\n"],"names":["getTableColumnKeys","__name","row","keyName","getTableCellSx","getTableCellSpan","spanType","mergeSx","styles","acc","style","isArray","treeGridContainerSx","treeGridFontFaceStyles","treeGridFontSx","OwpTableTotalCount","totalCount","jsxs","Fragment","jsx","Divider","Typography","isNumber","StyledTable","canBodyFullHeight","canUseTreeGridStyle","children","className","containerProps","footerSlot","tableLayout","tableProps","GlobalStyles","TableContainer","Paper","StyledTableInner","clsx","styled","Table","prop","theme","StyledTableRow","TableRow","OwpTable","canTotalCountRow","headers","rows","restTableProps","resolvedHeaderRows","useMemo","isEmpty","commonKeyListData","TableHead","headerData","index","TableCell","TableBody","currentRow"],"mappings":"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"}
+{"version":3,"file":"OwpTable.js","sources":["../../../src/components/OwpTable/OwpTable.tsx"],"sourcesContent":["import { Divider, styled, Typography, type SxProps, type Theme } from '@mui/material';\nimport clsx from 'clsx';\nimport GlobalStyles from '@mui/material/GlobalStyles';\nimport Paper from '@mui/material/Paper';\nimport Table, { type TableProps } from '@mui/material/Table';\nimport TableBody from '@mui/material/TableBody';\nimport TableCell from '@mui/material/TableCell';\nimport TableContainer, { type TableContainerProps } from '@mui/material/TableContainer';\nimport TableHead from '@mui/material/TableHead';\nimport TableRow from '@mui/material/TableRow';\nimport { isArray, isEmpty, isNumber } from 'es-toolkit/compat';\nimport { type ReactNode, useMemo } from 'react';\n\ntype OwpTableCellValue = string | number;\ntype OwpTableHeaderRow = Record<string, OwpTableCellValue>;\ntype OwpTableRowData = Record<string, unknown>;\n\nconst getTableColumnKeys = (row?: Record<string, unknown>) => {\n  if (!row) {\n    return [];\n  }\n\n  return Object.keys(row).filter((keyName) => !keyName.includes('Span'));\n};\n\nconst getTableCellSx = (row: Record<string, unknown>, keyName: string) => {\n  return (row[`${keyName}Sx`] as SxProps<Theme>) ?? {};\n};\n\nconst getTableCellSpan = (\n  row: Record<string, unknown>,\n  keyName: string,\n  spanType: 'ColSpan' | 'RowSpan',\n) => {\n  return (row[`${keyName}${spanType}`] as number | undefined) ?? undefined;\n};\n\nconst mergeSx = (...styles: Array<SxProps<Theme> | undefined | false>): SxProps<Theme> =>\n  styles.reduce<Array<Exclude<SxProps<Theme>, readonly unknown[]>>>((acc, style) => {\n    if (!style) {\n      return acc;\n    }\n\n    return [...acc, ...(isArray(style) ? style : [style])];\n  }, []) as SxProps<Theme>;\n\nconst treeGridContainerSx = {\n  border: 0,\n  borderRadius: 0,\n  overflow: 'visible',\n} as const;\n\nconst treeGridFontFaceStyles = {\n  '@font-face': {\n    fontFamily: 'RobotoLight',\n    fontStyle: 'normal',\n    fontWeight: 'normal',\n    src: \"url('/assets/vendors/Grid/Styles/Roboto-Light.ttf') format('truetype')\",\n  },\n} as const;\n\nconst treeGridFontSx = {\n  fontFamily: 'RobotoLight, sans-serif',\n  fontSize: '14px',\n  fontWeight: 'normal',\n  lineHeight: '16px',\n} as const;\n\ninterface StyledTableProps extends TableProps {\n  canBodyFullHeight?: boolean;\n  canUseTreeGridStyle?: boolean;\n  containerProps?: TableContainerProps;\n  footerSlot?: ReactNode;\n  tableLayout?: 'auto' | 'fixed';\n  title?: string;\n  children: ReactNode;\n}\n\ntype StyledTableInnerProps = Pick<StyledTableProps, 'canBodyFullHeight' | 'canUseTreeGridStyle'>;\n\n/**\n * 총 row 수 표시 영역\n * @param totalCount 전체 row 수\n */\nexport function OwpTableTotalCount({ totalCount }: { totalCount?: number }) {\n  return (\n    <>\n      <Divider />\n      <Typography className=\"h-[30px] w-full pr-12 my-8\" align=\"right\">\n        전체: {isNumber(totalCount) ? totalCount.toLocaleString() : 0} 건\n      </Typography>\n    </>\n  );\n}\n\n/**\n * StyledTable 스타일 컴포넌트\n * @param canBodyFullHeight body full height 사용 여부\n * @param canUseTreeGridStyle TreeGrid 스타일 사용 여부\n * @param children 하위 콘텐츠\n * @param containerProps containerProps props\n * @param footerSlot footer 영역\n * @param tableLayout tableLayout 값\n */\nexport const StyledTable = ({\n  canBodyFullHeight,\n  canUseTreeGridStyle,\n  children,\n  className,\n  containerProps,\n  footerSlot,\n  tableLayout,\n  ...tableProps\n}: StyledTableProps) => {\n  return (\n    <>\n      {canUseTreeGridStyle && <GlobalStyles styles={treeGridFontFaceStyles} />}\n      <TableContainer\n        component={Paper}\n        variant=\"outlined\"\n        {...containerProps}\n        sx={mergeSx(\n          canUseTreeGridStyle && treeGridContainerSx,\n          canBodyFullHeight && { height: '100%' },\n          containerProps?.sx,\n        )}\n      >\n        <StyledTableInner\n          {...tableProps}\n          canBodyFullHeight={canBodyFullHeight}\n          canUseTreeGridStyle={canUseTreeGridStyle}\n          className={clsx(\n            canBodyFullHeight && 'h-full',\n            tableLayout === 'fixed' ? 'table-fixed' : tableLayout === 'auto' ? 'table-auto' : '',\n            className,\n          )}\n        >\n          {children}\n        </StyledTableInner>\n        {footerSlot}\n      </TableContainer>\n    </>\n  );\n};\n\nconst StyledTableInner = styled(Table, {\n  shouldForwardProp: (prop) => prop !== 'canBodyFullHeight' && prop !== 'canUseTreeGridStyle',\n})<StyledTableInnerProps>(({ theme, canBodyFullHeight, canUseTreeGridStyle }) => ({\n  ...(canBodyFullHeight && {\n    height: '100%',\n  }),\n  ...(canBodyFullHeight && {\n    '& .MuiTableBody-root': {\n      height: '100%',\n    },\n    '& .MuiTableBody-root > .MuiTableRow-root': {\n      height: '100%',\n    },\n  }),\n  '& .MuiTableCell-root': canUseTreeGridStyle\n    ? {\n        boxSizing: 'border-box',\n        ...treeGridFontSx,\n        overflow: 'hidden',\n        textOverflow: 'ellipsis',\n        verticalAlign: 'middle',\n        whiteSpace: 'nowrap',\n      }\n    : {\n        fontSize: '1.7rem',\n        padding: '7px 10px',\n        borderLeft: 'none',\n        borderRight: 'none',\n      },\n  ...(!canUseTreeGridStyle && {\n    '& .MuiTableRow-root > .MuiTableCell-root + .MuiTableCell-root': {\n      borderLeft: `1px solid ${theme.palette.divider}`,\n    },\n  }),\n  '& th': canUseTreeGridStyle\n    ? {\n        ...treeGridFontSx,\n        backgroundColor: '#586980',\n        borderTop: '1px solid #6F7F94',\n        borderBottom: '1px solid #6F7F94',\n        borderLeft: 0,\n        borderRight: '1px solid #6F7F94',\n        color: 'white',\n        height: 33,\n        minHeight: 33,\n        padding: '7px 2px 6px 10px',\n        '&:first-of-type': {\n          borderLeft: '1px solid #6F7F94',\n        },\n      }\n    : {\n        backgroundColor: theme.palette.grey[200],\n        fontWeight: 600,\n      },\n  '& td': canUseTreeGridStyle\n    ? {\n        borderBottom: '1px solid #CDD8E4',\n        borderLeft: 0,\n        borderRight: '1px solid #CDD8E4',\n        color: '#111112',\n        padding: '7px 10px 6px',\n        '&:first-of-type': {\n          borderLeft: '1px solid #CDD8E4',\n        },\n      }\n    : {},\n  ...(canUseTreeGridStyle && {\n    '& tbody > tr:first-of-type > th:first-of-type': {\n      borderTopLeftRadius: 'inherit',\n    },\n    '& tbody > tr:first-of-type > td:last-of-type': {\n      borderTopRightRadius: 'inherit',\n    },\n  }),\n}));\n\nexport const StyledTableRow = styled(TableRow)`\n  /* &:last-child th,\n  &:last-child td {\n    border-bottom: 0;\n  } */\n`;\n\ninterface OwpTableProps<T> extends Omit<StyledTableProps, 'children'> {\n  canTotalCountRow?: boolean;\n  headers: OwpTableHeaderRow | OwpTableHeaderRow[];\n  rows: T[];\n  totalCount?: number;\n}\n\n/**\n * OwpTable 컴포넌트\n * @param canTotalCountRow 전체 row 수 표시 여부\n * @param headers headers 값\n * @param rows 행 데이터 목록\n * @param totalCount 전체 row 수\n */\nexport function OwpTable<T>({\n  canTotalCountRow = false,\n  headers,\n  rows,\n  totalCount,\n  ...restTableProps\n}: OwpTableProps<T>) {\n  const resolvedHeaderRows = useMemo(\n    () => (isArray(headers) ? headers : isEmpty(headers) ? [] : [headers]),\n    [headers],\n  );\n  const commonKeyListData = useMemo(\n    () => getTableColumnKeys(isArray(headers) ? headers[0] : headers),\n    [headers],\n  );\n\n  return (\n    <StyledTable\n      {...restTableProps}\n      footerSlot={\n        canTotalCountRow ? (\n          <OwpTableTotalCount totalCount={typeof totalCount === 'undefined' ? rows.length : totalCount} />\n        ) : undefined\n      }\n      className={clsx(restTableProps.tableLayout && 'w-full', restTableProps.className)}\n    >\n      <TableHead>\n        {resolvedHeaderRows.map((headerData, index) => (\n          <StyledTableRow key={`table-header-${index}`}>\n            {getTableColumnKeys(headerData).map((keyName) => (\n              <TableCell\n                key={`table-header-${index}-${keyName}`}\n                className=\"whitespace-pre-wrap\"\n                sx={getTableCellSx(headerData, keyName)}\n                colSpan={getTableCellSpan(headerData, keyName, 'ColSpan')}\n                rowSpan={getTableCellSpan(headerData, keyName, 'RowSpan')}\n                align=\"center\"\n              >\n                {headerData[keyName]}\n              </TableCell>\n            ))}\n          </StyledTableRow>\n        ))}\n      </TableHead>\n      <TableBody>\n        {rows.map((row, index) => {\n          const currentRow = row as OwpTableRowData;\n\n          return (\n            <StyledTableRow key={`table-row-${index}`}>\n              {commonKeyListData.map((keyName) => (\n                <TableCell\n                  key={`table-row-cell-${index}-${keyName}`}\n                  className=\"whitespace-pre-wrap h-64\"\n                  sx={getTableCellSx(currentRow, keyName)}\n                  align=\"center\"\n                >\n                  {currentRow[keyName] as ReactNode}\n                </TableCell>\n              ))}\n            </StyledTableRow>\n          );\n        })}\n      </TableBody>\n    </StyledTable>\n  );\n}\n"],"names":["getTableColumnKeys","__name","row","keyName","getTableCellSx","getTableCellSpan","spanType","mergeSx","styles","acc","style","isArray","treeGridContainerSx","treeGridFontFaceStyles","treeGridFontSx","OwpTableTotalCount","totalCount","jsxs","Fragment","jsx","Divider","Typography","isNumber","StyledTable","canBodyFullHeight","canUseTreeGridStyle","children","className","containerProps","footerSlot","tableLayout","tableProps","GlobalStyles","TableContainer","Paper","StyledTableInner","clsx","styled","Table","prop","theme","StyledTableRow","TableRow","OwpTable","canTotalCountRow","headers","rows","restTableProps","resolvedHeaderRows","useMemo","isEmpty","commonKeyListData","TableHead","headerData","index","TableCell","TableBody","currentRow"],"mappings":"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"}

package/dist/components/OwpTreeGrid/OwpTreeGrid.js

@@ -1,345 +1,200 @@
-var _e = Object.defineProperty;
-var i = (e, t) => _e(e, "name", { value: t, configurable: !0 });
-import { jsxs as Ee, jsx as Z } 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 Ne } from "../../hooks/useOwpTranslation.js";
+var Ae = Object.defineProperty;
+var a = (r, u) => Ae(r, "name", { value: u, configurable: !0 });
+import { jsxs as Ne, jsx as H } 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 Pe } from "../../hooks/useOwpTranslation.js";
 import { useGetCurrentLanguage as Ve } from "../../hooks/useCurrentLanguage.js";
-import { TREE_GRID_BODY_ROWS_CHANGED_EVENT as ye } from "../../utils/treeGridBodyRowsEvent.js";
-import { getTreeGridPerfTimestamp as H, countTreeGridPerf as Ge, logTreeGridPerf as Re, measureTreeGridPerf as te } from "./perf.js";
-import { useRef as d, useState as ee, useEffect as $, useLayoutEffect as Pe } from "react";
-import { useOwpTreeGridOverlayFrame as he } from "./hooks/useOwpTreeGridOverlayFrame.js";
-import { OwpTreeGridLoadingOverlay as ke } from "./OwpTreeGridLoadingOverlay.js";
-import { OwpTreeGridNoDataOverlay as Fe } from "./OwpTreeGridNoDataOverlay.js";
-import { applyTreeGridLayoutToGrid as Be } from "./utils/index.js";
-import { isEmpty as V } from "../../node_modules/.pnpm/es-toolkit@1.39.10/node_modules/es-toolkit/dist/compat/predicate/isEmpty.js";
-import { delay as Ue } from "../../node_modules/.pnpm/es-toolkit@1.39.10/node_modules/es-toolkit/dist/compat/function/delay.js";
-import { isEqual as $e } from "../../node_modules/.pnpm/es-toolkit@1.39.10/node_modules/es-toolkit/dist/predicate/isEqual.js";
-import { omit as Me } from "../../node_modules/.pnpm/es-toolkit@1.39.10/node_modules/es-toolkit/dist/compat/object/omit.js";
-import { debounce as M } from "../../node_modules/.pnpm/es-toolkit@1.39.10/node_modules/es-toolkit/dist/compat/function/debounce.js";
-import { get as je } from "../../node_modules/.pnpm/es-toolkit@1.39.10/node_modules/es-toolkit/dist/compat/object/get.js";
-const qe = 300, we = {
-  en: "/assets/vendors/Grid/TextEN.xml",
-  kr: "/assets/vendors/Grid/TextKR.xml"
-}, Oe = /* @__PURE__ */ i((e) => `${e}?noCache=${Date.now()}`, "appendNoCacheQuery"), Ke = /* @__PURE__ */ i((e) => e === "kr" ? we.kr : we.en, "getTreeGridTextResourceUrl"), We = /* @__PURE__ */ i((e) => e != null && e.includes("assets") ? Oe(e) : (
-  // @ts-expect-error - API base URL env is provided by host app
-  `undefined/${e}?noCache=${Date.now()}`
-), "resolveTreeGridDataUrl"), ze = /* @__PURE__ */ i((e, t, a) => e ? { Url: We(t) } : { Data: { Body: [V(a) ? [] : a] } }, "buildTreeGridDataSource"), Qe = /* @__PURE__ */ i(({
-  id: e,
-  layoutUrl: t,
-  dataUrl: a,
-  bodyData: G,
-  useDataUrl: R,
-  width: D,
-  height: v,
-  languageId: b
-}) => ({
-  id: e,
-  Layout: { Url: Oe(t ?? "") },
-  Data: ze(R, a, G),
-  Text: {
-    Url: Ke(b)
-  },
-  width: D,
-  height: v,
-  Debug: "Error"
-}), "buildTreeGridInitializationOptions"), De = /* @__PURE__ */ i((e) => je(e, "Data.Data.Data.Body.0"), "getTreeGridBodyData"), j = /* @__PURE__ */ i((e) => Array.isArray(e) ? e.length : 0, "getTreeGridBodyDataCount"), Xe = /* @__PURE__ */ i((e) => {
-  const t = e == null ? void 0 : e.Visible;
-  return !!e && t !== 0 && t !== !1 && t !== "0";
-}, "isVisibleTreeGridRow"), Ye = /* @__PURE__ */ i((e) => {
-  const t = e == null ? void 0 : e.Added;
-  return !!e && t !== 0 && t !== !1 && t !== "0" && t !== void 0;
-}, "isAddedTreeGridRow"), ve = /* @__PURE__ */ i((e) => !e || e.Fixed === "Foot" || !Xe(e) ? !1 : e.Kind === "Data" || Ye(e), "isDisplayTreeGridRow"), be = /* @__PURE__ */ i((e) => {
-  if (!e)
-    return !1;
-  if (typeof e.GetFirst == "function" && typeof e.GetNext == "function") {
-    let t = e.GetFirst();
-    for (; t; ) {
-      if (ve(t))
-        return !0;
-      t = e.GetNext(t);
-    }
-    return !1;
-  }
-  return Object.values(e.Rows ?? {}).some((t) => ve(t));
-}, "hasTreeGridDisplayDataRows"), Je = /* @__PURE__ */ i((e, t, a) => {
-  var R;
-  const G = (R = e.Data) == null ? void 0 : R.Data;
-  e.Data.Data = {
-    ...G,
-    Data: { Body: [t || []] },
-    Url: ""
-  }, e.ReloadBody(a);
-}, "replaceTreeGridBodyData"), Ze = /* @__PURE__ */ i(({
-  id: e,
-  latestEventHandlersRef: t,
-  treeGridInstanceRef: a,
-  treeGridInitStartedAtRef: G,
-  latestLayoutOverridesRef: R,
-  appliedLayoutOverridesRef: D,
-  appliedBodyDataPropRef: v,
-  hasAppliedInitialLayoutRef: b,
-  syncHasDisplayDataRows: w,
-  setIsTreeGridReady: S
-}) => {
-  const r = t.current;
-  window.TGSetEvent("OnRowAdd", e, (o, c) => {
-    var n, u;
-    c.CanEdit = 1, c.CanDelete = 1, (u = (n = t.current) == null ? void 0 : n.onRowAdd) == null || u.call(n, o, c);
-  }), window.TGSetEvent("OnRowAdded", e, (o) => {
-    w(o);
-  }), typeof (r == null ? void 0 : r.onRowClick) == "function" && window.TGSetEvent(
-    "OnClick",
-    e,
-    M((o, c, n, u, s, l) => {
-      var p, C;
-      (C = (p = t.current) == null ? void 0 : p.onRowClick) == null || C.call(
-        p,
-        o,
-        c,
-        n,
-        u,
-        s,
-        l
-      );
-    }, 300)
-  ), typeof (r == null ? void 0 : r.onClickButton) == "function" && window.TGSetEvent(
-    "OnClickButton",
-    e,
-    M((o, c, n, u) => {
-      var s, l;
-      (l = (s = t.current) == null ? void 0 : s.onClickButton) == null || l.call(
-        s,
-        o,
-        c,
-        n,
-        u
-      );
-    }, 300)
-  ), typeof (r == null ? void 0 : r.onRowDelete) == "function" ? window.TGSetEvent("OnRowDelete", e, (o, c, n) => {
-    var u, s;
-    w(o), (s = (u = t.current) == null ? void 0 : u.onRowDelete) == null || s.call(
-      u,
-      o,
-      c,
-      n
-    );
-  }) : window.TGSetEvent("OnRowDelete", e, (o) => {
-    w(o);
-  }), typeof (r == null ? void 0 : r.onRowUndelete) == "function" ? window.TGSetEvent("OnRowUndelete", e, (o, c) => {
-    var n, u;
-    w(o), (u = (n = t.current) == null ? void 0 : n.onRowUndelete) == null || u.call(n, o, c);
-  }) : window.TGSetEvent("OnRowUndelete", e, (o) => {
-    w(o);
-  }), (typeof (r == null ? void 0 : r.onAfterValueChanged) == "function" || typeof (r == null ? void 0 : r.onRowChange) == "function") && window.TGSetEvent("OnAfterValueChanged", e, (o, c, n, u) => {
-    var l, p;
-    const s = ((l = t.current) == null ? void 0 : l.onAfterValueChanged) ?? ((p = t.current) == null ? void 0 : p.onRowChange);
-    s == null || s(o, c, n, u);
-  }), typeof (r == null ? void 0 : r.onSelect) == "function" && window.TGSetEvent(
-    "OnSelect",
-    e,
-    M((o) => {
-      var n, u;
-      const c = o.GetSelRows() ?? [];
-      (u = (n = t.current) == null ? void 0 : n.onSelect) == null || u.call(n, c);
-    }, 100)
-  ), typeof (r == null ? void 0 : r.onSave) == "function" && window.TGSetEvent("OnSave", e, (o, c, n) => {
-    var u, s;
-    (s = (u = t.current) == null ? void 0 : u.onSave) == null || s.call(
-      u,
-      o,
-      c,
-      n
-    );
-  }), window.TGSetEvent(
-    "OnReady",
-    e,
-    M((o) => {
-      var c, n;
-      if (!b.current) {
-        const u = R.current;
-        b.current = !0, Be(o, u), a.current = o, D.current = u, v.current = De(o), w(o), S(!0), te(e, "TreeGrid init ready", G.current, {
-          bodyRowCount: j(
-            De(o)
-          )
-        }), G.current = null, (n = (c = t.current) == null ? void 0 : c.onReady) == null || n.call(c, o);
-      }
-    }, 100)
-  );
-}, "bindTreeGridEvents"), Gt = /* @__PURE__ */ i(({
-  id: e = "treeGridWrapper",
-  containerStyle: t,
-  containerClassName: a,
-  className: G,
-  style: R,
-  height: D = "100%",
-  width: v = "100%",
-  layoutUrl: b,
-  dataUrl: w,
-  layoutOverrides: S,
-  data: r,
-  useDataUrl: o,
-  onSelect: c,
-  onRowClick: n,
-  onRowAdd: u,
-  onRowDelete: s,
-  onRowUndelete: l,
-  onRowChange: p,
-  onClickButton: C,
-  onSave: re,
-  onReady: oe,
-  onAfterValueChanged: ne,
-  loading: Se,
-  showLoading: T = !0
+import { TREE_GRID_BODY_ROWS_CHANGED_EVENT as pe } from "../../utils/treeGridBodyRowsEvent.js";
+import { getTreeGridPerfTimestamp as C, countTreeGridPerf as me, logTreeGridPerf as ye, measureTreeGridPerf as Re } from "./utils/perf.js";
+import { useRef as e, useState as S, useEffect as I, useLayoutEffect as xe } from "react";
+import { useOwpTreeGridOverlayFrame as He } from "./hooks/useOwpTreeGridOverlayFrame.js";
+import { bindTreeGridEvents as Ce, getTreeGridBodyDataCount as M, buildTreeGridInitializationOptions as Se, hasTreeGridDisplayDataRows as ve, replaceTreeGridBodyData as Me, TREE_GRID_BINDING_LOADING_MIN_VISIBLE_MS as qe } from "./internal/treeGridRuntime.js";
+import { applyTreeGridLayoutToGrid as je } from "./internal/treeGridLayout.js";
+import { OwpTreeGridLoadingOverlay as Fe } from "./internal/OwpTreeGridLoadingOverlay.js";
+import { OwpTreeGridNoDataOverlay as We } from "./internal/OwpTreeGridNoDataOverlay.js";
+import { isEmpty as E } from "../../node_modules/.pnpm/es-toolkit@1.39.10/node_modules/es-toolkit/dist/compat/predicate/isEmpty.js";
+import { delay as ze } from "../../node_modules/.pnpm/es-toolkit@1.39.10/node_modules/es-toolkit/dist/compat/function/delay.js";
+import { isEqual as Ye } from "../../node_modules/.pnpm/es-toolkit@1.39.10/node_modules/es-toolkit/dist/predicate/isEqual.js";
+import { omit as he } from "../../node_modules/.pnpm/es-toolkit@1.39.10/node_modules/es-toolkit/dist/compat/object/omit.js";
+const cr = /* @__PURE__ */ a(({
+  id: r = "treeGridWrapper",
+  containerStyle: u,
+  containerClassName: Te,
+  className: Ge,
+  style: De,
+  height: q = "100%",
+  width: j = "100%",
+  layoutUrl: be,
+  dataUrl: ge,
+  layoutOverrides: w,
+  data: n,
+  useDataUrl: F,
+  onSelect: W,
+  onRowClick: z,
+  onRowAdd: Y,
+  onRowDelete: h,
+  onRowUndelete: J,
+  onRowChange: K,
+  onClickButton: Q,
+  onSave: X,
+  onReady: Z,
+  onAfterValueChanged: $,
+  highlightEditableCells: U = !0,
+  highlightChangedCells: k = !0,
+  loading: Be,
+  showLoading: o = !0
 }) => {
-  const { t: Ce } = Ne(), m = d(null), ue = d(null), ce = d(null), q = d(null), K = d(S), ie = d(r), se = d({
-    onSelect: c,
-    onRowClick: n,
-    onRowAdd: u,
-    onRowDelete: s,
-    onRowUndelete: l,
-    onRowChange: p,
-    onClickButton: C,
-    onSave: re,
-    onReady: oe,
-    onAfterValueChanged: ne
-  }), g = d(void 0), W = d(!1), P = d(void 0), h = d(void 0), ge = d(!1), I = d(0), B = d(null), A = d(void 0), L = d(void 0), [z, Ie] = ee(!1), [Ae, x] = ee(!1), [Le, de] = ee(!1), k = Ve(), fe = d(k.id), xe = T && r !== void 0 && z && h.current !== r, Q = T && Se === !0 || T && (Ae || xe), X = !Q && r !== void 0 && V(r) && !Le, ae = /* @__PURE__ */ i((f) => {
-    de(be(f));
+  const { t: Ie } = Pe(), i = e(null), ee = e(null), re = e(null), L = e(null), O = e(w), te = e(n), ne = e({
+    onSelect: W,
+    onRowClick: z,
+    onRowAdd: Y,
+    onRowDelete: h,
+    onRowUndelete: J,
+    onRowChange: K,
+    onClickButton: Q,
+    onSave: X,
+    onReady: Z,
+    onAfterValueChanged: $
+  }), l = e(void 0), _ = e(!1), G = e(void 0), D = e(void 0), Ee = e(!1), f = e(0), c = e(null), p = e(void 0), m = e(void 0), oe = e(U), ie = e(k), [A, we] = S(!1), [Le, y] = S(!1), [Oe, se] = S(!1), b = Ve(), ue = e(b.id), _e = o && n !== void 0 && A && D.current !== n, N = o && Be === !0 || o && (Le || _e), P = !N && n !== void 0 && E(n) && !Oe, ae = /* @__PURE__ */ a((t) => {
+    se(ve(t));
   }, "syncHasDisplayDataRows");
-  K.current = S, ie.current = r, se.current = {
-    onSelect: c,
-    onRowClick: n,
-    onRowAdd: u,
-    onRowDelete: s,
-    onRowUndelete: l,
-    onRowChange: p,
-    onClickButton: C,
-    onSave: re,
-    onReady: oe,
-    onAfterValueChanged: ne
+  O.current = w, te.current = n, oe.current = U, ie.current = k, ne.current = {
+    onSelect: W,
+    onRowClick: z,
+    onRowAdd: Y,
+    onRowDelete: h,
+    onRowUndelete: J,
+    onRowChange: K,
+    onClickButton: Q,
+    onSave: X,
+    onReady: Z,
+    onAfterValueChanged: $
   };
-  const le = he({
-    visible: Q || X,
-    containerRef: ue,
-    treeGridInstanceRef: m,
-    debugId: e
-  }), F = /* @__PURE__ */ i(() => {
-    A.current !== void 0 && (window.clearTimeout(A.current), A.current = void 0);
-  }, "clearBindingLoadingHideTimeout"), Y = /* @__PURE__ */ i(() => {
-    L.current !== void 0 && (window.clearTimeout(L.current), L.current = void 0);
+  const ce = He({
+    visible: N || P,
+    containerRef: ee,
+    treeGridInstanceRef: i,
+    debugId: r
+  }), g = /* @__PURE__ */ a(() => {
+    p.current !== void 0 && (window.clearTimeout(p.current), p.current = void 0);
+  }, "clearBindingLoadingHideTimeout"), V = /* @__PURE__ */ a(() => {
+    m.current !== void 0 && (window.clearTimeout(m.current), m.current = void 0);
   }, "clearBodyReloadStartTimeout");
-  $(() => {
-    const f = /* @__PURE__ */ i((y) => {
-      var E;
-      ((E = y.detail) == null ? void 0 : E.gridId) === e && de(be(m.current));
+  I(() => {
+    const t = /* @__PURE__ */ a((s) => {
+      var v;
+      ((v = s.detail) == null ? void 0 : v.gridId) === r && se(ve(i.current));
     }, "handleBodyRowsChanged");
-    return window.addEventListener(ye, f), () => {
-      window.removeEventListener(ye, f);
+    return window.addEventListener(pe, t), () => {
+      window.removeEventListener(pe, t);
     };
-  }, [e]), $(() => {
-    T || (Y(), F(), B.current = null, x(!1));
-  }, [T]), $(() => {
-    var f;
-    if (k.id !== fe.current && !V(m.current) && ((f = m.current) == null || f.Dispose(), m.current = null, fe.current = k.id), !!V(m.current))
-      return Ze({
-        id: e,
-        latestEventHandlersRef: se,
-        treeGridInstanceRef: m,
-        treeGridInitStartedAtRef: ce,
-        latestLayoutOverridesRef: K,
-        appliedLayoutOverridesRef: P,
-        appliedBodyDataPropRef: h,
-        hasAppliedInitialLayoutRef: ge,
+  }, [r]), I(() => {
+    o || (V(), g(), c.current = null, y(!1));
+  }, [o]), I(() => {
+    var t;
+    if (b.id !== ue.current && !E(i.current) && ((t = i.current) == null || t.Dispose(), i.current = null, ue.current = b.id), !!E(i.current))
+      return Ce({
+        id: r,
+        latestEventHandlersRef: ne,
+        highlightEditableCellsRef: oe,
+        highlightChangedCellsRef: ie,
+        treeGridInstanceRef: i,
+        treeGridInitStartedAtRef: re,
+        latestLayoutOverridesRef: O,
+        appliedLayoutOverridesRef: G,
+        appliedBodyDataPropRef: D,
+        hasAppliedInitialLayoutRef: Ee,
         syncHasDisplayDataRows: ae,
-        setIsTreeGridReady: Ie
-      }), ce.current = H(), Ge(e, "init"), Re(e, "TreeGrid init start", {
-        useDataUrl: !!o,
-        bodyRowCount: j(r)
+        setIsTreeGridReady: we
+      }), re.current = C(), me(r, "init"), ye(r, "TreeGrid init start", {
+        useDataUrl: !!F,
+        bodyRowCount: M(n)
       }), window.TreeGrid(
-        Qe({
-          id: e,
-          layoutUrl: b,
-          dataUrl: w,
-          bodyData: r,
-          useDataUrl: o,
-          width: v,
-          height: D,
-          languageId: k.id
+        Se({
+          id: r,
+          layoutUrl: be,
+          dataUrl: ge,
+          bodyData: n,
+          useDataUrl: F,
+          width: j,
+          height: q,
+          languageId: b.id
         }),
-        e,
-        e
+        r,
+        r
       ), () => {
-        Ue(() => {
-          var y;
-          (y = m.current) == null || y.Dispose();
+        ze(() => {
+          var s;
+          (s = i.current) == null || s.Dispose();
         }, 200);
       };
-  }, []), Pe(() => {
-    const f = m.current, y = K.current, _ = ie.current;
-    if (V(f) || !z)
+  }, []), xe(() => {
+    const t = i.current, s = O.current, R = te.current;
+    if (E(t) || !A)
       return;
-    const E = P.current !== y && !$e(P.current, y), U = h.current !== _ && (!W.current || g.current !== _);
-    if (!(!E && !U)) {
-      if (E) {
-        const O = H();
-        Be(f, y, U), P.current = y, te(e, "apply layout", O, {
-          disableBodyReload: !!U
+    const v = G.current !== s && !Ye(G.current, s), B = D.current !== R && (!_.current || l.current !== R);
+    if (!(!v && !B)) {
+      if (v) {
+        const d = C();
+        je(t, s, B), G.current = s, Re(r, "apply layout", d, {
+          disableBodyReload: !!B
         });
       }
-      if (U) {
-        const O = I.current + 1, pe = /* @__PURE__ */ i(() => {
-          const N = g.current;
-          L.current = void 0, q.current = H(), Ge(e, "reload"), Re(e, "ReloadBody start", {
-            bodyRowCount: j(N)
-          }), Je(f, N, () => {
-            if (I.current !== O)
+      if (B) {
+        const d = f.current + 1, de = /* @__PURE__ */ a(() => {
+          const T = l.current;
+          m.current = void 0, L.current = C(), me(r, "reload"), ye(r, "ReloadBody start", {
+            bodyRowCount: M(T)
+          }), Me(t, T, () => {
+            if (f.current !== d)
               return;
-            h.current = N, ae(f), te(e, "ReloadBody end", q.current, {
-              bodyRowCount: j(N)
-            }), q.current = null, g.current === N && (g.current = void 0, W.current = !1);
-            const Te = B.current;
-            if (!T || Te === null) {
-              B.current = null, x(!1);
+            D.current = T, ae(t), Re(r, "ReloadBody end", L.current, {
+              bodyRowCount: M(T)
+            }), L.current = null, l.current === T && (l.current = void 0, _.current = !1);
+            const le = c.current;
+            if (!o || le === null) {
+              c.current = null, y(!1);
               return;
             }
-            const me = Math.max(
+            const fe = Math.max(
               0,
-              qe - (Date.now() - Te)
+              qe - (Date.now() - le)
             );
-            if (F(), me === 0) {
-              B.current = null, x(!1);
+            if (g(), fe === 0) {
+              c.current = null, y(!1);
               return;
             }
-            A.current = window.setTimeout(() => {
-              I.current === O && (A.current = void 0, B.current = null, x(!1));
-            }, me);
+            p.current = window.setTimeout(() => {
+              f.current === d && (p.current = void 0, c.current = null, y(!1));
+            }, fe);
           });
         }, "runBodyReload");
-        I.current = O, g.current = _, W.current = !0, T && _ !== void 0 ? (Y(), F(), B.current = Date.now(), x(!0), L.current = window.setTimeout(() => {
-          I.current === O && pe();
-        }, 0)) : pe();
+        f.current = d, l.current = R, _.current = !0, o && R !== void 0 ? (V(), g(), c.current = Date.now(), y(!0), m.current = window.setTimeout(() => {
+          f.current === d && de();
+        }, 0)) : de();
       }
     }
-  }, [z, S, r, T, e]), $(() => () => {
-    Y(), F();
+  }, [A, w, n, o, r]), I(() => () => {
+    V(), g();
   }, []);
-  const J = {
-    height: D,
-    width: v,
-    ...t
+  const x = {
+    height: q,
+    width: j,
+    ...u
   };
-  return (T || X) && (J.position = t != null && t.position && t.position !== "static" ? t.position : "relative", J.isolation = "isolate"), /* @__PURE__ */ Ee("div", { ref: ue, className: a, style: J, children: [
-    /* @__PURE__ */ Z("div", { id: e, className: G, style: Me(R, ["height", "width"]) }),
-    /* @__PURE__ */ Z(
-      Fe,
+  return (o || P) && (x.position = u != null && u.position && u.position !== "static" ? u.position : "relative", x.isolation = "isolate"), /* @__PURE__ */ Ne("div", { ref: ee, className: Te, style: x, children: [
+    /* @__PURE__ */ H("div", { id: r, className: Ge, style: he(De, ["height", "width"]) }),
+    /* @__PURE__ */ H(
+      We,
       {
-        visible: X,
-        message: Ce("Message.조회된 결과가 없습니다."),
-        overlayFrame: le
+        visible: P,
+        message: Ie("Message.조회된 결과가 없습니다."),
+        overlayFrame: ce
       }
     ),
-    /* @__PURE__ */ Z(ke, { visible: Q, overlayFrame: le })
+    /* @__PURE__ */ H(Fe, { visible: N, overlayFrame: ce })
   ] });
 }, "OwpTreeGrid");
 export {
-  Gt as OwpTreeGrid
+  cr as OwpTreeGrid
 };
 //# sourceMappingURL=OwpTreeGrid.js.map