@ark-ui/solid
Version:
A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.
322 lines (314 loc) • 11.3 kB
JavaScript
import { useTreeViewContext, tree_view_exports, useTreeView } from './AH5KB6LR.js';
import { createTreeCollection } from './APULXWCH.js';
import { createSplitProps } from './ZMHI4GDJ.js';
import { createContext } from './THN5C4U6.js';
import { __export } from './ESLJRKWD.js';
import { createComponent, mergeProps, Show, Index as Index$1, template, insert, memo, effect, setAttribute, Dynamic, untrack } from 'solid-js/web';
import { getRootNode, nodeToString, nodeToValue, keyPathToKey, jsonNodeToElement, getAccessibleDescription } from '@zag-js/json-tree-utils';
import { Index, splitProps, createMemo, For } from 'solid-js';
// src/components/json-tree-view/get-branch-value.ts
function getBranchValues(tree, depth) {
let values = [];
tree.visit({
onEnter: (node, indexPath) => {
if (indexPath.length === 0) return;
if (tree.isBranchNode(node) && indexPath.length <= depth) {
values.push(tree.getNodeValue(node));
}
}
});
return values;
}
// src/components/json-tree-view/json-tree-view-props-context.ts
var [JsonTreeViewPropsProvider, useJsonTreeViewPropsContext] = createContext({
hookName: "useJsonTreeViewPropsContext",
providerName: "<JsonTreeViewPropsProvider />"
});
// src/components/json-tree-view/json-tree-view-root.tsx
var splitJsonTreeViewProps = createSplitProps();
var JsonTreeViewRoot = (props) => {
const [jsonTreeProps, localProps] = splitJsonTreeViewProps(props, ["maxPreviewItems", "collapseStringsAfterLength", "quotesOnKeys", "groupArraysAfterLength", "showNonenumerable"]);
const [jsonProps, restProps] = splitProps(localProps, ["data", "defaultExpandedDepth"]);
const collection = createMemo(() => {
return createTreeCollection({
nodeToValue,
nodeToString,
rootNode: getRootNode(jsonProps.data)
});
});
const defaultExpandedValue = createMemo(() => {
return jsonProps.defaultExpandedDepth != null ? getBranchValues(collection(), jsonProps.defaultExpandedDepth) : void 0;
});
return createComponent(JsonTreeViewPropsProvider, {
value: jsonTreeProps,
get children() {
return createComponent(tree_view_exports.Root, mergeProps({
"data-scope": "json-tree-view",
get collection() {
return collection();
},
get defaultExpandedValue() {
return defaultExpandedValue();
}
}, restProps, {
get children() {
return props.children;
}
}));
}
});
};
var JsonTreeViewRootProvider = (props) => {
return createComponent(tree_view_exports.RootProvider, mergeProps({
"data-scope": "json-tree-view"
}, props));
};
var _tmpl$ = /* @__PURE__ */ template(`<span data-kind=key>`);
var _tmpl$2 = /* @__PURE__ */ template(`<span data-kind=colon>: `);
var JsonTreeViewKeyNode = (props) => {
const key = createMemo(() => keyPathToKey(props.node.keyPath));
return [(() => {
var _el$ = _tmpl$();
insert(_el$, (() => {
var _c$ = memo(() => !!props.showQuotes);
return () => _c$() ? `"${key()}"` : key();
})());
effect(() => setAttribute(_el$, "data-non-enumerable", props.node.isNonEnumerable ? "" : void 0));
return _el$;
})(), _tmpl$2()];
};
var JsonTreeViewValueNode = (props) => {
if (props.node.type === "text") {
return memo(() => props.renderValue?.(props.node) ?? props.node.value);
}
return createComponent(Dynamic, {
get component() {
return props.node.tagName;
},
get ["data-root"]() {
return props.node.properties.root ? "" : void 0;
},
get ["data-type"]() {
return props.node.properties.nodeType;
},
get ["data-kind"]() {
return props.node.properties.kind;
},
get children() {
return createComponent(For, {
get each() {
return props.node.children;
},
children: (child) => createComponent(JsonTreeViewValueNode, {
node: child,
get renderValue() {
return props.renderValue;
}
})
});
}
});
};
// src/components/json-tree-view/json-tree-view-node.tsx
var scopeProps = {
"data-scope": "json-tree-view"
};
function JsonTreeViewNode(props) {
const tree = useTreeViewContext();
const nodeState = createMemo(() => tree().getNodeState({
node: props.node,
indexPath: props.indexPath
}));
const options = useJsonTreeViewPropsContext();
const key = createMemo(() => keyPathToKey(props.node.keyPath, {
excludeRoot: true
}));
const valueNode = createMemo(() => jsonNodeToElement(props.node, options));
const nodeProps = createMemo(() => {
const desc = getAccessibleDescription(props.node);
const line = props.indexPath.reduce((acc, curr) => acc + curr, 1);
const lineLength = props.indexPath.length - 1;
return {
...scopeProps,
"aria-label": desc,
"data-line": line,
style: {
["--line-length"]: lineLength
}
};
});
return createComponent(tree_view_exports.NodeProvider, {
get node() {
return props.node;
},
get indexPath() {
return props.indexPath;
},
get children() {
return createComponent(Show, {
get when() {
return nodeState().isBranch;
},
get fallback() {
return createComponent(tree_view_exports.Item, mergeProps(nodeProps, {
get children() {
return createComponent(tree_view_exports.ItemText, mergeProps(scopeProps, {
get children() {
return [createComponent(Show, {
get when() {
return key();
},
get children() {
return createComponent(JsonTreeViewKeyNode, {
get node() {
return props.node;
},
get showQuotes() {
return options.quotesOnKeys;
}
});
}
}), createComponent(JsonTreeViewValueNode, {
get node() {
return valueNode();
},
get renderValue() {
return props.renderValue;
}
})];
}
}));
}
}));
},
get children() {
return createComponent(tree_view_exports.Branch, mergeProps(scopeProps, {
get children() {
return [createComponent(tree_view_exports.BranchControl, mergeProps(nodeProps, {
get children() {
return [createComponent(Show, {
get when() {
return props.arrow;
},
get children() {
return createComponent(tree_view_exports.BranchIndicator, mergeProps(scopeProps, {
get children() {
return props.arrow;
}
}));
}
}), createComponent(tree_view_exports.BranchText, mergeProps(scopeProps, {
get children() {
return [createComponent(Show, {
get when() {
return key();
},
get children() {
return createComponent(JsonTreeViewKeyNode, {
get node() {
return props.node;
},
get showQuotes() {
return options.quotesOnKeys;
}
});
}
}), createComponent(JsonTreeViewValueNode, {
get node() {
return valueNode();
},
get renderValue() {
return props.renderValue;
}
})];
}
}))];
}
})), createComponent(tree_view_exports.BranchContent, mergeProps(scopeProps, {
get children() {
return [createComponent(Show, {
get when() {
return typeof props.indentGuide === "boolean";
},
get fallback() {
return props.indentGuide;
},
get children() {
return createComponent(tree_view_exports.BranchIndentGuide, {});
}
}), createComponent(Index$1, {
get each() {
return props.node.children;
},
children: (child, index) => createComponent(JsonTreeViewNode, mergeProps(props, {
get node() {
return child();
},
get indexPath() {
return [...props.indexPath, index];
}
}))
})];
}
}))];
}
}));
}
});
}
});
}
// src/components/json-tree-view/json-tree-view-tree.tsx
var splitTreeNodeProps = createSplitProps();
var JsonTreeViewTree = (props) => {
const [nodeProps, treeProps] = splitTreeNodeProps(props, ["arrow", "indentGuide", "renderValue"]);
const tree = useTreeViewContext();
const children = () => tree().collection.getNodeChildren(tree().collection.rootNode);
return createComponent(tree_view_exports.Tree, mergeProps({
"data-scope": "json-tree-view"
}, treeProps, {
get children() {
return createComponent(Index, {
get each() {
return children();
},
children: (child, index) => createComponent(JsonTreeViewNode, mergeProps({
get node() {
return child();
},
indexPath: [index]
}, nodeProps))
});
}
}));
};
var useJsonTreeView = (props) => {
const [jsonProps, restProps] = splitProps(props, ["data", "defaultExpandedDepth"]);
const collection = createMemo(() => {
return createTreeCollection({
nodeToValue: nodeToValue,
nodeToString: nodeToString,
rootNode: getRootNode(jsonProps.data)
});
});
const defaultExpandedValue = createMemo(() => {
return jsonProps.defaultExpandedDepth != null ? getBranchValues(collection(), jsonProps.defaultExpandedDepth) : void 0;
});
const machineProps = createMemo(() => {
return {
defaultExpandedValue: untrack(defaultExpandedValue),
...restProps,
collection: collection(),
typeahead: false
};
});
return useTreeView(machineProps);
};
// src/components/json-tree-view/json-tree-view.tsx
var json_tree_view_exports = {};
__export(json_tree_view_exports, {
Root: () => JsonTreeViewRoot,
RootProvider: () => JsonTreeViewRootProvider,
Tree: () => JsonTreeViewTree
});
export { JsonTreeViewRoot, JsonTreeViewRootProvider, JsonTreeViewTree, json_tree_view_exports, useJsonTreeView };