@bsol-oss/react-datatable5 12.0.0-beta.86 → 12.0.0-beta.88
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.
package/dist/index.d.ts
CHANGED
|
@@ -853,6 +853,7 @@ interface FormRootProps<TData extends FieldValues> {
|
|
|
853
853
|
idPickerLabels?: IdPickerLabels;
|
|
854
854
|
enumPickerLabels?: EnumPickerLabels;
|
|
855
855
|
filePickerLabels?: FilePickerLabels;
|
|
856
|
+
insideDialog?: boolean;
|
|
856
857
|
}
|
|
857
858
|
interface CustomJSONSchema7Definition extends JSONSchema7 {
|
|
858
859
|
variant: string;
|
|
@@ -869,7 +870,7 @@ declare const idPickerSanityCheck: (column: string, foreign_key?: {
|
|
|
869
870
|
column?: string | undefined;
|
|
870
871
|
display_column?: string | undefined;
|
|
871
872
|
} | undefined) => void;
|
|
872
|
-
declare const FormRoot: <TData extends FieldValues>({ schema, idMap, setIdMap, form, serverUrl, translate, children, order, ignore, include, onSubmit, rowNumber, requestOptions, getUpdatedData, customErrorRenderer, customSuccessRenderer, displayConfig, requireConfirmation, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, }: FormRootProps<TData>) => react_jsx_runtime.JSX.Element;
|
|
873
|
+
declare const FormRoot: <TData extends FieldValues>({ schema, idMap, setIdMap, form, serverUrl, translate, children, order, ignore, include, onSubmit, rowNumber, requestOptions, getUpdatedData, customErrorRenderer, customSuccessRenderer, displayConfig, requireConfirmation, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, insideDialog, }: FormRootProps<TData>) => react_jsx_runtime.JSX.Element;
|
|
873
874
|
|
|
874
875
|
interface DefaultFormProps<TData extends FieldValues> {
|
|
875
876
|
formConfig: Omit<FormRootProps<TData>, "children">;
|
package/dist/index.js
CHANGED
|
@@ -3627,7 +3627,7 @@ const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, childre
|
|
|
3627
3627
|
showSubmitButton: true,
|
|
3628
3628
|
showResetButton: true,
|
|
3629
3629
|
showTitle: true,
|
|
3630
|
-
}, requireConfirmation = false, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, }) => {
|
|
3630
|
+
}, requireConfirmation = false, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, insideDialog = false, }) => {
|
|
3631
3631
|
const [isSuccess, setIsSuccess] = React.useState(false);
|
|
3632
3632
|
const [isError, setIsError] = React.useState(false);
|
|
3633
3633
|
const [isSubmiting, setIsSubmiting] = React.useState(false);
|
|
@@ -3718,6 +3718,7 @@ const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, childre
|
|
|
3718
3718
|
enumPickerLabels,
|
|
3719
3719
|
filePickerLabels,
|
|
3720
3720
|
ajvResolver: ajvResolver(schema),
|
|
3721
|
+
insideDialog,
|
|
3721
3722
|
}, children: jsxRuntime.jsx(reactHookForm.FormProvider, { ...form, children: children }) }));
|
|
3722
3723
|
};
|
|
3723
3724
|
|
|
@@ -4178,7 +4179,7 @@ const DateRangePicker = ({ column, schema, prefix, }) => {
|
|
|
4178
4179
|
|
|
4179
4180
|
const EnumPicker = ({ column, isMultiple = false, schema, prefix, showTotalAndLimit = false, }) => {
|
|
4180
4181
|
const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
|
|
4181
|
-
const { enumPickerLabels } = useSchemaContext();
|
|
4182
|
+
const { enumPickerLabels, insideDialog } = useSchemaContext();
|
|
4182
4183
|
const formI18n = useFormI18n(column, prefix);
|
|
4183
4184
|
const { required, variant } = schema;
|
|
4184
4185
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
@@ -4247,10 +4248,13 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, showTotalAndLi
|
|
|
4247
4248
|
}, children: !!renderDisplay === true
|
|
4248
4249
|
? renderDisplay(enumValue)
|
|
4249
4250
|
: formI18n.t(enumValue) }, enumValue));
|
|
4250
|
-
}) })), jsxRuntime.jsxs(react.Combobox.Root, { collection: collection, value: currentValue, onValueChange: handleValueChange, onInputValueChange: handleInputValueChange, multiple: isMultiple, closeOnSelect: !isMultiple, openOnClick: true, invalid: !!errors[colLabel], width: "100%",
|
|
4251
|
+
}) })), jsxRuntime.jsxs(react.Combobox.Root, { collection: collection, value: currentValue, onValueChange: handleValueChange, onInputValueChange: handleInputValueChange, multiple: isMultiple, closeOnSelect: !isMultiple, openOnClick: true, invalid: !!errors[colLabel], width: "100%", positioning: insideDialog
|
|
4252
|
+
? { strategy: 'fixed', hideWhenDetached: true }
|
|
4253
|
+
: undefined, children: [jsxRuntime.jsxs(react.Combobox.Control, { children: [jsxRuntime.jsx(react.Combobox.Input, { placeholder: enumPickerLabels?.typeToSearch ?? formI18n.t('type_to_search') }), jsxRuntime.jsxs(react.Combobox.IndicatorGroup, { children: [!isMultiple && currentValue.length > 0 && (jsxRuntime.jsx(react.Combobox.ClearTrigger, { onClick: () => {
|
|
4251
4254
|
setValue(colLabel, '');
|
|
4252
|
-
} })), jsxRuntime.jsx(react.Combobox.Trigger, {})] })] }),
|
|
4253
|
-
|
|
4255
|
+
} })), jsxRuntime.jsx(react.Combobox.Trigger, {})] })] }), insideDialog ? (jsxRuntime.jsx(react.Combobox.Positioner, { children: jsxRuntime.jsxs(react.Combobox.Content, { children: [showTotalAndLimit && (jsxRuntime.jsx(react.Text, { p: 2, fontSize: "sm", color: "fg.muted", children: `${enumPickerLabels?.total ?? formI18n.t('total')}: ${collection.items.length}` })), collection.items.length === 0 ? (jsxRuntime.jsx(react.Combobox.Empty, { children: enumPickerLabels?.emptySearchResult ??
|
|
4256
|
+
formI18n.t('empty_search_result') })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: collection.items.map((item, index) => (jsxRuntime.jsxs(react.Combobox.Item, { item: item, children: [jsxRuntime.jsx(react.Combobox.ItemText, { children: item.label }), jsxRuntime.jsx(react.Combobox.ItemIndicator, {})] }, item.value ?? `item-${index}`))) }))] }) })) : (jsxRuntime.jsx(react.Portal, { children: jsxRuntime.jsx(react.Combobox.Positioner, { children: jsxRuntime.jsxs(react.Combobox.Content, { children: [showTotalAndLimit && (jsxRuntime.jsx(react.Text, { p: 2, fontSize: "sm", color: "fg.muted", children: `${enumPickerLabels?.total ?? formI18n.t('total')}: ${collection.items.length}` })), collection.items.length === 0 ? (jsxRuntime.jsx(react.Combobox.Empty, { children: enumPickerLabels?.emptySearchResult ??
|
|
4257
|
+
formI18n.t('empty_search_result') })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: collection.items.map((item, index) => (jsxRuntime.jsxs(react.Combobox.Item, { item: item, children: [jsxRuntime.jsx(react.Combobox.ItemText, { children: item.label }), jsxRuntime.jsx(react.Combobox.ItemIndicator, {})] }, item.value ?? `item-${index}`))) }))] }) }) }))] })] }));
|
|
4254
4258
|
};
|
|
4255
4259
|
|
|
4256
4260
|
function isEnteringWindow(_ref) {
|
|
@@ -5039,7 +5043,7 @@ const getTableData = async ({ serverUrl, in_table, searching = "", where = [], l
|
|
|
5039
5043
|
|
|
5040
5044
|
const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
5041
5045
|
const { watch, getValues, formState: { errors }, setValue, } = reactHookForm.useFormContext();
|
|
5042
|
-
const { serverUrl, idMap, setIdMap,
|
|
5046
|
+
const { serverUrl, idMap, setIdMap, idPickerLabels, insideDialog } = useSchemaContext();
|
|
5043
5047
|
const formI18n = useFormI18n(column, prefix);
|
|
5044
5048
|
const { required, gridColumn = 'span 12', gridRow = 'span 1', renderDisplay, foreign_key, } = schema;
|
|
5045
5049
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
@@ -5116,60 +5120,6 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
5116
5120
|
enabled: true, // Always enabled for combobox
|
|
5117
5121
|
staleTime: 300000,
|
|
5118
5122
|
});
|
|
5119
|
-
// Query for currently selected items (to display them properly)
|
|
5120
|
-
// This query is needed for side effects (populating idMap) even though the result isn't directly used
|
|
5121
|
-
reactQuery.useQuery({
|
|
5122
|
-
queryKey: [
|
|
5123
|
-
`idpicker-default`,
|
|
5124
|
-
{
|
|
5125
|
-
form: parentSchema.title,
|
|
5126
|
-
column,
|
|
5127
|
-
id: isMultiple ? currentIds : currentId,
|
|
5128
|
-
},
|
|
5129
|
-
],
|
|
5130
|
-
queryFn: async () => {
|
|
5131
|
-
const queryId = currentId;
|
|
5132
|
-
const queryIds = currentIds;
|
|
5133
|
-
if (customQueryFn) {
|
|
5134
|
-
const { data, idMap } = await customQueryFn({
|
|
5135
|
-
searching: '',
|
|
5136
|
-
limit: isMultiple ? queryIds.length : 1,
|
|
5137
|
-
offset: 0,
|
|
5138
|
-
where: [{ id: column_ref, value: isMultiple ? queryIds : queryId }],
|
|
5139
|
-
});
|
|
5140
|
-
setIdMap((state) => {
|
|
5141
|
-
return { ...state, ...idMap };
|
|
5142
|
-
});
|
|
5143
|
-
return data;
|
|
5144
|
-
}
|
|
5145
|
-
if (!queryId && (!queryIds || queryIds.length === 0)) {
|
|
5146
|
-
return { data: [] };
|
|
5147
|
-
}
|
|
5148
|
-
const data = await getTableData({
|
|
5149
|
-
serverUrl,
|
|
5150
|
-
searching: '',
|
|
5151
|
-
in_table: table,
|
|
5152
|
-
where: [{ id: column_ref, value: isMultiple ? queryIds : queryId }],
|
|
5153
|
-
limit: isMultiple ? queryIds.length : 1,
|
|
5154
|
-
offset: 0,
|
|
5155
|
-
});
|
|
5156
|
-
const newMap = Object.fromEntries((data ?? { data: [] }).data.map((item) => {
|
|
5157
|
-
return [
|
|
5158
|
-
item[column_ref],
|
|
5159
|
-
{
|
|
5160
|
-
...item,
|
|
5161
|
-
},
|
|
5162
|
-
];
|
|
5163
|
-
}));
|
|
5164
|
-
setIdMap((state) => {
|
|
5165
|
-
return { ...state, ...newMap };
|
|
5166
|
-
});
|
|
5167
|
-
return data;
|
|
5168
|
-
},
|
|
5169
|
-
enabled: isMultiple
|
|
5170
|
-
? Array.isArray(currentIds) && currentIds.length > 0
|
|
5171
|
-
: !!currentId,
|
|
5172
|
-
});
|
|
5173
5123
|
const { isLoading, isFetching, data, isPending, isError } = query;
|
|
5174
5124
|
const dataList = data?.data ?? [];
|
|
5175
5125
|
// Check if we're currently searching (user typed but debounce hasn't fired yet)
|
|
@@ -5232,15 +5182,23 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
5232
5182
|
}, children: !!renderDisplay === true
|
|
5233
5183
|
? renderDisplay(item)
|
|
5234
5184
|
: item[display_column] }, id));
|
|
5235
|
-
}) })), jsxRuntime.jsxs(react.Combobox.Root, { collection: collection, value: currentValue, onValueChange: handleValueChange, onInputValueChange: handleInputValueChange, multiple: isMultiple, closeOnSelect: !isMultiple, openOnClick: true, invalid: !!errors[colLabel], width: "100%",
|
|
5185
|
+
}) })), jsxRuntime.jsxs(react.Combobox.Root, { collection: collection, value: currentValue, onValueChange: handleValueChange, onInputValueChange: handleInputValueChange, multiple: isMultiple, closeOnSelect: !isMultiple, openOnClick: true, invalid: !!errors[colLabel], width: "100%", positioning: insideDialog
|
|
5186
|
+
? { strategy: 'fixed', hideWhenDetached: true }
|
|
5187
|
+
: undefined, children: [jsxRuntime.jsxs(react.Combobox.Control, { children: [jsxRuntime.jsx(react.Combobox.Input, { placeholder: idPickerLabels?.typeToSearch ?? formI18n.t('type_to_search') }), jsxRuntime.jsxs(react.Combobox.IndicatorGroup, { children: [(isFetching || isLoading || isPending) && jsxRuntime.jsx(react.Spinner, { size: "xs" }), isError && (jsxRuntime.jsx(react.Icon, { color: "fg.error", children: jsxRuntime.jsx(bi.BiError, {}) })), !isMultiple && currentValue.length > 0 && (jsxRuntime.jsx(react.Combobox.ClearTrigger, { onClick: () => {
|
|
5236
5188
|
setValue(colLabel, '');
|
|
5237
|
-
} })), jsxRuntime.jsx(react.Combobox.Trigger, {})] })] }),
|
|
5189
|
+
} })), jsxRuntime.jsx(react.Combobox.Trigger, {})] })] }), insideDialog ? (jsxRuntime.jsx(react.Combobox.Positioner, { children: jsxRuntime.jsx(react.Combobox.Content, { children: isError ? (jsxRuntime.jsx(react.Text, { p: 2, color: "fg.error", fontSize: "sm", children: formI18n.t('loading_failed') })) : isFetching || isLoading || isPending || isSearching ? (
|
|
5190
|
+
// Show skeleton items to prevent UI shift
|
|
5191
|
+
jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from({ length: 5 }).map((_, index) => (jsxRuntime.jsx(react.Flex, { p: 2, align: "center", gap: 2, children: jsxRuntime.jsx(react.Skeleton, { height: "20px", flex: "1" }) }, `skeleton-${index}`))) })) : collection.items.length === 0 ? (jsxRuntime.jsx(react.Combobox.Empty, { children: searchText
|
|
5192
|
+
? idPickerLabels?.emptySearchResult ??
|
|
5193
|
+
formI18n.t('empty_search_result')
|
|
5194
|
+
: idPickerLabels?.initialResults ??
|
|
5195
|
+
formI18n.t('initial_results') })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: collection.items.map((item, index) => (jsxRuntime.jsxs(react.Combobox.Item, { item: item, children: [jsxRuntime.jsx(react.Combobox.ItemText, { children: item.label }), jsxRuntime.jsx(react.Combobox.ItemIndicator, {})] }, item.value ?? `item-${index}`))) })) }) })) : (jsxRuntime.jsx(react.Portal, { children: jsxRuntime.jsx(react.Combobox.Positioner, { children: jsxRuntime.jsx(react.Combobox.Content, { children: isError ? (jsxRuntime.jsx(react.Text, { p: 2, color: "fg.error", fontSize: "sm", children: formI18n.t('loading_failed') })) : isFetching || isLoading || isPending || isSearching ? (
|
|
5238
5196
|
// Show skeleton items to prevent UI shift
|
|
5239
5197
|
jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from({ length: 5 }).map((_, index) => (jsxRuntime.jsx(react.Flex, { p: 2, align: "center", gap: 2, children: jsxRuntime.jsx(react.Skeleton, { height: "20px", flex: "1" }) }, `skeleton-${index}`))) })) : collection.items.length === 0 ? (jsxRuntime.jsx(react.Combobox.Empty, { children: searchText
|
|
5240
5198
|
? idPickerLabels?.emptySearchResult ??
|
|
5241
5199
|
formI18n.t('empty_search_result')
|
|
5242
5200
|
: idPickerLabels?.initialResults ??
|
|
5243
|
-
formI18n.t('initial_results') })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: collection.items.map((item, index) => (jsxRuntime.jsxs(react.Combobox.Item, { item: item, children: [jsxRuntime.jsx(react.Combobox.ItemText, { children: item.label }), jsxRuntime.jsx(react.Combobox.ItemIndicator, {})] }, item.value ?? `item-${index}`))) })) }) }) })] })] }));
|
|
5201
|
+
formI18n.t('initial_results') })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: collection.items.map((item, index) => (jsxRuntime.jsxs(react.Combobox.Item, { item: item, children: [jsxRuntime.jsx(react.Combobox.ItemText, { children: item.label }), jsxRuntime.jsx(react.Combobox.ItemIndicator, {})] }, item.value ?? `item-${index}`))) })) }) }) }))] })] }));
|
|
5244
5202
|
};
|
|
5245
5203
|
|
|
5246
5204
|
const NumberInputRoot = React__namespace.forwardRef(function NumberInput(props, ref) {
|
package/dist/index.mjs
CHANGED
|
@@ -3607,7 +3607,7 @@ const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, childre
|
|
|
3607
3607
|
showSubmitButton: true,
|
|
3608
3608
|
showResetButton: true,
|
|
3609
3609
|
showTitle: true,
|
|
3610
|
-
}, requireConfirmation = false, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, }) => {
|
|
3610
|
+
}, requireConfirmation = false, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, insideDialog = false, }) => {
|
|
3611
3611
|
const [isSuccess, setIsSuccess] = useState(false);
|
|
3612
3612
|
const [isError, setIsError] = useState(false);
|
|
3613
3613
|
const [isSubmiting, setIsSubmiting] = useState(false);
|
|
@@ -3698,6 +3698,7 @@ const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, childre
|
|
|
3698
3698
|
enumPickerLabels,
|
|
3699
3699
|
filePickerLabels,
|
|
3700
3700
|
ajvResolver: ajvResolver(schema),
|
|
3701
|
+
insideDialog,
|
|
3701
3702
|
}, children: jsx(FormProvider, { ...form, children: children }) }));
|
|
3702
3703
|
};
|
|
3703
3704
|
|
|
@@ -4158,7 +4159,7 @@ const DateRangePicker = ({ column, schema, prefix, }) => {
|
|
|
4158
4159
|
|
|
4159
4160
|
const EnumPicker = ({ column, isMultiple = false, schema, prefix, showTotalAndLimit = false, }) => {
|
|
4160
4161
|
const { watch, formState: { errors }, setValue, } = useFormContext();
|
|
4161
|
-
const { enumPickerLabels } = useSchemaContext();
|
|
4162
|
+
const { enumPickerLabels, insideDialog } = useSchemaContext();
|
|
4162
4163
|
const formI18n = useFormI18n(column, prefix);
|
|
4163
4164
|
const { required, variant } = schema;
|
|
4164
4165
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
@@ -4227,10 +4228,13 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, showTotalAndLi
|
|
|
4227
4228
|
}, children: !!renderDisplay === true
|
|
4228
4229
|
? renderDisplay(enumValue)
|
|
4229
4230
|
: formI18n.t(enumValue) }, enumValue));
|
|
4230
|
-
}) })), jsxs(Combobox.Root, { collection: collection, value: currentValue, onValueChange: handleValueChange, onInputValueChange: handleInputValueChange, multiple: isMultiple, closeOnSelect: !isMultiple, openOnClick: true, invalid: !!errors[colLabel], width: "100%",
|
|
4231
|
+
}) })), jsxs(Combobox.Root, { collection: collection, value: currentValue, onValueChange: handleValueChange, onInputValueChange: handleInputValueChange, multiple: isMultiple, closeOnSelect: !isMultiple, openOnClick: true, invalid: !!errors[colLabel], width: "100%", positioning: insideDialog
|
|
4232
|
+
? { strategy: 'fixed', hideWhenDetached: true }
|
|
4233
|
+
: undefined, children: [jsxs(Combobox.Control, { children: [jsx(Combobox.Input, { placeholder: enumPickerLabels?.typeToSearch ?? formI18n.t('type_to_search') }), jsxs(Combobox.IndicatorGroup, { children: [!isMultiple && currentValue.length > 0 && (jsx(Combobox.ClearTrigger, { onClick: () => {
|
|
4231
4234
|
setValue(colLabel, '');
|
|
4232
|
-
} })), jsx(Combobox.Trigger, {})] })] }),
|
|
4233
|
-
|
|
4235
|
+
} })), jsx(Combobox.Trigger, {})] })] }), insideDialog ? (jsx(Combobox.Positioner, { children: jsxs(Combobox.Content, { children: [showTotalAndLimit && (jsx(Text, { p: 2, fontSize: "sm", color: "fg.muted", children: `${enumPickerLabels?.total ?? formI18n.t('total')}: ${collection.items.length}` })), collection.items.length === 0 ? (jsx(Combobox.Empty, { children: enumPickerLabels?.emptySearchResult ??
|
|
4236
|
+
formI18n.t('empty_search_result') })) : (jsx(Fragment, { children: collection.items.map((item, index) => (jsxs(Combobox.Item, { item: item, children: [jsx(Combobox.ItemText, { children: item.label }), jsx(Combobox.ItemIndicator, {})] }, item.value ?? `item-${index}`))) }))] }) })) : (jsx(Portal, { children: jsx(Combobox.Positioner, { children: jsxs(Combobox.Content, { children: [showTotalAndLimit && (jsx(Text, { p: 2, fontSize: "sm", color: "fg.muted", children: `${enumPickerLabels?.total ?? formI18n.t('total')}: ${collection.items.length}` })), collection.items.length === 0 ? (jsx(Combobox.Empty, { children: enumPickerLabels?.emptySearchResult ??
|
|
4237
|
+
formI18n.t('empty_search_result') })) : (jsx(Fragment, { children: collection.items.map((item, index) => (jsxs(Combobox.Item, { item: item, children: [jsx(Combobox.ItemText, { children: item.label }), jsx(Combobox.ItemIndicator, {})] }, item.value ?? `item-${index}`))) }))] }) }) }))] })] }));
|
|
4234
4238
|
};
|
|
4235
4239
|
|
|
4236
4240
|
function isEnteringWindow(_ref) {
|
|
@@ -5019,7 +5023,7 @@ const getTableData = async ({ serverUrl, in_table, searching = "", where = [], l
|
|
|
5019
5023
|
|
|
5020
5024
|
const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
5021
5025
|
const { watch, getValues, formState: { errors }, setValue, } = useFormContext();
|
|
5022
|
-
const { serverUrl, idMap, setIdMap,
|
|
5026
|
+
const { serverUrl, idMap, setIdMap, idPickerLabels, insideDialog } = useSchemaContext();
|
|
5023
5027
|
const formI18n = useFormI18n(column, prefix);
|
|
5024
5028
|
const { required, gridColumn = 'span 12', gridRow = 'span 1', renderDisplay, foreign_key, } = schema;
|
|
5025
5029
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
@@ -5096,60 +5100,6 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
5096
5100
|
enabled: true, // Always enabled for combobox
|
|
5097
5101
|
staleTime: 300000,
|
|
5098
5102
|
});
|
|
5099
|
-
// Query for currently selected items (to display them properly)
|
|
5100
|
-
// This query is needed for side effects (populating idMap) even though the result isn't directly used
|
|
5101
|
-
useQuery({
|
|
5102
|
-
queryKey: [
|
|
5103
|
-
`idpicker-default`,
|
|
5104
|
-
{
|
|
5105
|
-
form: parentSchema.title,
|
|
5106
|
-
column,
|
|
5107
|
-
id: isMultiple ? currentIds : currentId,
|
|
5108
|
-
},
|
|
5109
|
-
],
|
|
5110
|
-
queryFn: async () => {
|
|
5111
|
-
const queryId = currentId;
|
|
5112
|
-
const queryIds = currentIds;
|
|
5113
|
-
if (customQueryFn) {
|
|
5114
|
-
const { data, idMap } = await customQueryFn({
|
|
5115
|
-
searching: '',
|
|
5116
|
-
limit: isMultiple ? queryIds.length : 1,
|
|
5117
|
-
offset: 0,
|
|
5118
|
-
where: [{ id: column_ref, value: isMultiple ? queryIds : queryId }],
|
|
5119
|
-
});
|
|
5120
|
-
setIdMap((state) => {
|
|
5121
|
-
return { ...state, ...idMap };
|
|
5122
|
-
});
|
|
5123
|
-
return data;
|
|
5124
|
-
}
|
|
5125
|
-
if (!queryId && (!queryIds || queryIds.length === 0)) {
|
|
5126
|
-
return { data: [] };
|
|
5127
|
-
}
|
|
5128
|
-
const data = await getTableData({
|
|
5129
|
-
serverUrl,
|
|
5130
|
-
searching: '',
|
|
5131
|
-
in_table: table,
|
|
5132
|
-
where: [{ id: column_ref, value: isMultiple ? queryIds : queryId }],
|
|
5133
|
-
limit: isMultiple ? queryIds.length : 1,
|
|
5134
|
-
offset: 0,
|
|
5135
|
-
});
|
|
5136
|
-
const newMap = Object.fromEntries((data ?? { data: [] }).data.map((item) => {
|
|
5137
|
-
return [
|
|
5138
|
-
item[column_ref],
|
|
5139
|
-
{
|
|
5140
|
-
...item,
|
|
5141
|
-
},
|
|
5142
|
-
];
|
|
5143
|
-
}));
|
|
5144
|
-
setIdMap((state) => {
|
|
5145
|
-
return { ...state, ...newMap };
|
|
5146
|
-
});
|
|
5147
|
-
return data;
|
|
5148
|
-
},
|
|
5149
|
-
enabled: isMultiple
|
|
5150
|
-
? Array.isArray(currentIds) && currentIds.length > 0
|
|
5151
|
-
: !!currentId,
|
|
5152
|
-
});
|
|
5153
5103
|
const { isLoading, isFetching, data, isPending, isError } = query;
|
|
5154
5104
|
const dataList = data?.data ?? [];
|
|
5155
5105
|
// Check if we're currently searching (user typed but debounce hasn't fired yet)
|
|
@@ -5212,15 +5162,23 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
5212
5162
|
}, children: !!renderDisplay === true
|
|
5213
5163
|
? renderDisplay(item)
|
|
5214
5164
|
: item[display_column] }, id));
|
|
5215
|
-
}) })), jsxs(Combobox.Root, { collection: collection, value: currentValue, onValueChange: handleValueChange, onInputValueChange: handleInputValueChange, multiple: isMultiple, closeOnSelect: !isMultiple, openOnClick: true, invalid: !!errors[colLabel], width: "100%",
|
|
5165
|
+
}) })), jsxs(Combobox.Root, { collection: collection, value: currentValue, onValueChange: handleValueChange, onInputValueChange: handleInputValueChange, multiple: isMultiple, closeOnSelect: !isMultiple, openOnClick: true, invalid: !!errors[colLabel], width: "100%", positioning: insideDialog
|
|
5166
|
+
? { strategy: 'fixed', hideWhenDetached: true }
|
|
5167
|
+
: undefined, children: [jsxs(Combobox.Control, { children: [jsx(Combobox.Input, { placeholder: idPickerLabels?.typeToSearch ?? formI18n.t('type_to_search') }), jsxs(Combobox.IndicatorGroup, { children: [(isFetching || isLoading || isPending) && jsx(Spinner, { size: "xs" }), isError && (jsx(Icon, { color: "fg.error", children: jsx(BiError, {}) })), !isMultiple && currentValue.length > 0 && (jsx(Combobox.ClearTrigger, { onClick: () => {
|
|
5216
5168
|
setValue(colLabel, '');
|
|
5217
|
-
} })), jsx(Combobox.Trigger, {})] })] }),
|
|
5169
|
+
} })), jsx(Combobox.Trigger, {})] })] }), insideDialog ? (jsx(Combobox.Positioner, { children: jsx(Combobox.Content, { children: isError ? (jsx(Text, { p: 2, color: "fg.error", fontSize: "sm", children: formI18n.t('loading_failed') })) : isFetching || isLoading || isPending || isSearching ? (
|
|
5170
|
+
// Show skeleton items to prevent UI shift
|
|
5171
|
+
jsx(Fragment, { children: Array.from({ length: 5 }).map((_, index) => (jsx(Flex, { p: 2, align: "center", gap: 2, children: jsx(Skeleton, { height: "20px", flex: "1" }) }, `skeleton-${index}`))) })) : collection.items.length === 0 ? (jsx(Combobox.Empty, { children: searchText
|
|
5172
|
+
? idPickerLabels?.emptySearchResult ??
|
|
5173
|
+
formI18n.t('empty_search_result')
|
|
5174
|
+
: idPickerLabels?.initialResults ??
|
|
5175
|
+
formI18n.t('initial_results') })) : (jsx(Fragment, { children: collection.items.map((item, index) => (jsxs(Combobox.Item, { item: item, children: [jsx(Combobox.ItemText, { children: item.label }), jsx(Combobox.ItemIndicator, {})] }, item.value ?? `item-${index}`))) })) }) })) : (jsx(Portal, { children: jsx(Combobox.Positioner, { children: jsx(Combobox.Content, { children: isError ? (jsx(Text, { p: 2, color: "fg.error", fontSize: "sm", children: formI18n.t('loading_failed') })) : isFetching || isLoading || isPending || isSearching ? (
|
|
5218
5176
|
// Show skeleton items to prevent UI shift
|
|
5219
5177
|
jsx(Fragment, { children: Array.from({ length: 5 }).map((_, index) => (jsx(Flex, { p: 2, align: "center", gap: 2, children: jsx(Skeleton, { height: "20px", flex: "1" }) }, `skeleton-${index}`))) })) : collection.items.length === 0 ? (jsx(Combobox.Empty, { children: searchText
|
|
5220
5178
|
? idPickerLabels?.emptySearchResult ??
|
|
5221
5179
|
formI18n.t('empty_search_result')
|
|
5222
5180
|
: idPickerLabels?.initialResults ??
|
|
5223
|
-
formI18n.t('initial_results') })) : (jsx(Fragment, { children: collection.items.map((item, index) => (jsxs(Combobox.Item, { item: item, children: [jsx(Combobox.ItemText, { children: item.label }), jsx(Combobox.ItemIndicator, {})] }, item.value ?? `item-${index}`))) })) }) }) })] })] }));
|
|
5181
|
+
formI18n.t('initial_results') })) : (jsx(Fragment, { children: collection.items.map((item, index) => (jsxs(Combobox.Item, { item: item, children: [jsx(Combobox.ItemText, { children: item.label }), jsx(Combobox.ItemIndicator, {})] }, item.value ?? `item-${index}`))) })) }) }) }))] })] }));
|
|
5224
5182
|
};
|
|
5225
5183
|
|
|
5226
5184
|
const NumberInputRoot = React.forwardRef(function NumberInput$1(props, ref) {
|
|
@@ -45,5 +45,6 @@ export interface SchemaFormContext<TData extends FieldValues> {
|
|
|
45
45
|
enumPickerLabels?: EnumPickerLabels;
|
|
46
46
|
filePickerLabels?: FilePickerLabels;
|
|
47
47
|
ajvResolver: Resolver<FieldValues>;
|
|
48
|
+
insideDialog?: boolean;
|
|
48
49
|
}
|
|
49
50
|
export declare const SchemaFormContext: import("react").Context<SchemaFormContext<unknown>>;
|
|
@@ -33,6 +33,7 @@ export interface FormRootProps<TData extends FieldValues> {
|
|
|
33
33
|
idPickerLabels?: IdPickerLabels;
|
|
34
34
|
enumPickerLabels?: EnumPickerLabels;
|
|
35
35
|
filePickerLabels?: FilePickerLabels;
|
|
36
|
+
insideDialog?: boolean;
|
|
36
37
|
}
|
|
37
38
|
export interface CustomJSONSchema7Definition extends JSONSchema7 {
|
|
38
39
|
variant: string;
|
|
@@ -49,4 +50,4 @@ export declare const idPickerSanityCheck: (column: string, foreign_key?: {
|
|
|
49
50
|
column?: string | undefined;
|
|
50
51
|
display_column?: string | undefined;
|
|
51
52
|
} | undefined) => void;
|
|
52
|
-
export declare const FormRoot: <TData extends FieldValues>({ schema, idMap, setIdMap, form, serverUrl, translate, children, order, ignore, include, onSubmit, rowNumber, requestOptions, getUpdatedData, customErrorRenderer, customSuccessRenderer, displayConfig, requireConfirmation, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, }: FormRootProps<TData>) => import("react/jsx-runtime").JSX.Element;
|
|
53
|
+
export declare const FormRoot: <TData extends FieldValues>({ schema, idMap, setIdMap, form, serverUrl, translate, children, order, ignore, include, onSubmit, rowNumber, requestOptions, getUpdatedData, customErrorRenderer, customSuccessRenderer, displayConfig, requireConfirmation, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, insideDialog, }: FormRootProps<TData>) => import("react/jsx-runtime").JSX.Element;
|