@raystack/apsara 0.21.1 → 0.23.0

package/dist/table/DataTableFilterOptions.cjs

@@ -0,0 +1,26 @@
+'use strict';
+
+var jsxRuntime = require('../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
+var reactIcons_esm = require('../node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.cjs');
+var button = require('../button/button.cjs');
+var dropdownMenu = require('../dropdown-menu/dropdown-menu.cjs');
+var flex = require('../flex/flex.cjs');
+var useTable = require('./hooks/useTable.cjs');
+
+function DataTableFilterOptions({ children, ...props }) {
+    const { table, filteredColumns, addFilterColumn, isLoading } = useTable.useTable();
+    const availableColumns = table
+        .getAllColumns()
+        .filter((column) => typeof column.accessorFn !== "undefined" &&
+        column.getCanHide() &&
+        column.getCanFilter())
+        .filter((column) => !filteredColumns.includes(column.id));
+    return (jsxRuntime.jsxRuntimeExports.jsxs(dropdownMenu.DropdownMenu, { children: [jsxRuntime.jsxRuntimeExports.jsx(dropdownMenu.DropdownMenu.Trigger, { asChild: true, disabled: isLoading, children: jsxRuntime.jsxRuntimeExports.jsx(button.Button, { variant: "ghost", ...props, children: children || (jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { gap: "small", align: "center", justify: "center", children: [jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.PlusIcon, { width: 12, height: "12" }), " Filter"] })) }) }), availableColumns.length ? (jsxRuntime.jsxRuntimeExports.jsxs(dropdownMenu.DropdownMenu.Content, { align: "end", className: "w-[150px]", children: [jsxRuntime.jsxRuntimeExports.jsx(dropdownMenu.DropdownMenu.Label, { children: "Filter column" }), jsxRuntime.jsxRuntimeExports.jsx(dropdownMenu.DropdownMenu.Separator, {}), availableColumns.map((column) => {
+                        const columnHeader = column?.columnDef?.header;
+                        const columnName = (typeof columnHeader === "string" && columnHeader) || column.id;
+                        return (jsxRuntime.jsxRuntimeExports.jsx(dropdownMenu.DropdownMenu.Item, { onSelect: () => addFilterColumn(column.id), children: columnName }, column.id));
+                    })] })) : null] }));
+}
+
+exports.DataTableFilterOptions = DataTableFilterOptions;
+//# sourceMappingURL=DataTableFilterOptions.cjs.map

package/dist/table/DataTableFilterOptions.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableFilterOptions.cjs","sources":["../../table/DataTableFilterOptions.tsx"],"sourcesContent":["import { PlusIcon } from \"@radix-ui/react-icons\";\nimport { ComponentProps } from \"react\";\nimport { Button } from \"~/button\";\nimport { DropdownMenu } from \"~/dropdown-menu\";\nimport { Flex } from \"~/flex\";\nimport { useTable } from \"./hooks/useTable\";\n\ntype DataTableFilterOptionsProps = ComponentProps<typeof Button>;\nexport function DataTableFilterOptions({\n  children,\n  ...props\n}: DataTableFilterOptionsProps) {\n  const { table, filteredColumns, addFilterColumn, isLoading } = useTable();\n  const availableColumns = table\n    .getAllColumns()\n    .filter(\n      (column) =>\n        typeof column.accessorFn !== \"undefined\" &&\n        column.getCanHide() &&\n        column.getCanFilter()\n    )\n    .filter((column) => !filteredColumns.includes(column.id));\n\n  return (\n    <DropdownMenu>\n      <DropdownMenu.Trigger asChild disabled={isLoading}>\n        <Button variant=\"ghost\" {...props}>\n          {children || (\n            <Flex gap=\"small\" align=\"center\" justify=\"center\">\n              <PlusIcon width={12} height=\"12\" /> Filter\n            </Flex>\n          )}\n        </Button>\n      </DropdownMenu.Trigger>\n\n      {availableColumns.length ? (\n        <DropdownMenu.Content align=\"end\" className=\"w-[150px]\">\n          <DropdownMenu.Label>Filter column</DropdownMenu.Label>\n          <DropdownMenu.Separator />\n          {availableColumns.map((column) => {\n            const columnHeader = column?.columnDef?.header;\n            const columnName =\n              (typeof columnHeader === \"string\" && columnHeader) || column.id;\n            return (\n              <DropdownMenu.Item\n                key={column.id}\n                onSelect={() => addFilterColumn(column.id)}\n              >\n                {columnName}\n              </DropdownMenu.Item>\n            );\n          })}\n        </DropdownMenu.Content>\n      ) : null}\n    </DropdownMenu>\n  );\n}\n"],"names":["useTable","_jsxs","DropdownMenu","_jsx","Button","Flex","PlusIcon"],"mappings":";;;;;;;;;AAQM,SAAU,sBAAsB,CAAC,EACrC,QAAQ,EACR,GAAG,KAAK,EACoB,EAAA;AAC5B,IAAA,MAAM,EAAE,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,SAAS,EAAE,GAAGA,iBAAQ,EAAE,CAAC;IAC1E,MAAM,gBAAgB,GAAG,KAAK;AAC3B,SAAA,aAAa,EAAE;SACf,MAAM,CACL,CAAC,MAAM,KACL,OAAO,MAAM,CAAC,UAAU,KAAK,WAAW;QACxC,MAAM,CAAC,UAAU,EAAE;QACnB,MAAM,CAAC,YAAY,EAAE,CACxB;AACA,SAAA,MAAM,CAAC,CAAC,MAAM,KAAK,CAAC,eAAe,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC;IAE5D,QACEC,kCAACC,yBAAY,EAAA,EAAA,QAAA,EAAA,CACXC,iCAACD,yBAAY,CAAC,OAAO,EAAC,EAAA,OAAO,QAAC,QAAQ,EAAE,SAAS,EAC/C,QAAA,EAAAC,gCAAA,CAACC,aAAM,EAAC,EAAA,OAAO,EAAC,OAAO,EAAK,GAAA,KAAK,YAC9B,QAAQ,KACPH,iCAAC,CAAAI,SAAI,IAAC,GAAG,EAAC,OAAO,EAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,QAAQ,aAC/CF,gCAAC,CAAAG,uBAAQ,EAAC,EAAA,KAAK,EAAE,EAAE,EAAE,MAAM,EAAC,IAAI,EAAG,CAAA,EAAA,SAAA,CAAA,EAAA,CAC9B,CACR,EACM,CAAA,EAAA,CACY,EAEtB,gBAAgB,CAAC,MAAM,IACtBL,iCAAA,CAACC,yBAAY,CAAC,OAAO,EAAC,EAAA,KAAK,EAAC,KAAK,EAAC,SAAS,EAAC,WAAW,EACrD,QAAA,EAAA,CAAAC,gCAAA,CAACD,yBAAY,CAAC,KAAK,EAAmC,EAAA,QAAA,EAAA,eAAA,EAAA,CAAA,EACtDC,gCAAC,CAAAD,yBAAY,CAAC,SAAS,EAAA,EAAA,CAAG,EACzB,gBAAgB,CAAC,GAAG,CAAC,CAAC,MAAM,KAAI;AAC/B,wBAAA,MAAM,YAAY,GAAG,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC;AAC/C,wBAAA,MAAM,UAAU,GACd,CAAC,OAAO,YAAY,KAAK,QAAQ,IAAI,YAAY,KAAK,MAAM,CAAC,EAAE,CAAC;wBAClE,QACEC,gCAAC,CAAAD,yBAAY,CAAC,IAAI,IAEhB,QAAQ,EAAE,MAAM,eAAe,CAAC,MAAM,CAAC,EAAE,CAAC,EAEzC,QAAA,EAAA,UAAU,EAHN,EAAA,MAAM,CAAC,EAAE,CAII,EACpB;qBACH,CAAC,IACmB,IACrB,IAAI,CACK,EAAA,CAAA,EACf;AACJ;;;;"}

package/dist/table/DataTableFilterOptions.js

@@ -0,0 +1,24 @@
+import { j as jsxRuntimeExports } from '../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
+import { PlusIcon } from '../node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
+import { Button } from '../button/button.js';
+import { DropdownMenu } from '../dropdown-menu/dropdown-menu.js';
+import { Flex } from '../flex/flex.js';
+import { useTable } from './hooks/useTable.js';
+
+function DataTableFilterOptions({ children, ...props }) {
+    const { table, filteredColumns, addFilterColumn, isLoading } = useTable();
+    const availableColumns = table
+        .getAllColumns()
+        .filter((column) => typeof column.accessorFn !== "undefined" &&
+        column.getCanHide() &&
+        column.getCanFilter())
+        .filter((column) => !filteredColumns.includes(column.id));
+    return (jsxRuntimeExports.jsxs(DropdownMenu, { children: [jsxRuntimeExports.jsx(DropdownMenu.Trigger, { asChild: true, disabled: isLoading, children: jsxRuntimeExports.jsx(Button, { variant: "ghost", ...props, children: children || (jsxRuntimeExports.jsxs(Flex, { gap: "small", align: "center", justify: "center", children: [jsxRuntimeExports.jsx(PlusIcon, { width: 12, height: "12" }), " Filter"] })) }) }), availableColumns.length ? (jsxRuntimeExports.jsxs(DropdownMenu.Content, { align: "end", className: "w-[150px]", children: [jsxRuntimeExports.jsx(DropdownMenu.Label, { children: "Filter column" }), jsxRuntimeExports.jsx(DropdownMenu.Separator, {}), availableColumns.map((column) => {
+                        const columnHeader = column?.columnDef?.header;
+                        const columnName = (typeof columnHeader === "string" && columnHeader) || column.id;
+                        return (jsxRuntimeExports.jsx(DropdownMenu.Item, { onSelect: () => addFilterColumn(column.id), children: columnName }, column.id));
+                    })] })) : null] }));
+}
+
+export { DataTableFilterOptions };
+//# sourceMappingURL=DataTableFilterOptions.js.map

