@ayasofyazilim/ui 0.0.0 → 0.0.1

package/dist/custom/tanstack-table/fields/tanstack-table-filter-date.js

@@ -0,0 +1,132 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CirclePlusIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Button } from "@repo/ayasofyazilim-ui/components/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from "@repo/ayasofyazilim-ui/components/popover";
+import { Separator } from "@repo/ayasofyazilim-ui/components/separator";
+import {
+  DatePicker,
+  DateRangePicker
+} from "@repo/ayasofyazilim-ui/custom/date-picker";
+function TanstackTableDateFilter({
+  column,
+  accessorKey,
+  params,
+  onFilter,
+  onFilterMultiple,
+  dateItem
+}) {
+  const title = column?.columnDef?.meta?.toString() || accessorKey;
+  const [date, setDate] = useState(
+    dateItem?.endAccessorKey ? {
+      start: params?.get(dateItem.startAccessorKey) ? new Date(params?.get(dateItem.startAccessorKey)) : void 0,
+      end: params?.get(dateItem?.endAccessorKey) ? new Date(params?.get(dateItem.endAccessorKey)) : void 0
+    } : params?.get(dateItem.startAccessorKey) ? new Date(params?.get(dateItem.startAccessorKey)) : void 0
+  );
+  useEffect(() => {
+    function isFilterChanged(accessorKey2, date2) {
+      return params.get(accessorKey2) !== date2?.toISOString();
+    }
+    function isFiltered(accessorKey2) {
+      return !!params.get(accessorKey2);
+    }
+    const filter = [];
+    if (!date) {
+      if (isFiltered(dateItem.startAccessorKey)) {
+        filter.push({
+          accessorKey: dateItem.startAccessorKey,
+          selectedValues: ""
+        });
+      }
+      if (dateItem?.endAccessorKey && isFiltered(dateItem.endAccessorKey)) {
+        filter.push({
+          accessorKey: dateItem.endAccessorKey,
+          selectedValues: ""
+        });
+      }
+      if (filter.length > 0) {
+        onFilterMultiple(filter);
+      }
+      return;
+    }
+    if (date instanceof Date) {
+      if (isFilterChanged(dateItem?.startAccessorKey, date)) {
+        onFilter(dateItem?.startAccessorKey, date.toISOString());
+      }
+      return;
+    }
+    if (!dateItem.canFilteredBySingleDate && (!date.start || !date.end)) return;
+    if (isFilterChanged(dateItem.startAccessorKey, date.start)) {
+      filter.push({
+        accessorKey: dateItem.startAccessorKey,
+        selectedValues: date.start?.toISOString() || ""
+      });
+    }
+    if (dateItem.endAccessorKey && isFilterChanged(dateItem.endAccessorKey, date.end)) {
+      filter.push({
+        accessorKey: dateItem.endAccessorKey,
+        selectedValues: date.end?.toISOString() || ""
+      });
+    }
+    if (filter.length > 0) {
+      onFilterMultiple(filter);
+    }
+  }, [date]);
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className: "h-8 border-dashed", children: [
+      /* @__PURE__ */ jsx(CirclePlusIcon, { className: "mr-2 h-4 w-4" }),
+      title,
+      date && "start" in date && "to" in date && date.start && /* @__PURE__ */ jsxs("div", { className: "hidden space-x-1 md:flex", children: [
+        /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "mx-2 h-4" }),
+        new Date(date.start).toLocaleDateString(),
+        " -",
+        date.end && new Date(date?.end).toLocaleDateString()
+      ] }),
+      date instanceof Date && /* @__PURE__ */ jsxs("div", { className: "hidden space-x-1 md:flex", children: [
+        /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "mx-2 h-4" }),
+        new Date(date).toLocaleDateString()
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { className: "p-0 w-full min-w-fit", align: "start", children: [
+      dateItem?.endAccessorKey ? /* @__PURE__ */ jsx(
+        DateRangePicker,
+        {
+          id: dateItem.startAccessorKey,
+          classNames: {
+            dateInput: "border-0 border-b rounded-none"
+          },
+          onChange: (_date) => {
+            setDate(_date);
+          },
+          defaultValues: date
+        }
+      ) : /* @__PURE__ */ jsx(
+        DatePicker,
+        {
+          id: dateItem.endAccessorKey || "",
+          onChange: (_date) => {
+            setDate(_date);
+          },
+          defaultValue: date
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "p-1", children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: () => setDate(void 0),
+          variant: "ghost",
+          className: "justify-center text-center w-full hover:bg-accent text-accent-foreground",
+          children: "Clean Filter"
+        }
+      ) })
+    ] })
+  ] });
+}
+export {
+  TanstackTableDateFilter
+};
+//# sourceMappingURL=tanstack-table-filter-date.js.map

