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

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

@@ -0,0 +1,10 @@
+export interface ButtonDropdownOption {
+    value: string;
+    label: string;
+}
+export declare function ButtonDropdown({ options, selectedValue, onSelectItem, }: {
+    selectedValue?: string;
+    options: ButtonDropdownOption[];
+    onSelectItem: (item: string) => void;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=button-dropdown.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button-dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/button-dropdown.tsx"],"names":[],"mappings":"AAiBA,MAAM,WAAW,oBAAoB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACd;AAkBD,wBAAgB,cAAc,CAAC,EAC9B,OAAO,EACP,aAAa,EACb,YAAY,GACZ,EAAE;IACF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,oBAAoB,EAAE,CAAC;IAChC,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC,2CAgDA"}

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

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import * as Lucide from "lucide-react";
+import * as React from "react";
+import { Button } from "../shadcn/components/ui/button.js";
+import { Command, CommandInput, CommandItem, CommandList } from "../shadcn/components/ui/command.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../shadcn/components/ui/popover.js";
+import { cn } from "../shadcn/lib/utils.js";
+const popoverTriggerButtonStyle = cn("text-text-secondary", "bg-gray-100", "rounded-full", "px-2 h-6");
+const checkIconStyles = cva("ml-auto size-4", {
+    variants: {
+        isSelected: {
+            true: "opacity-100",
+            false: "opacity-0"
+        }
+    }
+});
+export function ButtonDropdown({ options, selectedValue, onSelectItem }) {
+    const [open, setOpen] = React.useState(false);
+    const onSelectItemMy = (item)=>{
+        onSelectItem(item);
+        setOpen(false);
+    };
+    const selectedOption = options.find((option)=>option.value === selectedValue)?.value;
+    return /*#__PURE__*/ _jsxs(Popover, {
+        open: open,
+        onOpenChange: setOpen,
+        children: [
+            /*#__PURE__*/ _jsx(PopoverTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ _jsxs(Button, {
+                    variant: "link",
+                    className: popoverTriggerButtonStyle,
+                    children: [
+                        /*#__PURE__*/ _jsx("span", {
+                            className: "typo-body",
+                            children: selectedOption
+                        }),
+                        /*#__PURE__*/ _jsx(Lucide.ChevronDownIcon, {})
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsx(PopoverContent, {
+                className: "p-0",
+                children: /*#__PURE__*/ _jsxs(Command, {
+                    children: [
+                        /*#__PURE__*/ _jsx(CommandInput, {}),
+                        /*#__PURE__*/ _jsx(CommandList, {
+                            children: options.map((option)=>/*#__PURE__*/ _jsxs(CommandItem, {
+                                    "data-state": selectedOption === option.value ? "checked" : "unchecked",
+                                    value: option.value,
+                                    onSelect: onSelectItemMy,
+                                    children: [
+                                        option.label,
+                                        /*#__PURE__*/ _jsx(Lucide.CheckIcon, {
+                                            className: cn(checkIconStyles({
+                                                isSelected: selectedOption === option.value
+                                            }))
+                                        })
+                                    ]
+                                }, option.value))
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=button-dropdown.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/button-dropdown.tsx"],"sourcesContent":["import { cva } from \"class-variance-authority\";\nimport * as Lucide from \"lucide-react\";\nimport * as React from \"react\";\nimport { Button } from \"#shadcn/components/ui/button.js\";\nimport {\n\tCommand,\n\tCommandInput,\n\tCommandItem,\n\tCommandList,\n} from \"#shadcn/components/ui/command.js\";\nimport {\n\tPopover,\n\tPopoverContent,\n\tPopoverTrigger,\n} from \"#shadcn/components/ui/popover\";\nimport { cn } from \"#shadcn/lib/utils\";\n\nexport interface ButtonDropdownOption {\n\tvalue: string;\n\tlabel: string;\n}\n\nconst popoverTriggerButtonStyle = cn(\n\t\"text-text-secondary\",\n\t\"bg-gray-100\",\n\t\"rounded-full\",\n\t\"px-2 h-6\",\n);\n\nconst checkIconStyles = cva(\"ml-auto size-4\", {\n\tvariants: {\n\t\tisSelected: {\n\t\t\ttrue: \"opacity-100\",\n\t\t\tfalse: \"opacity-0\",\n\t\t},\n\t},\n});\n\nexport function ButtonDropdown({\n\toptions,\n\tselectedValue,\n\tonSelectItem,\n}: {\n\tselectedValue?: string;\n\toptions: ButtonDropdownOption[];\n\tonSelectItem: (item: string) => void;\n}) {\n\tconst [open, setOpen] = React.useState(false);\n\n\tconst onSelectItemMy = (item: string) => {\n\t\tonSelectItem(item);\n\t\tsetOpen(false);\n\t};\n\n\tconst selectedOption = options.find(\n\t\t(option) => option.value === selectedValue,\n\t)?.value;\n\n\treturn (\n\t\t<Popover open={open} onOpenChange={setOpen}>\n\t\t\t<PopoverTrigger asChild>\n\t\t\t\t<Button variant=\"link\" className={popoverTriggerButtonStyle}>\n\t\t\t\t\t<span className=\"typo-body\">{selectedOption}</span>\n\t\t\t\t\t<Lucide.ChevronDownIcon />\n\t\t\t\t</Button>\n\t\t\t</PopoverTrigger>\n\t\t\t<PopoverContent className=\"p-0\">\n\t\t\t\t<Command>\n\t\t\t\t\t<CommandInput></CommandInput>\n\t\t\t\t\t<CommandList>\n\t\t\t\t\t\t{options.map((option) => (\n\t\t\t\t\t\t\t<CommandItem\n\t\t\t\t\t\t\t\tkey={option.value}\n\t\t\t\t\t\t\t\tdata-state={\n\t\t\t\t\t\t\t\t\tselectedOption === option.value ? \"checked\" : \"unchecked\"\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tvalue={option.value}\n\t\t\t\t\t\t\t\tonSelect={onSelectItemMy}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t\t<Lucide.CheckIcon\n\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\tcheckIconStyles({\n\t\t\t\t\t\t\t\t\t\t\tisSelected: selectedOption === option.value,\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/>\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"],"names":["cva","Lucide","React","Button","Command","CommandInput","CommandItem","CommandList","Popover","PopoverContent","PopoverTrigger","cn","popoverTriggerButtonStyle","checkIconStyles","variants","isSelected","true","false","ButtonDropdown","options","selectedValue","onSelectItem","open","setOpen","useState","onSelectItemMy","item","selectedOption","find","option","value","onOpenChange","asChild","variant","className","span","ChevronDownIcon","map","data-state","onSelect","label","CheckIcon"],"mappings":";AAAA,SAASA,GAAG,QAAQ,2BAA2B;AAC/C,YAAYC,YAAY,eAAe;AACvC,YAAYC,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,oCAAkC;AACzD,SACCC,OAAO,EACPC,YAAY,EACZC,WAAW,EACXC,WAAW,QACL,qCAAmC;AAC1C,SACCC,OAAO,EACPC,cAAc,EACdC,cAAc,QACR,qCAAgC;AACvC,SAASC,EAAE,QAAQ,yBAAoB;AAOvC,MAAMC,4BAA4BD,GACjC,uBACA,eACA,gBACA;AAGD,MAAME,kBAAkBb,IAAI,kBAAkB;IAC7Cc,UAAU;QACTC,YAAY;YACXC,MAAM;YACNC,OAAO;QACR;IACD;AACD;AAEA,OAAO,SAASC,eAAe,EAC9BC,OAAO,EACPC,aAAa,EACbC,YAAY,EAKZ;IACA,MAAM,CAACC,MAAMC,QAAQ,GAAGrB,MAAMsB,QAAQ,CAAC;IAEvC,MAAMC,iBAAiB,CAACC;QACvBL,aAAaK;QACbH,QAAQ;IACT;IAEA,MAAMI,iBAAiBR,QAAQS,IAAI,CAClC,CAACC,SAAWA,OAAOC,KAAK,KAAKV,gBAC3BU;IAEH,qBACC,MAACtB;QAAQc,MAAMA;QAAMS,cAAcR;;0BAClC,KAACb;gBAAesB,OAAO;0BACtB,cAAA,MAAC7B;oBAAO8B,SAAQ;oBAAOC,WAAWtB;;sCACjC,KAACuB;4BAAKD,WAAU;sCAAaP;;sCAC7B,KAAC1B,OAAOmC,eAAe;;;;0BAGzB,KAAC3B;gBAAeyB,WAAU;0BACzB,cAAA,MAAC9B;;sCACA,KAACC;sCACD,KAACE;sCACCY,QAAQkB,GAAG,CAAC,CAACR,uBACb,MAACvB;oCAEAgC,cACCX,mBAAmBE,OAAOC,KAAK,GAAG,YAAY;oCAE/CA,OAAOD,OAAOC,KAAK;oCACnBS,UAAUd;;wCAETI,OAAOW,KAAK;sDACb,KAACvC,OAAOwC,SAAS;4CAChBP,WAAWvB,GACVE,gBAAgB;gDACfE,YAAYY,mBAAmBE,OAAOC,KAAK;4CAC5C;;;mCAZGD,OAAOC,KAAK;;;;;;;AAsBzB"}

package/dist/src/components/button-dropdown.stories.d.ts

@@ -0,0 +1,11 @@
+declare const meta: {
+    title: string;
+    component: typeof ButtonDropdownDemo;
+    argTypes: {};
+};
+export default meta;
+declare function ButtonDropdownDemo(): import("react/jsx-runtime").JSX.Element;
+export declare const Default: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
+//# sourceMappingURL=button-dropdown.stories.d.ts.map

package/dist/src/components/button-dropdown.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-dropdown.stories.d.ts","sourceRoot":"","sources":["../../../src/components/button-dropdown.stories.tsx"],"names":[],"mappings":"AAIA,QAAA,MAAM,IAAI;;;;CAIM,CAAC;AACjB,eAAe,IAAI,CAAC;AAWpB,iBAAS,kBAAkB,4CAU1B;AAID,eAAO,MAAM,OAAO;;CAMH,CAAC"}

package/dist/src/components/button-dropdown.stories.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { ButtonDropdown } from "./button-dropdown.js";
+const meta = {
+    title: "Component/ButtonDropdown",
+    component: ButtonDropdownDemo,
+    argTypes: {}
+};
+export default meta;
+// Demo component for Storybook
+const demoOptions = [
+    {
+        value: "next.js",
+        label: "Next.js"
+    },
+    {
+        value: "sveltekit",
+        label: "SvelteKit"
+    },
+    {
+        value: "nuxt.js",
+        label: "Nuxt.js"
+    },
+    {
+        value: "remix",
+        label: "Remix"
+    },
+    {
+        value: "astro",
+        label: "Astro"
+    }
+];
+function ButtonDropdownDemo() {
+    const [value, setValue] = React.useState("next.js");
+    return /*#__PURE__*/ _jsx(ButtonDropdown, {
+        options: demoOptions,
+        selectedValue: value,
+        onSelectItem: setValue
+    });
+}
+export const Default = {
+    render: ()=>/*#__PURE__*/ _jsx("div", {
+            className: "w-[560px]",
+            children: /*#__PURE__*/ _jsx(ButtonDropdownDemo, {})
+        })
+};
+
+//# sourceMappingURL=button-dropdown.stories.js.map

package/dist/src/components/button-dropdown.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/button-dropdown.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-vite\";\nimport React from \"react\";\nimport { ButtonDropdown } from \"./button-dropdown\";\n\nconst meta = {\n\ttitle: \"Component/ButtonDropdown\",\n\tcomponent: ButtonDropdownDemo,\n\targTypes: {},\n} satisfies Meta;\nexport default meta;\n\n// Demo component for Storybook\nconst demoOptions = [\n\t{ value: \"next.js\", label: \"Next.js\" },\n\t{ value: \"sveltekit\", label: \"SvelteKit\" },\n\t{ value: \"nuxt.js\", label: \"Nuxt.js\" },\n\t{ value: \"remix\", label: \"Remix\" },\n\t{ value: \"astro\", label: \"Astro\" },\n];\n\nfunction ButtonDropdownDemo() {\n\tconst [value, setValue] = React.useState(\"next.js\");\n\n\treturn (\n\t\t<ButtonDropdown\n\t\t\toptions={demoOptions}\n\t\t\tselectedValue={value}\n\t\t\tonSelectItem={setValue}\n\t\t/>\n\t);\n}\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Default = {\n\trender: () => (\n\t\t<div className=\"w-[560px]\">\n\t\t\t<ButtonDropdownDemo />\n\t\t</div>\n\t),\n} satisfies Story;\n"],"names":["React","ButtonDropdown","meta","title","component","ButtonDropdownDemo","argTypes","demoOptions","value","label","setValue","useState","options","selectedValue","onSelectItem","Default","render","div","className"],"mappings":";AACA,OAAOA,WAAW,QAAQ;AAC1B,SAASC,cAAc,QAAQ,uBAAoB;AAEnD,MAAMC,OAAO;IACZC,OAAO;IACPC,WAAWC;IACXC,UAAU,CAAC;AACZ;AACA,eAAeJ,KAAK;AAEpB,+BAA+B;AAC/B,MAAMK,cAAc;IACnB;QAAEC,OAAO;QAAWC,OAAO;IAAU;IACrC;QAAED,OAAO;QAAaC,OAAO;IAAY;IACzC;QAAED,OAAO;QAAWC,OAAO;IAAU;IACrC;QAAED,OAAO;QAASC,OAAO;IAAQ;IACjC;QAAED,OAAO;QAASC,OAAO;IAAQ;CACjC;AAED,SAASJ;IACR,MAAM,CAACG,OAAOE,SAAS,GAAGV,MAAMW,QAAQ,CAAC;IAEzC,qBACC,KAACV;QACAW,SAASL;QACTM,eAAeL;QACfM,cAAcJ;;AAGjB;AAIA,OAAO,MAAMK,UAAU;IACtBC,QAAQ,kBACP,KAACC;YAAIC,WAAU;sBACd,cAAA,KAACb;;AAGJ,EAAkB"}

package/dist/src/components/data-table.d.ts

@@ -1,8 +1,9 @@
-import { type ColumnDef } from "@tanstack/react-table";
+import { type AccessorKeyColumnDef, type ColumnDef } from "@tanstack/react-table";
 export interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
     data: TData[];
+    stickyHeader?: boolean;
 }
-export declare function DataTable<TData, TValue>({ columns, data, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
-export type { ColumnDef };
+export declare function DataTable<TData, TValue>({ columns, data, stickyHeader, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export type { ColumnDef, AccessorKeyColumnDef };
 //# sourceMappingURL=data-table.d.ts.map

package/dist/src/components/data-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../../src/components/data-table.tsx"],"names":[],"mappings":"AAEA,OAAO,EACN,KAAK,SAAS,EAId,MAAM,uBAAuB,CAAC;AAW/B,MAAM,WAAW,cAAc,CAAC,KAAK,EAAE,MAAM;IAC5C,OAAO,EAAE,SAAS,CAAC,KAAK,EAAE,MAAM,CAAC,EAAE,CAAC;IACpC,IAAI,EAAE,KAAK,EAAE,CAAC;CACd;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,EACxC,OAAO,EACP,IAAI,GACJ,EAAE,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,2CAwF/B;AAED,YAAY,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../../src/components/data-table.tsx"],"names":[],"mappings":"AAEA,OAAO,EACN,KAAK,oBAAoB,EACzB,KAAK,SAAS,EAId,MAAM,uBAAuB,CAAC;AAW/B,MAAM,WAAW,cAAc,CAAC,KAAK,EAAE,MAAM;IAC5C,OAAO,EAAE,SAAS,CAAC,KAAK,EAAE,MAAM,CAAC,EAAE,CAAC;IACpC,IAAI,EAAE,KAAK,EAAE,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,EACxC,OAAO,EACP,IAAI,EACJ,YAAoB,GACpB,EAAE,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,2CAyF/B;AAED,YAAY,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC"}

package/dist/src/components/data-table.js

@@ -2,7 +2,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../shadcn/components/ui/table.js";
-export function DataTable({ columns, data }) {
+export function DataTable({ columns, data, stickyHeader = false }) {
+    "use no memo";
     const table = useReactTable({
         data,
         columns,
@@ -11,15 +12,15 @@ export function DataTable({ columns, data }) {
         enableColumnResizing: true
     });
     return /*#__PURE__*/ _jsx("div", {
-        className: "overflow-hidden w-full",
+        className: "overflow-hidden w-full h-full",
         children: /*#__PURE__*/ _jsxs(Table, {
-            className: "w-full",
+            className: "relative border-spacing-0 border-separate w-full",
             children: [
                 /*#__PURE__*/ _jsx(TableHeader, {
                     children: table.getHeaderGroups().map((headerGroup)=>/*#__PURE__*/ _jsx(TableRow, {
                             children: headerGroup.headers.map((header)=>{
                                 return /*#__PURE__*/ _jsxs(TableHead, {
-                                    className: "relative group border",
+                                    className: `relative group border ${stickyHeader ? "sticky top-0 z-10 bg-bg-secondary text-elements-assistive" : ""}`,
                                     style: {
                                         width: header.column.getIndex() === headerGroup.headers.length - 1 ? "w-full" : header.getSize()
                                     },

package/dist/src/components/data-table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/data-table.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n\ttype ColumnDef,\n\tflexRender,\n\tgetCoreRowModel,\n\tuseReactTable,\n} from \"@tanstack/react-table\";\n\nimport {\n\tTable,\n\tTableBody,\n\tTableCell,\n\tTableHead,\n\tTableHeader,\n\tTableRow,\n} from \"../shadcn/components/ui/table\";\n\nexport interface DataTableProps<TData, TValue> {\n\tcolumns: ColumnDef<TData, TValue>[];\n\tdata: TData[];\n}\n\nexport function DataTable<TData, TValue>({\n\tcolumns,\n\tdata,\n}: DataTableProps<TData, TValue>) {\n\tconst table = useReactTable({\n\t\tdata,\n\t\tcolumns,\n\t\tgetCoreRowModel: getCoreRowModel(),\n\t\tcolumnResizeMode: \"onChange\",\n\t\tenableColumnResizing: true,\n\t});\n\n\treturn (\n\t\t<div className=\"overflow-hidden w-full\">\n\t\t\t<Table className=\"w-full\">\n\t\t\t\t<TableHeader>\n\t\t\t\t\t{table.getHeaderGroups().map((headerGroup) => (\n\t\t\t\t\t\t<TableRow key={headerGroup.id}>\n\t\t\t\t\t\t\t{headerGroup.headers.map((header) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<TableHead\n\t\t\t\t\t\t\t\t\t\tkey={header.id}\n\t\t\t\t\t\t\t\t\t\tclassName=\"relative group border\"\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\t\t\t\t\t\theader.column.getIndex() ===\n\t\t\t\t\t\t\t\t\t\t\t\theaderGroup.headers.length - 1\n\t\t\t\t\t\t\t\t\t\t\t\t\t? \"w-full\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t: header.getSize(),\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{header.isPlaceholder\n\t\t\t\t\t\t\t\t\t\t\t? null\n\t\t\t\t\t\t\t\t\t\t\t: flexRender(\n\t\t\t\t\t\t\t\t\t\t\t\t\theader.column.columnDef.header,\n\t\t\t\t\t\t\t\t\t\t\t\t\theader.getContext(),\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t{header.column.getCanResize() && (\n\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\t{...{\n\t\t\t\t\t\t\t\t\t\t\t\t\tonMouseDown: header.getResizeHandler(),\n\t\t\t\t\t\t\t\t\t\t\t\t\tonTouchStart: header.getResizeHandler(),\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName: `hidden group-hover:block absolute top-0 right-0 h-full w-1 bg-border-secondary cursor-col-resize hover:bg-border-secondary`,\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tuserSelect: \"none\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttouchAction: \"none\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</TableHead>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t))}\n\t\t\t\t</TableHeader>\n\t\t\t\t<TableBody>\n\t\t\t\t\t{table.getRowModel().rows?.length ? (\n\t\t\t\t\t\ttable.getRowModel().rows.map((row) => (\n\t\t\t\t\t\t\t<TableRow\n\t\t\t\t\t\t\t\tkey={row.id}\n\t\t\t\t\t\t\t\tdata-state={row.getIsSelected() && \"selected\"}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{row.getVisibleCells().map((cell) => (\n\t\t\t\t\t\t\t\t\t<TableCell\n\t\t\t\t\t\t\t\t\t\tclassName=\"border\"\n\t\t\t\t\t\t\t\t\t\tkey={cell.id}\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\t\t\t\t\t\tcell.column.getIndex() ===\n\t\t\t\t\t\t\t\t\t\t\t\trow.getVisibleCells().length - 1\n\t\t\t\t\t\t\t\t\t\t\t\t\t? \"w-full\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t: cell.column.getSize(),\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{flexRender(cell.column.columnDef.cell, cell.getContext())}\n\t\t\t\t\t\t\t\t\t</TableCell>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t\t))\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<TableRow>\n\t\t\t\t\t\t\t<TableCell colSpan={columns.length} className=\"h-24 text-center\">\n\t\t\t\t\t\t\t\tNo results.\n\t\t\t\t\t\t\t</TableCell>\n\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t)}\n\t\t\t\t</TableBody>\n\t\t\t</Table>\n\t\t</div>\n\t);\n}\n\nexport type { ColumnDef };\n"],"names":["flexRender","getCoreRowModel","useReactTable","Table","TableBody","TableCell","TableHead","TableHeader","TableRow","DataTable","columns","data","table","columnResizeMode","enableColumnResizing","div","className","getHeaderGroups","map","headerGroup","headers","header","style","width","column","getIndex","length","getSize","isPlaceholder","columnDef","getContext","getCanResize","onMouseDown","getResizeHandler","onTouchStart","userSelect","touchAction","id","getRowModel","rows","row","data-state","getIsSelected","getVisibleCells","cell","colSpan"],"mappings":"AAAA;;AAEA,SAECA,UAAU,EACVC,eAAe,EACfC,aAAa,QACP,wBAAwB;AAE/B,SACCC,KAAK,EACLC,SAAS,EACTC,SAAS,EACTC,SAAS,EACTC,WAAW,EACXC,QAAQ,QACF,mCAAgC;AAOvC,OAAO,SAASC,UAAyB,EACxCC,OAAO,EACPC,IAAI,EAC2B;IAC/B,MAAMC,QAAQV,cAAc;QAC3BS;QACAD;QACAT,iBAAiBA;QACjBY,kBAAkB;QAClBC,sBAAsB;IACvB;IAEA,qBACC,KAACC;QAAIC,WAAU;kBACd,cAAA,MAACb;YAAMa,WAAU;;8BAChB,KAACT;8BACCK,MAAMK,eAAe,GAAGC,GAAG,CAAC,CAACC,4BAC7B,KAACX;sCACCW,YAAYC,OAAO,CAACF,GAAG,CAAC,CAACG;gCACzB,qBACC,MAACf;oCAEAU,WAAU;oCACVM,OAAO;wCACNC,OACCF,OAAOG,MAAM,CAACC,QAAQ,OACtBN,YAAYC,OAAO,CAACM,MAAM,GAAG,IAC1B,WACAL,OAAOM,OAAO;oCACnB;;wCAECN,OAAOO,aAAa,GAClB,OACA5B,WACAqB,OAAOG,MAAM,CAACK,SAAS,CAACR,MAAM,EAC9BA,OAAOS,UAAU;wCAEnBT,OAAOG,MAAM,CAACO,YAAY,oBAC1B,KAAChB;4CAECiB,aAAaX,OAAOY,gBAAgB;4CACpCC,cAAcb,OAAOY,gBAAgB;4CACrCjB,WAAW,CAAC,0HAA0H,CAAC;4CACvIM,OAAO;gDACNa,YAAY;gDACZC,aAAa;4CACd;;;mCAzBEf,OAAOgB,EAAE;4BA+BjB;2BAnCclB,YAAYkB,EAAE;;8BAuC/B,KAACjC;8BACCQ,MAAM0B,WAAW,GAAGC,IAAI,EAAEb,SAC1Bd,MAAM0B,WAAW,GAAGC,IAAI,CAACrB,GAAG,CAAC,CAACsB,oBAC7B,KAAChC;4BAEAiC,cAAYD,IAAIE,aAAa,MAAM;sCAElCF,IAAIG,eAAe,GAAGzB,GAAG,CAAC,CAAC0B,qBAC3B,KAACvC;oCACAW,WAAU;oCAEVM,OAAO;wCACNC,OACCqB,KAAKpB,MAAM,CAACC,QAAQ,OACpBe,IAAIG,eAAe,GAAGjB,MAAM,GAAG,IAC5B,WACAkB,KAAKpB,MAAM,CAACG,OAAO;oCACxB;8CAEC3B,WAAW4C,KAAKpB,MAAM,CAACK,SAAS,CAACe,IAAI,EAAEA,KAAKd,UAAU;mCATlDc,KAAKP,EAAE;2BANTG,IAAIH,EAAE,mBAqBb,KAAC7B;kCACA,cAAA,KAACH;4BAAUwC,SAASnC,QAAQgB,MAAM;4BAAEV,WAAU;sCAAmB;;;;;;;AASxE"}
+{"version":3,"sources":["../../../src/components/data-table.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n\ttype AccessorKeyColumnDef,\n\ttype ColumnDef,\n\tflexRender,\n\tgetCoreRowModel,\n\tuseReactTable,\n} from \"@tanstack/react-table\";\n\nimport {\n\tTable,\n\tTableBody,\n\tTableCell,\n\tTableHead,\n\tTableHeader,\n\tTableRow,\n} from \"../shadcn/components/ui/table\";\n\nexport interface DataTableProps<TData, TValue> {\n\tcolumns: ColumnDef<TData, TValue>[];\n\tdata: TData[];\n\tstickyHeader?: boolean;\n}\n\nexport function DataTable<TData, TValue>({\n\tcolumns,\n\tdata,\n\tstickyHeader = false,\n}: DataTableProps<TData, TValue>) {\n\t\"use no memo\";\n\tconst table = useReactTable({\n\t\tdata,\n\t\tcolumns,\n\t\tgetCoreRowModel: getCoreRowModel(),\n\t\tcolumnResizeMode: \"onChange\",\n\t\tenableColumnResizing: true,\n\t});\n\n\treturn (\n\t\t<div className=\"overflow-hidden w-full h-full\">\n\t\t\t<Table className=\"relative border-spacing-0 border-separate w-full\">\n\t\t\t\t<TableHeader>\n\t\t\t\t\t{table.getHeaderGroups().map((headerGroup) => (\n\t\t\t\t\t\t<TableRow key={headerGroup.id}>\n\t\t\t\t\t\t\t{headerGroup.headers.map((header) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<TableHead\n\t\t\t\t\t\t\t\t\t\tkey={header.id}\n\t\t\t\t\t\t\t\t\t\tclassName={`relative group border ${stickyHeader ? \"sticky top-0 z-10 bg-bg-secondary text-elements-assistive\" : \"\"}`}\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\t\t\t\t\t\theader.column.getIndex() ===\n\t\t\t\t\t\t\t\t\t\t\t\theaderGroup.headers.length - 1\n\t\t\t\t\t\t\t\t\t\t\t\t\t? \"w-full\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t: header.getSize(),\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{header.isPlaceholder\n\t\t\t\t\t\t\t\t\t\t\t? null\n\t\t\t\t\t\t\t\t\t\t\t: flexRender(\n\t\t\t\t\t\t\t\t\t\t\t\t\theader.column.columnDef.header,\n\t\t\t\t\t\t\t\t\t\t\t\t\theader.getContext(),\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t{header.column.getCanResize() && (\n\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\t{...{\n\t\t\t\t\t\t\t\t\t\t\t\t\tonMouseDown: header.getResizeHandler(),\n\t\t\t\t\t\t\t\t\t\t\t\t\tonTouchStart: header.getResizeHandler(),\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName: `hidden group-hover:block absolute top-0 right-0 h-full w-1 bg-border-secondary cursor-col-resize hover:bg-border-secondary`,\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tuserSelect: \"none\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttouchAction: \"none\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</TableHead>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t))}\n\t\t\t\t</TableHeader>\n\t\t\t\t<TableBody>\n\t\t\t\t\t{table.getRowModel().rows?.length ? (\n\t\t\t\t\t\ttable.getRowModel().rows.map((row) => (\n\t\t\t\t\t\t\t<TableRow\n\t\t\t\t\t\t\t\tkey={row.id}\n\t\t\t\t\t\t\t\tdata-state={row.getIsSelected() && \"selected\"}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{row.getVisibleCells().map((cell) => (\n\t\t\t\t\t\t\t\t\t<TableCell\n\t\t\t\t\t\t\t\t\t\tclassName=\"border\"\n\t\t\t\t\t\t\t\t\t\tkey={cell.id}\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\t\t\t\t\t\tcell.column.getIndex() ===\n\t\t\t\t\t\t\t\t\t\t\t\trow.getVisibleCells().length - 1\n\t\t\t\t\t\t\t\t\t\t\t\t\t? \"w-full\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t: cell.column.getSize(),\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{flexRender(cell.column.columnDef.cell, cell.getContext())}\n\t\t\t\t\t\t\t\t\t</TableCell>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t\t))\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<TableRow>\n\t\t\t\t\t\t\t<TableCell colSpan={columns.length} className=\"h-24 text-center\">\n\t\t\t\t\t\t\t\tNo results.\n\t\t\t\t\t\t\t</TableCell>\n\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t)}\n\t\t\t\t</TableBody>\n\t\t\t</Table>\n\t\t</div>\n\t);\n}\n\nexport type { ColumnDef, AccessorKeyColumnDef };\n"],"names":["flexRender","getCoreRowModel","useReactTable","Table","TableBody","TableCell","TableHead","TableHeader","TableRow","DataTable","columns","data","stickyHeader","table","columnResizeMode","enableColumnResizing","div","className","getHeaderGroups","map","headerGroup","headers","header","style","width","column","getIndex","length","getSize","isPlaceholder","columnDef","getContext","getCanResize","onMouseDown","getResizeHandler","onTouchStart","userSelect","touchAction","id","getRowModel","rows","row","data-state","getIsSelected","getVisibleCells","cell","colSpan"],"mappings":"AAAA;;AAEA,SAGCA,UAAU,EACVC,eAAe,EACfC,aAAa,QACP,wBAAwB;AAE/B,SACCC,KAAK,EACLC,SAAS,EACTC,SAAS,EACTC,SAAS,EACTC,WAAW,EACXC,QAAQ,QACF,mCAAgC;AAQvC,OAAO,SAASC,UAAyB,EACxCC,OAAO,EACPC,IAAI,EACJC,eAAe,KAAK,EACW;IAC/B;IACA,MAAMC,QAAQX,cAAc;QAC3BS;QACAD;QACAT,iBAAiBA;QACjBa,kBAAkB;QAClBC,sBAAsB;IACvB;IAEA,qBACC,KAACC;QAAIC,WAAU;kBACd,cAAA,MAACd;YAAMc,WAAU;;8BAChB,KAACV;8BACCM,MAAMK,eAAe,GAAGC,GAAG,CAAC,CAACC,4BAC7B,KAACZ;sCACCY,YAAYC,OAAO,CAACF,GAAG,CAAC,CAACG;gCACzB,qBACC,MAAChB;oCAEAW,WAAW,CAAC,sBAAsB,EAAEL,eAAe,8DAA8D,IAAI;oCACrHW,OAAO;wCACNC,OACCF,OAAOG,MAAM,CAACC,QAAQ,OACtBN,YAAYC,OAAO,CAACM,MAAM,GAAG,IAC1B,WACAL,OAAOM,OAAO;oCACnB;;wCAECN,OAAOO,aAAa,GAClB,OACA7B,WACAsB,OAAOG,MAAM,CAACK,SAAS,CAACR,MAAM,EAC9BA,OAAOS,UAAU;wCAEnBT,OAAOG,MAAM,CAACO,YAAY,oBAC1B,KAAChB;4CAECiB,aAAaX,OAAOY,gBAAgB;4CACpCC,cAAcb,OAAOY,gBAAgB;4CACrCjB,WAAW,CAAC,0HAA0H,CAAC;4CACvIM,OAAO;gDACNa,YAAY;gDACZC,aAAa;4CACd;;;mCAzBEf,OAAOgB,EAAE;4BA+BjB;2BAnCclB,YAAYkB,EAAE;;8BAuC/B,KAAClC;8BACCS,MAAM0B,WAAW,GAAGC,IAAI,EAAEb,SAC1Bd,MAAM0B,WAAW,GAAGC,IAAI,CAACrB,GAAG,CAAC,CAACsB,oBAC7B,KAACjC;4BAEAkC,cAAYD,IAAIE,aAAa,MAAM;sCAElCF,IAAIG,eAAe,GAAGzB,GAAG,CAAC,CAAC0B,qBAC3B,KAACxC;oCACAY,WAAU;oCAEVM,OAAO;wCACNC,OACCqB,KAAKpB,MAAM,CAACC,QAAQ,OACpBe,IAAIG,eAAe,GAAGjB,MAAM,GAAG,IAC5B,WACAkB,KAAKpB,MAAM,CAACG,OAAO;oCACxB;8CAEC5B,WAAW6C,KAAKpB,MAAM,CAACK,SAAS,CAACe,IAAI,EAAEA,KAAKd,UAAU;mCATlDc,KAAKP,EAAE;2BANTG,IAAIH,EAAE,mBAqBb,KAAC9B;kCACA,cAAA,KAACH;4BAAUyC,SAASpC,QAAQiB,MAAM;4BAAEV,WAAU;sCAAmB;;;;;;;AASxE"}

package/dist/src/components/data-table.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.stories.d.ts","sourceRoot":"","sources":["../../../src/components/data-table.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAuB,MAAM,cAAc,CAAC;AAE9D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAIhC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AASxC,eAAO,MAAM,OAAO,EAAE,KAkBrB,CAAC"}
+{"version":3,"file":"data-table.stories.d.ts","sourceRoot":"","sources":["../../../src/components/data-table.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAuB,MAAM,cAAc,CAAC;AAE9D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAIhC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AASxC,eAAO,MAAM,OAAO,EAAE,KAqErB,CAAC"}

package/dist/src/components/data-table.stories.js

@@ -30,6 +30,202 @@ export const Default = {
             {
                 name: "John Doe",
                 age: 30
+            },
+            {
+                name: "Jane Smith",
+                age: 25
+            },
+            {
+                name: "Bob Johnson",
+                age: 42
+            },
+            {
+                name: "Alice Williams",
+                age: 35
+            },
+            {
+                name: "Charlie Brown",
+                age: 28
+            },
+            {
+                name: "Diana Prince",
+                age: 31
+            },
+            {
+                name: "Edward Norton",
+                age: 45
+            },
+            {
+                name: "Fiona Green",
+                age: 27
+            },
+            {
+                name: "George Miller",
+                age: 38
+            },
+            {
+                name: "Hannah Davis",
+                age: 33
+            },
+            {
+                name: "Ian Moore",
+                age: 29
+            },
+            {
+                name: "Julia Taylor",
+                age: 41
+            },
+            {
+                name: "Kevin Anderson",
+                age: 36
+            },
+            {
+                name: "Laura Thomas",
+                age: 32
+            },
+            {
+                name: "Michael Jackson",
+                age: 44
+            },
+            {
+                name: "Nancy Wilson",
+                age: 26
+            },
+            {
+                name: "Oscar Martinez",
+                age: 39
+            },
+            {
+                name: "Patricia Lee",
+                age: 34
+            },
+            {
+                name: "Quinn Harris",
+                age: 37
+            },
+            {
+                name: "Rachel Clark",
+                age: 40
+            },
+            {
+                name: "Samuel Wright",
+                age: 43
+            },
+            {
+                name: "Tina Turner",
+                age: 48
+            },
+            {
+                name: "Ulysses Grant",
+                age: 52
+            },
+            {
+                name: "Victoria Baker",
+                age: 29
+            },
+            {
+                name: "William Scott",
+                age: 35
+            },
+            {
+                name: "Xavier Adams",
+                age: 31
+            },
+            {
+                name: "Yolanda King",
+                age: 38
+            },
+            {
+                name: "Zachary Nelson",
+                age: 27
+            },
+            {
+                name: "Amy Carter",
+                age: 33
+            },
+            {
+                name: "Benjamin Hall",
+                age: 46
+            },
+            {
+                name: "Catherine Allen",
+                age: 24
+            },
+            {
+                name: "David Young",
+                age: 41
+            },
+            {
+                name: "Emily Walker",
+                age: 36
+            },
+            {
+                name: "Frank Robinson",
+                age: 39
+            },
+            {
+                name: "Grace White",
+                age: 28
+            },
+            {
+                name: "Henry Lewis",
+                age: 47
+            },
+            {
+                name: "Isabella Hill",
+                age: 32
+            },
+            {
+                name: "Jack Martin",
+                age: 34
+            },
+            {
+                name: "Katherine Garcia",
+                age: 30
+            },
+            {
+                name: "Louis Rodriguez",
+                age: 45
+            },
+            {
+                name: "Margaret Martinez",
+                age: 37
+            },
+            {
+                name: "Nathan Hernandez",
+                age: 26
+            },
+            {
+                name: "Olivia Lopez",
+                age: 29
+            },
+            {
+                name: "Peter Gonzalez",
+                age: 43
+            },
+            {
+                name: "Quincy Wilson",
+                age: 38
+            },
+            {
+                name: "Rebecca Anderson",
+                age: 31
+            },
+            {
+                name: "Steven Thomas",
+                age: 44
+            },
+            {
+                name: "Teresa Taylor",
+                age: 35
+            },
+            {
+                name: "Ursula Moore",
+                age: 40
+            },
+            {
+                name: "Victor Jackson",
+                age: 42
             }
         ]
     },

package/dist/src/components/data-table.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/data-table.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-vite\";\nimport { DataTable, type DataTableProps } from \"./data-table\";\n\nconst meta: Meta<typeof DataTable> = {\n\ttitle: \"Component/Data table\",\n\tcomponent: DataTable,\n\ttags: [\"autodocs\"],\n};\n\nexport default meta;\ntype Story = StoryObj<typeof DataTable>;\n\nfunction DataTableWrapper<TData, TValue>({\n\tcolumns,\n\tdata,\n}: DataTableProps<TData, TValue>) {\n\treturn <DataTable columns={columns} data={data} />;\n}\n\nexport const Default: Story = {\n\targs: {\n\t\tcolumns: [\n\t\t\t{\n\t\t\t\theader: \"Name\",\n\t\t\t\taccessorKey: \"name\",\n\t\t\t},\n\t\t\t{\n\t\t\t\theader: \"Age\",\n\t\t\t\taccessorKey: \"age\",\n\t\t\t},\n\t\t],\n\t\tdata: [{ name: \"John Doe\", age: 30 }],\n\t},\n\tparameters: {\n\t\tlayout: \"fullscreen\",\n\t},\n\trender: (args) => <DataTableWrapper {...args} />,\n};\n"],"names":["DataTable","meta","title","component","tags","DataTableWrapper","columns","data","Default","args","header","accessorKey","name","age","parameters","layout","render"],"mappings":";AACA,SAASA,SAAS,QAA6B,kBAAe;AAE9D,MAAMC,OAA+B;IACpCC,OAAO;IACPC,WAAWH;IACXI,MAAM;QAAC;KAAW;AACnB;AAEA,eAAeH,KAAK;AAGpB,SAASI,iBAAgC,EACxCC,OAAO,EACPC,IAAI,EAC2B;IAC/B,qBAAO,KAACP;QAAUM,SAASA;QAASC,MAAMA;;AAC3C;AAEA,OAAO,MAAMC,UAAiB;IAC7BC,MAAM;QACLH,SAAS;YACR;gBACCI,QAAQ;gBACRC,aAAa;YACd;YACA;gBACCD,QAAQ;gBACRC,aAAa;YACd;SACA;QACDJ,MAAM;YAAC;gBAAEK,MAAM;gBAAYC,KAAK;YAAG;SAAE;IACtC;IACAC,YAAY;QACXC,QAAQ;IACT;IACAC,QAAQ,CAACP,qBAAS,KAACJ;YAAkB,GAAGI,IAAI;;AAC7C,EAAE"}
+{"version":3,"sources":["../../../src/components/data-table.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-vite\";\nimport { DataTable, type DataTableProps } from \"./data-table\";\n\nconst meta: Meta<typeof DataTable> = {\n\ttitle: \"Component/Data table\",\n\tcomponent: DataTable,\n\ttags: [\"autodocs\"],\n};\n\nexport default meta;\ntype Story = StoryObj<typeof DataTable>;\n\nfunction DataTableWrapper<TData, TValue>({\n\tcolumns,\n\tdata,\n}: DataTableProps<TData, TValue>) {\n\treturn <DataTable columns={columns} data={data} />;\n}\n\nexport const Default: Story = {\n\targs: {\n\t\tcolumns: [\n\t\t\t{\n\t\t\t\theader: \"Name\",\n\t\t\t\taccessorKey: \"name\",\n\t\t\t},\n\t\t\t{\n\t\t\t\theader: \"Age\",\n\t\t\t\taccessorKey: \"age\",\n\t\t\t},\n\t\t],\n\t\tdata: [\n\t\t\t{ name: \"John Doe\", age: 30 },\n\t\t\t{ name: \"Jane Smith\", age: 25 },\n\t\t\t{ name: \"Bob Johnson\", age: 42 },\n\t\t\t{ name: \"Alice Williams\", age: 35 },\n\t\t\t{ name: \"Charlie Brown\", age: 28 },\n\t\t\t{ name: \"Diana Prince\", age: 31 },\n\t\t\t{ name: \"Edward Norton\", age: 45 },\n\t\t\t{ name: \"Fiona Green\", age: 27 },\n\t\t\t{ name: \"George Miller\", age: 38 },\n\t\t\t{ name: \"Hannah Davis\", age: 33 },\n\t\t\t{ name: \"Ian Moore\", age: 29 },\n\t\t\t{ name: \"Julia Taylor\", age: 41 },\n\t\t\t{ name: \"Kevin Anderson\", age: 36 },\n\t\t\t{ name: \"Laura Thomas\", age: 32 },\n\t\t\t{ name: \"Michael Jackson\", age: 44 },\n\t\t\t{ name: \"Nancy Wilson\", age: 26 },\n\t\t\t{ name: \"Oscar Martinez\", age: 39 },\n\t\t\t{ name: \"Patricia Lee\", age: 34 },\n\t\t\t{ name: \"Quinn Harris\", age: 37 },\n\t\t\t{ name: \"Rachel Clark\", age: 40 },\n\t\t\t{ name: \"Samuel Wright\", age: 43 },\n\t\t\t{ name: \"Tina Turner\", age: 48 },\n\t\t\t{ name: \"Ulysses Grant\", age: 52 },\n\t\t\t{ name: \"Victoria Baker\", age: 29 },\n\t\t\t{ name: \"William Scott\", age: 35 },\n\t\t\t{ name: \"Xavier Adams\", age: 31 },\n\t\t\t{ name: \"Yolanda King\", age: 38 },\n\t\t\t{ name: \"Zachary Nelson\", age: 27 },\n\t\t\t{ name: \"Amy Carter\", age: 33 },\n\t\t\t{ name: \"Benjamin Hall\", age: 46 },\n\t\t\t{ name: \"Catherine Allen\", age: 24 },\n\t\t\t{ name: \"David Young\", age: 41 },\n\t\t\t{ name: \"Emily Walker\", age: 36 },\n\t\t\t{ name: \"Frank Robinson\", age: 39 },\n\t\t\t{ name: \"Grace White\", age: 28 },\n\t\t\t{ name: \"Henry Lewis\", age: 47 },\n\t\t\t{ name: \"Isabella Hill\", age: 32 },\n\t\t\t{ name: \"Jack Martin\", age: 34 },\n\t\t\t{ name: \"Katherine Garcia\", age: 30 },\n\t\t\t{ name: \"Louis Rodriguez\", age: 45 },\n\t\t\t{ name: \"Margaret Martinez\", age: 37 },\n\t\t\t{ name: \"Nathan Hernandez\", age: 26 },\n\t\t\t{ name: \"Olivia Lopez\", age: 29 },\n\t\t\t{ name: \"Peter Gonzalez\", age: 43 },\n\t\t\t{ name: \"Quincy Wilson\", age: 38 },\n\t\t\t{ name: \"Rebecca Anderson\", age: 31 },\n\t\t\t{ name: \"Steven Thomas\", age: 44 },\n\t\t\t{ name: \"Teresa Taylor\", age: 35 },\n\t\t\t{ name: \"Ursula Moore\", age: 40 },\n\t\t\t{ name: \"Victor Jackson\", age: 42 },\n\t\t],\n\t},\n\tparameters: {\n\t\tlayout: \"fullscreen\",\n\t},\n\trender: (args) => <DataTableWrapper {...args} />,\n};\n"],"names":["DataTable","meta","title","component","tags","DataTableWrapper","columns","data","Default","args","header","accessorKey","name","age","parameters","layout","render"],"mappings":"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"}

package/dist/src/components/fhir-structure-view.d.ts

@@ -4,15 +4,15 @@ type PackageSpec = {
     version: string;
 };
 type Coordinate = {
-    id: string;
-    packageSpec: PackageSpec;
-    "package-spec": PackageSpec;
-    label: string;
+    id?: string;
+    packageSpec?: PackageSpec;
+    "package-spec"?: PackageSpec;
+    label?: string;
 };
 type FhirStructure = {
     type?: string;
-    min?: string;
-    max?: string;
+    min?: string | number;
+    max?: string | number;
     lastNode?: boolean;
     isSummary?: boolean;
     isModifier?: boolean;
@@ -27,8 +27,8 @@ type FhirStructure = {
     };
     vsCoordinate?: Coordinate;
 };
-declare const FhirStructureView: ({ tree, }: {
+declare function FhirStructureView({ tree, }: {
     tree: Record<string, TreeViewItem<FhirStructure>>;
-}) => import("react/jsx-runtime").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export { FhirStructureView, type FhirStructure };
 //# sourceMappingURL=fhir-structure-view.d.ts.map

package/dist/src/components/fhir-structure-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fhir-structure-view.d.ts","sourceRoot":"","sources":["../../../src/components/fhir-structure-view.tsx"],"names":[],"mappings":"AASA,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAE1D,KAAK,WAAW,GAAG;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,KAAK,UAAU,GAAG;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,WAAW,CAAC;IACzB,cAAc,EAAE,WAAW,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,aAAa,GAAG;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB,CAAC,EAAE,UAAU,CAAC;IACjC,OAAO,CAAC,EAAE;QACT,QAAQ,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,YAAY,CAAC,EAAE,UAAU,CAAC;CAC1B,CAAC;AA4JF,QAAA,MAAM,iBAAiB,GAAI,WAExB;IACF,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,aAAa,CAAC,CAAC,CAAC;CAClD,4CA4BA,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,KAAK,aAAa,EAAE,CAAC"}
+{"version":3,"file":"fhir-structure-view.d.ts","sourceRoot":"","sources":["../../../src/components/fhir-structure-view.tsx"],"names":[],"mappings":"AASA,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAE1D,KAAK,WAAW,GAAG;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,KAAK,UAAU,GAAG;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,aAAa,GAAG;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB,CAAC,EAAE,UAAU,CAAC;IACjC,OAAO,CAAC,EAAE;QACT,QAAQ,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,YAAY,CAAC,EAAE,UAAU,CAAC;CAC1B,CAAC;AA4JF,iBAAS,iBAAiB,CAAC,EAC1B,IAAI,GACJ,EAAE;IACF,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,aAAa,CAAC,CAAC,CAAC;CAClD,2CA4BA;AAED,OAAO,EAAE,iBAAiB,EAAE,KAAK,aAAa,EAAE,CAAC"}

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

@@ -4,7 +4,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "../shadcn/components/ui
 import { cn } from "../shadcn/lib/utils.js";
 import * as CustomIcon from "../icons.js";
 import { TreeView } from "./tree-view.js";
-const FiledIcon = (item)=>{
+function FiledIcon(item) {
     const filedType = item.getItemData()?.meta?.type;
     switch(filedType){
         case "Resource":
@@ -39,9 +39,9 @@ const FiledIcon = (item)=>{
         default:
             return /*#__PURE__*/ _jsx(CustomIcon.ComplexTypeIcon, {});
     }
-};
+}
 const customItemFieldNameClass = cn("flex", "items-center", "truncate", "gap-2", "min-w-[calc(260px-var(--tree-padding))]", "w-[calc(260px-var(--tree-padding))]", "in-data-[folder=true]:w-[calc(260px-var(--tree-padding))]", "in-data-[folder=true]:min-w-[calc(260px-var(--tree-padding))]");
-const customItemView = (item)=>{
+function customItemView(item) {
     const fieldName = item.getItemData()?.name;
     const cardinalityMin = item.getItemData()?.meta?.min;
     const cardinalityMax = item.getItemData()?.meta?.max;
@@ -56,7 +56,7 @@ const customItemView = (item)=>{
     const binding = item.getItemData()?.meta?.binding;
     const vsCoordinate = item.getItemData()?.meta?.vsCoordinate;
     return /*#__PURE__*/ _jsxs("div", {
-        className: "flex items-start gap-2",
+        className: "flex items-start gap-2 text-xs",
         children: [
             /*#__PURE__*/ _jsxs("div", {
                 className: customItemFieldNameClass,
@@ -173,21 +173,21 @@ const customItemView = (item)=>{
             })
         ]
     });
-};
-const FhirStructureView = ({ tree })=>{
+}
+function FhirStructureView({ tree }) {
     const expandedItemIds = React.useMemo(()=>{
         return Object.keys(tree ?? {});
     }, [
         tree
     ]);
     return /*#__PURE__*/ _jsxs("div", {
-        className: "flex flex-col h-full",
+        className: "h-fit w-fit min-h-0 min-w-0",
         children: [
             /*#__PURE__*/ _jsxs("div", {
-                className: "flex items-center gap-2 font-semibold text-text-secondary border-b pb-2 bg-bg-primary sticky top-0 z-10",
+                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",
                 children: [
                     /*#__PURE__*/ _jsx("div", {
-                        className: "min-w-[260px] w-[260px] ml-9",
+                        className: "min-w-[260px] w-[260px] ml-4",
                         children: "Name"
                     }),
                     /*#__PURE__*/ _jsx("div", {
@@ -208,22 +208,21 @@ const FhirStructureView = ({ tree })=>{
                     })
                 ]
             }),
-            /*#__PURE__*/ _jsx("div", {
-                className: "flex-1 overflow-auto",
-                children: /*#__PURE__*/ _jsx(TreeView, {
-                    hideChevron: true,
-                    horizontalLines: true,
-                    disableHover: true,
-                    zebra: true,
-                    rootItemId: "root",
-                    items: tree,
-                    customItemView: customItemView,
-                    expandedItemIds: expandedItemIds
-                })
+            /*#__PURE__*/ _jsx(TreeView, {
+                focusedItem: null,
+                onFocusedItemChange: ()=>{},
+                hideChevron: true,
+                horizontalLines: true,
+                disableHover: true,
+                zebra: true,
+                rootItemId: "root",
+                items: tree,
+                customItemView: customItemView,
+                defaultExpandedItems: expandedItemIds
             })
         ]
     });
-};
+}
 export { FhirStructureView };
 
 //# sourceMappingURL=fhir-structure-view.js.map