@shoplflow/templates 0.2.11 → 0.2.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.cjs +22 -6
  2. package/dist/index.d.cts +6 -4
  3. package/dist/index.d.ts +6 -4
  4. package/dist/index.js +21 -5
  5. package/package.json +3 -3
package/dist/index.cjs CHANGED
@@ -1,10 +1,10 @@
1
1
  'use strict';
2
2
 
3
3
  var base = require('@shoplflow/base');
4
+ var React6 = require('react');
4
5
  var styled2 = require('@emotion/styled');
5
6
  var shoplAssets = require('@shoplflow/shopl-assets');
6
7
  var jsxRuntime = require('react/jsx-runtime');
7
- var React6 = require('react');
8
8
  var reactTable = require('@tanstack/react-table');
9
9
  var lodashEs = require('lodash-es');
10
10
  var reactVirtual = require('@tanstack/react-virtual');
@@ -12,8 +12,8 @@ var utils = require('@shoplflow/utils');
12
12
 
13
13
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
14
14
 
15
- var styled2__default = /*#__PURE__*/_interopDefault(styled2);
16
15
  var React6__default = /*#__PURE__*/_interopDefault(React6);
16
+ var styled2__default = /*#__PURE__*/_interopDefault(styled2);
17
17
 
18
18
  var __defProp = Object.defineProperty;
19
19
  var __defProps = Object.defineProperties;
@@ -64,6 +64,11 @@ var StyledRequired = styled2__default.default.div`
64
64
  line-height: 18px;
65
65
  padding-top: 1px;
66
66
  `;