package/dist/custom/tanstack-table/fields/tanstack-table-filter-date.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/custom/tanstack-table/fields/tanstack-table-filter-date.tsx"],"sourcesContent":["import { CirclePlusIcon } from \"lucide-react\";\r\nimport { Column } from \"@tanstack/react-table\";\r\n\r\nimport { useEffect, useState } from \"react\";\r\nimport { Button } from \"@repo/ayasofyazilim-ui/components/button\";\r\nimport {\r\n  Popover,\r\n  PopoverContent,\r\n  PopoverTrigger,\r\n} from \"@repo/ayasofyazilim-ui/components/popover\";\r\nimport { Separator } from \"@repo/ayasofyazilim-ui/components/separator\";\r\nimport { TanstackTableDateFilterType } from \"../types\";\r\nimport {\r\n  DatePicker,\r\n  DateRangePicker,\r\n} from \"@repo/ayasofyazilim-ui/custom/date-picker\";\r\nimport { DateRange } from \"@repo/ayasofyazilim-ui/custom/date-picker/types\";\r\n\r\ninterface TanstackTableDateFilterProps<TData, TValue> {\r\n  accessorKey: string;\r\n  column?: Column<TData, TValue>;\r\n  dateItem: TanstackTableDateFilterType;\r\n  onFilter: (accessorKey: string, selectedValues: string) => void;\r\n  onFilterMultiple: (\r\n    filter: {\r\n      accessorKey: string;\r\n      selectedValues: string;\r\n    }[]\r\n  ) => void;\r\n  params: URLSearchParams;\r\n}\r\n\r\nexport function TanstackTableDateFilter<TData, TValue>({\r\n  column,\r\n  accessorKey,\r\n  params,\r\n  onFilter,\r\n  onFilterMultiple,\r\n  dateItem,\r\n}: TanstackTableDateFilterProps<TData, TValue>) {\r\n  const title = column?.columnDef?.meta?.toString() || accessorKey;\r\n\r\n  // If endAccessorKey is provided, then it is a date range. Otherwise it is a single date.\r\n  const [date, setDate] = useState<Date | DateRange | undefined>(\r\n    dateItem?.endAccessorKey\r\n      ? {\r\n          start: params?.get(dateItem.startAccessorKey)\r\n            ? new Date(params?.get(dateItem.startAccessorKey) as string)\r\n            : undefined,\r\n          end: params?.get(dateItem?.endAccessorKey)\r\n            ? new Date(params?.get(dateItem.endAccessorKey) as string)\r\n            : undefined,\r\n        }\r\n      : params?.get(dateItem.startAccessorKey)\r\n        ? new Date(params?.get(dateItem.startAccessorKey) as string)\r\n        : undefined\r\n  );\r\n\r\n  useEffect(() => {\r\n    function isFilterChanged(accessorKey: string, date: Date | undefined) {\r\n      return params.get(accessorKey) !== date?.toISOString();\r\n    }\r\n\r\n    function isFiltered(accessorKey: string) {\r\n      return !!params.get(accessorKey);\r\n    }\r\n\r\n    const filter: {\r\n      accessorKey: string;\r\n      selectedValues: string;\r\n    }[] = [];\r\n\r\n    if (!date) {\r\n      // This works when filters cleared\r\n      if (isFiltered(dateItem.startAccessorKey)) {\r\n        filter.push({\r\n          accessorKey: dateItem.startAccessorKey,\r\n          selectedValues: \"\",\r\n        });\r\n      }\r\n      if (dateItem?.endAccessorKey && isFiltered(dateItem.endAccessorKey)) {\r\n        filter.push({\r\n          accessorKey: dateItem.endAccessorKey,\r\n          selectedValues: \"\",\r\n        });\r\n      }\r\n\r\n      if (filter.length > 0) {\r\n        onFilterMultiple(filter);\r\n      }\r\n      return;\r\n    }\r\n\r\n    if (date instanceof Date) {\r\n      // It's a single date, no endAccessorKey\r\n      if (isFilterChanged(dateItem?.startAccessorKey, date)) {\r\n        onFilter(dateItem?.startAccessorKey, date.toISOString());\r\n      }\r\n      return;\r\n    }\r\n\r\n    if (!dateItem.canFilteredBySingleDate && (!date.start || !date.end)) return;\r\n\r\n    if (isFilterChanged(dateItem.startAccessorKey, date.start)) {\r\n      filter.push({\r\n        accessorKey: dateItem.startAccessorKey,\r\n        selectedValues: date.start?.toISOString() || \"\",\r\n      });\r\n    }\r\n\r\n    if (\r\n      dateItem.endAccessorKey &&\r\n      isFilterChanged(dateItem.endAccessorKey, date.end)\r\n    ) {\r\n      filter.push({\r\n        accessorKey: dateItem.endAccessorKey,\r\n        selectedValues: date.end?.toISOString() || \"\",\r\n      });\r\n    }\r\n\r\n    if (filter.length > 0) {\r\n      onFilterMultiple(filter);\r\n    }\r\n  }, [date]);\r\n\r\n  return (\r\n    <Popover>\r\n      <PopoverTrigger asChild>\r\n        <Button variant=\"outline\" size=\"sm\" className=\"h-8 border-dashed\">\r\n          <CirclePlusIcon className=\"mr-2 h-4 w-4\" />\r\n          {title}\r\n          {date && \"start\" in date && \"to\" in date && date.start && (\r\n            <div className=\"hidden space-x-1 md:flex\">\r\n              <Separator orientation=\"vertical\" className=\"mx-2 h-4\" />\r\n              {new Date(date.start).toLocaleDateString()} -\r\n              {date.end && new Date(date?.end).toLocaleDateString()}\r\n            </div>\r\n          )}\r\n          {date instanceof Date && (\r\n            <div className=\"hidden space-x-1 md:flex\">\r\n              <Separator orientation=\"vertical\" className=\"mx-2 h-4\" />\r\n              {new Date(date).toLocaleDateString()}\r\n            </div>\r\n          )}\r\n        </Button>\r\n      </PopoverTrigger>\r\n      <PopoverContent className=\"p-0 w-full min-w-fit\" align=\"start\">\r\n        {dateItem?.endAccessorKey ? (\r\n          <DateRangePicker\r\n            id={dateItem.startAccessorKey}\r\n            classNames={{\r\n              dateInput: \"border-0 border-b rounded-none\",\r\n            }}\r\n            onChange={(_date) => {\r\n              setDate(_date);\r\n            }}\r\n            defaultValues={date as DateRange}\r\n          />\r\n        ) : (\r\n          <DatePicker\r\n            id={dateItem.endAccessorKey || \"\"}\r\n            onChange={(_date) => {\r\n              setDate(_date);\r\n            }}\r\n            defaultValue={date as Date | undefined}\r\n          />\r\n        )}\r\n        <div className=\"p-1\">\r\n          <Button\r\n            onClick={() => setDate(undefined)}\r\n            variant=\"ghost\"\r\n            className=\"justify-center text-center w-full hover:bg-accent text-accent-foreground\"\r\n          >\r\n            Clean Filter\r\n          </Button>\r\n        </div>\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n}\r\n"],"mappings":"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","names":["accessorKey","date"]}

