@bsol-oss/react-datatable5 12.0.0-beta.37 → 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 +43 -36
  2. package/dist/index.mjs +43 -36
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -4359,6 +4359,9 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
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 () => {
@@ -4385,11 +4388,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
4385
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 watchId = watch(colLabel);
4392
- const watchIds = (watch(colLabel) ?? []);
4391
+ // Query for currently selected items (to display them properly)
4393
4392
  const queryDefault = reactQuery.useQuery({
4394
4393
  queryKey: [
4395
4394
  `idpicker-default`,
@@ -4425,7 +4424,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
4425
4424
  ? Array.isArray(watchIds) && watchIds.length > 0
4426
4425
  : !!watchId,
4427
4426
  });
4428
- // Effect to trigger the default query when the component mounts
4427
+ // Effect to load selected values when component mounts
4429
4428
  React.useEffect(() => {
4430
4429
  if (isMultiple ? watchIds.length > 0 : !!watchId) {
4431
4430
  queryDefault.refetch();
@@ -4435,6 +4434,11 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
4435
4434
  // Effect to trigger initial data fetch when popover opens
4436
4435
  React.useEffect(() => {
4437
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
4438
4442
  query.refetch();
4439
4443
  }
4440
4444
  // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -4442,7 +4446,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
4442
4446
  const onSearchChange = async (event) => {
4443
4447
  setSearchText(event.target.value);
4444
4448
  setPage(0);
4445
- setLimit(10);
4449
+ query.refetch();
4446
4450
  };
4447
4451
  const handleLimitChange = (event) => {
4448
4452
  const newLimit = Number(event.target.value);
@@ -4452,6 +4456,9 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
4452
4456
  // Trigger a new search with the updated limit
4453
4457
  query.refetch();
4454
4458
  };
4459
+ const { isLoading, isFetching, data, isPending, isError } = query;
4460
+ const dataList = data?.data ?? [];
4461
+ const count = data?.count ?? 0;
4455
4462
  const getPickedValue = () => {
4456
4463
  if (Object.keys(idMap).length <= 0) {
4457
4464
  return "";
@@ -4480,37 +4487,37 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
4480
4487
  setOpenSearchResult(true);
4481
4488
  }, children: translate.t(removeIndex(`${colLabel}.add_more`)) })] })), !isMultiple && (jsxRuntime.jsx(Button, { variant: "outline", onClick: () => {
4482
4489
  setOpenSearchResult(true);
4483
- }, 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) => {
4484
- onSearchChange(event);
4485
- setOpenSearchResult(true);
4486
- }, autoComplete: "off", ref: ref, value: searchText }), jsxRuntime.jsx(PopoverTitle, {}), openSearchResult && (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: ["/ ", 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: {
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: {
4487
4491
  padding: "4px 8px",
4488
4492
  borderRadius: "4px",
4489
4493
  border: "1px solid #ccc",
4490
4494
  fontSize: "14px",
4491
- }, 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) => {
4492
- const selected = isMultiple
4493
- ? watchIds.some((id) => item[column_ref] === id)
4494
- : watchId === item[column_ref];
4495
- return (jsxRuntime.jsx(react.Box, { cursor: "pointer", onClick: () => {
4496
- if (!isMultiple) {
4497
- setOpenSearchResult(false);
4498
- setValue(colLabel, item[column_ref]);
4499
- return;
4500
- }
4501
- const newSet = new Set([
4502
- ...(watchIds ?? []),
4503
- item[column_ref],
4504
- ]);
4505
- setValue(colLabel, [...newSet]);
4506
- }, opacity: 0.7, _hover: { opacity: 1 }, ...(selected
4507
- ? { color: "colorPalette.400/50" }
4508
- : {}), children: !!renderDisplay === true
4509
- ? renderDisplay(item)
4510
- : item[display_column] }, item[column_ref]));
4511
- }) }), dataList.length <= 0 && (jsxRuntime.jsx(react.Text, { children: searchText
4512
- ? translate.t(removeIndex(`${colLabel}.empty_search_result`))
4513
- : 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`)) }))] }));
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`)) }))] }));
4514
4521
  };
4515
4522
 
