@bsol-oss/react-datatable5 7.5.0 → 7.6.0

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 (5) hide show
  1. package/dist/index.js +59 -57
  2. package/dist/index.mjs +59 -57
  3. package/dist/types/components/Form/utils/filterArray.d.ts +1 -0
  4. package/dist/types/components/Form/utils/getTableData.d.ts +2 -1
  5. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -570,7 +570,7 @@ const PaginationItems = (props) => {
570
570
  return page.type === "ellipsis" ? (jsxRuntime.jsx(PaginationEllipsis, { index: index, ...props }, index)) : (jsxRuntime.jsx(PaginationItem, { type: "page", value: page.value, ...props }, index));
571
571
  }) }));
572
572
  };
573
- React__namespace.forwardRef(function PaginationPageText(props, ref) {
573
+ const PaginationPageText = React__namespace.forwardRef(function PaginationPageText(props, ref) {
574
574
  const { format = "compact", ...rest } = props;
575
575
  const { page, totalPages, pageRange, count } = react.usePaginationContext();
576
576
  const content = React__namespace.useMemo(() => {
@@ -616,8 +616,8 @@ const RecordDisplay = ({ object, boxProps }) => {
616
616
  if (object === null) {
617
617
  return jsxRuntime.jsx(jsxRuntime.Fragment, { children: "null" });
618
618
  }
619
- return (jsxRuntime.jsx(react.Box, { rowGap: 1, columnGap: 2, display: "grid", gridTemplateColumns: "auto 1fr", overflow: "auto", ...boxProps, children: Object.entries(object).map(([field, value]) => {
620
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Text, { color: "gray.400", children: snakeToLabel(field) }), jsxRuntime.jsx(react.Text, { children: typeof value === "object" ? JSON.stringify(value) : value })] }));
619
+ return (jsxRuntime.jsx(react.Grid, { rowGap: 1, overflow: "auto", ...boxProps, children: Object.entries(object).map(([field, value]) => {
620
+ return (jsxRuntime.jsxs(react.Grid, { columnGap: 2, gridTemplateColumns: "auto 1fr", children: [jsxRuntime.jsx(react.Text, { color: "gray.400", children: snakeToLabel(field) }), jsxRuntime.jsx(react.Text, { children: typeof value === "object" ? JSON.stringify(value) : value })] }, field));
621
621
  }) }));
622
622
  };
623
623
 
@@ -643,7 +643,7 @@ const DataDisplay = ({ variant = "" }) => {
643
643
  return (jsxRuntime.jsx(react.Card.Root, { children: jsxRuntime.jsx(react.Card.Body, { children: jsxRuntime.jsx(react.DataList.Root, { gap: 4, padding: 4, display: "grid", variant: "subtle", orientation: "horizontal", overflow: "auto", children: row.getVisibleCells().map((cell) => {
644
644
  const showCustomDataDisplay = cell.column.columnDef.meta?.showCustomDisplay ?? false;
645
645
  if (showCustomDataDisplay) {
646
- return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }));
646
+ return (jsxRuntime.jsx(react.Flex, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
647
647
  }
648
648
  const value = cell.getValue();
649
649
  if (typeof value === "object") {
@@ -664,7 +664,7 @@ const DataDisplay = ({ variant = "" }) => {
664
664
  return (jsxRuntime.jsx(react.Card.Root, { children: jsxRuntime.jsx(react.Card.Body, { children: jsxRuntime.jsx(react.DataList.Root, { gap: 4, padding: 4, display: "flex", flexFlow: "row", variant: "subtle", overflow: "auto", children: row.getVisibleCells().map((cell) => {
665
665
  const showCustomDataDisplay = cell.column.columnDef.meta?.showCustomDisplay ?? false;
666
666
  if (showCustomDataDisplay) {
667
- return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }));
667
+ return (jsxRuntime.jsx(react.Flex, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
668
668
  }
669
669
  const value = cell.getValue();
670
670
  if (typeof value === "object") {
@@ -684,7 +684,7 @@ const DataDisplay = ({ variant = "" }) => {
684
684
  return (jsxRuntime.jsx(react.Card.Root, { children: jsxRuntime.jsx(react.Card.Body, { children: jsxRuntime.jsx(react.DataList.Root, { gap: 4, padding: 4, display: "grid", variant: "subtle", gridTemplateColumns: "repeat(auto-fit, minmax(20rem, 1fr))", children: row.getVisibleCells().map((cell) => {
685
685
  const showCustomDataDisplay = cell.column.columnDef.meta?.showCustomDisplay ?? false;
686
686
  if (showCustomDataDisplay) {
687
- return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }));
687
+ return (jsxRuntime.jsx(react.Flex, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
688
688
  }
689
689
  const value = cell.getValue();
690
690
  if (typeof value === "object") {
@@ -1660,7 +1660,7 @@ const useSchemaContext = () => {
1660
1660
  };
1661
1661
  };
1662
1662
 
1663
- const getTableData = async ({ serverUrl, in_table, searching = "", where = [], limit = 10, }) => {
1663
+ const getTableData = async ({ serverUrl, in_table, searching = "", where = [], limit = 10, offset = 0, }) => {
1664
1664
  if (serverUrl === undefined || serverUrl.length == 0) {
1665
1665
  throw new Error("The serverUrl is missing");
1666
1666
  }
@@ -1678,6 +1678,7 @@ const getTableData = async ({ serverUrl, in_table, searching = "", where = [], l
1678
1678
  searching,
1679
1679
  where,
1680
1680
  limit,
1681
+ offset
1681
1682
  },
1682
1683
  };
1683
1684
  try {
@@ -1700,22 +1701,24 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
1700
1701
  if (schema.properties == undefined) {
1701
1702
  throw new Error("schema properties when using DatePicker");
1702
1703
  }
1703
- const { total, showing, close, typeToSearch, showMore } = displayText;
1704
+ const { total, showing, typeToSearch } = displayText;
1704
1705
  const { gridColumn, gridRow, title, renderDisplay } = schema.properties[column];
1705
1706
  const [searchText, setSearchText] = React.useState();
1706
1707
  const [limit, setLimit] = React.useState(10);
1707
1708
  const [openSearchResult, setOpenSearchResult] = React.useState();
1709
+ const [page, setPage] = React.useState(1);
1708
1710
  const [idMap, setIdMap] = React.useState({});
1709
1711
  const ref = React.useRef(null);
1710
1712
  const selectedIds = watch(column) ?? [];
1711
1713
  const query = reactQuery.useQuery({
1712
- queryKey: [`idpicker`, searchText, in_table, limit],
1714
+ queryKey: [`idpicker`, { searchText, in_table, limit, page }],
1713
1715
  queryFn: async () => {
1714
1716
  const data = await getTableData({
1715
1717
  serverUrl,
1716
1718
  searching: searchText ?? "",
1717
1719
  in_table: in_table,
1718
1720
  limit: limit,
1721
+ offset: page * 10,
1719
1722
  });
1720
1723
  const newMap = Object.fromEntries((data ?? { data: [] }).data.map((item) => {
1721
1724
  return [
@@ -1731,15 +1734,15 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
1731
1734
  return data;
1732
1735
  },
1733
1736
  enabled: (searchText ?? "")?.length > 0,
1734
- staleTime: 10000,
1737
+ staleTime: 300000,
1735
1738
  });
1736
1739
  reactQuery.useQuery({
1737
- queryKey: [`idpicker`, ...selectedIds],
1740
+ queryKey: [`idpicker`, { selectedIds }],
1738
1741
  queryFn: async () => {
1739
1742
  const data = await getTableData({
1740
1743
  serverUrl,
1741
1744
  in_table: in_table,
1742
- limit: limit,
1745
+ limit: 1,
1743
1746
  where: [{ id: column_ref, value: watchId }],
1744
1747
  });
1745
1748
  const newMap = Object.fromEntries((data ?? { data: [] }).data.map((item) => {
@@ -1756,7 +1759,7 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
1756
1759
  return data;
1757
1760
  },
1758
1761
  enabled: (selectedIds ?? []).length > 0,
1759
- staleTime: 10000,
1762
+ staleTime: 300000,
1760
1763
  });
1761
1764
  const { isLoading, isFetching, data, isPending, isError } = query;
1762
1765
  const dataList = React.useMemo(() => data?.data ?? [], [data]);
@@ -1764,6 +1767,7 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
1764
1767
  const isDirty = (searchText?.length ?? 0) > 0;
1765
1768
  const onSearchChange = async (event) => {
1766
1769
  setSearchText(event.target.value);
1770
+ setPage(1);
1767
1771
  setLimit(10);
1768
1772
  };
1769
1773
  const watchId = watch(column);
@@ -1782,51 +1786,41 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
1782
1786
  gridRow, children: [isMultiple && (jsxRuntime.jsxs(react.Flex, { flexFlow: "wrap", gap: 1, children: [selectedIds.map((id) => {
1783
1787
  const item = idMap[id];
1784
1788
  if (item === undefined) {
1785
- return jsxRuntime.jsx(jsxRuntime.Fragment, { children: "undefined" });
1789
+ return jsxRuntime.jsx(react.Text, { children: "undefined" }, id);
1786
1790
  }
1787
1791
  return (jsxRuntime.jsx(Tag, { closable: true, onClick: () => {
1788
1792
  setValue(column, watchIds.filter((id) => id != item[column_ref]));
1789
1793
  }, children: !!renderDisplay === true
1790
1794
  ? renderDisplay(item)
1791
- : item[display_column] }));
1795
+ : item[display_column] }, id));
1792
1796
  }), jsxRuntime.jsx(Tag, { cursor: "pointer", onClick: () => {
1793
1797
  setOpenSearchResult(true);
1794
1798
  }, children: "Add" })] })), !isMultiple && (jsxRuntime.jsx(Button, { variant: "outline", onClick: () => {
1795
1799
  setOpenSearchResult(true);
1796
- }, children: getPickedValue() })), jsxRuntime.jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start" }, children: [jsxRuntime.jsx(PopoverTrigger, {}), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs(PopoverBody, { children: [jsxRuntime.jsx(react.Input, { placeholder: typeToSearch, onChange: (event) => {
1800
+ }, children: getPickedValue() })), jsxRuntime.jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start", strategy: "fixed" }, children: [jsxRuntime.jsx(PopoverTrigger, {}), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsxRuntime.jsx(react.Input, { placeholder: typeToSearch ?? "Type To Search", onChange: (event) => {
1797
1801
  onSearchChange(event);
1798
1802
  setOpenSearchResult(true);
1799
- }, autoComplete: "off", ref: ref }), jsxRuntime.jsx(PopoverTitle, {}), jsxRuntime.jsxs(react.Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [isFetching && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isFetching" }), isLoading && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isLoading" }), isPending && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isPending" }), isError && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isError" }), jsxRuntime.jsx(react.Text, { children: `${total ?? "Total"} ${count}, ${showing ?? "Showing"} ${limit}` }), jsxRuntime.jsx(Button, { onClick: async () => {
1800
- setOpenSearchResult(false);
1801
- }, children: close ?? "Close" }), jsxRuntime.jsx(react.Flex, { flexFlow: "column wrap", children:
1802
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
1803
- dataList.map((item) => {
1804
- const selected = isMultiple
1805
- ? watchIds.some((id) => item[column_ref] === id)
1806
- : watchId === item[column_ref];
1807
- return (jsxRuntime.jsx(react.Box, { cursor: "pointer", onClick: () => {
1808
- if (!isMultiple) {
1809
- setOpenSearchResult(false);
1810
- setValue(column, item[column_ref]);
1811
- return;
1812
- }
1813
- const newSet = new Set([
1814
- ...(watchIds ?? []),
1815
- item[column_ref],
1816
- ]);
1817
- setValue(column, [...newSet]);
1818
- }, opacity: 0.7, _hover: { opacity: 1 }, ...(selected ? { color: "gray.400/50" } : {}), children: !!renderDisplay === true
1819
- ? renderDisplay(item)
1820
- : item[display_column] }));
1821
- }) }), isDirty && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [dataList.length <= 0 && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Empty Search Result" }), " "] })), count > dataList.length && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(Button, { onClick: async () => {
1822
- setLimit((limit) => limit + 10);
1823
- await getTableData({
1824
- serverUrl,
1825
- searching: searchText ?? "",
1826
- in_table: in_table,
1827
- limit: limit + 10,
1828
- });
1829
- }, children: showMore ?? "Show More" }) }))] })] }) })] }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: fieldRequired ?? "The field is requried" }))] }));
1803
+ }, autoComplete: "off", ref: ref }), jsxRuntime.jsx(PopoverTitle, {}), (searchText?.length ?? 0) > 0 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isFetching && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isFetching" }), isLoading && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isLoading" }), isPending && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isPending" }), isError && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isError" }), jsxRuntime.jsx(react.Text, { justifySelf: "center", children: `${total ?? "Total"} ${count}, ${showing ?? "Showing"} ${limit}` }), jsxRuntime.jsxs(react.Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [jsxRuntime.jsx(react.Flex, { flexFlow: "column wrap", children:
1804
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
1805
+ dataList.map((item) => {
1806
+ const selected = isMultiple
1807
+ ? watchIds.some((id) => item[column_ref] === id)
1808
+ : watchId === item[column_ref];
1809
+ return (jsxRuntime.jsx(react.Box, { cursor: "pointer", onClick: () => {
1810
+ if (!isMultiple) {
1811
+ setOpenSearchResult(false);
1812
+ setValue(column, item[column_ref]);
1813
+ return;
1814
+ }
1815
+ const newSet = new Set([
1816
+ ...(watchIds ?? []),
1817
+ item[column_ref],
1818
+ ]);
1819
+ setValue(column, [...newSet]);
1820
+ }, opacity: 0.7, _hover: { opacity: 1 }, ...(selected ? { color: "gray.400/50" } : {}), children: !!renderDisplay === true
1821
+ ? renderDisplay(item)
1822
+ : item[display_column] }, item[column_ref]));
1823
+ }) }), isDirty && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [dataList.length <= 0 && jsxRuntime.jsx(react.Text, { children: "Empty Search Result" }), " "] }))] }), jsxRuntime.jsx(PaginationRoot, { justifySelf: "center", count: query?.data?.count ?? 0, pageSize: 10, defaultPage: 1, page: page, onPageChange: (e) => setPage(e.page), children: jsxRuntime.jsxs(react.HStack, { gap: "4", children: [jsxRuntime.jsx(PaginationPrevTrigger, {}), jsxRuntime.jsx(PaginationPageText, {}), jsxRuntime.jsx(PaginationNextTrigger, {})] }) })] }))] }) })] }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: fieldRequired ?? "The field is requried" }))] }));
1830
1824
  };