package/dist/table/DataTableFilterOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableFilterOptions.js","sources":["../../table/DataTableFilterOptions.tsx"],"sourcesContent":["import { PlusIcon } from \"@radix-ui/react-icons\";\nimport { ComponentProps } from \"react\";\nimport { Button } from \"~/button\";\nimport { DropdownMenu } from \"~/dropdown-menu\";\nimport { Flex } from \"~/flex\";\nimport { useTable } from \"./hooks/useTable\";\n\ntype DataTableFilterOptionsProps = ComponentProps<typeof Button>;\nexport function DataTableFilterOptions({\n  children,\n  ...props\n}: DataTableFilterOptionsProps) {\n  const { table, filteredColumns, addFilterColumn, isLoading } = useTable();\n  const availableColumns = table\n    .getAllColumns()\n    .filter(\n      (column) =>\n        typeof column.accessorFn !== \"undefined\" &&\n        column.getCanHide() &&\n        column.getCanFilter()\n    )\n    .filter((column) => !filteredColumns.includes(column.id));\n\n  return (\n    <DropdownMenu>\n      <DropdownMenu.Trigger asChild disabled={isLoading}>\n        <Button variant=\"ghost\" {...props}>\n          {children || (\n            <Flex gap=\"small\" align=\"center\" justify=\"center\">\n              <PlusIcon width={12} height=\"12\" /> Filter\n            </Flex>\n          )}\n        </Button>\n      </DropdownMenu.Trigger>\n\n      {availableColumns.length ? (\n        <DropdownMenu.Content align=\"end\" className=\"w-[150px]\">\n          <DropdownMenu.Label>Filter column</DropdownMenu.Label>\n          <DropdownMenu.Separator />\n          {availableColumns.map((column) => {\n            const columnHeader = column?.columnDef?.header;\n            const columnName =\n              (typeof columnHeader === \"string\" && columnHeader) || column.id;\n            return (\n              <DropdownMenu.Item\n                key={column.id}\n                onSelect={() => addFilterColumn(column.id)}\n              >\n                {columnName}\n              </DropdownMenu.Item>\n            );\n          })}\n        </DropdownMenu.Content>\n      ) : null}\n    </DropdownMenu>\n  );\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAQM,SAAU,sBAAsB,CAAC,EACrC,QAAQ,EACR,GAAG,KAAK,EACoB,EAAA;AAC5B,IAAA,MAAM,EAAE,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,SAAS,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC1E,MAAM,gBAAgB,GAAG,KAAK;AAC3B,SAAA,aAAa,EAAE;SACf,MAAM,CACL,CAAC,MAAM,KACL,OAAO,MAAM,CAAC,UAAU,KAAK,WAAW;QACxC,MAAM,CAAC,UAAU,EAAE;QACnB,MAAM,CAAC,YAAY,EAAE,CACxB;AACA,SAAA,MAAM,CAAC,CAAC,MAAM,KAAK,CAAC,eAAe,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC;IAE5D,QACEA,uBAAC,YAAY,EAAA,EAAA,QAAA,EAAA,CACXC,sBAAC,YAAY,CAAC,OAAO,EAAC,EAAA,OAAO,QAAC,QAAQ,EAAE,SAAS,EAC/C,QAAA,EAAAA,qBAAA,CAAC,MAAM,EAAC,EAAA,OAAO,EAAC,OAAO,EAAK,GAAA,KAAK,YAC9B,QAAQ,KACPD,sBAAC,CAAA,IAAI,IAAC,GAAG,EAAC,OAAO,EAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,QAAQ,aAC/CC,qBAAC,CAAA,QAAQ,EAAC,EAAA,KAAK,EAAE,EAAE,EAAE,MAAM,EAAC,IAAI,EAAG,CAAA,EAAA,SAAA,CAAA,EAAA,CAC9B,CACR,EACM,CAAA,EAAA,CACY,EAEtB,gBAAgB,CAAC,MAAM,IACtBD,sBAAA,CAAC,YAAY,CAAC,OAAO,EAAC,EAAA,KAAK,EAAC,KAAK,EAAC,SAAS,EAAC,WAAW,EACrD,QAAA,EAAA,CAAAC,qBAAA,CAAC,YAAY,CAAC,KAAK,EAAmC,EAAA,QAAA,EAAA,eAAA,EAAA,CAAA,EACtDA,qBAAC,CAAA,YAAY,CAAC,SAAS,EAAA,EAAA,CAAG,EACzB,gBAAgB,CAAC,GAAG,CAAC,CAAC,MAAM,KAAI;AAC/B,wBAAA,MAAM,YAAY,GAAG,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC;AAC/C,wBAAA,MAAM,UAAU,GACd,CAAC,OAAO,YAAY,KAAK,QAAQ,IAAI,YAAY,KAAK,MAAM,CAAC,EAAE,CAAC;wBAClE,QACEA,qBAAC,CAAA,YAAY,CAAC,IAAI,IAEhB,QAAQ,EAAE,MAAM,eAAe,CAAC,MAAM,CAAC,EAAE,CAAC,EAEzC,QAAA,EAAA,UAAU,EAHN,EAAA,MAAM,CAAC,EAAE,CAII,EACpB;qBACH,CAAC,IACmB,IACrB,IAAI,CACK,EAAA,CAAA,EACf;AACJ;;;;"}

package/dist/table/DataTableFooter.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+var jsxRuntime = require('../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
+var flex = require('../flex/flex.cjs');
+var datatable_module = require('./datatable.module.css.cjs');
+
+function DataTableFooter({ children, }) {
+    return (jsxRuntime.jsxRuntimeExports.jsx(flex.Flex, { direction: "column", className: datatable_module.default.toolbar, children: children }));
+}
+
+exports.DataTableFooter = DataTableFooter;
+//# sourceMappingURL=DataTableFooter.cjs.map

package/dist/table/DataTableFooter.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableFooter.cjs","sources":["../../table/DataTableFooter.tsx"],"sourcesContent":["import { VariantProps } from \"class-variance-authority\";\nimport type { ReactNode } from \"react\";\nimport { Flex } from \"~/flex\";\n\nimport styles from \"./datatable.module.css\";\n\ntype DataTableFooterProps<TData> = VariantProps<typeof Flex> & {\n  children?: ReactNode;\n};\n\nexport function DataTableFooter<TData>({\n  children,\n}: DataTableFooterProps<TData>) {\n  return (\n    <Flex direction=\"column\" className={styles.toolbar}>\n      {children}\n    </Flex>\n  );\n}\n"],"names":["_jsx","Flex","styles"],"mappings":";;;;;;AAUgB,SAAA,eAAe,CAAQ,EACrC,QAAQ,GACoB,EAAA;AAC5B,IAAA,QACEA,gCAAC,CAAAC,SAAI,EAAC,EAAA,SAAS,EAAC,QAAQ,EAAC,SAAS,EAAEC,wBAAM,CAAC,OAAO,YAC/C,QAAQ,EAAA,CACJ,EACP;AACJ;;;;"}

package/dist/table/DataTableFooter.js

@@ -0,0 +1,10 @@
+import { j as jsxRuntimeExports } from '../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
+import { Flex } from '../flex/flex.js';
+import styles from './datatable.module.css.js';
+
+function DataTableFooter({ children, }) {
+    return (jsxRuntimeExports.jsx(Flex, { direction: "column", className: styles.toolbar, children: children }));
+}
+
+export { DataTableFooter };
+//# sourceMappingURL=DataTableFooter.js.map

package/dist/table/DataTableFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableFooter.js","sources":["../../table/DataTableFooter.tsx"],"sourcesContent":["import { VariantProps } from \"class-variance-authority\";\nimport type { ReactNode } from \"react\";\nimport { Flex } from \"~/flex\";\n\nimport styles from \"./datatable.module.css\";\n\ntype DataTableFooterProps<TData> = VariantProps<typeof Flex> & {\n  children?: ReactNode;\n};\n\nexport function DataTableFooter<TData>({\n  children,\n}: DataTableFooterProps<TData>) {\n  return (\n    <Flex direction=\"column\" className={styles.toolbar}>\n      {children}\n    </Flex>\n  );\n}\n"],"names":["_jsx"],"mappings":";;;;AAUgB,SAAA,eAAe,CAAQ,EACrC,QAAQ,GACoB,EAAA;AAC5B,IAAA,QACEA,qBAAC,CAAA,IAAI,EAAC,EAAA,SAAS,EAAC,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,OAAO,YAC/C,QAAQ,EAAA,CACJ,EACP;AACJ;;;;"}

package/dist/table/DataTableGloabalSearch.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+var jsxRuntime = require('../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
+var reactIcons_esm = require('../node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.cjs');
+var textfield = require('../textfield/textfield.cjs');
+var useTable = require('./hooks/useTable.cjs');
+
+function DataTableGloabalSearch(props) {
+    const { table, globalFilter, onGlobalFilterChange } = useTable.useTable();
+    return (jsxRuntime.jsxRuntimeExports.jsx(textfield.TextField
+    // @ts-ignore
+    , { 
+        // @ts-ignore
+        leading: jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.MagnifyingGlassIcon, { style: { color: "var(--foreground-base)" } }), placeholder: "Filter tasks...", value: globalFilter ?? "", onChange: (event) => onGlobalFilterChange(String(event.target.value)), ...props }));
+}
+
+exports.DataTableGloabalSearch = DataTableGloabalSearch;
+//# sourceMappingURL=DataTableGloabalSearch.cjs.map