67
+ var TitleGroupContext = React6.createContext(null);
68
+ var useTitleGroupContext = () => {
69
+ const context = React6.useContext(TitleGroupContext);
70
+ return context != null ? context : { depth: 1 };
71
+ };
67
72
  var TitleGroupHelpIcon = ({
68
73
  tooltipPlacement,
69
74
  tooltipOffsetValue,
@@ -86,7 +91,16 @@ var Actions = ({ children }) => {
86
91
  var HeaderBox = ({ children }) => {
87
92
  return /* @__PURE__ */ jsxRuntime.jsx(base.StackContainer.Horizontal, { align: "center", width: "100%", minHeight: "40px", height: "auto", justify: "space-between", children });
88
93
  };
89
- var Header = ({ depth, title, isRequired, count, helpIconProps, rightIconButton }) => {
94
+ var Header = ({
95
+ title,
96
+ isRequired,
97
+ count,
98
+ helpIconProps,
99
+ rightIconButton,
100
+ depth: depthProp
101
+ }) => {
102
+ const { depth: contextDepth } = useTitleGroupContext();
103
+ const depth = depthProp != null ? depthProp : contextDepth;
90
104
  const { color, typography } = getTypographyAndColor(depth);
91
105
  return /* @__PURE__ */ jsxRuntime.jsxs(base.Stack.Horizontal, { align: "center", children: [
92
106
  /* @__PURE__ */ jsxRuntime.jsxs(base.Stack.Horizontal, { spacing: "spacing04", align: "center", justify: "center", children: [
@@ -100,10 +114,12 @@ var Header = ({ depth, title, isRequired, count, helpIconProps, rightIconButton
100
114
  };
101
115
  var Description = (_a) => {
102
116
  var _b = _a, { description } = _b, rest = __objRest(_b, ["description"]);
103
- 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 })) });
117
+ const { depth } = useTitleGroupContext();
118
+ const typography = depth === 1 ? "paragraph1" : "paragraph2";
119
+ 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 })) });
104
120
  };
105
- var TitleGroup = ({ children }) => {
106
- return /* @__PURE__ */ jsxRuntime.jsx(base.Stack.Vertical, { width: "100%", "data-shoplflow": "Title", children });
121
+ var TitleGroup = ({ children, depth = 1 }) => {
122
+ return /* @__PURE__ */ jsxRuntime.jsx(TitleGroupContext.Provider, { value: { depth }, children: /* @__PURE__ */ jsxRuntime.jsx(base.Stack.Vertical, { width: "100%", "data-shoplflow": "Title", children }) });
107
123
  };
108
124
  TitleGroup.HeaderBox = HeaderBox;
109
125
  TitleGroup.Header = Header;
package/dist/index.d.cts CHANGED
@@ -40,9 +40,10 @@ type TitleGroupHeaderProps = {
40
40
  */
41
41
  title: string;
42
42
  /**
43
- * 제목의 타이포그래피 스타일
43
+ * 제목의 타이포그래피 스타일.
44
+ * @deprecated TitleGroup의 depth prop을 사용하세요.
44
45
  */
45
- depth: 1 | 2 | 3;
46
+ depth?: 1 | 2 | 3;
46
47
  /**
47
48
  * 아이템의 총 갯수
48
49
  */
@@ -59,12 +60,13 @@ type TitleGroupHeaderProps = {
59
60
  rightIconButton?: ReactElement<IconButtonProps, typeof IconButton>;
60
61
  };
61
62
  interface TitleGroupProps extends ChildrenProps {
63
+ depth?: 1 | 2 | 3;
62
64
  }
63
65
 
64
66
  declare const TitleGroup: {
65
- ({ children }: TitleGroupProps): react_jsx_runtime.JSX.Element;
67
+ ({ children, depth }: TitleGroupProps): react_jsx_runtime.JSX.Element;
66
68
  HeaderBox: ({ children }: ChildrenProps) => react_jsx_runtime.JSX.Element;
67
- Header: ({ depth, title, isRequired, count, helpIconProps, rightIconButton }: TitleGroupHeaderProps) => react_jsx_runtime.JSX.Element;
69
+ Header: ({ title, isRequired, count, helpIconProps, rightIconButton, depth: depthProp, }: TitleGroupHeaderProps) => react_jsx_runtime.JSX.Element;
68
70
  Actions: ({ children }: ActionsProps) => react_jsx_runtime.JSX.Element;
69
71
  Description: ({ description, ...rest }: DescriptionProps) => react_jsx_runtime.JSX.Element;
70
72
  };
package/dist/index.d.ts CHANGED
@@ -40,9 +40,10 @@ type TitleGroupHeaderProps = {
40
40
  */
41
41
  title: string;
42
42
  /**
43
- * 제목의 타이포그래피 스타일
43
+ * 제목의 타이포그래피 스타일.
44
+ * @deprecated TitleGroup의 depth prop을 사용하세요.
44
45
  */
45
- depth: 1 | 2 | 3;
46
+ depth?: 1 | 2 | 3;
46
47
  /**
47
48
  * 아이템의 총 갯수
48
49
  */
@@ -59,12 +60,13 @@ type TitleGroupHeaderProps = {
59
60
  rightIconButton?: ReactElement<IconButtonProps, typeof IconButton>;
60
61
  };
61
62
  interface TitleGroupProps extends ChildrenProps {
63
+ depth?: 1 | 2 | 3;
62
64
  }
63
65
 
64
66
  declare const TitleGroup: {
65
- ({ children }: TitleGroupProps): react_jsx_runtime.JSX.Element;
67
+ ({ children, depth }: TitleGroupProps): react_jsx_runtime.JSX.Element;
66
68
  HeaderBox: ({ children }: ChildrenProps) => react_jsx_runtime.JSX.Element;
67
- Header: ({ depth, title, isRequired, count, helpIconProps, rightIconButton }: TitleGroupHeaderProps) => react_jsx_runtime.JSX.Element;
69
+ Header: ({ title, isRequired, count, helpIconProps, rightIconButton, depth: depthProp, }: TitleGroupHeaderProps) => react_jsx_runtime.JSX.Element;
68
70
  Actions: ({ children }: ActionsProps) => react_jsx_runtime.JSX.Element;
69
71
  Description: ({ description, ...rest }: DescriptionProps) => react_jsx_runtime.JSX.Element;
70
72
  };
package/dist/index.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import { colorTokens, IconButton, StackContainer, Icon, Tag, Text, Stack, Pagination, Checkbox, Tooltip, ScrollArea, Popper, Menu } from '@shoplflow/base';
2
+ import React6, { createContext, memo, useRef, useEffect, useContext, useState, useCallback, useMemo, Children, isValidElement, Fragment as Fragment$1 } from 'react';
2
3
  import styled2 from '@emotion/styled';
3
4
  import { RefreshIcon, CloseSmallIcon, HelpLineIcon, DeleteIcon, DescIcon, AscIcon, MoreIcon, UpArrowSolidXsmallIcon, DownArrowSolidXsmallIcon } from '@shoplflow/shopl-assets';
4
5
  import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
5
- import React6, { createContext, memo, useRef, useEffect, useContext, useState, useCallback, useMemo, Children, isValidElement, Fragment as Fragment$1 } from 'react';
6
6
  import { useReactTable, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, flexRender } from '@tanstack/react-table';
7
7
  export { createColumnHelper } from '@tanstack/react-table';
8
8
  import { isEqual } from 'lodash-es';
@@ -58,6 +58,11 @@ var StyledRequired = styled2.div`
58
58
  line-height: 18px;
59
59
  padding-top: 1px;
60
60
  `;
61
+ var TitleGroupContext = createContext(null);
62
+ var useTitleGroupContext = () => {
63
+ const context = useContext(TitleGroupContext);
64
+ return context != null ? context : { depth: 1 };
65
+ };
61
66
  var TitleGroupHelpIcon = ({
62
67
  tooltipPlacement,
63
68
  tooltipOffsetValue,
@@ -80,7 +85,16 @@ var Actions = ({ children }) => {
80
85
  var HeaderBox = ({ children }) => {
81
86
  return /* @__PURE__ */ jsx(StackContainer.Horizontal, { align: "center", width: "100%", minHeight: "40px", height: "auto", justify: "space-between", children });
82
87
  };
83
- var Header = ({ depth, title, isRequired, count, helpIconProps, rightIconButton }) => {
88
+ var Header = ({
89
+ title,
90
+ isRequired,
91
+ count,
92
+ helpIconProps,
93
+ rightIconButton,
94
+ depth: depthProp
95
+ }) => {
96
+ const { depth: contextDepth } = useTitleGroupContext();
97
+ const depth = depthProp != null ? depthProp : contextDepth;
84
98
  const { color, typography } = getTypographyAndColor(depth);
85
99
  return /* @__PURE__ */ jsxs(Stack.Horizontal, { align: "center", children: [
86
100
  /* @__PURE__ */ jsxs(Stack.Horizontal, { spacing: "spacing04", align: "center", justify: "center", children: [
@@ -94,10 +108,12 @@ var Header = ({ depth, title, isRequired, count, helpIconProps, rightIconButton
94
108
  };
95
109
  var Description = (_a) => {
96
110
  var _b = _a, { description } = _b, rest = __objRest(_b, ["description"]);
97
- 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 })) });
111
+ const { depth } = useTitleGroupContext();
112
+ const typography = depth === 1 ? "paragraph1" : "paragraph2";
113
+ 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 })) });
98
114
  };
99
- var TitleGroup = ({ children }) => {
100
- return /* @__PURE__ */ jsx(Stack.Vertical, { width: "100%", "data-shoplflow": "Title", children });
115
+ var TitleGroup = ({ children, depth = 1 }) => {
116
+ return /* @__PURE__ */ jsx(TitleGroupContext.Provider, { value: { depth }, children: /* @__PURE__ */ jsx(Stack.Vertical, { width: "100%", "data-shoplflow": "Title", children }) });
101
117
  };
102
118
  TitleGroup.HeaderBox = HeaderBox;
103
119
  TitleGroup.Header = Header;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@shoplflow/templates",
3
- "version": "0.2.11",
3
+ "version": "0.2.13",
4
4
  "type": "module",
5
5
  "license": "Apache-2.0",
6
6
  "main": "dist/index.js",
@@ -77,10 +77,10 @@
77
77
  "react-datepicker": "^7.3.0",
78
78
  "react-dom": "^18.2.0",
79
79
  "simplebar-react": "^3.2.6",
80
+ "@shoplflow/base": "^0.46.11",
80
81
  "@shoplflow/hada-assets": "^0.1.10",
81
- "@shoplflow/utils": "^0.8.0",
82
82
  "@shoplflow/shopl-assets": "^0.12.37",
83
- "@shoplflow/base": "^0.46.11"
83
+ "@shoplflow/utils": "^0.8.0"
84
84
  },
85
85
  "repository": {
86
86
  "type": "git",