UNPKG

@ark-ui/solid

Version:

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

244 lines (234 loc) 10.5 kB
import { collapsible_exports } from './TWZUCWKG.js'; import { splitRenderStrategyProps, RenderStrategyProvider, useRenderStrategyContext } from './GUFIKGZ6.js'; import { createSplitProps } from './ZMHI4GDJ.js'; import { ark } from './EPLBB4QN.js'; import { useEnvironmentContext } from './5QLLQM7E.js'; import { useLocaleContext } from './RVOPDSQY.js'; import { runIfFn } from './DT73WLR4.js'; import { createContext } from './THN5C4U6.js'; import { __export } from './ESLJRKWD.js'; import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web'; import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid'; import { createMemo, createUniqueId } from 'solid-js'; import * as treeView from '@zag-js/tree-view'; // src/components/tree-view/use-tree-view-context.ts var [TreeViewProvider, useTreeViewContext] = createContext({ hookName: "useTreeViewContext", providerName: "<TreeViewProvider />" }); // src/components/tree-view/use-tree-view-node-context.ts var [TreeViewNodeStateProvider, useTreeViewNodeContext] = createContext({ hookName: "useTreeViewNodeContext", providerName: "<TreeViewNodeProvider />" }); // src/components/tree-view/use-tree-view-node-props-context.ts var [TreeViewNodePropsProvider, useTreeViewNodePropsContext] = createContext({ hookName: "useTreeViewNodePropsContext", providerName: "<TreeViewNodeProvider />" }); // src/components/tree-view/tree-view-branch.tsx var TreeViewBranch = (props) => { const treeView2 = useTreeViewContext(); const nodeProps = useTreeViewNodePropsContext(); const nodeState = useTreeViewNodeContext(); const renderStrategyProps = useRenderStrategyContext(); const branchContentProps = createMemo(() => treeView2().getBranchContentProps(nodeProps)); const mergedProps = mergeProps(() => treeView2().getBranchProps(nodeProps), props); return createComponent(collapsible_exports.Root, mergeProps$1({ get open() { return nodeState().expanded; }, get ids() { return { content: branchContentProps().id }; } }, renderStrategyProps, mergedProps)); }; var splitVisibilityProps = createSplitProps(); var TreeViewBranchContent = (props) => { const treeView2 = useTreeViewContext(); const nodeProps = useTreeViewNodePropsContext(); const branchContentProps = createMemo(() => { const contentProps = treeView2().getBranchContentProps(nodeProps); const [, ownProps] = splitVisibilityProps(contentProps, ["hidden", "data-state"]); return ownProps; }); const mergedProps = mergeProps(() => branchContentProps(), props); return createComponent(collapsible_exports.Content, mergedProps); }; var TreeViewBranchControl = (props) => { const treeView2 = useTreeViewContext(); const nodeProps = useTreeViewNodePropsContext(); const mergedProps = mergeProps(() => treeView2().getBranchControlProps(nodeProps), props); return createComponent(ark.div, mergedProps); }; var TreeViewBranchIndentGuide = (props) => { const treeView2 = useTreeViewContext(); const nodeProps = useTreeViewNodePropsContext(); const mergedProps = mergeProps(() => treeView2().getBranchIndentGuideProps(nodeProps), props); return createComponent(ark.div, mergedProps); }; var TreeViewBranchIndicator = (props) => { const treeView2 = useTreeViewContext(); const nodeProps = useTreeViewNodePropsContext(); const mergedProps = mergeProps(() => treeView2().getBranchIndicatorProps(nodeProps), props); return createComponent(ark.div, mergedProps); }; var TreeViewBranchText = (props) => { const treeView2 = useTreeViewContext(); const nodeProps = useTreeViewNodePropsContext(); const mergedProps = mergeProps(() => treeView2().getBranchTextProps(nodeProps), props); return createComponent(ark.span, mergedProps); }; var TreeViewBranchTrigger = (props) => { const treeView2 = useTreeViewContext(); const nodeProps = useTreeViewNodePropsContext(); const mergedProps = mergeProps(() => treeView2().getBranchTriggerProps(nodeProps), props); return createComponent(ark.div, mergedProps); }; // src/components/tree-view/tree-view-context.tsx var TreeViewContext = (props) => props.children(useTreeViewContext()); var TreeViewItem = (props) => { const treeView2 = useTreeViewContext(); const nodeProps = useTreeViewNodePropsContext(); const mergedProps = mergeProps(() => treeView2().getItemProps(nodeProps), props); return createComponent(ark.div, mergedProps); }; var TreeViewItemIndicator = (props) => { const treeView2 = useTreeViewContext(); const nodeProps = useTreeViewNodePropsContext(); const mergedProps = mergeProps(() => treeView2().getItemIndicatorProps(nodeProps), props); return createComponent(ark.div, mergedProps); }; var TreeViewItemText = (props) => { const treeView2 = useTreeViewContext(); const nodeProps = useTreeViewNodePropsContext(); const mergedProps = mergeProps(() => treeView2().getItemTextProps(nodeProps), props); return createComponent(ark.span, mergedProps); }; var TreeViewLabel = (props) => { const treeView2 = useTreeViewContext(); const mergedProps = mergeProps(() => treeView2().getLabelProps(), props); return createComponent(ark.h3, mergedProps); }; var TreeViewNodeCheckbox = (props) => { const treeView2 = useTreeViewContext(); const nodeProps = useTreeViewNodePropsContext(); const mergedProps = mergeProps(() => treeView2().getNodeCheckboxProps(nodeProps), props); return createComponent(ark.span, mergedProps); }; var TreeViewNodeCheckboxIndicator = (props) => { const nodeState = useTreeViewNodeContext(); const checkedState = createMemo(() => nodeState().checked); if (checkedState() === "indeterminate" && props.indeterminate) { return props.indeterminate; } if (checkedState() === true && props.children) { return props.children; } return props.fallback; }; var TreeViewNodeRenameInput = (props) => { const treeView2 = useTreeViewContext(); const nodeProps = useTreeViewNodePropsContext(); const mergedProps = mergeProps(() => treeView2().getNodeRenameInputProps(nodeProps), props); return createComponent(ark.input, mergedProps); }; // src/components/tree-view/tree-view-node-context.ts var TreeViewNodeContext = (props) => props.children(useTreeViewNodeContext()); function TreeViewNodeProvider(props) { const [nodeProps, localProps] = createSplitProps()(props, ["indexPath", "node"]); const treeView2 = useTreeViewContext(); const nodeState = createMemo(() => treeView2().getNodeState(nodeProps)); return createComponent(TreeViewNodeStateProvider, { value: nodeState, get children() { return createComponent(TreeViewNodePropsProvider, { value: nodeProps, get children() { return localProps.children; } }); } }); } var useTreeView = (props) => { const id = createUniqueId(); const locale = useLocaleContext(); const environment = useEnvironmentContext(); const machineProps = createMemo(() => ({ id, dir: locale().dir, getRootNode: environment().getRootNode, ...runIfFn(props) })); const service = useMachine(treeView.machine, machineProps); return createMemo(() => treeView.connect(service, normalizeProps)); }; // src/components/tree-view/tree-view-root.tsx var TreeViewRoot = (props) => { const [renderStrategyProps, treeViewProps] = splitRenderStrategyProps(props); const [useTreeViewProps, localProps] = createSplitProps()(treeViewProps, ["canRename", "checkedValue", "collection", "defaultCheckedValue", "defaultExpandedValue", "defaultFocusedValue", "defaultSelectedValue", "expandedValue", "expandOnClick", "focusedValue", "id", "ids", "loadChildren", "onBeforeRename", "onCheckedChange", "onExpandedChange", "onFocusChange", "onLoadChildrenComplete", "onLoadChildrenError", "onRenameComplete", "onRenameStart", "onSelectionChange", "selectedValue", "selectionMode", "typeahead", "scrollToIndexFn"]); const treeView2 = useTreeView(useTreeViewProps); const mergedProps = mergeProps(() => treeView2().getRootProps(), localProps); return createComponent(TreeViewProvider, { value: treeView2, get children() { return createComponent(RenderStrategyProvider, { value: renderStrategyProps, get children() { return createComponent(ark.div, mergedProps); } }); } }); }; var TreeViewRootProvider = (props) => { const [renderStrategyProps, treeViewProps] = splitRenderStrategyProps(props); const [{ value: treeView2 }, localProps] = createSplitProps()(treeViewProps, ["value"]); const mergedProps = mergeProps(() => treeView2().getRootProps(), localProps); return createComponent(TreeViewProvider, { value: treeView2, get children() { return createComponent(RenderStrategyProvider, { value: renderStrategyProps, get children() { return createComponent(ark.div, mergedProps); } }); } }); }; var TreeViewTree = (props) => { const treeView2 = useTreeViewContext(); const mergedProps = mergeProps(() => treeView2().getTreeProps(), props); return createComponent(ark.div, mergedProps); }; // src/components/tree-view/tree-view.ts var tree_view_exports = {}; __export(tree_view_exports, { Branch: () => TreeViewBranch, BranchContent: () => TreeViewBranchContent, BranchControl: () => TreeViewBranchControl, BranchIndentGuide: () => TreeViewBranchIndentGuide, BranchIndicator: () => TreeViewBranchIndicator, BranchText: () => TreeViewBranchText, BranchTrigger: () => TreeViewBranchTrigger, Context: () => TreeViewContext, Item: () => TreeViewItem, ItemIndicator: () => TreeViewItemIndicator, ItemText: () => TreeViewItemText, Label: () => TreeViewLabel, NodeCheckbox: () => TreeViewNodeCheckbox, NodeCheckboxIndicator: () => TreeViewNodeCheckboxIndicator, NodeContext: () => TreeViewNodeContext, NodeProvider: () => TreeViewNodeProvider, NodeRenameInput: () => TreeViewNodeRenameInput, Root: () => TreeViewRoot, RootProvider: () => TreeViewRootProvider, Tree: () => TreeViewTree }); export { TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchIndentGuide, TreeViewBranchIndicator, TreeViewBranchText, TreeViewBranchTrigger, TreeViewContext, TreeViewItem, TreeViewItemIndicator, TreeViewItemText, TreeViewLabel, TreeViewNodeCheckbox, TreeViewNodeCheckboxIndicator, TreeViewNodeContext, TreeViewNodeProvider, TreeViewNodeRenameInput, TreeViewRoot, TreeViewRootProvider, TreeViewTree, tree_view_exports, useTreeView, useTreeViewContext, useTreeViewNodeContext };