@manufac/react-components-potli 1.0.4 → 1.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/dist/index.js +1 -1
  2. package/dist/tsc/components/CustomDateTimePicker/index.js +34 -0
  3. package/dist/tsc/components/CustomDateTimePicker/index.js.map +1 -0
  4. package/dist/tsc/components/CustomDateTimePicker/index.stories.js +19 -0
  5. package/dist/tsc/components/CustomDateTimePicker/index.stories.js.map +1 -0
  6. package/dist/tsc/components/CustomDateTimePicker/utils.js +13 -0
  7. package/dist/tsc/components/CustomDateTimePicker/utils.js.map +1 -0
  8. package/dist/tsc/components/CustomEventTimelineChart/index.js +6 -6
  9. package/dist/tsc/components/CustomTable/index.js +22 -11
  10. package/dist/tsc/components/CustomTable/index.js.map +1 -1
  11. package/dist/tsc/components/CustomTable/index.stories.js +7 -0
  12. package/dist/tsc/components/CustomTable/index.stories.js.map +1 -1
  13. package/dist/tsc/components/CustomTable/utils.js +12 -1
  14. package/dist/tsc/components/CustomTable/utils.js.map +1 -1
  15. package/dist/tsc/index.js +1 -0
  16. package/dist/tsc/index.js.map +1 -1
  17. package/dist/tsc/tsconfig.tsbuildinfo +1 -1
  18. package/dist/types/components/CustomDateTimePicker/index.d.ts +12 -0
  19. package/dist/types/components/CustomDateTimePicker/index.d.ts.map +1 -0
  20. package/dist/types/components/CustomDateTimePicker/index.stories.d.ts +6 -0
  21. package/dist/types/components/CustomDateTimePicker/index.stories.d.ts.map +1 -0
  22. package/dist/types/components/CustomDateTimePicker/utils.d.ts +3 -0
  23. package/dist/types/components/CustomDateTimePicker/utils.d.ts.map +1 -0
  24. package/dist/types/components/CustomTable/index.d.ts.map +1 -1
  25. package/dist/types/components/CustomTable/index.stories.d.ts.map +1 -1
  26. package/dist/types/components/CustomTable/utils.d.ts +3 -1
  27. package/dist/types/components/CustomTable/utils.d.ts.map +1 -1
  28. package/dist/types/index.d.ts +1 -0
  29. package/dist/types/index.d.ts.map +1 -1
  30. package/package.json +4 -1
