@bsol-oss/react-datatable5 7.5.0 → 7.5.1

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 (3) hide show
  1. package/dist/index.js +13 -13
  2. package/dist/index.mjs +13 -13
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -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") {
@@ -1782,13 +1782,13 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
1782
1782
  gridRow, children: [isMultiple && (jsxRuntime.jsxs(react.Flex, { flexFlow: "wrap", gap: 1, children: [selectedIds.map((id) => {
1783
1783
  const item = idMap[id];
1784
1784
  if (item === undefined) {
1785
- return jsxRuntime.jsx(jsxRuntime.Fragment, { children: "undefined" });
1785
+ return jsxRuntime.jsx(react.Text, { children: "undefined" }, id);
1786
1786
  }
1787
1787
  return (jsxRuntime.jsx(Tag, { closable: true, onClick: () => {
1788
1788
  setValue(column, watchIds.filter((id) => id != item[column_ref]));
1789
1789
  }, children: !!renderDisplay === true
1790
1790
  ? renderDisplay(item)
1791
- : item[display_column] }));
1791
+ : item[display_column] }, id));
1792
1792
  }), jsxRuntime.jsx(Tag, { cursor: "pointer", onClick: () => {
1793
1793
  setOpenSearchResult(true);
1794
1794
  }, children: "Add" })] })), !isMultiple && (jsxRuntime.jsx(Button, { variant: "outline", onClick: () => {
@@ -1817,7 +1817,7 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
1817
1817
  setValue(column, [...newSet]);
1818
1818
  }, opacity: 0.7, _hover: { opacity: 1 }, ...(selected ? { color: "gray.400/50" } : {}), children: !!renderDisplay === true
1819
1819
  ? renderDisplay(item)
1820
- : item[display_column] }));
1820
+ : item[display_column] }, item[column_ref]));
1821
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
1822
  setLimit((limit) => limit + 10);
1823
1823
  await getTableData({
@@ -1941,7 +1941,7 @@ const BooleanPicker = ({ column }) => {
1941
1941
  const { gridColumn, gridRow, title } = schema.properties[column];
1942
1942
  return (jsxRuntime.jsxs(Field, { label: `${title ?? snakeToLabel(column)}`, required: isRequired, alignItems: "stretch", gridColumn,
1943
1943
  gridRow, children: [jsxRuntime.jsx(CheckboxCard, { checked: value, variant: "surface", onSelect: () => {
1944
- setValue(column, !getValues(column));
1944
+ setValue(column, !value);
1945
1945
  } }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: fieldRequired ?? "The field is requried" }))] }));
1946
1946
  };
1947
1947
 
@@ -2183,7 +2183,7 @@ const TagPicker = ({ column }) => {
2183
2183
  return (jsxRuntime.jsx(CheckboxCard, { label: tagName, value: id, flex: "0 0 0%", disabled: true, colorPalette: "blue" }, `${tagName}-${id}`));
2184
2184
  }
2185
2185
  return (jsxRuntime.jsx(CheckboxCard, { label: tagName, value: id, flex: "0 0 0%" }, `${tagName}-${id}`));
2186
- }) }) }))] }));
2186
+ }) }) }))] }, `tag-${parent_tag_name}`));
2187
2187
  }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: (errors[`${column}`]?.message ?? "No error message") }))] }));
2188
2188
  };
2189
2189
 
@@ -2539,12 +2539,12 @@ const FormInternal = () => {
2539
2539
  if (variant === "file-picker") {
2540
2540
  return jsxRuntime.jsx(FilePicker, { column: key }, `form-${key}`);
2541
2541
  }
2542
- return jsxRuntime.jsx(jsxRuntime.Fragment, { children: `array ${column}` });
2542
+ return jsxRuntime.jsx(react.Text, { children: `array ${column}` }, `form-${key}`);
2543
2543
  }
2544
2544
  if (type === "null") {
2545
- return jsxRuntime.jsx(jsxRuntime.Fragment, { children: `null ${column}` });
2545
+ return jsxRuntime.jsx(react.Text, { children: `null ${column}` }, `form-${key}`);
2546
2546
  }