1831
1825
 
1832
1826
  const ToggleTip = React__namespace.forwardRef(function ToggleTip(props, ref) {
@@ -1941,7 +1935,7 @@ const BooleanPicker = ({ column }) => {
1941
1935
  const { gridColumn, gridRow, title } = schema.properties[column];
1942
1936
  return (jsxRuntime.jsxs(Field, { label: `${title ?? snakeToLabel(column)}`, required: isRequired, alignItems: "stretch", gridColumn,
1943
1937
  gridRow, children: [jsxRuntime.jsx(CheckboxCard, { checked: value, variant: "surface", onSelect: () => {
1944
- setValue(column, !getValues(column));
1938
+ setValue(column, !value);
1945
1939
  } }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: fieldRequired ?? "The field is requried" }))] }));
1946
1940
  };
1947
1941
 
@@ -2183,7 +2177,7 @@ const TagPicker = ({ column }) => {
2183
2177
  return (jsxRuntime.jsx(CheckboxCard, { label: tagName, value: id, flex: "0 0 0%", disabled: true, colorPalette: "blue" }, `${tagName}-${id}`));
2184
2178
  }
2185
2179
  return (jsxRuntime.jsx(CheckboxCard, { label: tagName, value: id, flex: "0 0 0%" }, `${tagName}-${id}`));
