fastapi-rtk 0.2.36 → 0.2.37

package/dist/core/esm/Tables/NextGenDataGrid/NextGenDataGrid.mjs

@@ -5,9 +5,10 @@ import { deepMerge, mergeProps, getItemId } from "fastapi-rtk/utils";
 import { useProps, Box } from "@mantine/core";
 import { useMantineReactTable, MantineReactTable } from "../../../../.external/esm/mantine-react-table@2.0.0-beta.9_@mantine_core@7.17.8_@mantine_dates@7.17.8_@mantine_hooks@7._v6brefjjgmgbqbolvm3v6bkbsa/mantine-react-table/dist/index.esm.mjs";
 import { forwardRef, useMemo, useEffect } from "react";
-import { AddDialog } from "../../ActionIcons/Add/AddDialog.mjs";
-import { DeleteDialog } from "../../ActionIcons/Delete/DeleteDialog.mjs";
-import { EditDialog } from "../../ActionIcons/Edit/EditDialog.mjs";
+import { AddDialog } from "../../Dialogs/AddDialog.mjs";
+import { DeleteDialog } from "../../Dialogs/DeleteDialog.mjs";
+import { EditDialog } from "../../Dialogs/EditDialog.mjs";
+import { ViewDialog } from "../../Dialogs/ViewDialog.mjs";
 import { LazyLoadWrapper } from "../../Wrappers/LazyLoadWrapper/LazyLoadWrapper.mjs";
 import { useApi } from "../../hooks/api/useApi.mjs";
 import { useForms } from "../../hooks/api/useForms.mjs";
