@health-samurai/react-components 0.0.0-alpha.6 → 0.0.0-alpha.8

package/dist/src/components/fhir-structure-view.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/fhir-structure-view.tsx"],"sourcesContent":["import type { ItemInstance } from \"@headless-tree/core\";\nimport React from \"react\";\nimport {\n\tTooltip,\n\tTooltipContent,\n\tTooltipTrigger,\n} from \"#shadcn/components/ui/tooltip\";\nimport { cn } from \"#shadcn/lib/utils.js\";\nimport * as CustomIcon from \"../icons\";\nimport { TreeView, type TreeViewItem } from \"./tree-view\";\n\ntype PackageSpec = {\n\tname: string;\n\tversion: string;\n};\n\ntype Coordinate = {\n\tid: string;\n\tpackageSpec: PackageSpec;\n\t\"package-spec\": PackageSpec;\n\tlabel: string;\n};\n\ntype FhirStructure = {\n\ttype?: string;\n\tmin?: string;\n\tmax?: string;\n\tlastNode?: boolean;\n\tisSummary?: boolean;\n\tisModifier?: boolean;\n\tmustSupport?: boolean;\n\tdatatype?: string;\n\tshort?: string;\n\tdesc?: string;\n\textensionUrl?: string;\n\textensionCoordinate?: Coordinate;\n\tbinding?: {\n\t\tvalueSet: string;\n\t};\n\tvsCoordinate?: Coordinate;\n};\n\nconst FiledIcon = (item: ItemInstance<TreeViewItem<FhirStructure>>) => {\n\tconst filedType = item.getItemData()?.meta?.type;\n\n\tswitch (filedType) {\n\t\tcase \"Resource\":\n\t\t\treturn <CustomIcon.ResourceIcon />;\n\t\tcase \"BackboneElement\":\n\t\t\treturn <CustomIcon.BackoneElementIcon />;\n\t\tcase \"Reference\":\n\t\t\treturn <CustomIcon.ReferenceIcon />;\n\t\tcase \"union\":\n\t\t\treturn <CustomIcon.UnionIcon />;\n\t\tcase \"instant\":\n\t\tcase \"time\":\n\t\tcase \"date\":\n\t\tcase \"dateTime\":\n\t\tcase \"decimal\":\n\t\tcase \"boolean\":\n\t\tcase \"integer\":\n\t\tcase \"string\":\n\t\tcase \"uri\":\n\t\tcase \"base64Binary\":\n\t\tcase \"code\":\n\t\tcase \"id\":\n\t\tcase \"oid\":\n\t\tcase \"unsignedInt\":\n\t\tcase \"positiveInt\":\n\t\tcase \"markdown\":\n\t\tcase \"url\":\n\t\tcase \"canonical\":\n\t\tcase \"uuid\":\n\t\tcase \"integer64\":\n\t\t\treturn <CustomIcon.TypCodeIcon />;\n\t\tdefault:\n\t\t\treturn <CustomIcon.ComplexTypeIcon />;\n\t}\n};\n\nconst customItemFieldNameClass = cn(\n\t\"flex\",\n\t\"items-center\",\n\t\"truncate\",\n\t\"gap-2\",\n\t\"min-w-[calc(260px-var(--tree-padding))]\",\n\t\"w-[calc(260px-var(--tree-padding))]\",\n\t\"in-data-[folder=true]:w-[calc(260px-var(--tree-padding))]\",\n\t\"in-data-[folder=true]:min-w-[calc(260px-var(--tree-padding))]\",\n);\n\nconst customItemView = (item: ItemInstance<TreeViewItem<FhirStructure>>) => {\n\tconst fieldName = item.getItemData()?.name;\n\tconst cardinalityMin = item.getItemData()?.meta?.min;\n\tconst cardinalityMax = item.getItemData()?.meta?.max;\n\tconst isSummary = item.getItemData()?.meta?.isSummary;\n\tconst isModifier = item.getItemData()?.meta?.isModifier;\n\tconst mustSupport = item.getItemData()?.meta?.mustSupport;\n\tconst datatype = item.getItemData()?.meta?.type;\n\tconst short = item.getItemData()?.meta?.short;\n\tconst desc = item.getItemData()?.meta?.desc;\n\tconst extensionUrl = item.getItemData()?.meta?.extensionUrl;\n\tconst extensionCoordinate = item.getItemData()?.meta?.extensionCoordinate;\n\tconst binding = item.getItemData()?.meta?.binding;\n\tconst vsCoordinate = item.getItemData()?.meta?.vsCoordinate;\n\treturn (\n\t\t<div className=\"flex items-start gap-2\">\n\t\t\t<div className={customItemFieldNameClass}>\n\t\t\t\t{FiledIcon(item)}\n\t\t\t\t{fieldName}\n\t\t\t</div>\n\n\t\t\t<div className=\"flex items-center gap-1 min-w-[60px] w-[60px]\">\n\t\t\t\t{mustSupport && (\n\t\t\t\t\t<Tooltip>\n\t\t\t\t\t\t<TooltipTrigger asChild>\n\t\t\t\t\t\t\t<span className=\"px-[2px] max-h-[20px] text-white bg-red-600 rounded cursor-help\">\n\t\t\t\t\t\t\t\tS\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</TooltipTrigger>\n\t\t\t\t\t\t<TooltipContent>\n\t\t\t\t\t\t\t<p>Must be supported</p>\n\t\t\t\t\t\t</TooltipContent>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t)}\n\t\t\t\t{isSummary && (\n\t\t\t\t\t<Tooltip>\n\t\t\t\t\t\t<TooltipTrigger asChild>\n\t\t\t\t\t\t\t<span className=\"px-[2px] max-h-[20px] cursor-help\">Σ</span>\n\t\t\t\t\t\t</TooltipTrigger>\n\t\t\t\t\t\t<TooltipContent>\n\t\t\t\t\t\t\t<p>Part of the summary set</p>\n\t\t\t\t\t\t</TooltipContent>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t)}\n\t\t\t\t{isModifier && (\n\t\t\t\t\t<Tooltip>\n\t\t\t\t\t\t<TooltipTrigger asChild>\n\t\t\t\t\t\t\t<span className=\"px-[2px] max-h-[20px] cursor-help\">!?</span>\n\t\t\t\t\t\t</TooltipTrigger>\n\t\t\t\t\t\t<TooltipContent>\n\t\t\t\t\t\t\t<p>Modifying element</p>\n\t\t\t\t\t\t</TooltipContent>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t<div className=\"flex items-center gap-1 min-w-[50px] w-[50px] typo-code\">\n\t\t\t\t{cardinalityMin && cardinalityMax\n\t\t\t\t\t? `${cardinalityMin}..${cardinalityMax}`\n\t\t\t\t\t: \"\"}\n\t\t\t</div>\n\t\t\t<div className=\"flex gap-1 w-[200px] min-w-[200px]\">\n\t\t\t\t{datatype !== \"union\" && datatype}\n\t\t\t</div>\n\t\t\t<div className=\"text-left overflow-hidden\">\n\t\t\t\t{short && <div className=\"line-clamp-2\">{short}</div>}\n\t\t\t\t{!short && desc && <div className=\"line-clamp-2\">{desc}</div>}\n\t\t\t\t{extensionUrl && (\n\t\t\t\t\t<div className=\"flex items-center gap-1\">\n\t\t\t\t\t\t<span>URL:</span>\n\t\t\t\t\t\t{extensionCoordinate?.id ? (\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\thref={`#/ig/${extensionCoordinate?.[\"package-spec\"]?.name || extensionCoordinate?.packageSpec?.name}#${extensionCoordinate?.[\"package-spec\"]?.version || extensionCoordinate?.packageSpec?.version}/sd/${extensionCoordinate?.id}`}\n\t\t\t\t\t\t\t\tclassName=\"font-medium hover:underline\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{extensionCoordinate?.label || extensionUrl}\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<span className=\"font-medium\">\n\t\t\t\t\t\t\t\t{extensionCoordinate?.label || extensionUrl}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{binding && (\n\t\t\t\t\t<div className=\"flex items-center gap-1\">\n\t\t\t\t\t\t<span>Binding:</span>\n\t\t\t\t\t\t{vsCoordinate?.id ? (\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\thref={`#/ig/${vsCoordinate?.[\"package-spec\"]?.name || vsCoordinate?.packageSpec?.name}#${vsCoordinate?.[\"package-spec\"]?.version || vsCoordinate?.packageSpec?.version}/vs/${vsCoordinate?.id}`}\n\t\t\t\t\t\t\t\tclassName=\"font-medium hover:underline\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{vsCoordinate?.label || binding?.valueSet || \"Binding\"}\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<span className=\"font-medium\">\n\t\t\t\t\t\t\t\t{vsCoordinate?.label || binding?.valueSet || \"Binding\"}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nconst FhirStructureView = ({\n\ttree,\n}: {\n\ttree: Record<string, TreeViewItem<FhirStructure>>;\n}) => {\n\tconst expandedItemIds = React.useMemo(() => {\n\t\treturn Object.keys(tree ?? {});\n\t}, [tree]);\n\n\treturn (\n\t\t<div className=\"flex flex-col h-full\">\n\t\t\t<div className=\"flex items-center gap-2 font-semibold text-text-secondary border-b pb-2 bg-bg-primary sticky top-0 z-10\">\n\t\t\t\t<div className=\"min-w-[260px] w-[260px] ml-9\">Name</div>\n\t\t\t\t<div className=\"min-w-[60px] w-[60px]\">Flags</div>\n\t\t\t\t<div className=\"min-w-[50px] w-[50px]\">Card.</div>\n\t\t\t\t<div className=\"min-w-[200px] w-[200px]\">Type</div>\n\t\t\t\t<div className=\"min-w-[200px] w-[200px]\">Description</div>\n\t\t\t</div>\n\t\t\t<div className=\"flex-1 overflow-auto\">\n\t\t\t\t<TreeView\n\t\t\t\t\thideChevron={true}\n\t\t\t\t\thorizontalLines={true}\n\t\t\t\t\tdisableHover={true}\n\t\t\t\t\tzebra={true}\n\t\t\t\t\trootItemId=\"root\"\n\t\t\t\t\titems={tree}\n\t\t\t\t\tcustomItemView={customItemView}\n\t\t\t\t\texpandedItemIds={expandedItemIds}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport { FhirStructureView, type FhirStructure };\n"],"names":["React","Tooltip","TooltipContent","TooltipTrigger","cn","CustomIcon","TreeView","FiledIcon","item","filedType","getItemData","meta","type","ResourceIcon","BackoneElementIcon","ReferenceIcon","UnionIcon","TypCodeIcon","ComplexTypeIcon","customItemFieldNameClass","customItemView","fieldName","name","cardinalityMin","min","cardinalityMax","max","isSummary","isModifier","mustSupport","datatype","short","desc","extensionUrl","extensionCoordinate","binding","vsCoordinate","div","className","asChild","span","p","id","a","href","packageSpec","version","label","valueSet","FhirStructureView","tree","expandedItemIds","useMemo","Object","keys","hideChevron","horizontalLines","disableHover","zebra","rootItemId","items"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/fhir-structure-view.tsx"],"sourcesContent":["import type { ItemInstance } from \"@headless-tree/core\";\nimport React from \"react\";\nimport {\n\tTooltip,\n\tTooltipContent,\n\tTooltipTrigger,\n} from \"#shadcn/components/ui/tooltip\";\nimport { cn } from \"#shadcn/lib/utils.js\";\nimport * as CustomIcon from \"../icons\";\nimport { TreeView, type TreeViewItem } from \"./tree-view\";\n\ntype PackageSpec = {\n\tname: string;\n\tversion: string;\n};\n\ntype Coordinate = {\n\tid?: string;\n\tpackageSpec?: PackageSpec;\n\t\"package-spec\"?: PackageSpec;\n\tlabel?: string;\n};\n\ntype FhirStructure = {\n\ttype?: string;\n\tmin?: string | number;\n\tmax?: string | number;\n\tlastNode?: boolean;\n\tisSummary?: boolean;\n\tisModifier?: boolean;\n\tmustSupport?: boolean;\n\tdatatype?: string;\n\tshort?: string;\n\tdesc?: string;\n\textensionUrl?: string;\n\textensionCoordinate?: Coordinate;\n\tbinding?: {\n\t\tvalueSet: string;\n\t};\n\tvsCoordinate?: Coordinate;\n};\n\nfunction FiledIcon(item: ItemInstance<TreeViewItem<FhirStructure>>) {\n\tconst filedType = item.getItemData()?.meta?.type;\n\n\tswitch (filedType) {\n\t\tcase \"Resource\":\n\t\t\treturn <CustomIcon.ResourceIcon />;\n\t\tcase \"BackboneElement\":\n\t\t\treturn <CustomIcon.BackoneElementIcon />;\n\t\tcase \"Reference\":\n\t\t\treturn <CustomIcon.ReferenceIcon />;\n\t\tcase \"union\":\n\t\t\treturn <CustomIcon.UnionIcon />;\n\t\tcase \"instant\":\n\t\tcase \"time\":\n\t\tcase \"date\":\n\t\tcase \"dateTime\":\n\t\tcase \"decimal\":\n\t\tcase \"boolean\":\n\t\tcase \"integer\":\n\t\tcase \"string\":\n\t\tcase \"uri\":\n\t\tcase \"base64Binary\":\n\t\tcase \"code\":\n\t\tcase \"id\":\n\t\tcase \"oid\":\n\t\tcase \"unsignedInt\":\n\t\tcase \"positiveInt\":\n\t\tcase \"markdown\":\n\t\tcase \"url\":\n\t\tcase \"canonical\":\n\t\tcase \"uuid\":\n\t\tcase \"integer64\":\n\t\t\treturn <CustomIcon.TypCodeIcon />;\n\t\tdefault:\n\t\t\treturn <CustomIcon.ComplexTypeIcon />;\n\t}\n}\n\nconst customItemFieldNameClass = cn(\n\t\"flex\",\n\t\"items-center\",\n\t\"truncate\",\n\t\"gap-2\",\n\t\"min-w-[calc(260px-var(--tree-padding))]\",\n\t\"w-[calc(260px-var(--tree-padding))]\",\n\t\"in-data-[folder=true]:w-[calc(260px-var(--tree-padding))]\",\n\t\"in-data-[folder=true]:min-w-[calc(260px-var(--tree-padding))]\",\n);\n\nfunction customItemView(item: ItemInstance<TreeViewItem<FhirStructure>>) {\n\tconst fieldName = item.getItemData()?.name;\n\tconst cardinalityMin = item.getItemData()?.meta?.min;\n\tconst cardinalityMax = item.getItemData()?.meta?.max;\n\tconst isSummary = item.getItemData()?.meta?.isSummary;\n\tconst isModifier = item.getItemData()?.meta?.isModifier;\n\tconst mustSupport = item.getItemData()?.meta?.mustSupport;\n\tconst datatype = item.getItemData()?.meta?.type;\n\tconst short = item.getItemData()?.meta?.short;\n\tconst desc = item.getItemData()?.meta?.desc;\n\tconst extensionUrl = item.getItemData()?.meta?.extensionUrl;\n\tconst extensionCoordinate = item.getItemData()?.meta?.extensionCoordinate;\n\tconst binding = item.getItemData()?.meta?.binding;\n\tconst vsCoordinate = item.getItemData()?.meta?.vsCoordinate;\n\treturn (\n\t\t<div className=\"flex items-start gap-2 text-xs\">\n\t\t\t<div className={customItemFieldNameClass}>\n\t\t\t\t{FiledIcon(item)}\n\t\t\t\t{fieldName}\n\t\t\t</div>\n\n\t\t\t<div className=\"flex items-center gap-1 min-w-[60px] w-[60px]\">\n\t\t\t\t{mustSupport && (\n\t\t\t\t\t<Tooltip>\n\t\t\t\t\t\t<TooltipTrigger asChild>\n\t\t\t\t\t\t\t<span className=\"px-[2px] max-h-[20px] text-white bg-red-600 rounded cursor-help\">\n\t\t\t\t\t\t\t\tS\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</TooltipTrigger>\n\t\t\t\t\t\t<TooltipContent>\n\t\t\t\t\t\t\t<p>Must be supported</p>\n\t\t\t\t\t\t</TooltipContent>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t)}\n\t\t\t\t{isSummary && (\n\t\t\t\t\t<Tooltip>\n\t\t\t\t\t\t<TooltipTrigger asChild>\n\t\t\t\t\t\t\t<span className=\"px-[2px] max-h-[20px] cursor-help\">Σ</span>\n\t\t\t\t\t\t</TooltipTrigger>\n\t\t\t\t\t\t<TooltipContent>\n\t\t\t\t\t\t\t<p>Part of the summary set</p>\n\t\t\t\t\t\t</TooltipContent>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t)}\n\t\t\t\t{isModifier && (\n\t\t\t\t\t<Tooltip>\n\t\t\t\t\t\t<TooltipTrigger asChild>\n\t\t\t\t\t\t\t<span className=\"px-[2px] max-h-[20px] cursor-help\">!?</span>\n\t\t\t\t\t\t</TooltipTrigger>\n\t\t\t\t\t\t<TooltipContent>\n\t\t\t\t\t\t\t<p>Modifying element</p>\n\t\t\t\t\t\t</TooltipContent>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t<div className=\"flex items-center gap-1 min-w-[50px] w-[50px] typo-code\">\n\t\t\t\t{cardinalityMin && cardinalityMax\n\t\t\t\t\t? `${cardinalityMin}..${cardinalityMax}`\n\t\t\t\t\t: \"\"}\n\t\t\t</div>\n\t\t\t<div className=\"flex gap-1 w-[200px] min-w-[200px]\">\n\t\t\t\t{datatype !== \"union\" && datatype}\n\t\t\t</div>\n\t\t\t<div className=\"text-left overflow-hidden\">\n\t\t\t\t{short && <div className=\"line-clamp-2\">{short}</div>}\n\t\t\t\t{!short && desc && <div className=\"line-clamp-2\">{desc}</div>}\n\t\t\t\t{extensionUrl && (\n\t\t\t\t\t<div className=\"flex items-center gap-1\">\n\t\t\t\t\t\t<span>URL:</span>\n\t\t\t\t\t\t{extensionCoordinate?.id ? (\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\thref={`#/ig/${extensionCoordinate?.[\"package-spec\"]?.name || extensionCoordinate?.packageSpec?.name}#${extensionCoordinate?.[\"package-spec\"]?.version || extensionCoordinate?.packageSpec?.version}/sd/${extensionCoordinate?.id}`}\n\t\t\t\t\t\t\t\tclassName=\"font-medium hover:underline\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{extensionCoordinate?.label || extensionUrl}\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<span className=\"font-medium\">\n\t\t\t\t\t\t\t\t{extensionCoordinate?.label || extensionUrl}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{binding && (\n\t\t\t\t\t<div className=\"flex items-center gap-1\">\n\t\t\t\t\t\t<span>Binding:</span>\n\t\t\t\t\t\t{vsCoordinate?.id ? (\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\thref={`#/ig/${vsCoordinate?.[\"package-spec\"]?.name || vsCoordinate?.packageSpec?.name}#${vsCoordinate?.[\"package-spec\"]?.version || vsCoordinate?.packageSpec?.version}/vs/${vsCoordinate?.id}`}\n\t\t\t\t\t\t\t\tclassName=\"font-medium hover:underline\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{vsCoordinate?.label || binding?.valueSet || \"Binding\"}\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<span className=\"font-medium\">\n\t\t\t\t\t\t\t\t{vsCoordinate?.label || binding?.valueSet || \"Binding\"}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nfunction FhirStructureView({\n\ttree,\n}: {\n\ttree: Record<string, TreeViewItem<FhirStructure>>;\n}) {\n\tconst expandedItemIds = React.useMemo(() => {\n\t\treturn Object.keys(tree ?? {});\n\t}, [tree]);\n\n\treturn (\n\t\t<div className=\"h-fit w-fit min-h-0 min-w-0\">\n\t\t\t<div className=\"flex items-center gap-2 font-semibold text-xs text-text-secondary border-b py-2 bg-bg-primary sticky top-0 z-20\">\n\t\t\t\t<div className=\"min-w-[260px] w-[260px] ml-4\">Name</div>\n\t\t\t\t<div className=\"min-w-[60px] w-[60px]\">Flags</div>\n\t\t\t\t<div className=\"min-w-[50px] w-[50px]\">Card.</div>\n\t\t\t\t<div className=\"min-w-[200px] w-[200px]\">Type</div>\n\t\t\t\t<div className=\"min-w-[200px] w-[200px]\">Description</div>\n\t\t\t</div>\n\t\t\t<TreeView\n\t\t\t\tfocusedItem={null}\n\t\t\t\tonFocusedItemChange={() => {}}\n\t\t\t\thideChevron={true}\n\t\t\t\thorizontalLines={true}\n\t\t\t\tdisableHover={true}\n\t\t\t\tzebra={true}\n\t\t\t\trootItemId=\"root\"\n\t\t\t\titems={tree}\n\t\t\t\tcustomItemView={customItemView}\n\t\t\t\tdefaultExpandedItems={expandedItemIds}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nexport { FhirStructureView, type FhirStructure };\n"],"names":["React","Tooltip","TooltipContent","TooltipTrigger","cn","CustomIcon","TreeView","FiledIcon","item","filedType","getItemData","meta","type","ResourceIcon","BackoneElementIcon","ReferenceIcon","UnionIcon","TypCodeIcon","ComplexTypeIcon","customItemFieldNameClass","customItemView","fieldName","name","cardinalityMin","min","cardinalityMax","max","isSummary","isModifier","mustSupport","datatype","short","desc","extensionUrl","extensionCoordinate","binding","vsCoordinate","div","className","asChild","span","p","id","a","href","packageSpec","version","label","valueSet","FhirStructureView","tree","expandedItemIds","useMemo","Object","keys","focusedItem","onFocusedItemChange","hideChevron","horizontalLines","disableHover","zebra","rootItemId","items","defaultExpandedItems"],"mappings":"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"}