2186
- }) }) }))] }));
2180
+ }) }) }))] }, `tag-${parent_tag_name}`));
2187
2181
  }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: (errors[`${column}`]?.message ?? "No error message") }))] }));
2188
2182
  };
2189
2183
 
@@ -2259,10 +2253,20 @@ const FilePicker = ({ column }) => {
2259
2253
  }) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: fieldRequired ?? "The field is requried" }))] }));
2260
2254
  };
2261
2255
 
2256
+ function filterArray(array, searchTerm) {
2257
+ // Convert the search term to lower case for case-insensitive comparison
2258
+ const lowerCaseSearchTerm = searchTerm.toLowerCase();
2259
+ // Use the filter method to return an array of matching items
2260
+ return array.filter((item) => {
2261
+ // Convert each item to a string and check if it includes the search term
2262
+ return item.toString().toLowerCase().includes(lowerCaseSearchTerm);
2263
+ });
2264
+ }
2265
+
2262
2266
  const EnumPicker = ({ column, isMultiple = false }) => {
2263
2267
  const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
2264
2268
  const { schema, displayText } = useSchemaContext();
2265
- const { fieldRequired } = displayText;
2269
+ const { fieldRequired, total, showing, typeToSearch } = displayText;
2266
2270
  const { required } = schema;
2267
2271
  const isRequired = required?.some((columnId) => columnId === column);
2268
2272
  if (schema.properties == undefined) {
@@ -2297,12 +2301,10 @@ const EnumPicker = ({ column, isMultiple = false }) => {
2297
2301
  setOpenSearchResult(true);
2298
2302
  }, children: "Add" })] })), !isMultiple && (jsxRuntime.jsx(Button, { variant: "outline", onClick: () => {
2299
2303
  setOpenSearchResult(true);
2300
- }, children: watchEnum })), jsxRuntime.jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start" }, children: [jsxRuntime.jsx(PopoverTrigger, {}), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs(PopoverBody, { children: [jsxRuntime.jsx(react.Input, { placeholder: "Type to search", onChange: (event) => {
2304
+ }, children: watchEnum })), jsxRuntime.jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start" }, children: [jsxRuntime.jsx(PopoverTrigger, {}), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsxRuntime.jsx(react.Input, { placeholder: typeToSearch ?? "Type to search", onChange: (event) => {
2301
2305
  onSearchChange(event);
