@bsol-oss/react-datatable5 12.0.0-beta.36 → 12.0.0-beta.38

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 +53 -40
  2. package/dist/index.mjs +53 -40
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -4353,12 +4353,15 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
4353
4353
  const { required, gridColumn = "span 4", gridRow = "span 1", renderDisplay, foreign_key, } = schema;
4354
4354
  const isRequired = required?.some((columnId) => columnId === column);
4355
4355
  const { table, column: column_ref, display_column, } = foreign_key;
4356
- const [searchText, setSearchText] = React.useState();
4356
+ const [searchText, setSearchText] = React.useState("");
4357
4357
  const [limit, setLimit] = React.useState(10);
4358
4358
  const [openSearchResult, setOpenSearchResult] = React.useState();
4359
4359
  const [page, setPage] = React.useState(0);
4360
4360
  const ref = React.useRef(null);
4361
4361
  const colLabel = `${prefix}${column}`;
4362
+ const watchId = watch(colLabel);
4363
+ const watchIds = isMultiple ? (watch(colLabel) ?? []) : [];
4364
+ // Query for search results
4362
4365
  const query = reactQuery.useQuery({
4363
4366
  queryKey: [`idpicker`, { column, searchText, limit, page }],
4364
4367
  queryFn: async () => {
@@ -4382,15 +4385,10 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
4382
4385
  });
4383
4386
  return data;
4384
4387
  },
4385
- enabled: (searchText ?? "")?.length > 0,
4388
+ enabled: openSearchResult === true,
4386
4389
  staleTime: 300000,
4387
4390
  });