package/dist/table/DataTableGloabalSearch.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableGloabalSearch.cjs","sources":["../../table/DataTableGloabalSearch.tsx"],"sourcesContent":["import { MagnifyingGlassIcon } from \"@radix-ui/react-icons\";\nimport { ComponentProps } from \"react\";\nimport { TextField } from \"~/textfield\";\nimport { useTable } from \"./hooks/useTable\";\n\ntype DataTableGloabalSearchProps = ComponentProps<typeof TextField>;\nexport function DataTableGloabalSearch(props: DataTableGloabalSearchProps) {\n  const { table, globalFilter, onGlobalFilterChange } = useTable();\n\n  return (\n    <TextField\n      // @ts-ignore\n      leading={\n        <MagnifyingGlassIcon style={{ color: \"var(--foreground-base)\" }} />\n      }\n      placeholder=\"Filter tasks...\"\n      value={globalFilter ?? \"\"}\n      onChange={(event) => onGlobalFilterChange(String(event.target.value))}\n      {...props}\n    />\n  );\n}\n"],"names":["useTable","_jsx","TextField","MagnifyingGlassIcon"],"mappings":";;;;;;;AAMM,SAAU,sBAAsB,CAAC,KAAkC,EAAA;IACvE,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,oBAAoB,EAAE,GAAGA,iBAAQ,EAAE,CAAC;IAEjE,QACEC,iCAACC,mBAAS;;;;QAER,OAAO,EACLD,iCAACE,kCAAmB,EAAA,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,wBAAwB,EAAE,EAAI,CAAA,EAErE,WAAW,EAAC,iBAAiB,EAC7B,KAAK,EAAE,YAAY,IAAI,EAAE,EACzB,QAAQ,EAAE,CAAC,KAAK,KAAK,oBAAoB,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EACjE,GAAA,KAAK,EACT,CAAA,EACF;AACJ;;;;"}

package/dist/table/DataTableGloabalSearch.js

@@ -0,0 +1,16 @@
+import { j as jsxRuntimeExports } from '../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
+import { MagnifyingGlassIcon } from '../node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
+import { TextField } from '../textfield/textfield.js';
+import { useTable } from './hooks/useTable.js';
+
+function DataTableGloabalSearch(props) {
+    const { table, globalFilter, onGlobalFilterChange } = useTable();
+    return (jsxRuntimeExports.jsx(TextField
+    // @ts-ignore
+    , { 
+        // @ts-ignore
+        leading: jsxRuntimeExports.jsx(MagnifyingGlassIcon, { style: { color: "var(--foreground-base)" } }), placeholder: "Filter tasks...", value: globalFilter ?? "", onChange: (event) => onGlobalFilterChange(String(event.target.value)), ...props }));
+}
+
+export { DataTableGloabalSearch };
+//# sourceMappingURL=DataTableGloabalSearch.js.map

package/dist/table/DataTableGloabalSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableGloabalSearch.js","sources":["../../table/DataTableGloabalSearch.tsx"],"sourcesContent":["import { MagnifyingGlassIcon } from \"@radix-ui/react-icons\";\nimport { ComponentProps } from \"react\";\nimport { TextField } from \"~/textfield\";\nimport { useTable } from \"./hooks/useTable\";\n\ntype DataTableGloabalSearchProps = ComponentProps<typeof TextField>;\nexport function DataTableGloabalSearch(props: DataTableGloabalSearchProps) {\n  const { table, globalFilter, onGlobalFilterChange } = useTable();\n\n  return (\n    <TextField\n      // @ts-ignore\n      leading={\n        <MagnifyingGlassIcon style={{ color: \"var(--foreground-base)\" }} />\n      }\n      placeholder=\"Filter tasks...\"\n      value={globalFilter ?? \"\"}\n      onChange={(event) => onGlobalFilterChange(String(event.target.value))}\n      {...props}\n    />\n  );\n}\n"],"names":["_jsx"],"mappings":";;;;;AAMM,SAAU,sBAAsB,CAAC,KAAkC,EAAA;IACvE,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,oBAAoB,EAAE,GAAG,QAAQ,EAAE,CAAC;IAEjE,QACEA,sBAAC,SAAS;;;;QAER,OAAO,EACLA,sBAAC,mBAAmB,EAAA,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,wBAAwB,EAAE,EAAI,CAAA,EAErE,WAAW,EAAC,iBAAiB,EAC7B,KAAK,EAAE,YAAY,IAAI,EAAE,EACzB,QAAQ,EAAE,CAAC,KAAK,KAAK,oBAAoB,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EACjE,GAAA,KAAK,EACT,CAAA,EACF;AACJ;;;;"}

package/dist/table/DataTableToolbar.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+var jsxRuntime = require('../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
+var flex = require('../flex/flex.cjs');
+var datatable_module = require('./datatable.module.css.cjs');
+
+function DataTableToolbar({ children, ...props }) {
+    return (jsxRuntime.jsxRuntimeExports.jsx(flex.Flex, { direction: "column", className: datatable_module.default.toolbar, ...props, children: children }));
+}
+
+exports.DataTableToolbar = DataTableToolbar;
+//# sourceMappingURL=DataTableToolbar.cjs.map

package/dist/table/DataTableToolbar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableToolbar.cjs","sources":["../../table/DataTableToolbar.tsx"],"sourcesContent":["import { VariantProps } from \"class-variance-authority\";\nimport type { ReactNode } from \"react\";\nimport { Flex } from \"~/flex\";\n\nimport styles from \"./datatable.module.css\";\n\ntype DataTableToolbarProps<TData> = VariantProps<typeof Flex> & {\n  children?: ReactNode;\n};\n\nexport function DataTableToolbar<TData>({\n  children,\n  ...props\n}: DataTableToolbarProps<TData>) {\n  return (\n    <Flex direction=\"column\" className={styles.toolbar} {...props}>\n      {children}\n    </Flex>\n  );\n}\n"],"names":["_jsx","Flex","styles"],"mappings":";;;;;;AAUM,SAAU,gBAAgB,CAAQ,EACtC,QAAQ,EACR,GAAG,KAAK,EACqB,EAAA;AAC7B,IAAA,QACEA,gCAAC,CAAAC,SAAI,IAAC,SAAS,EAAC,QAAQ,EAAC,SAAS,EAAEC,wBAAM,CAAC,OAAO,EAAM,GAAA,KAAK,YAC1D,QAAQ,EAAA,CACJ,EACP;AACJ;;;;"}

package/dist/table/DataTableToolbar.js

@@ -0,0 +1,10 @@
+import { j as jsxRuntimeExports } from '../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
+import { Flex } from '../flex/flex.js';
+import styles from './datatable.module.css.js';
+
+function DataTableToolbar({ children, ...props }) {
+    return (jsxRuntimeExports.jsx(Flex, { direction: "column", className: styles.toolbar, ...props, children: children }));
+}
+
+export { DataTableToolbar };
+//# sourceMappingURL=DataTableToolbar.js.map

package/dist/table/DataTableToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableToolbar.js","sources":["../../table/DataTableToolbar.tsx"],"sourcesContent":["import { VariantProps } from \"class-variance-authority\";\nimport type { ReactNode } from \"react\";\nimport { Flex } from \"~/flex\";\n\nimport styles from \"./datatable.module.css\";\n\ntype DataTableToolbarProps<TData> = VariantProps<typeof Flex> & {\n  children?: ReactNode;\n};\n\nexport function DataTableToolbar<TData>({\n  children,\n  ...props\n}: DataTableToolbarProps<TData>) {\n  return (\n    <Flex direction=\"column\" className={styles.toolbar} {...props}>\n      {children}\n    </Flex>\n  );\n}\n"],"names":["_jsx"],"mappings":";;;;AAUM,SAAU,gBAAgB,CAAQ,EACtC,QAAQ,EACR,GAAG,KAAK,EACqB,EAAA;AAC7B,IAAA,QACEA,qBAAC,CAAA,IAAI,IAAC,SAAS,EAAC,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,OAAO,EAAM,GAAA,KAAK,YAC1D,QAAQ,EAAA,CACJ,EACP;AACJ;;;;"}