package/dist/src/components/segment-control.d.ts

@@ -8,9 +8,9 @@ interface SegmentControlItemProps {
     children: ReactNode;
     value: string;
 }
-declare const SegmentControlItem: ({ children, value }: SegmentControlItemProps) => import("react/jsx-runtime").JSX.Element;
-declare const SegmentControl: ({ children, defaultValue, onValueChange, name, }: SegmentControlProps & {
+declare function SegmentControlItem({ children, value }: SegmentControlItemProps): import("react/jsx-runtime").JSX.Element;
+declare function SegmentControl({ children, defaultValue, onValueChange, name, }: SegmentControlProps & {
     children?: ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export { SegmentControl, SegmentControlItem };
 //# sourceMappingURL=segment-control.d.ts.map

package/dist/src/components/segment-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"segment-control.d.ts","sourceRoot":"","sources":["../../../src/components/segment-control.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAAc,MAAM,OAAO,CAAC;AAWlE,MAAM,WAAW,mBAAmB;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED,UAAU,uBAAuB;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACd;AAeD,QAAA,MAAM,kBAAkB,GAAI,qBAAqB,uBAAuB,4CAqBvE,CAAC;AAEF,QAAA,MAAM,cAAc,GAAI,kDAKrB,mBAAmB,GAAG;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,4CAchD,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"segment-control.d.ts","sourceRoot":"","sources":["../../../src/components/segment-control.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAAc,MAAM,OAAO,CAAC;AAWlE,MAAM,WAAW,mBAAmB;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED,UAAU,uBAAuB;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACd;AAgBD,iBAAS,kBAAkB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,uBAAuB,2CAqBvE;AAED,iBAAS,cAAc,CAAC,EACvB,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,IAAI,GACJ,EAAE,mBAAmB,GAAG;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,2CAchD;AAED,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/src/components/segment-control.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
 import { cn } from "../shadcn/lib/utils.js";
 const SegmentControlContext = /*#__PURE__*/ createContext({});
-const segmentControlItemClass = cn("flex", "items-center", "justify-center", "px-2", "py-0.5", "text-sm", "cursor-pointer", "rounded-2xl", "text-white/80", "peer-checked:bg-bg-primary", "peer-checked:text-text-secondary");
-const SegmentControlItem = ({ children, value })=>{
+const segmentControlItemClass = cn("flex", "items-center", "justify-center", "px-2", "py-0.5", "text-sm", "cursor-pointer", "rounded-2xl", "text-white/80", "peer-checked:bg-bg-primary", "peer-checked:text-text-secondary", "select-none");
+function SegmentControlItem({ children, value }) {
     const { defaultValue, onValueChange, name } = useContext(SegmentControlContext);
     return /*#__PURE__*/ _jsxs("div", {
         className: "relative",
@@ -24,8 +24,8 @@ const SegmentControlItem = ({ children, value })=>{
             })
         ]
     });
-};
-const SegmentControl = ({ children, defaultValue, onValueChange, name })=>{
+}
+function SegmentControl({ children, defaultValue, onValueChange, name }) {
     const contextValue = {
         ...defaultValue !== undefined && {
             defaultValue
@@ -42,7 +42,7 @@ const SegmentControl = ({ children, defaultValue, onValueChange, name })=>{
             children: children
         })
     });
-};
+}
 export { SegmentControl, SegmentControlItem };
 
 //# sourceMappingURL=segment-control.js.map

package/dist/src/components/segment-control.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/segment-control.tsx"],"sourcesContent":["import { createContext, type ReactNode, useContext } from \"react\";\nimport { cn } from \"#shadcn/lib/utils.js\";\n\ninterface SegmentControlContextType {\n\tdefaultValue?: string;\n\tonValueChange?: (value: string) => void;\n\tname?: string;\n}\n\nconst SegmentControlContext = createContext<SegmentControlContextType>({});\n\nexport interface SegmentControlProps {\n\tdefaultValue?: string;\n\tonValueChange?: (value: string) => void;\n\tname?: string;\n}\n\ninterface SegmentControlItemProps {\n\tchildren: ReactNode;\n\tvalue: string;\n}\nconst segmentControlItemClass = cn(\n\t\"flex\",\n\t\"items-center\",\n\t\"justify-center\",\n\t\"px-2\",\n\t\"py-0.5\",\n\t\"text-sm\",\n\t\"cursor-pointer\",\n\t\"rounded-2xl\",\n\t\"text-white/80\",\n\t\"peer-checked:bg-bg-primary\",\n\t\"peer-checked:text-text-secondary\",\n);\n\nconst SegmentControlItem = ({ children, value }: SegmentControlItemProps) => {\n\tconst { defaultValue, onValueChange, name } = useContext(\n\t\tSegmentControlContext,\n\t);\n\n\treturn (\n\t\t<div className=\"relative\">\n\t\t\t<input\n\t\t\t\ttype=\"radio\"\n\t\t\t\tid={`${name}-${value}`}\n\t\t\t\tname={name}\n\t\t\t\tvalue={value}\n\t\t\t\tdefaultChecked={value === defaultValue}\n\t\t\t\tonChange={(e) => onValueChange?.(e.target.value)}\n\t\t\t\tclassName=\"sr-only peer\"\n\t\t\t/>\n\t\t\t<label htmlFor={`${name}-${value}`} className={segmentControlItemClass}>\n\t\t\t\t{children}\n\t\t\t</label>\n\t\t</div>\n\t);\n};\n\nconst SegmentControl = ({\n\tchildren,\n\tdefaultValue,\n\tonValueChange,\n\tname,\n}: SegmentControlProps & { children?: ReactNode }) => {\n\tconst contextValue: SegmentControlContextType = {\n\t\t...(defaultValue !== undefined && { defaultValue }),\n\t\t...(onValueChange !== undefined && { onValueChange }),\n\t\tname: name || \"react-components-segment-control\",\n\t};\n\n\treturn (\n\t\t<SegmentControlContext.Provider value={contextValue}>\n\t\t\t<div className=\"inline-flex bg-gray-500 p-0.5 gap-0 rounded-full\">\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</SegmentControlContext.Provider>\n\t);\n};\n\nexport { SegmentControl, SegmentControlItem };\n"],"names":["createContext","useContext","cn","SegmentControlContext","segmentControlItemClass","SegmentControlItem","children","value","defaultValue","onValueChange","name","div","className","input","type","id","defaultChecked","onChange","e","target","label","htmlFor","SegmentControl","contextValue","undefined","Provider"],"mappings":";AAAA,SAASA,aAAa,EAAkBC,UAAU,QAAQ,QAAQ;AAClE,SAASC,EAAE,QAAQ,yBAAuB;AAQ1C,MAAMC,sCAAwBH,cAAyC,CAAC;AAYxE,MAAMI,0BAA0BF,GAC/B,QACA,gBACA,kBACA,QACA,UACA,WACA,kBACA,eACA,iBACA,8BACA;AAGD,MAAMG,qBAAqB,CAAC,EAAEC,QAAQ,EAAEC,KAAK,EAA2B;IACvE,MAAM,EAAEC,YAAY,EAAEC,aAAa,EAAEC,IAAI,EAAE,GAAGT,WAC7CE;IAGD,qBACC,MAACQ;QAAIC,WAAU;;0BACd,KAACC;gBACAC,MAAK;gBACLC,IAAI,GAAGL,KAAK,CAAC,EAAEH,OAAO;gBACtBG,MAAMA;gBACNH,OAAOA;gBACPS,gBAAgBT,UAAUC;gBAC1BS,UAAU,CAACC,IAAMT,gBAAgBS,EAAEC,MAAM,CAACZ,KAAK;gBAC/CK,WAAU;;0BAEX,KAACQ;gBAAMC,SAAS,GAAGX,KAAK,CAAC,EAAEH,OAAO;gBAAEK,WAAWR;0BAC7CE;;;;AAIL;AAEA,MAAMgB,iBAAiB,CAAC,EACvBhB,QAAQ,EACRE,YAAY,EACZC,aAAa,EACbC,IAAI,EAC4C;IAChD,MAAMa,eAA0C;QAC/C,GAAIf,iBAAiBgB,aAAa;YAAEhB;QAAa,CAAC;QAClD,GAAIC,kBAAkBe,aAAa;YAAEf;QAAc,CAAC;QACpDC,MAAMA,QAAQ;IACf;IAEA,qBACC,KAACP,sBAAsBsB,QAAQ;QAAClB,OAAOgB;kBACtC,cAAA,KAACZ;YAAIC,WAAU;sBACbN;;;AAIL;AAEA,SAASgB,cAAc,EAAEjB,kBAAkB,GAAG"}
+{"version":3,"sources":["../../../src/components/segment-control.tsx"],"sourcesContent":["import { createContext, type ReactNode, useContext } from \"react\";\nimport { cn } from \"#shadcn/lib/utils.js\";\n\ninterface SegmentControlContextType {\n\tdefaultValue?: string;\n\tonValueChange?: (value: string) => void;\n\tname?: string;\n}\n\nconst SegmentControlContext = createContext<SegmentControlContextType>({});\n\nexport interface SegmentControlProps {\n\tdefaultValue?: string;\n\tonValueChange?: (value: string) => void;\n\tname?: string;\n}\n\ninterface SegmentControlItemProps {\n\tchildren: ReactNode;\n\tvalue: string;\n}\nconst segmentControlItemClass = cn(\n\t\"flex\",\n\t\"items-center\",\n\t\"justify-center\",\n\t\"px-2\",\n\t\"py-0.5\",\n\t\"text-sm\",\n\t\"cursor-pointer\",\n\t\"rounded-2xl\",\n\t\"text-white/80\",\n\t\"peer-checked:bg-bg-primary\",\n\t\"peer-checked:text-text-secondary\",\n\t\"select-none\",\n);\n\nfunction SegmentControlItem({ children, value }: SegmentControlItemProps) {\n\tconst { defaultValue, onValueChange, name } = useContext(\n\t\tSegmentControlContext,\n\t);\n\n\treturn (\n\t\t<div className=\"relative\">\n\t\t\t<input\n\t\t\t\ttype=\"radio\"\n\t\t\t\tid={`${name}-${value}`}\n\t\t\t\tname={name}\n\t\t\t\tvalue={value}\n\t\t\t\tdefaultChecked={value === defaultValue}\n\t\t\t\tonChange={(e) => onValueChange?.(e.target.value)}\n\t\t\t\tclassName=\"sr-only peer\"\n\t\t\t/>\n\t\t\t<label htmlFor={`${name}-${value}`} className={segmentControlItemClass}>\n\t\t\t\t{children}\n\t\t\t</label>\n\t\t</div>\n\t);\n}\n\nfunction SegmentControl({\n\tchildren,\n\tdefaultValue,\n\tonValueChange,\n\tname,\n}: SegmentControlProps & { children?: ReactNode }) {\n\tconst contextValue: SegmentControlContextType = {\n\t\t...(defaultValue !== undefined && { defaultValue }),\n\t\t...(onValueChange !== undefined && { onValueChange }),\n\t\tname: name || \"react-components-segment-control\",\n\t};\n\n\treturn (\n\t\t<SegmentControlContext.Provider value={contextValue}>\n\t\t\t<div className=\"inline-flex bg-gray-500 p-0.5 gap-0 rounded-full\">\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</SegmentControlContext.Provider>\n\t);\n}\n\nexport { SegmentControl, SegmentControlItem };\n"],"names":["createContext","useContext","cn","SegmentControlContext","segmentControlItemClass","SegmentControlItem","children","value","defaultValue","onValueChange","name","div","className","input","type","id","defaultChecked","onChange","e","target","label","htmlFor","SegmentControl","contextValue","undefined","Provider"],"mappings":";AAAA,SAASA,aAAa,EAAkBC,UAAU,QAAQ,QAAQ;AAClE,SAASC,EAAE,QAAQ,yBAAuB;AAQ1C,MAAMC,sCAAwBH,cAAyC,CAAC;AAYxE,MAAMI,0BAA0BF,GAC/B,QACA,gBACA,kBACA,QACA,UACA,WACA,kBACA,eACA,iBACA,8BACA,oCACA;AAGD,SAASG,mBAAmB,EAAEC,QAAQ,EAAEC,KAAK,EAA2B;IACvE,MAAM,EAAEC,YAAY,EAAEC,aAAa,EAAEC,IAAI,EAAE,GAAGT,WAC7CE;IAGD,qBACC,MAACQ;QAAIC,WAAU;;0BACd,KAACC;gBACAC,MAAK;gBACLC,IAAI,GAAGL,KAAK,CAAC,EAAEH,OAAO;gBACtBG,MAAMA;gBACNH,OAAOA;gBACPS,gBAAgBT,UAAUC;gBAC1BS,UAAU,CAACC,IAAMT,gBAAgBS,EAAEC,MAAM,CAACZ,KAAK;gBAC/CK,WAAU;;0BAEX,KAACQ;gBAAMC,SAAS,GAAGX,KAAK,CAAC,EAAEH,OAAO;gBAAEK,WAAWR;0BAC7CE;;;;AAIL;AAEA,SAASgB,eAAe,EACvBhB,QAAQ,EACRE,YAAY,EACZC,aAAa,EACbC,IAAI,EAC4C;IAChD,MAAMa,eAA0C;QAC/C,GAAIf,iBAAiBgB,aAAa;YAAEhB;QAAa,CAAC;QAClD,GAAIC,kBAAkBe,aAAa;YAAEf;QAAc,CAAC;QACpDC,MAAMA,QAAQ;IACf;IAEA,qBACC,KAACP,sBAAsBsB,QAAQ;QAAClB,OAAOgB;kBACtC,cAAA,KAACZ;YAAIC,WAAU;sBACbN;;;AAIL;AAEA,SAASgB,cAAc,EAAEjB,kBAAkB,GAAG"}