package/dist/custom/tanstack-table/fields/tanstack-table-filter-faceted.js

@@ -0,0 +1,131 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, CirclePlusIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Badge } from "@repo/ayasofyazilim-ui/components/badge";
+import { Button } from "@repo/ayasofyazilim-ui/components/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator
+} from "@repo/ayasofyazilim-ui/components/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from "@repo/ayasofyazilim-ui/components/popover";
+import { Separator } from "@repo/ayasofyazilim-ui/components/separator";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+function TanstackTableFacetedFilter({
+  column,
+  accessorKey,
+  options,
+  onFilter,
+  params,
+  title
+}) {
+  const facets = column?.getFacetedUniqueValues();
+  const [selectedValues, setSelectedValues] = useState(
+    new Set(params?.get(accessorKey)?.split(",") || [])
+  );
+  useEffect(() => {
+    setSelectedValues(new Set(params?.get(accessorKey)?.split(",") || []));
+  }, [params?.get(accessorKey)]);
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className: "h-8 border-dashed", children: [
+      /* @__PURE__ */ jsx(CirclePlusIcon, { className: "mr-2 h-4 w-4" }),
+      title,
+      selectedValues?.size > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "mx-2 h-4" }),
+        /* @__PURE__ */ jsx(
+          Badge,
+          {
+            variant: "secondary",
+            className: "rounded-sm px-1 font-normal lg:hidden",
+            children: selectedValues.size
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "hidden space-x-1 lg:flex", children: selectedValues.size > 2 ? /* @__PURE__ */ jsxs(
+          Badge,
+          {
+            variant: "secondary",
+            className: "rounded-sm px-1 font-normal",
+            children: [
+              selectedValues.size,
+              " Selected"
+            ]
+          }
+        ) : options.filter((option) => selectedValues.has(option.value)).map((option) => /* @__PURE__ */ jsx(
+          Badge,
+          {
+            variant: "secondary",
+            className: "rounded-sm px-1 font-normal",
+            children: option.label
+          },
+          option.value
+        )) })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-[200px] p-0", align: "start", children: /* @__PURE__ */ jsxs(Command, { children: [
+      /* @__PURE__ */ jsx(CommandInput, { placeholder: title }),
+      /* @__PURE__ */ jsxs(CommandList, { children: [
+        /* @__PURE__ */ jsx(CommandEmpty, { children: "No Filter results" }),
+        /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => {
+          const isSelected = selectedValues.has(option.value);
+          return /* @__PURE__ */ jsxs(
+            CommandItem,
+            {
+              onSelect: () => {
+                const current = Array.from(selectedValues);
+                if (isSelected) {
+                  current.splice(
+                    current.findIndex((i) => i === option.value),
+                    1
+                  );
+                } else {
+                  current.push(option.value);
+                }
+                onFilter(accessorKey, current.join(","));
+                setSelectedValues(new Set(current));
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+                      isSelected ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"
+                    ),
+                    children: /* @__PURE__ */ jsx(CheckIcon, { className: cn("h-4 w-4") })
+                  }
+                ),
+                option.icon && /* @__PURE__ */ jsx(option.icon, { className: "mr-2 h-4 w-4 text-muted-foreground" }),
+                /* @__PURE__ */ jsx("span", { children: option.label }),
+                facets?.get(option.value) && /* @__PURE__ */ jsx("span", { className: "ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs", children: facets.get(option.value) })
+              ]
+            },
+            option.value
+          );
+        }) }),
+        selectedValues.size > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(CommandSeparator, {}),
+          /* @__PURE__ */ jsx(CommandGroup, { children: /* @__PURE__ */ jsx(
+            CommandItem,
+            {
+              onSelect: () => onFilter(accessorKey, ""),
+              className: "justify-center text-center",
+              children: "Clean Filter"
+            }
+          ) })
+        ] })
+      ] })
+    ] }) })
+  ] });
+}
+export {
+  TanstackTableFacetedFilter
+};
+//# sourceMappingURL=tanstack-table-filter-faceted.js.map