package/dist/table/DataTableViewOptions.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+var jsxRuntime = require('../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
+var reactIcons_esm = require('../node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.cjs');
+var button = require('../button/button.cjs');
+var checkbox = require('../checkbox/checkbox.cjs');
+var dropdownMenu = require('../dropdown-menu/dropdown-menu.cjs');
+var flex = require('../flex/flex.cjs');
+var useTable = require('./hooks/useTable.cjs');
+
+function DataTableViewOptions({ children, ...props }) {
+    const { table } = useTable.useTable();
+    return (jsxRuntime.jsxRuntimeExports.jsxs(dropdownMenu.DropdownMenu, { children: [jsxRuntime.jsxRuntimeExports.jsx(dropdownMenu.DropdownMenu.Trigger, { asChild: true, children: jsxRuntime.jsxRuntimeExports.jsx(button.Button, { variant: "ghost", ...props, children: children || (jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { gap: "small", align: "center", justify: "center", children: [jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.ColumnsIcon, { width: 12, height: "12" }), " View"] })) }) }), jsxRuntime.jsxRuntimeExports.jsxs(dropdownMenu.DropdownMenu.Content, { align: "end", className: "w-[150px]", children: [jsxRuntime.jsxRuntimeExports.jsx(dropdownMenu.DropdownMenu.Label, { children: "Toggle columns" }), jsxRuntime.jsxRuntimeExports.jsx(dropdownMenu.DropdownMenu.Separator, {}), jsxRuntime.jsxRuntimeExports.jsx(dropdownMenu.DropdownMenu.Item, { children: jsxRuntime.jsxRuntimeExports.jsx(checkbox.Checkbox, { checked: table.getIsAllColumnsVisible(), onCheckedChange: table.getToggleAllColumnsVisibilityHandler(), children: "Toggle All" }) }), table
+                        .getAllColumns()
+                        .filter((column) => typeof column.accessorFn !== "undefined" && column.getCanHide())
+                        .map((column) => {
+                        return (jsxRuntime.jsxRuntimeExports.jsx(dropdownMenu.DropdownMenu.Item, { children: jsxRuntime.jsxRuntimeExports.jsx(checkbox.Checkbox, { checked: column.getIsVisible(), onCheckedChange: (value) => column.toggleVisibility(!!value), children: column.id }, column.id) }, column.id));
+                    })] })] }));
+}
+
+exports.DataTableViewOptions = DataTableViewOptions;
+//# sourceMappingURL=DataTableViewOptions.cjs.map

package/dist/table/DataTableViewOptions.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableViewOptions.cjs","sources":["../../table/DataTableViewOptions.tsx"],"sourcesContent":["import { ColumnsIcon } from \"@radix-ui/react-icons\";\nimport { ComponentProps } from \"react\";\nimport { Button } from \"~/button\";\nimport { Checkbox } from \"~/checkbox\";\nimport { DropdownMenu } from \"~/dropdown-menu\";\nimport { Flex } from \"~/flex\";\nimport { useTable } from \"./hooks/useTable\";\n\ntype DataTableViewOptionsProps = ComponentProps<typeof Button>;\nexport function DataTableViewOptions({\n  children,\n  ...props\n}: DataTableViewOptionsProps) {\n  const { table } = useTable();\n\n  return (\n    <DropdownMenu>\n      <DropdownMenu.Trigger asChild>\n        <Button variant=\"ghost\" {...props}>\n          {children || (\n            <Flex gap=\"small\" align=\"center\" justify=\"center\">\n              <ColumnsIcon width={12} height=\"12\" /> View\n            </Flex>\n          )}\n        </Button>\n      </DropdownMenu.Trigger>\n\n      <DropdownMenu.Content align=\"end\" className=\"w-[150px]\">\n        <DropdownMenu.Label>Toggle columns</DropdownMenu.Label>\n        <DropdownMenu.Separator />\n        <DropdownMenu.Item>\n          <Checkbox\n            checked={table.getIsAllColumnsVisible()}\n            onCheckedChange={table.getToggleAllColumnsVisibilityHandler()}\n          >\n            Toggle All\n          </Checkbox>\n        </DropdownMenu.Item>\n        {table\n          .getAllColumns()\n          .filter(\n            (column) =>\n              typeof column.accessorFn !== \"undefined\" && column.getCanHide()\n          )\n          .map((column) => {\n            return (\n              <DropdownMenu.Item key={column.id}>\n                <Checkbox\n                  key={column.id}\n                  checked={column.getIsVisible()}\n                  onCheckedChange={(value) => column.toggleVisibility(!!value)}\n                >\n                  {column.id}\n                </Checkbox>\n              </DropdownMenu.Item>\n            );\n          })}\n      </DropdownMenu.Content>\n    </DropdownMenu>\n  );\n}\n"],"names":["useTable","_jsxs","DropdownMenu","_jsx","Button","Flex","ColumnsIcon","Checkbox"],"mappings":";;;;;;;;;;AASM,SAAU,oBAAoB,CAAC,EACnC,QAAQ,EACR,GAAG,KAAK,EACkB,EAAA;AAC1B,IAAA,MAAM,EAAE,KAAK,EAAE,GAAGA,iBAAQ,EAAE,CAAC;IAE7B,QACEC,kCAACC,yBAAY,EAAA,EAAA,QAAA,EAAA,CACXC,iCAACD,yBAAY,CAAC,OAAO,EAAA,EAAC,OAAO,EAAA,IAAA,EAAA,QAAA,EAC3BC,iCAACC,aAAM,EAAA,EAAC,OAAO,EAAC,OAAO,KAAK,KAAK,EAAA,QAAA,EAC9B,QAAQ,KACPH,iCAAA,CAACI,SAAI,EAAC,EAAA,GAAG,EAAC,OAAO,EAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,QAAQ,aAC/CF,gCAAC,CAAAG,0BAAW,EAAC,EAAA,KAAK,EAAE,EAAE,EAAE,MAAM,EAAC,IAAI,EAAA,CAAG,EACjC,OAAA,CAAA,EAAA,CAAA,CACR,GACM,EACY,CAAA,EAEvBL,kCAACC,yBAAY,CAAC,OAAO,EAAC,EAAA,KAAK,EAAC,KAAK,EAAC,SAAS,EAAC,WAAW,EAAA,QAAA,EAAA,CACrDC,gCAAC,CAAAD,yBAAY,CAAC,KAAK,iCAAoC,EACvDC,gCAAA,CAACD,yBAAY,CAAC,SAAS,EAAA,EAAA,CAAG,EAC1BC,gCAAC,CAAAD,yBAAY,CAAC,IAAI,EAAA,EAAA,QAAA,EAChBC,iCAACI,iBAAQ,EAAA,EACP,OAAO,EAAE,KAAK,CAAC,sBAAsB,EAAE,EACvC,eAAe,EAAE,KAAK,CAAC,oCAAoC,EAAE,EAAA,QAAA,EAAA,YAAA,EAAA,CAGpD,EACO,CAAA,EACnB,KAAK;AACH,yBAAA,aAAa,EAAE;AACf,yBAAA,MAAM,CACL,CAAC,MAAM,KACL,OAAO,MAAM,CAAC,UAAU,KAAK,WAAW,IAAI,MAAM,CAAC,UAAU,EAAE,CAClE;AACA,yBAAA,GAAG,CAAC,CAAC,MAAM,KAAI;wBACd,QACEJ,iCAACD,yBAAY,CAAC,IAAI,EAChB,EAAA,QAAA,EAAAC,gCAAA,CAACI,iBAAQ,EAEP,EAAA,OAAO,EAAE,MAAM,CAAC,YAAY,EAAE,EAC9B,eAAe,EAAE,CAAC,KAAK,KAAK,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,EAAA,QAAA,EAE3D,MAAM,CAAC,EAAE,IAJL,MAAM,CAAC,EAAE,CAKL,EAAA,EAPW,MAAM,CAAC,EAAE,CAQb,EACpB;AACJ,qBAAC,CAAC,CAAA,EAAA,CACiB,CACV,EAAA,CAAA,EACf;AACJ;;;;"}

package/dist/table/DataTableViewOptions.js

@@ -0,0 +1,20 @@
+import { j as jsxRuntimeExports } from '../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
+import { ColumnsIcon } from '../node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
+import { Button } from '../button/button.js';
+import { Checkbox } from '../checkbox/checkbox.js';
+import { DropdownMenu } from '../dropdown-menu/dropdown-menu.js';
+import { Flex } from '../flex/flex.js';
+import { useTable } from './hooks/useTable.js';
+
+function DataTableViewOptions({ children, ...props }) {
+    const { table } = useTable();
+    return (jsxRuntimeExports.jsxs(DropdownMenu, { children: [jsxRuntimeExports.jsx(DropdownMenu.Trigger, { asChild: true, children: jsxRuntimeExports.jsx(Button, { variant: "ghost", ...props, children: children || (jsxRuntimeExports.jsxs(Flex, { gap: "small", align: "center", justify: "center", children: [jsxRuntimeExports.jsx(ColumnsIcon, { width: 12, height: "12" }), " View"] })) }) }), jsxRuntimeExports.jsxs(DropdownMenu.Content, { align: "end", className: "w-[150px]", children: [jsxRuntimeExports.jsx(DropdownMenu.Label, { children: "Toggle columns" }), jsxRuntimeExports.jsx(DropdownMenu.Separator, {}), jsxRuntimeExports.jsx(DropdownMenu.Item, { children: jsxRuntimeExports.jsx(Checkbox, { checked: table.getIsAllColumnsVisible(), onCheckedChange: table.getToggleAllColumnsVisibilityHandler(), children: "Toggle All" }) }), table
+                        .getAllColumns()
+                        .filter((column) => typeof column.accessorFn !== "undefined" && column.getCanHide())
+                        .map((column) => {
+                        return (jsxRuntimeExports.jsx(DropdownMenu.Item, { children: jsxRuntimeExports.jsx(Checkbox, { checked: column.getIsVisible(), onCheckedChange: (value) => column.toggleVisibility(!!value), children: column.id }, column.id) }, column.id));
+                    })] })] }));
+}
+
+export { DataTableViewOptions };
+//# sourceMappingURL=DataTableViewOptions.js.map

