@shoplflow/templates 0.2.11 → 0.2.12

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 +17 -6
  2. package/dist/index.d.cts +3 -6
  3. package/dist/index.d.ts +3 -6
  4. package/dist/index.js +16 -5
  5. package/package.json +4 -4
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,14 @@ 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
+ if (!context) {
71
+ throw new Error("useTitleGroupContext must be used within a TitleGroup");
72
+ }
73
+ return context;
74
+ };
67
75
  var TitleGroupHelpIcon = ({
68
76
  tooltipPlacement,
69
77
  tooltipOffsetValue,
@@ -86,7 +94,8 @@ var Actions = ({ children }) => {
86
94
  var HeaderBox = ({ children }) => {
87
95
  return /* @__PURE__ */ jsxRuntime.jsx(base.StackContainer.Horizontal, { align: "center", width: "100%", minHeight: "40px", height: "auto", justify: "space-between", children });
88
96
  };
89
- var Header = ({ depth, title, isRequired, count, helpIconProps, rightIconButton }) => {
97
+ var Header = ({ title, isRequired, count, helpIconProps, rightIconButton }) => {
98
+ const { depth } = useTitleGroupContext();
90
99
  const { color, typography } = getTypographyAndColor(depth);
91
100
  return /* @__PURE__ */ jsxRuntime.jsxs(base.Stack.Horizontal, { align: "center", children: [
92
101
  /* @__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
100
109
  };
101
110
  var Description = (_a) => {
102
111
  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 })) });
112
+ const { depth } = useTitleGroupContext();
113
+ const typography = depth === 1 ? "paragraph1" : "paragraph2";
114
+ 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
115
  };
105
- var TitleGroup = ({ children }) => {
106
- return /* @__PURE__ */ jsxRuntime.jsx(base.Stack.Vertical, { width: "100%", "data-shoplflow": "Title", children });
116
+ var TitleGroup = ({ children, depth = 1 }) => {
117
+ return /* @__PURE__ */ jsxRuntime.jsx(TitleGroupContext.Provider, { value: { depth }, children: /* @__PURE__ */ jsxRuntime.jsx(base.Stack.Vertical, { width: "100%", "data-shoplflow": "Title", children }) });
107
118
  };
108
119
  TitleGroup.HeaderBox = HeaderBox;
109
120
  TitleGroup.Header = Header;
package/dist/index.d.cts CHANGED
@@ -39,10 +39,6 @@ type TitleGroupHeaderProps = {
39
39
  * 제목
40
40
  */
41
41
  title: string;
42
- /**
43
- * 제목의 타이포그래피 스타일
44
- */
45
- depth: 1 | 2 | 3;
46
42
  /**
47
43
  * 아이템의 총 갯수
48
44
  */
@@ -59,12 +55,13 @@ type TitleGroupHeaderProps = {
59
55
  rightIconButton?: ReactElement<IconButtonProps, typeof IconButton>;
60
56
  };
61
57
  interface TitleGroupProps extends ChildrenProps {
58
+ depth?: 1 | 2 | 3;
62
59
  }
63
60
 
64
61
  declare const TitleGroup: {
65
- ({ children }: TitleGroupProps): react_jsx_runtime.JSX.Element;
62
+ ({ children, depth }: TitleGroupProps): react_jsx_runtime.JSX.Element;
66
63
  HeaderBox: ({ children }: ChildrenProps) => react_jsx_runtime.JSX.Element;
67
- Header: ({ depth, title, isRequired, count, helpIconProps, rightIconButton }: TitleGroupHeaderProps) => react_jsx_runtime.JSX.Element;
64
+ Header: ({ title, isRequired, count, helpIconProps, rightIconButton }: TitleGroupHeaderProps) => react_jsx_runtime.JSX.Element;
68
65
  Actions: ({ children }: ActionsProps) => react_jsx_runtime.JSX.Element;
69
66
  Description: ({ description, ...rest }: DescriptionProps) => react_jsx_runtime.JSX.Element;
70
67
  };
package/dist/index.d.ts CHANGED
@@ -39,10 +39,6 @@ type TitleGroupHeaderProps = {
39
39
  * 제목
40
40
  */
41
41
  title: string;
42
- /**
43
- * 제목의 타이포그래피 스타일
44
- */
45
- depth: 1 | 2 | 3;
46
42
  /**
47
43
  * 아이템의 총 갯수
48
44
  */
@@ -59,12 +55,13 @@ type TitleGroupHeaderProps = {
59
55
  rightIconButton?: ReactElement<IconButtonProps, typeof IconButton>;
60
56
  };
61
57
  interface TitleGroupProps extends ChildrenProps {
58
+ depth?: 1 | 2 | 3;
62
59
  }
63
60
 
64
61
  declare const TitleGroup: {
65
- ({ children }: TitleGroupProps): react_jsx_runtime.JSX.Element;
62
+ ({ children, depth }: TitleGroupProps): react_jsx_runtime.JSX.Element;
66
63
  HeaderBox: ({ children }: ChildrenProps) => react_jsx_runtime.JSX.Element;
67
- Header: ({ depth, title, isRequired, count, helpIconProps, rightIconButton }: TitleGroupHeaderProps) => react_jsx_runtime.JSX.Element;
64
+ Header: ({ title, isRequired, count, helpIconProps, rightIconButton }: TitleGroupHeaderProps) => react_jsx_runtime.JSX.Element;
68
65
  Actions: ({ children }: ActionsProps) => react_jsx_runtime.JSX.Element;
69
66
  Description: ({ description, ...rest }: DescriptionProps) => react_jsx_runtime.JSX.Element;
70
67
  };
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,14 @@ 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
+ if (!context) {
65
+ throw new Error("useTitleGroupContext must be used within a TitleGroup");
66
+ }
67
+ return context;
68
+ };
61
69
  var TitleGroupHelpIcon = ({
62
70
  tooltipPlacement,
63
71
  tooltipOffsetValue,
@@ -80,7 +88,8 @@ var Actions = ({ children }) => {
80
88
  var HeaderBox = ({ children }) => {
81
89
  return /* @__PURE__ */ jsx(StackContainer.Horizontal, { align: "center", width: "100%", minHeight: "40px", height: "auto", justify: "space-between", children });
82
90
  };
83
- var Header = ({ depth, title, isRequired, count, helpIconProps, rightIconButton }) => {
91
+ var Header = ({ title, isRequired, count, helpIconProps, rightIconButton }) => {
92
+ const { depth } = useTitleGroupContext();
84
93
  const { color, typography } = getTypographyAndColor(depth);
85
94
  return /* @__PURE__ */ jsxs(Stack.Horizontal, { align: "center", children: [
86
95
  /* @__PURE__ */ jsxs(Stack.Horizontal, { spacing: "spacing04", align: "center", justify: "center", children: [
@@ -94,10 +103,12 @@ var Header = ({ depth, title, isRequired, count, helpIconProps, rightIconButton
94
103
  };
95
104
  var Description = (_a) => {
96
105
  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 })) });
106
+ const { depth } = useTitleGroupContext();
107
+ const typography = depth === 1 ? "paragraph1" : "paragraph2";
108
+ 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
109
  };
99
- var TitleGroup = ({ children }) => {
100
- return /* @__PURE__ */ jsx(Stack.Vertical, { width: "100%", "data-shoplflow": "Title", children });
110
+ var TitleGroup = ({ children, depth = 1 }) => {
111
+ return /* @__PURE__ */ jsx(TitleGroupContext.Provider, { value: { depth }, children: /* @__PURE__ */ jsx(Stack.Vertical, { width: "100%", "data-shoplflow": "Title", children }) });
101
112
  };
102
113
  TitleGroup.HeaderBox = HeaderBox;
103
114
  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.12",
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/hada-assets": "^0.1.10",
81
- "@shoplflow/utils": "^0.8.0",
80
+ "@shoplflow/base": "^0.46.11",
82
81
  "@shoplflow/shopl-assets": "^0.12.37",
83
- "@shoplflow/base": "^0.46.11"
82
+ "@shoplflow/utils": "^0.8.0",
83
+ "@shoplflow/hada-assets": "^0.1.10"
84
84
  },
85
85
  "repository": {
86
86
  "type": "git",