npm - @bsol-oss/react-datatable5 - Versions diffs - 12.0.0-beta.75 → 12.0.0-beta.77 - Mend

@bsol-oss/react-datatable5 12.0.0-beta.75 → 12.0.0-beta.77

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 (11) hide show

package/dist/index.d.ts CHANGED Viewed

@@ -823,6 +823,17 @@ interface EnumPickerLabels {
     emptySearchResult?: string;
     initialResults?: string;
 }
+interface FilePickerLabels {
+    fileDropzone?: string;
+    browseLibrary?: string;
+    dialogTitle?: string;
+    searchPlaceholder?: string;
+    loading?: string;
+    loadingFailed?: string;
+    noFilesFound?: string;
+    cancel?: string;
+    select?: string;
+}
 interface CustomJSONSchema7 extends JSONSchema7 {
     gridColumn?: string;
     gridRow?: string;
@@ -849,12 +860,26 @@ interface CustomJSONSchema7 extends JSONSchema7 {
     formatOptions?: Intl.NumberFormatOptions;
     numberStorageType?: 'string' | 'number';
     errorMessages?: Partial<Record<ValidationErrorType | string, string>>;
+    filePicker?: FilePickerProps;
 }
 interface TagPickerProps {
     column: string;
     schema: CustomJSONSchema7;
     prefix: string;
 }
+interface FilePickerMediaFile {
+    id: string;
+    name: string;
+    url?: string;
+    size?: string | number;
+    comment?: string;
+    type?: string;
+}
+interface FilePickerProps {
+    onFetchFiles?: (search: string) => Promise<FilePickerMediaFile[]>;
+    enableMediaLibrary?: boolean;
+    filterImageOnly?: boolean;
+}
 interface FormRootProps<TData extends FieldValues> {
     schema: CustomJSONSchema7;
@@ -883,6 +908,7 @@ interface FormRootProps<TData extends FieldValues> {
     dateTimePickerLabels?: DateTimePickerLabels;
     idPickerLabels?: IdPickerLabels;
     enumPickerLabels?: EnumPickerLabels;
+    filePickerLabels?: FilePickerLabels;
 }
 interface CustomJSONSchema7Definition extends JSONSchema7 {
     variant: string;
@@ -899,7 +925,7 @@ declare const idPickerSanityCheck: (column: string, foreign_key?: {
     column?: string | undefined;
     display_column?: string | undefined;
 } | undefined) => void;
-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, }: FormRootProps<TData>) => react_jsx_runtime.JSX.Element;
+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;
 interface DefaultFormProps<TData extends FieldValues> {
     formConfig: Omit<FormRootProps<TData>, "children">;
@@ -1071,4 +1097,4 @@ declare module "@tanstack/react-table" {
     }
 }
-export { type CalendarProps, CardHeader, type CardHeaderProps, type CustomJSONSchema7, type CustomJSONSchema7Definition, DataDisplay, type DataDisplayProps, type DataResponse, DataTable, type DataTableDefaultState, type DataTableProps, DataTableServer, type DataTableServerProps, type DatePickerLabels, type DatePickerProps, type DateTimePickerLabels, DefaultCardTitle, DefaultForm, type DefaultFormProps, DefaultTable, type DefaultTableProps, DensityToggleButton, type DensityToggleButtonProps, type EditFilterButtonProps, EditSortingButton, type EditSortingButtonProps, type EditViewButtonProps, EmptyState, type EmptyStateProps, type EnumPickerLabels, ErrorAlert, type ErrorAlertProps, type ErrorMessageConfig, type ErrorMessageResult, type FieldErrorConfig, FilterDialog, FormBody, FormRoot, type FormRootProps, FormTitle, type GetColumnsConfigs, type GetDateColorProps, type GetMultiDatesProps, type GetRangeDatesProps, type GetStyleProps, type GetVariantProps, GlobalFilter, type IdPickerLabels, PageSizeControl, type PageSizeControlProps, Pagination, type QueryParams, type RangeCalendarProps, type RangeDatePickerProps, RecordDisplay, type RecordDisplayProps, ReloadButton, type ReloadButtonProps, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, type Result, RowCountText, Table, TableBody, type TableBodyProps, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableComponent, TableControls, type TableControlsProps, TableDataDisplay, type TableDataDisplayProps, TableFilter, TableFilterTags, TableFooter, type TableFooterProps, TableHeader, type TableHeaderProps, type TableHeaderTexts, TableLoadingComponent, type TableLoadingComponentProps, type TableProps, type TableRendererProps, type TableRowSelectorProps, TableSelector, TableSorter, TableViewer, type TagPickerProps, TextCell, type TextCellProps, type UseDataTableProps, type UseDataTableReturn, type UseDataTableServerProps, type UseDataTableServerReturn, type UseFormProps, type ValidationErrorType, ViewDialog, buildErrorMessages, buildFieldErrors, buildRequiredErrors, convertToAjvErrorsFormat, createErrorMessage, getColumns, getMultiDates, getRangeDates, idPickerSanityCheck, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };
+export { type CalendarProps, CardHeader, type CardHeaderProps, type CustomJSONSchema7, type CustomJSONSchema7Definition, DataDisplay, type DataDisplayProps, type DataResponse, DataTable, type DataTableDefaultState, type DataTableProps, DataTableServer, type DataTableServerProps, type DatePickerLabels, type DatePickerProps, type DateTimePickerLabels, DefaultCardTitle, DefaultForm, type DefaultFormProps, DefaultTable, type DefaultTableProps, DensityToggleButton, type DensityToggleButtonProps, type EditFilterButtonProps, EditSortingButton, type EditSortingButtonProps, type EditViewButtonProps, EmptyState, type EmptyStateProps, type EnumPickerLabels, ErrorAlert, type ErrorAlertProps, type ErrorMessageConfig, type ErrorMessageResult, type FieldErrorConfig, type FilePickerLabels, type FilePickerMediaFile, type FilePickerProps, FilterDialog, FormBody, FormRoot, type FormRootProps, FormTitle, type GetColumnsConfigs, type GetDateColorProps, type GetMultiDatesProps, type GetRangeDatesProps, type GetStyleProps, type GetVariantProps, GlobalFilter, type IdPickerLabels, PageSizeControl, type PageSizeControlProps, Pagination, type QueryParams, type RangeCalendarProps, type RangeDatePickerProps, RecordDisplay, type RecordDisplayProps, ReloadButton, type ReloadButtonProps, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, type Result, RowCountText, Table, TableBody, type TableBodyProps, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableComponent, TableControls, type TableControlsProps, TableDataDisplay, type TableDataDisplayProps, TableFilter, TableFilterTags, TableFooter, type TableFooterProps, TableHeader, type TableHeaderProps, type TableHeaderTexts, TableLoadingComponent, type TableLoadingComponentProps, type TableProps, type TableRendererProps, type TableRowSelectorProps, TableSelector, TableSorter, TableViewer, type TagPickerProps, TextCell, type TextCellProps, type UseDataTableProps, type UseDataTableReturn, type UseDataTableServerProps, type UseDataTableServerReturn, type UseFormProps, type ValidationErrorType, ViewDialog, buildErrorMessages, buildFieldErrors, buildRequiredErrors, convertToAjvErrorsFormat, createErrorMessage, getColumns, getMultiDates, getRangeDates, idPickerSanityCheck, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };

package/dist/index.js CHANGED Viewed

@@ -3908,7 +3908,7 @@ const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, childre
     showSubmitButton: true,
     showResetButton: true,
     showTitle: true,
-}, requireConfirmation = false, dateTimePickerLabels, idPickerLabels, enumPickerLabels, }) => {
+}, requireConfirmation = false, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, }) => {
     const [isSuccess, setIsSuccess] = React.useState(false);
     const [isError, setIsError] = React.useState(false);
     const [isSubmiting, setIsSubmiting] = React.useState(false);
@@ -3997,6 +3997,7 @@ const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, childre
             dateTimePickerLabels,
             idPickerLabels,
             enumPickerLabels,
+            filePickerLabels,
             ajvResolver: ajvResolver(schema),
         }, children: jsxRuntime.jsx(reactHookForm.FormProvider, { ...form, children: children }) }));
 };
@@ -4370,6 +4371,92 @@ const DatePicker = ({ column, schema, prefix }) => {
                                 } })] }) })] }) }));
 };