package/dist/table/DataTableViewOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableViewOptions.js","sources":["../../table/DataTableViewOptions.tsx"],"sourcesContent":["import { ColumnsIcon } from \"@radix-ui/react-icons\";\nimport { ComponentProps } from \"react\";\nimport { Button } from \"~/button\";\nimport { Checkbox } from \"~/checkbox\";\nimport { DropdownMenu } from \"~/dropdown-menu\";\nimport { Flex } from \"~/flex\";\nimport { useTable } from \"./hooks/useTable\";\n\ntype DataTableViewOptionsProps = ComponentProps<typeof Button>;\nexport function DataTableViewOptions({\n  children,\n  ...props\n}: DataTableViewOptionsProps) {\n  const { table } = useTable();\n\n  return (\n    <DropdownMenu>\n      <DropdownMenu.Trigger asChild>\n        <Button variant=\"ghost\" {...props}>\n          {children || (\n            <Flex gap=\"small\" align=\"center\" justify=\"center\">\n              <ColumnsIcon width={12} height=\"12\" /> View\n            </Flex>\n          )}\n        </Button>\n      </DropdownMenu.Trigger>\n\n      <DropdownMenu.Content align=\"end\" className=\"w-[150px]\">\n        <DropdownMenu.Label>Toggle columns</DropdownMenu.Label>\n        <DropdownMenu.Separator />\n        <DropdownMenu.Item>\n          <Checkbox\n            checked={table.getIsAllColumnsVisible()}\n            onCheckedChange={table.getToggleAllColumnsVisibilityHandler()}\n          >\n            Toggle All\n          </Checkbox>\n        </DropdownMenu.Item>\n        {table\n          .getAllColumns()\n          .filter(\n            (column) =>\n              typeof column.accessorFn !== \"undefined\" && column.getCanHide()\n          )\n          .map((column) => {\n            return (\n              <DropdownMenu.Item key={column.id}>\n                <Checkbox\n                  key={column.id}\n                  checked={column.getIsVisible()}\n                  onCheckedChange={(value) => column.toggleVisibility(!!value)}\n                >\n                  {column.id}\n                </Checkbox>\n              </DropdownMenu.Item>\n            );\n          })}\n      </DropdownMenu.Content>\n    </DropdownMenu>\n  );\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AASM,SAAU,oBAAoB,CAAC,EACnC,QAAQ,EACR,GAAG,KAAK,EACkB,EAAA;AAC1B,IAAA,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAC;IAE7B,QACEA,uBAAC,YAAY,EAAA,EAAA,QAAA,EAAA,CACXC,sBAAC,YAAY,CAAC,OAAO,EAAA,EAAC,OAAO,EAAA,IAAA,EAAA,QAAA,EAC3BA,sBAAC,MAAM,EAAA,EAAC,OAAO,EAAC,OAAO,KAAK,KAAK,EAAA,QAAA,EAC9B,QAAQ,KACPD,sBAAA,CAAC,IAAI,EAAC,EAAA,GAAG,EAAC,OAAO,EAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,QAAQ,aAC/CC,qBAAC,CAAA,WAAW,EAAC,EAAA,KAAK,EAAE,EAAE,EAAE,MAAM,EAAC,IAAI,EAAA,CAAG,EACjC,OAAA,CAAA,EAAA,CAAA,CACR,GACM,EACY,CAAA,EAEvBD,uBAAC,YAAY,CAAC,OAAO,EAAC,EAAA,KAAK,EAAC,KAAK,EAAC,SAAS,EAAC,WAAW,EAAA,QAAA,EAAA,CACrDC,qBAAC,CAAA,YAAY,CAAC,KAAK,iCAAoC,EACvDA,qBAAA,CAAC,YAAY,CAAC,SAAS,EAAA,EAAA,CAAG,EAC1BA,qBAAC,CAAA,YAAY,CAAC,IAAI,EAAA,EAAA,QAAA,EAChBA,sBAAC,QAAQ,EAAA,EACP,OAAO,EAAE,KAAK,CAAC,sBAAsB,EAAE,EACvC,eAAe,EAAE,KAAK,CAAC,oCAAoC,EAAE,EAAA,QAAA,EAAA,YAAA,EAAA,CAGpD,EACO,CAAA,EACnB,KAAK;AACH,yBAAA,aAAa,EAAE;AACf,yBAAA,MAAM,CACL,CAAC,MAAM,KACL,OAAO,MAAM,CAAC,UAAU,KAAK,WAAW,IAAI,MAAM,CAAC,UAAU,EAAE,CAClE;AACA,yBAAA,GAAG,CAAC,CAAC,MAAM,KAAI;wBACd,QACEA,sBAAC,YAAY,CAAC,IAAI,EAChB,EAAA,QAAA,EAAAA,qBAAA,CAAC,QAAQ,EAEP,EAAA,OAAO,EAAE,MAAM,CAAC,YAAY,EAAE,EAC9B,eAAe,EAAE,CAAC,KAAK,KAAK,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,EAAA,QAAA,EAE3D,MAAM,CAAC,EAAE,IAJL,MAAM,CAAC,EAAE,CAKL,EAAA,EAPW,MAAM,CAAC,EAAE,CAQb,EACpB;AACJ,qBAAC,CAAC,CAAA,EAAA,CACiB,CACV,EAAA,CAAA,EACf;AACJ;;;;"}

package/dist/table/FilteredChip.cjs

@@ -0,0 +1,99 @@
+'use strict';
+
+var jsxRuntime = require('../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
+var reactIcons_esm = require('../node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.cjs');
+var box = require('../box/box.cjs');
+var flex = require('../flex/flex.cjs');
+var select = require('../select/select.cjs');
+var text = require('../text/text.cjs');
+var textfield = require('../textfield/textfield.cjs');
+var React = require('react');
+require('../node_modules/.pnpm/react-day-picker@9.0.4_react@18.2.0/node_modules/react-day-picker/dist/esm/UI.cjs');
+require('../node_modules/.pnpm/react-day-picker@9.0.4_react@18.2.0/node_modules/react-day-picker/dist/esm/useDayPicker.cjs');
+var datePicker = require('../calendar/date-picker.cjs');
+var rangePicker = require('../calendar/range-picker.cjs');
+var datatable_module = require('./datatable.module.css.cjs');
+var datatables_types = require('./datatables.types.cjs');
+var useTable = require('./hooks/useTable.cjs');
+var filterFns = require('./filterFns.cjs');
+
+const getFilterValueType = ({ filterOperation, columnType, }) => {
+    if (filterOperation?.component) {
+        return filterOperation?.component;
+    }
+    else if (columnType === datatables_types.columnTypesMap.date) {
+        return datatables_types.filterValueTypeMap.datePicker;
+    }
+    else if (columnType === datatables_types.columnTypesMap.select) {
+        return datatables_types.filterValueTypeMap.select;
+    }
+    else {
+        return datatables_types.filterValueTypeMap.text;
+    }
+};
+const FilterValues = ({ column, columnType = datatables_types.filterValueTypeMap.text, options = [], onValueChange, filterOperation, ...props }) => {
+    const [value, setValue] = React.useState(column?.columnDef?.meta?.defaultValue
+        ? { value: (column?.columnDef.meta).defaultValue }
+        : {
+            value: "",
+            date: new Date(),
+            dateRange: { to: new Date(), from: new Date() },
+        });
+    const valueType = getFilterValueType({ filterOperation, columnType });
+    React.useEffect(() => {
+        if (onValueChange) {
+            onValueChange(value);
+        }
+    }, [value]);
+    switch (valueType) {
+        case datatables_types.filterValueTypeMap.select:
+            return (jsxRuntime.jsxRuntimeExports.jsxs(select.Select, { value: value.value, onValueChange: (value) => setValue({ value }), children: [jsxRuntime.jsxRuntimeExports.jsx(select.Select.Trigger, { children: jsxRuntime.jsxRuntimeExports.jsx(select.Select.Value, { placeholder: "Select value" }) }), jsxRuntime.jsxRuntimeExports.jsx(select.Select.Content, { children: options.map((opt) => {
+                            return (jsxRuntime.jsxRuntimeExports.jsx(select.Select.Item, { value: opt.value, children: opt.label || opt.value }, opt.key));
+                        }) })] }));
+        case datatables_types.filterValueTypeMap.datePicker:
+            return (jsxRuntime.jsxRuntimeExports.jsx(datePicker.DatePicker, { onSelect: (date) => setValue({ date }), value: value.date }));
+        case datatables_types.filterValueTypeMap.rangePicker:
+            return (jsxRuntime.jsxRuntimeExports.jsx(rangePicker.RangePicker, { onSelect: (dateRange) => setValue({ dateRange }), value: value.dateRange }));
+        default:
+            return (jsxRuntime.jsxRuntimeExports.jsx(textfield.TextField, { value: value.value, onChange: (e) => setValue({ value: e.target.value }) }));
+    }
+};
+const Operation = ({ columnType = datatables_types.columnTypesMap.text, onOperationSelect, }) => {
+    const options = filterFns.operationsOptions[columnType] || [];
+    const [value, setValue] = React.useState(options?.[0]?.value);
+    React.useEffect(() => {
+        const selectedOption = options.find((o) => o.value === value);
+        if (selectedOption) {
+            onOperationSelect(selectedOption);
+        }
+    }, [value]);
+    return (jsxRuntime.jsxRuntimeExports.jsxs(select.Select, { defaultValue: value, onValueChange: setValue, children: [jsxRuntime.jsxRuntimeExports.jsx(select.Select.Trigger, { className: datatable_module.default.filterOperator, children: jsxRuntime.jsxRuntimeExports.jsx(select.Select.Value, { placeholder: "Select operation" }) }), jsxRuntime.jsxRuntimeExports.jsx(select.Select.Content, { children: options.map((opt) => {
+                    return (jsxRuntime.jsxRuntimeExports.jsx(select.Select.Item, { value: opt.label, children: opt.label }, opt.label));
+                }) })] }));
+};
+const FilteredChip = ({ column, updateColumnCustomFilter, }) => {
+    const [filterOperation, setFilterOperation] = React.useState();
+    const [filterValue, setFilterValue] = React.useState();
+    const { table, removeFilterColumn } = useTable.useTable();
+    const { filterVariant } = column?.columnDef;
+    const options = column?.columnDef?.meta?.data || [];
+    column?.getFacetedUniqueValues();
+    const columnHeader = column?.columnDef?.header;
+    const columnName = (typeof columnHeader === "string" && columnHeader) || column.id;
+    React.useEffect(() => {
+        if (filterOperation?.fn && filterValue) {
+            updateColumnCustomFilter(column.id, filterOperation?.fn);
+            column.setFilterValue(filterValue);
+        }
+    }, [filterOperation, filterValue]);
+    function removeFilter() {
+        column.setFilterValue(undefined);
+        removeFilterColumn(column.id);
+        setFilterOperation(undefined);
+        setFilterValue({});
+    }
+    return (jsxRuntime.jsxRuntimeExports.jsxs(box.Box, { className: datatable_module.default.chip, children: [jsxRuntime.jsxRuntimeExports.jsx(text.Text, { className: datatable_module.default.filterText, children: columnName }), jsxRuntime.jsxRuntimeExports.jsx(Operation, { columnType: filterVariant, onOperationSelect: setFilterOperation }), filterOperation?.hideValueField ? null : (jsxRuntime.jsxRuntimeExports.jsx(FilterValues, { column: column, columnType: filterVariant, options: options, onValueChange: setFilterValue, filterOperation: filterOperation })), jsxRuntime.jsxRuntimeExports.jsx(flex.Flex, { children: jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.Cross1Icon, { height: "12", width: "12", onClick: removeFilter }) })] }));
+};
+
+exports.FilteredChip = FilteredChip;
+//# sourceMappingURL=FilteredChip.cjs.map

