@ark-ui/react/dist/components/json-tree-view/json-tree-view-root.js

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

'use client';
import { jsx } from 'react/jsx-runtime';
import { getRootNode, nodeToString, nodeToValue } from '@zag-js/json-tree-utils';
import { forwardRef, useMemo } from 'react';
import { createSplitProps } from '../../utils/create-split-props.js';
import { createTreeCollection } from '../collection/tree-collection.js';
import { TreeViewRoot } from '../tree-view/tree-view-root.js';
import { getBranchValues } from './get-branch-value.js';
import { JsonTreeViewPropsProvider } from './json-tree-view-props-context.js';

const splitJsonTreeViewProps = createSplitProps();
const JsonTreeViewRoot = forwardRef((props, ref) => {
  const [jsonTreeProps, localProps] = splitJsonTreeViewProps(props, [
    "maxPreviewItems",
    "collapseStringsAfterLength",
    "quotesOnKeys",
    "groupArraysAfterLength",
    "showNonenumerable"
  ]);
  const { data, defaultExpandedDepth, ...restProps } = localProps;
  const collection = useMemo(() => {
    return createTreeCollection({
      nodeToValue,
      nodeToString,
      rootNode: getRootNode(data)
    });
  }, [data]);
  const defaultExpandedValue = useMemo(() => {
    return defaultExpandedDepth != null ? getBranchValues(collection, defaultExpandedDepth) : void 0;
  }, [collection, defaultExpandedDepth]);
  return /* @__PURE__ */ jsx(JsonTreeViewPropsProvider, { value: jsonTreeProps, children: /* @__PURE__ */ jsx(
    TreeViewRoot,
    {
      "data-scope": "json-tree-view",
      collection,
      defaultExpandedValue,
      ...restProps,
      ref
    }
  ) });
});
JsonTreeViewRoot.displayName = "JsonTreeViewRoot";

export { JsonTreeViewRoot };