4388
- const { isLoading, isFetching, data, isPending, isError } = query;
4389
- const dataList = data?.data ?? [];
4390
- const count = data?.count ?? 0;
4391
- const isDirty = (searchText?.length ?? 0) > 0;
4392
- const watchId = watch(colLabel);
4393
- const watchIds = (watch(colLabel) ?? []);
4391
+ // Query for currently selected items (to display them properly)
4394
4392
  const queryDefault = reactQuery.useQuery({
4395
4393
  queryKey: [
4396
4394
  `idpicker-default`,
@@ -4426,17 +4424,29 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
4426
4424
  ? Array.isArray(watchIds) && watchIds.length > 0
4427
4425
  : !!watchId,
4428
4426
  });
4429
- // Effect to trigger the default query when the component mounts
4427
+ // Effect to load selected values when component mounts
4430
4428
  React.useEffect(() => {
4431
4429
  if (isMultiple ? watchIds.length > 0 : !!watchId) {
4432
4430
  queryDefault.refetch();
4433
4431
  }
4434
4432
  // eslint-disable-next-line react-hooks/exhaustive-deps
4435
4433
  }, []);
4434
+ // Effect to trigger initial data fetch when popover opens
4435
+ React.useEffect(() => {
4436
+ if (openSearchResult) {
4437
+ // Reset search text when opening the popover
4438
+ setSearchText("");
4439
+ // Reset page to first page
4440
+ setPage(0);
4441
+ // Fetch initial data
4442
+ query.refetch();
4443
+ }
4444
+ // eslint-disable-next-line react-hooks/exhaustive-deps
4445
+ }, [openSearchResult]);
4436
4446
  const onSearchChange = async (event) => {
4437
4447
  setSearchText(event.target.value);
4438
4448
  setPage(0);
4439
- setLimit(10);
4449
+ query.refetch();
4440
4450
  };
4441
4451
  const handleLimitChange = (event) => {
4442
4452
  const newLimit = Number(event.target.value);
@@ -4444,10 +4454,11 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
4444
4454
  // Reset to first page when changing limit
4445
4455
  setPage(0);
4446
4456
  // Trigger a new search with the updated limit
4447
- if (searchText?.length) {
4448
- query.refetch();
4449
- }
4457
+ query.refetch();
4450
4458
  };
4459
+ const { isLoading, isFetching, data, isPending, isError } = query;
4460
+ const dataList = data?.data ?? [];
4461
+ const count = data?.count ?? 0;
4451
4462
  const getPickedValue = () => {
4452
4463
  if (Object.keys(idMap).length <= 0) {
4453
4464
  return "";
@@ -4476,35 +4487,37 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
4476
4487
  setOpenSearchResult(true);
4477
4488
  }, children: translate.t(removeIndex(`${colLabel}.add_more`)) })] })), !isMultiple && (jsxRuntime.jsx(Button, { variant: "outline", onClick: () => {
4478
4489
  setOpenSearchResult(true);
4479
- }, justifyContent: "start", children: queryDefault.isLoading ? jsxRuntime.jsx(react.Spinner, { size: "sm" }) : 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: translate.t(removeIndex(`${colLabel}.type_to_search`)), onChange: (event) => {
4480
- onSearchChange(event);
4481
- setOpenSearchResult(true);
4482
- }, 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" }), (isFetching || isLoading || isPending) && jsxRuntime.jsx(react.Spinner, {}), isError && (jsxRuntime.jsx(react.Icon, { color: "red.400", children: jsxRuntime.jsx(bi.BiError, {}) })), jsxRuntime.jsxs(react.Flex, { justifyContent: "space-between", alignItems: "center", children: [jsxRuntime.jsxs(react.Flex, { alignItems: "center", gap: "2", children: [jsxRuntime.jsx(InfoTip, { children: `${translate.t(removeIndex(`${colLabel}.total`))} ${count}, ${translate.t(removeIndex(`${colLabel}.showing`))} ${limit} ${translate.t(removeIndex(`${colLabel}.per_page`), "per page")}` }), jsxRuntime.jsxs(react.Text, { fontSize: "sm", fontWeight: "bold", children: [count, jsxRuntime.jsxs(react.Text, { as: "span", fontSize: "xs", ml: "1", color: "gray.500", children: ["/ ", page * limit + 1, "-", Math.min((page + 1) * limit, count)] })] })] }), jsxRuntime.jsx(react.Box, { children: jsxRuntime.jsxs("select", { value: limit, onChange: handleLimitChange, style: {
4490
+ }, justifyContent: "start", children: queryDefault.isLoading ? jsxRuntime.jsx(react.Spinner, { size: "sm" }) : 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: translate.t(removeIndex(`${colLabel}.type_to_search`)), onChange: onSearchChange, autoComplete: "off", ref: ref, value: searchText }), jsxRuntime.jsx(PopoverTitle, {}), openSearchResult && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(isFetching || isLoading || isPending) && jsxRuntime.jsx(react.Spinner, {}), isError && (jsxRuntime.jsx(react.Icon, { color: "red.400", children: jsxRuntime.jsx(bi.BiError, {}) })), jsxRuntime.jsxs(react.Flex, { justifyContent: "space-between", alignItems: "center", children: [jsxRuntime.jsxs(react.Flex, { alignItems: "center", gap: "2", children: [jsxRuntime.jsx(InfoTip, { children: `${translate.t(removeIndex(`${colLabel}.total`))} ${count}, ${translate.t(removeIndex(`${colLabel}.showing`))} ${limit} ${translate.t(removeIndex(`${colLabel}.per_page`), "per page")}` }), jsxRuntime.jsxs(react.Text, { fontSize: "sm", fontWeight: "bold", children: [count, jsxRuntime.jsxs(react.Text, { as: "span", fontSize: "xs", ml: "1", color: "gray.500", children: ["/ ", count > 0 ? `${page * limit + 1}-${Math.min((page + 1) * limit, count)}` : '0'] })] })] }), jsxRuntime.jsx(react.Box, { children: jsxRuntime.jsxs("select", { value: limit, onChange: handleLimitChange, style: {
4483
4491
  padding: "4px 8px",
4484
4492
  borderRadius: "4px",
4485
4493
  border: "1px solid #ccc",
4486
4494
  fontSize: "14px",
4487
- }, children: [jsxRuntime.jsx("option", { value: "5", children: "5" }), jsxRuntime.jsx("option", { value: "10", children: "10" }), jsxRuntime.jsx("option", { value: "20", children: "20" }), jsxRuntime.jsx("option", { value: "50", children: "50" })] }) })] }), jsxRuntime.jsxs(react.Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [jsxRuntime.jsx(react.Flex, { flexFlow: "column wrap", children: dataList.map((item) => {
4488
- const selected = isMultiple
4489
- ? watchIds.some((id) => item[column_ref] === id)
4490
- : watchId === item[column_ref];
4491
- return (jsxRuntime.jsx(react.Box, { cursor: "pointer", onClick: () => {
4492
- if (!isMultiple) {
4493
- setOpenSearchResult(false);
4494
- setValue(colLabel, item[column_ref]);
4495
- return;
4496
- }
4497
- const newSet = new Set([
4498
- ...(watchIds ?? []),
4499
- item[column_ref],
4500
- ]);
4501
- setValue(colLabel, [...newSet]);
4502
- }, opacity: 0.7, _hover: { opacity: 1 }, ...(selected
4503
- ? { color: "colorPalette.400/50" }
4504
- : {}), children: !!renderDisplay === true
4505
- ? renderDisplay(item)
4506
- : item[display_column] }, item[column_ref]));
4507
- }) }), isDirty && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: dataList.length <= 0 && (jsxRuntime.jsx(react.Text, { children: translate.t(removeIndex(`${colLabel}.empty_search_result`)) })) }))] }), jsxRuntime.jsx(PaginationRoot, { justifySelf: "center", count: count, pageSize: limit, defaultPage: 1, page: page + 1, onPageChange: (e) => setPage(e.page - 1), children: jsxRuntime.jsxs(react.HStack, { gap: "4", children: [jsxRuntime.jsx(PaginationPrevTrigger, {}), count > 0 && jsxRuntime.jsx(PaginationPageText, {}), jsxRuntime.jsx(PaginationNextTrigger, {})] }) })] }))] }) })] }), errors[`${colLabel}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
4495
+ }, children: [jsxRuntime.jsx("option", { value: "5", children: "5" }), jsxRuntime.jsx("option", { value: "10", children: "10" }), jsxRuntime.jsx("option", { value: "20", children: "20" }), jsxRuntime.jsx("option", { value: "50", children: "50" })] }) })] }), jsxRuntime.jsx(react.Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: dataList.length > 0 ? (jsxRuntime.jsx(react.Flex, { flexFlow: "column wrap", children: dataList.map((item) => {
4496
+ const selected = isMultiple
4497
+ ? watchIds.some((id) => item[column_ref] === id)
4498
+ : watchId === item[column_ref];
4499
+ return (jsxRuntime.jsx(react.Box, { cursor: "pointer", onClick: () => {
4500
+ if (!isMultiple) {
4501
+ setOpenSearchResult(false);
4502
+ setValue(colLabel, item[column_ref]);
4503
+ return;
4504
+ }
4505
+ // For multiple selection, don't add if already selected
4506
+ if (selected)
4507
+ return;
4508
+ const newSet = new Set([
4509
+ ...(watchIds ?? []),
4510
+ item[column_ref],
4511
+ ]);
4512
+ setValue(colLabel, [...newSet]);
4513
+ }, opacity: 0.7, _hover: { opacity: 1 }, ...(selected
4514
+ ? { color: "colorPalette.400/50", fontWeight: "bold" }
4515
+ : {}), children: !!renderDisplay === true
4516
+ ? renderDisplay(item)
4517
+ : item[display_column] }, item[column_ref]));
4518
+ }) })) : (jsxRuntime.jsx(react.Text, { children: searchText
4519
+ ? translate.t(removeIndex(`${colLabel}.empty_search_result`))
4520
+ : translate.t(removeIndex(`${colLabel}.initial_results`)) })) }), jsxRuntime.jsx(PaginationRoot, { justifySelf: "center", count: count, pageSize: limit, defaultPage: 1, page: page + 1, onPageChange: (e) => setPage(e.page - 1), children: jsxRuntime.jsxs(react.HStack, { gap: "4", children: [jsxRuntime.jsx(PaginationPrevTrigger, {}), count > 0 && jsxRuntime.jsx(PaginationPageText, {}), jsxRuntime.jsx(PaginationNextTrigger, {})] }) })] }))] }) })] }), errors[`${colLabel}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
4508
4521
  };