package/dist/table/FilteredChip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilteredChip.cjs","sources":["../../table/FilteredChip.tsx"],"sourcesContent":["import { Cross1Icon } from \"@radix-ui/react-icons\";\nimport { Column } from \"@tanstack/table-core\";\nimport { Box } from \"~/box\";\nimport { Flex } from \"~/flex\";\nimport { Select } from \"~/select\";\nimport { Text } from \"~/text\";\nimport { TextField } from \"~/textfield\";\nimport { TableColumnMetadata } from \"~/typing\";\nimport { DatePicker, RangePicker } from \"~/calendar\";\nimport styles from \"./datatable.module.css\";\nimport {\n  ApsaraColumnDef,\n  FilterValue,\n  columnTypes,\n  columnTypesMap,\n  filterValueType,\n  filterValueTypeMap,\n  updateColumnFilter,\n} from \"./datatables.types\";\nimport { useTable } from \"./hooks/useTable\";\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { FilterOperation, operationsOptions } from \"./filterFns\";\n\ntype FilteredChipProps = {\n  column: Column<any, unknown>;\n  updateColumnCustomFilter: updateColumnFilter;\n};\n\ninterface getFilterValueTypeOptions {\n  filterOperation?: FilterOperation;\n  columnType?: columnTypes;\n}\n\nconst getFilterValueType = ({\n  filterOperation,\n  columnType,\n}: getFilterValueTypeOptions): filterValueType => {\n  if (filterOperation?.component) {\n    return filterOperation?.component;\n  } else if (columnType === columnTypesMap.date) {\n    return filterValueTypeMap.datePicker;\n  } else if (columnType === columnTypesMap.select) {\n    return filterValueTypeMap.select;\n  } else {\n    return filterValueTypeMap.text;\n  }\n};\n\ninterface FilterValuesProps {\n  columnType?: columnTypes;\n  onValueChange?: (value: FilterValue) => void;\n  options?: TableColumnMetadata[];\n  filterOperation?: FilterOperation;\n  column?: Column<any, unknown>;\n}\n\nconst FilterValues = ({\n  column,\n  columnType = filterValueTypeMap.text,\n  options = [],\n  onValueChange,\n  filterOperation,\n  ...props\n}: FilterValuesProps) => {\n  const [value, setValue] = useState<FilterValue>(\n    (column?.columnDef?.meta as any)?.defaultValue\n      ? { value: (column?.columnDef.meta as any).defaultValue }\n      : {\n          value: \"\",\n          date: new Date(),\n          dateRange: { to: new Date(), from: new Date() },\n        }\n  );\n\n  const valueType = getFilterValueType({ filterOperation, columnType });\n\n  useEffect(() => {\n    if (onValueChange) {\n      onValueChange(value);\n    }\n  }, [value]);\n\n  switch (valueType) {\n    case filterValueTypeMap.select:\n      return (\n        <Select\n          value={value.value as string}\n          onValueChange={(value) => setValue({ value })}\n        >\n          <Select.Trigger>\n            <Select.Value placeholder=\"Select value\" />\n          </Select.Trigger>\n          <Select.Content>\n            {options.map((opt) => {\n              return (\n                <Select.Item key={opt.key} value={opt.value}>\n                  {opt.label || opt.value}\n                </Select.Item>\n              );\n            })}\n          </Select.Content>\n        </Select>\n      );\n    case filterValueTypeMap.datePicker:\n      return (\n        <DatePicker\n          onSelect={(date) => setValue({ date })}\n          value={value.date}\n        />\n      );\n    case filterValueTypeMap.rangePicker:\n      return (\n        <RangePicker\n          onSelect={(dateRange) => setValue({ dateRange })}\n          value={value.dateRange}\n        />\n      );\n    default:\n      return (\n        <TextField\n          value={value.value}\n          onChange={(e) => setValue({ value: e.target.value })}\n        />\n      );\n  }\n};\n\ninterface OperationProps {\n  columnType?: columnTypes;\n  onOperationSelect: (op: FilterOperation) => void;\n}\n\nconst Operation = ({\n  columnType = columnTypesMap.text,\n  onOperationSelect,\n}: OperationProps) => {\n  const options = operationsOptions[columnType] || [];\n  const [value, setValue] = useState(options?.[0]?.value);\n\n  useEffect(() => {\n    const selectedOption = options.find((o) => o.value === value);\n    if (selectedOption) {\n      onOperationSelect(selectedOption);\n    }\n  }, [value]);\n\n  return (\n    <Select defaultValue={value} onValueChange={setValue}>\n      <Select.Trigger className={styles.filterOperator}>\n        <Select.Value placeholder=\"Select operation\" />\n      </Select.Trigger>\n      <Select.Content>\n        {options.map((opt) => {\n          return (\n            <Select.Item key={opt.label} value={opt.label}>\n              {opt.label}\n            </Select.Item>\n          );\n        })}\n      </Select.Content>\n    </Select>\n  );\n};\n\nexport const FilteredChip = ({\n  column,\n  updateColumnCustomFilter,\n}: FilteredChipProps) => {\n  const [filterOperation, setFilterOperation] = useState<FilterOperation>();\n  const [filterValue, setFilterValue] = useState<FilterValue>();\n\n  const { table, removeFilterColumn } = useTable();\n  const { filterVariant } = column?.columnDef as ApsaraColumnDef<unknown>;\n  const options: TableColumnMetadata[] =\n    (column?.columnDef?.meta as any)?.data || [];\n\n  const facets = column?.getFacetedUniqueValues();\n  const columnHeader = column?.columnDef?.header;\n  const columnName =\n    (typeof columnHeader === \"string\" && columnHeader) || column.id;\n\n  useEffect(() => {\n    if (filterOperation?.fn && filterValue) {\n      updateColumnCustomFilter(column.id, filterOperation?.fn);\n      column.setFilterValue(filterValue);\n    }\n  }, [filterOperation, filterValue]);\n\n  function removeFilter() {\n    column.setFilterValue(undefined);\n    removeFilterColumn(column.id);\n    setFilterOperation(undefined);\n    setFilterValue({});\n  }\n\n  return (\n    <Box className={styles.chip}>\n      <Text className={styles.filterText}>{columnName}</Text>\n      <Operation\n        columnType={filterVariant}\n        onOperationSelect={setFilterOperation}\n      />\n      {filterOperation?.hideValueField ? null : (\n        <FilterValues\n          column={column}\n          columnType={filterVariant}\n          options={options}\n          onValueChange={setFilterValue}\n          filterOperation={filterOperation}\n        />\n      )}\n\n      {/* close filter chip */}\n      <Flex>\n        <Cross1Icon height=\"12\" width=\"12\" onClick={removeFilter} />\n      </Flex>\n    </Box>\n  );\n};\n"],"names":["columnTypesMap","filterValueTypeMap","useState","useEffect","_jsxs","Select","_jsx","DatePicker","RangePicker","TextField","operationsOptions","styles","useTable","Box","Text","Flex","Cross1Icon"],"mappings":"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"}

package/dist/table/FilteredChip.js

