@ark-ui/solid/dist/chunk/5FRMO4AQ.jsx

A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.

import {
  tree_view_exports,
  useTreeView,
  useTreeViewContext
} from "./VR5BNKL7.jsx";
import {
  createTreeCollection
} from "./DZGDAEOH.jsx";
import {
  createSplitProps
} from "./6WEDGJKQ.jsx";
import {
  createContext
} from "./TVCIHLER.jsx";
import {
  __export
} from "./7IUG3E2V.jsx";

// src/components/json-tree-view/json-tree-view-root.tsx
import { getRootNode, nodeToString, nodeToValue } from "@zag-js/json-tree-utils";
import { createMemo, splitProps } 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 <JsonTreeViewPropsProvider value={jsonTreeProps}>
      <tree_view_exports.Root
    data-scope="json-tree-view"
    collection={collection()}
    defaultExpandedValue={defaultExpandedValue()}
    {...restProps}
  >
        {props.children}
      </tree_view_exports.Root>
    </JsonTreeViewPropsProvider>;
};

// src/components/json-tree-view/json-tree-view-root-provider.tsx
var JsonTreeViewRootProvider = (props) => {
  return <tree_view_exports.RootProvider data-scope="json-tree-view" {...props} />;
};

// src/components/json-tree-view/json-tree-view-tree.tsx
import { Index as Index2 } from "solid-js";

// src/components/json-tree-view/json-tree-view-node.tsx
import {
  getAccessibleDescription,
  jsonNodeToElement,
  keyPathToKey as keyPathToKey2
} from "@zag-js/json-tree-utils";
import { createMemo as createMemo3 } from "solid-js";
import { Index, Show } from "solid-js/web";

// src/components/json-tree-view/json-tree-view-key-node.tsx
import { keyPathToKey } from "@zag-js/json-tree-utils";
import { createMemo as createMemo2 } from "solid-js";
var JsonTreeViewKeyNode = (props) => {
  const key = createMemo2(() => keyPathToKey(props.node.keyPath));
  return <>
      <span data-kind="key" data-non-enumerable={props.node.isNonEnumerable ? "" : void 0}>
        {props.showQuotes ? `"${key()}"` : key()}
      </span>
      <span data-kind="colon">: </span>
    </>;
};

// src/components/json-tree-view/json-tree-view-value-node.tsx
import { For } from "solid-js";
import { Dynamic } from "solid-js/web";
var JsonTreeViewValueNode = (props) => {
  if (props.node.type === "text") {
    return <>{props.renderValue?.(props.node) ?? props.node.value}</>;
  }
  return <Dynamic
    component={props.node.tagName}
    data-root={props.node.properties.root ? "" : void 0}
    data-type={props.node.properties.nodeType}
    data-kind={props.node.properties.kind}
  >
      <For each={props.node.children}>
        {(child) => <JsonTreeViewValueNode node={child} renderValue={props.renderValue} />}
      </For>
    </Dynamic>;
};

// 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 = createMemo3(() => tree().getNodeState({ node: props.node, indexPath: props.indexPath }));
  const options = useJsonTreeViewPropsContext();
  const key = createMemo3(() => keyPathToKey2(props.node.keyPath, { excludeRoot: true }));
  const valueNode = createMemo3(() => jsonNodeToElement(props.node, options));
  const nodeProps = createMemo3(() => {
    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 <tree_view_exports.NodeProvider node={props.node} indexPath={props.indexPath}>
      <Show
    when={nodeState().isBranch}
    fallback={<tree_view_exports.Item {...nodeProps()}>
            <tree_view_exports.ItemText {...scopeProps}>
              <Show when={key()}>
                <JsonTreeViewKeyNode node={props.node} showQuotes={options.quotesOnKeys} />
              </Show>
              <JsonTreeViewValueNode node={valueNode()} renderValue={props.renderValue} />
            </tree_view_exports.ItemText>
          </tree_view_exports.Item>}
  >
        <tree_view_exports.Branch {...scopeProps}>
          <tree_view_exports.BranchControl {...nodeProps()}>
            <Show when={props.arrow}>
              <tree_view_exports.BranchIndicator {...scopeProps}>{props.arrow}</tree_view_exports.BranchIndicator>
            </Show>
            <tree_view_exports.BranchText {...scopeProps}>
              <Show when={key()}>
                <JsonTreeViewKeyNode node={props.node} showQuotes={options.quotesOnKeys} />
              </Show>
              <JsonTreeViewValueNode node={valueNode()} renderValue={props.renderValue} />
            </tree_view_exports.BranchText>
          </tree_view_exports.BranchControl>
          <tree_view_exports.BranchContent {...scopeProps}>
            <Show when={typeof props.indentGuide === "boolean"} fallback={props.indentGuide}>
              <tree_view_exports.BranchIndentGuide />
            </Show>
            <Index each={props.node.children}>
              {(child, index) => <JsonTreeViewNode {...props} node={child()} indexPath={[...props.indexPath, index]} />}
            </Index>
          </tree_view_exports.BranchContent>
        </tree_view_exports.Branch>
      </Show>
    </tree_view_exports.NodeProvider>;
}

// 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 <tree_view_exports.Tree data-scope="json-tree-view" {...treeProps}>
      <Index2 each={children()}>
        {(child, index) => <JsonTreeViewNode node={child()} indexPath={[index]} {...nodeProps} />}
      </Index2>
    </tree_view_exports.Tree>;
};

// src/components/json-tree-view/use-json-tree-view.ts
import { getRootNode as getRootNode2, nodeToString as nodeToString2, nodeToValue as nodeToValue2 } from "@zag-js/json-tree-utils";
import { createMemo as createMemo4, splitProps as splitProps2 } from "solid-js";
import { untrack } from "solid-js/web";
var useJsonTreeView = (props) => {
  const [jsonProps, restProps] = splitProps2(props, ["data", "defaultExpandedDepth"]);
  const collection = createMemo4(() => {
    return createTreeCollection({
      nodeToValue: nodeToValue2,
      nodeToString: nodeToString2,
      rootNode: getRootNode2(jsonProps.data)
    });
  });
  const defaultExpandedValue = createMemo4(() => {
    return jsonProps.defaultExpandedDepth != null ? getBranchValues(collection(), jsonProps.defaultExpandedDepth) : void 0;
  });
  const machineProps = createMemo4(() => {
    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,
  useJsonTreeView,
  json_tree_view_exports
};