@@ -0,0 +1,34 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { customDateFormatter } from "./utils";
3
+ import { InputWrapper } from "@mantine/core";
4
+ import { DatePickerInput, TimePicker } from "@mantine/dates";
5
+ import dayjs from "dayjs";
6
+ export function CustomDateTimePicker({ wrapperProps, datePickerInputProps, timePickerInputProps, onChange, value, }) {
7
+ const onDateChange = (date) => {
8
+ if (typeof date === "string") {
9
+ const existingHour = value.getHours();
10
+ const existingMinute = value.getMinutes();
11
+ onChange(dayjs(date).hour(existingHour).minute(existingMinute).toDate());
12
+ }
13
+ };
14
+ const onTimeChange = (time) => {
15
+ const timePart = time.split(":");
16
+ const parsedHours = Number.parseInt(timePart[0], 10);
17
+ const parsedMinutes = Number.parseInt(timePart[1], 10);
18
+ if (Number.isFinite(parsedHours) === true && Number.isFinite(parsedMinutes) === true) {
19
+ onChange(dayjs(value).hour(parsedHours).minute(parsedMinutes).toDate());
20
+ }
21
+ };
22
+ return (_jsx(InputWrapper, { ...wrapperProps, children: _jsx(DatePickerInput, { ...datePickerInputProps, value: new Date(value), onChange: onDateChange, valueFormatter: customDateFormatter, rightSection: _jsx(TimePicker, { ...timePickerInputProps, value: dayjs(value).format("HH:mm"), onChange: onTimeChange, w: "100%", withDropdown: true, format: "12h", styles: {
23
+ input: {
24
+ borderTopLeftRadius: "0px",
25
+ borderBottomLeftRadius: "0px",
26
+ borderRight: "none",
27
+ },
28
+ } }), rightSectionProps: {
29
+ style: {
30
+ width: "110px",
31
+ },
32
+ } }) }));
33
+ }
34
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/CustomDateTimePicker/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,MAAM,UAAU,oBAAoB,CAAC,EACnC,YAAY,EACZ,oBAAoB,EACpB,oBAAoB,EACpB,QAAQ,EACR,KAAK,GACqB;IAC1B,MAAM,YAAY,GAAqC,CAAC,IAAI,EAAE,EAAE;QAC9D,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;YAC7B,MAAM,YAAY,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC;YACtC,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,EAAE,CAAC;YAC1C,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC;QAC3E,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,YAAY,GAAgC,CAAC,IAAI,EAAE,EAAE;QACzD,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QACjC,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;QACrD,MAAM,aAAa,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;QACvD,IAAI,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC,KAAK,IAAI,IAAI,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,IAAI,EAAE,CAAC;YACrF,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC;QAC1E,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,YAAY,OAAK,YAAY,YAC5B,KAAC,eAAe,OACV,oBAAoB,EACxB,KAAK,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC,EACtB,QAAQ,EAAE,YAAY,EACtB,cAAc,EAAE,mBAAmB,EACnC,YAAY,EACV,KAAC,UAAU,OACL,oBAAoB,EACxB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EACnC,QAAQ,EAAE,YAAY,EACtB,CAAC,EAAC,MAAM,EACR,YAAY,QACZ,MAAM,EAAC,KAAK,EACZ,MAAM,EAAE;oBACN,KAAK,EAAE;wBACL,mBAAmB,EAAE,KAAK;wBAC1B,sBAAsB,EAAE,KAAK;wBAC7B,WAAW,EAAE,MAAM;qBACpB;iBACF,GACD,EAEJ,iBAAiB,EAAE;gBACjB,KAAK,EAAE;oBACL,KAAK,EAAE,OAAO;iBACf;aACF,GACD,GACW,CAChB,CAAC;AACJ,CAAC"}
@@ -0,0 +1,19 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { CustomDateTimePicker } from ".";
3
+ import { useState } from "react";
4
+ export default {
5
+ title: "CustomDateTimePicker",
6
+ component: CustomDateTimePicker,
7
+ args: {
8
+ wrapperProps: {
9
+ label: "Date & Time",
10
+ },
11
+ },
12
+ };
13
+ export const Template = {
14
+ render: (args) => {
15
+ const [dateTime, setDateTime] = useState(new Date());
16
+ return _jsx(CustomDateTimePicker, { ...args, value: dateTime, onChange: setDateTime });
17
+ },
18
+ };
19
+ //# sourceMappingURL=index.stories.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/CustomDateTimePicker/index.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,GAAG,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjC,eAAe;IACb,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,oBAAoB;IAC/B,IAAI,EAAE;QACJ,YAAY,EAAE;YACZ,KAAK,EAAE,aAAa;SACrB;KACF;CACmC,CAAC;AAEvC,MAAM,CAAC,MAAM,QAAQ,GAA0C;IAC7D,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;QACf,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAO,IAAI,IAAI,EAAE,CAAC,CAAC;QAC3D,OAAO,KAAC,oBAAoB,OAAK,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,GAAI,CAAC;IACpF,CAAC;CACF,CAAC"}
@@ -0,0 +1,13 @@
1
+ export const customDateFormatter = ({ date }) => {
2
+ let result = "Invalid date";
3
+ if (date instanceof Date || typeof date === "string") {
4
+ const dateValue = date instanceof Date ? date : new Date(date);
5
+ result = dateValue.toLocaleString(undefined, {
6
+ month: "short",
7
+ day: "2-digit",
8
+ year: "numeric",
9
+ });
10
+ }
11
+ return result;
12
+ };
13
+ //# sourceMappingURL=utils.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/CustomDateTimePicker/utils.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,mBAAmB,GAAkB,CAAC,EAAE,IAAI,EAAE,EAAU,EAAE;IACrE,IAAI,MAAM,GAAG,cAAc,CAAC;IAC5B,IAAI,IAAI,YAAY,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;QACrD,MAAM,SAAS,GAAG,IAAI,YAAY,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC;QAE/D,MAAM,GAAG,SAAS,CAAC,cAAc,CAAC,SAAS,EAAE;YAC3C,KAAK,EAAE,OAAO;YACd,GAAG,EAAE,SAAS;YACd,IAAI,EAAE,SAAS;SAChB,CAAC,CAAC;IACL,CAAC;IACD,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC"}
@@ -49,12 +49,12 @@ export function EventTimelineChart({ theme, data }) {
49
49
  hour: "2-digit",
50
50
  minute: "2-digit",
51
51
  });