package/dist/custom/tanstack-table/fields/tanstack-table-filter-faceted.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/custom/tanstack-table/fields/tanstack-table-filter-faceted.tsx"],"sourcesContent":["import { CheckIcon, CirclePlusIcon } from \"lucide-react\";\r\nimport { Column } from \"@tanstack/react-table\";\r\n\r\nimport { useEffect, useState } from \"react\";\r\nimport { Badge } from \"@repo/ayasofyazilim-ui/components/badge\";\r\nimport { Button } from \"@repo/ayasofyazilim-ui/components/button\";\r\nimport {\r\n  Command,\r\n  CommandEmpty,\r\n  CommandGroup,\r\n  CommandInput,\r\n  CommandItem,\r\n  CommandList,\r\n  CommandSeparator,\r\n} from \"@repo/ayasofyazilim-ui/components/command\";\r\nimport {\r\n  Popover,\r\n  PopoverContent,\r\n  PopoverTrigger,\r\n} from \"@repo/ayasofyazilim-ui/components/popover\";\r\nimport { Separator } from \"@repo/ayasofyazilim-ui/components/separator\";\r\nimport { cn } from \"@repo/ayasofyazilim-ui/lib/utils\";\r\nimport { TanstackTableFacetedFilterType } from \"../types\";\r\n\r\ninterface DataTableFacetedFilterProps<TData, TValue> {\r\n  accessorKey: string;\r\n  column?: Column<TData, TValue>;\r\n  onFilter: (accessorKey: string, selectedValues: string) => void;\r\n  options: TanstackTableFacetedFilterType[];\r\n  params: URLSearchParams;\r\n  title: string;\r\n}\r\n\r\nexport function TanstackTableFacetedFilter<TData, TValue>({\r\n  column,\r\n  accessorKey,\r\n  options,\r\n  onFilter,\r\n  params,\r\n  title,\r\n}: DataTableFacetedFilterProps<TData, TValue>) {\r\n  const facets = column?.getFacetedUniqueValues();\r\n  const [selectedValues, setSelectedValues] = useState(\r\n    new Set(params?.get(accessorKey)?.split(\",\") || [])\r\n  );\r\n  useEffect(() => {\r\n    setSelectedValues(new Set(params?.get(accessorKey)?.split(\",\") || []));\r\n  }, [params?.get(accessorKey)]);\r\n\r\n  return (\r\n    <Popover>\r\n      <PopoverTrigger asChild>\r\n        <Button variant=\"outline\" size=\"sm\" className=\"h-8 border-dashed\">\r\n          <CirclePlusIcon className=\"mr-2 h-4 w-4\" />\r\n          {title}\r\n          {selectedValues?.size > 0 && (\r\n            <>\r\n              <Separator orientation=\"vertical\" className=\"mx-2 h-4\" />\r\n              <Badge\r\n                variant=\"secondary\"\r\n                className=\"rounded-sm px-1 font-normal lg:hidden\"\r\n              >\r\n                {selectedValues.size}\r\n              </Badge>\r\n              <div className=\"hidden space-x-1 lg:flex\">\r\n                {selectedValues.size > 2 ? (\r\n                  <Badge\r\n                    variant=\"secondary\"\r\n                    className=\"rounded-sm px-1 font-normal\"\r\n                  >\r\n                    {selectedValues.size} Selected\r\n                  </Badge>\r\n                ) : (\r\n                  options\r\n                    .filter((option) => selectedValues.has(option.value))\r\n                    .map((option) => (\r\n                      <Badge\r\n                        variant=\"secondary\"\r\n                        key={option.value}\r\n                        className=\"rounded-sm px-1 font-normal\"\r\n                      >\r\n                        {option.label}\r\n                      </Badge>\r\n                    ))\r\n                )}\r\n              </div>\r\n            </>\r\n          )}\r\n        </Button>\r\n      </PopoverTrigger>\r\n      <PopoverContent className=\"w-[200px] p-0\" align=\"start\">\r\n        <Command>\r\n          <CommandInput placeholder={title} />\r\n          <CommandList>\r\n            <CommandEmpty>No Filter results</CommandEmpty>\r\n            <CommandGroup>\r\n              {options.map((option) => {\r\n                const isSelected = selectedValues.has(option.value);\r\n                return (\r\n                  <CommandItem\r\n                    key={option.value}\r\n                    onSelect={() => {\r\n                      const current = Array.from(selectedValues);\r\n                      if (isSelected) {\r\n                        current.splice(\r\n                          current.findIndex((i) => i === option.value),\r\n                          1\r\n                        );\r\n                      } else {\r\n                        current.push(option.value);\r\n                      }\r\n\r\n                      onFilter(accessorKey, current.join(\",\"));\r\n                      setSelectedValues(new Set(current));\r\n                    }}\r\n                  >\r\n                    <div\r\n                      className={cn(\r\n                        \"mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary\",\r\n                        isSelected\r\n                          ? \"bg-primary text-primary-foreground\"\r\n                          : \"opacity-50 [&_svg]:invisible\"\r\n                      )}\r\n                    >\r\n                      <CheckIcon className={cn(\"h-4 w-4\")} />\r\n                    </div>\r\n                    {option.icon && (\r\n                      <option.icon className=\"mr-2 h-4 w-4 text-muted-foreground\" />\r\n                    )}\r\n                    <span>{option.label}</span>\r\n                    {facets?.get(option.value) && (\r\n                      <span className=\"ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs\">\r\n                        {facets.get(option.value)}\r\n                      </span>\r\n                    )}\r\n                  </CommandItem>\r\n                );\r\n              })}\r\n            </CommandGroup>\r\n            {selectedValues.size > 0 && (\r\n              <>\r\n                <CommandSeparator />\r\n                <CommandGroup>\r\n                  <CommandItem\r\n                    onSelect={() => onFilter(accessorKey, \"\")}\r\n                    className=\"justify-center text-center\"\r\n                  >\r\n                    Clean Filter\r\n                  </CommandItem>\r\n                </CommandGroup>\r\n              </>\r\n            )}\r\n          </CommandList>\r\n        </Command>\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n}\r\n"],"mappings":"AAqDU,SAGE,UAHF,KAaQ,YAbR;AArDV,SAAS,WAAW,sBAAsB;AAG1C,SAAS,WAAW,gBAAgB;AACpC,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB;AAC1B,SAAS,UAAU;AAYZ,SAAS,2BAA0C;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA+C;AAC7C,QAAM,SAAS,QAAQ,uBAAuB;AAC9C,QAAM,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,IAC1C,IAAI,IAAI,QAAQ,IAAI,WAAW,GAAG,MAAM,GAAG,KAAK,CAAC,CAAC;AAAA,EACpD;AACA,YAAU,MAAM;AACd,sBAAkB,IAAI,IAAI,QAAQ,IAAI,WAAW,GAAG,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC;AAAA,EACvE,GAAG,CAAC,QAAQ,IAAI,WAAW,CAAC,CAAC;AAE7B,SACE,qBAAC,WACC;AAAA,wBAAC,kBAAe,SAAO,MACrB,+BAAC,UAAO,SAAQ,WAAU,MAAK,MAAK,WAAU,qBAC5C;AAAA,0BAAC,kBAAe,WAAU,gBAAe;AAAA,MACxC;AAAA,MACA,gBAAgB,OAAO,KACtB,iCACE;AAAA,4BAAC,aAAU,aAAY,YAAW,WAAU,YAAW;AAAA,QACvD;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,WAAU;AAAA,YAET,yBAAe;AAAA;AAAA,QAClB;AAAA,QACA,oBAAC,SAAI,WAAU,4BACZ,yBAAe,OAAO,IACrB;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,WAAU;AAAA,YAET;AAAA,6BAAe;AAAA,cAAK;AAAA;AAAA;AAAA,QACvB,IAEA,QACG,OAAO,CAAC,WAAW,eAAe,IAAI,OAAO,KAAK,CAAC,EACnD,IAAI,CAAC,WACJ;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YAER,WAAU;AAAA,YAET,iBAAO;AAAA;AAAA,UAHH,OAAO;AAAA,QAId,CACD,GAEP;AAAA,SACF;AAAA,OAEJ,GACF;AAAA,IACA,oBAAC,kBAAe,WAAU,iBAAgB,OAAM,SAC9C,+BAAC,WACC;AAAA,0BAAC,gBAAa,aAAa,OAAO;AAAA,MAClC,qBAAC,eACC;AAAA,4BAAC,gBAAa,+BAAiB;AAAA,QAC/B,oBAAC,gBACE,kBAAQ,IAAI,CAAC,WAAW;AACvB,gBAAM,aAAa,eAAe,IAAI,OAAO,KAAK;AAClD,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,UAAU,MAAM;AACd,sBAAM,UAAU,MAAM,KAAK,cAAc;AACzC,oBAAI,YAAY;AACd,0BAAQ;AAAA,oBACN,QAAQ,UAAU,CAAC,MAAM,MAAM,OAAO,KAAK;AAAA,oBAC3C;AAAA,kBACF;AAAA,gBACF,OAAO;AACL,0BAAQ,KAAK,OAAO,KAAK;AAAA,gBAC3B;AAEA,yBAAS,aAAa,QAAQ,KAAK,GAAG,CAAC;AACvC,kCAAkB,IAAI,IAAI,OAAO,CAAC;AAAA,cACpC;AAAA,cAEA;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAW;AAAA,sBACT;AAAA,sBACA,aACI,uCACA;AAAA,oBACN;AAAA,oBAEA,8BAAC,aAAU,WAAW,GAAG,SAAS,GAAG;AAAA;AAAA,gBACvC;AAAA,gBACC,OAAO,QACN,oBAAC,OAAO,MAAP,EAAY,WAAU,sCAAqC;AAAA,gBAE9D,oBAAC,UAAM,iBAAO,OAAM;AAAA,gBACnB,QAAQ,IAAI,OAAO,KAAK,KACvB,oBAAC,UAAK,WAAU,sEACb,iBAAO,IAAI,OAAO,KAAK,GAC1B;AAAA;AAAA;AAAA,YAjCG,OAAO;AAAA,UAmCd;AAAA,QAEJ,CAAC,GACH;AAAA,QACC,eAAe,OAAO,KACrB,iCACE;AAAA,8BAAC,oBAAiB;AAAA,UAClB,oBAAC,gBACC;AAAA,YAAC;AAAA;AAAA,cACC,UAAU,MAAM,SAAS,aAAa,EAAE;AAAA,cACxC,WAAU;AAAA,cACX;AAAA;AAAA,UAED,GACF;AAAA,WACF;AAAA,SAEJ;AAAA,OACF,GACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/custom/tanstack-table/fields/tanstack-table-filter-text.js