2302
2306
  setOpenSearchResult(true);
2303
- }, autoComplete: "off", ref: ref }), jsxRuntime.jsx(PopoverTitle, {}), jsxRuntime.jsxs(react.Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [jsxRuntime.jsx(react.Text, { children: `Search Result: ${count}, Showing ${limit}` }), jsxRuntime.jsx(Button, { onClick: async () => {
2304
- setOpenSearchResult(false);
2305
- }, children: "close" }), jsxRuntime.jsx(react.Flex, { flexFlow: "column wrap", children: dataList.map((item) => {
2307
+ }, autoComplete: "off", ref: ref }), jsxRuntime.jsx(PopoverTitle, {}), jsxRuntime.jsx(react.Text, { children: `${total ?? "Total"}: ${count}, ${showing ?? "Showing"} ${limit}` }), jsxRuntime.jsxs(react.Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [jsxRuntime.jsx(react.Flex, { flexFlow: "column wrap", children: filterArray(dataList, searchText ?? "").map((item) => {
2306
2308
  const selected = isMultiple
2307
2309
  ? watchEnums.some((enumValue) => item === enumValue)
2308
2310
  : watchEnum == item;
@@ -2539,12 +2541,12 @@ const FormInternal = () => {
2539
2541
  if (variant === "file-picker") {
2540
2542
  return jsxRuntime.jsx(FilePicker, { column: key }, `form-${key}`);
2541
2543
  }
2542
- return jsxRuntime.jsx(jsxRuntime.Fragment, { children: `array ${column}` });
2544
+ return jsxRuntime.jsx(react.Text, { children: `array ${column}` }, `form-${key}`);
2543
2545
  }
2544
2546
  if (type === "null") {
2545
- return jsxRuntime.jsx(jsxRuntime.Fragment, { children: `null ${column}` });
2547
+ return jsxRuntime.jsx(react.Text, { children: `null ${column}` }, `form-${key}`);
2546
2548
  }
2547
- return jsxRuntime.jsx(jsxRuntime.Fragment, { children: "missing type" });
2549
+ return jsxRuntime.jsx(react.Text, { children: "missing type" }, `form-${key}`);
2548
2550
  }) }), jsxRuntime.jsx(Button, { onClick: () => {
2549
2551
  methods.handleSubmit(onValid)();
2550
2552
  }, formNoValidate: true, children: submit ?? "Submit" })] }), isError && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: ["isError", jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [" ", `${error}`] })] }))] }));