@@ -27,7 +28,7 @@ import { useToolbar } from "./hooks/useToolbar/useToolbar.mjs";
 import { useToolbarAlertBanner } from "./hooks/useToolbarAlertBanner/useToolbarAlertBanner.mjs";
 const baseProps = { enableStickyHeader: true, enableColumnPinning: true };
 const NextGenDataGrid = forwardRef((props, ref) => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e;
   const { info, data, queryParams, setQueryParams, refetch, specialKey } = useApi();
   const propsFromMantineTheme = useProps("NextGenDataGrid", {}, {});
   const {
@@ -221,9 +222,10 @@ const NextGenDataGrid = forwardRef((props, ref) => {
   }, []);
   return /* @__PURE__ */ jsxs(Box, { pos: "relative", h: "100%", w: "100%", mih: 0, flex: 1, ...wrapperProps, children: [
     /* @__PURE__ */ jsxs(LazyLoadWrapper, { cond: !!info, children: [
-      /* @__PURE__ */ jsx(AddDialog, { jsonForms: form == null ? void 0 : form.add, ...(_b = form == null ? void 0 : form.add) == null ? void 0 : _b.dialogProps }),
-      /* @__PURE__ */ jsx(EditDialog, { jsonForms: form == null ? void 0 : form.edit, ...(_c = form == null ? void 0 : form.edit) == null ? void 0 : _c.dialogProps }),
-      /* @__PURE__ */ jsx(DeleteDialog, { ...(_d = form == null ? void 0 : form.delete) == null ? void 0 : _d.dialogProps })
+      /* @__PURE__ */ jsx(ViewDialog, { ...(_b = form == null ? void 0 : form.view) == null ? void 0 : _b.dialogProps }),
+      /* @__PURE__ */ jsx(AddDialog, { jsonForms: form == null ? void 0 : form.add, ...(_c = form == null ? void 0 : form.add) == null ? void 0 : _c.dialogProps }),
+      /* @__PURE__ */ jsx(EditDialog, { jsonForms: form == null ? void 0 : form.edit, ...(_d = form == null ? void 0 : form.edit) == null ? void 0 : _d.dialogProps }),
+      /* @__PURE__ */ jsx(DeleteDialog, { ...(_e = form == null ? void 0 : form.delete) == null ? void 0 : _e.dialogProps })
     ] }),
     /* @__PURE__ */ jsx(MantineReactTable, { table: mrtTable, ...rest }),
     children == null ? void 0 : children({ table: mrtTable }),

package/dist/core/esm/Wrappers/ApiProvider/ApiProvider.mjs

@@ -7,7 +7,7 @@ import { defaultBulk } from "../../fab-react-toolkit-patch/api/hooks/useProvideB
 import { useInfo } from "../../hooks/auth/useInfo.mjs";
 import { ApiContextProvider } from "./Contexts/ApiContext.mjs";
 import { BulkActionsContextProvider } from "./Contexts/BulkActionsContext.mjs";
-import { FormContextAddProvider, FormContextEditProvider, FormContextDeleteProvider } from "./Contexts/FormContext.mjs";
+import { FormContextViewProvider, FormContextAddProvider, FormContextEditProvider, FormContextDeleteProvider } from "./Contexts/FormContext.mjs";
 import { useProvideApi } from "./hooks/useProvideApi.mjs";
 import { useProvideBulk } from "./hooks/useProvideBulk.mjs";
 import { useProvideForm } from "./hooks/useProvideForm.mjs";
@@ -46,13 +46,15 @@ function ApiProvider({
   const apiProxy = useProxy(api);
   const bulkActions = useProvideBulk(apiProxy, bulkParams);
   const bulkActionsProxy = useProxy(bulkActions);
+  const formView = useProvideForm();
+  const [formViewProxy] = useState(() => createProxy(formView));
   const formAdd = useProvideForm();
   const [formAddProxy] = useState(() => createProxy(formAdd));
   const formEdit = useProvideForm();
   const [formEditProxy] = useState(() => createProxy(formEdit));
   const formDelete = useProvideForm();
   const [formDeleteProxy] = useState(() => createProxy(formDelete));
-  return /* @__PURE__ */ jsx(ApiContextProvider, { value: apiProxy, children: /* @__PURE__ */ jsx(BulkActionsContextProvider, { value: bulkActionsProxy, children: /* @__PURE__ */ jsx(FormContextAddProvider, { value: formAddProxy, children: /* @__PURE__ */ jsx(FormContextEditProvider, { value: formEditProxy, children: /* @__PURE__ */ jsx(FormContextDeleteProvider, { value: formDeleteProxy, children }) }) }) }) });
+  return /* @__PURE__ */ jsx(ApiContextProvider, { value: apiProxy, children: /* @__PURE__ */ jsx(BulkActionsContextProvider, { value: bulkActionsProxy, children: /* @__PURE__ */ jsx(FormContextViewProvider, { value: formViewProxy, children: /* @__PURE__ */ jsx(FormContextAddProvider, { value: formAddProxy, children: /* @__PURE__ */ jsx(FormContextEditProvider, { value: formEditProxy, children: /* @__PURE__ */ jsx(FormContextDeleteProvider, { value: formDeleteProxy, children }) }) }) }) }) });
 }
 export {
   ApiProvider

package/dist/core/esm/Wrappers/ApiProvider/Contexts/FormContext.mjs

@@ -1,4 +1,7 @@
 import { createSafeContext } from "fastapi-rtk/utils";
+const [FormContextViewProvider, useFormViewProvider] = createSafeContext(
+  "useForms('view') must be used within an ApiProvider"
+);
 const [FormContextAddProvider, useFormAddProvider] = createSafeContext(
   "useForms('add') must be used within an ApiProvider"
 );
@@ -12,7 +15,9 @@ export {
   FormContextAddProvider,
   FormContextDeleteProvider,
   FormContextEditProvider,
+  FormContextViewProvider,
   useFormAddProvider,
   useFormDeleteProvider,
-  useFormEditProvider
+  useFormEditProvider,
+  useFormViewProvider
 };

package/dist/core/esm/hooks/api/useForms.mjs

@@ -1,6 +1,8 @@
-import { useFormDeleteProvider, useFormEditProvider, useFormAddProvider } from "../../Wrappers/ApiProvider/Contexts/FormContext.mjs";
+import { useFormDeleteProvider, useFormEditProvider, useFormAddProvider, useFormViewProvider } from "../../Wrappers/ApiProvider/Contexts/FormContext.mjs";
 const useForms = (type, options) => {
   switch (type) {
+    case "view":
+      return useFormViewProvider(options);
     case "add":
       return useFormAddProvider(options);
     case "edit":
@@ -8,7 +10,7 @@ const useForms = (type, options) => {
     case "delete":
       return useFormDeleteProvider(options);
     default:
-      throw new Error(`useForms: Unknown form type '${type}'. Expected 'add', 'edit', or 'delete'.`);
+      throw new Error(`useForms: Unknown form type '${type}'. Expected 'view', 'add', 'edit', or 'delete'.`);
   }
 };
 export {

package/dist/core/esm/index.mjs

@@ -6,17 +6,21 @@ import { Edit } from "./ActionIcons/Edit/Edit.mjs";
 import { Refresh } from "./ActionIcons/Refresh/Refresh.mjs";
 import { Upload } from "./ActionIcons/Upload/Upload.mjs";
 import { View } from "./ActionIcons/View/View.mjs";
+import { AddDialog } from "./Dialogs/AddDialog.mjs";
+import { DeleteDialog } from "./Dialogs/DeleteDialog.mjs";
+import { EditDialog } from "./Dialogs/EditDialog.mjs";
+import { TabsDisplay, ViewDialog } from "./Dialogs/ViewDialog.mjs";
 import { useApi } from "./hooks/api/useApi.mjs";
 import { useBulkActions } from "./hooks/api/useBulkActions.mjs";
 import { useForms } from "./hooks/api/useForms.mjs";
 import { useAuth } from "./hooks/auth/useAuth.mjs";
 import { useInfo } from "./hooks/auth/useInfo.mjs";
+import { useLang } from "./hooks/lang/useLang.mjs";
 import { UserMenu } from "./Menu/UserMenu/UserMenu.mjs";
 import { LanguageSelector } from "./Selectors/LanguageSelector.mjs";
-import { AddDialog } from "./ActionIcons/Add/AddDialog.mjs";
-import { EditDialog } from "./ActionIcons/Edit/EditDialog.mjs";
-import { CommonModal } from "./ActionIcons/Modals/CommonModal.mjs";
-import { ViewDialog } from "./ActionIcons/View/ViewDialog.mjs";
+import { CommonModal } from "./Modals/CommonModal.mjs";
+import { normalProps } from "./Modals/normalProps.mjs";
+import { overlayProps } from "./Modals/overlayProps.mjs";
 import { DataGrid, DataGrid as DataGrid2 } from "./Tables/DataGrid/DataGrid.mjs";
 import { NextGenDataGrid, NextGenDataGrid as NextGenDataGrid2, NextGenDataGrid as NextGenDataGrid3, NextGenDataGrid as NextGenDataGrid4 } from "./Tables/NextGenDataGrid/NextGenDataGrid.mjs";
 import { ApiProvider } from "./Wrappers/ApiProvider/ApiProvider.mjs";
@@ -28,7 +32,6 @@ export * from "fastapi-rtk/constants";
 export * from "fastapi-rtk/hooks";
 export * from "fastapi-rtk/utils";
 export * from "fastapi-rtk/zustand";
-import "./Wrappers/Provider/Contexts/LangContext.mjs";
 import { Filter } from "./Tables/DataGrid/Toolbar/Filter/Filter.mjs";
 import { useTranslation } from "../../.external/esm/react-i18next@15.7.3_i18next@25.5.2_react-dom@18.3.1_react@18.3.1_typescript@5.9.2/react-i18next/dist/es/useTranslation.mjs";
 export {
@@ -40,6 +43,7 @@ export {
   DataGrid,
   DataGrid2 as Datagrid,
   Delete,
+  DeleteDialog,
   Download,
   Edit,
   EditDialog,
@@ -53,14 +57,18 @@ export {
   NextGenDataGrid4 as Nextgendatagrid,
   Provider,
   Refresh,
+  TabsDisplay,
   Upload,
   UserMenu,
   View,
   ViewDialog,
+  normalProps,
+  overlayProps,
   useApi,
   useAuth,
   useBulkActions,
   useForms,
   useInfo,
+  useLang,
   useTranslation
 };

package/dist/core/lib/ActionIcons/View/{ViewDialog.d.ts → Unused.d.ts}

@@ -1,4 +1,4 @@
-export function ViewDialog({ item, info, opened, onClose, ...props }: {
+export function Unused({ item, info, opened, onClose, ...props }: {
     [x: string]: any;
     item: any;
     info: any;

package/dist/core/lib/{ActionIcons/Add → Dialogs}/AddDialog.d.ts

@@ -31,6 +31,10 @@
  * @property {CommonModalTitleOptionsProps} [titleOptions] - Options for customizing the title area, such as toggles for full screen and overlay modes.
  * @property {CommonModalActionButtonsProps} [actionButtons] - Options for customizing the action buttons area.
  * @property {Record<string, any>} rest - Additional props to be passed to the Modal component.
+ */
+/**
+ * @typedef {Object} AddDialogProps
+ * @property {Record<string, any>} [jsonForms] - Additional JSON Forms customization options.
  * @property {(result: Record<string, any> | null) => void} [onSuccess] - Callback function triggered on successful form submission.
  * @property {(error: any) => void} [onError] - Callback function triggered on form submission error.
  */
@@ -41,10 +45,10 @@
  * view modes, and loading state via custom hooks. The component also manages the merge
  * of default JSON Forms settings with any additional props provided.
  *
- * @param {CommonModalProps} props - The properties passed to the AddDialog component.
+ * @param {AddDialogProps & CommonModalProps} props - The properties for the AddDialog component.
  * @returns {JSX.Element} The rendered modal dialog component for adding an entry.
  */
-export function AddDialog({ jsonForms: __jsonForms, onSuccess, onError, ...props }: CommonModalProps): JSX.Element;
+export function AddDialog({ jsonForms: __jsonForms, onSuccess, onError, ...props }: AddDialogProps & CommonModalProps): JSX.Element;
 export type CommonModalTitleOptionsProps = {
     /**
      * - Content or function to render on the left side of the title.
@@ -162,6 +166,12 @@ export type CommonModalProps = {
      * - Additional props to be passed to the Modal component.
      */
     rest: Record<string, any>;
+};
+export type AddDialogProps = {
+    /**
+     * - Additional JSON Forms customization options.
+     */
+    jsonForms?: Record<string, any>;
     /**
      * - Callback function triggered on successful form submission.
      */

package/dist/core/lib/{ActionIcons/Delete → Dialogs}/DeleteDialog.d.ts

@@ -1,4 +1,4 @@
-export function DeleteDialog({ onSuccess, onError, ...props }: CommonModalProps): JSX.Element;
+export function DeleteDialog({ onSuccess, onError, ...props }: DeleteDialogProps & CommonModalProps): JSX.Element;
 export type CommonModalTitleOptionsProps = {
     /**
      * - Content or function to render on the left side of the title.
@@ -116,6 +116,8 @@ export type CommonModalProps = {
      * - Additional props to be passed to the Modal component.
      */
     rest: Record<string, any>;
+};
+export type DeleteDialogProps = {
     /**
      * - Callback function triggered on successful form submission.
      */

package/dist/core/lib/{ActionIcons/Edit → Dialogs}/EditDialog.d.ts

@@ -31,22 +31,24 @@
  * @property {CommonModalTitleOptionsProps} [titleOptions] - Options for customizing the title area, such as toggles for full screen and overlay modes.
  * @property {CommonModalActionButtonsProps} [actionButtons] - Options for customizing the action buttons area.
  * @property {Record<string, any>} rest - Additional props to be passed to the Modal component.
+ */
+/**
+ * @typedef {Object} EditDialogProps
+ * @property {Record<string, any>} [jsonForms] - Additional JSON Forms customization options.
  * @property {(result: Record<string, any> | null) => void} [onSuccess] - Callback function triggered on successful form submission.
  * @property {(error: any) => void} [onError] - Callback function triggered on form submission error.
  */
 /**
- * EditDialog component renders a modal dialog for editing an entry.
+ * EditDialog is a component that renders a modal dialog for editing an existing entry.
  *
- * This component leverages various hooks to manage form state, API interactions, and UI transitions.
- * It initializes the form state based on the provided item's result and handles form submission by
- * sending only changed data to update the corresponding entry. Upon a successful update, it triggers
- * a refetch of data and related information.
+ * It integrates with the application's API to edit entries and manages form state,
+ * view modes, and loading state via custom hooks. The component also manages the merge
+ * of default JSON Forms settings with any additional props provided.
  *
- * @component
- * @param {CommonModalProps} props - The component props.
- * @returns {JSX.Element} The rendered EditDialog component.
+ * @param {EditDialogProps & CommonModalProps} props - The properties for the EditDialog component.
+ * @returns {JSX.Element} The rendered modal dialog component for editing an entry.
  */
-export function EditDialog({ jsonForms: __jsonForms, onSuccess, onError, ...props }: CommonModalProps): JSX.Element;
+export function EditDialog({ jsonForms: __jsonForms, onSuccess, onError, ...props }: EditDialogProps & CommonModalProps): JSX.Element;
 export type CommonModalTitleOptionsProps = {
     /**
      * - Content or function to render on the left side of the title.
@@ -164,6 +166,12 @@ export type CommonModalProps = {
      * - Additional props to be passed to the Modal component.
      */
     rest: Record<string, any>;
+};
+export type EditDialogProps = {
+    /**
+     * - Additional JSON Forms customization options.
+     */
+    jsonForms?: Record<string, any>;
     /**
      * - Callback function triggered on successful form submission.
      */

package/dist/core/lib/Dialogs/ViewDialog.d.ts

@@ -0,0 +1,169 @@
+/**
+ * @typedef {Object} CommonModalTitleOptionsProps
+ * @property {React.ReactNode | ((props: { view: string; setView: (view: string) => void }) => React.ReactNode)} left - Content or function to render on the left side of the title.
+ * @property {React.ReactNode | ((props: { view: string; setView: (view: string) => void }) => React.ReactNode)} right - Content or function to render on the right side of the title.
+ * @property {boolean} [hideOverlay=false] - If true, hides the overlay toggle button.
+ * @property {boolean} [hideFullScreen=false] - If true, hides the full screen toggle button.
+ * @property {Record<string, any> | ((props: { view: string; setView: (view: string) => void }) => Record<string, any>)} [overlayButtonProps] - Additional props to be passed to the overlay toggle button.
+ * @property {Record<string, any> | ((props: { view: string; setView: (view: string) => void }) => Record<string, any>)} [fullScreenButtonProps] - Additional props to be passed to the full screen toggle button.
+ */
+/**
+ * @typedef {Object} CommonModalActionButtonsProps
+ * @property {Record<string, any>} [groupProps] - Additional properties to be passed to the Group component wrapping the buttons.
+ * @property {boolean} [withResetButton=true] - Flag to determine if the reset button should be displayed.
+ * @property {boolean} [withSubmitButton=true] - Flag to determine if the submit button should be displayed.
+ * @property {Record<string, any>} [resetButtonProps] - Additional properties to be passed to the reset Button component.
+ * @property {Record<string, any>} [submitButtonProps] - Additional properties to be passed to the submit Button component.
+ */
+/**
+ * @typedef {Object} CommonModalProps
+ * @property {React.ReactNode} children - The content to be rendered inside the modal.
+ * @property {string} view - Current view mode (e.g., VIEW_MODE.NORMAL, VIEW_MODE.FULL_SCREEN, VIEW_MODE.OVERLAY).
+ * @property {Function} setView - Function to update the view mode.
+ * @property {Function} onReset - Callback function triggered on form reset.
+ * @property {Function} onSubmit - Callback function triggered on form submission.
+ * @property {Record<string, any>} boxProps - Additional properties to be passed to the Box component wrapping the form.
+ * @property {string} resetButtonText - Text displayed on the reset button.
+ * @property {string} buttonText - Text displayed on the submit button.
+ * @property {boolean} buttonLoading - Indicates whether the submit button should display a loading state.
+ * @property {boolean} [withTitleOptions=true] - Flag to determine if title options (e.g., full screen, overlay toggles) should be displayed.
+ * @property {boolean} [withButtons=true] - Flag to determine if action buttons (e.g., submit button) should be displayed.
+ * @property {CommonModalTitleOptionsProps} [titleOptions] - Options for customizing the title area, such as toggles for full screen and overlay modes.
+ * @property {CommonModalActionButtonsProps} [actionButtons] - Options for customizing the action buttons area.
+ * @property {Record<string, any>} rest - Additional props to be passed to the Modal component.
+ */
+/**
+ * ViewDialog is a component that renders a modal dialog for viewing an existing entry.
+ *
+ * It integrates with the application's API to fetch entry details and manages form state,
+ * view modes, and loading state via custom hooks. The component also manages the merge
+ * of default JSON Forms settings with any additional props provided.
+ *
+ * @param {CommonModalProps} props - The properties for the ViewDialog component.
+ * @returns {JSX.Element} The rendered modal dialog component for viewing an entry.
+ */
+export function ViewDialog({ ...props }: CommonModalProps): JSX.Element;
+export function TabsDisplay({ columns, data, label_columns, gridProps }: {
+    columns: any;
+    data: any;
+    label_columns: any;
+    gridProps: any;
+}): import("react").JSX.Element;
+export type CommonModalTitleOptionsProps = {
+    /**
+     * - Content or function to render on the left side of the title.
+     */
+    left: React.ReactNode | ((props: {
+        view: string;
+        setView: (view: string) => void;
+    }) => React.ReactNode);
+    /**
+     * - Content or function to render on the right side of the title.
+     */
+    right: React.ReactNode | ((props: {
+        view: string;
+        setView: (view: string) => void;
+    }) => React.ReactNode);
+    /**
+     * - If true, hides the overlay toggle button.
+     */
+    hideOverlay?: boolean;
+    /**
+     * - If true, hides the full screen toggle button.
+     */
+    hideFullScreen?: boolean;
+    /**
+     * - Additional props to be passed to the overlay toggle button.
+     */
+    overlayButtonProps?: Record<string, any> | ((props: {
+        view: string;
+        setView: (view: string) => void;
+    }) => Record<string, any>);
+    /**
+     * - Additional props to be passed to the full screen toggle button.
+     */
+    fullScreenButtonProps?: Record<string, any> | ((props: {
+        view: string;
+        setView: (view: string) => void;
+    }) => Record<string, any>);
+};
+export type CommonModalActionButtonsProps = {
+    /**
+     * - Additional properties to be passed to the Group component wrapping the buttons.
+     */
+    groupProps?: Record<string, any>;
+    /**
+     * - Flag to determine if the reset button should be displayed.
+     */
+    withResetButton?: boolean;
+    /**
+     * - Flag to determine if the submit button should be displayed.
+     */
+    withSubmitButton?: boolean;
+    /**
+     * - Additional properties to be passed to the reset Button component.
+     */
+    resetButtonProps?: Record<string, any>;
+    /**
+     * - Additional properties to be passed to the submit Button component.
+     */
+    submitButtonProps?: Record<string, any>;
+};
+export type CommonModalProps = {
+    /**
+     * - The content to be rendered inside the modal.
+     */
+    children: React.ReactNode;
+    /**
+     * - Current view mode (e.g., VIEW_MODE.NORMAL, VIEW_MODE.FULL_SCREEN, VIEW_MODE.OVERLAY).
+     */
+    view: string;
+    /**
+     * - Function to update the view mode.
+     */
+    setView: Function;
+    /**
+     * - Callback function triggered on form reset.
+     */
+    onReset: Function;
+    /**
+     * - Callback function triggered on form submission.
+     */
+    onSubmit: Function;
+    /**
+     * - Additional properties to be passed to the Box component wrapping the form.
+     */
+    boxProps: Record<string, any>;
+    /**
+     * - Text displayed on the reset button.
+     */
+    resetButtonText: string;
+    /**
+     * - Text displayed on the submit button.
+     */
+    buttonText: string;
+    /**
+     * - Indicates whether the submit button should display a loading state.
+     */
+    buttonLoading: boolean;
+    /**
+     * - Flag to determine if title options (e.g., full screen, overlay toggles) should be displayed.
+     */
+    withTitleOptions?: boolean;
+    /**
+     * - Flag to determine if action buttons (e.g., submit button) should be displayed.
+     */
+    withButtons?: boolean;
+    /**
+     * - Options for customizing the title area, such as toggles for full screen and overlay modes.
+     */
+    titleOptions?: CommonModalTitleOptionsProps;
+    /**
+     * - Options for customizing the action buttons area.
+     */
+    actionButtons?: CommonModalActionButtonsProps;
+    /**
+     * - Additional props to be passed to the Modal component.
+     */
+    rest: Record<string, any>;
+};

package/dist/core/lib/Dialogs/index.d.ts

@@ -0,0 +1,4 @@
+export * from './AddDialog';
+export * from './DeleteDialog';
+export * from './EditDialog';
+export * from './ViewDialog';

package/dist/core/lib/{ActionIcons/Modals → Modals}/CommonModal.d.ts

@@ -35,13 +35,13 @@ import { Modal } from '@mantine/core';
  * @typedef {CommonModalProps & React.ComponentProps<typeof Modal>} CommonModalComponentProps
  */
 /**
- * CommonModal component renders a modal with a form.
+ * CommonModal is a reusable modal component that provides flexible configuration for displaying forms and actions.
  *
- * @component
+ * @param {Object} props - Component props.
  * @param {CommonModalComponentProps} props - The properties for the CommonModal component.
- * @returns - A rendered Modal component with an embedded form and optional title controls.
+ * @returns {JSX.Element} The rendered modal component.
  */
-export function CommonModal({ children, view, setView, onReset, onSubmit, boxProps, resetButtonText, buttonText, buttonLoading, withTitleOptions, withButtons, titleOptions, actionButtons, ...props }: CommonModalComponentProps): import("react").JSX.Element;
+export function CommonModal({ children, view, setView, onReset, onSubmit, boxProps, resetButtonText, buttonText, buttonLoading, withTitleOptions, withButtons, titleOptions, actionButtons, ...props }: any): JSX.Element;
 export type CommonModalTitleOptionsProps = {
     /**
      * - Content or function to render on the left side of the title.

package/dist/core/lib/Modals/index.d.ts

@@ -0,0 +1,3 @@
+export * from './CommonModal';
+export * from './normalProps';
+export * from './overlayProps';

package/dist/core/lib/Wrappers/ApiProvider/Contexts/FormContext.d.ts

@@ -1,3 +1,8 @@
+export const FormContextViewProvider: import('react').ComponentType<{
+    value: any;
+    children: any;
+}>;
+export const useFormViewProvider: (options?: SafeContextOptions) => any;
 export const FormContextAddProvider: import('react').ComponentType<{
     value: any;
     children: any;

package/dist/core/lib/hooks/api/useForms.d.ts

@@ -1,4 +1,4 @@
-export function useForms(type: "add" | "edit" | "delete", options: SafeContextOptions): FormsContext;
+export function useForms(type: "view" | "add" | "edit" | "delete", options: SafeContextOptions): FormsContext;
 export type SafeContextOptions = {
     /**
      * - Whether to throw an error if the context is not provided.

package/dist/core/lib/index.d.ts

@@ -6,6 +6,9 @@ export { Edit } from './ActionIcons/Edit/Edit';
 export { Refresh } from './ActionIcons/Refresh/Refresh';
 export { Upload } from './ActionIcons/Upload/Upload';
 export { View } from './ActionIcons/View/View';
+export * from './Dialogs';
+export * from './Modals';
+export * from './sub-packages-exporter';
 export { useApi } from './hooks/api/useApi';
 export { useBulkActions } from './hooks/api/useBulkActions';
 export { useForms } from './hooks/api/useForms';
@@ -13,16 +16,11 @@ export { useAuth } from './hooks/auth/useAuth';
 export { useInfo } from './hooks/auth/useInfo';
 export { UserMenu } from './Menu/UserMenu/UserMenu';
 export { LanguageSelector } from './Selectors/LanguageSelector';
-export { AddDialog } from './ActionIcons/Add/AddDialog';
-export { EditDialog } from './ActionIcons/Edit/EditDialog';
-export { CommonModal } from './ActionIcons/Modals/CommonModal';
-export { ViewDialog } from './ActionIcons/View/ViewDialog';
 export { ApiProvider } from './Wrappers/ApiProvider/ApiProvider';
 export { InfiniteScroll } from './Wrappers/InfiniteScroll/InfiniteScroll';
 export { LazyLoadWrapper } from './Wrappers/LazyLoadWrapper/LazyLoadWrapper';
 export { Provider } from './Wrappers/Provider/Provider';
-export * from './sub-packages-exporter';
-export { useTranslation } from './hooks/lang/useLang';
 export { Filter } from './Tables/DataGrid/Toolbar/Filter/Filter';
+export { useLang, useTranslation } from './hooks/lang/useLang';
 export { DataGrid, DataGrid as Datagrid } from './Tables/DataGrid/DataGrid';
 export { NextGenDataGrid, NextGenDataGrid as NextGenDatagrid, NextGenDataGrid as NextGendatagrid, NextGenDataGrid as Nextgendatagrid } from './Tables/NextGenDataGrid/NextGenDataGrid';

package/dist/core/styles.css

@@ -1,4 +1,22 @@
-._field_zdaf7_1 {
+._iconSmall_sxv3z_1 {
+    width: 14px;
+    height: 14px;
+}
+
+._iconLarge_sxv3z_6 {
+    width: 34px;
+    height: 34px;
+    margin-top: 10px;
+    margin-left: 10px;
+}
+
+._iconLarge_sxv3z_6:hover {
+    cursor: pointer;
+}
+
+._btn_sxv3z_17:hover {
+    /* background-color: var(--mantine-color-gray-1);; */
+}._field_zdaf7_1 {
   /* Include font styles from theme.fn.fontStyles() if needed */
   font-size: var(--mantine-font-size-md);
   vertical-align: top;
@@ -49,24 +67,6 @@
 }
 ._scrollbar_isyo2_1 {
     z-index: 1;
-}._iconSmall_sxv3z_1 {
-    width: 14px;
-    height: 14px;
-}
-
-._iconLarge_sxv3z_6 {
-    width: 34px;
-    height: 34px;
-    margin-top: 10px;
-    margin-left: 10px;
-}
-
-._iconLarge_sxv3z_6:hover {
-    cursor: pointer;
-}
-
-._btn_sxv3z_17:hover {
-    /* background-color: var(--mantine-color-gray-1);; */
 }.MRT_TableBody-module_root__kGhRy {
   background-color: var(--mrt-base-background-color);
   position: relative;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fastapi-rtk",
-  "version": "0.2.36",
+  "version": "0.2.37",
   "private": false,
   "description": "A React component library for FastAPI in combination with FastAPI React Toolkit backend, built with Mantine, JsonForms, and Zustand.",
   "license": "MIT",

package/dist/core/cjs/ActionIcons/View/RelationPanel.cjs

@@ -1,17 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const utils = require("fastapi-rtk/utils");
-const React = require("react");
-const DataGrid = require("../../Tables/DataGrid/DataGrid.cjs");
-const ApiProvider = require("../../Wrappers/ApiProvider/ApiProvider.cjs");
-const useApi = require("../../hooks/api/useApi.cjs");
-function RelationPanel({ relatedPath, ...relation }) {
-  const { path } = useApi.useApi();
-  utils.urlJoin(
-    path ? path.substring(0, path.lastIndexOf("/")) : "",
-    relatedPath.substring(0, relatedPath.lastIndexOf("/"))
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(ApiProvider.ApiProvider, { resource_name: relatedPath.replace("/", ""), relation, children: /* @__PURE__ */ jsxRuntime.jsx(DataGrid.DataGrid, { hideToolbar: true, hideDownload: false }) });
-}
-const RelationPanel$1 = React.memo(RelationPanel);
-module.exports = RelationPanel$1;