@@ -0,0 +1,64 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CirclePlusIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Button } from "@repo/ayasofyazilim-ui/components/button";
+import {
+  Command,
+  CommandInput
+} from "@repo/ayasofyazilim-ui/components/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from "@repo/ayasofyazilim-ui/components/popover";
+import { Separator } from "@repo/ayasofyazilim-ui/components/separator";
+import { useDebounce } from "@repo/ayasofyazilim-ui/hooks/use-debounce";
+function TanstackTableTextFilter({
+  column,
+  title: _title,
+  accessorKey,
+  params,
+  onFilter
+}) {
+  const title = _title || column?.columnDef?.meta?.toString() || accessorKey;
+  const [searchInput, setSearchInput] = useState("");
+  const filterValue = useDebounce(searchInput || "", 500);
+  useEffect(() => {
+    if (params?.get(accessorKey) !== filterValue) {
+      onFilter(accessorKey, filterValue);
+    }
+  }, [filterValue]);
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className: "h-8 border-dashed", children: [
+      /* @__PURE__ */ jsx(CirclePlusIcon, { className: "mr-2 h-4 w-4" }),
+      title,
+      filterValue?.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "mx-2 h-4" }),
+        /* @__PURE__ */ jsx("div", { className: "hidden space-x-1 lg:flex", children: filterValue })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { className: "w-[200px] p-0", align: "start", children: [
+      /* @__PURE__ */ jsx(Command, { children: /* @__PURE__ */ jsx(
+        CommandInput,
+        {
+          placeholder: title,
+          value: searchInput,
+          onValueChange: (value) => setSearchInput(value)
+        }
+      ) }),
+      /* @__PURE__ */ jsx("div", { className: "p-1", children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: () => setSearchInput(""),
+          variant: "ghost",
+          className: "justify-center text-center w-full hover:bg-accent text-accent-foreground",
+          children: "Clean Filter"
+        }
+      ) })
+    ] })
+  ] });
+}
+export {
+  TanstackTableTextFilter
+};
+//# sourceMappingURL=tanstack-table-filter-text.js.map