@@ -0,0 +1,97 @@
+import { j as jsxRuntimeExports } from '../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
+import { Cross1Icon } from '../node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
+import { Box } from '../box/box.js';
+import { Flex } from '../flex/flex.js';
+import { Select } from '../select/select.js';
+import { Text } from '../text/text.js';
+import { TextField } from '../textfield/textfield.js';
+import { useState, useEffect } from 'react';
+import '../node_modules/.pnpm/react-day-picker@9.0.4_react@18.2.0/node_modules/react-day-picker/dist/esm/UI.js';
+import '../node_modules/.pnpm/react-day-picker@9.0.4_react@18.2.0/node_modules/react-day-picker/dist/esm/useDayPicker.js';
+import { DatePicker } from '../calendar/date-picker.js';
+import { RangePicker } from '../calendar/range-picker.js';
+import styles from './datatable.module.css.js';
+import { filterValueTypeMap, columnTypesMap } from './datatables.types.js';
+import { useTable } from './hooks/useTable.js';
+import { operationsOptions } from './filterFns.js';
+
+const getFilterValueType = ({ filterOperation, columnType, }) => {
+    if (filterOperation?.component) {
+        return filterOperation?.component;
+    }
+    else if (columnType === columnTypesMap.date) {
+        return filterValueTypeMap.datePicker;
+    }
+    else if (columnType === columnTypesMap.select) {
+        return filterValueTypeMap.select;
+    }
+    else {
+        return filterValueTypeMap.text;
+    }
+};
+const FilterValues = ({ column, columnType = filterValueTypeMap.text, options = [], onValueChange, filterOperation, ...props }) => {
+    const [value, setValue] = useState(column?.columnDef?.meta?.defaultValue
+        ? { value: (column?.columnDef.meta).defaultValue }
+        : {
+            value: "",
+            date: new Date(),
+            dateRange: { to: new Date(), from: new Date() },
+        });
+    const valueType = getFilterValueType({ filterOperation, columnType });
+    useEffect(() => {
+        if (onValueChange) {
+            onValueChange(value);
+        }
+    }, [value]);
+    switch (valueType) {
+        case filterValueTypeMap.select:
+            return (jsxRuntimeExports.jsxs(Select, { value: value.value, onValueChange: (value) => setValue({ value }), children: [jsxRuntimeExports.jsx(Select.Trigger, { children: jsxRuntimeExports.jsx(Select.Value, { placeholder: "Select value" }) }), jsxRuntimeExports.jsx(Select.Content, { children: options.map((opt) => {
+                            return (jsxRuntimeExports.jsx(Select.Item, { value: opt.value, children: opt.label || opt.value }, opt.key));
+                        }) })] }));
+        case filterValueTypeMap.datePicker:
+            return (jsxRuntimeExports.jsx(DatePicker, { onSelect: (date) => setValue({ date }), value: value.date }));
+        case filterValueTypeMap.rangePicker:
+            return (jsxRuntimeExports.jsx(RangePicker, { onSelect: (dateRange) => setValue({ dateRange }), value: value.dateRange }));
+        default:
+            return (jsxRuntimeExports.jsx(TextField, { value: value.value, onChange: (e) => setValue({ value: e.target.value }) }));
+    }
+};
+const Operation = ({ columnType = columnTypesMap.text, onOperationSelect, }) => {
+    const options = operationsOptions[columnType] || [];
+    const [value, setValue] = useState(options?.[0]?.value);
+    useEffect(() => {
+        const selectedOption = options.find((o) => o.value === value);
+        if (selectedOption) {
+            onOperationSelect(selectedOption);
+        }
+    }, [value]);
+    return (jsxRuntimeExports.jsxs(Select, { defaultValue: value, onValueChange: setValue, children: [jsxRuntimeExports.jsx(Select.Trigger, { className: styles.filterOperator, children: jsxRuntimeExports.jsx(Select.Value, { placeholder: "Select operation" }) }), jsxRuntimeExports.jsx(Select.Content, { children: options.map((opt) => {
+                    return (jsxRuntimeExports.jsx(Select.Item, { value: opt.label, children: opt.label }, opt.label));
+                }) })] }));
+};
+const FilteredChip = ({ column, updateColumnCustomFilter, }) => {
+    const [filterOperation, setFilterOperation] = useState();
+    const [filterValue, setFilterValue] = useState();
+    const { table, removeFilterColumn } = useTable();
+    const { filterVariant } = column?.columnDef;
+    const options = column?.columnDef?.meta?.data || [];
+    column?.getFacetedUniqueValues();
+    const columnHeader = column?.columnDef?.header;
+    const columnName = (typeof columnHeader === "string" && columnHeader) || column.id;
+    useEffect(() => {
+        if (filterOperation?.fn && filterValue) {
+            updateColumnCustomFilter(column.id, filterOperation?.fn);
+            column.setFilterValue(filterValue);
+        }
+    }, [filterOperation, filterValue]);
+    function removeFilter() {
+        column.setFilterValue(undefined);
+        removeFilterColumn(column.id);
+        setFilterOperation(undefined);
+        setFilterValue({});
+    }
+    return (jsxRuntimeExports.jsxs(Box, { className: styles.chip, children: [jsxRuntimeExports.jsx(Text, { className: styles.filterText, children: columnName }), jsxRuntimeExports.jsx(Operation, { columnType: filterVariant, onOperationSelect: setFilterOperation }), filterOperation?.hideValueField ? null : (jsxRuntimeExports.jsx(FilterValues, { column: column, columnType: filterVariant, options: options, onValueChange: setFilterValue, filterOperation: filterOperation })), jsxRuntimeExports.jsx(Flex, { children: jsxRuntimeExports.jsx(Cross1Icon, { height: "12", width: "12", onClick: removeFilter }) })] }));
+};
+
+export { FilteredChip };
+//# sourceMappingURL=FilteredChip.js.map

package/dist/table/FilteredChip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilteredChip.js","sources":["../../table/FilteredChip.tsx"],"sourcesContent":["import { Cross1Icon } from \"@radix-ui/react-icons\";\nimport { Column } from \"@tanstack/table-core\";\nimport { Box } from \"~/box\";\nimport { Flex } from \"~/flex\";\nimport { Select } from \"~/select\";\nimport { Text } from \"~/text\";\nimport { TextField } from \"~/textfield\";\nimport { TableColumnMetadata } from \"~/typing\";\nimport { DatePicker, RangePicker } from \"~/calendar\";\nimport styles from \"./datatable.module.css\";\nimport {\n  ApsaraColumnDef,\n  FilterValue,\n  columnTypes,\n  columnTypesMap,\n  filterValueType,\n  filterValueTypeMap,\n  updateColumnFilter,\n} from \"./datatables.types\";\nimport { useTable } from \"./hooks/useTable\";\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { FilterOperation, operationsOptions } from \"./filterFns\";\n\ntype FilteredChipProps = {\n  column: Column<any, unknown>;\n  updateColumnCustomFilter: updateColumnFilter;\n};\n\ninterface getFilterValueTypeOptions {\n  filterOperation?: FilterOperation;\n  columnType?: columnTypes;\n}\n\nconst getFilterValueType = ({\n  filterOperation,\n  columnType,\n}: getFilterValueTypeOptions): filterValueType => {\n  if (filterOperation?.component) {\n    return filterOperation?.component;\n  } else if (columnType === columnTypesMap.date) {\n    return filterValueTypeMap.datePicker;\n  } else if (columnType === columnTypesMap.select) {\n    return filterValueTypeMap.select;\n  } else {\n    return filterValueTypeMap.text;\n  }\n};\n\ninterface FilterValuesProps {\n  columnType?: columnTypes;\n  onValueChange?: (value: FilterValue) => void;\n  options?: TableColumnMetadata[];\n  filterOperation?: FilterOperation;\n  column?: Column<any, unknown>;\n}\n\nconst FilterValues = ({\n  column,\n  columnType = filterValueTypeMap.text,\n  options = [],\n  onValueChange,\n  filterOperation,\n  ...props\n}: FilterValuesProps) => {\n  const [value, setValue] = useState<FilterValue>(\n    (column?.columnDef?.meta as any)?.defaultValue\n      ? { value: (column?.columnDef.meta as any).defaultValue }\n      : {\n          value: \"\",\n          date: new Date(),\n          dateRange: { to: new Date(), from: new Date() },\n        }\n  );\n\n  const valueType = getFilterValueType({ filterOperation, columnType });\n\n  useEffect(() => {\n    if (onValueChange) {\n      onValueChange(value);\n    }\n  }, [value]);\n\n  switch (valueType) {\n    case filterValueTypeMap.select:\n      return (\n        <Select\n          value={value.value as string}\n          onValueChange={(value) => setValue({ value })}\n        >\n          <Select.Trigger>\n            <Select.Value placeholder=\"Select value\" />\n          </Select.Trigger>\n          <Select.Content>\n            {options.map((opt) => {\n              return (\n                <Select.Item key={opt.key} value={opt.value}>\n                  {opt.label || opt.value}\n                </Select.Item>\n              );\n            })}\n          </Select.Content>\n        </Select>\n      );\n    case filterValueTypeMap.datePicker:\n      return (\n        <DatePicker\n          onSelect={(date) => setValue({ date })}\n          value={value.date}\n        />\n      );\n    case filterValueTypeMap.rangePicker:\n      return (\n        <RangePicker\n          onSelect={(dateRange) => setValue({ dateRange })}\n          value={value.dateRange}\n        />\n      );\n    default:\n      return (\n        <TextField\n          value={value.value}\n          onChange={(e) => setValue({ value: e.target.value })}\n        />\n      );\n  }\n};\n\ninterface OperationProps {\n  columnType?: columnTypes;\n  onOperationSelect: (op: FilterOperation) => void;\n}\n\nconst Operation = ({\n  columnType = columnTypesMap.text,\n  onOperationSelect,\n}: OperationProps) => {\n  const options = operationsOptions[columnType] || [];\n  const [value, setValue] = useState(options?.[0]?.value);\n\n  useEffect(() => {\n    const selectedOption = options.find((o) => o.value === value);\n    if (selectedOption) {\n      onOperationSelect(selectedOption);\n    }\n  }, [value]);\n\n  return (\n    <Select defaultValue={value} onValueChange={setValue}>\n      <Select.Trigger className={styles.filterOperator}>\n        <Select.Value placeholder=\"Select operation\" />\n      </Select.Trigger>\n      <Select.Content>\n        {options.map((opt) => {\n          return (\n            <Select.Item key={opt.label} value={opt.label}>\n              {opt.label}\n            </Select.Item>\n          );\n        })}\n      </Select.Content>\n    </Select>\n  );\n};\n\nexport const FilteredChip = ({\n  column,\n  updateColumnCustomFilter,\n}: FilteredChipProps) => {\n  const [filterOperation, setFilterOperation] = useState<FilterOperation>();\n  const [filterValue, setFilterValue] = useState<FilterValue>();\n\n  const { table, removeFilterColumn } = useTable();\n  const { filterVariant } = column?.columnDef as ApsaraColumnDef<unknown>;\n  const options: TableColumnMetadata[] =\n    (column?.columnDef?.meta as any)?.data || [];\n\n  const facets = column?.getFacetedUniqueValues();\n  const columnHeader = column?.columnDef?.header;\n  const columnName =\n    (typeof columnHeader === \"string\" && columnHeader) || column.id;\n\n  useEffect(() => {\n    if (filterOperation?.fn && filterValue) {\n      updateColumnCustomFilter(column.id, filterOperation?.fn);\n      column.setFilterValue(filterValue);\n    }\n  }, [filterOperation, filterValue]);\n\n  function removeFilter() {\n    column.setFilterValue(undefined);\n    removeFilterColumn(column.id);\n    setFilterOperation(undefined);\n    setFilterValue({});\n  }\n\n  return (\n    <Box className={styles.chip}>\n      <Text className={styles.filterText}>{columnName}</Text>\n      <Operation\n        columnType={filterVariant}\n        onOperationSelect={setFilterOperation}\n      />\n      {filterOperation?.hideValueField ? null : (\n        <FilterValues\n          column={column}\n          columnType={filterVariant}\n          options={options}\n          onValueChange={setFilterValue}\n          filterOperation={filterOperation}\n        />\n      )}\n\n      {/* close filter chip */}\n      <Flex>\n        <Cross1Icon height=\"12\" width=\"12\" onClick={removeFilter} />\n      </Flex>\n    </Box>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/table/TableContext.cjs