package/dist/index.mjs CHANGED
@@ -550,7 +550,7 @@ const PaginationItems = (props) => {
550
550
  return page.type === "ellipsis" ? (jsx(PaginationEllipsis, { index: index, ...props }, index)) : (jsx(PaginationItem, { type: "page", value: page.value, ...props }, index));
551
551
  }) }));
552
552
  };
553
- React.forwardRef(function PaginationPageText(props, ref) {
553
+ const PaginationPageText = React.forwardRef(function PaginationPageText(props, ref) {
554
554
  const { format = "compact", ...rest } = props;
555
555
  const { page, totalPages, pageRange, count } = usePaginationContext();
556
556
  const content = React.useMemo(() => {
@@ -596,8 +596,8 @@ const RecordDisplay = ({ object, boxProps }) => {
596
596
  if (object === null) {
597
597
  return jsx(Fragment, { children: "null" });
598
598
  }
599
- return (jsx(Box, { rowGap: 1, columnGap: 2, display: "grid", gridTemplateColumns: "auto 1fr", overflow: "auto", ...boxProps, children: Object.entries(object).map(([field, value]) => {
600
- return (jsxs(Fragment, { children: [jsx(Text, { color: "gray.400", children: snakeToLabel(field) }), jsx(Text, { children: typeof value === "object" ? JSON.stringify(value) : value })] }));
599
+ return (jsx(Grid, { rowGap: 1, overflow: "auto", ...boxProps, children: Object.entries(object).map(([field, value]) => {
600
+ return (jsxs(Grid, { columnGap: 2, gridTemplateColumns: "auto 1fr", children: [jsx(Text, { color: "gray.400", children: snakeToLabel(field) }), jsx(Text, { children: typeof value === "object" ? JSON.stringify(value) : value })] }, field));
601
601
  }) }));
602
602
  };
603
603
 
@@ -623,7 +623,7 @@ const DataDisplay = ({ variant = "" }) => {
623
623
  return (jsx(Card.Root, { children: jsx(Card.Body, { children: jsx(DataList.Root, { gap: 4, padding: 4, display: "grid", variant: "subtle", orientation: "horizontal", overflow: "auto", children: row.getVisibleCells().map((cell) => {
624
624
  const showCustomDataDisplay = cell.column.columnDef.meta?.showCustomDisplay ?? false;
625
625
  if (showCustomDataDisplay) {
626
- return (jsx(Fragment, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }));
626
+ return (jsx(Flex, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
627
627
  }
628
628
  const value = cell.getValue();
629
629
  if (typeof value === "object") {
@@ -644,7 +644,7 @@ const DataDisplay = ({ variant = "" }) => {
644
644
  return (jsx(Card.Root, { children: jsx(Card.Body, { children: jsx(DataList.Root, { gap: 4, padding: 4, display: "flex", flexFlow: "row", variant: "subtle", overflow: "auto", children: row.getVisibleCells().map((cell) => {
645
645
  const showCustomDataDisplay = cell.column.columnDef.meta?.showCustomDisplay ?? false;
646
646
  if (showCustomDataDisplay) {
647
- return (jsx(Fragment, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }));
647
+ return (jsx(Flex, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
648
648
  }
649
649
  const value = cell.getValue();
650
650
  if (typeof value === "object") {
@@ -664,7 +664,7 @@ const DataDisplay = ({ variant = "" }) => {
664
664
  return (jsx(Card.Root, { children: jsx(Card.Body, { children: jsx(DataList.Root, { gap: 4, padding: 4, display: "grid", variant: "subtle", gridTemplateColumns: "repeat(auto-fit, minmax(20rem, 1fr))", children: row.getVisibleCells().map((cell) => {
665
665
  const showCustomDataDisplay = cell.column.columnDef.meta?.showCustomDisplay ?? false;
666
666
  if (showCustomDataDisplay) {
667
- return (jsx(Fragment, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }));
667
+ return (jsx(Flex, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
668
668
  }
669
669
  const value = cell.getValue();
670
670
  if (typeof value === "object") {
@@ -1640,7 +1640,7 @@ const useSchemaContext = () => {
1640
1640
  };
1641
1641
  };
1642
1642
 
1643
- const getTableData = async ({ serverUrl, in_table, searching = "", where = [], limit = 10, }) => {
1643
+ const getTableData = async ({ serverUrl, in_table, searching = "", where = [], limit = 10, offset = 0, }) => {
1644
1644
  if (serverUrl === undefined || serverUrl.length == 0) {
1645
1645
  throw new Error("The serverUrl is missing");
1646
1646
  }
@@ -1658,6 +1658,7 @@ const getTableData = async ({ serverUrl, in_table, searching = "", where = [], l
1658
1658
  searching,
1659
1659
  where,
1660
1660
  limit,
1661
+ offset
1661
1662
  },
1662
1663
  };
1663
1664
  try {
@@ -1680,22 +1681,24 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
1680
1681
  if (schema.properties == undefined) {
1681
1682
  throw new Error("schema properties when using DatePicker");
1682
1683
  }
1683
- const { total, showing, close, typeToSearch, showMore } = displayText;
1684
+ const { total, showing, typeToSearch } = displayText;
1684
1685
  const { gridColumn, gridRow, title, renderDisplay } = schema.properties[column];
1685
1686
  const [searchText, setSearchText] = useState();
1686
1687
  const [limit, setLimit] = useState(10);
1687
1688
  const [openSearchResult, setOpenSearchResult] = useState();
1689
+ const [page, setPage] = useState(1);
1688
1690
  const [idMap, setIdMap] = useState({});
1689
1691
  const ref = useRef(null);
1690
1692
  const selectedIds = watch(column) ?? [];
1691
1693
  const query = useQuery({
1692
- queryKey: [`idpicker`, searchText, in_table, limit],
1694
+ queryKey: [`idpicker`, { searchText, in_table, limit, page }],
1693
1695
  queryFn: async () => {
1694
1696
  const data = await getTableData({
1695
1697
  serverUrl,
1696
1698
  searching: searchText ?? "",
1697
1699
  in_table: in_table,
1698
1700
  limit: limit,
1701
+ offset: page * 10,
1699
1702
  });
1700
1703
  const newMap = Object.fromEntries((data ?? { data: [] }).data.map((item) => {
1701
1704
  return [
@@ -1711,15 +1714,15 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
1711
1714
  return data;
1712
1715
  },
1713
1716
  enabled: (searchText ?? "")?.length > 0,
1714
- staleTime: 10000,
1717
+ staleTime: 300000,
1715
1718
  });
1716
1719
  useQuery({
1717
- queryKey: [`idpicker`, ...selectedIds],
1720
+ queryKey: [`idpicker`, { selectedIds }],
1718
1721
  queryFn: async () => {
1719
1722
  const data = await getTableData({
1720
1723
  serverUrl,
1721
1724
  in_table: in_table,
1722
- limit: limit,
1725
+ limit: 1,
1723
1726
  where: [{ id: column_ref, value: watchId }],
1724
1727
  });
1725
1728
  const newMap = Object.fromEntries((data ?? { data: [] }).data.map((item) => {
@@ -1736,7 +1739,7 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
1736
1739
  return data;
1737
1740
  },
1738
1741
  enabled: (selectedIds ?? []).length > 0,
1739
- staleTime: 10000,
1742
+ staleTime: 300000,
1740
1743
  });
1741
1744
  const { isLoading, isFetching, data, isPending, isError } = query;
1742
1745
  const dataList = useMemo(() => data?.data ?? [], [data]);
@@ -1744,6 +1747,7 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
1744
1747
  const isDirty = (searchText?.length ?? 0) > 0;
1745
1748
  const onSearchChange = async (event) => {
1746
1749
  setSearchText(event.target.value);
1750
+ setPage(1);
1747
1751
  setLimit(10);
1748
1752
  };
1749
1753
  const watchId = watch(column);
@@ -1762,51 +1766,41 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
1762
1766
  gridRow, children: [isMultiple && (jsxs(Flex, { flexFlow: "wrap", gap: 1, children: [selectedIds.map((id) => {
1763
1767
  const item = idMap[id];
1764
1768
  if (item === undefined) {
1765
- return jsx(Fragment, { children: "undefined" });
1769
+ return jsx(Text, { children: "undefined" }, id);
1766
1770
  }
1767
1771
  return (jsx(Tag, { closable: true, onClick: () => {
1768
1772
  setValue(column, watchIds.filter((id) => id != item[column_ref]));
1769
1773
  }, children: !!renderDisplay === true
1770
1774
  ? renderDisplay(item)
1771
- : item[display_column] }));
1775
+ : item[display_column] }, id));
1772
1776
  }), jsx(Tag, { cursor: "pointer", onClick: () => {
1773
1777
  setOpenSearchResult(true);
1774
1778
  }, children: "Add" })] })), !isMultiple && (jsx(Button, { variant: "outline", onClick: () => {
1775
1779
  setOpenSearchResult(true);
1776
- }, children: getPickedValue() })), jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start" }, children: [jsx(PopoverTrigger, {}), jsx(PopoverContent, { children: jsxs(PopoverBody, { children: [jsx(Input, { placeholder: typeToSearch, onChange: (event) => {
1780
+ }, children: getPickedValue() })), jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start", strategy: "fixed" }, children: [jsx(PopoverTrigger, {}), jsx(PopoverContent, { children: jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsx(Input, { placeholder: typeToSearch ?? "Type To Search", onChange: (event) => {
1777
1781
  onSearchChange(event);
1778
1782
  setOpenSearchResult(true);
1779
- }, autoComplete: "off", ref: ref }), jsx(PopoverTitle, {}), jsxs(Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [isFetching && jsx(Fragment, { children: "isFetching" }), isLoading && jsx(Fragment, { children: "isLoading" }), isPending && jsx(Fragment, { children: "isPending" }), isError && jsx(Fragment, { children: "isError" }), jsx(Text, { children: `${total ?? "Total"} ${count}, ${showing ?? "Showing"} ${limit}` }), jsx(Button, { onClick: async () => {
1780
- setOpenSearchResult(false);
1781
- }, children: close ?? "Close" }), jsx(Flex, { flexFlow: "column wrap", children:
1782
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
1783
- dataList.map((item) => {
1784
- const selected = isMultiple
1785
- ? watchIds.some((id) => item[column_ref] === id)
1786
- : watchId === item[column_ref];
1787
- return (jsx(Box, { cursor: "pointer", onClick: () => {
1788
- if (!isMultiple) {
1789
- setOpenSearchResult(false);
1790
- setValue(column, item[column_ref]);
1791
- return;
1792
- }
1793
- const newSet = new Set([
1794
- ...(watchIds ?? []),
1795
- item[column_ref],
1796
- ]);
1797
- setValue(column, [...newSet]);
1798
- }, opacity: 0.7, _hover: { opacity: 1 }, ...(selected ? { color: "gray.400/50" } : {}), children: !!renderDisplay === true
1799
- ? renderDisplay(item)
1800
- : item[display_column] }));
1801
- }) }), isDirty && (jsxs(Fragment, { children: [dataList.length <= 0 && jsx(Fragment, { children: "Empty Search Result" }), " "] })), count > dataList.length && (jsx(Fragment, { children: jsx(Button, { onClick: async () => {
1802
- setLimit((limit) => limit + 10);
1803
- await getTableData({
1804
- serverUrl,
1805
- searching: searchText ?? "",
1806
- in_table: in_table,
1807
- limit: limit + 10,
1808
- });
1809
- }, children: showMore ?? "Show More" }) }))] })] }) })] }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: fieldRequired ?? "The field is requried" }))] }));
1783
+ }, autoComplete: "off", ref: ref }), jsx(PopoverTitle, {}), (searchText?.length ?? 0) > 0 && (jsxs(Fragment, { children: [isFetching && jsx(Fragment, { children: "isFetching" }), isLoading && jsx(Fragment, { children: "isLoading" }), isPending && jsx(Fragment, { children: "isPending" }), isError && jsx(Fragment, { children: "isError" }), jsx(Text, { justifySelf: "center", children: `${total ?? "Total"} ${count}, ${showing ?? "Showing"} ${limit}` }), jsxs(Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [jsx(Flex, { flexFlow: "column wrap", children:
1784
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
1785
+ dataList.map((item) => {
1786
+ const selected = isMultiple
1787
+ ? watchIds.some((id) => item[column_ref] === id)
1788
+ : watchId === item[column_ref];
1789
+ return (jsx(Box, { cursor: "pointer", onClick: () => {
1790
+ if (!isMultiple) {
1791
+ setOpenSearchResult(false);
1792
+ setValue(column, item[column_ref]);
1793
+ return;
1794
+ }
1795
+ const newSet = new Set([
1796
+ ...(watchIds ?? []),
1797
+ item[column_ref],
1798
+ ]);
1799
+ setValue(column, [...newSet]);
1800
+ }, opacity: 0.7, _hover: { opacity: 1 }, ...(selected ? { color: "gray.400/50" } : {}), children: !!renderDisplay === true
1801
+ ? renderDisplay(item)
1802
+ : item[display_column] }, item[column_ref]));
1803
+ }) }), isDirty && (jsxs(Fragment, { children: [dataList.length <= 0 && jsx(Text, { children: "Empty Search Result" }), " "] }))] }), jsx(PaginationRoot, { justifySelf: "center", count: query?.data?.count ?? 0, pageSize: 10, defaultPage: 1, page: page, onPageChange: (e) => setPage(e.page), children: jsxs(HStack, { gap: "4", children: [jsx(PaginationPrevTrigger, {}), jsx(PaginationPageText, {}), jsx(PaginationNextTrigger, {})] }) })] }))] }) })] }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: fieldRequired ?? "The field is requried" }))] }));
1810
1804
  };
1811
1805
 
1812
1806
  const ToggleTip = React.forwardRef(function ToggleTip(props, ref) {
@@ -1921,7 +1915,7 @@ const BooleanPicker = ({ column }) => {
1921
1915
  const { gridColumn, gridRow, title } = schema.properties[column];
1922
1916
  return (jsxs(Field, { label: `${title ?? snakeToLabel(column)}`, required: isRequired, alignItems: "stretch", gridColumn,
1923
1917
  gridRow, children: [jsx(CheckboxCard, { checked: value, variant: "surface", onSelect: () => {
1924
- setValue(column, !getValues(column));
1918
+ setValue(column, !value);
1925
1919
  } }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: fieldRequired ?? "The field is requried" }))] }));
1926
1920
  };
1927
1921
 
@@ -2163,7 +2157,7 @@ const TagPicker = ({ column }) => {
2163
2157
  return (jsx(CheckboxCard, { label: tagName, value: id, flex: "0 0 0%", disabled: true, colorPalette: "blue" }, `${tagName}-${id}`));
2164
2158
  }
2165
2159
  return (jsx(CheckboxCard, { label: tagName, value: id, flex: "0 0 0%" }, `${tagName}-${id}`));
2166
- }) }) }))] }));
2160
+ }) }) }))] }, `tag-${parent_tag_name}`));
2167
2161
  }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: (errors[`${column}`]?.message ?? "No error message") }))] }));
