@shoplflow/templates 0.2.10 → 0.2.12

package/dist/index.cjs

@@ -1,10 +1,10 @@
 'use strict';
 
 var base = require('@shoplflow/base');
+var React6 = require('react');
 var styled2 = require('@emotion/styled');
 var shoplAssets = require('@shoplflow/shopl-assets');
 var jsxRuntime = require('react/jsx-runtime');
-var React6 = require('react');
 var reactTable = require('@tanstack/react-table');
 var lodashEs = require('lodash-es');
 var reactVirtual = require('@tanstack/react-virtual');
@@ -12,8 +12,8 @@ var utils = require('@shoplflow/utils');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var styled2__default = /*#__PURE__*/_interopDefault(styled2);
 var React6__default = /*#__PURE__*/_interopDefault(React6);
+var styled2__default = /*#__PURE__*/_interopDefault(styled2);
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -64,6 +64,14 @@ var StyledRequired = styled2__default.default.div`
   line-height: 18px;
   padding-top: 1px;
 `;
+var TitleGroupContext = React6.createContext(null);
+var useTitleGroupContext = () => {
+  const context = React6.useContext(TitleGroupContext);
+  if (!context) {
+    throw new Error("useTitleGroupContext must be used within a TitleGroup");
+  }
+  return context;
+};
 var TitleGroupHelpIcon = ({
   tooltipPlacement,
   tooltipOffsetValue,
@@ -86,7 +94,8 @@ var Actions = ({ children }) => {
 var HeaderBox = ({ children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(base.StackContainer.Horizontal, { align: "center", width: "100%", minHeight: "40px", height: "auto", justify: "space-between", children });
 };
-var Header = ({ depth, title, isRequired, count, helpIconProps, rightIconButton }) => {
+var Header = ({ title, isRequired, count, helpIconProps, rightIconButton }) => {
+  const { depth } = useTitleGroupContext();
   const { color, typography } = getTypographyAndColor(depth);
   return /* @__PURE__ */ jsxRuntime.jsxs(base.Stack.Horizontal, { align: "center", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(base.Stack.Horizontal, { spacing: "spacing04", align: "center", justify: "center", children: [
@@ -100,10 +109,12 @@ var Header = ({ depth, title, isRequired, count, helpIconProps, rightIconButton
 };
 var Description = (_a) => {
   var _b = _a, { description } = _b, rest = __objRest(_b, ["description"]);
-  return /* @__PURE__ */ jsxRuntime.jsx(base.StackContainer.Vertical, { padding: "0px 0px 12px", height: "auto", children: /* @__PURE__ */ jsxRuntime.jsx(base.Text, __spreadProps(__spreadValues({ typography: "paragraph1", color: "neutral500", wordBreak: "break-all", whiteSpace: "pre-line" }, rest), { children: description })) });
+  const { depth } = useTitleGroupContext();
+  const typography = depth === 1 ? "paragraph1" : "paragraph2";
+  return /* @__PURE__ */ jsxRuntime.jsx(base.StackContainer.Vertical, { padding: "0px 0px 12px", height: "auto", children: /* @__PURE__ */ jsxRuntime.jsx(base.Text, __spreadProps(__spreadValues({ typography, color: "neutral500", wordBreak: "break-all", whiteSpace: "pre-line" }, rest), { children: description })) });
 };
-var TitleGroup = ({ children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(base.Stack.Vertical, { width: "100%", "data-shoplflow": "Title", children });
+var TitleGroup = ({ children, depth = 1 }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(TitleGroupContext.Provider, { value: { depth }, children: /* @__PURE__ */ jsxRuntime.jsx(base.Stack.Vertical, { width: "100%", "data-shoplflow": "Title", children }) });
 };
 TitleGroup.HeaderBox = HeaderBox;
 TitleGroup.Header = Header;

package/dist/index.d.cts

@@ -39,10 +39,6 @@ type TitleGroupHeaderProps = {
      * 제목
      */
     title: string;
-    /**
-     * 제목의 타이포그래피 스타일
-     */
-    depth: 1 | 2 | 3;
     /**
      * 아이템의 총 갯수
      */
@@ -59,12 +55,13 @@ type TitleGroupHeaderProps = {
     rightIconButton?: ReactElement<IconButtonProps, typeof IconButton>;
 };
 interface TitleGroupProps extends ChildrenProps {
+    depth?: 1 | 2 | 3;
 }
 
 declare const TitleGroup: {
-    ({ children }: TitleGroupProps): react_jsx_runtime.JSX.Element;
+    ({ children, depth }: TitleGroupProps): react_jsx_runtime.JSX.Element;
     HeaderBox: ({ children }: ChildrenProps) => react_jsx_runtime.JSX.Element;
-    Header: ({ depth, title, isRequired, count, helpIconProps, rightIconButton }: TitleGroupHeaderProps) => react_jsx_runtime.JSX.Element;
+    Header: ({ title, isRequired, count, helpIconProps, rightIconButton }: TitleGroupHeaderProps) => react_jsx_runtime.JSX.Element;
     Actions: ({ children }: ActionsProps) => react_jsx_runtime.JSX.Element;
     Description: ({ description, ...rest }: DescriptionProps) => react_jsx_runtime.JSX.Element;
 };

package/dist/index.d.ts

@@ -39,10 +39,6 @@ type TitleGroupHeaderProps = {
      * 제목
      */
     title: string;
-    /**
-     * 제목의 타이포그래피 스타일
-     */
-    depth: 1 | 2 | 3;
     /**
      * 아이템의 총 갯수
      */
@@ -59,12 +55,13 @@ type TitleGroupHeaderProps = {
     rightIconButton?: ReactElement<IconButtonProps, typeof IconButton>;
 };
 interface TitleGroupProps extends ChildrenProps {
+    depth?: 1 | 2 | 3;
 }
 
 declare const TitleGroup: {
-    ({ children }: TitleGroupProps): react_jsx_runtime.JSX.Element;
+    ({ children, depth }: TitleGroupProps): react_jsx_runtime.JSX.Element;
     HeaderBox: ({ children }: ChildrenProps) => react_jsx_runtime.JSX.Element;
-    Header: ({ depth, title, isRequired, count, helpIconProps, rightIconButton }: TitleGroupHeaderProps) => react_jsx_runtime.JSX.Element;
+    Header: ({ title, isRequired, count, helpIconProps, rightIconButton }: TitleGroupHeaderProps) => react_jsx_runtime.JSX.Element;
     Actions: ({ children }: ActionsProps) => react_jsx_runtime.JSX.Element;
     Description: ({ description, ...rest }: DescriptionProps) => react_jsx_runtime.JSX.Element;
 };

package/dist/index.js

@@ -1,8 +1,8 @@
 import { colorTokens, IconButton, StackContainer, Icon, Tag, Text, Stack, Pagination, Checkbox, Tooltip, ScrollArea, Popper, Menu } from '@shoplflow/base';
+import React6, { createContext, memo, useRef, useEffect, useContext, useState, useCallback, useMemo, Children, isValidElement, Fragment as Fragment$1 } from 'react';
 import styled2 from '@emotion/styled';
 import { RefreshIcon, CloseSmallIcon, HelpLineIcon, DeleteIcon, DescIcon, AscIcon, MoreIcon, UpArrowSolidXsmallIcon, DownArrowSolidXsmallIcon } from '@shoplflow/shopl-assets';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import React6, { createContext, memo, useRef, useEffect, useContext, useState, useCallback, useMemo, Children, isValidElement, Fragment as Fragment$1 } from 'react';
 import { useReactTable, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, flexRender } from '@tanstack/react-table';
 export { createColumnHelper } from '@tanstack/react-table';
 import { isEqual } from 'lodash-es';
@@ -58,6 +58,14 @@ var StyledRequired = styled2.div`
   line-height: 18px;
   padding-top: 1px;
 `;
+var TitleGroupContext = createContext(null);
+var useTitleGroupContext = () => {
+  const context = useContext(TitleGroupContext);
+  if (!context) {
+    throw new Error("useTitleGroupContext must be used within a TitleGroup");
+  }
+  return context;
+};
 var TitleGroupHelpIcon = ({
   tooltipPlacement,
   tooltipOffsetValue,
@@ -80,7 +88,8 @@ var Actions = ({ children }) => {
 var HeaderBox = ({ children }) => {
   return /* @__PURE__ */ jsx(StackContainer.Horizontal, { align: "center", width: "100%", minHeight: "40px", height: "auto", justify: "space-between", children });
 };
-var Header = ({ depth, title, isRequired, count, helpIconProps, rightIconButton }) => {
+var Header = ({ title, isRequired, count, helpIconProps, rightIconButton }) => {
+  const { depth } = useTitleGroupContext();
   const { color, typography } = getTypographyAndColor(depth);
   return /* @__PURE__ */ jsxs(Stack.Horizontal, { align: "center", children: [
     /* @__PURE__ */ jsxs(Stack.Horizontal, { spacing: "spacing04", align: "center", justify: "center", children: [
@@ -94,10 +103,12 @@ var Header = ({ depth, title, isRequired, count, helpIconProps, rightIconButton
 };
 var Description = (_a) => {
   var _b = _a, { description } = _b, rest = __objRest(_b, ["description"]);
-  return /* @__PURE__ */ jsx(StackContainer.Vertical, { padding: "0px 0px 12px", height: "auto", children: /* @__PURE__ */ jsx(Text, __spreadProps(__spreadValues({ typography: "paragraph1", color: "neutral500", wordBreak: "break-all", whiteSpace: "pre-line" }, rest), { children: description })) });
+  const { depth } = useTitleGroupContext();
+  const typography = depth === 1 ? "paragraph1" : "paragraph2";
+  return /* @__PURE__ */ jsx(StackContainer.Vertical, { padding: "0px 0px 12px", height: "auto", children: /* @__PURE__ */ jsx(Text, __spreadProps(__spreadValues({ typography, color: "neutral500", wordBreak: "break-all", whiteSpace: "pre-line" }, rest), { children: description })) });
 };
-var TitleGroup = ({ children }) => {
-  return /* @__PURE__ */ jsx(Stack.Vertical, { width: "100%", "data-shoplflow": "Title", children });
+var TitleGroup = ({ children, depth = 1 }) => {
+  return /* @__PURE__ */ jsx(TitleGroupContext.Provider, { value: { depth }, children: /* @__PURE__ */ jsx(Stack.Vertical, { width: "100%", "data-shoplflow": "Title", children }) });
 };
 TitleGroup.HeaderBox = HeaderBox;
 TitleGroup.Header = Header;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoplflow/templates",
-  "version": "0.2.10",
+  "version": "0.2.12",
   "type": "module",
   "license": "Apache-2.0",
   "main": "dist/index.js",
@@ -77,7 +77,7 @@
     "react-datepicker": "^7.3.0",
     "react-dom": "^18.2.0",
     "simplebar-react": "^3.2.6",
-    "@shoplflow/base": "^0.46.10",
+    "@shoplflow/base": "^0.46.11",
     "@shoplflow/shopl-assets": "^0.12.37",
     "@shoplflow/utils": "^0.8.0",
     "@shoplflow/hada-assets": "^0.1.10"