4516
4523
  const NumberInputRoot = React__namespace.forwardRef(function NumberInput(props, ref) {
@@ -5011,7 +5018,7 @@ const NumberViewer = ({ schema, column, prefix, }) => {
5011
5018
  };
5012
5019
 
5013
5020
  const ObjectViewer = ({ schema, column, prefix }) => {
5014
- const { properties, gridColumn = "span 4", gridRow = "span 1", required, } = schema;
5021
+ const { properties, gridColumn = "span 12", gridRow = "span 1", required, } = schema;
5015
5022
  const { translate } = useSchemaContext();
5016
5023
  const colLabel = `${prefix}${column}`;
5017
5024
  const isRequired = required?.some((columnId) => columnId === column);
@@ -5019,7 +5026,7 @@ const ObjectViewer = ({ schema, column, prefix }) => {
5019
5026
  if (properties === undefined) {
5020
5027
  throw new Error(`properties is undefined when using ObjectInput`);
5021
5028
  }
5022
- 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) => {
5023
5030
  return (
5024
5031
  // @ts-expect-error find suitable types
5025
5032
  jsxRuntime.jsx(ColumnViewer, { column: `${key}`,
package/dist/index.mjs CHANGED
@@ -4339,6 +4339,9 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
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 () => {
@@ -4365,11 +4368,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
4365
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 watchId = watch(colLabel);
4372
- const watchIds = (watch(colLabel) ?? []);
4371
+ // Query for currently selected items (to display them properly)
4373
4372
  const queryDefault = useQuery({
4374
4373
  queryKey: [
4375
4374
  `idpicker-default`,
@@ -4405,7 +4404,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
4405
4404
  ? Array.isArray(watchIds) && watchIds.length > 0
4406
4405
  : !!watchId,
4407
4406
  });
4408
- // Effect to trigger the default query when the component mounts
4407
+ // Effect to load selected values when component mounts
4409
4408
  useEffect(() => {
4410
4409
  if (isMultiple ? watchIds.length > 0 : !!watchId) {
4411
4410
  queryDefault.refetch();
@@ -4415,6 +4414,11 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
4415
4414
  // Effect to trigger initial data fetch when popover opens
4416
4415
  useEffect(() => {
4417
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
4418
4422
  query.refetch();
4419
4423
  }
4420
4424
  // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -4422,7 +4426,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
4422
4426
  const onSearchChange = async (event) => {
4423
4427
  setSearchText(event.target.value);
4424
4428
  setPage(0);
4425
- setLimit(10);
4429
+ query.refetch();
4426
4430
  };
4427
4431
  const handleLimitChange = (event) => {
4428
4432
  const newLimit = Number(event.target.value);
@@ -4432,6 +4436,9 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
4432
4436
  // Trigger a new search with the updated limit
4433
4437
  query.refetch();
4434
4438
  };
4439
+ const { isLoading, isFetching, data, isPending, isError } = query;
4440
+ const dataList = data?.data ?? [];
4441
+ const count = data?.count ?? 0;
4435
4442
  const getPickedValue = () => {
4436
4443
  if (Object.keys(idMap).length <= 0) {
4437
4444
  return "";
@@ -4460,37 +4467,37 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
4460
4467
  setOpenSearchResult(true);
4461
4468
  }, children: translate.t(removeIndex(`${colLabel}.add_more`)) })] })), !isMultiple && (jsx(Button, { variant: "outline", onClick: () => {
4462
4469
  setOpenSearchResult(true);
4463
- }, 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) => {
4464
- onSearchChange(event);
4465
- setOpenSearchResult(true);
4466
- }, autoComplete: "off", ref: ref, value: searchText }), jsx(PopoverTitle, {}), openSearchResult && (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: ["/ ", count > 0 ? `${page * limit + 1}-${Math.min((page + 1) * limit, count)}` : '0'] })] })] }), 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: {
4467
4471
  padding: "4px 8px",
4468
4472
  borderRadius: "4px",
4469
4473
  border: "1px solid #ccc",
4470
4474
  fontSize: "14px",
4471
- }, 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) => {
4472
- const selected = isMultiple
4473
- ? watchIds.some((id) => item[column_ref] === id)
4474
- : watchId === item[column_ref];
4475
- return (jsx(Box, { cursor: "pointer", onClick: () => {
4476
- if (!isMultiple) {
4477
- setOpenSearchResult(false);
4478
- setValue(colLabel, item[column_ref]);
4479
- return;
4480
- }
4481
- const newSet = new Set([
4482
- ...(watchIds ?? []),
4483
- item[column_ref],
4484
- ]);
4485
- setValue(colLabel, [...newSet]);
4486
- }, opacity: 0.7, _hover: { opacity: 1 }, ...(selected
4487
- ? { color: "colorPalette.400/50" }
4488
- : {}), children: !!renderDisplay === true
4489
- ? renderDisplay(item)
4490
- : item[display_column] }, item[column_ref]));
4491
- }) }), dataList.length <= 0 && (jsx(Text, { children: searchText
4492
- ? translate.t(removeIndex(`${colLabel}.empty_search_result`))
4493
- : 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`)) }))] }));
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`)) }))] }));
4494
4501
  };
4495
4502
 
4496
4503
  const NumberInputRoot = React.forwardRef(function NumberInput$1(props, ref) {
@@ -4991,7 +4998,7 @@ const NumberViewer = ({ schema, column, prefix, }) => {
4991
4998
  };
4992
4999
 
4993
5000
  const ObjectViewer = ({ schema, column, prefix }) => {
4994
- const { properties, gridColumn = "span 4", gridRow = "span 1", required, } = schema;
5001
+ const { properties, gridColumn = "span 12", gridRow = "span 1", required, } = schema;
4995
5002
  const { translate } = useSchemaContext();
4996
5003
  const colLabel = `${prefix}${column}`;
4997
5004
  const isRequired = required?.some((columnId) => columnId === column);
@@ -4999,7 +5006,7 @@ const ObjectViewer = ({ schema, column, prefix }) => {
4999
5006
  if (properties === undefined) {
5000
5007
  throw new Error(`properties is undefined when using ObjectInput`);
5001
5008
  }
5002
- 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) => {
5003
5010
  return (
5004
5011
  // @ts-expect-error find suitable types
5005
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.37",
3
+ "version": "12.0.0-beta.38",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",