2168
2162
  };
2169
2163
 
@@ -2239,10 +2233,20 @@ const FilePicker = ({ column }) => {
2239
2233
  }) }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: fieldRequired ?? "The field is requried" }))] }));
2240
2234
  };
2241
2235
 
2236
+ function filterArray(array, searchTerm) {
2237
+ // Convert the search term to lower case for case-insensitive comparison
2238
+ const lowerCaseSearchTerm = searchTerm.toLowerCase();
2239
+ // Use the filter method to return an array of matching items
2240
+ return array.filter((item) => {
2241
+ // Convert each item to a string and check if it includes the search term
2242
+ return item.toString().toLowerCase().includes(lowerCaseSearchTerm);
2243
+ });
2244
+ }
2245
+
2242
2246
  const EnumPicker = ({ column, isMultiple = false }) => {
2243
2247
  const { watch, formState: { errors }, setValue, } = useFormContext();
2244
2248
  const { schema, displayText } = useSchemaContext();
2245
- const { fieldRequired } = displayText;
2249
+ const { fieldRequired, total, showing, typeToSearch } = displayText;
2246
2250
  const { required } = schema;
2247
2251
  const isRequired = required?.some((columnId) => columnId === column);
2248
2252
  if (schema.properties == undefined) {
@@ -2277,12 +2281,10 @@ const EnumPicker = ({ column, isMultiple = false }) => {
2277
2281
  setOpenSearchResult(true);
2278
2282
  }, children: "Add" })] })), !isMultiple && (jsx(Button, { variant: "outline", onClick: () => {
2279
2283
  setOpenSearchResult(true);
2280
- }, children: watchEnum })), jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start" }, children: [jsx(PopoverTrigger, {}), jsx(PopoverContent, { children: jsxs(PopoverBody, { children: [jsx(Input, { placeholder: "Type to search", onChange: (event) => {
2284
+ }, children: watchEnum })), jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start" }, children: [jsx(PopoverTrigger, {}), jsx(PopoverContent, { children: jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsx(Input, { placeholder: typeToSearch ?? "Type to search", onChange: (event) => {
2281
2285
  onSearchChange(event);