+dayjs.extend(utc);
+dayjs.extend(timezone);
+const DateRangePicker = ({ column, schema, prefix, }) => {
+    const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
+    const { timezone, dateTimePickerLabels } = useSchemaContext();
+    const formI18n = useFormI18n(column, prefix);
+    const { required, gridColumn = 'span 12', gridRow = 'span 1', displayDateFormat = 'YYYY-MM-DD', dateFormat = 'YYYY-MM-DD', } = schema;
+    const isRequired = required?.some((columnId) => columnId === column);
+    const colLabel = formI18n.colLabel;
+    const [open, setOpen] = React.useState(false);
+    const selectedDateRange = watch(colLabel);
+    // Convert string[] to Date[] for the picker
+    const selectedDates = (selectedDateRange ?? [])
+        .map((dateStr) => {
+        if (!dateStr)
+            return null;
+        const parsed = dayjs(dateStr).tz(timezone);
+        return parsed.isValid() ? parsed.toDate() : null;
+    })
+        .filter((date) => date !== null);
+    // Format display string
+    const getDisplayText = () => {
+        if (!selectedDateRange || selectedDateRange.length === 0) {
+            return '';
+        }
+        if (selectedDateRange.length === 1) {
+            const date = dayjs(selectedDateRange[0]).tz(timezone);
+            return date.isValid() ? date.format(displayDateFormat) : '';
+        }
+        if (selectedDateRange.length === 2) {
+            const startDate = dayjs(selectedDateRange[0]).tz(timezone);
+            const endDate = dayjs(selectedDateRange[1]).tz(timezone);
+            if (startDate.isValid() && endDate.isValid()) {
+                return `${startDate.format(displayDateFormat)} - ${endDate.format(displayDateFormat)}`;
+            }
+        }
+        return '';
+    };
+    React.useEffect(() => {
+        try {
+            if (selectedDateRange && selectedDateRange.length > 0) {
+                // Format dates according to dateFormat from schema
+                const formatted = selectedDateRange
+                    .map((dateStr) => {
+                    if (!dateStr)
+                        return null;
+                    const parsed = dayjs(dateStr).tz(timezone);
+                    return parsed.isValid() ? parsed.format(dateFormat) : null;
+                })
+                    .filter((date) => date !== null);
+                // Update the form value only if different to avoid loops
+                // Compare arrays element by element
+                const needsUpdate = formatted.length !== selectedDateRange.length ||
+                    formatted.some((val, idx) => val !== selectedDateRange[idx]);
+                if (needsUpdate && formatted.length > 0) {
+                    setValue(colLabel, formatted, {
+                        shouldValidate: true,
+                        shouldDirty: true,
+                    });
+                }
+            }
+        }
+        catch (e) {
+            console.error(e);
+        }
+    }, [selectedDateRange, dateFormat, colLabel, setValue, timezone]);
+    return (jsxRuntime.jsx(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
+        gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], children: jsxRuntime.jsxs(PopoverRoot, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: true, children: [jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: jsxRuntime.jsxs(Button, { size: "sm", variant: "outline", onClick: () => {
+                            setOpen(true);
+                        }, justifyContent: 'start', children: [jsxRuntime.jsx(md.MdDateRange, {}), getDisplayText()] }) }), jsxRuntime.jsx(PopoverContent, { minW: '600px', children: jsxRuntime.jsxs(PopoverBody, { children: [jsxRuntime.jsx(PopoverTitle, {}), jsxRuntime.jsx(RangeDatePicker, { selected: selectedDates, onDateSelected: ({ selected, selectable, date }) => {
+                                    const newDates = getRangeDates({
+                                        selectable,
+                                        date,
+                                        selectedDates,
+                                    }) ?? [];
+                                    // Convert Date[] to string[]
+                                    const formattedDates = newDates
+                                        .map((dateObj) => dayjs(dateObj).tz(timezone).format(dateFormat))
+                                        .filter((dateStr) => dateStr);
+                                    setValue(colLabel, formattedDates, {
+                                        shouldValidate: true,
+                                        shouldDirty: true,
+                                    });
+                                }, monthsToDisplay: 2 })] }) })] }) }));
+};
 function filterArray(array, searchTerm) {
     // Convert the search term to lower case for case-insensitive comparison
     const lowerCaseSearchTerm = searchTerm.toLowerCase();
@@ -4782,7 +4869,7 @@ function getText(_ref2) {
   return source.getStringData(textMediaType);
 }
-const FileDropzone = ({ children = undefined, gridProps = {}, onDrop = () => { }, placeholder = "Drop files here or click to upload", }) => {
+const FileDropzone = ({ children = undefined, gridProps = {}, onDrop = () => { }, placeholder = 'Drop files here or click to upload', }) => {
     const ref = React.useRef(null);
     const [isDraggedOver, setIsDraggedOver] = React.useState(false);
     React.useEffect(() => {
@@ -4796,7 +4883,7 @@ const FileDropzone = ({ children = undefined, gridProps = {}, onDrop = () => { }
             onDrop: ({ source }) => {
                 const files = getFiles({ source });
                 const text = getText({ source });
-                console.log(files, text, "dfposa");
+                console.log(files, text, 'dfposa');
                 onDrop({ files, text });
             },
         });
@@ -4805,9 +4892,9 @@ const FileDropzone = ({ children = undefined, gridProps = {}, onDrop = () => { }
     function getColor(isDraggedOver) {
         if (isDraggedOver) {
             return {
-                backgroundColor: "blue.400",
+                backgroundColor: 'blue.400',
                 _dark: {
-                    backgroundColor: "blue.400",
+                    backgroundColor: 'blue.400',
                 },
             };
         }
@@ -4828,27 +4915,211 @@ const FileDropzone = ({ children = undefined, gridProps = {}, onDrop = () => { }
         const filesArray = [...event.target.files];
         onDrop({ files: filesArray });
     };
-    return (jsxRuntime.jsxs(react.Grid, { ...getColor(isDraggedOver), ref: ref, cursor: "pointer", onClick: handleClick, borderStyle: "dashed", borderColor: "colorPalette.400", alignContent: "center", justifyContent: "center", borderWidth: 1, borderRadius: 4, ...gridProps, children: [children, !!children === false && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Flex, { children: placeholder }), jsxRuntime.jsx(react.Input, { type: "file", multiple: true, style: { display: "none" }, ref: fileInput, onChange: handleChange })] }))] }));
+    return (jsxRuntime.jsxs(react.Grid, { ...getColor(isDraggedOver), ref: ref, cursor: 'pointer', onClick: handleClick, borderStyle: 'dashed', borderColor: 'colorPalette.400', alignContent: 'center', justifyContent: 'center', borderWidth: 1, borderRadius: 4, minH: "120px", ...gridProps, children: [children, !!children === false && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Flex, { children: placeholder }), jsxRuntime.jsx(react.Input, { type: "file", multiple: true, style: { display: 'none' }, ref: fileInput, onChange: handleChange })] }))] }));
 };