package/dist/custom/tanstack-table/fields/tanstack-table-filter-text.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/custom/tanstack-table/fields/tanstack-table-filter-text.tsx"],"sourcesContent":["import { CirclePlusIcon } from \"lucide-react\";\r\nimport { Column } from \"@tanstack/react-table\";\r\n\r\nimport { useEffect, useState } from \"react\";\r\nimport { Button } from \"@repo/ayasofyazilim-ui/components/button\";\r\nimport {\r\n  Command,\r\n  CommandInput,\r\n} from \"@repo/ayasofyazilim-ui/components/command\";\r\nimport {\r\n  Popover,\r\n  PopoverContent,\r\n  PopoverTrigger,\r\n} from \"@repo/ayasofyazilim-ui/components/popover\";\r\nimport { Separator } from \"@repo/ayasofyazilim-ui/components/separator\";\r\nimport { useDebounce } from \"@repo/ayasofyazilim-ui/hooks/use-debounce\";\r\n\r\ninterface TanstackTableTextFilterProps<TData, TValue> {\r\n  accessorKey: string;\r\n  column?: Column<TData, TValue>;\r\n  onFilter: (accessorKey: string, selectedValues: string) => void;\r\n  params: URLSearchParams;\r\n  title?: string;\r\n}\r\n\r\nexport function TanstackTableTextFilter<TData, TValue>({\r\n  column,\r\n  title: _title,\r\n  accessorKey,\r\n  params,\r\n  onFilter,\r\n}: TanstackTableTextFilterProps<TData, TValue>) {\r\n  const title = _title || column?.columnDef?.meta?.toString() || accessorKey;\r\n  const [searchInput, setSearchInput] = useState(\"\");\r\n  const filterValue = useDebounce(searchInput || \"\", 500);\r\n\r\n  useEffect(() => {\r\n    if (params?.get(accessorKey) !== filterValue) {\r\n      onFilter(accessorKey, filterValue);\r\n    }\r\n  }, [filterValue]);\r\n  return (\r\n    <Popover>\r\n      <PopoverTrigger asChild>\r\n        <Button variant=\"outline\" size=\"sm\" className=\"h-8 border-dashed\">\r\n          <CirclePlusIcon className=\"mr-2 h-4 w-4\" />\r\n          {title}\r\n          {filterValue?.length > 0 && (\r\n            <>\r\n              <Separator orientation=\"vertical\" className=\"mx-2 h-4\" />\r\n              <div className=\"hidden space-x-1 lg:flex\">{filterValue}</div>\r\n            </>\r\n          )}\r\n        </Button>\r\n      </PopoverTrigger>\r\n      <PopoverContent className=\"w-[200px] p-0\" align=\"start\">\r\n        <Command>\r\n          <CommandInput\r\n            placeholder={title}\r\n            value={searchInput}\r\n            onValueChange={(value) => setSearchInput(value)}\r\n          />\r\n        </Command>\r\n        <div className=\"p-1\">\r\n          <Button\r\n            onClick={() => setSearchInput(\"\")}\r\n            variant=\"ghost\"\r\n            className=\"justify-center text-center w-full hover:bg-accent text-accent-foreground\"\r\n          >\r\n            Clean Filter\r\n          </Button>\r\n        </div>\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n}\r\n"],"mappings":"AA6CU,SAGE,UAHF,KAGE,YAHF;AA7CV,SAAS,sBAAsB;AAG/B,SAAS,WAAW,gBAAgB;AACpC,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAUrB,SAAS,wBAAuC;AAAA,EACrD;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AACF,GAAgD;AAC9C,QAAM,QAAQ,UAAU,QAAQ,WAAW,MAAM,SAAS,KAAK;AAC/D,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,EAAE;AACjD,QAAM,cAAc,YAAY,eAAe,IAAI,GAAG;AAEtD,YAAU,MAAM;AACd,QAAI,QAAQ,IAAI,WAAW,MAAM,aAAa;AAC5C,eAAS,aAAa,WAAW;AAAA,IACnC;AAAA,EACF,GAAG,CAAC,WAAW,CAAC;AAChB,SACE,qBAAC,WACC;AAAA,wBAAC,kBAAe,SAAO,MACrB,+BAAC,UAAO,SAAQ,WAAU,MAAK,MAAK,WAAU,qBAC5C;AAAA,0BAAC,kBAAe,WAAU,gBAAe;AAAA,MACxC;AAAA,MACA,aAAa,SAAS,KACrB,iCACE;AAAA,4BAAC,aAAU,aAAY,YAAW,WAAU,YAAW;AAAA,QACvD,oBAAC,SAAI,WAAU,4BAA4B,uBAAY;AAAA,SACzD;AAAA,OAEJ,GACF;AAAA,IACA,qBAAC,kBAAe,WAAU,iBAAgB,OAAM,SAC9C;AAAA,0BAAC,WACC;AAAA,QAAC;AAAA;AAAA,UACC,aAAa;AAAA,UACb,OAAO;AAAA,UACP,eAAe,CAAC,UAAU,eAAe,KAAK;AAAA;AAAA,MAChD,GACF;AAAA,MACA,oBAAC,SAAI,WAAU,OACb;AAAA,QAAC;AAAA;AAAA,UACC,SAAS,MAAM,eAAe,EAAE;AAAA,UAChC,SAAQ;AAAA,UACR,WAAU;AAAA,UACX;AAAA;AAAA,MAED,GACF;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/custom/tanstack-table/fields/tanstack-table-pagination.js