52
- return `
53
- <div style="padding:6px">
54
- <b>${format.encodeHTML(event.event.toUpperCase())}</b><br/>
55
- Start: ${format.encodeHTML(startTime)}<br/>
56
- End: ${format.encodeHTML(endTime)}<br/>
57
- </div>
52
+ return `
53
+ <div style="padding:6px">
54
+ <b>${format.encodeHTML(event.event.toUpperCase())}</b><br/>
55
+ Start: ${format.encodeHTML(startTime)}<br/>
56
+ End: ${format.encodeHTML(endTime)}<br/>
57
+ </div>
58
58
  `;
59
59
  },
60
60
  },
@@ -1,29 +1,40 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { getSortingIcon, getTableBody, Sort } from "./utils";
2
+ import { getSortingIcon, getTableBody, Sort, getColumnFilterInput, FuzzyFilter } from "./utils";
3
3
  import { ActionIcon, Group, ScrollArea, Table } from "@mantine/core";
4
- import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable, } from "@tanstack/react-table";
4
+ import { flexRender, getCoreRowModel, getSortedRowModel, getFilteredRowModel, useReactTable, } from "@tanstack/react-table";
5
5
  import { useState } from "react";
6
6
  export function CustomTable({ data, isLoading, error, columns, }) {
7
7
  const [sorting, setSorting] = useState([]);
8
+ const [columnFilters, setColumnFilters] = useState([]);
8
9
  const table = useReactTable({
9
10
  data,
10
11
  columns,
11
12
  getCoreRowModel: getCoreRowModel(),
12
13
  getSortedRowModel: getSortedRowModel(),
14
+ getFilteredRowModel: getFilteredRowModel(),
13
15
  onSortingChange: setSorting,
16
+ onColumnFiltersChange: setColumnFilters,
14
17
  state: {
15
18
  sorting,
19
+ columnFilters,
20
+ },
21
+ filterFns: {
22
+ fuzzyFilter: FuzzyFilter,
16
23
  },
17
24
  });
18
- return (_jsx(ScrollArea, { children: _jsxs(Table, { highlightOnHover: true, withTableBorder: true, withColumnBorders: true, children: [_jsx(Table.Thead, { children: table.getHeaderGroups().map((headerGroup) => {
19
- return (_jsx(Table.Tr, { children: headerGroup.headers.map((header) => {
20
- return (_jsx(Table.Th, { onClick: header.column.getToggleSortingHandler(), children: _jsxs(Group, { gap: "xs", wrap: "nowrap", children: [flexRender(header.column.columnDef.header, header.getContext()), _jsx(ActionIcon, { variant: "subtle", size: "sm", children: (() => {
21
- const sortState = header.column.getIsSorted();
22
- const sortOrder = sortState === false ? Sort.Default : sortState;
23
- return getSortingIcon(sortOrder, header.column.getCanSort());
24
- })() })] }) }, header.id));
25
- }) }, headerGroup.id));
26
- }) }), _jsx(Table.Tbody, { children: getTableBody({
25
+ return (_jsx(ScrollArea, { children: _jsxs(Table, { highlightOnHover: true, withTableBorder: true, withColumnBorders: true, children: [_jsxs(Table.Thead, { children: [table.getHeaderGroups().map((headerGroup) => {
26
+ return (_jsx(Table.Tr, { children: headerGroup.headers.map((header) => {
27
+ return (_jsx(Table.Th, { onClick: header.column.getToggleSortingHandler(), children: _jsxs(Group, { gap: "xs", wrap: "nowrap", children: [flexRender(header.column.columnDef.header, header.getContext()), _jsx(ActionIcon, { variant: "subtle", size: "sm", children: (() => {
28
+ const sortState = header.column.getIsSorted();
29
+ const sortOrder = sortState === false ? Sort.Default : sortState;
30
+ return getSortingIcon(sortOrder, header.column.getCanSort());
31
+ })() })] }) }, header.id));
32
+ }) }, headerGroup.id));
33
+ }), table.getHeaderGroups().map((headerGroup) => {
34
+ return (_jsx(Table.Tr, { children: headerGroup.headers.map((header) => {
35
+ return _jsx(Table.Th, { children: getColumnFilterInput(header.column) }, header.id);
36
+ }) }, headerGroup.id));
37
+ })] }), _jsx(Table.Tbody, { children: getTableBody({
27
38
  isLoading,
28
39
  error,
29
40
  tableRows: table.getRowModel().rows,
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/CustomTable/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACrE,OAAO,EACL,UAAU,EACV,eAAe,EACf,iBAAiB,EACjB,aAAa,GACd,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAWjC,MAAM,UAAU,WAAW,CAAI,EAC7B,IAAI,EACJ,SAAS,EACT,KAAK,EACL,OAAO,GACa;IACpB,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAe,EAAE,CAAC,CAAC;IAEzD,MAAM,KAAK,GAAG,aAAa,CAAC;QAC1B,IAAI;QACJ,OAAO;QACP,eAAe,EAAE,eAAe,EAAE;QAClC,iBAAiB,EAAE,iBAAiB,EAAE;QACtC,eAAe,EAAE,UAAU;QAC3B,KAAK,EAAE;YACL,OAAO;SACR;KACF,CAAC,CAAC;IAEH,OAAO,CACL,KAAC,UAAU,cACT,MAAC,KAAK,IAAC,gBAAgB,QAAC,eAAe,QAAC,iBAAiB,mBACvD,KAAC,KAAK,CAAC,KAAK,cACT,KAAK,CAAC,eAAe,EAAE,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,EAAE;wBAC3C,OAAO,CACL,KAAC,KAAK,CAAC,EAAE,cACN,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;gCAClC,OAAO,CACL,KAAC,KAAK,CAAC,EAAE,IAAiB,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,uBAAuB,EAAE,YACxE,MAAC,KAAK,IAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,aAC1B,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,UAAU,EAAE,CAAC,EAChE,KAAC,UAAU,IAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,YACnC,CAAC,GAAG,EAAE;oDACL,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC;oDAC9C,MAAM,SAAS,GAAG,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;oDACjE,OAAO,cAAc,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC;gDAC/D,CAAC,CAAC,EAAE,GACO,IACP,IAVK,MAAM,CAAC,EAAE,CAWb,CACZ,CAAC;4BACJ,CAAC,CAAC,IAhBW,WAAW,CAAC,EAAE,CAiBlB,CACZ,CAAC;oBACJ,CAAC,CAAC,GACU,EACd,KAAC,KAAK,CAAC,KAAK,cACT,YAAY,CAAC;wBACZ,SAAS;wBACT,KAAK;wBACL,SAAS,EAAE,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI;wBACnC,WAAW,EAAE,OAAO,CAAC,MAAM;qBAC5B,CAAC,GACU,IACR,GACG,CACd,CAAC;AACJ,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/CustomTable/index.tsx"],"names":[],"mappings":"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"}
@@ -15,12 +15,17 @@ const ColumnHelper = createColumnHelper();
15
15
  const Columns = [
16
16
  ColumnHelper.accessor("id", {
17
17
  header: "ID",
18
+ enableColumnFilter: false,
18
19
  }),
19
20
  ColumnHelper.accessor("name", {
20
21
  header: "Name",
22
+ enableColumnFilter: true,
23
+ filterFn: "fuzzyFilter",
21
24
  }),
22
25
  ColumnHelper.accessor("email", {
23
26
  header: "Email",
27
+ enableColumnFilter: true,
28
+ filterFn: "fuzzyFilter",
24
29
  }),
25
30
  ColumnHelper.accessor("createdAt", {
26
31
  id: "createdAtDate",
@@ -28,6 +33,8 @@ const Columns = [
28
33
  cell: ({ getValue }) => {
29
34
  return new Date(getValue()).toLocaleString();
30
35
  },
36
+ enableColumnFilter: true,
37
+ filterFn: "fuzzyFilter",
31
38
  }),
32
39
  ];
33
40
  export default {
@@ -1 +1 @@
1
- {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/CustomTable/index.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,GAAG,CAAC;AAChC,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAU3D,MAAM,SAAS,GAAgB;IAC7B,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,IAAI,IAAI,CAAC,qBAAqB,CAAC,EAAE;IAChG,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,IAAI,IAAI,CAAC,qBAAqB,CAAC,EAAE;IAC5F;QACE,EAAE,EAAE,CAAC;QACL,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,qBAAqB;QAC5B,SAAS,EAAE,IAAI,IAAI,CAAC,qBAAqB,CAAC;KAC3C;CACF,CAAC;AAEF,MAAM,YAAY,GAAG,kBAAkB,EAAa,CAAC;AAErD,MAAM,OAAO,GAAG;IACd,YAAY,CAAC,QAAQ,CAAC,IAAI,EAAE;QAC1B,MAAM,EAAE,IAAI;KACb,CAAC;IAEF,YAAY,CAAC,QAAQ,CAAC,MAAM,EAAE;QAC5B,MAAM,EAAE,MAAM;KACf,CAAC;IAEF,YAAY,CAAC,QAAQ,CAAC,OAAO,EAAE;QAC7B,MAAM,EAAE,OAAO;KAChB,CAAC;IAEF,YAAY,CAAC,QAAQ,CAAC,WAAW,EAAE;QACjC,EAAE,EAAE,eAAe;QACnB,MAAM,EAAE,MAAM;QACd,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;YACrB,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,cAAc,EAAE,CAAC;QAC/C,CAAC;KACF,CAAC;CACH,CAAC;AAEF,eAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,WAAW;IACtB,IAAI,EAAE;QACJ,IAAI,EAAE,SAAS;QACf,OAAO,EAAE,OAAO;QAChB,SAAS,EAAE,KAAK;QAChB,KAAK,EAAE,IAAI;KACZ;CAC0B,CAAC;AAE9B,MAAM,CAAC,MAAM,OAAO,GAAiC;IACnD,MAAM,EAAE,SAAS,OAAO,CAAC,IAAI;QAC3B,OAAO,KAAC,WAAW,OAAK,IAAI,GAAI,CAAC;IACnC,CAAC;CACF,CAAC"}
1
+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/CustomTable/index.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,GAAG,CAAC;AAChC,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAU3D,MAAM,SAAS,GAAgB;IAC7B,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,IAAI,IAAI,CAAC,qBAAqB,CAAC,EAAE;IAChG,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,IAAI,IAAI,CAAC,qBAAqB,CAAC,EAAE;IAC5F;QACE,EAAE,EAAE,CAAC;QACL,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,qBAAqB;QAC5B,SAAS,EAAE,IAAI,IAAI,CAAC,qBAAqB,CAAC;KAC3C;CACF,CAAC;AAEF,MAAM,YAAY,GAAG,kBAAkB,EAAa,CAAC;AAErD,MAAM,OAAO,GAAG;IACd,YAAY,CAAC,QAAQ,CAAC,IAAI,EAAE;QAC1B,MAAM,EAAE,IAAI;QACZ,kBAAkB,EAAE,KAAK;KAC1B,CAAC;IAEF,YAAY,CAAC,QAAQ,CAAC,MAAM,EAAE;QAC5B,MAAM,EAAE,MAAM;QACd,kBAAkB,EAAE,IAAI;QACxB,QAAQ,EAAE,aAAa;KACxB,CAAC;IAEF,YAAY,CAAC,QAAQ,CAAC,OAAO,EAAE;QAC7B,MAAM,EAAE,OAAO;QACf,kBAAkB,EAAE,IAAI;QACxB,QAAQ,EAAE,aAAa;KACxB,CAAC;IAEF,YAAY,CAAC,QAAQ,CAAC,WAAW,EAAE;QACjC,EAAE,EAAE,eAAe;QACnB,MAAM,EAAE,MAAM;QACd,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;YACrB,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,cAAc,EAAE,CAAC;QAC/C,CAAC;QACD,kBAAkB,EAAE,IAAI;QACxB,QAAQ,EAAE,aAAa;KACxB,CAAC;CACH,CAAC;AAEF,eAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,WAAW;IACtB,IAAI,EAAE;QACJ,IAAI,EAAE,SAAS;QACf,OAAO,EAAE,OAAO;QAChB,SAAS,EAAE,KAAK;QAChB,KAAK,EAAE,IAAI;KACZ;CAC0B,CAAC;AAE9B,MAAM,CAAC,MAAM,OAAO,GAAiC;IACnD,MAAM,EAAE,SAAS,OAAO,CAAC,IAAI;QAC3B,OAAO,KAAC,WAAW,OAAK,IAAI,GAAI,CAAC;IACnC,CAAC;CACF,CAAC"}
@@ -1,6 +1,7 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
- import { Alert, Skeleton, Table } from "@mantine/core";
2
+ import { Alert, Skeleton, Table, TextInput } from "@mantine/core";
3
3
  import { IconChevronUp, IconChevronDown, IconSelector } from "@tabler/icons-react";
4
+ import { rankItem } from "@tanstack/match-sorter-utils";
4
5
  import { flexRender } from "@tanstack/react-table";
5
6
  export const Sort = {
6
7
  Ascending: "asc",
@@ -43,4 +44,14 @@ export function getTableBody({ isLoading, error, tableRows, columnCount, }) {
43
44
  }
44
45
  return tableBody;
45
46
  }
47
+ export function getColumnFilterInput(column) {
48
+ return column.getCanFilter() ? (_jsx(TextInput, { placeholder: typeof column.columnDef.header === "string" ? `Filter ${column.columnDef.header}` : "Filter", value: (column.getFilterValue() ?? ""), onChange: (event) => {
49
+ column.setFilterValue(event.target.value);
50
+ } })) : null;
51
+ }
52
+ export const FuzzyFilter = (row, columnId, filterValue, addMeta) => {
53
+ const itemRank = rankItem(row.getValue(columnId), (filterValue ?? ""));
54
+ addMeta({ itemRank });
55
+ return itemRank.passed;
56
+ };
46
57
  //# sourceMappingURL=utils.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/CustomTable/utils.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/CustomTable/utils.tsx"],"names":[],"mappings":"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"}
package/dist/tsc/index.js CHANGED
@@ -1,4 +1,5 @@
1
1
  export * from "./components/CustomEventTimelineChart";
2
2
  export * from "./components/CustomTable";
3
3
  export * from "./components/CustomColorPalette";
4
+ export * from "./components/CustomDateTimePicker";
4
5
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,uCAAuC,CAAC;AACtD,cAAc,0BAA0B,CAAC;AACzC,cAAc,iCAAiC,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,uCAAuC,CAAC;AACtD,cAAc,0BAA0B,CAAC;AACzC,cAAc,iCAAiC,CAAC;AAChD,cAAc,mCAAmC,CAAC"}