@@ -0,0 +1,8 @@
+'use strict';
+
+var React = require('react');
+
+const TableContext = React.createContext(null);
+
+exports.TableContext = TableContext;
+//# sourceMappingURL=TableContext.cjs.map

package/dist/table/TableContext.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableContext.cjs","sources":["../../table/TableContext.tsx"],"sourcesContent":["import type {\n  FilterFn,\n  OnChangeFn,\n  Table,\n  TableState,\n} from \"@tanstack/react-table\";\nimport { createContext } from \"react\";\nimport { tableFilterMap, updateColumnFilter } from \"./datatables.types\";\n\nexport type onTableChangeEvent = (params: TableState & TableFormType) => void;\n\nexport type TableFormType = {\n  /**\n   * @example {type: \"LONG\", origin: \"system\"}\n   */\n  predicates: Record<string, string>;\n};\n\ntype TableContextType = {\n  table: Table<any>;\n  filteredColumns: string[];\n  addFilterColumn: (column: string) => void;\n  removeFilterColumn: (column: string) => void;\n  onChange: () => void;\n  resetColumns: () => void;\n  globalFilter: string;\n  onGlobalFilterChange: OnChangeFn<any>;\n  tableCustomFilter: tableFilterMap;\n  updateColumnCustomFilter: updateColumnFilter;\n  isLoading: boolean;\n\n  // state: TableState;\n  // setState: Dispatch<(prevState: TableState) => TableState>;\n  // filterQuery: (typeof INITIAL_QUERY)[];\n  // setFilterQuery: Dispatch<React.SetStateAction<(typeof INITIAL_QUERY)[]>>;\n  // clearFilters: () => void;\n  // getSelectedRow: () => any | null;\n  // getSelectedRows: () => any[];\n  // clearSelection: () => void;\n  // containerRef: RefObject<HTMLDivElement>;\n  // multiRowSelectionEnabled?: boolean;\n  // tableColumnsOrdered: Array<ColumnDef<any> & { hidden?: true }>;\n  // setTableColumnsOrdered: React.Dispatch<React.SetStateAction<any[]>>;\n};\n\nexport const TableContext = createContext<TableContextType | null>(null);\n"],"names":["createContext"],"mappings":";;;;MA6Ca,YAAY,GAAGA,mBAAa,CAA0B,IAAI;;;;"}

package/dist/table/TableContext.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+
+const TableContext = createContext(null);
+
+export { TableContext };
+//# sourceMappingURL=TableContext.js.map

package/dist/table/TableContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableContext.js","sources":["../../table/TableContext.tsx"],"sourcesContent":["import type {\n  FilterFn,\n  OnChangeFn,\n  Table,\n  TableState,\n} from \"@tanstack/react-table\";\nimport { createContext } from \"react\";\nimport { tableFilterMap, updateColumnFilter } from \"./datatables.types\";\n\nexport type onTableChangeEvent = (params: TableState & TableFormType) => void;\n\nexport type TableFormType = {\n  /**\n   * @example {type: \"LONG\", origin: \"system\"}\n   */\n  predicates: Record<string, string>;\n};\n\ntype TableContextType = {\n  table: Table<any>;\n  filteredColumns: string[];\n  addFilterColumn: (column: string) => void;\n  removeFilterColumn: (column: string) => void;\n  onChange: () => void;\n  resetColumns: () => void;\n  globalFilter: string;\n  onGlobalFilterChange: OnChangeFn<any>;\n  tableCustomFilter: tableFilterMap;\n  updateColumnCustomFilter: updateColumnFilter;\n  isLoading: boolean;\n\n  // state: TableState;\n  // setState: Dispatch<(prevState: TableState) => TableState>;\n  // filterQuery: (typeof INITIAL_QUERY)[];\n  // setFilterQuery: Dispatch<React.SetStateAction<(typeof INITIAL_QUERY)[]>>;\n  // clearFilters: () => void;\n  // getSelectedRow: () => any | null;\n  // getSelectedRows: () => any[];\n  // clearSelection: () => void;\n  // containerRef: RefObject<HTMLDivElement>;\n  // multiRowSelectionEnabled?: boolean;\n  // tableColumnsOrdered: Array<ColumnDef<any> & { hidden?: true }>;\n  // setTableColumnsOrdered: React.Dispatch<React.SetStateAction<any[]>>;\n};\n\nexport const TableContext = createContext<TableContextType | null>(null);\n"],"names":[],"mappings":";;MA6Ca,YAAY,GAAG,aAAa,CAA0B,IAAI;;;;"}

package/dist/table/TableDetailContainer.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var jsxRuntime = require('../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
+var flex = require('../flex/flex.cjs');
+
+const TableDetailContainer = ({ children, ...props }) => {
+    return (jsxRuntime.jsxRuntimeExports.jsx(flex.Flex, { direction: "column", ...props, children: children }));
+};
+
+exports.TableDetailContainer = TableDetailContainer;
+//# sourceMappingURL=TableDetailContainer.cjs.map

package/dist/table/TableDetailContainer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableDetailContainer.cjs","sources":["../../table/TableDetailContainer.tsx"],"sourcesContent":["import type { FC, ReactNode } from \"react\";\nimport { Flex } from \"~/flex\";\n\nexport interface TableDetailContainerProps {\n  children?: ReactNode;\n}\n\nexport const TableDetailContainer: FC<TableDetailContainerProps> = ({\n  children,\n  ...props\n}) => {\n  return (\n    <Flex direction=\"column\" {...props}>\n      {children}\n    </Flex>\n  );\n};\n"],"names":["_jsx","Flex"],"mappings":";;;;;AAOO,MAAM,oBAAoB,GAAkC,CAAC,EAClE,QAAQ,EACR,GAAG,KAAK,EACT,KAAI;AACH,IAAA,QACEA,gCAAA,CAACC,SAAI,EAAA,EAAC,SAAS,EAAC,QAAQ,EAAA,GAAK,KAAK,EAAA,QAAA,EAC/B,QAAQ,EAAA,CACJ,EACP;AACJ;;;;"}

package/dist/table/TableDetailContainer.js

@@ -0,0 +1,9 @@
+import { j as jsxRuntimeExports } from '../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
+import { Flex } from '../flex/flex.js';
+
+const TableDetailContainer = ({ children, ...props }) => {
+    return (jsxRuntimeExports.jsx(Flex, { direction: "column", ...props, children: children }));
+};
+
+export { TableDetailContainer };
+//# sourceMappingURL=TableDetailContainer.js.map

package/dist/table/TableDetailContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableDetailContainer.js","sources":["../../table/TableDetailContainer.tsx"],"sourcesContent":["import type { FC, ReactNode } from \"react\";\nimport { Flex } from \"~/flex\";\n\nexport interface TableDetailContainerProps {\n  children?: ReactNode;\n}\n\nexport const TableDetailContainer: FC<TableDetailContainerProps> = ({\n  children,\n  ...props\n}) => {\n  return (\n    <Flex direction=\"column\" {...props}>\n      {children}\n    </Flex>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;AAOO,MAAM,oBAAoB,GAAkC,CAAC,EAClE,QAAQ,EACR,GAAG,KAAK,EACT,KAAI;AACH,IAAA,QACEA,qBAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,QAAQ,EAAA,GAAK,KAAK,EAAA,QAAA,EAC/B,QAAQ,EAAA,CACJ,EACP;AACJ;;;;"}