@ankhorage/zora 20.1.0 → 20.1.2
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/CHANGELOG.md +12 -0
- package/package.json +4 -4
- package/web-dist/tree-view/TreeView.js +32 -32
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 20.1.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 4a879e2: Update Ankhorage dependencies: `@ankhorage/contracts`, `@ankhorage/surface`, `@ankhorage/utility`.
|
|
8
|
+
|
|
9
|
+
## 20.1.1
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- c9f2c5d: Emit web-only component artifacts with React's production JSX runtime so Next.js SSR consumers can prerender them safely.
|
|
14
|
+
|
|
3
15
|
## 20.1.0
|
|
4
16
|
|
|
5
17
|
### Minor Changes
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ankhorage/zora",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "20.1.
|
|
4
|
+
"version": "20.1.2",
|
|
5
5
|
"description": "Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.",
|
|
6
6
|
"homepage": "https://github.com/ankhorage/zora#readme",
|
|
7
7
|
"bugs": {
|
|
@@ -41,9 +41,9 @@
|
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
43
|
"@ankhorage/color-theory": "^0.3.1",
|
|
44
|
-
"@ankhorage/contracts": "^22.0.
|
|
45
|
-
"@ankhorage/surface": "^9.0.
|
|
46
|
-
"@ankhorage/utility": "^1.
|
|
44
|
+
"@ankhorage/contracts": "^22.0.3",
|
|
45
|
+
"@ankhorage/surface": "^9.0.3",
|
|
46
|
+
"@ankhorage/utility": "^1.4.0",
|
|
47
47
|
"expo-document-picker": "~57.0.1",
|
|
48
48
|
"expo-image-picker": "~57.0.16"
|
|
49
49
|
},
|
|
@@ -8,7 +8,7 @@ function toggleExpandedIds(expandedIds, id) {
|
|
|
8
8
|
|
|
9
9
|
// src/features/tree-view/adapters/inbound/web-artifact/TreeItemRow.tsx
|
|
10
10
|
import React from "react";
|
|
11
|
-
import {
|
|
11
|
+
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
12
12
|
import { createElement } from "react";
|
|
13
13
|
function TreeItemRow(props) {
|
|
14
14
|
const { node } = props;
|
|
@@ -21,12 +21,12 @@ function TreeItemRow(props) {
|
|
|
21
21
|
selected,
|
|
22
22
|
expanded,
|
|
23
23
|
hasChildren
|
|
24
|
-
}) ?? /* @__PURE__ */
|
|
24
|
+
}) ?? /* @__PURE__ */ jsx(TreeItemDefaultContent, {
|
|
25
25
|
node
|
|
26
|
-
}
|
|
27
|
-
return /* @__PURE__ */
|
|
26
|
+
});
|
|
27
|
+
return /* @__PURE__ */ jsxs(Fragment, {
|
|
28
28
|
children: [
|
|
29
|
-
/* @__PURE__ */
|
|
29
|
+
/* @__PURE__ */ jsxs("div", {
|
|
30
30
|
"aria-disabled": node.disabled === true ? true : undefined,
|
|
31
31
|
"aria-expanded": hasChildren ? expanded : undefined,
|
|
32
32
|
"aria-selected": selected,
|
|
@@ -37,58 +37,58 @@ function TreeItemRow(props) {
|
|
|
37
37
|
style: createRowStyle(props.depth, selected, node.disabled, props.onSelect !== undefined),
|
|
38
38
|
children: [
|
|
39
39
|
content,
|
|
40
|
-
/* @__PURE__ */
|
|
40
|
+
/* @__PURE__ */ jsx(TreeItemActions, {
|
|
41
41
|
actions: node.actions
|
|
42
|
-
}
|
|
43
|
-
/* @__PURE__ */
|
|
42
|
+
}),
|
|
43
|
+
/* @__PURE__ */ jsx(TreeItemExpander, {
|
|
44
44
|
expanded,
|
|
45
45
|
hasChildren,
|
|
46
46
|
nodeId: node.id,
|
|
47
47
|
onToggleExpand: props.onToggleExpand
|
|
48
|
-
}
|
|
48
|
+
})
|
|
49
49
|
]
|
|
50
|
-
}
|
|
51
|
-
hasChildren && expanded ? /* @__PURE__ */
|
|
50
|
+
}),
|
|
51
|
+
hasChildren && expanded ? /* @__PURE__ */ jsx(TreeItemChildren, {
|
|
52
52
|
...props
|
|
53
|
-
}
|
|
53
|
+
}) : null
|
|
54
54
|
]
|
|
55
|
-
}
|
|
55
|
+
});
|
|
56
56
|
}
|
|
57
57
|
function TreeItemDefaultContent({
|
|
58
58
|
node
|
|
59
59
|
}) {
|
|
60
|
-
return /* @__PURE__ */
|
|
60
|
+
return /* @__PURE__ */ jsxs(Fragment, {
|
|
61
61
|
children: [
|
|
62
|
-
node.icon === undefined ? null : /* @__PURE__ */
|
|
62
|
+
node.icon === undefined ? null : /* @__PURE__ */ jsx("span", {
|
|
63
63
|
"aria-hidden": "true",
|
|
64
64
|
style: ICON_STYLE,
|
|
65
65
|
children: node.icon
|
|
66
|
-
}
|
|
67
|
-
/* @__PURE__ */
|
|
66
|
+
}),
|
|
67
|
+
/* @__PURE__ */ jsx("span", {
|
|
68
68
|
style: LABEL_STYLE,
|
|
69
69
|
children: node.label
|
|
70
|
-
}
|
|
71
|
-
node.meta === undefined ? null : /* @__PURE__ */
|
|
70
|
+
}),
|
|
71
|
+
node.meta === undefined ? null : /* @__PURE__ */ jsx("span", {
|
|
72
72
|
style: META_STYLE,
|
|
73
73
|
children: node.meta
|
|
74
|
-
}
|
|
74
|
+
})
|
|
75
75
|
]
|
|
76
|
-
}
|
|
76
|
+
});
|
|
77
77
|
}
|
|
78
78
|
function TreeItemActions({ actions }) {
|
|
79
79
|
if (actions === undefined)
|
|
80
80
|
return null;
|
|
81
|
-
return /* @__PURE__ */
|
|
81
|
+
return /* @__PURE__ */ jsx("span", {
|
|
82
82
|
onClick: (event) => event.stopPropagation(),
|
|
83
83
|
onKeyDown: (event) => event.stopPropagation(),
|
|
84
84
|
style: INLINE_STYLE,
|
|
85
85
|
children: actions
|
|
86
|
-
}
|
|
86
|
+
});
|
|
87
87
|
}
|
|
88
88
|
function TreeItemExpander(props) {
|
|
89
89
|
if (!props.hasChildren)
|
|
90
90
|
return null;
|
|
91
|
-
return /* @__PURE__ */
|
|
91
|
+
return /* @__PURE__ */ jsx("button", {
|
|
92
92
|
"aria-label": props.expanded ? "Collapse" : "Expand",
|
|
93
93
|
onClick: (event) => {
|
|
94
94
|
event.stopPropagation();
|
|
@@ -97,10 +97,10 @@ function TreeItemExpander(props) {
|
|
|
97
97
|
style: EXPANDER_STYLE,
|
|
98
98
|
type: "button",
|
|
99
99
|
children: props.expanded ? "⌄" : "›"
|
|
100
|
-
}
|
|
100
|
+
});
|
|
101
101
|
}
|
|
102
102
|
function TreeItemChildren(props) {
|
|
103
|
-
return /* @__PURE__ */
|
|
103
|
+
return /* @__PURE__ */ jsx("div", {
|
|
104
104
|
role: "group",
|
|
105
105
|
children: props.node.children?.map((child) => /* @__PURE__ */ createElement(TreeItemRow, {
|
|
106
106
|
...props,
|
|
@@ -108,7 +108,7 @@ function TreeItemChildren(props) {
|
|
|
108
108
|
depth: props.depth + 1,
|
|
109
109
|
node: child
|
|
110
110
|
}))
|
|
111
|
-
}
|
|
111
|
+
});
|
|
112
112
|
}
|
|
113
113
|
function selectNode(props) {
|
|
114
114
|
if (!props.node.disabled)
|
|
@@ -171,7 +171,7 @@ var EXPANDER_STYLE = {
|
|
|
171
171
|
};
|
|
172
172
|
|
|
173
173
|
// src/features/tree-view/adapters/inbound/web-artifact/TreeView.tsx
|
|
174
|
-
import {
|
|
174
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
175
175
|
function TreeView({
|
|
176
176
|
nodes,
|
|
177
177
|
selectedId,
|
|
@@ -193,12 +193,12 @@ function TreeView({
|
|
|
193
193
|
setInternalExpandedIds(nextExpandedIds);
|
|
194
194
|
onExpandedChange?.(nextExpandedIds);
|
|
195
195
|
}, [expandedIds, isControlled, onExpandedChange]);
|
|
196
|
-
return /* @__PURE__ */
|
|
196
|
+
return /* @__PURE__ */ jsx2("div", {
|
|
197
197
|
"aria-label": ariaLabel,
|
|
198
198
|
className,
|
|
199
199
|
role: "tree",
|
|
200
200
|
style: { ...TREE_STYLE, ...style },
|
|
201
|
-
children: nodes.map((node) => /* @__PURE__ */
|
|
201
|
+
children: nodes.map((node) => /* @__PURE__ */ jsx2(TreeItemRow, {
|
|
202
202
|
depth: 0,
|
|
203
203
|
expandedIds,
|
|
204
204
|
node,
|
|
@@ -206,8 +206,8 @@ function TreeView({
|
|
|
206
206
|
onToggleExpand: handleToggleExpand,
|
|
207
207
|
renderItem,
|
|
208
208
|
selectedId
|
|
209
|
-
}, node.id
|
|
210
|
-
}
|
|
209
|
+
}, node.id))
|
|
210
|
+
});
|
|
211
211
|
}
|
|
212
212
|
var TREE_STYLE = {
|
|
213
213
|
display: "flex",
|