+/**
+ * Format bytes to human-readable string
+ * @param bytes - The number of bytes to format
+ * @returns Formatted string (e.g., "1.5 KB", "2.3 MB")
+ */
+function formatBytes(bytes) {
+    if (bytes === 0)
+        return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+}
+function FilePickerDialog({ open, onClose, onSelect, title, filterImageOnly = false, onFetchFiles, labels, translate, colLabel, }) {
+    const [searchTerm, setSearchTerm] = React.useState('');
+    const [selectedFileId, setSelectedFileId] = React.useState('');
+    const [failedImageIds, setFailedImageIds] = React.useState(new Set());
+    const { data: filesData, isLoading, isError, } = reactQuery.useQuery({
+        queryKey: ['file-picker-library', searchTerm],
+        queryFn: async () => {
+            if (!onFetchFiles)
+                return { data: [] };
+            const files = await onFetchFiles(searchTerm.trim() || '');
+            return { data: files };
+        },
+        enabled: open && !!onFetchFiles,
+    });
+    const files = (filesData?.data || []);
+    const filteredFiles = filterImageOnly
+        ? files.filter((file) => /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i.test(file.name))
+        : files;
+    const handleSelect = () => {
+        if (selectedFileId) {
+            onSelect(selectedFileId);
+            onClose();
+            setSelectedFileId('');
+            setSearchTerm('');
+        }
+    };
+    const handleClose = () => {
+        onClose();
+        setSelectedFileId('');
+        setSearchTerm('');
+        setFailedImageIds(new Set());
+    };
+    const handleImageError = (fileId) => {
+        setFailedImageIds((prev) => new Set(prev).add(fileId));
+    };
+    if (!onFetchFiles)
+        return null;
+    return (jsxRuntime.jsx(DialogRoot, { open: open, onOpenChange: (e) => !e.open && handleClose(), children: jsxRuntime.jsxs(DialogContent, { maxWidth: "800px", maxHeight: "90vh", children: [jsxRuntime.jsxs(DialogHeader, { children: [jsxRuntime.jsx(DialogTitle, { fontSize: "lg", fontWeight: "bold", children: title }), jsxRuntime.jsx(DialogCloseTrigger, {})] }), jsxRuntime.jsx(DialogBody, { children: jsxRuntime.jsxs(react.VStack, { align: "stretch", gap: 4, children: [jsxRuntime.jsxs(react.Box, { position: "relative", children: [jsxRuntime.jsx(react.Input, { placeholder: labels?.searchPlaceholder ??
+                                            translate(removeIndex(`${colLabel}.search_placeholder`)) ??
+                                            'Search files...', value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), bg: "bg.panel", border: "1px solid", borderColor: "border.default", colorPalette: "blue", _focus: {
+                                            borderColor: 'colorPalette.500',
+                                            _dark: {
+                                                borderColor: 'colorPalette.400',
+                                            },
+                                            boxShadow: {
+                                                base: '0 0 0 1px var(--chakra-colors-blue-500)',
+                                                _dark: '0 0 0 1px var(--chakra-colors-blue-400)',
+                                            },
+                                        }, pl: 10 }), jsxRuntime.jsx(react.Icon, { as: lu.LuSearch, position: "absolute", left: 3, top: "50%", transform: "translateY(-50%)", color: "fg.muted", boxSize: 4 })] }), isLoading && (jsxRuntime.jsxs(react.Box, { textAlign: "center", py: 8, children: [jsxRuntime.jsx(react.Spinner, { size: "lg", colorPalette: "blue" }), jsxRuntime.jsx(react.Text, { mt: 4, color: "fg.muted", children: labels?.loading ??
+                                            translate(removeIndex(`${colLabel}.loading`)) ??
+                                            'Loading files...' })] })), isError && (jsxRuntime.jsx(react.Box, { bg: { base: 'colorPalette.50', _dark: 'colorPalette.900/20' }, border: "1px solid", borderColor: {
+                                    base: 'colorPalette.200',
+                                    _dark: 'colorPalette.800',
+                                }, colorPalette: "red", borderRadius: "md", p: 4, children: jsxRuntime.jsx(react.Text, { color: {
+                                        base: 'colorPalette.600',
+                                        _dark: 'colorPalette.300',
+                                    }, children: labels?.loadingFailed ??
+                                        translate(removeIndex(`${colLabel}.error.loading_failed`)) ??
+                                        'Failed to load files' }) })), !isLoading && !isError && (jsxRuntime.jsx(react.Box, { maxHeight: "400px", overflowY: "auto", children: filteredFiles.length === 0 ? (jsxRuntime.jsx(react.Box, { textAlign: "center", py: 8, children: jsxRuntime.jsx(react.Text, { color: "fg.muted", children: labels?.noFilesFound ??
+                                            translate(removeIndex(`${colLabel}.no_files_found`)) ??
+                                            'No files found' }) })) : (jsxRuntime.jsx(react.VStack, { align: "stretch", gap: 2, children: filteredFiles.map((file) => {
+                                        const isImage = /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i.test(file.name);
+                                        const isSelected = selectedFileId === file.id;
+                                        const imageFailed = failedImageIds.has(file.id);
+                                        return (jsxRuntime.jsx(react.Box, { p: 3, border: "2px solid", borderColor: isSelected
+                                                ? {
+                                                    base: 'colorPalette.500',
+                                                    _dark: 'colorPalette.400',
+                                                }
+                                                : 'border.default', borderRadius: "md", bg: isSelected
+                                                ? {
+                                                    base: 'colorPalette.50',
+                                                    _dark: 'colorPalette.900/20',
+                                                }
+                                                : 'bg.panel', colorPalette: "blue", cursor: "pointer", onClick: () => setSelectedFileId(file.id), _hover: {
+                                                borderColor: isSelected
+                                                    ? {
+                                                        base: 'colorPalette.600',
+                                                        _dark: 'colorPalette.400',
+                                                    }
+                                                    : {
+                                                        base: 'colorPalette.300',
+                                                        _dark: 'colorPalette.400',
+                                                    },
+                                                bg: isSelected
+                                                    ? {
+                                                        base: 'colorPalette.100',
+                                                        _dark: 'colorPalette.800/30',
+                                                    }
+                                                    : 'bg.muted',
+                                            }, transition: "all 0.2s", children: jsxRuntime.jsxs(react.HStack, { gap: 3, children: [jsxRuntime.jsx(react.Box, { width: "60px", height: "60px", display: "flex", alignItems: "center", justifyContent: "center", bg: "bg.muted", borderRadius: "md", flexShrink: 0, children: isImage && file.url && !imageFailed ? (jsxRuntime.jsx(react.Image, { src: file.url, alt: file.name, boxSize: "60px", objectFit: "cover", borderRadius: "md", onError: () => handleImageError(file.id) })) : isImage && (imageFailed || !file.url) ? (jsxRuntime.jsx(react.Icon, { as: lu.LuImage, boxSize: 6, color: "fg.muted" })) : (jsxRuntime.jsx(react.Icon, { as: lu.LuFile, boxSize: 6, color: "fg.muted" })) }), jsxRuntime.jsxs(react.VStack, { align: "start", flex: 1, gap: 1, children: [jsxRuntime.jsx(react.Text, { fontSize: "sm", fontWeight: "medium", color: "fg.default", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: file.name }), jsxRuntime.jsxs(react.HStack, { gap: 2, children: [file.size && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(react.Text, { fontSize: "xs", color: "fg.muted", children: typeof file.size === 'number'
+                                                                                ? formatBytes(file.size)
+                                                                                : file.size }) })), file.comment && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [file.size && (jsxRuntime.jsx(react.Text, { fontSize: "xs", color: "fg.muted", children: "\u2022" })), jsxRuntime.jsx(react.Text, { fontSize: "xs", color: "fg.muted", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: file.comment })] }))] })] }), isSelected && (jsxRuntime.jsx(react.Box, { width: "24px", height: "24px", borderRadius: "full", bg: {
+                                                            base: 'colorPalette.500',
+                                                            _dark: 'colorPalette.400',
+                                                        }, colorPalette: "blue", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: jsxRuntime.jsx(react.Text, { color: "white", fontSize: "xs", fontWeight: "bold", children: "\u2713" }) }))] }) }, file.id));
+                                    }) })) }))] }) }), jsxRuntime.jsx(DialogFooter, { children: jsxRuntime.jsxs(react.HStack, { gap: 3, justify: "end", children: [jsxRuntime.jsx(react.Button, { variant: "outline", onClick: handleClose, borderColor: "border.default", bg: "bg.panel", _hover: { bg: 'bg.muted' }, children: labels?.cancel ??
+                                    translate(removeIndex(`${colLabel}.cancel`)) ??
+                                    'Cancel' }), jsxRuntime.jsx(react.Button, { colorPalette: "blue", onClick: handleSelect, disabled: !selectedFileId, children: labels?.select ??
+                                    translate(removeIndex(`${colLabel}.select`)) ??
+                                    'Select' })] }) })] }) }));
+}
 const FilePicker = ({ column, schema, prefix }) => {
     const { setValue, formState: { errors }, watch, } = reactHookForm.useFormContext();
-    const { translate } = useSchemaContext();
-    const { required, gridColumn = 'span 12', gridRow = 'span 1', } = schema;
+    const { filePickerLabels } = useSchemaContext();
+    const formI18n = useFormI18n(column, prefix);
+    const { required, gridColumn = 'span 12', gridRow = 'span 1', filePicker, } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
-    const currentFiles = (watch(column) ?? []);
-    const colLabel = `${prefix}${column}`;
-    return (jsxRuntime.jsxs(Field, { label: `${translate.t(`${colLabel}.field_label`)}`, required: isRequired, gridColumn: gridColumn ?? 'span 4', gridRow: gridRow ?? 'span 1', display: 'grid', gridTemplateRows: 'auto 1fr auto', alignItems: 'stretch', errorText: errors[`${colLabel}`]
-            ? translate.t(removeIndex(`${colLabel}.field_required`))
-            : undefined, invalid: !!errors[colLabel], children: [jsxRuntime.jsx(FileDropzone, { onDrop: ({ files }) => {
-                    const newFiles = files.filter(({ name }) => !currentFiles.some((cur) => cur.name === name));
-                    setValue(colLabel, [...currentFiles, ...newFiles]);
-                }, placeholder: translate.t(removeIndex(`${colLabel}.fileDropzone`)) }), jsxRuntime.jsx(react.Flex, { flexFlow: 'column', gap: 1, children: currentFiles.map((file) => {
-                    return (jsxRuntime.jsx(react.Card.Root, { variant: 'subtle', children: jsxRuntime.jsxs(react.Card.Body, { gap: "2", cursor: 'pointer', onClick: () => {
-                                setValue(column, currentFiles.filter(({ name }) => {
-                                    return name !== file.name;
-                                }));
-                            }, display: 'flex', flexFlow: 'row', alignItems: 'center', padding: '2', children: [file.type.startsWith('image/') && (jsxRuntime.jsx(react.Image, { src: URL.createObjectURL(file), alt: file.name, boxSize: "50px", objectFit: "cover", borderRadius: "md", marginRight: "2" })), jsxRuntime.jsx(react.Box, { children: file.name }), jsxRuntime.jsx(ti.TiDeleteOutline, {})] }) }, file.name));
+    const currentValue = watch(column) ?? [];
+    const currentFiles = Array.isArray(currentValue)
+        ? currentValue
+        : [];
+    const colLabel = formI18n.colLabel;
+    const [dialogOpen, setDialogOpen] = React.useState(false);
+    const [failedImageIds, setFailedImageIds] = React.useState(new Set());
+    const { onFetchFiles, enableMediaLibrary = false, filterImageOnly = false, } = filePicker || {};
+    const showMediaLibrary = enableMediaLibrary && !!onFetchFiles;
+    const handleImageError = (fileIdentifier) => {
+        setFailedImageIds((prev) => new Set(prev).add(fileIdentifier));
+    };
+    const handleMediaLibrarySelect = (fileId) => {
+        const newFiles = [...currentFiles, fileId];
+        setValue(colLabel, newFiles);
+    };
+    const handleRemove = (index) => {
+        const newFiles = currentFiles.filter((_, i) => i !== index);
+        setValue(colLabel, newFiles);
+    };
+    const isFileObject = (value) => {
+        return value instanceof File;
+    };
+    const getFileIdentifier = (file, index) => {
+        if (isFileObject(file)) {
+            return `${file.name}-${file.size}-${index}`;
+        }
+        return file;
+    };
+    const getFileName = (file) => {
+        if (isFileObject(file)) {
+            return file.name;
+        }
+        return typeof file === 'string' ? file : 'Unknown file';
+    };
+    const getFileSize = (file) => {
+        if (isFileObject(file)) {
+            return file.size;
+        }
+        return undefined;
+    };
+    const isImageFile = (file) => {
+        if (isFileObject(file)) {
+            return file.type.startsWith('image/');
+        }
+        if (typeof file === 'string') {
+            return /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i.test(file);
+        }
+        return false;
+    };
+    const getImageUrl = (file) => {
+        if (isFileObject(file)) {
+            return URL.createObjectURL(file);
+        }
+        return undefined;
+    };
+    return (jsxRuntime.jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
+        gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], children: [jsxRuntime.jsxs(react.VStack, { align: "stretch", gap: 2, children: [jsxRuntime.jsx(FileDropzone, { onDrop: ({ files }) => {
+                            const newFiles = files.filter(({ name }) => !currentFiles.some((cur) => {
+                                if (isFileObject(cur)) {
+                                    return cur.name === name;
+                                }
+                                return false;
+                            }));
+                            setValue(colLabel, [...currentFiles, ...newFiles]);
+                        }, placeholder: filePickerLabels?.fileDropzone ?? formI18n.t('fileDropzone') }), showMediaLibrary && (jsxRuntime.jsx(react.Button, { variant: "outline", onClick: () => setDialogOpen(true), borderColor: "border.default", bg: "bg.panel", _hover: { bg: 'bg.muted' }, children: filePickerLabels?.browseLibrary ??
+                            formI18n.t('browse_library') ??
+                            'Browse from Library' }))] }), showMediaLibrary && (jsxRuntime.jsx(FilePickerDialog, { open: dialogOpen, onClose: () => setDialogOpen(false), onSelect: handleMediaLibrarySelect, title: filePickerLabels?.dialogTitle ??
+                    formI18n.t('dialog_title') ??
+                    'Select File', filterImageOnly: filterImageOnly, onFetchFiles: onFetchFiles, labels: filePickerLabels, translate: formI18n.t, colLabel: colLabel })), jsxRuntime.jsx(react.Flex, { flexFlow: 'column', gap: 1, children: currentFiles.map((file, index) => {
+                    const fileIdentifier = getFileIdentifier(file, index);
+                    const fileName = getFileName(file);
+                    const fileSize = getFileSize(file);
+                    const isImage = isImageFile(file);
+                    const imageUrl = getImageUrl(file);
+                    const imageFailed = failedImageIds.has(fileIdentifier);
+                    return (jsxRuntime.jsx(react.Card.Root, { variant: 'subtle', colorPalette: "blue", children: jsxRuntime.jsxs(react.Card.Body, { gap: "2", cursor: 'pointer', onClick: () => handleRemove(index), display: 'flex', flexFlow: 'row', alignItems: 'center', padding: '2', border: "2px solid", borderColor: "border.default", borderRadius: "md", _hover: {
+                                borderColor: 'colorPalette.300',
+                                bg: 'bg.muted',
+                            }, transition: "all 0.2s", children: [jsxRuntime.jsx(react.Box, { width: "60px", height: "60px", display: "flex", alignItems: "center", justifyContent: "center", bg: "bg.muted", borderRadius: "md", flexShrink: 0, marginRight: "2", children: isImage && imageUrl && !imageFailed ? (jsxRuntime.jsx(react.Image, { src: imageUrl, alt: fileName, boxSize: "60px", objectFit: "cover", borderRadius: "md", onError: () => handleImageError(fileIdentifier) })) : isImage && (imageFailed || !imageUrl) ? (jsxRuntime.jsx(react.Icon, { as: lu.LuImage, boxSize: 6, color: "fg.muted" })) : (jsxRuntime.jsx(react.Icon, { as: lu.LuFile, boxSize: 6, color: "fg.muted" })) }), jsxRuntime.jsxs(react.VStack, { align: "start", flex: 1, gap: 1, children: [jsxRuntime.jsx(react.Text, { fontSize: "sm", fontWeight: "medium", color: "fg.default", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName }), fileSize !== undefined && (jsxRuntime.jsx(react.Text, { fontSize: "xs", color: "fg.muted", children: formatBytes(fileSize) }))] }), jsxRuntime.jsx(react.Icon, { as: ti.TiDeleteOutline, boxSize: 5, color: "fg.muted" })] }) }, fileIdentifier));
                 }) })] }));
 };
@@ -5972,59 +6243,62 @@ const DateTimePicker = ({ column, schema, prefix, }) => {
 const SchemaRenderer = ({ schema, prefix, column, }) => {
     const colSchema = schema;
     const { type, variant, properties: innerProperties, foreign_key, format, items, } = schema;
-    if (variant === "custom-input") {
+    if (variant === 'custom-input') {
         return jsxRuntime.jsx(CustomInput, { schema: colSchema, prefix, column });
     }
-    if (type === "string") {
+    if (type === 'string') {
         if ((schema.enum ?? []).length > 0) {
             return jsxRuntime.jsx(EnumPicker, { schema: colSchema, prefix, column });
         }
-        if (variant === "id-picker") {
+        if (variant === 'id-picker') {
             idPickerSanityCheck(column, foreign_key);
             return jsxRuntime.jsx(IdPicker, { schema: colSchema, prefix, column });
         }
-        if (format === "date") {
+        if (format === 'date') {
             return jsxRuntime.jsx(DatePicker, { schema: colSchema, prefix, column });
         }
-        if (format === "time") {
+        if (format === 'time') {
             return jsxRuntime.jsx(TimePicker, { schema: colSchema, prefix, column });
         }
-        if (format === "date-time") {
+        if (format === 'date-time') {
             return jsxRuntime.jsx(DateTimePicker, { schema: colSchema, prefix, column });
         }
-        if (variant === "text-area") {
+        if (variant === 'text-area') {
             return jsxRuntime.jsx(TextAreaInput, { schema: colSchema, prefix, column });
         }
         return jsxRuntime.jsx(StringInputField, { schema: colSchema, prefix, column });
     }
-    if (type === "number" || type === "integer") {
+    if (type === 'number' || type === 'integer') {
         return jsxRuntime.jsx(NumberInputField, { schema: colSchema, prefix, column });
     }
-    if (type === "boolean") {
+    if (type === 'boolean') {
         return jsxRuntime.jsx(BooleanPicker, { schema: colSchema, prefix, column });
     }
-    if (type === "object") {
+    if (type === 'object') {
         if (innerProperties) {
             return jsxRuntime.jsx(ObjectInput, { schema: colSchema, prefix, column });
         }
         return jsxRuntime.jsx(RecordInput$1, { schema: colSchema, prefix, column });
     }
-    if (type === "array") {
-        if (variant === "id-picker") {
+    if (type === 'array') {
+        if (variant === 'id-picker') {
             idPickerSanityCheck(column, foreign_key);
             return (jsxRuntime.jsx(IdPicker, { schema: colSchema, prefix, column, isMultiple: true }));
         }
-        if (variant === "tag-picker") {
+        if (variant === 'tag-picker') {
             return jsxRuntime.jsx(TagPicker, { schema: colSchema, prefix, column });
         }
-        if (variant === "file-picker") {
+        if (variant === 'file-picker') {
             return jsxRuntime.jsx(FilePicker, { schema: colSchema, prefix, column });
         }
-        if (variant === "enum-picker") {
+        if (variant === 'date-range') {
+            return jsxRuntime.jsx(DateRangePicker, { schema: colSchema, prefix, column });
+        }
+        if (variant === 'enum-picker') {
             const { items } = colSchema;
             const { enum: enumItems } = items;
             const enumSchema = {
-                type: "string",
+                type: 'string',
                 enum: enumItems,
             };
             return (jsxRuntime.jsx(EnumPicker, { isMultiple: true, schema: enumSchema, prefix, column }));
@@ -6034,7 +6308,7 @@ const SchemaRenderer = ({ schema, prefix, column, }) => {
         }
         return jsxRuntime.jsx(react.Text, { children: `array ${column}` });
     }
-    if (type === "null") {
+    if (type === 'null') {
         return jsxRuntime.jsx(react.Text, { children: `null ${column}` });
     }
     return jsxRuntime.jsx(react.Text, { children: "missing type" });

package/dist/index.mjs CHANGED Viewed

@@ -3,7 +3,7 @@ import { Button as Button$1, AbsoluteCenter, Spinner, Span, IconButton, Portal,
 import { AiOutlineColumnWidth } from 'react-icons/ai';
 import * as React from 'react';
 import React__default, { createContext, useContext, useState, useEffect, useRef, forwardRef } from 'react';
-import { LuX, LuCheck, LuChevronRight } from 'react-icons/lu';
+import { LuX, LuCheck, LuChevronRight, LuImage, LuFile, LuSearch } from 'react-icons/lu';
 import { MdOutlineSort, MdFilterAlt, MdSearch, MdOutlineViewColumn, MdFilterListAlt, MdPushPin, MdCancel, MdClear, MdOutlineChecklist, MdDateRange } from 'react-icons/md';
 import { FaUpDown, FaGripLinesVertical, FaTrash } from 'react-icons/fa6';
 import { BiDownArrow, BiUpArrow, BiError } from 'react-icons/bi';
@@ -3888,7 +3888,7 @@ const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, childre
     showSubmitButton: true,
     showResetButton: true,
     showTitle: true,
-}, requireConfirmation = false, dateTimePickerLabels, idPickerLabels, enumPickerLabels, }) => {
+}, requireConfirmation = false, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, }) => {
     const [isSuccess, setIsSuccess] = useState(false);
     const [isError, setIsError] = useState(false);
     const [isSubmiting, setIsSubmiting] = useState(false);
@@ -3977,6 +3977,7 @@ const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, childre
             dateTimePickerLabels,
             idPickerLabels,
             enumPickerLabels,
+            filePickerLabels,
             ajvResolver: ajvResolver(schema),
         }, children: jsx(FormProvider, { ...form, children: children }) }));
 };
@@ -4350,6 +4351,92 @@ const DatePicker = ({ column, schema, prefix }) => {
                                 } })] }) })] }) }));
 };
+dayjs.extend(utc);
+dayjs.extend(timezone);
+const DateRangePicker = ({ column, schema, prefix, }) => {
+    const { watch, formState: { errors }, setValue, } = useFormContext();
+    const { timezone, dateTimePickerLabels } = useSchemaContext();
+    const formI18n = useFormI18n(column, prefix);
+    const { required, gridColumn = 'span 12', gridRow = 'span 1', displayDateFormat = 'YYYY-MM-DD', dateFormat = 'YYYY-MM-DD', } = schema;
+    const isRequired = required?.some((columnId) => columnId === column);
+    const colLabel = formI18n.colLabel;
+    const [open, setOpen] = useState(false);
+    const selectedDateRange = watch(colLabel);
+    // Convert string[] to Date[] for the picker
+    const selectedDates = (selectedDateRange ?? [])
+        .map((dateStr) => {
+        if (!dateStr)
+            return null;
+        const parsed = dayjs(dateStr).tz(timezone);
+        return parsed.isValid() ? parsed.toDate() : null;
+    })
+        .filter((date) => date !== null);
+    // Format display string
+    const getDisplayText = () => {
+        if (!selectedDateRange || selectedDateRange.length === 0) {
+            return '';
+        }
+        if (selectedDateRange.length === 1) {
+            const date = dayjs(selectedDateRange[0]).tz(timezone);
+            return date.isValid() ? date.format(displayDateFormat) : '';
+        }
+        if (selectedDateRange.length === 2) {
+            const startDate = dayjs(selectedDateRange[0]).tz(timezone);
+            const endDate = dayjs(selectedDateRange[1]).tz(timezone);
+            if (startDate.isValid() && endDate.isValid()) {
+                return `${startDate.format(displayDateFormat)} - ${endDate.format(displayDateFormat)}`;
+            }
+        }
+        return '';
+    };
+    useEffect(() => {
+        try {
+            if (selectedDateRange && selectedDateRange.length > 0) {
+                // Format dates according to dateFormat from schema
+                const formatted = selectedDateRange
+                    .map((dateStr) => {
+                    if (!dateStr)
+                        return null;
+                    const parsed = dayjs(dateStr).tz(timezone);
+                    return parsed.isValid() ? parsed.format(dateFormat) : null;
+                })
+                    .filter((date) => date !== null);
+                // Update the form value only if different to avoid loops
+                // Compare arrays element by element
+                const needsUpdate = formatted.length !== selectedDateRange.length ||
+                    formatted.some((val, idx) => val !== selectedDateRange[idx]);
+                if (needsUpdate && formatted.length > 0) {
+                    setValue(colLabel, formatted, {
+                        shouldValidate: true,
+                        shouldDirty: true,
+                    });
+                }
+            }
+        }
+        catch (e) {
+            console.error(e);
+        }
+    }, [selectedDateRange, dateFormat, colLabel, setValue, timezone]);
+    return (jsx(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
+        gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], children: jsxs(PopoverRoot, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: true, children: [jsx(PopoverTrigger, { asChild: true, children: jsxs(Button, { size: "sm", variant: "outline", onClick: () => {
+                            setOpen(true);
+                        }, justifyContent: 'start', children: [jsx(MdDateRange, {}), getDisplayText()] }) }), jsx(PopoverContent, { minW: '600px', children: jsxs(PopoverBody, { children: [jsx(PopoverTitle, {}), jsx(RangeDatePicker, { selected: selectedDates, onDateSelected: ({ selected, selectable, date }) => {
+                                    const newDates = getRangeDates({
+                                        selectable,
+                                        date,
+                                        selectedDates,
+                                    }) ?? [];
+                                    // Convert Date[] to string[]
+                                    const formattedDates = newDates
+                                        .map((dateObj) => dayjs(dateObj).tz(timezone).format(dateFormat))
+                                        .filter((dateStr) => dateStr);
+                                    setValue(colLabel, formattedDates, {
+                                        shouldValidate: true,
+                                        shouldDirty: true,
+                                    });
+                                }, monthsToDisplay: 2 })] }) })] }) }));
+};
 function filterArray(array, searchTerm) {
     // Convert the search term to lower case for case-insensitive comparison
     const lowerCaseSearchTerm = searchTerm.toLowerCase();
@@ -4762,7 +4849,7 @@ function getText(_ref2) {
   return source.getStringData(textMediaType);
 }
-const FileDropzone = ({ children = undefined, gridProps = {}, onDrop = () => { }, placeholder = "Drop files here or click to upload", }) => {
+const FileDropzone = ({ children = undefined, gridProps = {}, onDrop = () => { }, placeholder = 'Drop files here or click to upload', }) => {
     const ref = useRef(null);
     const [isDraggedOver, setIsDraggedOver] = useState(false);
     useEffect(() => {
@@ -4776,7 +4863,7 @@ const FileDropzone = ({ children = undefined, gridProps = {}, onDrop = () => { }
             onDrop: ({ source }) => {
                 const files = getFiles({ source });
                 const text = getText({ source });
-                console.log(files, text, "dfposa");
+                console.log(files, text, 'dfposa');
                 onDrop({ files, text });
             },
         });
@@ -4785,9 +4872,9 @@ const FileDropzone = ({ children = undefined, gridProps = {}, onDrop = () => { }
     function getColor(isDraggedOver) {
         if (isDraggedOver) {
             return {
-                backgroundColor: "blue.400",
+                backgroundColor: 'blue.400',
                 _dark: {
-                    backgroundColor: "blue.400",
+                    backgroundColor: 'blue.400',
                 },
             };
         }
@@ -4808,27 +4895,211 @@ const FileDropzone = ({ children = undefined, gridProps = {}, onDrop = () => { }
         const filesArray = [...event.target.files];
         onDrop({ files: filesArray });
     };
-    return (jsxs(Grid, { ...getColor(isDraggedOver), ref: ref, cursor: "pointer", onClick: handleClick, borderStyle: "dashed", borderColor: "colorPalette.400", alignContent: "center", justifyContent: "center", borderWidth: 1, borderRadius: 4, ...gridProps, children: [children, !!children === false && (jsxs(Fragment, { children: [jsx(Flex, { children: placeholder }), jsx(Input, { type: "file", multiple: true, style: { display: "none" }, ref: fileInput, onChange: handleChange })] }))] }));
+    return (jsxs(Grid, { ...getColor(isDraggedOver), ref: ref, cursor: 'pointer', onClick: handleClick, borderStyle: 'dashed', borderColor: 'colorPalette.400', alignContent: 'center', justifyContent: 'center', borderWidth: 1, borderRadius: 4, minH: "120px", ...gridProps, children: [children, !!children === false && (jsxs(Fragment, { children: [jsx(Flex, { children: placeholder }), jsx(Input, { type: "file", multiple: true, style: { display: 'none' }, ref: fileInput, onChange: handleChange })] }))] }));
 };
+/**
+ * Format bytes to human-readable string
+ * @param bytes - The number of bytes to format
+ * @returns Formatted string (e.g., "1.5 KB", "2.3 MB")
+ */
+function formatBytes(bytes) {
+    if (bytes === 0)
+        return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+}
+function FilePickerDialog({ open, onClose, onSelect, title, filterImageOnly = false, onFetchFiles, labels, translate, colLabel, }) {
+    const [searchTerm, setSearchTerm] = useState('');
+    const [selectedFileId, setSelectedFileId] = useState('');
+    const [failedImageIds, setFailedImageIds] = useState(new Set());
+    const { data: filesData, isLoading, isError, } = useQuery({
+        queryKey: ['file-picker-library', searchTerm],
+        queryFn: async () => {
+            if (!onFetchFiles)
+                return { data: [] };
+            const files = await onFetchFiles(searchTerm.trim() || '');
+            return { data: files };
+        },
+        enabled: open && !!onFetchFiles,
+    });
+    const files = (filesData?.data || []);
+    const filteredFiles = filterImageOnly
+        ? files.filter((file) => /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i.test(file.name))
+        : files;
+    const handleSelect = () => {
+        if (selectedFileId) {
+            onSelect(selectedFileId);
+            onClose();
+            setSelectedFileId('');
+            setSearchTerm('');
+        }
+    };
+    const handleClose = () => {
+        onClose();
+        setSelectedFileId('');
+        setSearchTerm('');
+        setFailedImageIds(new Set());
+    };
+    const handleImageError = (fileId) => {
+        setFailedImageIds((prev) => new Set(prev).add(fileId));
+    };
+    if (!onFetchFiles)
+        return null;
+    return (jsx(DialogRoot, { open: open, onOpenChange: (e) => !e.open && handleClose(), children: jsxs(DialogContent, { maxWidth: "800px", maxHeight: "90vh", children: [jsxs(DialogHeader, { children: [jsx(DialogTitle, { fontSize: "lg", fontWeight: "bold", children: title }), jsx(DialogCloseTrigger, {})] }), jsx(DialogBody, { children: jsxs(VStack, { align: "stretch", gap: 4, children: [jsxs(Box, { position: "relative", children: [jsx(Input, { placeholder: labels?.searchPlaceholder ??
+                                            translate(removeIndex(`${colLabel}.search_placeholder`)) ??
+                                            'Search files...', value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), bg: "bg.panel", border: "1px solid", borderColor: "border.default", colorPalette: "blue", _focus: {
+                                            borderColor: 'colorPalette.500',
+                                            _dark: {
+                                                borderColor: 'colorPalette.400',
+                                            },
+                                            boxShadow: {
+                                                base: '0 0 0 1px var(--chakra-colors-blue-500)',
+                                                _dark: '0 0 0 1px var(--chakra-colors-blue-400)',
+                                            },
+                                        }, pl: 10 }), jsx(Icon, { as: LuSearch, position: "absolute", left: 3, top: "50%", transform: "translateY(-50%)", color: "fg.muted", boxSize: 4 })] }), isLoading && (jsxs(Box, { textAlign: "center", py: 8, children: [jsx(Spinner, { size: "lg", colorPalette: "blue" }), jsx(Text, { mt: 4, color: "fg.muted", children: labels?.loading ??
+                                            translate(removeIndex(`${colLabel}.loading`)) ??
+                                            'Loading files...' })] })), isError && (jsx(Box, { bg: { base: 'colorPalette.50', _dark: 'colorPalette.900/20' }, border: "1px solid", borderColor: {
+                                    base: 'colorPalette.200',
+                                    _dark: 'colorPalette.800',
+                                }, colorPalette: "red", borderRadius: "md", p: 4, children: jsx(Text, { color: {
+                                        base: 'colorPalette.600',
+                                        _dark: 'colorPalette.300',
+                                    }, children: labels?.loadingFailed ??
+                                        translate(removeIndex(`${colLabel}.error.loading_failed`)) ??
+                                        'Failed to load files' }) })), !isLoading && !isError && (jsx(Box, { maxHeight: "400px", overflowY: "auto", children: filteredFiles.length === 0 ? (jsx(Box, { textAlign: "center", py: 8, children: jsx(Text, { color: "fg.muted", children: labels?.noFilesFound ??
+                                            translate(removeIndex(`${colLabel}.no_files_found`)) ??
+                                            'No files found' }) })) : (jsx(VStack, { align: "stretch", gap: 2, children: filteredFiles.map((file) => {
+                                        const isImage = /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i.test(file.name);
+                                        const isSelected = selectedFileId === file.id;
+                                        const imageFailed = failedImageIds.has(file.id);
+                                        return (jsx(Box, { p: 3, border: "2px solid", borderColor: isSelected
+                                                ? {
+                                                    base: 'colorPalette.500',
+                                                    _dark: 'colorPalette.400',
+                                                }
+                                                : 'border.default', borderRadius: "md", bg: isSelected
+                                                ? {
+                                                    base: 'colorPalette.50',
+                                                    _dark: 'colorPalette.900/20',
+                                                }
+                                                : 'bg.panel', colorPalette: "blue", cursor: "pointer", onClick: () => setSelectedFileId(file.id), _hover: {
+                                                borderColor: isSelected
+                                                    ? {
+                                                        base: 'colorPalette.600',
+                                                        _dark: 'colorPalette.400',
+                                                    }
+                                                    : {
+                                                        base: 'colorPalette.300',
+                                                        _dark: 'colorPalette.400',
+                                                    },
+                                                bg: isSelected
+                                                    ? {
+                                                        base: 'colorPalette.100',
+                                                        _dark: 'colorPalette.800/30',
+                                                    }
+                                                    : 'bg.muted',
+                                            }, transition: "all 0.2s", children: jsxs(HStack, { gap: 3, children: [jsx(Box, { width: "60px", height: "60px", display: "flex", alignItems: "center", justifyContent: "center", bg: "bg.muted", borderRadius: "md", flexShrink: 0, children: isImage && file.url && !imageFailed ? (jsx(Image, { src: file.url, alt: file.name, boxSize: "60px", objectFit: "cover", borderRadius: "md", onError: () => handleImageError(file.id) })) : isImage && (imageFailed || !file.url) ? (jsx(Icon, { as: LuImage, boxSize: 6, color: "fg.muted" })) : (jsx(Icon, { as: LuFile, boxSize: 6, color: "fg.muted" })) }), jsxs(VStack, { align: "start", flex: 1, gap: 1, children: [jsx(Text, { fontSize: "sm", fontWeight: "medium", color: "fg.default", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: file.name }), jsxs(HStack, { gap: 2, children: [file.size && (jsx(Fragment, { children: jsx(Text, { fontSize: "xs", color: "fg.muted", children: typeof file.size === 'number'
+                                                                                ? formatBytes(file.size)
+                                                                                : file.size }) })), file.comment && (jsxs(Fragment, { children: [file.size && (jsx(Text, { fontSize: "xs", color: "fg.muted", children: "\u2022" })), jsx(Text, { fontSize: "xs", color: "fg.muted", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: file.comment })] }))] })] }), isSelected && (jsx(Box, { width: "24px", height: "24px", borderRadius: "full", bg: {
+                                                            base: 'colorPalette.500',
+                                                            _dark: 'colorPalette.400',
+                                                        }, colorPalette: "blue", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: jsx(Text, { color: "white", fontSize: "xs", fontWeight: "bold", children: "\u2713" }) }))] }) }, file.id));
+                                    }) })) }))] }) }), jsx(DialogFooter, { children: jsxs(HStack, { gap: 3, justify: "end", children: [jsx(Button$1, { variant: "outline", onClick: handleClose, borderColor: "border.default", bg: "bg.panel", _hover: { bg: 'bg.muted' }, children: labels?.cancel ??
+                                    translate(removeIndex(`${colLabel}.cancel`)) ??
+                                    'Cancel' }), jsx(Button$1, { colorPalette: "blue", onClick: handleSelect, disabled: !selectedFileId, children: labels?.select ??
+                                    translate(removeIndex(`${colLabel}.select`)) ??
+                                    'Select' })] }) })] }) }));
+}
 const FilePicker = ({ column, schema, prefix }) => {
     const { setValue, formState: { errors }, watch, } = useFormContext();
-    const { translate } = useSchemaContext();
-    const { required, gridColumn = 'span 12', gridRow = 'span 1', } = schema;
+    const { filePickerLabels } = useSchemaContext();
+    const formI18n = useFormI18n(column, prefix);
+    const { required, gridColumn = 'span 12', gridRow = 'span 1', filePicker, } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
-    const currentFiles = (watch(column) ?? []);
-    const colLabel = `${prefix}${column}`;
-    return (jsxs(Field, { label: `${translate.t(`${colLabel}.field_label`)}`, required: isRequired, gridColumn: gridColumn ?? 'span 4', gridRow: gridRow ?? 'span 1', display: 'grid', gridTemplateRows: 'auto 1fr auto', alignItems: 'stretch', errorText: errors[`${colLabel}`]
-            ? translate.t(removeIndex(`${colLabel}.field_required`))
-            : undefined, invalid: !!errors[colLabel], children: [jsx(FileDropzone, { onDrop: ({ files }) => {
-                    const newFiles = files.filter(({ name }) => !currentFiles.some((cur) => cur.name === name));
-                    setValue(colLabel, [...currentFiles, ...newFiles]);
-                }, placeholder: translate.t(removeIndex(`${colLabel}.fileDropzone`)) }), jsx(Flex, { flexFlow: 'column', gap: 1, children: currentFiles.map((file) => {
-                    return (jsx(Card.Root, { variant: 'subtle', children: jsxs(Card.Body, { gap: "2", cursor: 'pointer', onClick: () => {
-                                setValue(column, currentFiles.filter(({ name }) => {
-                                    return name !== file.name;
-                                }));
-                            }, display: 'flex', flexFlow: 'row', alignItems: 'center', padding: '2', children: [file.type.startsWith('image/') && (jsx(Image, { src: URL.createObjectURL(file), alt: file.name, boxSize: "50px", objectFit: "cover", borderRadius: "md", marginRight: "2" })), jsx(Box, { children: file.name }), jsx(TiDeleteOutline, {})] }) }, file.name));
+    const currentValue = watch(column) ?? [];
+    const currentFiles = Array.isArray(currentValue)
+        ? currentValue
+        : [];
+    const colLabel = formI18n.colLabel;
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [failedImageIds, setFailedImageIds] = useState(new Set());
+    const { onFetchFiles, enableMediaLibrary = false, filterImageOnly = false, } = filePicker || {};
+    const showMediaLibrary = enableMediaLibrary && !!onFetchFiles;
+    const handleImageError = (fileIdentifier) => {
+        setFailedImageIds((prev) => new Set(prev).add(fileIdentifier));
+    };
+    const handleMediaLibrarySelect = (fileId) => {
+        const newFiles = [...currentFiles, fileId];
+        setValue(colLabel, newFiles);
+    };
+    const handleRemove = (index) => {
+        const newFiles = currentFiles.filter((_, i) => i !== index);
+        setValue(colLabel, newFiles);
+    };
+    const isFileObject = (value) => {
+        return value instanceof File;
+    };
+    const getFileIdentifier = (file, index) => {
+        if (isFileObject(file)) {
+            return `${file.name}-${file.size}-${index}`;
+        }
+        return file;
+    };
+    const getFileName = (file) => {
+        if (isFileObject(file)) {
+            return file.name;
+        }
+        return typeof file === 'string' ? file : 'Unknown file';
+    };
+    const getFileSize = (file) => {
+        if (isFileObject(file)) {
+            return file.size;
+        }
+        return undefined;
+    };
+    const isImageFile = (file) => {
+        if (isFileObject(file)) {
+            return file.type.startsWith('image/');
+        }
+        if (typeof file === 'string') {
+            return /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i.test(file);
+        }
+        return false;
+    };
+    const getImageUrl = (file) => {
+        if (isFileObject(file)) {
+            return URL.createObjectURL(file);
+        }
+        return undefined;
+    };
+    return (jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
+        gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], children: [jsxs(VStack, { align: "stretch", gap: 2, children: [jsx(FileDropzone, { onDrop: ({ files }) => {
+                            const newFiles = files.filter(({ name }) => !currentFiles.some((cur) => {
+                                if (isFileObject(cur)) {
+                                    return cur.name === name;
+                                }
+                                return false;
+                            }));
+                            setValue(colLabel, [...currentFiles, ...newFiles]);
+                        }, placeholder: filePickerLabels?.fileDropzone ?? formI18n.t('fileDropzone') }), showMediaLibrary && (jsx(Button$1, { variant: "outline", onClick: () => setDialogOpen(true), borderColor: "border.default", bg: "bg.panel", _hover: { bg: 'bg.muted' }, children: filePickerLabels?.browseLibrary ??
+                            formI18n.t('browse_library') ??
+                            'Browse from Library' }))] }), showMediaLibrary && (jsx(FilePickerDialog, { open: dialogOpen, onClose: () => setDialogOpen(false), onSelect: handleMediaLibrarySelect, title: filePickerLabels?.dialogTitle ??
+                    formI18n.t('dialog_title') ??
+                    'Select File', filterImageOnly: filterImageOnly, onFetchFiles: onFetchFiles, labels: filePickerLabels, translate: formI18n.t, colLabel: colLabel })), jsx(Flex, { flexFlow: 'column', gap: 1, children: currentFiles.map((file, index) => {
+                    const fileIdentifier = getFileIdentifier(file, index);
+                    const fileName = getFileName(file);
+                    const fileSize = getFileSize(file);
+                    const isImage = isImageFile(file);
+                    const imageUrl = getImageUrl(file);
+                    const imageFailed = failedImageIds.has(fileIdentifier);
+                    return (jsx(Card.Root, { variant: 'subtle', colorPalette: "blue", children: jsxs(Card.Body, { gap: "2", cursor: 'pointer', onClick: () => handleRemove(index), display: 'flex', flexFlow: 'row', alignItems: 'center', padding: '2', border: "2px solid", borderColor: "border.default", borderRadius: "md", _hover: {
+                                borderColor: 'colorPalette.300',
+                                bg: 'bg.muted',
+                            }, transition: "all 0.2s", children: [jsx(Box, { width: "60px", height: "60px", display: "flex", alignItems: "center", justifyContent: "center", bg: "bg.muted", borderRadius: "md", flexShrink: 0, marginRight: "2", children: isImage && imageUrl && !imageFailed ? (jsx(Image, { src: imageUrl, alt: fileName, boxSize: "60px", objectFit: "cover", borderRadius: "md", onError: () => handleImageError(fileIdentifier) })) : isImage && (imageFailed || !imageUrl) ? (jsx(Icon, { as: LuImage, boxSize: 6, color: "fg.muted" })) : (jsx(Icon, { as: LuFile, boxSize: 6, color: "fg.muted" })) }), jsxs(VStack, { align: "start", flex: 1, gap: 1, children: [jsx(Text, { fontSize: "sm", fontWeight: "medium", color: "fg.default", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName }), fileSize !== undefined && (jsx(Text, { fontSize: "xs", color: "fg.muted", children: formatBytes(fileSize) }))] }), jsx(Icon, { as: TiDeleteOutline, boxSize: 5, color: "fg.muted" })] }) }, fileIdentifier));
                 }) })] }));
 };
@@ -5952,59 +6223,62 @@ const DateTimePicker = ({ column, schema, prefix, }) => {
 const SchemaRenderer = ({ schema, prefix, column, }) => {
     const colSchema = schema;
     const { type, variant, properties: innerProperties, foreign_key, format, items, } = schema;
-    if (variant === "custom-input") {
+    if (variant === 'custom-input') {
         return jsx(CustomInput, { schema: colSchema, prefix, column });
     }
-    if (type === "string") {
+    if (type === 'string') {
         if ((schema.enum ?? []).length > 0) {
             return jsx(EnumPicker, { schema: colSchema, prefix, column });
         }
-        if (variant === "id-picker") {
+        if (variant === 'id-picker') {
             idPickerSanityCheck(column, foreign_key);
             return jsx(IdPicker, { schema: colSchema, prefix, column });
         }
-        if (format === "date") {
+        if (format === 'date') {
             return jsx(DatePicker, { schema: colSchema, prefix, column });
         }
-        if (format === "time") {
+        if (format === 'time') {
             return jsx(TimePicker, { schema: colSchema, prefix, column });
         }
-        if (format === "date-time") {
+        if (format === 'date-time') {
             return jsx(DateTimePicker, { schema: colSchema, prefix, column });
         }
-        if (variant === "text-area") {
+        if (variant === 'text-area') {
             return jsx(TextAreaInput, { schema: colSchema, prefix, column });
         }
         return jsx(StringInputField, { schema: colSchema, prefix, column });
     }
-    if (type === "number" || type === "integer") {
+    if (type === 'number' || type === 'integer') {
         return jsx(NumberInputField, { schema: colSchema, prefix, column });
     }
-    if (type === "boolean") {
+    if (type === 'boolean') {
         return jsx(BooleanPicker, { schema: colSchema, prefix, column });
     }
-    if (type === "object") {
+    if (type === 'object') {
         if (innerProperties) {
             return jsx(ObjectInput, { schema: colSchema, prefix, column });
         }
         return jsx(RecordInput$1, { schema: colSchema, prefix, column });
     }
-    if (type === "array") {
-        if (variant === "id-picker") {
+    if (type === 'array') {
+        if (variant === 'id-picker') {
             idPickerSanityCheck(column, foreign_key);
             return (jsx(IdPicker, { schema: colSchema, prefix, column, isMultiple: true }));
         }
-        if (variant === "tag-picker") {
+        if (variant === 'tag-picker') {
             return jsx(TagPicker, { schema: colSchema, prefix, column });
         }
-        if (variant === "file-picker") {
+        if (variant === 'file-picker') {
             return jsx(FilePicker, { schema: colSchema, prefix, column });
         }
-        if (variant === "enum-picker") {
+        if (variant === 'date-range') {
+            return jsx(DateRangePicker, { schema: colSchema, prefix, column });
+        }
+        if (variant === 'enum-picker') {
             const { items } = colSchema;
             const { enum: enumItems } = items;
             const enumSchema = {
-                type: "string",
+                type: 'string',
                 enum: enumItems,
             };
             return (jsx(EnumPicker, { isMultiple: true, schema: enumSchema, prefix, column }));
@@ -6014,7 +6288,7 @@ const SchemaRenderer = ({ schema, prefix, column, }) => {
         }
         return jsx(Text, { children: `array ${column}` });
     }
-    if (type === "null") {
+    if (type === 'null') {
         return jsx(Text, { children: `null ${column}` });
     }
     return jsx(Text, { children: "missing type" });

package/dist/types/components/Form/SchemaFormContext.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import { JSONSchema7 } from 'json-schema';
 import { Dispatch, ReactNode, SetStateAction } from 'react';
 import { FieldValues, Resolver } from 'react-hook-form';
 import { UseTranslationResponse } from 'react-i18next';
-import { DateTimePickerLabels, IdPickerLabels, EnumPickerLabels } from './components/types/CustomJSONSchema7';
+import { DateTimePickerLabels, IdPickerLabels, EnumPickerLabels, FilePickerLabels } from './components/types/CustomJSONSchema7';
 export interface SchemaFormContext<TData extends FieldValues> {
     schema: JSONSchema7;
     serverUrl: string;
@@ -43,6 +43,7 @@ export interface SchemaFormContext<TData extends FieldValues> {
     dateTimePickerLabels?: DateTimePickerLabels;
     idPickerLabels?: IdPickerLabels;
     enumPickerLabels?: EnumPickerLabels;
+    filePickerLabels?: FilePickerLabels;
     ajvResolver: Resolver<FieldValues>;
 }
 export declare const SchemaFormContext: import("react").Context<SchemaFormContext<unknown>>;

package/dist/types/components/Form/components/FileDropzone.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-import { GridProps } from "@chakra-ui/react";
-import { ReactNode } from "react";
+import { GridProps } from '@chakra-ui/react';
+import { ReactNode } from 'react';
 export interface FileDropzoneProps {
     children?: ReactNode;
     onDrop?: ({ files, text }: {

package/dist/types/components/Form/components/core/FormRoot.d.ts CHANGED Viewed

@@ -4,7 +4,7 @@ import { JSONSchema7 } from 'json-schema';
 import { Dispatch, ReactNode, SetStateAction } from 'react';
 import { FieldValues, SubmitHandler, UseFormReturn } from 'react-hook-form';
 import { UseTranslationResponse } from 'react-i18next';
-import { CustomJSONSchema7, DateTimePickerLabels, IdPickerLabels, EnumPickerLabels } from '../types/CustomJSONSchema7';
+import { CustomJSONSchema7, DateTimePickerLabels, IdPickerLabels, EnumPickerLabels, FilePickerLabels } from '../types/CustomJSONSchema7';
 export interface FormRootProps<TData extends FieldValues> {
     schema: CustomJSONSchema7;
     serverUrl: string;
@@ -32,6 +32,7 @@ export interface FormRootProps<TData extends FieldValues> {
     dateTimePickerLabels?: DateTimePickerLabels;
     idPickerLabels?: IdPickerLabels;
     enumPickerLabels?: EnumPickerLabels;
+    filePickerLabels?: FilePickerLabels;
 }
 export interface CustomJSONSchema7Definition extends JSONSchema7 {
     variant: string;
@@ -48,4 +49,4 @@ export declare const idPickerSanityCheck: (column: string, foreign_key?: {
     column?: string | undefined;
     display_column?: string | undefined;
 } | undefined) => void;
-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, }: FormRootProps<TData>) => import("react/jsx-runtime").JSX.Element;
+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;

package/dist/types/components/Form/components/fields/DateRangePicker.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { InputDefaultProps } from './types';
2	+ export declare const DateRangePicker: ({ column, schema, prefix, }: InputDefaultProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Form/components/fields/SchemaRenderer.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { CustomJSONSchema7 } from "../types/CustomJSONSchema7";
+import { CustomJSONSchema7 } from '../types/CustomJSONSchema7';
 export interface SchemaRendererProps {
     column: string;
     schema: CustomJSONSchema7;

package/dist/types/components/Form/components/types/CustomJSONSchema7.d.ts CHANGED Viewed

@@ -29,6 +29,17 @@ export interface EnumPickerLabels {
     emptySearchResult?: string;
     initialResults?: string;
 }
+export interface FilePickerLabels {
+    fileDropzone?: string;
+    browseLibrary?: string;
+    dialogTitle?: string;
+    searchPlaceholder?: string;
+    loading?: string;
+    loadingFailed?: string;
+    noFilesFound?: string;
+    cancel?: string;
+    select?: string;
+}
 export interface CustomJSONSchema7 extends JSONSchema7 {
     gridColumn?: string;
     gridRow?: string;
@@ -55,9 +66,23 @@ export interface CustomJSONSchema7 extends JSONSchema7 {
     formatOptions?: Intl.NumberFormatOptions;
     numberStorageType?: 'string' | 'number';
     errorMessages?: Partial<Record<ValidationErrorType | string, string>>;
+    filePicker?: FilePickerProps;
 }
 export interface TagPickerProps {
     column: string;
     schema: CustomJSONSchema7;
     prefix: string;
 }
+export interface FilePickerMediaFile {
+    id: string;
+    name: string;
+    url?: string;
+    size?: string | number;
+    comment?: string;
+    type?: string;
+}
+export interface FilePickerProps {
+    onFetchFiles?: (search: string) => Promise<FilePickerMediaFile[]>;
+    enableMediaLibrary?: boolean;
+    filterImageOnly?: boolean;
+}

package/dist/types/components/Form/utils/formatBytes.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+/**
+ * Format bytes to human-readable string
+ * @param bytes - The number of bytes to format
+ * @returns Formatted string (e.g., "1.5 KB", "2.3 MB")
+ */
+export declare function formatBytes(bytes: number): string;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@bsol-oss/react-datatable5",
-  "version": "12.0.0-beta.75",
+  "version": "12.0.0-beta.77",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.mjs",