@@ -0,0 +1,135 @@
+"use no memo";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronsLeftIcon,
+  ChevronsRightIcon
+} from "lucide-react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useEffect } from "react";
+import { Button } from "@repo/ayasofyazilim-ui/components/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@repo/ayasofyazilim-ui/components/select";
+function TanstackTablePagination(props) {
+  const { table, pagination } = props;
+  const { replace } = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  useEffect(() => {
+    const params = new URLSearchParams(searchParams.toString());
+    if (Number(searchParams?.get("maxResultCount")) !== pagination.pageSize) {
+      params.set("maxResultCount", pagination.pageSize.toString());
+    }
+    if (Number(searchParams?.get("skipCount")) !== pagination.pageIndex * pagination.pageSize) {
+      params.set(
+        "skipCount",
+        (pagination.pageIndex * pagination.pageSize).toString()
+      );
+    }
+    if (Number(params?.get("maxResultCount")) === 10) {
+      params.delete("maxResultCount");
+    }
+    if (Number(params?.get("skipCount")) === 0) {
+      params.delete("skipCount");
+    }
+    replace(`${pathname}?${params.toString()}`);
+  }, [pagination]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center flex-wrap", children: [
+    table.getIsSomeRowsSelected() && /* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground text-nowrap", children: [
+      table.getFilteredSelectedRowModel().rows.length,
+      " of",
+      " ",
+      table.getFilteredRowModel().rows.length,
+      " row(s) selected."
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center flex-wrap gap-2 w-full sm:w-auto ml-auto", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center w-full justify-between gap-2 sm:w-auto md:mr-4", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Rows per page" }),
+        /* @__PURE__ */ jsxs(
+          Select,
+          {
+            value: `${table.getState().pagination.pageSize}`,
+            onValueChange: (value) => {
+              table.setPageSize(Number(value));
+            },
+            children: [
+              /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 w-[70px]", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: table.getState().pagination.pageSize }) }),
+              /* @__PURE__ */ jsx(SelectContent, { side: "top", children: [10, 20, 30, 40, 50].map((pageSize) => /* @__PURE__ */ jsx(SelectItem, { value: `${pageSize}`, children: pageSize }, pageSize)) })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center text-sm font-medium mr-auto", children: [
+        "Page ",
+        table.getState().pagination.pageIndex + 1,
+        " of",
+        " ",
+        table.getPageCount()
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "outline",
+            className: "hidden h-8 w-8 p-0 lg:flex",
+            onClick: () => table.setPageIndex(0),
+            disabled: !table.getCanPreviousPage(),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Go to first page" }),
+              /* @__PURE__ */ jsx(ChevronsLeftIcon, { className: "h-4 w-4" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "outline",
+            className: "h-8 w-8 p-0",
+            onClick: () => table.previousPage(),
+            disabled: !table.getCanPreviousPage(),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Go to previous page" }),
+              /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "h-4 w-4" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "outline",
+            className: "h-8 w-8 p-0",
+            onClick: () => table.nextPage(),
+            disabled: !table.getCanNextPage(),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Go to next page" }),
+              /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-4 w-4" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "outline",
+            className: "hidden h-8 w-8 p-0 lg:flex",
+            onClick: () => table.setPageIndex(table.getPageCount() - 1),
+            disabled: !table.getCanNextPage(),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Go to last page" }),
+              /* @__PURE__ */ jsx(ChevronsRightIcon, { className: "h-4 w-4" })
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+export {
+  TanstackTablePagination
+};
+//# sourceMappingURL=tanstack-table-pagination.js.map

package/dist/custom/tanstack-table/fields/tanstack-table-pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/custom/tanstack-table/fields/tanstack-table-pagination.tsx"],"sourcesContent":["\"use no memo\";\r\nimport {\r\n  ChevronLeftIcon,\r\n  ChevronRightIcon,\r\n  ChevronsLeftIcon,\r\n  ChevronsRightIcon,\r\n} from \"lucide-react\";\r\nimport { Table } from \"@tanstack/react-table\";\r\n\r\nimport { usePathname, useRouter, useSearchParams } from \"next/navigation\";\r\nimport { useEffect } from \"react\";\r\nimport { Button } from \"@repo/ayasofyazilim-ui/components/button\";\r\nimport {\r\n  Select,\r\n  SelectContent,\r\n  SelectItem,\r\n  SelectTrigger,\r\n  SelectValue,\r\n} from \"@repo/ayasofyazilim-ui/components/select\";\r\n\r\ninterface TanstackTablePaginationProps<TData> {\r\n  pagination: {\r\n    pageIndex: number;\r\n    pageSize: number;\r\n  };\r\n  table: Table<TData>;\r\n}\r\n\r\nexport function TanstackTablePagination<TData>(\r\n  props: TanstackTablePaginationProps<TData>\r\n) {\r\n  const { table, pagination } = props;\r\n  const { replace } = useRouter();\r\n  const pathname = usePathname();\r\n  const searchParams = useSearchParams();\r\n\r\n  useEffect(() => {\r\n    const params = new URLSearchParams(searchParams.toString());\r\n\r\n    if (Number(searchParams?.get(\"maxResultCount\")) !== pagination.pageSize) {\r\n      params.set(\"maxResultCount\", pagination.pageSize.toString());\r\n    }\r\n    if (\r\n      Number(searchParams?.get(\"skipCount\")) !==\r\n      pagination.pageIndex * pagination.pageSize\r\n    ) {\r\n      params.set(\r\n        \"skipCount\",\r\n        (pagination.pageIndex * pagination.pageSize).toString()\r\n      );\r\n    }\r\n    if (Number(params?.get(\"maxResultCount\")) === 10) {\r\n      params.delete(\"maxResultCount\");\r\n    }\r\n    if (Number(params?.get(\"skipCount\")) === 0) {\r\n      params.delete(\"skipCount\");\r\n    }\r\n\r\n    replace(`${pathname}?${params.toString()}`);\r\n  }, [pagination]);\r\n\r\n  return (\r\n    <div className=\"flex items-center flex-wrap\">\r\n      {table.getIsSomeRowsSelected() && (\r\n        <div className=\"text-sm text-muted-foreground text-nowrap\">\r\n          {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\r\n          {table.getFilteredRowModel().rows.length} row(s) selected.\r\n        </div>\r\n      )}\r\n      <div className=\"flex items-center flex-wrap gap-2 w-full sm:w-auto ml-auto\">\r\n        <div className=\"flex items-center w-full justify-between gap-2 sm:w-auto md:mr-4\">\r\n          <p className=\"text-sm font-medium\">Rows per page</p>\r\n          <Select\r\n            value={`${table.getState().pagination.pageSize}`}\r\n            onValueChange={(value) => {\r\n              table.setPageSize(Number(value));\r\n            }}\r\n          >\r\n            <SelectTrigger className=\"h-8 w-[70px]\">\r\n              <SelectValue placeholder={table.getState().pagination.pageSize} />\r\n            </SelectTrigger>\r\n            <SelectContent side=\"top\">\r\n              {[10, 20, 30, 40, 50].map((pageSize) => (\r\n                <SelectItem key={pageSize} value={`${pageSize}`}>\r\n                  {pageSize}\r\n                </SelectItem>\r\n              ))}\r\n            </SelectContent>\r\n          </Select>\r\n        </div>\r\n        <div className=\"flex items-center justify-center text-sm font-medium mr-auto\">\r\n          Page {table.getState().pagination.pageIndex + 1} of{\" \"}\r\n          {table.getPageCount()}\r\n        </div>\r\n        <div className=\"flex items-center gap-x-2\">\r\n          <Button\r\n            variant=\"outline\"\r\n            className=\"hidden h-8 w-8 p-0 lg:flex\"\r\n            onClick={() => table.setPageIndex(0)}\r\n            disabled={!table.getCanPreviousPage()}\r\n          >\r\n            <span className=\"sr-only\">Go to first page</span>\r\n            <ChevronsLeftIcon className=\"h-4 w-4\" />\r\n          </Button>\r\n          <Button\r\n            variant=\"outline\"\r\n            className=\"h-8 w-8 p-0\"\r\n            onClick={() => table.previousPage()}\r\n            disabled={!table.getCanPreviousPage()}\r\n          >\r\n            <span className=\"sr-only\">Go to previous page</span>\r\n            <ChevronLeftIcon className=\"h-4 w-4\" />\r\n          </Button>\r\n          <Button\r\n            variant=\"outline\"\r\n            className=\"h-8 w-8 p-0\"\r\n            onClick={() => table.nextPage()}\r\n            disabled={!table.getCanNextPage()}\r\n          >\r\n            <span className=\"sr-only\">Go to next page</span>\r\n            <ChevronRightIcon className=\"h-4 w-4\" />\r\n          </Button>\r\n          <Button\r\n            variant=\"outline\"\r\n            className=\"hidden h-8 w-8 p-0 lg:flex\"\r\n            onClick={() => table.setPageIndex(table.getPageCount() - 1)}\r\n            disabled={!table.getCanNextPage()}\r\n          >\r\n            <span className=\"sr-only\">Go to last page</span>\r\n            <ChevronsRightIcon className=\"h-4 w-4\" />\r\n          </Button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"mappings":"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","names":[]}

package/dist/custom/tanstack-table/fields/tanstack-table-plain-table.js

@@ -0,0 +1,111 @@
+"use no memo";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  flexRender
+} from "@tanstack/react-table";
+import { Fragment } from "react";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from "@repo/ayasofyazilim-ui/components/table";
+import { getCommonPinningStyles } from "../utils";
+function TanstackTablePlainTable({
+  table,
+  columns,
+  fillerColumn,
+  editable,
+  resizeable,
+  expandedRowComponent
+}) {
+  return /* @__PURE__ */ jsxs(Table, { style: { width: table.getCenterTotalSize(), minWidth: "100%" }, children: [
+    /* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { className: "group", children: headerGroup.headers.map((header) => {
+      if (header.id === "actions") return null;
+      return /* @__PURE__ */ jsxs(
+        TableHead,
+        {
+          colSpan: header.colSpan,
+          className: cn(
+            " relative group/th border-r border-gray-200",
+            header.column.getIsResizing() && "border-dashed border-black border-r"
+          ),
+          style: {
+            ...getCommonPinningStyles({
+              column: header.column,
+              withBorder: true,
+              fillerColumn,
+              resizeable
+            })
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  header.column.getIsResizing() && "resizing",
+                  "group-has-[.resizing]:pointer-events-none group-has-[.resizing]:select-none"
+                ),
+                children: header.isPlaceholder ? null : flexRender(
+                  header.column.columnDef.header,
+                  header.getContext()
+                )
+              }
+            ),
+            resizeable && /* @__PURE__ */ jsx(
+              "div",
+              {
+                onDoubleClick: () => header.column.resetSize(),
+                onMouseDown: header.getResizeHandler(),
+                onTouchStart: header.getResizeHandler(),
+                role: "button",
+                tabIndex: 0,
+                "aria-label": "Resize column",
+                className: "resizer w-0.5 hidden group-hover:flex absolute right-0 bg-muted-foreground top-0 h-10 z-10 items-center cursor-col-resize select-none touch-none"
+              }
+            )
+          ]
+        },
+        header.id
+      );
+    }) }, headerGroup.id)) }),
+    /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        TableRow,
+        {
+          "data-state": row.getIsSelected() && "selected",
+          className: cn(editable && "[&>td:last-child]:border-r-0"),
+          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(
+            TableCell,
+            {
+              className: cn(
+                (editable || cell.column.id === "actions") && "p-0 border border-b-0 border-r-0"
+              ),
+              style: {
+                ...getCommonPinningStyles({
+                  column: cell.column,
+                  fillerColumn,
+                  resizeable,
+                  withBorder: true
+                })
+              },
+              children: flexRender(cell.column.columnDef.cell, cell.getContext())
+            },
+            cell.id
+          ))
+        }
+      ),
+      row.getIsExpanded() && expandedRowComponent && /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: row.getAllCells().length, children: expandedRowComponent(
+        row.original,
+        row.getToggleExpandedHandler()
+      ) }) })
+    ] }, row.id)) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length, className: "h-auto text-center", children: "No data results" }) }) })
+  ] });
+}
+export {
+  TanstackTablePlainTable
+};
+//# sourceMappingURL=tanstack-table-plain-table.js.map