2547
- return jsxRuntime.jsx(jsxRuntime.Fragment, { children: "missing type" });
2547
+ return jsxRuntime.jsx(react.Text, { children: "missing type" }, `form-${key}`);
2548
2548
  }) }), jsxRuntime.jsx(Button, { onClick: () => {
2549
2549
  methods.handleSubmit(onValid)();
2550
2550
  }, formNoValidate: true, children: submit ?? "Submit" })] }), isError && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: ["isError", jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [" ", `${error}`] })] }))] }));
package/dist/index.mjs CHANGED
@@ -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") {
@@ -1762,13 +1762,13 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
1762
1762
  gridRow, children: [isMultiple && (jsxs(Flex, { flexFlow: "wrap", gap: 1, children: [selectedIds.map((id) => {
1763
1763
  const item = idMap[id];
1764
1764
  if (item === undefined) {
1765
- return jsx(Fragment, { children: "undefined" });
1765
+ return jsx(Text, { children: "undefined" }, id);
1766
1766
  }
1767
1767
  return (jsx(Tag, { closable: true, onClick: () => {
1768
1768
  setValue(column, watchIds.filter((id) => id != item[column_ref]));
1769
1769
  }, children: !!renderDisplay === true
1770
1770
  ? renderDisplay(item)
1771
- : item[display_column] }));
1771
+ : item[display_column] }, id));
1772
1772
  }), jsx(Tag, { cursor: "pointer", onClick: () => {
1773
1773
  setOpenSearchResult(true);
1774
1774
  }, children: "Add" })] })), !isMultiple && (jsx(Button, { variant: "outline", onClick: () => {
@@ -1797,7 +1797,7 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
1797
1797
  setValue(column, [...newSet]);
1798
1798
  }, opacity: 0.7, _hover: { opacity: 1 }, ...(selected ? { color: "gray.400/50" } : {}), children: !!renderDisplay === true
1799
1799
  ? renderDisplay(item)
1800
- : item[display_column] }));
1800
+ : item[display_column] }, item[column_ref]));
1801
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
1802
  setLimit((limit) => limit + 10);
1803
1803
  await getTableData({
@@ -1921,7 +1921,7 @@ const BooleanPicker = ({ column }) => {
1921
1921
  const { gridColumn, gridRow, title } = schema.properties[column];
1922
1922
  return (jsxs(Field, { label: `${title ?? snakeToLabel(column)}`, required: isRequired, alignItems: "stretch", gridColumn,
1923
1923
  gridRow, children: [jsx(CheckboxCard, { checked: value, variant: "surface", onSelect: () => {
1924
- setValue(column, !getValues(column));
1924
+ setValue(column, !value);
1925
1925
  } }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: fieldRequired ?? "The field is requried" }))] }));
1926
1926
  };
1927
1927
 
@@ -2163,7 +2163,7 @@ const TagPicker = ({ column }) => {
2163
2163
  return (jsx(CheckboxCard, { label: tagName, value: id, flex: "0 0 0%", disabled: true, colorPalette: "blue" }, `${tagName}-${id}`));
2164
2164
  }
2165
2165
  return (jsx(CheckboxCard, { label: tagName, value: id, flex: "0 0 0%" }, `${tagName}-${id}`));
2166
- }) }) }))] }));
2166
+ }) }) }))] }, `tag-${parent_tag_name}`));
2167
2167
  }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: (errors[`${column}`]?.message ?? "No error message") }))] }));
2168
2168
  };
2169
2169
 
@@ -2519,12 +2519,12 @@ const FormInternal = () => {
2519
2519
  if (variant === "file-picker") {
2520
2520
  return jsx(FilePicker, { column: key }, `form-${key}`);
2521
2521
  }
2522
- return jsx(Fragment, { children: `array ${column}` });
2522
+ return jsx(Text, { children: `array ${column}` }, `form-${key}`);
2523
2523
  }
2524
2524
  if (type === "null") {
2525
- return jsx(Fragment, { children: `null ${column}` });
2525
+ return jsx(Text, { children: `null ${column}` }, `form-${key}`);
2526
2526
  }
2527
- return jsx(Fragment, { children: "missing type" });
2527
+ return jsx(Text, { children: "missing type" }, `form-${key}`);
2528
2528
  }) }), jsx(Button, { onClick: () => {
2529
2529
  methods.handleSubmit(onValid)();
2530
2530
  }, formNoValidate: true, children: submit ?? "Submit" })] }), isError && (jsxs(Fragment, { children: ["isError", jsxs(Fragment, { children: [" ", `${error}`] })] }))] }));
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.5.1",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",