2282
2286
  setOpenSearchResult(true);
2283
- }, autoComplete: "off", ref: ref }), jsx(PopoverTitle, {}), jsxs(Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [jsx(Text, { children: `Search Result: ${count}, Showing ${limit}` }), jsx(Button, { onClick: async () => {
2284
- setOpenSearchResult(false);
2285
- }, children: "close" }), jsx(Flex, { flexFlow: "column wrap", children: dataList.map((item) => {
2287
+ }, autoComplete: "off", ref: ref }), jsx(PopoverTitle, {}), jsx(Text, { children: `${total ?? "Total"}: ${count}, ${showing ?? "Showing"} ${limit}` }), jsxs(Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [jsx(Flex, { flexFlow: "column wrap", children: filterArray(dataList, searchText ?? "").map((item) => {
2286
2288
  const selected = isMultiple
2287
2289
  ? watchEnums.some((enumValue) => item === enumValue)
2288
2290
  : watchEnum == item;
@@ -2519,12 +2521,12 @@ const FormInternal = () => {
2519
2521
  if (variant === "file-picker") {
2520
2522
  return jsx(FilePicker, { column: key }, `form-${key}`);
2521
2523
  }
2522
- return jsx(Fragment, { children: `array ${column}` });
2524
+ return jsx(Text, { children: `array ${column}` }, `form-${key}`);
2523
2525
  }
2524
2526
  if (type === "null") {
2525
- return jsx(Fragment, { children: `null ${column}` });
2527
+ return jsx(Text, { children: `null ${column}` }, `form-${key}`);
2526
2528
  }
2527
- return jsx(Fragment, { children: "missing type" });
2529
+ return jsx(Text, { children: "missing type" }, `form-${key}`);
2528
2530
  }) }), jsx(Button, { onClick: () => {
2529
2531
  methods.handleSubmit(onValid)();
2530
2532
  }, formNoValidate: true, children: submit ?? "Submit" })] }), isError && (jsxs(Fragment, { children: ["isError", jsxs(Fragment, { children: [" ", `${error}`] })] }))] }));
package/dist/types/components/Form/utils/filterArray.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare function filterArray(array: string[], searchTerm: string): string[];
package/dist/types/components/Form/utils/getTableData.d.ts CHANGED
@@ -2,6 +2,7 @@ export interface GetTableDataConfig {
2
2
  serverUrl: string;
3
3
  in_table: string;
4
4
  limit?: number;
5
+ offset?: number;
5
6
  where?: {
6
7
  id: string;
7
8
  value: string[];
@@ -12,4 +13,4 @@ export interface GetTableResponse {
12
13
  data?: object[];
13
14
  count: number;
14
15
  }
15
- export declare const getTableData: ({ serverUrl, in_table, searching, where, limit, }: GetTableDataConfig) => Promise<any>;
16
+ export declare const getTableData: ({ serverUrl, in_table, searching, where, limit, offset, }: GetTableDataConfig) => Promise<any>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bsol-oss/react-datatable5",
3
- "version": "7.5.0",
3
+ "version": "7.6.0",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",