@mindlogic-ai/logician-ui 3.2.0-alpha.5 → 4.0.0-alpha.7
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.
- package/dist/components/Tree/Tree.d.ts +5 -1
- package/dist/components/Tree/Tree.d.ts.map +1 -1
- package/dist/components/Tree/Tree.types.d.ts +29 -1
- package/dist/components/Tree/Tree.types.d.ts.map +1 -1
- package/dist/components/Tree/TreeBranchIndentGuide.d.ts +5 -1
- package/dist/components/Tree/TreeBranchIndentGuide.d.ts.map +1 -1
- package/dist/components/Tree/TreeBranchIndentGuide.js +107 -8
- package/dist/components/Tree/TreeBranchIndentGuide.js.map +1 -1
- package/dist/components/Tree/TreeBranchIndentGuide.mjs +107 -8
- package/dist/components/Tree/TreeBranchIndentGuide.mjs.map +1 -1
- package/dist/index.d.ts +0 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +0 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +0 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -2
- package/src/components/Tree/Tree.GuideElbow.stories.tsx +220 -0
- package/src/components/Tree/Tree.types.ts +29 -1
- package/src/components/Tree/TreeBranchIndentGuide.test.tsx +213 -0
- package/src/components/Tree/TreeBranchIndentGuide.tsx +137 -11
- package/src/index.ts +0 -1
- package/dist/components/MDXEditor/MDXEditor.d.ts +0 -6
- package/dist/components/MDXEditor/MDXEditor.d.ts.map +0 -1
- package/dist/components/MDXEditor/MDXEditor.js +0 -237
- package/dist/components/MDXEditor/MDXEditor.js.map +0 -1
- package/dist/components/MDXEditor/MDXEditor.mjs +0 -235
- package/dist/components/MDXEditor/MDXEditor.mjs.map +0 -1
- package/dist/components/MDXEditor/MDXEditor.types.d.ts +0 -7
- package/dist/components/MDXEditor/MDXEditor.types.d.ts.map +0 -1
- package/dist/components/MDXEditor/index.d.ts +0 -3
- package/dist/components/MDXEditor/index.d.ts.map +0 -1
- package/src/components/MDXEditor/MDXEditor.css +0 -40
- package/src/components/MDXEditor/MDXEditor.stories.tsx +0 -56
- package/src/components/MDXEditor/MDXEditor.tsx +0 -337
- package/src/components/MDXEditor/MDXEditor.types.ts +0 -7
- package/src/components/MDXEditor/index.ts +0 -2
|
@@ -7,7 +7,11 @@ export declare const Tree: {
|
|
|
7
7
|
BranchIndicator: import("react").ForwardRefExoticComponent<import("@chakra-ui/react").TreeViewBranchIndicatorProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
8
8
|
BranchText: import("react").ForwardRefExoticComponent<import("@chakra-ui/react").TreeViewBranchTextProps & import("react").RefAttributes<HTMLSpanElement>>;
|
|
9
9
|
BranchContent: import("react").ForwardRefExoticComponent<import("@chakra-ui/react").TreeViewBranchContentProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
10
|
-
BranchIndentGuide: import("react").ForwardRefExoticComponent<import("@chakra-ui/react").TreeViewBranchIndentGuideProps &
|
|
10
|
+
BranchIndentGuide: import("react").ForwardRefExoticComponent<import("@chakra-ui/react").TreeViewBranchIndentGuideProps & {
|
|
11
|
+
elbow?: boolean;
|
|
12
|
+
footLength?: string | number;
|
|
13
|
+
guideColor?: string;
|
|
14
|
+
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
11
15
|
Item: import("react").ForwardRefExoticComponent<import("@chakra-ui/react").TreeViewItemProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
12
16
|
ItemText: import("react").ForwardRefExoticComponent<import("@chakra-ui/react").TreeViewItemTextProps & import("react").RefAttributes<HTMLSpanElement>>;
|
|
13
17
|
ItemIndicator: import("react").ForwardRefExoticComponent<import("@chakra-ui/react").TreeViewItemIndicatorProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tree.d.ts","sourceRoot":"","sources":["../../../src/components/Tree/Tree.tsx"],"names":[],"mappings":"AAkBA,eAAO,MAAM,IAAI
|
|
1
|
+
{"version":3,"file":"Tree.d.ts","sourceRoot":"","sources":["../../../src/components/Tree/Tree.tsx"],"names":[],"mappings":"AAkBA,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;CAkBhB,CAAC"}
|
|
@@ -7,7 +7,35 @@ export type TreeBranchTriggerProps = TreeViewBranchTriggerProps;
|
|
|
7
7
|
export type TreeBranchIndicatorProps = TreeViewBranchIndicatorProps;
|
|
8
8
|
export type TreeBranchTextProps = TreeViewBranchTextProps;
|
|
9
9
|
export type TreeBranchContentProps = TreeViewBranchContentProps;
|
|
10
|
-
export type TreeBranchIndentGuideProps = TreeViewBranchIndentGuideProps
|
|
10
|
+
export type TreeBranchIndentGuideProps = TreeViewBranchIndentGuideProps & {
|
|
11
|
+
/**
|
|
12
|
+
* Draw `├` / `└` guide lines instead of a plain vertical rail: every
|
|
13
|
+
* row gets a horizontal foot joining it to its parent rail, middle
|
|
14
|
+
* rows keep the vertical (`├`), and the last row of each group stops
|
|
15
|
+
* at its centre (`└`). Off by default to preserve the existing
|
|
16
|
+
* plain-vertical-rail look. See `TreeBranchIndentGuide`.
|
|
17
|
+
* @default false
|
|
18
|
+
*/
|
|
19
|
+
elbow?: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* Length of the elbow foot — the horizontal cross-stroke that joins
|
|
22
|
+
* the rail to the row content, drawn from the parent rail column
|
|
23
|
+
* toward the text. In elbow mode each level indents 4px further than
|
|
24
|
+
* the plain-rail default, and since the default foot length doesn't
|
|
25
|
+
* grow with it, the foot ends 8px short of the row text. Any Chakra
|
|
26
|
+
* width value. Only applies when `elbow` is set.
|
|
27
|
+
* @default 'calc(var(--tree-indentation) - 4px)'
|
|
28
|
+
*/
|
|
29
|
+
footLength?: string | number;
|
|
30
|
+
/**
|
|
31
|
+
* Color of the guide lines (rail, elbow foot and vertical segments).
|
|
32
|
+
* Any Chakra color token. The default is a mode-flipping semantic
|
|
33
|
+
* token, so it darkens in light mode and lightens in dark mode
|
|
34
|
+
* automatically.
|
|
35
|
+
* @default 'border.default'
|
|
36
|
+
*/
|
|
37
|
+
guideColor?: string;
|
|
38
|
+
};
|
|
11
39
|
export type TreeItemProps = TreeViewItemProps;
|
|
12
40
|
export type TreeItemTextProps = TreeViewItemTextProps;
|
|
13
41
|
export type TreeItemIndicatorProps = TreeViewItemIndicatorProps;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tree.types.d.ts","sourceRoot":"","sources":["../../../src/components/Tree/Tree.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,0BAA0B,EAC1B,0BAA0B,EAC1B,8BAA8B,EAC9B,4BAA4B,EAC5B,mBAAmB,EACnB,uBAAuB,EACvB,0BAA0B,EAC1B,0BAA0B,EAC1B,iBAAiB,EACjB,qBAAqB,EACrB,kBAAkB,EAClB,yBAAyB,EACzB,iBAAiB,EACjB,iBAAiB,EAClB,MAAM,kBAAkB,CAAC;AAE1B,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC;AAC9C,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC;AAC9C,MAAM,MAAM,eAAe,GAAG,mBAAmB,CAAC;AAClD,MAAM,MAAM,sBAAsB,GAAG,0BAA0B,CAAC;AAChE,MAAM,MAAM,sBAAsB,GAAG,0BAA0B,CAAC;AAChE,MAAM,MAAM,wBAAwB,GAAG,4BAA4B,CAAC;AACpE,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,CAAC;AAC1D,MAAM,MAAM,sBAAsB,GAAG,0BAA0B,CAAC;AAChE,MAAM,MAAM,0BAA0B,GAAG,8BAA8B,CAAC;
|
|
1
|
+
{"version":3,"file":"Tree.types.d.ts","sourceRoot":"","sources":["../../../src/components/Tree/Tree.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,0BAA0B,EAC1B,0BAA0B,EAC1B,8BAA8B,EAC9B,4BAA4B,EAC5B,mBAAmB,EACnB,uBAAuB,EACvB,0BAA0B,EAC1B,0BAA0B,EAC1B,iBAAiB,EACjB,qBAAqB,EACrB,kBAAkB,EAClB,yBAAyB,EACzB,iBAAiB,EACjB,iBAAiB,EAClB,MAAM,kBAAkB,CAAC;AAE1B,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC;AAC9C,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC;AAC9C,MAAM,MAAM,eAAe,GAAG,mBAAmB,CAAC;AAClD,MAAM,MAAM,sBAAsB,GAAG,0BAA0B,CAAC;AAChE,MAAM,MAAM,sBAAsB,GAAG,0BAA0B,CAAC;AAChE,MAAM,MAAM,wBAAwB,GAAG,4BAA4B,CAAC;AACpE,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,CAAC;AAC1D,MAAM,MAAM,sBAAsB,GAAG,0BAA0B,CAAC;AAChE,MAAM,MAAM,0BAA0B,GAAG,8BAA8B,GAAG;IACxE;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AACF,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC;AAC9C,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,CAAC;AACtD,MAAM,MAAM,sBAAsB,GAAG,0BAA0B,CAAC;AAChE,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,CAAC;AAC9D,MAAM,MAAM,cAAc,GAAG,kBAAkB,CAAC;AAIhD,MAAM,MAAM,yBAAyB,GAAG,UAAU,CAChD,WAAW,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,CAAC,CACnD,CAAC,CAAC,CAAC,CAAC;AAEL,MAAM,MAAM,0BAA0B,GAAG,UAAU,CACjD,WAAW,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAAC,CACpD,CAAC,CAAC,CAAC,CAAC;AAEL,MAAM,MAAM,wBAAwB,GAAG,UAAU,CAC/C,WAAW,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC,CAClD,CAAC,CAAC,CAAC,CAAC;AAEL,MAAM,MAAM,sBAAsB,GAAG,UAAU,CAC7C,WAAW,CAAC,iBAAiB,CAAC,eAAe,CAAC,CAAC,CAChD,CAAC,CAAC,CAAC,CAAC;AAEL,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}
|
|
@@ -1,3 +1,7 @@
|
|
|
1
1
|
import { TreeView as ChakraTreeView } from '@chakra-ui/react';
|
|
2
|
-
export declare const TreeBranchIndentGuide: import("react").ForwardRefExoticComponent<ChakraTreeView.BranchIndentGuideProps &
|
|
2
|
+
export declare const TreeBranchIndentGuide: import("react").ForwardRefExoticComponent<ChakraTreeView.BranchIndentGuideProps & {
|
|
3
|
+
elbow?: boolean;
|
|
4
|
+
footLength?: string | number;
|
|
5
|
+
guideColor?: string;
|
|
6
|
+
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
3
7
|
//# sourceMappingURL=TreeBranchIndentGuide.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeBranchIndentGuide.d.ts","sourceRoot":"","sources":["../../../src/components/Tree/TreeBranchIndentGuide.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"TreeBranchIndentGuide.d.ts","sourceRoot":"","sources":["../../../src/components/Tree/TreeBranchIndentGuide.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AA4C9D,eAAO,MAAM,qBAAqB;;;;kDAmGjC,CAAC"}
|
|
@@ -5,14 +5,113 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var react = require('@chakra-ui/react');
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
8
|
+
// Extra per-level indentation in elbow mode. Guide-line trees read better
|
|
9
|
+
// with a little more horizontal air between the elbow and the row text,
|
|
10
|
+
// so each level indents this much further than the recipe default. The
|
|
11
|
+
// foot length does NOT grow with it (its default is derived from the
|
|
12
|
+
// original `--tree-indentation`), so the foot-to-text gap widens by the
|
|
13
|
+
// same amount.
|
|
14
|
+
const ELBOW_EXTRA_INDENT = '4px';
|
|
15
|
+
// The widened per-level indentation, defined on the guide's sibling rows
|
|
16
|
+
// so both the recipe's offset math and our pseudo-element math can share
|
|
17
|
+
// it. Root rows (depth 1) have no guide sibling, but their offset
|
|
18
|
+
// multiplies indentation by zero, so every level stays consistent.
|
|
19
|
+
const ELBOW_INDENT_VARS = {
|
|
20
|
+
'--tree-elbow-indentation': `calc(var(--tree-indentation) + ${ELBOW_EXTRA_INDENT})`,
|
|
21
|
+
};
|
|
22
|
+
// Re-derive the recipe's `--tree-indentation-offset` (which feeds
|
|
23
|
+
// `--tree-offset`, the row's padding-start) from the widened indentation.
|
|
24
|
+
// Must be set on the same elements the recipe defines it on
|
|
25
|
+
// (item / branch-control) — inheritance can't override those.
|
|
26
|
+
const ELBOW_OFFSET_VARS = {
|
|
27
|
+
'--tree-indentation-offset': 'calc(var(--tree-elbow-indentation) * var(--tree-depth))',
|
|
28
|
+
};
|
|
29
|
+
// The parent rail column, measured from a child row (item / branch-control).
|
|
30
|
+
// A row's content starts at its own `--tree-offset`, and the parent rail
|
|
31
|
+
// sits exactly one (widened) indentation to its left (verified against the
|
|
32
|
+
// recipe's offset math for both the guide and the row slots).
|
|
33
|
+
const ROW_RAIL_COLUMN = 'calc(var(--tree-offset) - var(--tree-elbow-indentation))';
|
|
34
|
+
// The same column, computed from the `branch` element itself. A branch
|
|
35
|
+
// only carries Ark's inline `--depth` (the recipe's `--tree-offset` is
|
|
36
|
+
// defined on item/branch-control, not here), so expand the recipe math:
|
|
37
|
+
// rail(x) = padding + indentation * (depth - 2) + icon * 0.5 * (depth - 1)
|
|
38
|
+
// — algebraically identical to ROW_RAIL_COLUMN for a row at `--depth`.
|
|
39
|
+
const BRANCH_RAIL_COLUMN = 'calc(var(--tree-padding-inline) + var(--tree-elbow-indentation) * (var(--depth) - 2) + var(--tree-icon-size) * 0.5 * (var(--depth) - 1))';
|
|
40
|
+
const TreeBranchIndentGuide = React.forwardRef(({ elbow = false, footLength = 'calc(var(--tree-indentation) - 4px)', guideColor = 'border.default', ...props }, ref) => {
|
|
41
|
+
// Chakra v3's `branchIndentGuide` slot renders ONE absolutely-positioned
|
|
42
|
+
// vertical line per `branchContent` (its first child), `height: 100%`,
|
|
43
|
+
// with `insetInlineStart` auto-calculated from tree depth. Don't add
|
|
44
|
+
// `ms`/`ps` (breaks the depth math) or `borderInlineStartWidth` (stacks
|
|
45
|
+
// a second 1px stroke on the slot's own bg-painted 1px) — only `bg`.
|
|
46
|
+
//
|
|
47
|
+
// That single full-height rail cannot form a `└` on the last row: it
|
|
48
|
+
// always paints past the last row's centre down to the content bottom.
|
|
49
|
+
// So in `elbow` mode the slot's own rail is hidden (`bg: transparent`,
|
|
50
|
+
// the element stays as the CSS sibling anchor) and the guide lines are
|
|
51
|
+
// re-drawn per row on the guide's sibling rows (`[data-part="item"]`
|
|
52
|
+
// leaves and `[data-part="branch"]` subtrees):
|
|
53
|
+
//
|
|
54
|
+
// - every row gets a `::before` foot — the horizontal cross-stroke
|
|
55
|
+
// from the rail column toward the row content, pinned to the row's
|
|
56
|
+
// vertical centre;
|
|
57
|
+
// - non-last rows get a full-height vertical segment (`├`); for a
|
|
58
|
+
// branch it is drawn on the `[data-part="branch"]` element so it
|
|
59
|
+
// passes through the whole expanded subtree, like the original rail
|
|
60
|
+
// (zIndex 1 for the same paint-above-row-hover reason);
|
|
61
|
+
// - the LAST row's segment stops at the row's vertical centre where
|
|
62
|
+
// the foot meets it (`└`); for a branch that means half the
|
|
63
|
+
// branch-control only, so an expanded last branch hangs below the
|
|
64
|
+
// elbow with no rail running past it.
|
|
65
|
+
const foot = {
|
|
66
|
+
content: '""',
|
|
67
|
+
position: 'absolute',
|
|
68
|
+
insetBlockStart: '50%',
|
|
69
|
+
insetInlineStart: ROW_RAIL_COLUMN,
|
|
70
|
+
width: footLength,
|
|
71
|
+
height: '1px',
|
|
72
|
+
bg: guideColor,
|
|
73
|
+
};
|
|
74
|
+
const rail = {
|
|
75
|
+
content: '""',
|
|
76
|
+
position: 'absolute',
|
|
77
|
+
insetBlockStart: '0',
|
|
78
|
+
insetInlineStart: ROW_RAIL_COLUMN,
|
|
79
|
+
width: '1px',
|
|
80
|
+
bg: guideColor,
|
|
81
|
+
};
|
|
82
|
+
const elbowCss = elbow
|
|
83
|
+
? {
|
|
84
|
+
'& ~ [data-part="item"]': {
|
|
85
|
+
...ELBOW_INDENT_VARS,
|
|
86
|
+
...ELBOW_OFFSET_VARS,
|
|
87
|
+
},
|
|
88
|
+
// branch-control reads --tree-elbow-indentation by inheritance,
|
|
89
|
+
// but the offset override must sit on the control itself.
|
|
90
|
+
'& ~ [data-part="branch"]': ELBOW_INDENT_VARS,
|
|
91
|
+
'& ~ [data-part="branch"] > [data-part="branch-control"]': ELBOW_OFFSET_VARS,
|
|
92
|
+
'& ~ [data-part="item"]::before': foot,
|
|
93
|
+
'& ~ [data-part="branch"] > [data-part="branch-control"]::before': foot,
|
|
94
|
+
'& ~ [data-part="item"]:not(:last-child)::after': {
|
|
95
|
+
...rail,
|
|
96
|
+
insetBlockEnd: '0',
|
|
97
|
+
},
|
|
98
|
+
'& ~ [data-part="item"]:last-child::after': {
|
|
99
|
+
...rail,
|
|
100
|
+
height: '50%',
|
|
101
|
+
},
|
|
102
|
+
'& ~ [data-part="branch"]:not(:last-child)::before': {
|
|
103
|
+
...rail,
|
|
104
|
+
insetBlockEnd: '0',
|
|
105
|
+
insetInlineStart: BRANCH_RAIL_COLUMN,
|
|
106
|
+
zIndex: 1,
|
|
107
|
+
},
|
|
108
|
+
'& ~ [data-part="branch"]:last-child > [data-part="branch-control"]::after': {
|
|
109
|
+
...rail,
|
|
110
|
+
height: '50%',
|
|
111
|
+
},
|
|
112
|
+
}
|
|
113
|
+
: undefined;
|
|
114
|
+
return (jsxRuntime.jsx(react.TreeView.BranchIndentGuide, { ref: ref, bg: elbow ? 'transparent' : guideColor, css: elbowCss, ...props }));
|
|
16
115
|
});
|
|
17
116
|
TreeBranchIndentGuide.displayName = 'TreeBranchIndentGuide';
|
|
18
117
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeBranchIndentGuide.js","sources":["../../../src/components/Tree/TreeBranchIndentGuide.tsx"],"sourcesContent":[null],"names":["forwardRef","_jsx","ChakraTreeView"],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"TreeBranchIndentGuide.js","sources":["../../../src/components/Tree/TreeBranchIndentGuide.tsx"],"sourcesContent":[null],"names":["forwardRef","_jsx","ChakraTreeView"],"mappings":";;;;;;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,kBAAkB,GAAG,KAAK;AAEhC;AACA;AACA;AACA;AACA,MAAM,iBAAiB,GAAG;IACxB,0BAA0B,EAAE,CAAA,+BAAA,EAAkC,kBAAkB,CAAA,CAAA,CAAG;CAC3E;AAEV;AACA;AACA;AACA;AACA,MAAM,iBAAiB,GAAG;AACxB,IAAA,2BAA2B,EACzB,yDAAyD;CACnD;AAEV;AACA;AACA;AACA;AACA,MAAM,eAAe,GACnB,0DAA0D;AAE5D;AACA;AACA;AACA;AACA;AACA,MAAM,kBAAkB,GACtB,0IAA0I;AAErI,MAAM,qBAAqB,GAAGA,gBAAU,CAI7C,CACE,EACE,KAAK,GAAG,KAAK,EACb,UAAU,GAAG,qCAAqC,EAClD,UAAU,GAAG,gBAAgB,EAC7B,GAAG,KAAK,EACT,EACD,GAAG,KACD;;;;;;;;;;;;;;;;;;;;;;;;;AAyBF,IAAA,MAAM,IAAI,GAAG;AACX,QAAA,OAAO,EAAE,IAAI;AACb,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,eAAe,EAAE,KAAK;AACtB,QAAA,gBAAgB,EAAE,eAAe;AACjC,QAAA,KAAK,EAAE,UAAU;AACjB,QAAA,MAAM,EAAE,KAAK;AACb,QAAA,EAAE,EAAE,UAAU;KACN;AACV,IAAA,MAAM,IAAI,GAAG;AACX,QAAA,OAAO,EAAE,IAAI;AACb,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,eAAe,EAAE,GAAG;AACpB,QAAA,gBAAgB,EAAE,eAAe;AACjC,QAAA,KAAK,EAAE,KAAK;AACZ,QAAA,EAAE,EAAE,UAAU;KACN;IACV,MAAM,QAAQ,GAAG;AACf,UAAE;AACE,YAAA,wBAAwB,EAAE;AACxB,gBAAA,GAAG,iBAAiB;AACpB,gBAAA,GAAG,iBAAiB;AACrB,aAAA;;;AAGD,YAAA,0BAA0B,EAAE,iBAAiB;AAC7C,YAAA,yDAAyD,EACvD,iBAAiB;AACnB,YAAA,gCAAgC,EAAE,IAAI;AACtC,YAAA,iEAAiE,EAC/D,IAAI;AACN,YAAA,gDAAgD,EAAE;AAChD,gBAAA,GAAG,IAAI;AACP,gBAAA,aAAa,EAAE,GAAG;AACnB,aAAA;AACD,YAAA,0CAA0C,EAAE;AAC1C,gBAAA,GAAG,IAAI;AACP,gBAAA,MAAM,EAAE,KAAK;AACd,aAAA;AACD,YAAA,mDAAmD,EAAE;AACnD,gBAAA,GAAG,IAAI;AACP,gBAAA,aAAa,EAAE,GAAG;AAClB,gBAAA,gBAAgB,EAAE,kBAAkB;AACpC,gBAAA,MAAM,EAAE,CAAC;AACV,aAAA;AACD,YAAA,2EAA2E,EACzE;AACE,gBAAA,GAAG,IAAI;AACP,gBAAA,MAAM,EAAE,KAAK;AACd,aAAA;AACJ;UACD,SAAS;AAEb,IAAA,QACEC,cAAA,CAACC,cAAc,CAAC,iBAAiB,EAAA,EAC/B,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,KAAK,GAAG,aAAa,GAAG,UAAU,EACtC,GAAG,EAAE,QAAQ,EAAA,GACT,KAAK,EAAA,CACT;AAEN,CAAC;AAEH,qBAAqB,CAAC,WAAW,GAAG,uBAAuB;;;;"}
|
|
@@ -3,14 +3,113 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
3
3
|
import { forwardRef } from 'react';
|
|
4
4
|
import { TreeView } from '@chakra-ui/react';
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
6
|
+
// Extra per-level indentation in elbow mode. Guide-line trees read better
|
|
7
|
+
// with a little more horizontal air between the elbow and the row text,
|
|
8
|
+
// so each level indents this much further than the recipe default. The
|
|
9
|
+
// foot length does NOT grow with it (its default is derived from the
|
|
10
|
+
// original `--tree-indentation`), so the foot-to-text gap widens by the
|
|
11
|
+
// same amount.
|
|
12
|
+
const ELBOW_EXTRA_INDENT = '4px';
|
|
13
|
+
// The widened per-level indentation, defined on the guide's sibling rows
|
|
14
|
+
// so both the recipe's offset math and our pseudo-element math can share
|
|
15
|
+
// it. Root rows (depth 1) have no guide sibling, but their offset
|
|
16
|
+
// multiplies indentation by zero, so every level stays consistent.
|
|
17
|
+
const ELBOW_INDENT_VARS = {
|
|
18
|
+
'--tree-elbow-indentation': `calc(var(--tree-indentation) + ${ELBOW_EXTRA_INDENT})`,
|
|
19
|
+
};
|
|
20
|
+
// Re-derive the recipe's `--tree-indentation-offset` (which feeds
|
|
21
|
+
// `--tree-offset`, the row's padding-start) from the widened indentation.
|
|
22
|
+
// Must be set on the same elements the recipe defines it on
|
|
23
|
+
// (item / branch-control) — inheritance can't override those.
|
|
24
|
+
const ELBOW_OFFSET_VARS = {
|
|
25
|
+
'--tree-indentation-offset': 'calc(var(--tree-elbow-indentation) * var(--tree-depth))',
|
|
26
|
+
};
|
|
27
|
+
// The parent rail column, measured from a child row (item / branch-control).
|
|
28
|
+
// A row's content starts at its own `--tree-offset`, and the parent rail
|
|
29
|
+
// sits exactly one (widened) indentation to its left (verified against the
|
|
30
|
+
// recipe's offset math for both the guide and the row slots).
|
|
31
|
+
const ROW_RAIL_COLUMN = 'calc(var(--tree-offset) - var(--tree-elbow-indentation))';
|
|
32
|
+
// The same column, computed from the `branch` element itself. A branch
|
|
33
|
+
// only carries Ark's inline `--depth` (the recipe's `--tree-offset` is
|
|
34
|
+
// defined on item/branch-control, not here), so expand the recipe math:
|
|
35
|
+
// rail(x) = padding + indentation * (depth - 2) + icon * 0.5 * (depth - 1)
|
|
36
|
+
// — algebraically identical to ROW_RAIL_COLUMN for a row at `--depth`.
|
|
37
|
+
const BRANCH_RAIL_COLUMN = 'calc(var(--tree-padding-inline) + var(--tree-elbow-indentation) * (var(--depth) - 2) + var(--tree-icon-size) * 0.5 * (var(--depth) - 1))';
|
|
38
|
+
const TreeBranchIndentGuide = forwardRef(({ elbow = false, footLength = 'calc(var(--tree-indentation) - 4px)', guideColor = 'border.default', ...props }, ref) => {
|
|
39
|
+
// Chakra v3's `branchIndentGuide` slot renders ONE absolutely-positioned
|
|
40
|
+
// vertical line per `branchContent` (its first child), `height: 100%`,
|
|
41
|
+
// with `insetInlineStart` auto-calculated from tree depth. Don't add
|
|
42
|
+
// `ms`/`ps` (breaks the depth math) or `borderInlineStartWidth` (stacks
|
|
43
|
+
// a second 1px stroke on the slot's own bg-painted 1px) — only `bg`.
|
|
44
|
+
//
|
|
45
|
+
// That single full-height rail cannot form a `└` on the last row: it
|
|
46
|
+
// always paints past the last row's centre down to the content bottom.
|
|
47
|
+
// So in `elbow` mode the slot's own rail is hidden (`bg: transparent`,
|
|
48
|
+
// the element stays as the CSS sibling anchor) and the guide lines are
|
|
49
|
+
// re-drawn per row on the guide's sibling rows (`[data-part="item"]`
|
|
50
|
+
// leaves and `[data-part="branch"]` subtrees):
|
|
51
|
+
//
|
|
52
|
+
// - every row gets a `::before` foot — the horizontal cross-stroke
|
|
53
|
+
// from the rail column toward the row content, pinned to the row's
|
|
54
|
+
// vertical centre;
|
|
55
|
+
// - non-last rows get a full-height vertical segment (`├`); for a
|
|
56
|
+
// branch it is drawn on the `[data-part="branch"]` element so it
|
|
57
|
+
// passes through the whole expanded subtree, like the original rail
|
|
58
|
+
// (zIndex 1 for the same paint-above-row-hover reason);
|
|
59
|
+
// - the LAST row's segment stops at the row's vertical centre where
|
|
60
|
+
// the foot meets it (`└`); for a branch that means half the
|
|
61
|
+
// branch-control only, so an expanded last branch hangs below the
|
|
62
|
+
// elbow with no rail running past it.
|
|
63
|
+
const foot = {
|
|
64
|
+
content: '""',
|
|
65
|
+
position: 'absolute',
|
|
66
|
+
insetBlockStart: '50%',
|
|
67
|
+
insetInlineStart: ROW_RAIL_COLUMN,
|
|
68
|
+
width: footLength,
|
|
69
|
+
height: '1px',
|
|
70
|
+
bg: guideColor,
|
|
71
|
+
};
|
|
72
|
+
const rail = {
|
|
73
|
+
content: '""',
|
|
74
|
+
position: 'absolute',
|
|
75
|
+
insetBlockStart: '0',
|
|
76
|
+
insetInlineStart: ROW_RAIL_COLUMN,
|
|
77
|
+
width: '1px',
|
|
78
|
+
bg: guideColor,
|
|
79
|
+
};
|
|
80
|
+
const elbowCss = elbow
|
|
81
|
+
? {
|
|
82
|
+
'& ~ [data-part="item"]': {
|
|
83
|
+
...ELBOW_INDENT_VARS,
|
|
84
|
+
...ELBOW_OFFSET_VARS,
|
|
85
|
+
},
|
|
86
|
+
// branch-control reads --tree-elbow-indentation by inheritance,
|
|
87
|
+
// but the offset override must sit on the control itself.
|
|
88
|
+
'& ~ [data-part="branch"]': ELBOW_INDENT_VARS,
|
|
89
|
+
'& ~ [data-part="branch"] > [data-part="branch-control"]': ELBOW_OFFSET_VARS,
|
|
90
|
+
'& ~ [data-part="item"]::before': foot,
|
|
91
|
+
'& ~ [data-part="branch"] > [data-part="branch-control"]::before': foot,
|
|
92
|
+
'& ~ [data-part="item"]:not(:last-child)::after': {
|
|
93
|
+
...rail,
|
|
94
|
+
insetBlockEnd: '0',
|
|
95
|
+
},
|
|
96
|
+
'& ~ [data-part="item"]:last-child::after': {
|
|
97
|
+
...rail,
|
|
98
|
+
height: '50%',
|
|
99
|
+
},
|
|
100
|
+
'& ~ [data-part="branch"]:not(:last-child)::before': {
|
|
101
|
+
...rail,
|
|
102
|
+
insetBlockEnd: '0',
|
|
103
|
+
insetInlineStart: BRANCH_RAIL_COLUMN,
|
|
104
|
+
zIndex: 1,
|
|
105
|
+
},
|
|
106
|
+
'& ~ [data-part="branch"]:last-child > [data-part="branch-control"]::after': {
|
|
107
|
+
...rail,
|
|
108
|
+
height: '50%',
|
|
109
|
+
},
|
|
110
|
+
}
|
|
111
|
+
: undefined;
|
|
112
|
+
return (jsx(TreeView.BranchIndentGuide, { ref: ref, bg: elbow ? 'transparent' : guideColor, css: elbowCss, ...props }));
|
|
14
113
|
});
|
|
15
114
|
TreeBranchIndentGuide.displayName = 'TreeBranchIndentGuide';
|
|
16
115
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeBranchIndentGuide.mjs","sources":["../../../src/components/Tree/TreeBranchIndentGuide.tsx"],"sourcesContent":[null],"names":["_jsx","ChakraTreeView"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"TreeBranchIndentGuide.mjs","sources":["../../../src/components/Tree/TreeBranchIndentGuide.tsx"],"sourcesContent":[null],"names":["_jsx","ChakraTreeView"],"mappings":";;;;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,kBAAkB,GAAG,KAAK;AAEhC;AACA;AACA;AACA;AACA,MAAM,iBAAiB,GAAG;IACxB,0BAA0B,EAAE,CAAA,+BAAA,EAAkC,kBAAkB,CAAA,CAAA,CAAG;CAC3E;AAEV;AACA;AACA;AACA;AACA,MAAM,iBAAiB,GAAG;AACxB,IAAA,2BAA2B,EACzB,yDAAyD;CACnD;AAEV;AACA;AACA;AACA;AACA,MAAM,eAAe,GACnB,0DAA0D;AAE5D;AACA;AACA;AACA;AACA;AACA,MAAM,kBAAkB,GACtB,0IAA0I;AAErI,MAAM,qBAAqB,GAAG,UAAU,CAI7C,CACE,EACE,KAAK,GAAG,KAAK,EACb,UAAU,GAAG,qCAAqC,EAClD,UAAU,GAAG,gBAAgB,EAC7B,GAAG,KAAK,EACT,EACD,GAAG,KACD;;;;;;;;;;;;;;;;;;;;;;;;;AAyBF,IAAA,MAAM,IAAI,GAAG;AACX,QAAA,OAAO,EAAE,IAAI;AACb,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,eAAe,EAAE,KAAK;AACtB,QAAA,gBAAgB,EAAE,eAAe;AACjC,QAAA,KAAK,EAAE,UAAU;AACjB,QAAA,MAAM,EAAE,KAAK;AACb,QAAA,EAAE,EAAE,UAAU;KACN;AACV,IAAA,MAAM,IAAI,GAAG;AACX,QAAA,OAAO,EAAE,IAAI;AACb,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,eAAe,EAAE,GAAG;AACpB,QAAA,gBAAgB,EAAE,eAAe;AACjC,QAAA,KAAK,EAAE,KAAK;AACZ,QAAA,EAAE,EAAE,UAAU;KACN;IACV,MAAM,QAAQ,GAAG;AACf,UAAE;AACE,YAAA,wBAAwB,EAAE;AACxB,gBAAA,GAAG,iBAAiB;AACpB,gBAAA,GAAG,iBAAiB;AACrB,aAAA;;;AAGD,YAAA,0BAA0B,EAAE,iBAAiB;AAC7C,YAAA,yDAAyD,EACvD,iBAAiB;AACnB,YAAA,gCAAgC,EAAE,IAAI;AACtC,YAAA,iEAAiE,EAC/D,IAAI;AACN,YAAA,gDAAgD,EAAE;AAChD,gBAAA,GAAG,IAAI;AACP,gBAAA,aAAa,EAAE,GAAG;AACnB,aAAA;AACD,YAAA,0CAA0C,EAAE;AAC1C,gBAAA,GAAG,IAAI;AACP,gBAAA,MAAM,EAAE,KAAK;AACd,aAAA;AACD,YAAA,mDAAmD,EAAE;AACnD,gBAAA,GAAG,IAAI;AACP,gBAAA,aAAa,EAAE,GAAG;AAClB,gBAAA,gBAAgB,EAAE,kBAAkB;AACpC,gBAAA,MAAM,EAAE,CAAC;AACV,aAAA;AACD,YAAA,2EAA2E,EACzE;AACE,gBAAA,GAAG,IAAI;AACP,gBAAA,MAAM,EAAE,KAAK;AACd,aAAA;AACJ;UACD,SAAS;AAEb,IAAA,QACEA,GAAA,CAACC,QAAc,CAAC,iBAAiB,EAAA,EAC/B,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,KAAK,GAAG,aAAa,GAAG,UAAU,EACtC,GAAG,EAAE,QAAQ,EAAA,GACT,KAAK,EAAA,CACT;AAEN,CAAC;AAEH,qBAAqB,CAAC,WAAW,GAAG,uBAAuB;;;;"}
|
package/dist/index.d.ts
CHANGED
|
@@ -35,7 +35,6 @@ export * from './components/LogicianProvider';
|
|
|
35
35
|
export * from './components/Markdown';
|
|
36
36
|
export * from './components/Masonry';
|
|
37
37
|
export * from './components/MaxLengthIndicator';
|
|
38
|
-
export * from './components/MDXEditor';
|
|
39
38
|
export * from './components/Menu';
|
|
40
39
|
export * from './components/Modal';
|
|
41
40
|
export * from './components/MonthPicker';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAG5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AAGtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AAGvC,YAAY,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AACrE,cAAc,yBAAyB,CAAC;AAGxC,YAAY,EACV,WAAW,EACX,SAAS,IAAI,eAAe,GAC7B,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAG3E,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AAGxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AAGvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,iCAAiC,CAAC;AAChD,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAG5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AAGtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AAGvC,YAAY,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AACrE,cAAc,yBAAyB,CAAC;AAGxC,YAAY,EACV,WAAW,EACX,SAAS,IAAI,eAAe,GAC7B,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAG3E,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AAGxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AAGvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,iCAAiC,CAAC;AAChD,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AAGrC,cAAc,yBAAyB,CAAC;AAGxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AAGtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAG5C,cAAc,oBAAoB,CAAC;AACnC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AAGpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AAEtC,OAAO,EACL,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,IAAI,GACL,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,YAAY,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGnE,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AACxD,OAAO,EACL,MAAM,EACN,KAAK,kBAAkB,EACvB,cAAc,GACf,MAAM,gBAAgB,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -54,7 +54,6 @@ var LogicianProvider = require('./components/LogicianProvider/LogicianProvider.j
|
|
|
54
54
|
var Markdown = require('./components/Markdown/Markdown.js');
|
|
55
55
|
var Masonry = require('./components/Masonry/Masonry.js');
|
|
56
56
|
var MaxLengthIndicator = require('./components/MaxLengthIndicator/MaxLengthIndicator.js');
|
|
57
|
-
var MDXEditor = require('./components/MDXEditor/MDXEditor.js');
|
|
58
57
|
var Menu = require('./components/Menu/Menu.js');
|
|
59
58
|
var MenuItem = require('./components/Menu/MenuItem.js');
|
|
60
59
|
var MenuList = require('./components/Menu/MenuList.js');
|
|
@@ -232,7 +231,6 @@ exports.Markdown = Markdown.Markdown;
|
|
|
232
231
|
exports.baseMarkdownComponents = Markdown.baseMarkdownComponents;
|
|
233
232
|
exports.Masonry = Masonry.Masonry;
|
|
234
233
|
exports.MaxLengthIndicator = MaxLengthIndicator.MaxLengthIndicator;
|
|
235
|
-
exports.MDXEditor = MDXEditor.MDXEditor;
|
|
236
234
|
exports.Menu = Menu.Menu;
|
|
237
235
|
exports.MenuItem = MenuItem.MenuItem;
|
|
238
236
|
exports.MenuList = MenuList.MenuList;
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/index.mjs
CHANGED
|
@@ -52,7 +52,6 @@ export { LogicianProvider } from './components/LogicianProvider/LogicianProvider
|
|
|
52
52
|
export { Markdown, baseMarkdownComponents } from './components/Markdown/Markdown.mjs';
|
|
53
53
|
export { Masonry } from './components/Masonry/Masonry.mjs';
|
|
54
54
|
export { MaxLengthIndicator } from './components/MaxLengthIndicator/MaxLengthIndicator.mjs';
|
|
55
|
-
export { MDXEditor } from './components/MDXEditor/MDXEditor.mjs';
|
|
56
55
|
export { Menu } from './components/Menu/Menu.mjs';
|
|
57
56
|
export { MenuItem } from './components/Menu/MenuItem.mjs';
|
|
58
57
|
export { MenuList } from './components/Menu/MenuList.mjs';
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mindlogic-ai/logician-ui",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.0-alpha.7",
|
|
4
4
|
"description": "A comprehensive React design system built on Chakra UI",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -61,7 +61,6 @@
|
|
|
61
61
|
},
|
|
62
62
|
"dependencies": {
|
|
63
63
|
"@dagrejs/dagre": "^3.0.0",
|
|
64
|
-
"@mdxeditor/editor": "^3.45.1",
|
|
65
64
|
"@types/lodash": "^4.17.20",
|
|
66
65
|
"@xyflow/react": "^12.10.2",
|
|
67
66
|
"chakra-dayzed-datepicker": "3.0.0",
|
|
@@ -0,0 +1,220 @@
|
|
|
1
|
+
import { Box, HStack, Stack, Text } from '@chakra-ui/react';
|
|
2
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
3
|
+
|
|
4
|
+
import { Tree } from './Tree';
|
|
5
|
+
import { createTreeCollection } from './index';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Stories for the `elbow` option on `Tree.BranchIndentGuide`.
|
|
9
|
+
*
|
|
10
|
+
* `elbow` turns the plain vertical rails into `├` / `└` guide lines:
|
|
11
|
+
* every row gets a horizontal foot joining it to its parent rail, and
|
|
12
|
+
* the last row of each group stops at its centre (`└`). `guideColor`
|
|
13
|
+
* customizes the line color (default `border.default`, which flips
|
|
14
|
+
* with color mode). Pass both through the `indentGuide` element:
|
|
15
|
+
*
|
|
16
|
+
* <Tree.Node indentGuide={<Tree.BranchIndentGuide elbow />} ... />
|
|
17
|
+
*/
|
|
18
|
+
|
|
19
|
+
interface Node {
|
|
20
|
+
id: string;
|
|
21
|
+
name: string;
|
|
22
|
+
children?: Node[];
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
const orgSample: Node = {
|
|
26
|
+
id: 'ROOT',
|
|
27
|
+
name: '',
|
|
28
|
+
children: [
|
|
29
|
+
{
|
|
30
|
+
id: 'hq',
|
|
31
|
+
name: '본사',
|
|
32
|
+
children: [
|
|
33
|
+
{
|
|
34
|
+
id: 'hq-dev',
|
|
35
|
+
name: '개발본부',
|
|
36
|
+
children: [
|
|
37
|
+
{
|
|
38
|
+
id: 'hq-dev-backend',
|
|
39
|
+
name: '백엔드그룹',
|
|
40
|
+
children: [
|
|
41
|
+
{ id: 'hq-dev-backend-api', name: 'API팀' },
|
|
42
|
+
{ id: 'hq-dev-backend-db', name: 'DB팀' },
|
|
43
|
+
{ id: 'hq-dev-backend-platform', name: '플랫폼팀' },
|
|
44
|
+
],
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
id: 'hq-dev-frontend',
|
|
48
|
+
name: '프론트엔드그룹',
|
|
49
|
+
children: [
|
|
50
|
+
{ id: 'hq-dev-frontend-web', name: '웹팀' },
|
|
51
|
+
{ id: 'hq-dev-frontend-mobile', name: '모바일팀' },
|
|
52
|
+
],
|
|
53
|
+
},
|
|
54
|
+
],
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
id: 'hq-sales',
|
|
58
|
+
name: '영업본부',
|
|
59
|
+
children: [
|
|
60
|
+
{ id: 'hq-sales-domestic', name: '국내영업팀' },
|
|
61
|
+
{ id: 'hq-sales-global', name: '해외영업팀' },
|
|
62
|
+
],
|
|
63
|
+
},
|
|
64
|
+
],
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
id: 'rnd',
|
|
68
|
+
name: 'R&D센터',
|
|
69
|
+
children: [
|
|
70
|
+
{ id: 'rnd-ml', name: '머신러닝팀' },
|
|
71
|
+
{ id: 'rnd-data', name: '데이터팀' },
|
|
72
|
+
],
|
|
73
|
+
},
|
|
74
|
+
],
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
const orgCollection = createTreeCollection<Node>({
|
|
78
|
+
rootNode: orgSample,
|
|
79
|
+
nodeToValue: (node) => node.id,
|
|
80
|
+
nodeToString: (node) => node.name,
|
|
81
|
+
});
|
|
82
|
+
|
|
83
|
+
const allBranchIds = (function collect(n: Node): string[] {
|
|
84
|
+
if (!n.children) return [];
|
|
85
|
+
return n.children.flatMap((c) => (c.children ? [c.id, ...collect(c)] : []));
|
|
86
|
+
})(orgSample);
|
|
87
|
+
|
|
88
|
+
const renderNode = ({
|
|
89
|
+
node,
|
|
90
|
+
nodeState,
|
|
91
|
+
}: {
|
|
92
|
+
node: Node;
|
|
93
|
+
nodeState: { isBranch: boolean };
|
|
94
|
+
}) =>
|
|
95
|
+
nodeState.isBranch ? (
|
|
96
|
+
<Tree.BranchControl>
|
|
97
|
+
<Tree.BranchIndicator />
|
|
98
|
+
<Tree.BranchText>{node.name}</Tree.BranchText>
|
|
99
|
+
</Tree.BranchControl>
|
|
100
|
+
) : (
|
|
101
|
+
<Tree.Item>
|
|
102
|
+
<Tree.ItemText>{node.name}</Tree.ItemText>
|
|
103
|
+
</Tree.Item>
|
|
104
|
+
);
|
|
105
|
+
|
|
106
|
+
const meta = {
|
|
107
|
+
title: 'Components/Tree',
|
|
108
|
+
component: Tree.Root,
|
|
109
|
+
parameters: { layout: 'padded' },
|
|
110
|
+
} satisfies Meta<typeof Tree.Root>;
|
|
111
|
+
|
|
112
|
+
export default meta;
|
|
113
|
+
|
|
114
|
+
type Story = StoryObj<typeof meta>;
|
|
115
|
+
|
|
116
|
+
/**
|
|
117
|
+
* `elbow` guides — the innermost rail grows a horizontal foot so each
|
|
118
|
+
* row connects to its parent column like a classic file-tree.
|
|
119
|
+
*/
|
|
120
|
+
export const WithElbowGuides: Story = {
|
|
121
|
+
args: {
|
|
122
|
+
collection: orgCollection,
|
|
123
|
+
'aria-label': '조직',
|
|
124
|
+
defaultExpandedValue: allBranchIds,
|
|
125
|
+
defaultSelectedValue: ['hq-dev-frontend-web'],
|
|
126
|
+
},
|
|
127
|
+
render: (args) => (
|
|
128
|
+
<Box maxWidth="360px">
|
|
129
|
+
<Tree.Root {...args}>
|
|
130
|
+
<Tree.Tree>
|
|
131
|
+
<Tree.Node
|
|
132
|
+
indentGuide={<Tree.BranchIndentGuide elbow />}
|
|
133
|
+
render={renderNode}
|
|
134
|
+
/>
|
|
135
|
+
</Tree.Tree>
|
|
136
|
+
</Tree.Root>
|
|
137
|
+
</Box>
|
|
138
|
+
),
|
|
139
|
+
};
|
|
140
|
+
|
|
141
|
+
/**
|
|
142
|
+
* `guideColor` — customize the guide line color with any Chakra color
|
|
143
|
+
* token. The default `border.default` flips with color mode; pick a
|
|
144
|
+
* stronger token (or any palette color) for more contrast.
|
|
145
|
+
*/
|
|
146
|
+
export const GuideColor: Story = {
|
|
147
|
+
args: {
|
|
148
|
+
collection: orgCollection,
|
|
149
|
+
'aria-label': '조직',
|
|
150
|
+
defaultExpandedValue: allBranchIds,
|
|
151
|
+
},
|
|
152
|
+
render: (args) => (
|
|
153
|
+
<HStack align="flex-start" gap={8}>
|
|
154
|
+
{(
|
|
155
|
+
[
|
|
156
|
+
['border.default (기본)', undefined],
|
|
157
|
+
['border.strong', 'border.strong'],
|
|
158
|
+
['primary.light', 'primary.light'],
|
|
159
|
+
] as const
|
|
160
|
+
).map(([label, guideColor]) => (
|
|
161
|
+
<Stack key={label} gap={2} width="280px">
|
|
162
|
+
<Text fontSize="sm" fontWeight="semibold" color="fg.muted">
|
|
163
|
+
{label}
|
|
164
|
+
</Text>
|
|
165
|
+
<Tree.Root {...args}>
|
|
166
|
+
<Tree.Tree>
|
|
167
|
+
<Tree.Node
|
|
168
|
+
indentGuide={
|
|
169
|
+
<Tree.BranchIndentGuide elbow guideColor={guideColor} />
|
|
170
|
+
}
|
|
171
|
+
render={renderNode}
|
|
172
|
+
/>
|
|
173
|
+
</Tree.Tree>
|
|
174
|
+
</Tree.Root>
|
|
175
|
+
</Stack>
|
|
176
|
+
))}
|
|
177
|
+
</HStack>
|
|
178
|
+
),
|
|
179
|
+
};
|
|
180
|
+
|
|
181
|
+
/**
|
|
182
|
+
* Plain vertical rails (default) vs. `elbow` guides, side by side.
|
|
183
|
+
*/
|
|
184
|
+
export const ElbowGuideComparison: Story = {
|
|
185
|
+
args: {
|
|
186
|
+
collection: orgCollection,
|
|
187
|
+
'aria-label': '조직',
|
|
188
|
+
defaultExpandedValue: allBranchIds,
|
|
189
|
+
},
|
|
190
|
+
render: (args) => (
|
|
191
|
+
<HStack align="flex-start" gap={8}>
|
|
192
|
+
<Stack gap={2} width="320px">
|
|
193
|
+
<Text fontSize="sm" fontWeight="semibold" color="fg.muted">
|
|
194
|
+
기본 — 수직 레일
|
|
195
|
+
</Text>
|
|
196
|
+
<Tree.Root {...args}>
|
|
197
|
+
<Tree.Tree>
|
|
198
|
+
<Tree.Node
|
|
199
|
+
indentGuide={<Tree.BranchIndentGuide />}
|
|
200
|
+
render={renderNode}
|
|
201
|
+
/>
|
|
202
|
+
</Tree.Tree>
|
|
203
|
+
</Tree.Root>
|
|
204
|
+
</Stack>
|
|
205
|
+
<Stack gap={2} width="320px">
|
|
206
|
+
<Text fontSize="sm" fontWeight="semibold" color="fg.muted">
|
|
207
|
+
elbow — ├ / └ 가이드 라인
|
|
208
|
+
</Text>
|
|
209
|
+
<Tree.Root {...args}>
|
|
210
|
+
<Tree.Tree>
|
|
211
|
+
<Tree.Node
|
|
212
|
+
indentGuide={<Tree.BranchIndentGuide elbow />}
|
|
213
|
+
render={renderNode}
|
|
214
|
+
/>
|
|
215
|
+
</Tree.Tree>
|
|
216
|
+
</Tree.Root>
|
|
217
|
+
</Stack>
|
|
218
|
+
</HStack>
|
|
219
|
+
),
|
|
220
|
+
};
|