@health-samurai/react-components 0.0.0-alpha.7 → 0.0.0-alpha.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bundle.css +10 -10
- package/dist/src/components/data-table.d.ts +7 -5
- package/dist/src/components/data-table.d.ts.map +1 -1
- package/dist/src/components/data-table.js.map +1 -1
- package/dist/src/components/data-table.stories.d.ts +6 -2
- package/dist/src/components/data-table.stories.d.ts.map +1 -1
- package/dist/src/components/data-table.stories.js.map +1 -1
- package/dist/src/components/fhir-structure-view.d.ts +8 -8
- package/dist/src/components/fhir-structure-view.d.ts.map +1 -1
- package/dist/src/components/fhir-structure-view.js +9 -7
- package/dist/src/components/fhir-structure-view.js.map +1 -1
- package/dist/src/components/request-line-editor.d.ts.map +1 -1
- package/dist/src/components/request-line-editor.js +1 -1
- package/dist/src/components/request-line-editor.js.map +1 -1
- package/dist/src/components/segment-control.d.ts +3 -3
- package/dist/src/components/segment-control.d.ts.map +1 -1
- package/dist/src/components/segment-control.js +4 -4
- package/dist/src/components/segment-control.js.map +1 -1
- package/dist/src/components/segment-control.stories.d.ts +2 -3
- package/dist/src/components/segment-control.stories.d.ts.map +1 -1
- package/dist/src/components/split-button.d.ts +2 -2
- package/dist/src/components/split-button.d.ts.map +1 -1
- package/dist/src/components/split-button.js +2 -2
- package/dist/src/components/split-button.js.map +1 -1
- package/dist/src/components/tree-view.d.ts +25 -5
- package/dist/src/components/tree-view.d.ts.map +1 -1
- package/dist/src/components/tree-view.js +44 -51
- package/dist/src/components/tree-view.js.map +1 -1
- package/dist/src/components/tree-view.stories.js +8 -8
- package/dist/src/components/tree-view.stories.js.map +1 -1
- package/dist/src/icons.d.ts +8 -8
- package/dist/src/icons.d.ts.map +1 -1
- package/dist/src/icons.js +16 -16
- package/dist/src/icons.js.map +1 -1
- package/dist/src/index.d.ts +1 -1
- package/dist/src/index.d.ts.map +1 -1
- package/dist/src/index.js.map +1 -1
- package/dist/src/shadcn/components/ui/chart.d.ts +2 -2
- package/dist/src/shadcn/components/ui/chart.d.ts.map +1 -1
- package/dist/src/shadcn/components/ui/chart.js +2 -2
- package/dist/src/shadcn/components/ui/chart.js.map +1 -1
- package/dist/src/shadcn/components/ui/combobox.d.ts.map +1 -1
- package/dist/src/shadcn/components/ui/combobox.js +13 -22
- package/dist/src/shadcn/components/ui/combobox.js.map +1 -1
- package/dist/src/shadcn/components/ui/command.js +1 -1
- package/dist/src/shadcn/components/ui/command.js.map +1 -1
- package/dist/src/shadcn/components/ui/form.d.ts +2 -2
- package/dist/src/shadcn/components/ui/form.d.ts.map +1 -1
- package/dist/src/shadcn/components/ui/form.js +4 -4
- package/dist/src/shadcn/components/ui/form.js.map +1 -1
- package/dist/src/shadcn/components/ui/select.d.ts.map +1 -1
- package/dist/src/shadcn/components/ui/select.js +3 -2
- package/dist/src/shadcn/components/ui/select.js.map +1 -1
- package/dist/src/shadcn/components/ui/sonner.d.ts +3 -3
- package/dist/src/shadcn/components/ui/sonner.d.ts.map +1 -1
- package/dist/src/shadcn/components/ui/sonner.js +4 -4
- package/dist/src/shadcn/components/ui/sonner.js.map +1 -1
- package/dist/src/shadcn/components/ui/tabs.d.ts +6 -1
- package/dist/src/shadcn/components/ui/tabs.d.ts.map +1 -1
- package/dist/src/shadcn/components/ui/tabs.js +12 -8
- package/dist/src/shadcn/components/ui/tabs.js.map +1 -1
- package/dist/src/shadcn/components/ui/tree.d.ts.map +1 -1
- package/dist/src/shadcn/components/ui/tree.js +2 -2
- package/dist/src/shadcn/components/ui/tree.js.map +1 -1
- package/package.json +1 -1
- package/src/components/data-table.stories.tsx +9 -7
- package/src/components/data-table.tsx +6 -5
- package/src/components/fhir-structure-view.tsx +16 -14
- package/src/components/request-line-editor.tsx +1 -0
- package/src/components/segment-control.tsx +5 -5
- package/src/components/split-button.tsx +2 -2
- package/src/components/tree-view.stories.tsx +8 -8
- package/src/components/tree-view.tsx +100 -66
- package/src/icons.tsx +16 -16
- package/src/index.tsx +1 -1
- package/src/shadcn/components/ui/chart.tsx +2 -2
- package/src/shadcn/components/ui/combobox.tsx +13 -18
- package/src/shadcn/components/ui/command.tsx +1 -1
- package/src/shadcn/components/ui/form.tsx +5 -7
- package/src/shadcn/components/ui/select.tsx +3 -1
- package/src/shadcn/components/ui/sonner.tsx +5 -5
- package/src/shadcn/components/ui/tabs.tsx +26 -17
- package/src/shadcn/components/ui/tree.tsx +5 -4
|
@@ -5,7 +5,12 @@ import { Button } from "./button";
|
|
|
5
5
|
declare const tabsVariants: (props?: ({
|
|
6
6
|
variant?: "browser" | null | undefined;
|
|
7
7
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
8
|
-
|
|
8
|
+
type TabsProps<T extends string> = Omit<React.ComponentProps<typeof TabsPrimitive.Root> & VariantProps<typeof tabsVariants>, "value" | "defaultValue" | "onValueChange"> & {
|
|
9
|
+
value?: T;
|
|
10
|
+
defaultValue?: T;
|
|
11
|
+
onValueChange?: (value: T) => void;
|
|
12
|
+
};
|
|
13
|
+
declare function Tabs<T extends string = string>({ className, variant, ...props }: TabsProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
9
14
|
export declare function TabsAddButton(props: React.ComponentProps<typeof Button>): import("react/jsx-runtime").JSX.Element;
|
|
10
15
|
type EdgeScrollPosition = "touch" | "depart";
|
|
11
16
|
type FlowType = "overflow" | "underflow";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../../src/shadcn/components/ui/tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAQlE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AA2ElC,QAAA,MAAM,YAAY;;8EAwBhB,CAAC;AAEH,
|
|
1
|
+
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../../src/shadcn/components/ui/tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAQlE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AA2ElC,QAAA,MAAM,YAAY;;8EAwBhB,CAAC;AAEH,KAAK,SAAS,CAAC,CAAC,SAAS,MAAM,IAAI,IAAI,CACtC,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,GAC9C,YAAY,CAAC,OAAO,YAAY,CAAC,EAClC,OAAO,GAAG,cAAc,GAAG,eAAe,CAC1C,GAAG;IACH,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,YAAY,CAAC,EAAE,CAAC,CAAC;IACjB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,iBAAS,IAAI,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,EACxC,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACR,EAAE,SAAS,CAAC,CAAC,CAAC,2CAQd;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,2CAavE;AAiDD,KAAK,kBAAkB,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC7C,KAAK,QAAQ,GAAG,UAAU,GAAG,WAAW,CAAC;AAEzC,KAAK,aAAa,GAAG;IACpB,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACpD,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACrD,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,EAAE,KAAK,IAAI,CAAC;IACpD,WAAW,CAAC,EAAE,CAAC,eAAe,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;CAC1D,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,CAAC;AAEpD,iBAAS,QAAQ,CAAC,EACjB,SAAS,EACT,UAAU,EACV,WAAW,EACX,QAAQ,EACR,MAAM,EACN,WAAW,EACX,GAAG,KAAK,EACR,EAAE,aAAa,2CA6If;AAyCD,iBAAS,eAAe,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,2CAsEjD;AAED,wBAAgB,gBAAgB,CAAC,EAChC,IAAI,EACJ,eAAe,EACf,cAAc,GACd,EAAE;IACF,IAAI,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,EAAE,CAAC;IACjD,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,2CA4CA;AAED,iBAAS,WAAW,CAAC,EACpB,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,GAAG;IACvD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC,2CA+BA;AAED,iBAAS,WAAW,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,2CAQpD;AAED,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,eAAe,EAAE,CAAC"}
|
|
@@ -31,13 +31,13 @@ const tabsVariants = cva("", {
|
|
|
31
31
|
variants: {
|
|
32
32
|
variant: {
|
|
33
33
|
browser: cn(// Tabs
|
|
34
|
-
`flex-row
|
|
34
|
+
`flex-row
|
|
35
35
|
items-center
|
|
36
36
|
h-10
|
|
37
37
|
`, // TabsList
|
|
38
38
|
`**:data-[slot=tabs-list]:overflow-x-auto
|
|
39
39
|
**:data-[slot=tabs-list]:divide-x`, // TabsTrigger
|
|
40
|
-
`**:data-[slot=tabs-trigger]:max-w-80
|
|
40
|
+
`**:data-[slot=tabs-trigger]:max-w-80
|
|
41
41
|
**:data-[slot=tabs-trigger]:w-60
|
|
42
42
|
**:data-[slot=tabs-trigger]:min-w-40
|
|
43
43
|
**:data-[slot=tabs-trigger]:data-[state=inactive]:text-text-secondary
|
|
@@ -49,12 +49,16 @@ const tabsVariants = cva("", {
|
|
|
49
49
|
}
|
|
50
50
|
});
|
|
51
51
|
function Tabs({ className, variant, ...props }) {
|
|
52
|
-
|
|
52
|
+
const tabProps = {
|
|
53
53
|
"data-slot": "tabs",
|
|
54
54
|
className: cn(baseTabsStyles, tabsVariants({
|
|
55
55
|
variant
|
|
56
56
|
}), className),
|
|
57
|
-
...props
|
|
57
|
+
...props,
|
|
58
|
+
onValueChange: (value)=>props.onValueChange?.(value)
|
|
59
|
+
};
|
|
60
|
+
return /*#__PURE__*/ _jsx(TabsPrimitive.Root, {
|
|
61
|
+
...tabProps
|
|
58
62
|
});
|
|
59
63
|
}
|
|
60
64
|
export function TabsAddButton(props) {
|
|
@@ -69,7 +73,7 @@ export function TabsAddButton(props) {
|
|
|
69
73
|
})
|
|
70
74
|
});
|
|
71
75
|
}
|
|
72
|
-
|
|
76
|
+
function horizontalScroll(event) {
|
|
73
77
|
const mode = event.deltaMode;
|
|
74
78
|
let deltaPx = 0;
|
|
75
79
|
if (mode === 0) {
|
|
@@ -84,8 +88,8 @@ const horizontalScroll = (event)=>{
|
|
|
84
88
|
left: newScrollLeft,
|
|
85
89
|
behavior: "smooth"
|
|
86
90
|
});
|
|
87
|
-
}
|
|
88
|
-
|
|
91
|
+
}
|
|
92
|
+
function performHorizontalScroll(tabsListRef, direction) {
|
|
89
93
|
if (!tabsListRef.current) return;
|
|
90
94
|
const scrollAmount = 160;
|
|
91
95
|
let newScrollLeft = tabsListRef.current.scrollLeft;
|
|
@@ -103,7 +107,7 @@ const performHorizontalScroll = (tabsListRef, direction)=>{
|
|
|
103
107
|
left: newScrollLeft,
|
|
104
108
|
behavior: "smooth"
|
|
105
109
|
});
|
|
106
|
-
}
|
|
110
|
+
}
|
|
107
111
|
function TabsList({ className, onLeftEdge, onRightEdge, onResize, onFlow, onTabChange, ...props }) {
|
|
108
112
|
const tabListRef = React.useRef(null);
|
|
109
113
|
const onLeftEdgeRef = React.useRef(onLeftEdge);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/shadcn/components/ui/tabs.tsx"],"sourcesContent":["\"use client\";\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n\tChevronDownIcon,\n\tChevronLeft,\n\tChevronRight,\n\tPlus,\n\tX,\n} from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"#shadcn/lib/utils\";\nimport { Button } from \"./button\";\nimport {\n\tCommand,\n\tCommandEmpty,\n\tCommandInput,\n\tCommandItem,\n\tCommandList,\n} from \"./command\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\n\n// Base tabs styles\nconst baseTabsStyles = cn(\"flex\", \"flex-col\", \"h-full\");\n\n// Tabs add button container styles\nconst tabsAddButtonContainerStyles = cn(\n\t\"grow\",\n\t\"h-full\",\n\t\"bg-bg-secondary\",\n\t\"border-l\",\n\t\"border-b\",\n);\n\n// Tabs list styles\nconst tabsListStyles = cn(\n\t\"inline-flex\",\n\t\"w-fit\",\n\t\"items-center\",\n\t\"no-scrollbar\",\n);\n\n// Base tabs trigger styles\nconst baseTabsTriggerStyles = cn(\n\t// Layout & Sizing\n\t\"box-border\",\n\t\"flex-1\",\n\t\"h-10\",\n\t\"inline-flex\",\n\t\"items-center\",\n\t\"justify-center\",\n\t\"px-3\",\n\t\"whitespace-nowrap\",\n\t// Spacing & Padding\n\t\"pb-2\",\n\t\"pt-2.5\",\n\t// Typography\n\t\"typo-body\",\n\t// Colors & States\n\t\"cursor-pointer\",\n\t\"text-text-tertiary\",\n\t\"hover:bg-bg-secondary/60\",\n\t\"hover:text-text-tertiary_hover\",\n\t\"data-[state=active]:text-text-primary\",\n\t\"data-[state=active]:border-b-border-brand\",\n\t\"disabled:opacity-50\",\n\t\"disabled:pointer-events-none\",\n\t// Borders\n\t\"border-b-2\",\n\t\"border-b-transparent\",\n\t// Focus & Accessibility\n\t\"focus-visible:ring-2\",\n\t\"focus-visible:ring-utility-blue/70\",\n\t\"focus-visible:outline-1\",\n\t// Transitions\n\t\"transition-[color,box-shadow]\",\n\t// Icons\n\t\"[&_svg]:pointer-events-none\",\n\t\"[&_svg]:shrink-0\",\n\t\"[&_svg:not([class*='size-'])]:size-4\",\n\t// Groups\n\t\"group/tabs-trigger\",\n);\n\n// Tabs content styles\nconst tabsContentStyles = cn(\"grow\", \"outline-none\", \"overflow-auto\");\n\nconst tabsVariants = cva(\"\", {\n\tvariants: {\n\t\tvariant: {\n\t\t\tbrowser: cn(\n\t\t\t\t// Tabs\n\t\t\t\t`flex-row \n\t\t\t\t items-center\n\t\t\t\t h-10\n\t\t\t\t `,\n\t\t\t\t// TabsList\n\t\t\t\t`**:data-[slot=tabs-list]:overflow-x-auto\n\t\t\t\t **:data-[slot=tabs-list]:divide-x`,\n\t\t\t\t// TabsTrigger\n\t\t\t\t`**:data-[slot=tabs-trigger]:max-w-80 \n\t\t\t\t **:data-[slot=tabs-trigger]:w-60\n\t\t\t\t **:data-[slot=tabs-trigger]:min-w-40\n\t\t\t\t **:data-[slot=tabs-trigger]:data-[state=inactive]:text-text-secondary\n\t\t\t\t **:data-[slot=tabs-trigger]:data-[state=inactive]:border-b-1\n\t\t\t\t **:data-[slot=tabs-trigger]:data-[state=inactive]:border-b-border-secondary\n\t\t\t\t **:data-[slot=tabs-trigger]:data-[state=inactive]:pt-[9px]\n\t\t\t\t `, // TODO: Try to implement this without using pt-[9px].\n\t\t\t),\n\t\t},\n\t},\n});\n\nfunction Tabs({\n\tclassName,\n\tvariant,\n\t...props\n}: React.ComponentProps<typeof TabsPrimitive.Root> &\n\tVariantProps<typeof tabsVariants>) {\n\treturn (\n\t\t<TabsPrimitive.Root\n\t\t\tdata-slot=\"tabs\"\n\t\t\tclassName={cn(baseTabsStyles, tabsVariants({ variant }), className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport function TabsAddButton(props: React.ComponentProps<typeof Button>) {\n\treturn (\n\t\t<div className={tabsAddButtonContainerStyles}>\n\t\t\t<Button\n\t\t\t\tdata-slot=\"tabs-add-button\"\n\t\t\t\tvariant=\"link\"\n\t\t\t\tclassName=\"h-full\"\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<Plus />\n\t\t\t</Button>\n\t\t</div>\n\t);\n}\n\nconst horizontalScroll = (event: React.WheelEvent) => {\n\tconst mode = event.deltaMode;\n\tlet deltaPx = 0;\n\n\tif (mode === 0) {\n\t\tdeltaPx = event.deltaY;\n\t} else if (mode === 1) {\n\t\tdeltaPx = event.deltaY * 160;\n\t} else if (mode === 2) {\n\t\tdeltaPx = event.currentTarget.clientWidth;\n\t}\n\n\tconst newScrollLeft = event.currentTarget.scrollLeft + deltaPx;\n\n\tevent.currentTarget.scrollTo({\n\t\tleft: newScrollLeft,\n\t\tbehavior: \"smooth\",\n\t});\n};\n\nconst performHorizontalScroll = (\n\ttabsListRef: React.RefObject<HTMLDivElement | null>,\n\tdirection: \"left\" | \"right\",\n) => {\n\tif (!tabsListRef.current) return;\n\tconst scrollAmount = 160;\n\tlet newScrollLeft = tabsListRef.current.scrollLeft;\n\n\tif (direction === \"left\") {\n\t\tnewScrollLeft -= scrollAmount;\n\t\tnewScrollLeft -= newScrollLeft % scrollAmount;\n\t} else {\n\t\tnewScrollLeft += scrollAmount;\n\n\t\tconst rightCoord = newScrollLeft + tabsListRef.current.clientWidth;\n\n\t\tif (rightCoord % scrollAmount !== 0) {\n\t\t\tnewScrollLeft += scrollAmount - (rightCoord % scrollAmount);\n\t\t}\n\t}\n\n\ttabsListRef.current.scrollTo({\n\t\tleft: newScrollLeft,\n\t\tbehavior: \"smooth\",\n\t});\n};\n\ntype EdgeScrollPosition = \"touch\" | \"depart\";\ntype FlowType = \"overflow\" | \"underflow\";\n\ntype TabsListProps = {\n\tonLeftEdge?: (position: EdgeScrollPosition) => void;\n\tonRightEdge?: (position: EdgeScrollPosition) => void;\n\tonFlow?: (flow: FlowType) => void;\n\tonResize?: (entries: ResizeObserverEntry[]) => void;\n\tonTabChange?: (mutationRecords: MutationRecord[]) => void;\n} & React.ComponentProps<typeof TabsPrimitive.List>;\n\nfunction TabsList({\n\tclassName,\n\tonLeftEdge,\n\tonRightEdge,\n\tonResize,\n\tonFlow,\n\tonTabChange,\n\t...props\n}: TabsListProps) {\n\tconst tabListRef = React.useRef<HTMLDivElement | null>(null);\n\n\tconst onLeftEdgeRef = React.useRef(onLeftEdge);\n\tReact.useEffect(() => {\n\t\tonLeftEdgeRef.current = onLeftEdge;\n\t}, [onLeftEdge]);\n\n\tconst onResizeRef = React.useRef(onResize);\n\tReact.useEffect(() => {\n\t\tonResizeRef.current = onResize;\n\t}, [onResize]);\n\n\tconst onRightEdgeRef = React.useRef(onRightEdge);\n\tReact.useEffect(() => {\n\t\tonRightEdgeRef.current = onRightEdge;\n\t}, [onRightEdge]);\n\n\tconst onFlowRef = React.useRef(onFlow);\n\tReact.useEffect(() => {\n\t\tonFlowRef.current = onFlow;\n\t}, [onFlow]);\n\n\tconst onTabChangeRef = React.useRef(onTabChange);\n\tReact.useEffect(() => {\n\t\tonTabChangeRef.current = onTabChange;\n\t}, [onTabChange]);\n\n\tReact.useEffect(() => {\n\t\tif (tabListRef.current === null) {\n\t\t\treturn;\n\t\t}\n\t\tconst tabList = tabListRef.current;\n\n\t\tlet last: {\n\t\t\tscrollLeft: number;\n\t\t\tscrollWidth: number;\n\t\t\tclientWidth: number;\n\t\t} | null = null;\n\n\t\tconst handleScroll = () => {\n\t\t\tif (onLeftEdgeRef.current) {\n\t\t\t\tconst newState: EdgeScrollPosition =\n\t\t\t\t\ttabList.scrollLeft < 1 ? \"touch\" : \"depart\";\n\n\t\t\t\tif (last === null) {\n\t\t\t\t\tonLeftEdgeRef.current(newState);\n\t\t\t\t} else {\n\t\t\t\t\tconst lastState: EdgeScrollPosition =\n\t\t\t\t\t\tlast.scrollLeft < 1 ? \"touch\" : \"depart\";\n\n\t\t\t\t\tif (lastState !== newState) {\n\t\t\t\t\t\tonLeftEdgeRef.current(newState);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (onRightEdgeRef.current) {\n\t\t\t\tconst newState: EdgeScrollPosition =\n\t\t\t\t\ttabList.scrollWidth - tabList.clientWidth - tabList.scrollLeft < 1\n\t\t\t\t\t\t? \"touch\"\n\t\t\t\t\t\t: \"depart\";\n\n\t\t\t\tif (last === null) {\n\t\t\t\t\tonRightEdgeRef.current(newState);\n\t\t\t\t} else {\n\t\t\t\t\tconst lastState: EdgeScrollPosition =\n\t\t\t\t\t\tlast.scrollWidth - last.clientWidth - last.scrollLeft < 1\n\t\t\t\t\t\t\t? \"touch\"\n\t\t\t\t\t\t\t: \"depart\";\n\n\t\t\t\t\tif (lastState !== newState) {\n\t\t\t\t\t\tonRightEdgeRef.current(newState);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (onFlowRef.current) {\n\t\t\t\tconst newState: FlowType =\n\t\t\t\t\ttabList.scrollWidth > tabList.clientWidth ? \"overflow\" : \"underflow\";\n\n\t\t\t\tif (last === null) {\n\t\t\t\t\tonFlowRef.current(newState);\n\t\t\t\t} else {\n\t\t\t\t\tconst lastState =\n\t\t\t\t\t\tlast.scrollWidth > last.clientWidth ? \"overflow\" : \"underflow\";\n\t\t\t\t\tif (lastState !== newState) {\n\t\t\t\t\t\tonFlowRef.current(newState);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tlast = {\n\t\t\t\tscrollLeft: tabList.scrollLeft,\n\t\t\t\tscrollWidth: tabList.scrollWidth,\n\t\t\t\tclientWidth: tabList.clientWidth,\n\t\t\t};\n\t\t};\n\n\t\tconst scrollCallback = (_ev: unknown) => handleScroll();\n\t\tconst resizeObserver = new ResizeObserver((entries) => {\n\t\t\thandleScroll();\n\t\t\tif (onResizeRef.current) {\n\t\t\t\tonResizeRef.current(entries);\n\t\t\t}\n\t\t});\n\t\tconst mutationObserver = new MutationObserver((mutationRecords) => {\n\t\t\thandleScroll();\n\t\t\tif (onTabChangeRef.current) {\n\t\t\t\tonTabChangeRef.current(mutationRecords);\n\t\t\t}\n\t\t});\n\n\t\ttabList.addEventListener(\"scroll\", scrollCallback, { passive: true });\n\t\tresizeObserver.observe(tabList);\n\t\tmutationObserver.observe(tabList, { childList: true });\n\n\t\treturn () => {\n\t\t\ttabList.removeEventListener(\"scroll\", scrollCallback);\n\t\t\tresizeObserver.disconnect();\n\t\t\tmutationObserver.disconnect();\n\t\t};\n\t}, []);\n\n\treturn (\n\t\t<TabsPrimitive.List\n\t\t\tdata-slot=\"tabs-list\"\n\t\t\tclassName={cn(\"inline-flex w-fit items-center\", className)}\n\t\t\t{...props}\n\t\t\tref={(element) => {\n\t\t\t\ttabListRef.current = element;\n\t\t\t\tif (props.ref !== undefined && props.ref !== null) {\n\t\t\t\t\tif (typeof props.ref === \"function\") {\n\t\t\t\t\t\tprops.ref(element);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tprops.ref.current = element;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}}\n\t\t/>\n\t);\n}\n\ntype TabScrollButtonProps = {\n\tdisabled: boolean;\n\tonClick: () => void;\n};\n\nfunction TabScrollLeftButton({\n\tdisabled,\n\tonClick,\n}: TabScrollButtonProps): React.ReactElement {\n\treturn (\n\t\t<Button\n\t\t\tvariant=\"link\"\n\t\t\tsize=\"small\"\n\t\t\tdisabled={disabled}\n\t\t\tclassName=\"h-full border-r border-b bg-bg-secondary\"\n\t\t\tonClick={onClick}\n\t\t>\n\t\t\t<ChevronLeft />\n\t\t</Button>\n\t);\n}\n\nfunction TabScrollRightButton({\n\tdisabled,\n\tonClick,\n}: TabScrollButtonProps): React.ReactElement {\n\treturn (\n\t\t<Button\n\t\t\tvariant=\"link\"\n\t\t\tsize=\"small\"\n\t\t\tdisabled={disabled}\n\t\t\tclassName=\"h-full border-l border-b bg-bg-secondary\"\n\t\t\tonClick={onClick}\n\t\t>\n\t\t\t<ChevronRight />\n\t\t</Button>\n\t);\n}\n\nfunction TabsBrowserList({\n\tclassName,\n\tchildren,\n\t...props\n}: React.ComponentProps<typeof TabsPrimitive.List>) {\n\tconst tabsListRef = React.useRef<HTMLDivElement | null>(null);\n\n\tconst [showScrollButtons, setShowScrollButtons] = React.useState(false);\n\tconst [canScrollLeft, setCanScrollLeft] = React.useState(false);\n\tconst [canScrollRight, setCanScrollRight] = React.useState(false);\n\n\treturn (\n\t\t<React.Fragment>\n\t\t\t{showScrollButtons && (\n\t\t\t\t<TabScrollLeftButton\n\t\t\t\t\tdisabled={!canScrollLeft}\n\t\t\t\t\tonClick={() => performHorizontalScroll(tabsListRef, \"left\")}\n\t\t\t\t/>\n\t\t\t)}\n\n\t\t\t<TabsList\n\t\t\t\tonLeftEdge={(edgeState) => {\n\t\t\t\t\tif (edgeState === \"touch\") {\n\t\t\t\t\t\tsetCanScrollLeft(false);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsetCanScrollLeft(true);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\tonRightEdge={(edgeState) => {\n\t\t\t\t\tif (edgeState === \"touch\") {\n\t\t\t\t\t\tsetCanScrollRight(false);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsetCanScrollRight(true);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\tonFlow={(flow) => {\n\t\t\t\t\tif (flow === \"overflow\") {\n\t\t\t\t\t\tsetShowScrollButtons(true);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsetShowScrollButtons(false);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\tonResize={() => {\n\t\t\t\t\ttabsListRef.current\n\t\t\t\t\t\t?.querySelector<HTMLButtonElement>('button[data-state=\"active\"]')\n\t\t\t\t\t\t?.scrollIntoView();\n\t\t\t\t}}\n\t\t\t\tonTabChange={(entries) => {\n\t\t\t\t\tif (\n\t\t\t\t\t\tentries.filter((entry) => entry.addedNodes.length !== 0).length !==\n\t\t\t\t\t\t0\n\t\t\t\t\t) {\n\t\t\t\t\t\ttabsListRef.current\n\t\t\t\t\t\t\t?.querySelector<HTMLButtonElement>('button[data-state=\"active\"]')\n\t\t\t\t\t\t\t?.scrollIntoView();\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\tdata-slot=\"tabs-list\"\n\t\t\t\tclassName={cn(tabsListStyles, className)}\n\t\t\t\tonWheel={(event) => horizontalScroll(event)}\n\t\t\t\t{...props}\n\t\t\t\tref={tabsListRef}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</TabsList>\n\n\t\t\t{showScrollButtons && (\n\t\t\t\t<TabScrollRightButton\n\t\t\t\t\tdisabled={!canScrollRight}\n\t\t\t\t\tonClick={() => performHorizontalScroll(tabsListRef, \"right\")}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</React.Fragment>\n\t);\n}\n\nexport function TabsListDropdown({\n\ttabs,\n\thandleTabSelect,\n\thandleCloseTab,\n}: {\n\ttabs: { id: string; content: React.ReactNode }[];\n\thandleTabSelect?: (tabId: string) => void;\n\thandleCloseTab?: (tabId: string) => void;\n}) {\n\tconst [isMenuOpen, setIsMenuOpen] = React.useState(false);\n\treturn (\n\t\t<Popover open={isMenuOpen} onOpenChange={setIsMenuOpen}>\n\t\t\t<PopoverTrigger asChild>\n\t\t\t\t<Button variant=\"link\" className=\"bg-bg-secondary h-full border-b pr-6\">\n\t\t\t\t\t<ChevronDownIcon className=\"size-4\" />\n\t\t\t\t</Button>\n\t\t\t</PopoverTrigger>\n\t\t\t<PopoverContent className=\"w-80 p-0 mr-3\" align=\"end\">\n\t\t\t\t<Command>\n\t\t\t\t\t<CommandInput placeholder=\"Search tabs...\" />\n\t\t\t\t\t<CommandList>\n\t\t\t\t\t\t<CommandEmpty>Not tabs found.</CommandEmpty>\n\t\t\t\t\t\t{tabs.map((tab) => (\n\t\t\t\t\t\t\t<CommandItem\n\t\t\t\t\t\t\t\tkey={tab.id}\n\t\t\t\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t\t\t\thandleTabSelect?.(tab.id);\n\t\t\t\t\t\t\t\t\tsetIsMenuOpen(false);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tclassName=\"group flex items-center justify-between\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{tab.content}\n\t\t\t\t\t\t\t\t{tabs.length > 1 && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"opacity-0 group-hover:opacity-100 transition-opacity p-1 ml-2\"\n\t\t\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\thandleCloseTab?.(tab.id);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<X className=\"size-3\" />\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</CommandItem>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</CommandList>\n\t\t\t\t</Command>\n\t\t\t</PopoverContent>\n\t\t</Popover>\n\t);\n}\n\nfunction TabsTrigger({\n\tclassName,\n\tonClose,\n\t...props\n}: React.ComponentProps<typeof TabsPrimitive.Trigger> & {\n\tonClose?: (value: string) => void;\n}) {\n\treturn (\n\t\t<TabsPrimitive.Trigger\n\t\t\tdata-slot=\"tabs-trigger\"\n\t\t\tclassName={cn(\n\t\t\t\tbaseTabsTriggerStyles,\n\t\t\t\tonClose ? \"justify-between\" : \"justify-start\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{props.children}\n\n\t\t\t{onClose && (\n\t\t\t\t<Button\n\t\t\t\t\tonClick={(event) => {\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\tonClose(props.value);\n\t\t\t\t\t}}\n\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tclassName=\"p-0 ml-2 opacity-0 group-hover/tabs-trigger:opacity-100 transition-opacity\"\n\t\t\t\t\tasChild\n\t\t\t\t>\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<X />\n\t\t\t\t\t</span>\n\t\t\t\t</Button>\n\t\t\t)}\n\t\t</TabsPrimitive.Trigger>\n\t);\n}\n\nfunction TabsContent({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof TabsPrimitive.Content>) {\n\treturn (\n\t\t<TabsPrimitive.Content\n\t\t\tdata-slot=\"tabs-content\"\n\t\t\tclassName={cn(tabsContentStyles, className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, TabsBrowserList };\n"],"names":["TabsPrimitive","cva","ChevronDownIcon","ChevronLeft","ChevronRight","Plus","X","React","cn","Button","Command","CommandEmpty","CommandInput","CommandItem","CommandList","Popover","PopoverContent","PopoverTrigger","baseTabsStyles","tabsAddButtonContainerStyles","tabsListStyles","baseTabsTriggerStyles","tabsContentStyles","tabsVariants","variants","variant","browser","Tabs","className","props","Root","data-slot","TabsAddButton","div","horizontalScroll","event","mode","deltaMode","deltaPx","deltaY","currentTarget","clientWidth","newScrollLeft","scrollLeft","scrollTo","left","behavior","performHorizontalScroll","tabsListRef","direction","current","scrollAmount","rightCoord","TabsList","onLeftEdge","onRightEdge","onResize","onFlow","onTabChange","tabListRef","useRef","onLeftEdgeRef","useEffect","onResizeRef","onRightEdgeRef","onFlowRef","onTabChangeRef","tabList","last","handleScroll","newState","lastState","scrollWidth","scrollCallback","_ev","resizeObserver","ResizeObserver","entries","mutationObserver","MutationObserver","mutationRecords","addEventListener","passive","observe","childList","removeEventListener","disconnect","List","ref","element","undefined","TabScrollLeftButton","disabled","onClick","size","TabScrollRightButton","TabsBrowserList","children","showScrollButtons","setShowScrollButtons","useState","canScrollLeft","setCanScrollLeft","canScrollRight","setCanScrollRight","Fragment","edgeState","flow","querySelector","scrollIntoView","filter","entry","addedNodes","length","onWheel","TabsListDropdown","tabs","handleTabSelect","handleCloseTab","isMenuOpen","setIsMenuOpen","open","onOpenChange","asChild","align","placeholder","map","tab","onSelect","id","content","e","stopPropagation","TabsTrigger","onClose","Trigger","value","span","TabsContent","Content"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../../../src/shadcn/components/ui/tabs.tsx"],"sourcesContent":["\"use client\";\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n\tChevronDownIcon,\n\tChevronLeft,\n\tChevronRight,\n\tPlus,\n\tX,\n} from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"#shadcn/lib/utils\";\nimport { Button } from \"./button\";\nimport {\n\tCommand,\n\tCommandEmpty,\n\tCommandInput,\n\tCommandItem,\n\tCommandList,\n} from \"./command\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\n\n// Base tabs styles\nconst baseTabsStyles = cn(\"flex\", \"flex-col\", \"h-full\");\n\n// Tabs add button container styles\nconst tabsAddButtonContainerStyles = cn(\n\t\"grow\",\n\t\"h-full\",\n\t\"bg-bg-secondary\",\n\t\"border-l\",\n\t\"border-b\",\n);\n\n// Tabs list styles\nconst tabsListStyles = cn(\n\t\"inline-flex\",\n\t\"w-fit\",\n\t\"items-center\",\n\t\"no-scrollbar\",\n);\n\n// Base tabs trigger styles\nconst baseTabsTriggerStyles = cn(\n\t// Layout & Sizing\n\t\"box-border\",\n\t\"flex-1\",\n\t\"h-10\",\n\t\"inline-flex\",\n\t\"items-center\",\n\t\"justify-center\",\n\t\"px-3\",\n\t\"whitespace-nowrap\",\n\t// Spacing & Padding\n\t\"pb-2\",\n\t\"pt-2.5\",\n\t// Typography\n\t\"typo-body\",\n\t// Colors & States\n\t\"cursor-pointer\",\n\t\"text-text-tertiary\",\n\t\"hover:bg-bg-secondary/60\",\n\t\"hover:text-text-tertiary_hover\",\n\t\"data-[state=active]:text-text-primary\",\n\t\"data-[state=active]:border-b-border-brand\",\n\t\"disabled:opacity-50\",\n\t\"disabled:pointer-events-none\",\n\t// Borders\n\t\"border-b-2\",\n\t\"border-b-transparent\",\n\t// Focus & Accessibility\n\t\"focus-visible:ring-2\",\n\t\"focus-visible:ring-utility-blue/70\",\n\t\"focus-visible:outline-1\",\n\t// Transitions\n\t\"transition-[color,box-shadow]\",\n\t// Icons\n\t\"[&_svg]:pointer-events-none\",\n\t\"[&_svg]:shrink-0\",\n\t\"[&_svg:not([class*='size-'])]:size-4\",\n\t// Groups\n\t\"group/tabs-trigger\",\n);\n\n// Tabs content styles\nconst tabsContentStyles = cn(\"grow\", \"outline-none\", \"overflow-auto\");\n\nconst tabsVariants = cva(\"\", {\n\tvariants: {\n\t\tvariant: {\n\t\t\tbrowser: cn(\n\t\t\t\t// Tabs\n\t\t\t\t`flex-row\n\t\t\t\t items-center\n\t\t\t\t h-10\n\t\t\t\t `,\n\t\t\t\t// TabsList\n\t\t\t\t`**:data-[slot=tabs-list]:overflow-x-auto\n\t\t\t\t **:data-[slot=tabs-list]:divide-x`,\n\t\t\t\t// TabsTrigger\n\t\t\t\t`**:data-[slot=tabs-trigger]:max-w-80\n\t\t\t\t **:data-[slot=tabs-trigger]:w-60\n\t\t\t\t **:data-[slot=tabs-trigger]:min-w-40\n\t\t\t\t **:data-[slot=tabs-trigger]:data-[state=inactive]:text-text-secondary\n\t\t\t\t **:data-[slot=tabs-trigger]:data-[state=inactive]:border-b-1\n\t\t\t\t **:data-[slot=tabs-trigger]:data-[state=inactive]:border-b-border-secondary\n\t\t\t\t **:data-[slot=tabs-trigger]:data-[state=inactive]:pt-[9px]\n\t\t\t\t `, // TODO: Try to implement this without using pt-[9px].\n\t\t\t),\n\t\t},\n\t},\n});\n\ntype TabsProps<T extends string> = Omit<\n\tReact.ComponentProps<typeof TabsPrimitive.Root> &\n\t\tVariantProps<typeof tabsVariants>,\n\t\"value\" | \"defaultValue\" | \"onValueChange\"\n> & {\n\tvalue?: T;\n\tdefaultValue?: T;\n\tonValueChange?: (value: T) => void;\n};\n\nfunction Tabs<T extends string = string>({\n\tclassName,\n\tvariant,\n\t...props\n}: TabsProps<T>) {\n\tconst tabProps = {\n\t\t\"data-slot\": \"tabs\",\n\t\tclassName: cn(baseTabsStyles, tabsVariants({ variant }), className),\n\t\t...props,\n\t\tonValueChange: (value: string) => props.onValueChange?.(value as T),\n\t};\n\treturn <TabsPrimitive.Root {...tabProps} />;\n}\n\nexport function TabsAddButton(props: React.ComponentProps<typeof Button>) {\n\treturn (\n\t\t<div className={tabsAddButtonContainerStyles}>\n\t\t\t<Button\n\t\t\t\tdata-slot=\"tabs-add-button\"\n\t\t\t\tvariant=\"link\"\n\t\t\t\tclassName=\"h-full\"\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<Plus />\n\t\t\t</Button>\n\t\t</div>\n\t);\n}\n\nfunction horizontalScroll(event: React.WheelEvent) {\n\tconst mode = event.deltaMode;\n\tlet deltaPx = 0;\n\n\tif (mode === 0) {\n\t\tdeltaPx = event.deltaY;\n\t} else if (mode === 1) {\n\t\tdeltaPx = event.deltaY * 160;\n\t} else if (mode === 2) {\n\t\tdeltaPx = event.currentTarget.clientWidth;\n\t}\n\n\tconst newScrollLeft = event.currentTarget.scrollLeft + deltaPx;\n\n\tevent.currentTarget.scrollTo({\n\t\tleft: newScrollLeft,\n\t\tbehavior: \"smooth\",\n\t});\n}\n\nfunction performHorizontalScroll(\n\ttabsListRef: React.RefObject<HTMLDivElement | null>,\n\tdirection: \"left\" | \"right\",\n) {\n\tif (!tabsListRef.current) return;\n\tconst scrollAmount = 160;\n\tlet newScrollLeft = tabsListRef.current.scrollLeft;\n\n\tif (direction === \"left\") {\n\t\tnewScrollLeft -= scrollAmount;\n\t\tnewScrollLeft -= newScrollLeft % scrollAmount;\n\t} else {\n\t\tnewScrollLeft += scrollAmount;\n\n\t\tconst rightCoord = newScrollLeft + tabsListRef.current.clientWidth;\n\n\t\tif (rightCoord % scrollAmount !== 0) {\n\t\t\tnewScrollLeft += scrollAmount - (rightCoord % scrollAmount);\n\t\t}\n\t}\n\n\ttabsListRef.current.scrollTo({\n\t\tleft: newScrollLeft,\n\t\tbehavior: \"smooth\",\n\t});\n}\n\ntype EdgeScrollPosition = \"touch\" | \"depart\";\ntype FlowType = \"overflow\" | \"underflow\";\n\ntype TabsListProps = {\n\tonLeftEdge?: (position: EdgeScrollPosition) => void;\n\tonRightEdge?: (position: EdgeScrollPosition) => void;\n\tonFlow?: (flow: FlowType) => void;\n\tonResize?: (entries: ResizeObserverEntry[]) => void;\n\tonTabChange?: (mutationRecords: MutationRecord[]) => void;\n} & React.ComponentProps<typeof TabsPrimitive.List>;\n\nfunction TabsList({\n\tclassName,\n\tonLeftEdge,\n\tonRightEdge,\n\tonResize,\n\tonFlow,\n\tonTabChange,\n\t...props\n}: TabsListProps) {\n\tconst tabListRef = React.useRef<HTMLDivElement | null>(null);\n\n\tconst onLeftEdgeRef = React.useRef(onLeftEdge);\n\tReact.useEffect(() => {\n\t\tonLeftEdgeRef.current = onLeftEdge;\n\t}, [onLeftEdge]);\n\n\tconst onResizeRef = React.useRef(onResize);\n\tReact.useEffect(() => {\n\t\tonResizeRef.current = onResize;\n\t}, [onResize]);\n\n\tconst onRightEdgeRef = React.useRef(onRightEdge);\n\tReact.useEffect(() => {\n\t\tonRightEdgeRef.current = onRightEdge;\n\t}, [onRightEdge]);\n\n\tconst onFlowRef = React.useRef(onFlow);\n\tReact.useEffect(() => {\n\t\tonFlowRef.current = onFlow;\n\t}, [onFlow]);\n\n\tconst onTabChangeRef = React.useRef(onTabChange);\n\tReact.useEffect(() => {\n\t\tonTabChangeRef.current = onTabChange;\n\t}, [onTabChange]);\n\n\tReact.useEffect(() => {\n\t\tif (tabListRef.current === null) {\n\t\t\treturn;\n\t\t}\n\t\tconst tabList = tabListRef.current;\n\n\t\tlet last: {\n\t\t\tscrollLeft: number;\n\t\t\tscrollWidth: number;\n\t\t\tclientWidth: number;\n\t\t} | null = null;\n\n\t\tconst handleScroll = () => {\n\t\t\tif (onLeftEdgeRef.current) {\n\t\t\t\tconst newState: EdgeScrollPosition =\n\t\t\t\t\ttabList.scrollLeft < 1 ? \"touch\" : \"depart\";\n\n\t\t\t\tif (last === null) {\n\t\t\t\t\tonLeftEdgeRef.current(newState);\n\t\t\t\t} else {\n\t\t\t\t\tconst lastState: EdgeScrollPosition =\n\t\t\t\t\t\tlast.scrollLeft < 1 ? \"touch\" : \"depart\";\n\n\t\t\t\t\tif (lastState !== newState) {\n\t\t\t\t\t\tonLeftEdgeRef.current(newState);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (onRightEdgeRef.current) {\n\t\t\t\tconst newState: EdgeScrollPosition =\n\t\t\t\t\ttabList.scrollWidth - tabList.clientWidth - tabList.scrollLeft < 1\n\t\t\t\t\t\t? \"touch\"\n\t\t\t\t\t\t: \"depart\";\n\n\t\t\t\tif (last === null) {\n\t\t\t\t\tonRightEdgeRef.current(newState);\n\t\t\t\t} else {\n\t\t\t\t\tconst lastState: EdgeScrollPosition =\n\t\t\t\t\t\tlast.scrollWidth - last.clientWidth - last.scrollLeft < 1\n\t\t\t\t\t\t\t? \"touch\"\n\t\t\t\t\t\t\t: \"depart\";\n\n\t\t\t\t\tif (lastState !== newState) {\n\t\t\t\t\t\tonRightEdgeRef.current(newState);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (onFlowRef.current) {\n\t\t\t\tconst newState: FlowType =\n\t\t\t\t\ttabList.scrollWidth > tabList.clientWidth ? \"overflow\" : \"underflow\";\n\n\t\t\t\tif (last === null) {\n\t\t\t\t\tonFlowRef.current(newState);\n\t\t\t\t} else {\n\t\t\t\t\tconst lastState =\n\t\t\t\t\t\tlast.scrollWidth > last.clientWidth ? \"overflow\" : \"underflow\";\n\t\t\t\t\tif (lastState !== newState) {\n\t\t\t\t\t\tonFlowRef.current(newState);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tlast = {\n\t\t\t\tscrollLeft: tabList.scrollLeft,\n\t\t\t\tscrollWidth: tabList.scrollWidth,\n\t\t\t\tclientWidth: tabList.clientWidth,\n\t\t\t};\n\t\t};\n\n\t\tconst scrollCallback = (_ev: unknown) => handleScroll();\n\t\tconst resizeObserver = new ResizeObserver((entries) => {\n\t\t\thandleScroll();\n\t\t\tif (onResizeRef.current) {\n\t\t\t\tonResizeRef.current(entries);\n\t\t\t}\n\t\t});\n\t\tconst mutationObserver = new MutationObserver((mutationRecords) => {\n\t\t\thandleScroll();\n\t\t\tif (onTabChangeRef.current) {\n\t\t\t\tonTabChangeRef.current(mutationRecords);\n\t\t\t}\n\t\t});\n\n\t\ttabList.addEventListener(\"scroll\", scrollCallback, { passive: true });\n\t\tresizeObserver.observe(tabList);\n\t\tmutationObserver.observe(tabList, { childList: true });\n\n\t\treturn () => {\n\t\t\ttabList.removeEventListener(\"scroll\", scrollCallback);\n\t\t\tresizeObserver.disconnect();\n\t\t\tmutationObserver.disconnect();\n\t\t};\n\t}, []);\n\n\treturn (\n\t\t<TabsPrimitive.List\n\t\t\tdata-slot=\"tabs-list\"\n\t\t\tclassName={cn(\"inline-flex w-fit items-center\", className)}\n\t\t\t{...props}\n\t\t\tref={(element) => {\n\t\t\t\ttabListRef.current = element;\n\t\t\t\tif (props.ref !== undefined && props.ref !== null) {\n\t\t\t\t\tif (typeof props.ref === \"function\") {\n\t\t\t\t\t\tprops.ref(element);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tprops.ref.current = element;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}}\n\t\t/>\n\t);\n}\n\ntype TabScrollButtonProps = {\n\tdisabled: boolean;\n\tonClick: () => void;\n};\n\nfunction TabScrollLeftButton({\n\tdisabled,\n\tonClick,\n}: TabScrollButtonProps): React.ReactElement {\n\treturn (\n\t\t<Button\n\t\t\tvariant=\"link\"\n\t\t\tsize=\"small\"\n\t\t\tdisabled={disabled}\n\t\t\tclassName=\"h-full border-r border-b bg-bg-secondary\"\n\t\t\tonClick={onClick}\n\t\t>\n\t\t\t<ChevronLeft />\n\t\t</Button>\n\t);\n}\n\nfunction TabScrollRightButton({\n\tdisabled,\n\tonClick,\n}: TabScrollButtonProps): React.ReactElement {\n\treturn (\n\t\t<Button\n\t\t\tvariant=\"link\"\n\t\t\tsize=\"small\"\n\t\t\tdisabled={disabled}\n\t\t\tclassName=\"h-full border-l border-b bg-bg-secondary\"\n\t\t\tonClick={onClick}\n\t\t>\n\t\t\t<ChevronRight />\n\t\t</Button>\n\t);\n}\n\nfunction TabsBrowserList({\n\tclassName,\n\tchildren,\n\t...props\n}: React.ComponentProps<typeof TabsPrimitive.List>) {\n\tconst tabsListRef = React.useRef<HTMLDivElement | null>(null);\n\n\tconst [showScrollButtons, setShowScrollButtons] = React.useState(false);\n\tconst [canScrollLeft, setCanScrollLeft] = React.useState(false);\n\tconst [canScrollRight, setCanScrollRight] = React.useState(false);\n\n\treturn (\n\t\t<React.Fragment>\n\t\t\t{showScrollButtons && (\n\t\t\t\t<TabScrollLeftButton\n\t\t\t\t\tdisabled={!canScrollLeft}\n\t\t\t\t\tonClick={() => performHorizontalScroll(tabsListRef, \"left\")}\n\t\t\t\t/>\n\t\t\t)}\n\n\t\t\t<TabsList\n\t\t\t\tonLeftEdge={(edgeState) => {\n\t\t\t\t\tif (edgeState === \"touch\") {\n\t\t\t\t\t\tsetCanScrollLeft(false);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsetCanScrollLeft(true);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\tonRightEdge={(edgeState) => {\n\t\t\t\t\tif (edgeState === \"touch\") {\n\t\t\t\t\t\tsetCanScrollRight(false);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsetCanScrollRight(true);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\tonFlow={(flow) => {\n\t\t\t\t\tif (flow === \"overflow\") {\n\t\t\t\t\t\tsetShowScrollButtons(true);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsetShowScrollButtons(false);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\tonResize={() => {\n\t\t\t\t\ttabsListRef.current\n\t\t\t\t\t\t?.querySelector<HTMLButtonElement>('button[data-state=\"active\"]')\n\t\t\t\t\t\t?.scrollIntoView();\n\t\t\t\t}}\n\t\t\t\tonTabChange={(entries) => {\n\t\t\t\t\tif (\n\t\t\t\t\t\tentries.filter((entry) => entry.addedNodes.length !== 0).length !==\n\t\t\t\t\t\t0\n\t\t\t\t\t) {\n\t\t\t\t\t\ttabsListRef.current\n\t\t\t\t\t\t\t?.querySelector<HTMLButtonElement>('button[data-state=\"active\"]')\n\t\t\t\t\t\t\t?.scrollIntoView();\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\tdata-slot=\"tabs-list\"\n\t\t\t\tclassName={cn(tabsListStyles, className)}\n\t\t\t\tonWheel={(event) => horizontalScroll(event)}\n\t\t\t\t{...props}\n\t\t\t\tref={tabsListRef}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</TabsList>\n\n\t\t\t{showScrollButtons && (\n\t\t\t\t<TabScrollRightButton\n\t\t\t\t\tdisabled={!canScrollRight}\n\t\t\t\t\tonClick={() => performHorizontalScroll(tabsListRef, \"right\")}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</React.Fragment>\n\t);\n}\n\nexport function TabsListDropdown({\n\ttabs,\n\thandleTabSelect,\n\thandleCloseTab,\n}: {\n\ttabs: { id: string; content: React.ReactNode }[];\n\thandleTabSelect?: (tabId: string) => void;\n\thandleCloseTab?: (tabId: string) => void;\n}) {\n\tconst [isMenuOpen, setIsMenuOpen] = React.useState(false);\n\treturn (\n\t\t<Popover open={isMenuOpen} onOpenChange={setIsMenuOpen}>\n\t\t\t<PopoverTrigger asChild>\n\t\t\t\t<Button variant=\"link\" className=\"bg-bg-secondary h-full border-b pr-6\">\n\t\t\t\t\t<ChevronDownIcon className=\"size-4\" />\n\t\t\t\t</Button>\n\t\t\t</PopoverTrigger>\n\t\t\t<PopoverContent className=\"w-80 p-0 mr-3\" align=\"end\">\n\t\t\t\t<Command>\n\t\t\t\t\t<CommandInput placeholder=\"Search tabs...\" />\n\t\t\t\t\t<CommandList>\n\t\t\t\t\t\t<CommandEmpty>Not tabs found.</CommandEmpty>\n\t\t\t\t\t\t{tabs.map((tab) => (\n\t\t\t\t\t\t\t<CommandItem\n\t\t\t\t\t\t\t\tkey={tab.id}\n\t\t\t\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t\t\t\thandleTabSelect?.(tab.id);\n\t\t\t\t\t\t\t\t\tsetIsMenuOpen(false);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tclassName=\"group flex items-center justify-between\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{tab.content}\n\t\t\t\t\t\t\t\t{tabs.length > 1 && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"opacity-0 group-hover:opacity-100 transition-opacity p-1 ml-2\"\n\t\t\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\thandleCloseTab?.(tab.id);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<X className=\"size-3\" />\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</CommandItem>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</CommandList>\n\t\t\t\t</Command>\n\t\t\t</PopoverContent>\n\t\t</Popover>\n\t);\n}\n\nfunction TabsTrigger({\n\tclassName,\n\tonClose,\n\t...props\n}: React.ComponentProps<typeof TabsPrimitive.Trigger> & {\n\tonClose?: (value: string) => void;\n}) {\n\treturn (\n\t\t<TabsPrimitive.Trigger\n\t\t\tdata-slot=\"tabs-trigger\"\n\t\t\tclassName={cn(\n\t\t\t\tbaseTabsTriggerStyles,\n\t\t\t\tonClose ? \"justify-between\" : \"justify-start\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{props.children}\n\n\t\t\t{onClose && (\n\t\t\t\t<Button\n\t\t\t\t\tonClick={(event) => {\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\tonClose(props.value);\n\t\t\t\t\t}}\n\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tclassName=\"p-0 ml-2 opacity-0 group-hover/tabs-trigger:opacity-100 transition-opacity\"\n\t\t\t\t\tasChild\n\t\t\t\t>\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<X />\n\t\t\t\t\t</span>\n\t\t\t\t</Button>\n\t\t\t)}\n\t\t</TabsPrimitive.Trigger>\n\t);\n}\n\nfunction TabsContent({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof TabsPrimitive.Content>) {\n\treturn (\n\t\t<TabsPrimitive.Content\n\t\t\tdata-slot=\"tabs-content\"\n\t\t\tclassName={cn(tabsContentStyles, className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, TabsBrowserList };\n"],"names":["TabsPrimitive","cva","ChevronDownIcon","ChevronLeft","ChevronRight","Plus","X","React","cn","Button","Command","CommandEmpty","CommandInput","CommandItem","CommandList","Popover","PopoverContent","PopoverTrigger","baseTabsStyles","tabsAddButtonContainerStyles","tabsListStyles","baseTabsTriggerStyles","tabsContentStyles","tabsVariants","variants","variant","browser","Tabs","className","props","tabProps","onValueChange","value","Root","TabsAddButton","div","data-slot","horizontalScroll","event","mode","deltaMode","deltaPx","deltaY","currentTarget","clientWidth","newScrollLeft","scrollLeft","scrollTo","left","behavior","performHorizontalScroll","tabsListRef","direction","current","scrollAmount","rightCoord","TabsList","onLeftEdge","onRightEdge","onResize","onFlow","onTabChange","tabListRef","useRef","onLeftEdgeRef","useEffect","onResizeRef","onRightEdgeRef","onFlowRef","onTabChangeRef","tabList","last","handleScroll","newState","lastState","scrollWidth","scrollCallback","_ev","resizeObserver","ResizeObserver","entries","mutationObserver","MutationObserver","mutationRecords","addEventListener","passive","observe","childList","removeEventListener","disconnect","List","ref","element","undefined","TabScrollLeftButton","disabled","onClick","size","TabScrollRightButton","TabsBrowserList","children","showScrollButtons","setShowScrollButtons","useState","canScrollLeft","setCanScrollLeft","canScrollRight","setCanScrollRight","Fragment","edgeState","flow","querySelector","scrollIntoView","filter","entry","addedNodes","length","onWheel","TabsListDropdown","tabs","handleTabSelect","handleCloseTab","isMenuOpen","setIsMenuOpen","open","onOpenChange","asChild","align","placeholder","map","tab","onSelect","id","content","e","stopPropagation","TabsTrigger","onClose","Trigger","span","TabsContent","Content"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tree.d.ts","sourceRoot":"","sources":["../../../../../src/shadcn/components/ui/tree.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGxD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,KAAK,QAAQ,GAAG;IACf,IAAI,CAAC,EAAE;QACN,QAAQ,CAAC,EAAE,OAAO,CAAC;KACnB,CAAC;CACF,CAAC;AAmBF,UAAU,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC/D,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,IAAI,CAAC,EAAE,GAAG,CAAC;CACX;AAED,iBAAS,IAAI,CAAC,EAAE,MAAW,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CA2BlE;AAGD,UAAU,aAAa,CAAC,CAAC,GAAG,GAAG,CAC9B,SAAQ,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC;IAC/C,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AAGD,iBAAS,QAAQ,CAAC,CAAC,GAAG,GAAG,EAAE,EAC1B,IAAI,EACJ,SAAS,EACT,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,
|
|
1
|
+
{"version":3,"file":"tree.d.ts","sourceRoot":"","sources":["../../../../../src/shadcn/components/ui/tree.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGxD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,KAAK,QAAQ,GAAG;IACf,IAAI,CAAC,EAAE;QACN,QAAQ,CAAC,EAAE,OAAO,CAAC;KACnB,CAAC;CACF,CAAC;AAmBF,UAAU,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC/D,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,IAAI,CAAC,EAAE,GAAG,CAAC;CACX;AAED,iBAAS,IAAI,CAAC,EAAE,MAAW,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CA2BlE;AAGD,UAAU,aAAa,CAAC,CAAC,GAAG,GAAG,CAC9B,SAAQ,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC;IAC/C,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AAGD,iBAAS,QAAQ,CAAC,CAAC,GAAG,GAAG,EAAE,EAC1B,IAAI,EACJ,SAAS,EACT,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,2CAiElC;AAGD,UAAU,kBAAkB,CAAC,CAAC,GAAG,GAAG,CACnC,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IAC7C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,iBAAS,aAAa,CAAC,CAAC,EAAE,EACzB,IAAI,EAAE,QAAQ,EACd,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,eAAe,EACf,WAAW,EACX,GAAG,KAAK,EACR,EAAE,kBAAkB,CAAC,CAAC,GAAG,QAAQ,CAAC,kDA6DlC;AAED,iBAAS,YAAY,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,kDAqBtC;AAED,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,aAAa,EAAE,YAAY,EAAE,KAAK,YAAY,EAAE,CAAC"}
|
|
@@ -68,7 +68,7 @@ function TreeItem({ item, className, asChild, children, ...props }) {
|
|
|
68
68
|
"data-drag-target": typeof item.isDragTarget === "function" ? item.isDragTarget() || false : undefined,
|
|
69
69
|
"data-search-match": typeof item.isMatchingSearch === "function" ? item.isMatchingSearch() || false : undefined,
|
|
70
70
|
"aria-expanded": item.isExpanded(),
|
|
71
|
-
...Object.fromEntries(Object.entries(otherProps).filter(([key])=>key !== "
|
|
71
|
+
...Object.fromEntries(Object.entries(otherProps).filter(([key])=>key !== "onDragStart")),
|
|
72
72
|
onDragStart: (e)=>{
|
|
73
73
|
if (e.target.dataset.slot === "drag-handle") {
|
|
74
74
|
item.getProps().onDragStart(e);
|
|
@@ -90,7 +90,7 @@ function TreeItemLabel({ item: propItem, children, className, disableHover, hori
|
|
|
90
90
|
const itemMeta = item.getItemMeta();
|
|
91
91
|
return /*#__PURE__*/ _jsxs("span", {
|
|
92
92
|
"data-slot": "tree-item-label",
|
|
93
|
-
className: cn("group/tree-item-label relative select-text in-focus-visible:ring-ring/50 bg-background text-text-secondary in-data-[drag-target=true]:bg-accent flex items-center gap-2 pr-2 pl-2.5 py-1.5 text-sm transition-colors not-in-data-[folder=true]:ps-2.5 in-focus-visible:ring-[3px] in-data-[search-match=true]:bg-blue-400/20! [&_svg]:pointer-events-none [&_svg]:shrink-0", !disableHover && "in-data-[
|
|
93
|
+
className: cn("group/tree-item-label relative select-text in-focus-visible:ring-ring/50 bg-background text-text-secondary in-data-[drag-target=true]:bg-accent flex items-center gap-2 pr-2 pl-2.5 py-1.5 text-sm transition-colors not-in-data-[folder=true]:ps-2.5 in-focus-visible:ring-[3px] in-data-[search-match=true]:bg-blue-400/20! [&_svg]:pointer-events-none [&_svg]:shrink-0", !disableHover && "in-data-[focus=true]:bg-bg-secondary in-data-[focus=true]:text-text-primary", !disableHover && item.isFolder() && "hover:bg-bg-secondary hover:text-text-primary cursor-pointer", !disableHover && !item.isFolder() && "hover:bg-bg-secondary hover:text-text-primary cursor-pointer", disableHover && "text-text-primary", className),
|
|
94
94
|
...props,
|
|
95
95
|
children: [
|
|
96
96
|
item.isFolder() && /*#__PURE__*/ _jsx("button", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/shadcn/components/ui/tree.tsx"],"sourcesContent":["import type { ItemInstance } from \"@headless-tree/core\";\nimport { ChevronDownIcon } from \"lucide-react\";\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { cn } from \"#shadcn/lib/utils\";\n\ntype WithMeta = {\n\tmeta?: {\n\t\tlastNode?: boolean;\n\t};\n};\n\n// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is\ninterface TreeContextValue<T = any> {\n\tindent: number;\n\tcurrentItem?: ItemInstance<T>;\n\t// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is\n\ttree?: any;\n}\n\nconst TreeContext = React.createContext<TreeContextValue>({\n\tindent: 20,\n});\n\n// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is\nfunction useTreeContext<T = any>() {\n\treturn React.useContext(TreeContext) as TreeContextValue<T>;\n}\n\ninterface TreeProps extends React.HTMLAttributes<HTMLDivElement> {\n\tindent?: number;\n\t// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is\n\ttree?: any;\n}\n\nfunction Tree({ indent = 20, tree, className, ...props }: TreeProps) {\n\tconst containerProps =\n\t\ttree && typeof tree.getContainerProps === \"function\"\n\t\t\t? tree.getContainerProps()\n\t\t\t: {};\n\tconst mergedProps = { ...props, ...containerProps };\n\n\t// Extract style from mergedProps to merge with our custom styles\n\tconst { style: propStyle, ...otherProps } = mergedProps;\n\n\t// Merge styles\n\tconst mergedStyle = {\n\t\t...propStyle,\n\t\t\"--tree-indent\": `${indent}px`,\n\t\t\"--border\": `var(--color-border-separator)`,\n\t} as React.CSSProperties;\n\n\treturn (\n\t\t<TreeContext.Provider value={{ indent, tree }}>\n\t\t\t<div\n\t\t\t\tdata-slot=\"tree\"\n\t\t\t\tstyle={mergedStyle}\n\t\t\t\tclassName={cn(\"flex flex-col\", className)}\n\t\t\t\t{...otherProps}\n\t\t\t/>\n\t\t</TreeContext.Provider>\n\t);\n}\n\n// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is\ninterface TreeItemProps<T = any>\n\textends React.HTMLAttributes<HTMLButtonElement> {\n\titem: ItemInstance<T>;\n\tindent?: number;\n\tasChild?: boolean;\n}\n\n// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is\nfunction TreeItem<T = any>({\n\titem,\n\tclassName,\n\tasChild,\n\tchildren,\n\t...props\n}: Omit<TreeItemProps<T>, \"indent\">) {\n\tconst { indent } = useTreeContext<T>();\n\n\tconst itemProps = typeof item.getProps === \"function\" ? item.getProps() : {};\n\tconst mergedProps = { ...props, ...itemProps };\n\n\t// Extract style from mergedProps to merge with our custom styles\n\tconst { style: propStyle, ...otherProps } = mergedProps;\n\n\t// Merge styles\n\tconst mergedStyle = {\n\t\t...propStyle,\n\t\t\"--tree-padding\": `${item.getItemMeta().level * indent}px`,\n\t} as React.CSSProperties;\n\n\tconst Comp = asChild ? Slot.Root : \"span\";\n\n\treturn (\n\t\t<TreeContext.Provider value={{ indent, currentItem: item }}>\n\t\t\t<Comp\n\t\t\t\tdata-slot=\"tree-item\"\n\t\t\t\tstyle={mergedStyle}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"z-10 ps-(--tree-padding) outline-hidden select-none focus:z-20 data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-focus={\n\t\t\t\t\ttypeof item.isFocused === \"function\"\n\t\t\t\t\t\t? item.isFocused() || false\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tdata-folder={\n\t\t\t\t\ttypeof item.isFolder === \"function\"\n\t\t\t\t\t\t? item.isFolder() || false\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tdata-selected={\n\t\t\t\t\ttypeof item.isSelected === \"function\"\n\t\t\t\t\t\t? item.isSelected() || false\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tdata-drag-target={\n\t\t\t\t\ttypeof item.isDragTarget === \"function\"\n\t\t\t\t\t\t? item.isDragTarget() || false\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tdata-search-match={\n\t\t\t\t\ttypeof item.isMatchingSearch === \"function\"\n\t\t\t\t\t\t? item.isMatchingSearch() || false\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\taria-expanded={item.isExpanded()}\n\t\t\t\t{...Object.fromEntries(\n\t\t\t\t\tObject.entries(otherProps).filter(\n\t\t\t\t\t\t([key]) => key !== \"onClick\" && key !== \"onDragStart\",\n\t\t\t\t\t),\n\t\t\t\t)}\n\t\t\t\tonDragStart={(e) => {\n\t\t\t\t\tif ((e.target as HTMLElement).dataset.slot === \"drag-handle\") {\n\t\t\t\t\t\titem.getProps().onDragStart(e);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Comp>\n\t\t</TreeContext.Provider>\n\t);\n}\n\n// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is\ninterface TreeItemLabelProps<T = any>\n\textends React.HTMLAttributes<HTMLSpanElement> {\n\thideChevron?: boolean;\n\tdisableHover?: boolean;\n\titem?: ItemInstance<T>;\n\thorizontalLines?: boolean;\n}\n\nfunction TreeItemLabel<T>({\n\titem: propItem,\n\tchildren,\n\tclassName,\n\tdisableHover,\n\thorizontalLines,\n\thideChevron,\n\t...props\n}: TreeItemLabelProps<T & WithMeta>) {\n\tconst { currentItem } = useTreeContext<T & WithMeta>();\n\tconst item = propItem || currentItem;\n\n\tif (!item) {\n\t\tconsole.warn(\"TreeItemLabel: No item provided via props or context\");\n\t\treturn null;\n\t}\n\n\tconst data = item.getItemData?.();\n\tconst isLastNode = data?.meta?.lastNode;\n\tconst itemMeta = item.getItemMeta();\n\n\treturn (\n\t\t<span\n\t\t\tdata-slot=\"tree-item-label\"\n\t\t\tclassName={cn(\n\t\t\t\t\"group/tree-item-label relative select-text in-focus-visible:ring-ring/50 bg-background text-text-secondary in-data-[drag-target=true]:bg-accent flex items-center gap-2 pr-2 pl-2.5 py-1.5 text-sm transition-colors not-in-data-[folder=true]:ps-2.5 in-focus-visible:ring-[3px] in-data-[search-match=true]:bg-blue-400/20! [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n\t\t\t\t!disableHover &&\n\t\t\t\t\t\"in-data-[selected=true]:bg-bg-secondary in-data-[selected=true]:text-text-primary\",\n\t\t\t\t!disableHover &&\n\t\t\t\t\titem.isFolder() &&\n\t\t\t\t\t\"hover:bg-bg-secondary hover:text-text-primary cursor-pointer\",\n\t\t\t\tdisableHover && \"text-text-primary\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{item.isFolder() && (\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclassName=\"self-start mt-0.5 cursor-pointer\"\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\titem.isExpanded() ? item.collapse() : item.expand();\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<ChevronDownIcon className=\"text-muted-foreground size-4 in-aria-[expanded=false]:-rotate-90\" />\n\t\t\t\t</button>\n\t\t\t)}\n\t\t\t{!item.isFolder() && horizontalLines && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={`w-5 min-w-5 h-px border-t mt-2 -ml-1 self-start`}\n\t\t\t\t></div>\n\t\t\t)}\n\t\t\t{item.isFolder() && item.isExpanded() && horizontalLines && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={`absolute left-4.25 top-8 w-px min-h-full h-full border-l mt-2.25 self-start `}\n\t\t\t\t></div>\n\t\t\t)}\n\t\t\t{horizontalLines && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={`absolute left-0 top-4.75 -m-[5px] border-t w-4 ${isLastNode ? \"h-full bg-inherit \" : \"\"} ${itemMeta.level === 0 ? \"hidden\" : \"\"}`}\n\t\t\t\t></div>\n\t\t\t)}\n\t\t\t{children ||\n\t\t\t\t(typeof item.getItemName === \"function\" ? item.getItemName() : null)}\n\t\t</span>\n\t);\n}\n\nfunction TreeDragLine({\n\tclassName,\n\t...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n\tconst { tree } = useTreeContext();\n\n\tif (!tree || typeof tree.getDragLineStyle !== \"function\") {\n\t\tconsole.warn(\n\t\t\t\"TreeDragLine: No tree provided via context or tree does not have getDragLineStyle method\",\n\t\t);\n\t\treturn null;\n\t}\n\n\tconst dragLine = tree.getDragLineStyle();\n\treturn (\n\t\t<div\n\t\t\tstyle={dragLine}\n\t\t\tclassName={cn(\n\t\t\t\t\"bg-primary before:bg-background before:border-primary absolute z-30 -mt-px h-0.5 w-[unset] before:absolute before:-top-[3px] before:left-0 before:size-2 before:rounded-full before:border-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport { Tree, TreeItem, TreeItemLabel, TreeDragLine, type ItemInstance };\n"],"names":["ChevronDownIcon","Slot","React","cn","TreeContext","createContext","indent","useTreeContext","useContext","Tree","tree","className","props","containerProps","getContainerProps","mergedProps","style","propStyle","otherProps","mergedStyle","Provider","value","div","data-slot","TreeItem","item","asChild","children","itemProps","getProps","getItemMeta","level","Comp","Root","currentItem","data-focus","isFocused","undefined","data-folder","isFolder","data-selected","isSelected","data-drag-target","isDragTarget","data-search-match","isMatchingSearch","aria-expanded","isExpanded","Object","fromEntries","entries","filter","key","onDragStart","e","target","dataset","slot","TreeItemLabel","propItem","disableHover","horizontalLines","hideChevron","console","warn","data","getItemData","isLastNode","meta","lastNode","itemMeta","span","button","type","onClick","collapse","expand","getItemName","TreeDragLine","getDragLineStyle","dragLine"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../../../src/shadcn/components/ui/tree.tsx"],"sourcesContent":["import type { ItemInstance } from \"@headless-tree/core\";\nimport { ChevronDownIcon } from \"lucide-react\";\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { cn } from \"#shadcn/lib/utils\";\n\ntype WithMeta = {\n\tmeta?: {\n\t\tlastNode?: boolean;\n\t};\n};\n\n// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is\ninterface TreeContextValue<T = any> {\n\tindent: number;\n\tcurrentItem?: ItemInstance<T>;\n\t// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is\n\ttree?: any;\n}\n\nconst TreeContext = React.createContext<TreeContextValue>({\n\tindent: 20,\n});\n\n// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is\nfunction useTreeContext<T = any>() {\n\treturn React.useContext(TreeContext) as TreeContextValue<T>;\n}\n\ninterface TreeProps extends React.HTMLAttributes<HTMLDivElement> {\n\tindent?: number;\n\t// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is\n\ttree?: any;\n}\n\nfunction Tree({ indent = 20, tree, className, ...props }: TreeProps) {\n\tconst containerProps =\n\t\ttree && typeof tree.getContainerProps === \"function\"\n\t\t\t? tree.getContainerProps()\n\t\t\t: {};\n\tconst mergedProps = { ...props, ...containerProps };\n\n\t// Extract style from mergedProps to merge with our custom styles\n\tconst { style: propStyle, ...otherProps } = mergedProps;\n\n\t// Merge styles\n\tconst mergedStyle = {\n\t\t...propStyle,\n\t\t\"--tree-indent\": `${indent}px`,\n\t\t\"--border\": `var(--color-border-separator)`,\n\t} as React.CSSProperties;\n\n\treturn (\n\t\t<TreeContext.Provider value={{ indent, tree }}>\n\t\t\t<div\n\t\t\t\tdata-slot=\"tree\"\n\t\t\t\tstyle={mergedStyle}\n\t\t\t\tclassName={cn(\"flex flex-col\", className)}\n\t\t\t\t{...otherProps}\n\t\t\t/>\n\t\t</TreeContext.Provider>\n\t);\n}\n\n// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is\ninterface TreeItemProps<T = any>\n\textends React.HTMLAttributes<HTMLButtonElement> {\n\titem: ItemInstance<T>;\n\tindent?: number;\n\tasChild?: boolean;\n}\n\n// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is\nfunction TreeItem<T = any>({\n\titem,\n\tclassName,\n\tasChild,\n\tchildren,\n\t...props\n}: Omit<TreeItemProps<T>, \"indent\">) {\n\tconst { indent } = useTreeContext<T>();\n\n\tconst itemProps = typeof item.getProps === \"function\" ? item.getProps() : {};\n\tconst mergedProps = { ...props, ...itemProps };\n\n\t// Extract style from mergedProps to merge with our custom styles\n\tconst { style: propStyle, ...otherProps } = mergedProps;\n\n\t// Merge styles\n\tconst mergedStyle = {\n\t\t...propStyle,\n\t\t\"--tree-padding\": `${item.getItemMeta().level * indent}px`,\n\t} as React.CSSProperties;\n\n\tconst Comp = asChild ? Slot.Root : \"span\";\n\n\treturn (\n\t\t<TreeContext.Provider value={{ indent, currentItem: item }}>\n\t\t\t<Comp\n\t\t\t\tdata-slot=\"tree-item\"\n\t\t\t\tstyle={mergedStyle}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"z-10 ps-(--tree-padding) outline-hidden select-none focus:z-20 data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-focus={\n\t\t\t\t\ttypeof item.isFocused === \"function\"\n\t\t\t\t\t\t? item.isFocused() || false\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tdata-folder={\n\t\t\t\t\ttypeof item.isFolder === \"function\"\n\t\t\t\t\t\t? item.isFolder() || false\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tdata-selected={\n\t\t\t\t\ttypeof item.isSelected === \"function\"\n\t\t\t\t\t\t? item.isSelected() || false\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tdata-drag-target={\n\t\t\t\t\ttypeof item.isDragTarget === \"function\"\n\t\t\t\t\t\t? item.isDragTarget() || false\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tdata-search-match={\n\t\t\t\t\ttypeof item.isMatchingSearch === \"function\"\n\t\t\t\t\t\t? item.isMatchingSearch() || false\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\taria-expanded={item.isExpanded()}\n\t\t\t\t{...Object.fromEntries(\n\t\t\t\t\tObject.entries(otherProps).filter(([key]) => key !== \"onDragStart\"),\n\t\t\t\t)}\n\t\t\t\tonDragStart={(e) => {\n\t\t\t\t\tif ((e.target as HTMLElement).dataset.slot === \"drag-handle\") {\n\t\t\t\t\t\titem.getProps().onDragStart(e);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Comp>\n\t\t</TreeContext.Provider>\n\t);\n}\n\n// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is\ninterface TreeItemLabelProps<T = any>\n\textends React.HTMLAttributes<HTMLSpanElement> {\n\thideChevron?: boolean;\n\tdisableHover?: boolean;\n\titem?: ItemInstance<T>;\n\thorizontalLines?: boolean;\n}\n\nfunction TreeItemLabel<T>({\n\titem: propItem,\n\tchildren,\n\tclassName,\n\tdisableHover,\n\thorizontalLines,\n\thideChevron,\n\t...props\n}: TreeItemLabelProps<T & WithMeta>) {\n\tconst { currentItem } = useTreeContext<T & WithMeta>();\n\tconst item = propItem || currentItem;\n\n\tif (!item) {\n\t\tconsole.warn(\"TreeItemLabel: No item provided via props or context\");\n\t\treturn null;\n\t}\n\n\tconst data = item.getItemData?.();\n\tconst isLastNode = data?.meta?.lastNode;\n\tconst itemMeta = item.getItemMeta();\n\n\treturn (\n\t\t<span\n\t\t\tdata-slot=\"tree-item-label\"\n\t\t\tclassName={cn(\n\t\t\t\t\"group/tree-item-label relative select-text in-focus-visible:ring-ring/50 bg-background text-text-secondary in-data-[drag-target=true]:bg-accent flex items-center gap-2 pr-2 pl-2.5 py-1.5 text-sm transition-colors not-in-data-[folder=true]:ps-2.5 in-focus-visible:ring-[3px] in-data-[search-match=true]:bg-blue-400/20! [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n\t\t\t\t!disableHover &&\n\t\t\t\t\t\"in-data-[focus=true]:bg-bg-secondary in-data-[focus=true]:text-text-primary\",\n\t\t\t\t!disableHover &&\n\t\t\t\t\titem.isFolder() &&\n\t\t\t\t\t\"hover:bg-bg-secondary hover:text-text-primary cursor-pointer\",\n\t\t\t\t!disableHover &&\n\t\t\t\t\t!item.isFolder() &&\n\t\t\t\t\t\"hover:bg-bg-secondary hover:text-text-primary cursor-pointer\",\n\t\t\t\tdisableHover && \"text-text-primary\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{item.isFolder() && (\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclassName=\"self-start mt-0.5 cursor-pointer\"\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\titem.isExpanded() ? item.collapse() : item.expand();\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<ChevronDownIcon className=\"text-muted-foreground size-4 in-aria-[expanded=false]:-rotate-90\" />\n\t\t\t\t</button>\n\t\t\t)}\n\t\t\t{!item.isFolder() && horizontalLines && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={`w-5 min-w-5 h-px border-t mt-2 -ml-1 self-start`}\n\t\t\t\t></div>\n\t\t\t)}\n\t\t\t{item.isFolder() && item.isExpanded() && horizontalLines && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={`absolute left-4.25 top-8 w-px min-h-full h-full border-l mt-2.25 self-start `}\n\t\t\t\t></div>\n\t\t\t)}\n\t\t\t{horizontalLines && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={`absolute left-0 top-4.75 -m-[5px] border-t w-4 ${isLastNode ? \"h-full bg-inherit \" : \"\"} ${itemMeta.level === 0 ? \"hidden\" : \"\"}`}\n\t\t\t\t></div>\n\t\t\t)}\n\t\t\t{children ||\n\t\t\t\t(typeof item.getItemName === \"function\" ? item.getItemName() : null)}\n\t\t</span>\n\t);\n}\n\nfunction TreeDragLine({\n\tclassName,\n\t...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n\tconst { tree } = useTreeContext();\n\n\tif (!tree || typeof tree.getDragLineStyle !== \"function\") {\n\t\tconsole.warn(\n\t\t\t\"TreeDragLine: No tree provided via context or tree does not have getDragLineStyle method\",\n\t\t);\n\t\treturn null;\n\t}\n\n\tconst dragLine = tree.getDragLineStyle();\n\treturn (\n\t\t<div\n\t\t\tstyle={dragLine}\n\t\t\tclassName={cn(\n\t\t\t\t\"bg-primary before:bg-background before:border-primary absolute z-30 -mt-px h-0.5 w-[unset] before:absolute before:-top-[3px] before:left-0 before:size-2 before:rounded-full before:border-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport { Tree, TreeItem, TreeItemLabel, TreeDragLine, type ItemInstance };\n"],"names":["ChevronDownIcon","Slot","React","cn","TreeContext","createContext","indent","useTreeContext","useContext","Tree","tree","className","props","containerProps","getContainerProps","mergedProps","style","propStyle","otherProps","mergedStyle","Provider","value","div","data-slot","TreeItem","item","asChild","children","itemProps","getProps","getItemMeta","level","Comp","Root","currentItem","data-focus","isFocused","undefined","data-folder","isFolder","data-selected","isSelected","data-drag-target","isDragTarget","data-search-match","isMatchingSearch","aria-expanded","isExpanded","Object","fromEntries","entries","filter","key","onDragStart","e","target","dataset","slot","TreeItemLabel","propItem","disableHover","horizontalLines","hideChevron","console","warn","data","getItemData","isLastNode","meta","lastNode","itemMeta","span","button","type","onClick","collapse","expand","getItemName","TreeDragLine","getDragLineStyle","dragLine"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,19 +1,21 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from "@storybook/react-vite";
|
|
2
2
|
import { DataTable, type DataTableProps } from "./data-table";
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
type Data = {
|
|
5
|
+
name: string;
|
|
6
|
+
age: number;
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
const meta: Meta<typeof DataTable<Data>> = {
|
|
5
10
|
title: "Component/Data table",
|
|
6
|
-
component: DataTable
|
|
11
|
+
component: DataTable<Data>,
|
|
7
12
|
tags: ["autodocs"],
|
|
8
13
|
};
|
|
9
14
|
|
|
10
15
|
export default meta;
|
|
11
|
-
type Story = StoryObj<typeof
|
|
16
|
+
type Story = StoryObj<typeof meta>;
|
|
12
17
|
|
|
13
|
-
function DataTableWrapper
|
|
14
|
-
columns,
|
|
15
|
-
data,
|
|
16
|
-
}: DataTableProps<TData, TValue>) {
|
|
18
|
+
function DataTableWrapper({ columns, data }: DataTableProps<Data>) {
|
|
17
19
|
return <DataTable columns={columns} data={data} />;
|
|
18
20
|
}
|
|
19
21
|
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
3
|
import {
|
|
4
|
+
type AccessorKeyColumnDef,
|
|
4
5
|
type ColumnDef,
|
|
5
6
|
flexRender,
|
|
6
7
|
getCoreRowModel,
|
|
@@ -16,17 +17,17 @@ import {
|
|
|
16
17
|
TableRow,
|
|
17
18
|
} from "../shadcn/components/ui/table";
|
|
18
19
|
|
|
19
|
-
export interface DataTableProps<TData
|
|
20
|
-
columns: ColumnDef<TData,
|
|
20
|
+
export interface DataTableProps<TData> {
|
|
21
|
+
columns: { [K in keyof TData]: ColumnDef<TData, TData[K]> }[keyof TData][];
|
|
21
22
|
data: TData[];
|
|
22
23
|
stickyHeader?: boolean;
|
|
23
24
|
}
|
|
24
25
|
|
|
25
|
-
export function DataTable<TData
|
|
26
|
+
export function DataTable<TData>({
|
|
26
27
|
columns,
|
|
27
28
|
data,
|
|
28
29
|
stickyHeader = false,
|
|
29
|
-
}: DataTableProps<TData
|
|
30
|
+
}: DataTableProps<TData>) {
|
|
30
31
|
"use no memo";
|
|
31
32
|
const table = useReactTable({
|
|
32
33
|
data,
|
|
@@ -117,4 +118,4 @@ export function DataTable<TData, TValue>({
|
|
|
117
118
|
);
|
|
118
119
|
}
|
|
119
120
|
|
|
120
|
-
export type { ColumnDef };
|
|
121
|
+
export type { ColumnDef, AccessorKeyColumnDef };
|
|
@@ -15,16 +15,16 @@ type PackageSpec = {
|
|
|
15
15
|
};
|
|
16
16
|
|
|
17
17
|
type Coordinate = {
|
|
18
|
-
id
|
|
19
|
-
packageSpec
|
|
20
|
-
"package-spec"
|
|
21
|
-
label
|
|
18
|
+
id?: string;
|
|
19
|
+
packageSpec?: PackageSpec;
|
|
20
|
+
"package-spec"?: PackageSpec;
|
|
21
|
+
label?: string;
|
|
22
22
|
};
|
|
23
23
|
|
|
24
24
|
type FhirStructure = {
|
|
25
25
|
type?: string;
|
|
26
|
-
min?: string;
|
|
27
|
-
max?: string;
|
|
26
|
+
min?: string | number;
|
|
27
|
+
max?: string | number;
|
|
28
28
|
lastNode?: boolean;
|
|
29
29
|
isSummary?: boolean;
|
|
30
30
|
isModifier?: boolean;
|
|
@@ -40,7 +40,7 @@ type FhirStructure = {
|
|
|
40
40
|
vsCoordinate?: Coordinate;
|
|
41
41
|
};
|
|
42
42
|
|
|
43
|
-
|
|
43
|
+
function FiledIcon(item: ItemInstance<TreeViewItem<FhirStructure>>) {
|
|
44
44
|
const filedType = item.getItemData()?.meta?.type;
|
|
45
45
|
|
|
46
46
|
switch (filedType) {
|
|
@@ -76,7 +76,7 @@ const FiledIcon = (item: ItemInstance<TreeViewItem<FhirStructure>>) => {
|
|
|
76
76
|
default:
|
|
77
77
|
return <CustomIcon.ComplexTypeIcon />;
|
|
78
78
|
}
|
|
79
|
-
}
|
|
79
|
+
}
|
|
80
80
|
|
|
81
81
|
const customItemFieldNameClass = cn(
|
|
82
82
|
"flex",
|
|
@@ -89,7 +89,7 @@ const customItemFieldNameClass = cn(
|
|
|
89
89
|
"in-data-[folder=true]:min-w-[calc(260px-var(--tree-padding))]",
|
|
90
90
|
);
|
|
91
91
|
|
|
92
|
-
|
|
92
|
+
function customItemView(item: ItemInstance<TreeViewItem<FhirStructure>>) {
|
|
93
93
|
const fieldName = item.getItemData()?.name;
|
|
94
94
|
const cardinalityMin = item.getItemData()?.meta?.min;
|
|
95
95
|
const cardinalityMax = item.getItemData()?.meta?.max;
|
|
@@ -192,13 +192,13 @@ const customItemView = (item: ItemInstance<TreeViewItem<FhirStructure>>) => {
|
|
|
192
192
|
</div>
|
|
193
193
|
</div>
|
|
194
194
|
);
|
|
195
|
-
}
|
|
195
|
+
}
|
|
196
196
|
|
|
197
|
-
|
|
197
|
+
function FhirStructureView({
|
|
198
198
|
tree,
|
|
199
199
|
}: {
|
|
200
200
|
tree: Record<string, TreeViewItem<FhirStructure>>;
|
|
201
|
-
})
|
|
201
|
+
}) {
|
|
202
202
|
const expandedItemIds = React.useMemo(() => {
|
|
203
203
|
return Object.keys(tree ?? {});
|
|
204
204
|
}, [tree]);
|
|
@@ -213,6 +213,8 @@ const FhirStructureView = ({
|
|
|
213
213
|
<div className="min-w-[200px] w-[200px]">Description</div>
|
|
214
214
|
</div>
|
|
215
215
|
<TreeView
|
|
216
|
+
focusedItem={null}
|
|
217
|
+
onFocusedItemChange={() => {}}
|
|
216
218
|
hideChevron={true}
|
|
217
219
|
horizontalLines={true}
|
|
218
220
|
disableHover={true}
|
|
@@ -220,10 +222,10 @@ const FhirStructureView = ({
|
|
|
220
222
|
rootItemId="root"
|
|
221
223
|
items={tree}
|
|
222
224
|
customItemView={customItemView}
|
|
223
|
-
|
|
225
|
+
defaultExpandedItems={expandedItemIds}
|
|
224
226
|
/>
|
|
225
227
|
</div>
|
|
226
228
|
);
|
|
227
|
-
}
|
|
229
|
+
}
|
|
228
230
|
|
|
229
231
|
export { FhirStructureView, type FhirStructure };
|
|
@@ -34,7 +34,7 @@ const segmentControlItemClass = cn(
|
|
|
34
34
|
"select-none",
|
|
35
35
|
);
|
|
36
36
|
|
|
37
|
-
|
|
37
|
+
function SegmentControlItem({ children, value }: SegmentControlItemProps) {
|
|
38
38
|
const { defaultValue, onValueChange, name } = useContext(
|
|
39
39
|
SegmentControlContext,
|
|
40
40
|
);
|
|
@@ -55,14 +55,14 @@ const SegmentControlItem = ({ children, value }: SegmentControlItemProps) => {
|
|
|
55
55
|
</label>
|
|
56
56
|
</div>
|
|
57
57
|
);
|
|
58
|
-
}
|
|
58
|
+
}
|
|
59
59
|
|
|
60
|
-
|
|
60
|
+
function SegmentControl({
|
|
61
61
|
children,
|
|
62
62
|
defaultValue,
|
|
63
63
|
onValueChange,
|
|
64
64
|
name,
|
|
65
|
-
}: SegmentControlProps & { children?: ReactNode })
|
|
65
|
+
}: SegmentControlProps & { children?: ReactNode }) {
|
|
66
66
|
const contextValue: SegmentControlContextType = {
|
|
67
67
|
...(defaultValue !== undefined && { defaultValue }),
|
|
68
68
|
...(onValueChange !== undefined && { onValueChange }),
|
|
@@ -76,6 +76,6 @@ const SegmentControl = ({
|
|
|
76
76
|
</div>
|
|
77
77
|
</SegmentControlContext.Provider>
|
|
78
78
|
);
|
|
79
|
-
}
|
|
79
|
+
}
|
|
80
80
|
|
|
81
81
|
export { SegmentControl, SegmentControlItem };
|
|
@@ -10,8 +10,8 @@ const splitButtonStyles = cn(
|
|
|
10
10
|
"*:data-[slot=dropdown-menu-trigger]:border-l-0",
|
|
11
11
|
);
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
function SplitButton({ children }: { children: React.ReactNode }) {
|
|
14
14
|
return <div className={splitButtonStyles}>{children}</div>;
|
|
15
|
-
}
|
|
15
|
+
}
|
|
16
16
|
|
|
17
17
|
export { SplitButton };
|
|
@@ -160,14 +160,14 @@ export const Default: Story = {
|
|
|
160
160
|
args: {
|
|
161
161
|
items: items,
|
|
162
162
|
rootItemId: "root",
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
163
|
+
focusedItem: "request9",
|
|
164
|
+
defaultExpandedItems: ["collection3"],
|
|
165
|
+
onFocusedItemChange: (a) => action("onSelectItem")(a),
|
|
166
166
|
},
|
|
167
167
|
render: (args) => <TreeView {...args} />,
|
|
168
168
|
};
|
|
169
169
|
|
|
170
|
-
|
|
170
|
+
function customItemView(item: ItemInstance<TreeViewItem<ItemMeta>>) {
|
|
171
171
|
const isRootLevel = item.getItemMeta().level === 0;
|
|
172
172
|
const hasChildren = item.getItemData()?.children !== undefined;
|
|
173
173
|
const requestMethhod = item.getItemData()?.meta?.method;
|
|
@@ -250,15 +250,15 @@ const customItemView = (item: ItemInstance<TreeViewItem<ItemMeta>>) => {
|
|
|
250
250
|
</div>
|
|
251
251
|
</div>
|
|
252
252
|
);
|
|
253
|
-
}
|
|
253
|
+
}
|
|
254
254
|
|
|
255
255
|
export const CustomItemView: Story = {
|
|
256
256
|
args: {
|
|
257
257
|
items: items,
|
|
258
258
|
rootItemId: "root",
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
259
|
+
focusedItem: "request11",
|
|
260
|
+
defaultExpandedItems: ["collection3", "collection4"],
|
|
261
|
+
onFocusedItemChange: (a) => action("onSelectItem")(a ? items[a]?.name : a),
|
|
262
262
|
customItemView: customItemView,
|
|
263
263
|
},
|
|
264
264
|
render: (args) => <TreeView {...args} />,
|