4509
4522
 
4510
4523
  const NumberInputRoot = React__namespace.forwardRef(function NumberInput(props, ref) {
@@ -5005,7 +5018,7 @@ const NumberViewer = ({ schema, column, prefix, }) => {
5005
5018
  };
5006
5019
 
5007
5020
  const ObjectViewer = ({ schema, column, prefix }) => {
5008
- const { properties, gridColumn = "span 4", gridRow = "span 1", required, } = schema;
5021
+ const { properties, gridColumn = "span 12", gridRow = "span 1", required, } = schema;
5009
5022
  const { translate } = useSchemaContext();
5010
5023
  const colLabel = `${prefix}${column}`;
5011
5024
  const isRequired = required?.some((columnId) => columnId === column);
@@ -5013,7 +5026,7 @@ const ObjectViewer = ({ schema, column, prefix }) => {
5013
5026
  if (properties === undefined) {
5014
5027
  throw new Error(`properties is undefined when using ObjectInput`);
5015
5028
  }
5016
- return (jsxRuntime.jsxs(react.Box, { gridRow, gridColumn, children: [jsxRuntime.jsxs(react.Box, { as: "label", gridColumn: "1/span12", children: [`${translate.t(removeIndex(`${colLabel}.field_label`))}`, isRequired && jsxRuntime.jsx("span", { children: "*" })] }), jsxRuntime.jsx(react.Grid, { gap: "4", padding: "4", gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: `repeat("auto-fit", auto)`, children: Object.keys(properties ?? {}).map((key) => {
5029
+ return (jsxRuntime.jsxs(react.Box, { gridRow, gridColumn, children: [jsxRuntime.jsxs(react.Box, { as: "label", children: [`${translate.t(removeIndex(`${colLabel}.field_label`))}`, isRequired && jsxRuntime.jsx("span", { children: "*" })] }), jsxRuntime.jsx(react.Grid, { gap: "4", padding: "4", gridTemplateColumns: "repeat(12, 1fr)", autoFlow: "row", children: Object.keys(properties ?? {}).map((key) => {
5017
5030
  return (
5018
5031
  // @ts-expect-error find suitable types
5019
5032
  jsxRuntime.jsx(ColumnViewer, { column: `${key}`,
package/dist/index.mjs CHANGED
@@ -4333,12 +4333,15 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
4333
4333
  const { required, gridColumn = "span 4", gridRow = "span 1", renderDisplay, foreign_key, } = schema;
4334
4334
  const isRequired = required?.some((columnId) => columnId === column);
4335
4335
  const { table, column: column_ref, display_column, } = foreign_key;
4336
- const [searchText, setSearchText] = useState();
4336
+ const [searchText, setSearchText] = useState("");
4337
4337
  const [limit, setLimit] = useState(10);
4338
4338
  const [openSearchResult, setOpenSearchResult] = useState();
4339
4339
  const [page, setPage] = useState(0);
4340
4340
  const ref = useRef(null);
4341
4341
  const colLabel = `${prefix}${column}`;
4342
+ const watchId = watch(colLabel);
4343
+ const watchIds = isMultiple ? (watch(colLabel) ?? []) : [];
4344
+ // Query for search results
4342
4345
  const query = useQuery({
4343
4346
  queryKey: [`idpicker`, { column, searchText, limit, page }],
4344
4347
  queryFn: async () => {
@@ -4362,15 +4365,10 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
4362
4365
  });
4363
4366
  return data;
4364
4367
  },
4365
- enabled: (searchText ?? "")?.length > 0,
4368
+ enabled: openSearchResult === true,
4366
4369
  staleTime: 300000,
4367
4370
  });
4368
- const { isLoading, isFetching, data, isPending, isError } = query;
4369
- const dataList = data?.data ?? [];
4370
- const count = data?.count ?? 0;
4371
- const isDirty = (searchText?.length ?? 0) > 0;
4372
- const watchId = watch(colLabel);
4373
- const watchIds = (watch(colLabel) ?? []);
4371
+ // Query for currently selected items (to display them properly)
4374
4372
  const queryDefault = useQuery({
4375
4373
  queryKey: [
4376
4374
  `idpicker-default`,
@@ -4406,17 +4404,29 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
4406
4404
  ? Array.isArray(watchIds) && watchIds.length > 0
4407
4405
  : !!watchId,
4408
4406
  });
4409
- // Effect to trigger the default query when the component mounts
4407
+ // Effect to load selected values when component mounts
4410
4408
  useEffect(() => {
4411
4409
  if (isMultiple ? watchIds.length > 0 : !!watchId) {
4412
4410
  queryDefault.refetch();
4413
4411
  }
4414
4412
  // eslint-disable-next-line react-hooks/exhaustive-deps
4415
4413
  }, []);
4414
+ // Effect to trigger initial data fetch when popover opens
4415
+ useEffect(() => {
4416
+ if (openSearchResult) {
4417
+ // Reset search text when opening the popover
4418
+ setSearchText("");
4419
+ // Reset page to first page
4420
+ setPage(0);
4421
+ // Fetch initial data
4422
+ query.refetch();
4423
+ }
4424
+ // eslint-disable-next-line react-hooks/exhaustive-deps
4425
+ }, [openSearchResult]);
4416
4426
  const onSearchChange = async (event) => {
4417
4427
  setSearchText(event.target.value);
4418
4428
  setPage(0);
4419
- setLimit(10);
4429
+ query.refetch();
4420
4430
  };
4421
4431
  const handleLimitChange = (event) => {
4422
4432
  const newLimit = Number(event.target.value);
@@ -4424,10 +4434,11 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
4424
4434
  // Reset to first page when changing limit
4425
4435
  setPage(0);
4426
4436
  // Trigger a new search with the updated limit
4427
- if (searchText?.length) {
4428
- query.refetch();
4429
- }
4437
+ query.refetch();
4430
4438
  };
4439
+ const { isLoading, isFetching, data, isPending, isError } = query;
4440
+ const dataList = data?.data ?? [];
4441
+ const count = data?.count ?? 0;
4431
4442
  const getPickedValue = () => {
4432
4443
  if (Object.keys(idMap).length <= 0) {
4433
4444
  return "";
@@ -4456,35 +4467,37 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
4456
4467
  setOpenSearchResult(true);
4457
4468
  }, children: translate.t(removeIndex(`${colLabel}.add_more`)) })] })), !isMultiple && (jsx(Button, { variant: "outline", onClick: () => {
4458
4469
  setOpenSearchResult(true);
4459
- }, justifyContent: "start", children: queryDefault.isLoading ? jsx(Spinner, { size: "sm" }) : 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: translate.t(removeIndex(`${colLabel}.type_to_search`)), onChange: (event) => {
4460
- onSearchChange(event);
4461
- setOpenSearchResult(true);
4462
- }, 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" }), (isFetching || isLoading || isPending) && jsx(Spinner, {}), isError && (jsx(Icon, { color: "red.400", children: jsx(BiError, {}) })), jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [jsxs(Flex, { alignItems: "center", gap: "2", children: [jsx(InfoTip, { children: `${translate.t(removeIndex(`${colLabel}.total`))} ${count}, ${translate.t(removeIndex(`${colLabel}.showing`))} ${limit} ${translate.t(removeIndex(`${colLabel}.per_page`), "per page")}` }), jsxs(Text, { fontSize: "sm", fontWeight: "bold", children: [count, jsxs(Text, { as: "span", fontSize: "xs", ml: "1", color: "gray.500", children: ["/ ", page * limit + 1, "-", Math.min((page + 1) * limit, count)] })] })] }), jsx(Box, { children: jsxs("select", { value: limit, onChange: handleLimitChange, style: {
4470
+ }, justifyContent: "start", children: queryDefault.isLoading ? jsx(Spinner, { size: "sm" }) : 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: translate.t(removeIndex(`${colLabel}.type_to_search`)), onChange: onSearchChange, autoComplete: "off", ref: ref, value: searchText }), jsx(PopoverTitle, {}), openSearchResult && (jsxs(Fragment, { children: [(isFetching || isLoading || isPending) && jsx(Spinner, {}), isError && (jsx(Icon, { color: "red.400", children: jsx(BiError, {}) })), jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [jsxs(Flex, { alignItems: "center", gap: "2", children: [jsx(InfoTip, { children: `${translate.t(removeIndex(`${colLabel}.total`))} ${count}, ${translate.t(removeIndex(`${colLabel}.showing`))} ${limit} ${translate.t(removeIndex(`${colLabel}.per_page`), "per page")}` }), jsxs(Text, { fontSize: "sm", fontWeight: "bold", children: [count, jsxs(Text, { as: "span", fontSize: "xs", ml: "1", color: "gray.500", children: ["/ ", count > 0 ? `${page * limit + 1}-${Math.min((page + 1) * limit, count)}` : '0'] })] })] }), jsx(Box, { children: jsxs("select", { value: limit, onChange: handleLimitChange, style: {
4463
4471
  padding: "4px 8px",
4464
4472
  borderRadius: "4px",
4465
4473
  border: "1px solid #ccc",
4466
4474
  fontSize: "14px",
4467
- }, children: [jsx("option", { value: "5", children: "5" }), jsx("option", { value: "10", children: "10" }), jsx("option", { value: "20", children: "20" }), jsx("option", { value: "50", children: "50" })] }) })] }), jsxs(Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [jsx(Flex, { flexFlow: "column wrap", children: dataList.map((item) => {
4468
- const selected = isMultiple
4469
- ? watchIds.some((id) => item[column_ref] === id)
4470
- : watchId === item[column_ref];
4471
- return (jsx(Box, { cursor: "pointer", onClick: () => {
4472
- if (!isMultiple) {
4473
- setOpenSearchResult(false);
4474
- setValue(colLabel, item[column_ref]);
4475
- return;
4476
- }
4477
- const newSet = new Set([
4478
- ...(watchIds ?? []),
4479
- item[column_ref],
4480
- ]);
4481
- setValue(colLabel, [...newSet]);
4482
- }, opacity: 0.7, _hover: { opacity: 1 }, ...(selected
4483
- ? { color: "colorPalette.400/50" }
4484
- : {}), children: !!renderDisplay === true
4485
- ? renderDisplay(item)
4486
- : item[display_column] }, item[column_ref]));
4487
- }) }), isDirty && (jsx(Fragment, { children: dataList.length <= 0 && (jsx(Text, { children: translate.t(removeIndex(`${colLabel}.empty_search_result`)) })) }))] }), jsx(PaginationRoot, { justifySelf: "center", count: count, pageSize: limit, defaultPage: 1, page: page + 1, onPageChange: (e) => setPage(e.page - 1), children: jsxs(HStack, { gap: "4", children: [jsx(PaginationPrevTrigger, {}), count > 0 && jsx(PaginationPageText, {}), jsx(PaginationNextTrigger, {})] }) })] }))] }) })] }), errors[`${colLabel}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
4475
+ }, children: [jsx("option", { value: "5", children: "5" }), jsx("option", { value: "10", children: "10" }), jsx("option", { value: "20", children: "20" }), jsx("option", { value: "50", children: "50" })] }) })] }), jsx(Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: dataList.length > 0 ? (jsx(Flex, { flexFlow: "column wrap", children: dataList.map((item) => {
4476
+ const selected = isMultiple
4477
+ ? watchIds.some((id) => item[column_ref] === id)
4478
+ : watchId === item[column_ref];
4479
+ return (jsx(Box, { cursor: "pointer", onClick: () => {
4480
+ if (!isMultiple) {
4481
+ setOpenSearchResult(false);
4482
+ setValue(colLabel, item[column_ref]);
4483
+ return;
4484
+ }
4485
+ // For multiple selection, don't add if already selected
4486
+ if (selected)
4487
+ return;
4488
+ const newSet = new Set([
4489
+ ...(watchIds ?? []),
4490
+ item[column_ref],
4491
+ ]);
4492
+ setValue(colLabel, [...newSet]);
4493
+ }, opacity: 0.7, _hover: { opacity: 1 }, ...(selected
4494
+ ? { color: "colorPalette.400/50", fontWeight: "bold" }
4495
+ : {}), children: !!renderDisplay === true
4496
+ ? renderDisplay(item)
4497
+ : item[display_column] }, item[column_ref]));
4498
+ }) })) : (jsx(Text, { children: searchText
4499
+ ? translate.t(removeIndex(`${colLabel}.empty_search_result`))
4500
+ : translate.t(removeIndex(`${colLabel}.initial_results`)) })) }), jsx(PaginationRoot, { justifySelf: "center", count: count, pageSize: limit, defaultPage: 1, page: page + 1, onPageChange: (e) => setPage(e.page - 1), children: jsxs(HStack, { gap: "4", children: [jsx(PaginationPrevTrigger, {}), count > 0 && jsx(PaginationPageText, {}), jsx(PaginationNextTrigger, {})] }) })] }))] }) })] }), errors[`${colLabel}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
4488
4501
  };
4489
4502
 
4490
4503
  const NumberInputRoot = React.forwardRef(function NumberInput$1(props, ref) {
@@ -4985,7 +4998,7 @@ const NumberViewer = ({ schema, column, prefix, }) => {
4985
4998
  };
4986
4999
 
4987
5000
  const ObjectViewer = ({ schema, column, prefix }) => {
4988
- const { properties, gridColumn = "span 4", gridRow = "span 1", required, } = schema;
5001
+ const { properties, gridColumn = "span 12", gridRow = "span 1", required, } = schema;
4989
5002
  const { translate } = useSchemaContext();
4990
5003
  const colLabel = `${prefix}${column}`;
4991
5004
  const isRequired = required?.some((columnId) => columnId === column);
@@ -4993,7 +5006,7 @@ const ObjectViewer = ({ schema, column, prefix }) => {
4993
5006
  if (properties === undefined) {
4994
5007
  throw new Error(`properties is undefined when using ObjectInput`);
4995
5008
  }
4996
- return (jsxs(Box, { gridRow, gridColumn, children: [jsxs(Box, { as: "label", gridColumn: "1/span12", children: [`${translate.t(removeIndex(`${colLabel}.field_label`))}`, isRequired && jsx("span", { children: "*" })] }), jsx(Grid, { gap: "4", padding: "4", gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: `repeat("auto-fit", auto)`, children: Object.keys(properties ?? {}).map((key) => {
5009
+ return (jsxs(Box, { gridRow, gridColumn, children: [jsxs(Box, { as: "label", children: [`${translate.t(removeIndex(`${colLabel}.field_label`))}`, isRequired && jsx("span", { children: "*" })] }), jsx(Grid, { gap: "4", padding: "4", gridTemplateColumns: "repeat(12, 1fr)", autoFlow: "row", children: Object.keys(properties ?? {}).map((key) => {
4997
5010
  return (
4998
5011
  // @ts-expect-error find suitable types
4999
5012
  jsx(ColumnViewer, { column: `${key}`,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bsol-oss/react-datatable5",
3
- "version": "12.0.0-beta.36",
3
+ "version": "12.0.0-beta.38",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",