package/dist/src/components/segment-control.stories.d.ts

@@ -1,9 +1,8 @@
 import type { StoryObj } from "@storybook/react-vite";
+import { SegmentControl } from "./segment-control";
 declare const meta: {
     title: string;
-    component: ({ children, defaultValue, onValueChange, name, }: import("./segment-control").SegmentControlProps & {
-        children?: import("react").ReactNode;
-    }) => import("react/jsx-runtime").JSX.Element;
+    component: typeof SegmentControl;
     parameters: {
         layout: string;
     };

package/dist/src/components/segment-control.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"segment-control.stories.d.ts","sourceRoot":"","sources":["../../../src/components/segment-control.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI5D,QAAA,MAAM,IAAI;;;gBAyBorB,CAAC;;;;;;CAlBxpB,CAAC;AAExC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC"}
+{"version":3,"file":"segment-control.stories.d.ts","sourceRoot":"","sources":["../../../src/components/segment-control.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,cAAc,EAAsB,MAAM,mBAAmB,CAAC;AAEvE,QAAA,MAAM,IAAI;;;;;;;CAO6B,CAAC;AAExC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC"}

package/dist/src/components/split-button.d.ts

@@ -1,5 +1,5 @@
-declare const SplitButton: ({ children }: {
+declare function SplitButton({ children }: {
     children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export { SplitButton };
 //# sourceMappingURL=split-button.d.ts.map

package/dist/src/components/split-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"split-button.d.ts","sourceRoot":"","sources":["../../../src/components/split-button.tsx"],"names":[],"mappings":"AAYA,QAAA,MAAM,WAAW,GAAI,cAAc;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,4CAE/D,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"split-button.d.ts","sourceRoot":"","sources":["../../../src/components/split-button.tsx"],"names":[],"mappings":"AAYA,iBAAS,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CAE/D;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/src/components/split-button.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../shadcn/lib/utils.js";
 const splitButtonStyles = cn("flex", "*:data-[slot=button]:rounded-r-none", "*:data-[slot=dropdown-menu-trigger]:px-1", "*:data-[slot=dropdown-menu-trigger]:py-2", "*:data-[slot=dropdown-menu-trigger]:rounded-l-none", "*:data-[slot=dropdown-menu-trigger]:border-l-0", "*:data-[slot=dropdown-menu-trigger]:border-l-0");
-const SplitButton = ({ children })=>{
+function SplitButton({ children }) {
     return /*#__PURE__*/ _jsx("div", {
         className: splitButtonStyles,
         children: children
     });
-};
+}
 export { SplitButton };
 
 //# sourceMappingURL=split-button.js.map

package/dist/src/components/split-button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/split-button.tsx"],"sourcesContent":["import { cn } from \"#shadcn/lib/utils\";\n\nconst splitButtonStyles = cn(\n\t\"flex\",\n\t\"*:data-[slot=button]:rounded-r-none\",\n\t\"*:data-[slot=dropdown-menu-trigger]:px-1\",\n\t\"*:data-[slot=dropdown-menu-trigger]:py-2\",\n\t\"*:data-[slot=dropdown-menu-trigger]:rounded-l-none\",\n\t\"*:data-[slot=dropdown-menu-trigger]:border-l-0\",\n\t\"*:data-[slot=dropdown-menu-trigger]:border-l-0\",\n);\n\nconst SplitButton = ({ children }: { children: React.ReactNode }) => {\n\treturn <div className={splitButtonStyles}>{children}</div>;\n};\n\nexport { SplitButton };\n"],"names":["cn","splitButtonStyles","SplitButton","children","div","className"],"mappings":";AAAA,SAASA,EAAE,QAAQ,yBAAoB;AAEvC,MAAMC,oBAAoBD,GACzB,QACA,uCACA,4CACA,4CACA,sDACA,kDACA;AAGD,MAAME,cAAc,CAAC,EAAEC,QAAQ,EAAiC;IAC/D,qBAAO,KAACC;QAAIC,WAAWJ;kBAAoBE;;AAC5C;AAEA,SAASD,WAAW,GAAG"}
+{"version":3,"sources":["../../../src/components/split-button.tsx"],"sourcesContent":["import { cn } from \"#shadcn/lib/utils\";\n\nconst splitButtonStyles = cn(\n\t\"flex\",\n\t\"*:data-[slot=button]:rounded-r-none\",\n\t\"*:data-[slot=dropdown-menu-trigger]:px-1\",\n\t\"*:data-[slot=dropdown-menu-trigger]:py-2\",\n\t\"*:data-[slot=dropdown-menu-trigger]:rounded-l-none\",\n\t\"*:data-[slot=dropdown-menu-trigger]:border-l-0\",\n\t\"*:data-[slot=dropdown-menu-trigger]:border-l-0\",\n);\n\nfunction SplitButton({ children }: { children: React.ReactNode }) {\n\treturn <div className={splitButtonStyles}>{children}</div>;\n}\n\nexport { SplitButton };\n"],"names":["cn","splitButtonStyles","SplitButton","children","div","className"],"mappings":";AAAA,SAASA,EAAE,QAAQ,yBAAoB;AAEvC,MAAMC,oBAAoBD,GACzB,QACA,uCACA,4CACA,4CACA,sDACA,kDACA;AAGD,SAASE,YAAY,EAAEC,QAAQ,EAAiC;IAC/D,qBAAO,KAACC;QAAIC,WAAWJ;kBAAoBE;;AAC5C;AAEA,SAASD,WAAW,GAAG"}

package/dist/src/components/tree-view.d.ts

@@ -5,11 +5,30 @@ interface TreeViewItem<T> {
     children?: string[];
     meta?: T;
 }
-declare function TreeView<T>({ rootItemId, items, selectedItemId, expandedItemIds, onSelectItem, customItemView, onRename, disableHover, zebra, horizontalLines, hideChevron, }: {
+type ExpansionPropsUncontrolled = {
+    defaultExpandedItems?: string[];
+    expandedItems?: never;
+    onExpandedItemsChange?: never;
+};
+type ExpansionPropsControlled = {
+    defaultExpandedItems?: never;
+    expandedItems: string[];
+    onExpandedItemsChange: (items: string[]) => void;
+};
+type ExpansionProps = ExpansionPropsUncontrolled | ExpansionPropsControlled;
+type FocusPropsUncontrolled = {
+    defaultFocusedItem?: string;
+    focusedItem?: never;
+    onFocusedItemChange?: never;
+};
+type FocusPropsControlled = {
+    defaultFocusedItem?: never;
+    focusedItem: string | null;
+    onFocusedItemChange: (item: string | null) => void;
+};
+type FocusProps = FocusPropsUncontrolled | FocusPropsControlled;
+type TreeViewProps<T> = {
     rootItemId: string;
-    selectedItemId?: string;
-    expandedItemIds?: string[];
-    onSelectItem?: (item: ItemInstance<TreeViewItem<T>>) => void;
     items: Record<string, TreeViewItem<T>>;
     customItemView?: (item: ItemInstance<TreeViewItem<T>>, tree: TreeInstance<TreeViewItem<T>>) => React.ReactNode;
     onRename?: ((item: ItemInstance<TreeViewItem<T>>, value: string) => void) | undefined;
@@ -17,6 +36,10 @@ declare function TreeView<T>({ rootItemId, items, selectedItemId, expandedItemId
     zebra?: boolean;
     horizontalLines?: boolean;
     hideChevron?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
+    itemLabelClassFn?: (item: ItemInstance<TreeViewItem<T>>) => string;
+    canReorder?: boolean;
+    onDropFn?: (tree: TreeInstance<TreeViewItem<T>>, item: ItemInstance<TreeViewItem<T>>, newChildren: string[]) => void;
+} & ExpansionProps & FocusProps;
+declare function TreeView<T>({ rootItemId, items, defaultFocusedItem, focusedItem, onFocusedItemChange, defaultExpandedItems, expandedItems, onExpandedItemsChange, customItemView, onRename, disableHover, zebra, horizontalLines, hideChevron, itemLabelClassFn, canReorder, onDropFn, }: TreeViewProps<T>): import("react/jsx-runtime").JSX.Element;
 export { TreeView, type TreeViewItem, type TreeInstance };
 //# sourceMappingURL=tree-view.d.ts.map

package/dist/src/components/tree-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tree-view.d.ts","sourceRoot":"","sources":["../../../src/components/tree-view.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEX,YAAY,EAEZ,YAAY,EAEZ,MAAM,qBAAqB,CAAC;AAQ7B,OAAO,KAAoB,MAAM,OAAO,CAAC;AAsBzC,UAAU,YAAY,CAAC,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,IAAI,CAAC,EAAE,CAAC,CAAC;CACT;AAuBD,iBAAS,QAAQ,CAAC,CAAC,EAAE,EACpB,UAAU,EACV,KAAK,EACL,cAAc,EACd,eAAe,EACf,YAAY,EACZ,cAAc,EACd,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,eAAe,EACf,WAAW,GACX,EAAE;IACF,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC7D,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;IACvC,cAAc,CAAC,EAAE,CAChB,IAAI,EAAE,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,EACnC,IAAI,EAAE,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,KAC/B,KAAK,CAAC,SAAS,CAAC;IACrB,QAAQ,CAAC,EACN,CAAC,CAAC,IAAI,EAAE,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAC9D,SAAS,CAAC;IACb,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,2CA6EA;AAED,OAAO,EAAE,QAAQ,EAAE,KAAK,YAAY,EAAE,KAAK,YAAY,EAAE,CAAC"}
+{"version":3,"file":"tree-view.d.ts","sourceRoot":"","sources":["../../../src/components/tree-view.tsx"],"names":[],"mappings":"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"}

package/dist/src/components/tree-view.js

@@ -1,44 +1,61 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { hotkeysCoreFeature, renamingFeature, selectionFeature, syncDataLoaderFeature } from "@headless-tree/core";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createOnDropHandler, dragAndDropFeature, hotkeysCoreFeature, renamingFeature, selectionFeature, syncDataLoaderFeature } from "@headless-tree/core";
 import { useTree } from "@headless-tree/react";
-import React, { useEffect } from "react";
+import React from "react";
 import { Tree, TreeItem, TreeItemLabel } from "../shadcn/components/ui/tree.js";
 import { cn } from "../shadcn/lib/utils.js";
 // Styles
-const treeItemStyle = cn("relative", "before:absolute", "before:inset-0", "before:-ms-1", "before:bg-[repeating-linear-gradient(to_right,transparent_0,transparent_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)))]");
+const treeItemStyle = cn("relative", "before:absolute", "before:inset-0", "before:-ms-1", "before:-z-20", "before:bg-[repeating-linear-gradient(to_right,transparent_0,transparent_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)))]");
 const treeItemLabelStyle = cn("before:bg-background", "relative", "before:absolute", "before:inset-x-0", "before:-inset-y-0", "before:-z-10");
 const customClickBehavior = {
     itemInstance: {
-        getProps: ({ tree, item, prev })=>({
+        getProps: ({ item, prev })=>{
+            return {
                 ...prev?.(),
                 onClick: ()=>{
+                    item.setFocused();
                     item.primaryAction();
-                    if (item.isExpanded()) {
-                        item.collapse();
-                    } else {
-                        item.expand();
-                    }
-                    if (!item.isFolder()) {
-                        tree.setSelectedItems([
-                            item.getItemMeta().itemId
-                        ]);
-                    }
                 }
-            })
+            };
+        }
     }
 };
-const indent = 24;
-function TreeView({ rootItemId, items, selectedItemId, expandedItemIds, onSelectItem, customItemView, onRename, disableHover, zebra, horizontalLines, hideChevron }) {
-    const [state, setState] = React.useState({});
+const indent = 22;
+function TreeView({ rootItemId, items, defaultFocusedItem, focusedItem, onFocusedItemChange, defaultExpandedItems, expandedItems, onExpandedItemsChange, customItemView, onRename, disableHover, zebra, horizontalLines, hideChevron, itemLabelClassFn, canReorder, onDropFn }) {
+    "use no memo";
+    const initialExpandedItems = defaultExpandedItems ?? expandedItems;
+    const initialFocusedItem = defaultFocusedItem ?? focusedItem;
+    const setExpandedItems = expandedItems !== undefined && onExpandedItemsChange !== undefined ? (updater)=>{
+        const newVal = updater instanceof Function ? updater(expandedItems) : updater;
+        onExpandedItemsChange(newVal);
+    } : undefined;
+    const setFocusedItem = focusedItem !== undefined && onFocusedItemChange !== undefined ? (updater)=>{
+        const newVal = updater instanceof Function ? updater(focusedItem) : updater;
+        onFocusedItemChange(newVal);
+    } : undefined;
     const treeConfig = {
         initialState: {
-            selectedItems: selectedItemId ? [
-                selectedItemId
-            ] : [],
-            expandedItems: expandedItemIds ?? []
+            ...initialExpandedItems !== undefined ? {
+                expandedItems: initialExpandedItems
+            } : {},
+            ...initialFocusedItem !== undefined ? {
+                focusedItem: initialFocusedItem
+            } : {}
+        },
+        state: {
+            ...expandedItems !== undefined ? {
+                expandedItems
+            } : {},
+            ...focusedItem !== undefined ? {
+                focusedItem
+            } : {}
         },
-        state,
-        setState,
+        ...setExpandedItems !== undefined ? {
+            setExpandedItems
+        } : {},
+        ...setFocusedItem !== undefined ? {
+            setFocusedItem
+        } : {},
         indent,
         rootItemId: rootItemId,
         isItemFolder: (item)=>item.getItemData()?.children !== undefined,
@@ -54,46 +71,44 @@ function TreeView({ rootItemId, items, selectedItemId, expandedItemIds, onSelect
             syncDataLoaderFeature,
             hotkeysCoreFeature,
             selectionFeature,
-            customClickBehavior,
-            renamingFeature
-        ]
+            renamingFeature,
+            dragAndDropFeature,
+            customClickBehavior
+        ],
+        canReorder: canReorder ?? false,
+        onDrop: createOnDropHandler((item, newChildren)=>{
+            onDropFn?.(tree, item, newChildren);
+        })
     };
     const tree = useTree(treeConfig);
-    // biome-ignore lint/correctness/useExhaustiveDependencies: We must have explicit sync here
-    useEffect(()=>{
+    const [prevItems, setPrevItems] = React.useState(null);
+    if (prevItems !== items) {
         tree.rebuildTree();
-    }, [
-        items
-    ]);
-    useEffect(()=>{
-        setState((currentState)=>{
-            return {
-                ...currentState,
-                selectedItems: selectedItemId ? [
-                    selectedItemId
-                ] : []
-            };
-        });
-    }, [
-        selectedItemId
-    ]);
-    return /*#__PURE__*/ _jsx(Tree, {
+        setPrevItems(items);
+    }
+    return /*#__PURE__*/ _jsxs(Tree, {
         tree: tree,
         indent: indent,
-        children: tree.getItems().map((item)=>{
-            return /*#__PURE__*/ _jsx(TreeItem, {
-                item: item,
-                className: cn(treeItemStyle, zebra ? "even:bg-bg-secondary even:[&_[data-slot=tree-item-label]]:bg-bg-secondary" : ""),
-                children: /*#__PURE__*/ _jsx(TreeItemLabel, {
-                    hideChevron: hideChevron ?? false,
-                    disableHover: disableHover ?? false,
-                    className: treeItemLabelStyle,
-                    onClick: ()=>onSelectItem?.(item),
-                    horizontalLines: horizontalLines ?? false,
-                    children: customItemView ? customItemView(item, tree) : item.getItemData()?.name
-                })
-            }, item.getId());
-        })
+        children: [
+            tree.getItems().map((item)=>{
+                return /*#__PURE__*/ _jsx(TreeItem, {
+                    item: item,
+                    className: cn(treeItemStyle, zebra ? "even:bg-bg-secondary even:[&_[data-slot=tree-item-label]]:bg-bg-secondary" : ""),
+                    children: /*#__PURE__*/ _jsx(TreeItemLabel, {
+                        hideChevron: hideChevron ?? false,
+                        disableHover: disableHover ?? false,
+                        className: cn(treeItemLabelStyle, itemLabelClassFn?.(item)),
+                        // onClick={() => onSelectItem?.(item)}
+                        horizontalLines: horizontalLines ?? false,
+                        children: customItemView ? customItemView(item, tree) : item.getItemData()?.name
+                    })
+                }, item.getId());
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                style: tree.getDragLineStyle(),
+                className: "h-px bg-bg-link z-100 mx-4"
+            })
+        ]
     });
 }
 export { TreeView };

package/dist/src/components/tree-view.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/tree-view.tsx"],"sourcesContent":["import type {\n\tFeatureImplementation,\n\tItemInstance,\n\tTreeConfig,\n\tTreeInstance,\n\tTreeState,\n} from \"@headless-tree/core\";\nimport {\n\thotkeysCoreFeature,\n\trenamingFeature,\n\tselectionFeature,\n\tsyncDataLoaderFeature,\n} from \"@headless-tree/core\";\nimport { useTree } from \"@headless-tree/react\";\nimport React, { useEffect } from \"react\";\nimport { Tree, TreeItem, TreeItemLabel } from \"#shadcn/components/ui/tree\";\nimport { cn } from \"#shadcn/lib/utils.js\";\n\n// Styles\nconst treeItemStyle = cn(\n\t\"relative\",\n\t\"before:absolute\",\n\t\"before:inset-0\",\n\t\"before:-ms-1\",\n\t\"before:bg-[repeating-linear-gradient(to_right,transparent_0,transparent_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)))]\",\n);\n\nconst treeItemLabelStyle = cn(\n\t\"before:bg-background\",\n\t\"relative\",\n\t\"before:absolute\",\n\t\"before:inset-x-0\",\n\t\"before:-inset-y-0\",\n\t\"before:-z-10\",\n);\n\ninterface TreeViewItem<T> {\n\tname: string;\n\tchildren?: string[];\n\tmeta?: T;\n}\n\nconst customClickBehavior: FeatureImplementation = {\n\titemInstance: {\n\t\tgetProps: ({ tree, item, prev }) => ({\n\t\t\t...prev?.(),\n\t\t\tonClick: () => {\n\t\t\t\titem.primaryAction();\n\t\t\t\tif (item.isExpanded()) {\n\t\t\t\t\titem.collapse();\n\t\t\t\t} else {\n\t\t\t\t\titem.expand();\n\t\t\t\t}\n\t\t\t\tif (!item.isFolder()) {\n\t\t\t\t\ttree.setSelectedItems([item.getItemMeta().itemId]);\n\t\t\t\t}\n\t\t\t},\n\t\t}),\n\t},\n};\n\nconst indent = 24;\n\nfunction TreeView<T>({\n\trootItemId,\n\titems,\n\tselectedItemId,\n\texpandedItemIds,\n\tonSelectItem,\n\tcustomItemView,\n\tonRename,\n\tdisableHover,\n\tzebra,\n\thorizontalLines,\n\thideChevron,\n}: {\n\trootItemId: string;\n\tselectedItemId?: string;\n\texpandedItemIds?: string[];\n\tonSelectItem?: (item: ItemInstance<TreeViewItem<T>>) => void;\n\titems: Record<string, TreeViewItem<T>>;\n\tcustomItemView?: (\n\t\titem: ItemInstance<TreeViewItem<T>>,\n\t\ttree: TreeInstance<TreeViewItem<T>>,\n\t) => React.ReactNode;\n\tonRename?:\n\t\t| ((item: ItemInstance<TreeViewItem<T>>, value: string) => void)\n\t\t| undefined;\n\tdisableHover?: boolean;\n\tzebra?: boolean;\n\thorizontalLines?: boolean;\n\thideChevron?: boolean;\n}) {\n\tconst [state, setState] = React.useState<Partial<TreeState<TreeViewItem<T>>>>(\n\t\t{},\n\t);\n\tconst treeConfig: TreeConfig<TreeViewItem<T>> = {\n\t\tinitialState: {\n\t\t\tselectedItems: selectedItemId ? [selectedItemId] : [],\n\t\t\texpandedItems: expandedItemIds ?? [],\n\t\t},\n\t\tstate,\n\t\tsetState,\n\t\tindent,\n\t\trootItemId: rootItemId,\n\t\tisItemFolder: (item: ItemInstance<TreeViewItem<T>>) =>\n\t\t\titem.getItemData()?.children !== undefined,\n\t\tgetItemName: (item: ItemInstance<TreeViewItem<T>>) =>\n\t\t\titem.getItemData()?.name,\n\t\tdataLoader: {\n\t\t\tgetItem: (itemId) => (items[itemId] as TreeViewItem<T>) ?? {},\n\t\t\tgetChildren: (itemId) => items[itemId]?.children ?? [],\n\t\t},\n\t\t...(onRename ? { onRename: onRename } : {}),\n\t\tfeatures: [\n\t\t\tsyncDataLoaderFeature,\n\t\t\thotkeysCoreFeature,\n\t\t\tselectionFeature,\n\t\t\tcustomClickBehavior,\n\t\t\trenamingFeature,\n\t\t],\n\t};\n\n\tconst tree = useTree<TreeViewItem<T>>(treeConfig);\n\n\t// biome-ignore lint/correctness/useExhaustiveDependencies: We must have explicit sync here\n\tuseEffect(() => {\n\t\ttree.rebuildTree();\n\t}, [items]);\n\n\tuseEffect(() => {\n\t\tsetState((currentState) => {\n\t\t\treturn {\n\t\t\t\t...currentState,\n\t\t\t\tselectedItems: selectedItemId ? [selectedItemId] : [],\n\t\t\t};\n\t\t});\n\t}, [selectedItemId]);\n\n\treturn (\n\t\t<Tree tree={tree} indent={indent}>\n\t\t\t{tree.getItems().map((item) => {\n\t\t\t\treturn (\n\t\t\t\t\t<TreeItem\n\t\t\t\t\t\tkey={item.getId()}\n\t\t\t\t\t\titem={item}\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\ttreeItemStyle,\n\t\t\t\t\t\t\tzebra\n\t\t\t\t\t\t\t\t? \"even:bg-bg-secondary even:[&_[data-slot=tree-item-label]]:bg-bg-secondary\"\n\t\t\t\t\t\t\t\t: \"\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<TreeItemLabel\n\t\t\t\t\t\t\thideChevron={hideChevron ?? false}\n\t\t\t\t\t\t\tdisableHover={disableHover ?? false}\n\t\t\t\t\t\t\tclassName={treeItemLabelStyle}\n\t\t\t\t\t\t\tonClick={() => onSelectItem?.(item)}\n\t\t\t\t\t\t\thorizontalLines={horizontalLines ?? false}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{customItemView\n\t\t\t\t\t\t\t\t? customItemView(item, tree)\n\t\t\t\t\t\t\t\t: item.getItemData()?.name}\n\t\t\t\t\t\t</TreeItemLabel>\n\t\t\t\t\t</TreeItem>\n\t\t\t\t);\n\t\t\t})}\n\t\t</Tree>\n\t);\n}\n\nexport { TreeView, type TreeViewItem, type TreeInstance };\n"],"names":["hotkeysCoreFeature","renamingFeature","selectionFeature","syncDataLoaderFeature","useTree","React","useEffect","Tree","TreeItem","TreeItemLabel","cn","treeItemStyle","treeItemLabelStyle","customClickBehavior","itemInstance","getProps","tree","item","prev","onClick","primaryAction","isExpanded","collapse","expand","isFolder","setSelectedItems","getItemMeta","itemId","indent","TreeView","rootItemId","items","selectedItemId","expandedItemIds","onSelectItem","customItemView","onRename","disableHover","zebra","horizontalLines","hideChevron","state","setState","useState","treeConfig","initialState","selectedItems","expandedItems","isItemFolder","getItemData","children","undefined","getItemName","name","dataLoader","getItem","getChildren","features","rebuildTree","currentState","getItems","map","className","getId"],"mappings":";AAOA,SACCA,kBAAkB,EAClBC,eAAe,EACfC,gBAAgB,EAChBC,qBAAqB,QACf,sBAAsB;AAC7B,SAASC,OAAO,QAAQ,uBAAuB;AAC/C,OAAOC,SAASC,SAAS,QAAQ,QAAQ;AACzC,SAASC,IAAI,EAAEC,QAAQ,EAAEC,aAAa,QAAQ,kCAA6B;AAC3E,SAASC,EAAE,QAAQ,yBAAuB;AAE1C,SAAS;AACT,MAAMC,gBAAgBD,GACrB,YACA,mBACA,kBACA,gBACA;AAGD,MAAME,qBAAqBF,GAC1B,wBACA,YACA,mBACA,oBACA,qBACA;AASD,MAAMG,sBAA6C;IAClDC,cAAc;QACbC,UAAU,CAAC,EAAEC,IAAI,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAM,CAAA;gBACpC,GAAGA,QAAQ;gBACXC,SAAS;oBACRF,KAAKG,aAAa;oBAClB,IAAIH,KAAKI,UAAU,IAAI;wBACtBJ,KAAKK,QAAQ;oBACd,OAAO;wBACNL,KAAKM,MAAM;oBACZ;oBACA,IAAI,CAACN,KAAKO,QAAQ,IAAI;wBACrBR,KAAKS,gBAAgB,CAAC;4BAACR,KAAKS,WAAW,GAAGC,MAAM;yBAAC;oBAClD;gBACD;YACD,CAAA;IACD;AACD;AAEA,MAAMC,SAAS;AAEf,SAASC,SAAY,EACpBC,UAAU,EACVC,KAAK,EACLC,cAAc,EACdC,eAAe,EACfC,YAAY,EACZC,cAAc,EACdC,QAAQ,EACRC,YAAY,EACZC,KAAK,EACLC,eAAe,EACfC,WAAW,EAkBX;IACA,MAAM,CAACC,OAAOC,SAAS,GAAGrC,MAAMsC,QAAQ,CACvC,CAAC;IAEF,MAAMC,aAA0C;QAC/CC,cAAc;YACbC,eAAed,iBAAiB;gBAACA;aAAe,GAAG,EAAE;YACrDe,eAAed,mBAAmB,EAAE;QACrC;QACAQ;QACAC;QACAd;QACAE,YAAYA;QACZkB,cAAc,CAAC/B,OACdA,KAAKgC,WAAW,IAAIC,aAAaC;QAClCC,aAAa,CAACnC,OACbA,KAAKgC,WAAW,IAAII;QACrBC,YAAY;YACXC,SAAS,CAAC5B,SAAW,AAACI,KAAK,CAACJ,OAAO,IAAwB,CAAC;YAC5D6B,aAAa,CAAC7B,SAAWI,KAAK,CAACJ,OAAO,EAAEuB,YAAY,EAAE;QACvD;QACA,GAAId,WAAW;YAAEA,UAAUA;QAAS,IAAI,CAAC,CAAC;QAC1CqB,UAAU;YACTtD;YACAH;YACAE;YACAW;YACAZ;SACA;IACF;IAEA,MAAMe,OAAOZ,QAAyBwC;IAEtC,2FAA2F;IAC3FtC,UAAU;QACTU,KAAK0C,WAAW;IACjB,GAAG;QAAC3B;KAAM;IAEVzB,UAAU;QACToC,SAAS,CAACiB;YACT,OAAO;gBACN,GAAGA,YAAY;gBACfb,eAAed,iBAAiB;oBAACA;iBAAe,GAAG,EAAE;YACtD;QACD;IACD,GAAG;QAACA;KAAe;IAEnB,qBACC,KAACzB;QAAKS,MAAMA;QAAMY,QAAQA;kBACxBZ,KAAK4C,QAAQ,GAAGC,GAAG,CAAC,CAAC5C;YACrB,qBACC,KAACT;gBAEAS,MAAMA;gBACN6C,WAAWpD,GACVC,eACA2B,QACG,8EACA;0BAGJ,cAAA,KAAC7B;oBACA+B,aAAaA,eAAe;oBAC5BH,cAAcA,gBAAgB;oBAC9ByB,WAAWlD;oBACXO,SAAS,IAAMe,eAAejB;oBAC9BsB,iBAAiBA,mBAAmB;8BAEnCJ,iBACEA,eAAelB,MAAMD,QACrBC,KAAKgC,WAAW,IAAII;;eAlBnBpC,KAAK8C,KAAK;QAsBlB;;AAGH;AAEA,SAASlC,QAAQ,GAAyC"}
+{"version":3,"sources":["../../../src/components/tree-view.tsx"],"sourcesContent":["import type {\n\tFeatureImplementation,\n\tItemInstance,\n\tTreeConfig,\n\tTreeInstance,\n\tUpdater,\n} from \"@headless-tree/core\";\nimport {\n\tcreateOnDropHandler,\n\tdragAndDropFeature,\n\thotkeysCoreFeature,\n\trenamingFeature,\n\tselectionFeature,\n\tsyncDataLoaderFeature,\n} from \"@headless-tree/core\";\nimport { useTree } from \"@headless-tree/react\";\nimport React from \"react\";\nimport { Tree, TreeItem, TreeItemLabel } from \"#shadcn/components/ui/tree\";\nimport { cn } from \"#shadcn/lib/utils.js\";\n\n// Styles\nconst treeItemStyle = cn(\n\t\"relative\",\n\t\"before:absolute\",\n\t\"before:inset-0\",\n\t\"before:-ms-1\",\n\t\"before:-z-20\",\n\t\"before:bg-[repeating-linear-gradient(to_right,transparent_0,transparent_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)))]\",\n);\n\nconst treeItemLabelStyle = cn(\n\t\"before:bg-background\",\n\t\"relative\",\n\t\"before:absolute\",\n\t\"before:inset-x-0\",\n\t\"before:-inset-y-0\",\n\t\"before:-z-10\",\n);\n\ninterface TreeViewItem<T> {\n\tname: string;\n\tchildren?: string[];\n\tmeta?: T;\n}\n\nconst customClickBehavior: FeatureImplementation = {\n\titemInstance: {\n\t\tgetProps: ({ item, prev }) => {\n\t\t\treturn {\n\t\t\t\t...prev?.(),\n\t\t\t\tonClick: () => {\n\t\t\t\t\titem.setFocused();\n\t\t\t\t\titem.primaryAction();\n\t\t\t\t},\n\t\t\t};\n\t\t},\n\t},\n};\n\nconst indent = 22;\n\ntype ExpansionPropsUncontrolled = {\n\tdefaultExpandedItems?: string[];\n\texpandedItems?: never;\n\tonExpandedItemsChange?: never;\n};\ntype ExpansionPropsControlled = {\n\tdefaultExpandedItems?: never;\n\texpandedItems: string[];\n\tonExpandedItemsChange: (items: string[]) => void;\n};\ntype ExpansionProps = ExpansionPropsUncontrolled | ExpansionPropsControlled;\n\ntype FocusPropsUncontrolled = {\n\tdefaultFocusedItem?: string;\n\tfocusedItem?: never;\n\tonFocusedItemChange?: never;\n};\ntype FocusPropsControlled = {\n\tdefaultFocusedItem?: never;\n\tfocusedItem: string | null;\n\tonFocusedItemChange: (item: string | null) => void;\n};\ntype FocusProps = FocusPropsUncontrolled | FocusPropsControlled;\n\ntype TreeViewProps<T> = {\n\trootItemId: string;\n\titems: Record<string, TreeViewItem<T>>;\n\tcustomItemView?: (\n\t\titem: ItemInstance<TreeViewItem<T>>,\n\t\ttree: TreeInstance<TreeViewItem<T>>,\n\t) => React.ReactNode;\n\tonRename?:\n\t\t| ((item: ItemInstance<TreeViewItem<T>>, value: string) => void)\n\t\t| undefined;\n\tdisableHover?: boolean;\n\tzebra?: boolean;\n\thorizontalLines?: boolean;\n\thideChevron?: boolean;\n\titemLabelClassFn?: (item: ItemInstance<TreeViewItem<T>>) => string;\n\tcanReorder?: boolean;\n\tonDropFn?: (\n\t\ttree: TreeInstance<TreeViewItem<T>>,\n\t\titem: ItemInstance<TreeViewItem<T>>,\n\t\tnewChildren: string[],\n\t) => void;\n} & ExpansionProps &\n\tFocusProps;\n\nfunction TreeView<T>({\n\trootItemId,\n\titems,\n\tdefaultFocusedItem,\n\tfocusedItem,\n\tonFocusedItemChange,\n\tdefaultExpandedItems,\n\texpandedItems,\n\tonExpandedItemsChange,\n\tcustomItemView,\n\tonRename,\n\tdisableHover,\n\tzebra,\n\thorizontalLines,\n\thideChevron,\n\titemLabelClassFn,\n\tcanReorder,\n\tonDropFn,\n}: TreeViewProps<T>) {\n\t\"use no memo\";\n\n\tconst initialExpandedItems = defaultExpandedItems ?? expandedItems;\n\tconst initialFocusedItem = defaultFocusedItem ?? focusedItem;\n\n\tconst setExpandedItems =\n\t\texpandedItems !== undefined && onExpandedItemsChange !== undefined\n\t\t\t? (updater: Updater<string[]>) => {\n\t\t\t\t\tconst newVal =\n\t\t\t\t\t\tupdater instanceof Function ? updater(expandedItems) : updater;\n\n\t\t\t\t\tonExpandedItemsChange(newVal);\n\t\t\t\t}\n\t\t\t: undefined;\n\n\tconst setFocusedItem =\n\t\tfocusedItem !== undefined && onFocusedItemChange !== undefined\n\t\t\t? (updater: Updater<string | null>) => {\n\t\t\t\t\tconst newVal =\n\t\t\t\t\t\tupdater instanceof Function ? updater(focusedItem) : updater;\n\n\t\t\t\t\tonFocusedItemChange(newVal);\n\t\t\t\t}\n\t\t\t: undefined;\n\n\tconst treeConfig: TreeConfig<TreeViewItem<T>> = {\n\t\tinitialState: {\n\t\t\t...(initialExpandedItems !== undefined\n\t\t\t\t? { expandedItems: initialExpandedItems }\n\t\t\t\t: {}),\n\t\t\t...(initialFocusedItem !== undefined\n\t\t\t\t? { focusedItem: initialFocusedItem }\n\t\t\t\t: {}),\n\t\t},\n\t\tstate: {\n\t\t\t...(expandedItems !== undefined ? { expandedItems } : {}),\n\t\t\t...(focusedItem !== undefined ? { focusedItem } : {}),\n\t\t},\n\t\t...(setExpandedItems !== undefined ? { setExpandedItems } : {}),\n\t\t...(setFocusedItem !== undefined ? { setFocusedItem } : {}),\n\t\tindent,\n\t\trootItemId: rootItemId,\n\t\tisItemFolder: (item: ItemInstance<TreeViewItem<T>>) =>\n\t\t\titem.getItemData()?.children !== undefined,\n\t\tgetItemName: (item: ItemInstance<TreeViewItem<T>>) =>\n\t\t\titem.getItemData()?.name,\n\t\tdataLoader: {\n\t\t\tgetItem: (itemId) => (items[itemId] as TreeViewItem<T>) ?? {},\n\t\t\tgetChildren: (itemId) => items[itemId]?.children ?? [],\n\t\t},\n\t\t...(onRename ? { onRename: onRename } : {}),\n\t\tfeatures: [\n\t\t\tsyncDataLoaderFeature,\n\t\t\thotkeysCoreFeature,\n\t\t\tselectionFeature,\n\t\t\trenamingFeature,\n\t\t\tdragAndDropFeature,\n\t\t\tcustomClickBehavior,\n\t\t],\n\t\tcanReorder: canReorder ?? false,\n\t\tonDrop: createOnDropHandler((item, newChildren) => {\n\t\t\tonDropFn?.(tree, item, newChildren);\n\t\t}),\n\t};\n\n\tconst tree = useTree<TreeViewItem<T>>(treeConfig);\n\n\tconst [prevItems, setPrevItems] = React.useState<null | typeof items>(null);\n\tif (prevItems !== items) {\n\t\ttree.rebuildTree();\n\t\tsetPrevItems(items);\n\t}\n\n\treturn (\n\t\t<Tree tree={tree} indent={indent}>\n\t\t\t{tree.getItems().map((item) => {\n\t\t\t\treturn (\n\t\t\t\t\t<TreeItem\n\t\t\t\t\t\tkey={item.getId()}\n\t\t\t\t\t\titem={item}\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\ttreeItemStyle,\n\t\t\t\t\t\t\tzebra\n\t\t\t\t\t\t\t\t? \"even:bg-bg-secondary even:[&_[data-slot=tree-item-label]]:bg-bg-secondary\"\n\t\t\t\t\t\t\t\t: \"\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<TreeItemLabel\n\t\t\t\t\t\t\thideChevron={hideChevron ?? false}\n\t\t\t\t\t\t\tdisableHover={disableHover ?? false}\n\t\t\t\t\t\t\tclassName={cn(treeItemLabelStyle, itemLabelClassFn?.(item))}\n\t\t\t\t\t\t\t// onClick={() => onSelectItem?.(item)}\n\t\t\t\t\t\t\thorizontalLines={horizontalLines ?? false}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{customItemView\n\t\t\t\t\t\t\t\t? customItemView(item, tree)\n\t\t\t\t\t\t\t\t: item.getItemData()?.name}\n\t\t\t\t\t\t</TreeItemLabel>\n\t\t\t\t\t</TreeItem>\n\t\t\t\t);\n\t\t\t})}\n\t\t\t<div\n\t\t\t\tstyle={tree.getDragLineStyle()}\n\t\t\t\tclassName=\"h-px bg-bg-link z-100 mx-4\"\n\t\t\t/>\n\t\t</Tree>\n\t);\n}\n\nexport { TreeView, type TreeViewItem, type TreeInstance };\n"],"names":["createOnDropHandler","dragAndDropFeature","hotkeysCoreFeature","renamingFeature","selectionFeature","syncDataLoaderFeature","useTree","React","Tree","TreeItem","TreeItemLabel","cn","treeItemStyle","treeItemLabelStyle","customClickBehavior","itemInstance","getProps","item","prev","onClick","setFocused","primaryAction","indent","TreeView","rootItemId","items","defaultFocusedItem","focusedItem","onFocusedItemChange","defaultExpandedItems","expandedItems","onExpandedItemsChange","customItemView","onRename","disableHover","zebra","horizontalLines","hideChevron","itemLabelClassFn","canReorder","onDropFn","initialExpandedItems","initialFocusedItem","setExpandedItems","undefined","updater","newVal","Function","setFocusedItem","treeConfig","initialState","state","isItemFolder","getItemData","children","getItemName","name","dataLoader","getItem","itemId","getChildren","features","onDrop","newChildren","tree","prevItems","setPrevItems","useState","rebuildTree","getItems","map","className","getId","div","style","getDragLineStyle"],"mappings":"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"}

package/dist/src/components/tree-view.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tree-view.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tree-view.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAO5D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAO/B,CAAC;AACF,KAAK,QAAQ,GAAG;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC;AAqIjD,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC;AAiFF,eAAO,MAAM,cAAc,EAAE,KAU5B,CAAC"}
+{"version":3,"file":"tree-view.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tree-view.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAO5D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAO/B,CAAC;AACF,KAAK,QAAQ,GAAG;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC;AAqIjD,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC;AAuFF,eAAO,MAAM,cAAc,EAAE,KAU5B,CAAC"}

package/dist/src/components/tree-view.stories.js

@@ -166,17 +166,17 @@ export const Default = {
     args: {
         items: items,
         rootItemId: "root",
-        selectedItemId: "request9",
-        expandedItemIds: [
+        focusedItem: "request9",
+        defaultExpandedItems: [
             "collection3"
         ],
-        onSelectItem: (a)=>action("onSelectItem")(a)
+        onFocusedItemChange: (a)=>action("onSelectItem")(a)
     },
     render: (args)=>/*#__PURE__*/ _jsx(TreeView, {
             ...args
         })
 };
-const customItemView = (item)=>{
+function customItemView(item) {
     const isRootLevel = item.getItemMeta().level === 0;
     const hasChildren = item.getItemData()?.children !== undefined;
     const requestMethhod = item.getItemData()?.meta?.method;
@@ -235,35 +235,44 @@ const customItemView = (item)=>{
                         variant: "link",
                         size: "small",
                         className: "p-0 h-4",
-                        children: item.getItemData()?.meta?.pinned ? /*#__PURE__*/ _jsx(PinIcon, {}) : /*#__PURE__*/ _jsx(Pin, {})
+                        asChild: true,
+                        children: /*#__PURE__*/ _jsx("span", {
+                            children: item.getItemData()?.meta?.pinned ? /*#__PURE__*/ _jsx(PinIcon, {}) : /*#__PURE__*/ _jsx(Pin, {})
+                        })
                     }),
                     hasChildren && /*#__PURE__*/ _jsx(Button, {
                         variant: "link",
                         size: "small",
                         className: "p-0 h-4",
-                        children: /*#__PURE__*/ _jsx(Plus, {})
+                        asChild: true,
+                        children: /*#__PURE__*/ _jsx("span", {
+                            children: /*#__PURE__*/ _jsx(Plus, {})
+                        })
                     }),
                     /*#__PURE__*/ _jsx(Button, {
                         variant: "link",
                         size: "small",
                         className: "p-0 h-4",
-                        children: /*#__PURE__*/ _jsx(Ellipsis, {})
+                        asChild: true,
+                        children: /*#__PURE__*/ _jsx("span", {
+                            children: /*#__PURE__*/ _jsx(Ellipsis, {})
+                        })
                     })
                 ]
             })
         ]
     });
-};
+}
 export const CustomItemView = {
     args: {
         items: items,
         rootItemId: "root",
-        selectedItemId: "request11",
-        expandedItemIds: [
+        focusedItem: "request11",
+        defaultExpandedItems: [
             "collection3",
             "collection4"
         ],
-        onSelectItem: (a)=>action("onSelectItem")(a.getItemData()?.name),
+        onFocusedItemChange: (a)=>action("onSelectItem")(a ? items[a]?.name : a),
         customItemView: customItemView
     },
     render: (args)=>/*#__PURE__*/ _jsx(TreeView, {