Form prototype

* Remove unused FormLayout and SuperForm stores.
* Consolidate form logic into Former component.
* Implement new Former layout and types.
* Update stories for new Former component.
* Clean up unused styles and types across the project.

.storybook/previewDecorator.tsx

@@ -1,13 +1,16 @@
 import { MantineProvider } from '@mantine/core';
+import { ModalsProvider } from '@mantine/modals';
 import '@mantine/core/styles.css';
 
 export function PreviewDecorator(Story: any, { parameters }: any) {
   console.log('Rendering decorator', parameters);
   return (
     <MantineProvider>
+      <ModalsProvider>
         <div style={{ height: 'calc(100vh - 64px)', width: 'calc(100vw - 64px)' }}>
           <Story key={'mainStory'} />
         </div>
+      </ModalsProvider>
     </MantineProvider>
   );
 }

CHANGELOG.md

@@ -1,5 +1,131 @@
 # @warkypublic/zustandsyncstore
 
+## 0.0.23
+
+### Patch Changes
+
+- 3205411: Using the effect of array as feature.
+
+## 0.0.22
+
+### Patch Changes
+
+- 7c1d478: Possible selection fixes
+
+## 0.0.21
+
+### Patch Changes
+
+- 6664c98: Calls onchange on cell click since selection does not change.
+
+## 0.0.20
+
+### Patch Changes
+
+- 30581de: Version bump
+
+## 0.0.19
+
+### Patch Changes
+
+- 1b2bf62: Fixed refresh bug
+
+## 0.0.18
+
+### Patch Changes
+
+- 7cfefa9: API props change bug
+
+## 0.0.17
+
+### Patch Changes
+
+- 03210a3: Updated selected cols bug
+
+## 0.0.16
+
+### Patch Changes
+
+- 5e922df: A Few fixes
+
+## 0.0.15
+
+### Patch Changes
+
+- a1202f9: Hopefully fix the options not always loading
+
+## 0.0.14
+
+### Patch Changes
+
+- 864188c: Added searchfields
+
+## 0.0.13
+
+### Patch Changes
+
+- b4058f1: Fixed search and allow row selection for only rows with keys
+
+## 0.0.12
+
+### Patch Changes
+
+- 57c72e6: Search String and Better GoAPI functionality
+
+## 0.0.11
+
+### Patch Changes
+
+- 54deac6: Added refs and exports, isEmpty
+
+## 0.0.10
+
+### Patch Changes
+
+- 64cfed8: Scroll to and forwarded ref
+
+## 0.0.9
+
+### Patch Changes
+
+- 5d8388c: Added selectFirstRowOnMount and fixed selection of first row
+
+## 0.0.8
+
+### Patch Changes
+
+- cdcb5c2: Fixed memo of options in GridlerAPIAdaptor
+
+## 0.0.7
+
+### Patch Changes
+
+- b49fada: Extra api options, local data options
+
+## 0.0.6
+
+### Patch Changes
+
+- 182a5f8: Flex changes and event handlers
+
+## 0.0.5
+
+### Patch Changes
+
+- d7f4d0d: Fixed spreaing of grid props
+
+## 0.0.4
+
+### Patch Changes
+
+- 0f7cf52: Eslint, fixes on container rendering
+
+## 0.0.3
+
+### Patch Changes
+
+- 79e8f1e: Fixed peer deps
+
 ## 0.0.2
 
 ### Patch Changes

eslint.config.js

@@ -1,35 +0,0 @@
-// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
-import storybook from 'eslint-plugin-storybook';
-
-import js from '@eslint/js';
-import globals from 'globals';
-import reactHooks from 'eslint-plugin-react-hooks';
-import reactRefresh from 'eslint-plugin-react-refresh';
-import tseslint from 'typescript-eslint';
-import perfectionist from 'eslint-plugin-perfectionist';
-
-export default tseslint.config(
-  {
-    ignores: ['dist'],
-  },
-  [
-    {
-      files: ['**/*.{ts,tsx}'],
-      extends: [
-        js.configs.recommended,
-        tseslint.configs.recommended,
-        reactHooks.configs['recommended-latest'],
-        reactRefresh.configs.vite,
-        perfectionist.configs['recommended-alphabetical'],
-      ],
-      languageOptions: {
-        ecmaVersion: 2020,
-        globals: globals.browser,
-      },
-      rules: {
-        '@typescript-eslint/no-explicit-any': 'warn',
-      },
-    },
-  ],
-  storybook.configs['flat/recommended']
-);

eslint.config.ts

@@ -0,0 +1,39 @@
+import js from '@eslint/js';
+import perfectionist from 'eslint-plugin-perfectionist';
+import pluginReact from 'eslint-plugin-react';
+//import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import { defineConfig } from 'eslint/config';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+
+const config = defineConfig([
+  {
+    extends: ['js/recommended'],
+    files: ['**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+
+    languageOptions: { globals: globals.browser },
+    plugins: { js },
+  },
+  // reactHooks.configs['recommended-latest'],
+  { ...reactRefresh.configs.vite, ignores: ['**/*.test.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'] },
+  tseslint.configs.recommended,
+  {
+    ...pluginReact.configs.flat.recommended,
+    ignores: ['**/*.test.{js,mjs,cjs,ts,mts,cts,jsx,tsx}', '*stories.tsx'],
+    rules: {
+      ...pluginReact.configs.flat.recommended.rules,
+      'react/react-in-jsx-scope': 'off',
+      'react-refresh/only-export-components': 'warn',
+    },
+  },
+  perfectionist.configs['recommended-alphabetical'],
+  {
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/ban-ts-comment': 'off',
+    },
+  },
+]);
+
+export default config;

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@warkypublic/oranguru",
   "author": "Warky Devs",
-  "version": "0.0.2",
+  "version": "0.0.23",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -38,7 +38,7 @@
         "default": "./dist/lib.cjs.js"
       },
       "./package.json": "./package.json",
-      "./oranguru.css": "./oranguru.css"
+      "./oranguru.css": "./dist/oranguru.css"
     }
   },
   "exports": {
@@ -46,18 +46,17 @@
       "types": "./src/lib.ts",
       "default": "./src/lib.ts"
     },
-    "./oranguru.css": "./oranguru.css"
+    "./oranguru.css": "./src/oranguru.css"
   },
   "dependencies": {
+
     "moment": "^2.30.1"
+    
   },
   "devDependencies": {
     "@changesets/cli": "^2.29.7",
-    "postcss": "^8.5.6",
-    "postcss-preset-mantine": "^1.18.0",
-    "postcss-simple-vars": "^7.0.1",
     "@eslint/js": "^9.38.0",
-    "@storybook/react-vite": "^9.1.13",
+    "@storybook/react-vite": "^9.1.15",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
@@ -65,41 +64,49 @@
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
     "@typescript-eslint/parser": "^8.46.2",
-    "@vitejs/plugin-react-swc": "^4.1.0",
+    "@vitejs/plugin-react-swc": "^4.2.0",
     "eslint": "^9.38.0",
     "eslint-config-mantine": "^4.0.3",
     "eslint-plugin-perfectionist": "^4.15.1",
-    "eslint-plugin-react-hooks": "^7.0.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
-    "eslint-plugin-storybook": "^9.1.13",
+    "eslint-plugin-storybook": "^9.1.15",
     "global": "^4.4.0",
     "globals": "^16.4.0",
+    "jiti": "^2.6.1",
     "jsdom": "^27.0.1",
+    "postcss": "^8.5.6",
+    "postcss-preset-mantine": "^1.18.0",
+    "postcss-simple-vars": "^7.0.1",
     "prettier": "^3.6.2",
     "prettier-eslint": "^16.4.2",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "storybook": "^9.1.13",
+    "storybook": "^9.1.15",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.2",
-    "vite": "^7.1.11",
+    "vite": "^7.1.12",
     "vite-plugin-dts": "^4.5.4",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.2.4"
+    "vitest": "^4.0.3"
   },
   "peerDependencies": {
+    "@glideapps/glide-data-grid": "^6.0.3",
     "@mantine/core": "^8.3.1",
     "@mantine/hooks": "^8.3.1",
-    "@glideapps/glide-data-grid": "^6.0.3",
     "@mantine/notifications": "^8.3.5",
+    "@mantine/modals": "^8.3.5",
+    "@tabler/icons-react": "^3.35.0",
+    "@tanstack/react-query": "^5.90.5",
     "@warkypublic/artemis-kit": "^1.0.10",
     "@warkypublic/zustandsyncstore": "^0.0.4",
+    "react-hook-form": "^7.71.0",
+        
+    "immer": "^10.1.3",
     "react": ">= 19.0.0",
     "react-dom": ">= 19.0.0",
     "use-sync-external-store": ">= 1.4.0",
-    "@tabler/icons-react": "^3.35.0",
-    "@tanstack/react-query": "^5.90.5",
-    "immer": "^10.1.3",
     "zustand": ">= 5.0.0"
   }
 }

src/Form/components/Form.tsx

@@ -0,0 +1,38 @@
+import React, { type ReactNode } from 'react'
+import { Card, Stack, LoadingOverlay } from '@mantine/core'
+import { FormSection } from './FormSection'
+
+interface FormProps {
+  children: ReactNode
+  loading?: boolean
+  [key: string]: any
+}
+
+export const Form: React.FC<FormProps> & {
+  Section: typeof FormSection
+} = ({ children, loading, ...others }) => {
+  return (
+    <Card
+      withBorder
+      component={Stack}
+      w="100%"
+      h="100%"
+      padding={0}
+      styles={{
+        root: {
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+        },
+      }}
+      shadow="sm"
+      radius="md"
+      {...others}
+    >
+      <LoadingOverlay visible={loading || false} />
+      {children}
+    </Card>
+  )
+}
+
+Form.Section = FormSection

src/Form/components/FormLayout.tsx

@@ -0,0 +1,55 @@
+import React, { type ReactNode } from 'react'
+import { Modal } from '@mantine/core'
+import { Form } from './Form'
+import { FormLayoutStoreProvider, useFormLayoutStore } from '../store/FormLayout.store'
+import type { RequestType } from '../types'
+
+interface FormLayoutProps {
+  children: ReactNode
+  dirty?: boolean
+  loading?: boolean
+  onCancel?: () => void
+  onSubmit?: () => void
+  request?: RequestType
+  modal?: boolean
+  modalProps?: any
+  nested?: boolean
+  deleteFormProps?: any
+  [key: string]: any
+}
+
+const LayoutComponent: React.FC<FormLayoutProps> = ({
+  children,
+  modal,
+  modalProps,
+  ...others
+}) => {
+  const { request } = useFormLayoutStore((state) => ({
+    request: state.request,
+  }))
+
+  const modalWidth = request === 'delete' ? 400 : modalProps?.width
+
+  return modal === true ? (
+    <Modal
+      onClose={() => modalProps?.onClose?.()}
+      opened={modalProps?.opened || false}
+      size="auto"
+      withCloseButton={false}
+      centered={request !== 'delete'}
+      {...modalProps}
+    >
+      <div style={{ height: modalProps?.height, width: modalWidth }}>
+        <Form {...others}>{children}</Form>
+      </div>
+    </Modal>
+  ) : (
+    <Form {...others}>{children}</Form>
+  )
+}
+
+export const FormLayout: React.FC<FormLayoutProps> = (props) => (
+  <FormLayoutStoreProvider {...props}>
+    <LayoutComponent {...props} />
+  </FormLayoutStoreProvider>
+)

src/Form/components/FormSection.tsx

@@ -0,0 +1,117 @@
+import React, { type ReactNode } from 'react'
+import { Stack, Group, Paper, Button, Title, Box } from '@mantine/core'
+import { useFormLayoutStore } from '../store/FormLayout.store'
+
+interface FormSectionProps {
+  type: 'header' | 'body' | 'footer' | 'error'
+  title?: string
+  rightSection?: ReactNode
+  children?: ReactNode
+  buttonTitles?: { submit?: string; cancel?: string }
+  className?: string
+  [key: string]: any
+}
+
+export const FormSection: React.FC<FormSectionProps> = ({
+  type,
+  title,
+  rightSection,
+  children,
+  buttonTitles,
+  className,
+  ...others
+}) => {
+  const { onCancel, onSubmit, request, loading } = useFormLayoutStore((state) => ({
+    onCancel: state.onCancel,
+    onSubmit: state.onSubmit,
+    request: state.request,
+    loading: state.loading,
+  }))
+
+  if (type === 'header') {
+    return (
+      <Group
+        justify="space-between"
+        p="md"
+        style={{
+          borderBottom: '1px solid var(--mantine-color-gray-3)',
+        }}
+        className={className}
+        {...others}
+      >
+        <Title order={4} size="h5">
+          {title}
+        </Title>
+        {rightSection && <Box>{rightSection}</Box>}
+      </Group>
+    )
+  }
+
+  if (type === 'body') {
+    return (
+      <Stack
+        gap="md"
+        p="md"
+        style={{ flex: 1, overflow: 'auto' }}
+        className={className}
+        {...others}
+      >
+        {children}
+      </Stack>
+    )
+  }
+
+  if (type === 'footer') {
+    return (
+      <Group
+        justify="flex-end"
+        gap="xs"
+        p="md"
+        style={{
+          borderTop: '1px solid var(--mantine-color-gray-3)',
+        }}
+        className={className}
+        {...others}
+      >
+        {children}
+        {request !== 'view' && (
+          <>
+            <Button
+              variant="default"
+              onClick={onCancel}
+              disabled={loading}
+            >
+              {buttonTitles?.cancel ?? 'Cancel'}
+            </Button>
+            <Button
+              type="submit"
+              onClick={onSubmit}
+              loading={loading}
+            >
+              {buttonTitles?.submit ?? (request === 'delete' ? 'Delete' : 'Save')}
+            </Button>
+          </>
+        )}
+      </Group>
+    )
+  }
+
+  if (type === 'error') {
+    return (
+      <Paper
+        p="sm"
+        m="md"
+        style={{
+          backgroundColor: 'var(--mantine-color-red-0)',
+          border: '1px solid var(--mantine-color-red-3)',
+        }}
+        className={className}
+        {...others}
+      >
+        {children}
+      </Paper>
+    )
+  }
+
+  return null
+}

src/Form/components/SuperForm.tsx

@@ -0,0 +1,34 @@
+import React, { forwardRef, type ReactElement, type Ref } from 'react'
+import { FormProvider, useForm, type FieldValues } from 'react-hook-form'
+import { Provider } from '../store/SuperForm.store'
+import type { SuperFormProps, SuperFormRef } from '../types'
+import Layout from './SuperFormLayout'
+import SuperFormPersist from './SuperFormPersist'
+
+const SuperForm = <T extends FieldValues>(
+  { useFormProps, gridRef, children, persist, ...others }: SuperFormProps<T>,
+  ref
+) => {
+  const form = useForm<T>({ ...useFormProps })
+
+  return (
+    <Provider {...others}>
+      <FormProvider {...form}>
+        {persist && (
+          <SuperFormPersist storageKey={typeof persist === 'object' ? persist.storageKey : null} />
+        )}
+        <Layout<T> gridRef={gridRef} ref={ref}>
+          {children}
+        </Layout>
+      </FormProvider>
+    </Provider>
+  )
+}
+
+const FRSuperForm = forwardRef(SuperForm) as <T extends FieldValues>(
+  props: SuperFormProps<T> & {
+    ref?: Ref<SuperFormRef<T>>
+  }
+) => ReactElement
+
+export default FRSuperForm

src/Form/components/SuperFormLayout.tsx

@@ -0,0 +1,364 @@
+import React, {
+  forwardRef,
+  RefObject,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  type MutableRefObject,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
+} from 'react'
+import { useFormContext, useFormState, type FieldValues, type UseFormReturn } from 'react-hook-form'
+import { v4 as uuid } from 'uuid'
+import {
+  ActionIcon,
+  Group,
+  List,
+  LoadingOverlay,
+  Paper,
+  Spoiler,
+  Stack,
+  Title,
+  Tooltip,
+  Transition,
+} from '@mantine/core'
+import { IconChevronsLeft, IconChevronsRight } from '@tabler/icons-react'
+import { useUncontrolled } from '@mantine/hooks'
+import useRemote from '../hooks/useRemote'
+import { useStore } from '../store/SuperForm.store'
+import classes from '../styles/Form.module.css'
+import { Form } from './Form'
+import { FormLayout } from './FormLayout'
+import type { GridRef, SuperFormRef } from '../types'
+
+const SuperFormLayout = <T extends FieldValues>(
+  {
+    children,
+    gridRef,
+  }: {
+    children: React.ReactNode | ((props: UseFormReturn<T, any, undefined>) => React.ReactNode)
+    gridRef?: MutableRefObject<GridRef<any> | null>
+  },
+  ref
+) => {
+  // Component store State
+  const {
+    layoutProps,
+    meta,
+    nested,
+    onBeforeSubmit,
+    onCancel,
+    onLayoutMounted,
+    onLayoutUnMounted,
+    onResetForm,
+    onSubmit,
+    primeData,
+    request,
+    tableName,
+    value,
+  } = useStore((state) => ({
+    extraButtons: state.extraButtons,
+    layoutProps: state.layoutProps,
+    meta: state.meta,
+    nested: state.nested,
+    onBeforeSubmit: state.onBeforeSubmit,
+    onCancel: state.onCancel,
+    onLayoutMounted: state.onLayoutMounted,
+    onLayoutUnMounted: state.onLayoutUnMounted,
+    onResetForm: state.onResetForm,
+    onSubmit: state.onSubmit,
+    primeData: state.primeData,
+    request: state.request,
+    tableName: state.remote?.tableName,
+    value: state.value,
+  }))
+
+  const [_opened, _setOpened] = useUncontrolled({
+    value: layoutProps?.bodyRightSection?.opened,
+    defaultValue: false,
+    onChange: layoutProps?.bodyRightSection?.setOpened,
+  })
+
+  // Component Hooks
+  const form = useFormContext<T, any, undefined>()
+  const formState = useFormState({ control: form.control })
+
+  const { isFetching, mutateAsync, error, queryKey } = useRemote(gridRef)
+
+  // Component variables
+  const formUID = useMemo(() => {
+    return meta?.id ?? uuid()
+  }, [])
+
+  const requestString = request?.charAt(0).toUpperCase() + request?.slice(1)
+
+  const renderRightSection = (
+    <>
+      <Tooltip label={`${_opened ? 'Close' : 'Open'} Right Section`} withArrow>
+        <ActionIcon
+          style={{
+            position: 'absolute',
+            right: 12,
+            zIndex: 5,
+
+            display: layoutProps?.bodyRightSection?.hideToggleButton ? 'none' : 'block',
+          }}
+          variant='filled'
+          size='sm'
+          onClick={() => _setOpened(!_opened)}
+          radius='6'
+          m={2}
+        >
+          {_opened ? <IconChevronsRight /> : <IconChevronsLeft />}
+        </ActionIcon>
+      </Tooltip>
+      <Group wrap='nowrap' h='100%' align='flex-start' gap={2} w={'100%'}>
+        <Stack gap={0} h='100%' style={{ flex: 1 }}>
+          {typeof children === 'function' ? children({ ...form }) : children}
+        </Stack>
+        <Transition transition='slide-left' mounted={_opened}>
+          {(transitionStyles) => (
+            <Paper
+              style={transitionStyles}
+              h='100%'
+              w={layoutProps?.bodyRightSection?.w}
+              shadow='xs'
+              radius='xs'
+              mr='xs'
+              mt='xs'
+              ml={0}
+              {...layoutProps?.bodyRightSection?.paperProps}
+            >
+              {layoutProps?.bodyRightSection?.render?.({
+                form,
+                formValue: form.getValues(),
+                isFetching,
+                opened: _opened,
+                queryKey,
+                setOpened: _setOpened,
+              })}
+            </Paper>
+          )}
+        </Transition>
+      </Group>
+    </>
+  )
+
+  // Component Callback Functions
+  const onFormSubmit = async (data: T | any, closeForm: boolean = true) => {
+    const res: any =
+      typeof onBeforeSubmit === 'function'
+        ? await mutateAsync?.(await onBeforeSubmit(data, request, form))
+        : await mutateAsync?.(data)
+
+    if ((tableName?.length ?? 0) > 0) {
+      if (res?.ok || (res?.status >= 200 && res?.status < 300)) {
+        onSubmit?.(res?.data, request, data, form, closeForm)
+      } else {
+        form.setError('root', {
+          message: res.status === 401 ? 'Username or password is incorrect' : res?.error,
+        })
+      }
+    } else {
+      onSubmit?.(data, request, data, form, closeForm)
+    }
+  }
+
+  // Component use Effects
+  useEffect(() => {
+    if (request === 'insert') {
+      if (onResetForm) {
+        onResetForm(primeData, form).then((resetData) => {
+          form.reset(resetData)
+        })
+      } else {
+        form.reset(primeData)
+      }
+    } else if ((request === 'change' || request === 'delete') && (tableName?.length ?? 0) === 0) {
+      if (onResetForm) {
+        onResetForm(value, form).then((resetData) => {
+          form.reset(resetData)
+        })
+      } else {
+        form.reset(value)
+      }
+    }
+    onLayoutMounted?.()
+    return onLayoutUnMounted
+  }, [
+    request,
+    primeData,
+    tableName,
+    value,
+    form.reset,
+    onResetForm,
+    onLayoutMounted,
+    onLayoutUnMounted,
+  ])
+
+  useEffect(() => {
+    if (
+      (Object.keys(formState.errors)?.length > 0 || error) &&
+      _opened === false &&
+      layoutProps?.showErrorList !== false
+    ) {
+      _setOpened(true)
+    }
+  }, [Object.keys(formState.errors)?.length > 0, error, layoutProps?.showErrorList])
+
+  useImperativeHandle<SuperFormRef<T>, SuperFormRef<T>>(ref, () => ({
+    form,
+    mutation: { isFetching, mutateAsync, error },
+    submit: (closeForm: boolean = true, afterSubmit?: (data: T | any) => void) => {
+      return form.handleSubmit(async (data: T | any) => {
+        await onFormSubmit(data, closeForm)
+        afterSubmit?.(data)
+      })()
+    },
+    queryKey,
+    getFormState: () => formState,
+  }))
+
+  return (
+    <form
+      name={formUID}
+      onSubmit={(e) => {
+        e.stopPropagation()
+        e.preventDefault()
+        form.handleSubmit((data: T | any) => {
+          onFormSubmit(data)
+        })(e)
+      }}
+      style={{ height: '100%' }}
+      className={request === 'view' ? classes.disabled : ''}
+    >
+      {/* <LoadingOverlay
+        visible={isFetching}
+        overlayProps={{
+          backgroundOpacity: 0.5,
+        }}
+      /> */}
+      {layoutProps?.noLayout ? (
+        typeof layoutProps?.bodyRightSection?.render === 'function' ? (
+          renderRightSection
+        ) : typeof children === 'function' ? (
+          <>
+            <LoadingOverlay
+              visible={isFetching}
+              overlayProps={{
+                backgroundOpacity: 0.5,
+              }}
+            />
+            {children({ ...form })}
+          </>
+        ) : (
+          <>
+            <LoadingOverlay
+              visible={isFetching}
+              overlayProps={{
+                backgroundOpacity: 0.5,
+              }}
+            />
+            {children}
+          </>
+        )
+      ) : (
+        <FormLayout
+          dirty={formState.isDirty}
+          loading={isFetching}
+          onCancel={() => onCancel?.(request)}
+          onSubmit={form.handleSubmit((data: T | any) => {
+            onFormSubmit(data)
+          })}
+          request={request}
+          modal={false}
+          nested={nested}
+        >
+          {!layoutProps?.noHeader && (
+            <Form.Section
+              type='header'
+              title={`${layoutProps?.title || requestString}`}
+              rightSection={layoutProps?.rightSection}
+            />
+          )}
+          {(Object.keys(formState.errors)?.length > 0 || error) && (
+            <Form.Section
+              className={classes.sticky}
+              buttonTitles={layoutProps?.buttonTitles}
+              type='error'
+            >
+              <Title order={6} size='sm' c='red'>
+                {(error?.message?.length ?? 0) > 0
+                  ? 'Server Error'
+                  : 'Required information is incomplete*'}
+              </Title>
+              {(error as any)?.response?.data?.msg ||
+                (error as any)?.response?.data?._error ||
+                error?.message}
+              {layoutProps?.showErrorList !== false && (
+                <Spoiler maxHeight={50} showLabel='Show more' hideLabel='Hide'>
+                  <List
+                    size='xs'
+                    style={{
+                      color: 'light-dark(var(--mantine-color-dark-7), var(--mantine-color-gray-2))',
+                    }}
+                  >
+                    {getErrorMessages(formState.errors)}
+                  </List>
+                </Spoiler>
+              )}
+            </Form.Section>
+          )}
+          {typeof layoutProps?.bodyRightSection?.render === 'function' ? (
+            <Form.Section type='body' {...layoutProps?.bodySectionProps}>
+              {renderRightSection}
+            </Form.Section>
+          ) : (
+            <Form.Section type='body' {...layoutProps?.bodySectionProps}>
+              {typeof children === 'function' ? children({ ...form }) : children}
+            </Form.Section>
+          )}
+          {!layoutProps?.noFooter && (
+            <Form.Section
+              className={classes.sticky}
+              buttonTitles={layoutProps?.buttonTitles}
+              type='footer'
+              {...(typeof layoutProps?.footerSectionProps === 'function'
+                ? layoutProps?.footerSectionProps(ref as RefObject<SuperFormRef<T>>)
+                : layoutProps?.footerSectionProps)}
+            >
+              {typeof layoutProps?.extraButtons === 'function'
+                ? layoutProps?.extraButtons(form)
+                : layoutProps?.extraButtons}
+            </Form.Section>
+          )}
+        </FormLayout>
+      )}
+    </form>
+  )
+}
+
+const getErrorMessages = (errors: any): ReactNode | null => {
+  return Object.keys(errors ?? {}).map((key) => {
+    if (typeof errors[key] === 'object' && key !== 'ref') {
+      return getErrorMessages(errors[key])
+    }
+    if (key !== 'message') {
+      return null
+    }
+
+    return <List.Item key={key}>{errors[key]}</List.Item>
+  })
+}
+
+const FRSuperFormLayout = forwardRef(SuperFormLayout) as <T extends FieldValues>(
+  props: {
+    children: React.ReactNode | ((props: UseFormReturn<T, any, undefined>) => React.ReactNode)
+    gridRef?: MutableRefObject<GridRef | null>
+  } & {
+    ref?: Ref<SuperFormRef<T>>
+  }
+) => ReactElement
+
+export default FRSuperFormLayout

src/Form/components/SuperFormPersist.tsx

@@ -0,0 +1,66 @@
+import { useEffect, useState } from 'react'
+import { useFormContext, useFormState } from 'react-hook-form'
+import { useDebouncedCallback } from '@mantine/hooks'
+import useSubscribe from '../hooks/use-subscribe'
+import { useSuperFormStore } from '../store/SuperForm.store'
+import { openConfirmModal } from '../utils/openConfirmModal'
+
+const SuperFormPersist = ({ storageKey }: { storageKey?: string | null }) => {
+  // Component store State
+  const [persistKey, setPersistKey] = useState<string>('')
+  const { isDirty, isReady, isSubmitted } = useFormState()
+
+  const { remote, request } = useSuperFormStore((state) => ({
+    request: state.request,
+    remote: state.remote,
+  }))
+
+  // Component Hooks
+  const { reset, setValue } = useFormContext()
+
+  const handleFormChange = useDebouncedCallback(({ values }) => {
+    setPersistKey(() => {
+      const key = `superform-persist-${storageKey?.length > 0 ? storageKey : `${remote?.tableName || 'local'}-${request}-${values[remote?.primaryKey] ?? ''}`}`
+
+      if (!isDirty) {
+        return key
+      }
+
+      window.localStorage.setItem(key, JSON.stringify(values))
+
+      return key
+    })
+  }, 250)
+
+  useSubscribe('', handleFormChange)
+
+  // Component use Effects
+  useEffect(() => {
+    if (isReady && persistKey) {
+      const data = window.localStorage.getItem(persistKey)
+      if (!data) {
+        return
+      }
+
+      if (isSubmitted) {
+        window.localStorage.removeItem(persistKey)
+        return
+      }
+
+      openConfirmModal(
+        () => {
+          reset(JSON.parse(data))
+          setValue('_dirty', true, { shouldDirty: true })
+        },
+        () => {
+          window.localStorage.removeItem(persistKey)
+        },
+        'Do you want to restore the previous data that was not submitted?'
+      )
+    }
+  }, [isReady, isSubmitted, persistKey])
+
+  return null
+}
+
+export default SuperFormPersist

src/Form/config/ApiConfig.tsx

@@ -0,0 +1,43 @@
+import React, { createContext, useContext, ReactNode, useState } from 'react'
+
+interface ApiConfigContextValue {
+  apiURL: string
+  setApiURL: (url: string) => void
+}
+
+const ApiConfigContext = createContext<ApiConfigContextValue | null>(null)
+
+interface ApiConfigProviderProps {
+  children: ReactNode
+  defaultApiURL?: string
+}
+
+export const ApiConfigProvider: React.FC<ApiConfigProviderProps> = ({
+  children,
+  defaultApiURL = '',
+}) => {
+  const [apiURL, setApiURL] = useState(defaultApiURL)
+
+  return (
+    <ApiConfigContext.Provider value={{ apiURL, setApiURL }}>
+      {children}
+    </ApiConfigContext.Provider>
+  )
+}
+
+export const useApiConfig = (): ApiConfigContextValue => {
+  const context = useContext(ApiConfigContext)
+  if (!context) {
+    throw new Error('useApiConfig must be used within ApiConfigProvider')
+  }
+  return context
+}
+
+/**
+ * Hook to get API URL with optional override
+ * @param overrideURL - Optional URL to use instead of context value
+ */
+export const useApiURL = (overrideURL?: string): string => {
+  const { apiURL } = useApiConfig()
+  return overrideURL ?? apiURL
+}

src/Form/containers/Drawer/SuperFormDrawer.tsx

@@ -0,0 +1,146 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  useState,
+  type ReactElement,
+  type Ref,
+} from 'react'
+import { IconX } from '@tabler/icons-react'
+import type { FieldValues } from 'react-hook-form'
+import { ActionIcon, Drawer } from '@mantine/core'
+import type { SuperFormDrawerProps, SuperFormDrawerRef, SuperFormRef } from '../../types'
+import SuperForm from '../../components/SuperForm'
+import { openConfirmModal } from '../../utils/openConfirmModal'
+
+const SuperFormDrawer = <T extends FieldValues>(
+  { drawerProps, noCloseOnSubmit, ...formProps }: SuperFormDrawerProps<T>,
+  ref: Ref<SuperFormDrawerRef<T>>
+) => {
+  // Component Refs
+  const formRef = useRef<SuperFormRef<T>>(null)
+  const drawerRef = useRef<HTMLDivElement>(null)
+
+  // Component store State
+  // Tell drawer that form layout mounted to fix refs
+  const [layoutMounted, setLayoutMounted] = useState(false)
+
+  // Component Callback Functions
+  const onSubmit = (data: T, request, formData, form, closeForm: boolean = true) => {
+    formProps?.onSubmit?.(data, request, formData, form, closeForm)
+
+    if (request === 'delete') {
+      drawerProps?.onClose()
+    }
+
+    if (!noCloseOnSubmit) {
+      if (closeForm) {
+        drawerProps?.onClose()
+      }
+    }
+  }
+
+  const onCancel = (request) => {
+    if (formRef?.current?.getFormState().isDirty) {
+      openConfirmModal(() => {
+        drawerProps?.onClose()
+        formProps?.onCancel?.(request)
+      })
+    } else {
+      drawerProps?.onClose()
+      formProps?.onCancel?.(request)
+    }
+  }
+
+  const onLayoutMounted = useCallback(() => {
+    setLayoutMounted(true)
+    formProps?.onLayoutMounted?.()
+  }, [formProps?.onLayoutMounted])
+
+  const onLayoutUnMounted = useCallback(() => {
+    setLayoutMounted(false)
+    formProps?.onLayoutUnMounted?.()
+  }, [formProps?.onLayoutUnMounted])
+
+  // Component use Effects
+  useImperativeHandle<SuperFormDrawerRef<T>, SuperFormDrawerRef<T>>(
+    ref,
+    () => ({
+      ...formRef.current,
+      drawer: drawerRef.current,
+    } as SuperFormDrawerRef<T>),
+    [layoutMounted]
+  )
+
+  return (
+    <Drawer
+      ref={drawerRef}
+      onClose={onCancel}
+      closeOnClickOutside={false}
+      onKeyDown={(e) => {
+        if (e.key === 'Escape' && drawerProps.closeOnEscape !== false) {
+          e.stopPropagation()
+          onCancel(formProps.request)
+        }
+      }}
+      overlayProps={{ backgroundOpacity: 0.5, blur: 0.5 }}
+      padding={6}
+      position='right'
+      transitionProps={{
+        transition: 'slide-left',
+        duration: 150,
+        timingFunction: 'linear',
+      }}
+      size={500}
+      styles={{
+        content: {
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'stretch',
+        },
+        body: {
+          minHeight: '100px',
+          flexGrow: 1,
+        },
+      }}
+      keepMounted={false}
+      {...drawerProps}
+      closeOnEscape={false}
+      withCloseButton={false}
+      title={null}
+    >
+      <SuperForm<T>
+        {...formProps}
+        onCancel={onCancel}
+        onSubmit={onSubmit}
+        onLayoutMounted={onLayoutMounted}
+        onLayoutUnMounted={onLayoutUnMounted}
+        ref={formRef}
+        layoutProps={{
+          ...formProps?.layoutProps,
+          rightSection: (
+            <ActionIcon
+              size='xs'
+              onClick={() => {
+                onCancel(formProps?.request)
+              }}
+            >
+              <IconX size={18} />
+            </ActionIcon>
+          ),
+          title:
+            (drawerProps.title as string) ??
+            formProps?.layoutProps?.title ??
+            (formProps?.request as string),
+        }}
+      />
+    </Drawer>
+  )
+}
+
+const FRSuperFormDrawer = forwardRef(SuperFormDrawer) as <T extends FieldValues>(
+  props: SuperFormDrawerProps<T> & { ref?: Ref<SuperFormDrawerRef<T>> }
+) => ReactElement
+
+export default FRSuperFormDrawer

src/Form/containers/Modal/SuperFormModal.tsx

@@ -0,0 +1,105 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  useState,
+  type ReactElement,
+  type Ref,
+} from 'react'
+import type { FieldValues } from 'react-hook-form'
+import { Modal, ScrollArea } from '@mantine/core'
+import type { SuperFormModalProps, SuperFormModalRef, SuperFormRef } from '../../types'
+import SuperForm from '../../components/SuperForm'
+import { openConfirmModal } from '../../utils/openConfirmModal'
+
+const SuperFormModal = <T extends FieldValues>(
+  { modalProps, noCloseOnSubmit, ...formProps }: SuperFormModalProps<T>,
+  ref: Ref<SuperFormModalRef<T>>
+) => {
+  // Component Refs
+  const modalRef = useRef<HTMLDivElement>(null)
+  const formRef = useRef<SuperFormRef<T>>(null)
+
+  // Component store State
+  // Tell drawer that form layout mounted to fix refs
+  const [layoutMounted, setLayoutMounted] = useState(false)
+
+  // Component Callback Functions
+  const onSubmit = (data: T, request, formData, form, closeForm: boolean = true) => {
+    formProps?.onSubmit?.(data, request, formData, form, closeForm)
+
+    if (request === 'delete') {
+      modalProps?.onClose()
+    }
+
+    if (!noCloseOnSubmit) {
+      if (closeForm) {
+        modalProps?.onClose()
+      }
+    }
+  }
+
+  const onCancel = (request) => {
+    if (formRef?.current?.getFormState().isDirty) {
+      openConfirmModal(() => {
+        modalProps?.onClose()
+        formProps?.onCancel?.(request)
+      })
+    } else {
+      modalProps?.onClose()
+      formProps?.onCancel?.(request)
+    }
+  }
+
+  const onLayoutMounted = useCallback(() => {
+    setLayoutMounted(true)
+    formProps?.onLayoutMounted?.()
+  }, [formProps?.onLayoutMounted])
+
+  const onLayoutUnMounted = useCallback(() => {
+    setLayoutMounted(false)
+    formProps?.onLayoutUnMounted?.()
+  }, [formProps?.onLayoutUnMounted])
+
+  // Component use Effects
+  useImperativeHandle<SuperFormModalRef<T>, SuperFormModalRef<T>>(
+    ref,
+    () => ({
+      ...formRef.current,
+      modal: modalRef.current,
+    } as SuperFormModalRef<T>),
+    [layoutMounted]
+  )
+
+  return (
+    <Modal
+      ref={modalRef}
+      closeOnClickOutside={false}
+      overlayProps={{
+        backgroundOpacity: 0.5,
+        blur: 4,
+      }}
+      padding='sm'
+      scrollAreaComponent={ScrollArea.Autosize}
+      size={500}
+      keepMounted={false}
+      {...modalProps}
+    >
+      <SuperForm<T>
+        {...formProps}
+        onCancel={onCancel}
+        onSubmit={onSubmit}
+        onLayoutMounted={onLayoutMounted}
+        onLayoutUnMounted={onLayoutUnMounted}
+        ref={formRef}
+      />
+    </Modal>
+  )
+}
+
+const FRSuperFormModal = forwardRef(SuperFormModal) as <T extends FieldValues>(
+  props: SuperFormModalProps<T> & { ref?: Ref<SuperFormModalRef<T>> }
+) => ReactElement
+
+export default FRSuperFormModal

src/Form/containers/Popover/SuperFormPopover.tsx

@@ -0,0 +1,116 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  useState,
+  type ReactElement,
+  type Ref,
+} from 'react'
+import type { FieldValues } from 'react-hook-form'
+import { Box, Popover } from '@mantine/core'
+import { useUncontrolled } from '@mantine/hooks'
+import type { SuperFormPopoverProps, SuperFormPopoverRef, SuperFormRef } from '../../types'
+import SuperForm from '../../components/SuperForm'
+import { openConfirmModal } from '../../utils/openConfirmModal'
+
+const SuperFormPopover = <T extends FieldValues>(
+  { popoverProps, target, noCloseOnSubmit, ...formProps }: SuperFormPopoverProps<T>,
+  ref: Ref<SuperFormPopoverRef<T>>
+) => {
+  // Component Refs
+  const popoverRef = useRef<HTMLDivElement>(null)
+  const formRef = useRef<SuperFormRef<T>>(null)
+
+  // Component store State
+  // Tell drawer that form layout mounted to fix refs
+  const [layoutMounted, setLayoutMounted] = useState(false)
+
+  // Component Hooks
+  const [_value, _onChange] = useUncontrolled({
+    value: popoverProps?.opened,
+    onChange: popoverProps?.onChange,
+  })
+
+  // Component Callback Functions
+  const onSubmit = (data: T, request, formData, form, closeForm: boolean = true) => {
+    formProps?.onSubmit?.(data, request, formData, form, closeForm)
+
+    if (request === 'delete') {
+      _onChange(false)
+    }
+
+    if (!noCloseOnSubmit) {
+      if (closeForm) {
+        _onChange(false)
+      }
+    }
+  }
+
+  const onCancel = (request) => {
+    if (formRef?.current?.getFormState().isDirty) {
+      openConfirmModal(() => {
+        _onChange(false)
+        formProps?.onCancel?.(request)
+      })
+    } else {
+      _onChange(false)
+      formProps?.onCancel?.(request)
+    }
+  }
+
+  const onLayoutMounted = useCallback(() => {
+    setLayoutMounted(true)
+    formProps?.onLayoutMounted?.()
+  }, [formProps?.onLayoutMounted])
+
+  const onLayoutUnMounted = useCallback(() => {
+    setLayoutMounted(false)
+    formProps?.onLayoutUnMounted?.()
+  }, [formProps?.onLayoutUnMounted])
+
+  // Component use Effects
+  useImperativeHandle<SuperFormPopoverRef<T>, SuperFormPopoverRef<T>>(
+    ref,
+    () => ({
+      ...formRef.current,
+      popover: popoverRef.current,
+    } as SuperFormPopoverRef<T>),
+    [layoutMounted]
+  )
+
+  return (
+    <Popover
+      closeOnClickOutside={false}
+      onClose={() => _onChange(false)}
+      opened={_value}
+      position='left'
+      radius='md'
+      withArrow
+      withinPortal
+      zIndex={200}
+      keepMounted={false}
+      {...popoverProps}
+    >
+      <Popover.Target>
+        <Box onClick={() => _onChange(true)}>{target}</Box>
+      </Popover.Target>
+      <Popover.Dropdown p={0} m={0} ref={popoverRef}>
+        <SuperForm
+          {...formProps}
+          onCancel={onCancel}
+          onSubmit={onSubmit}
+          onLayoutMounted={onLayoutMounted}
+          onLayoutUnMounted={onLayoutUnMounted}
+          ref={formRef}
+        />
+      </Popover.Dropdown>
+    </Popover>
+  )
+}
+
+const FRSuperFormPopover = forwardRef(SuperFormPopover) as <T extends FieldValues>(
+  props: SuperFormPopoverProps<T> & { ref?: Ref<SuperFormPopoverRef<T>> }
+) => ReactElement
+
+export default FRSuperFormPopover

src/Form/hooks/use-drawer-form-state.tsx

@@ -0,0 +1,96 @@
+import { useState } from 'react'
+import { FieldValues } from 'react-hook-form'
+import { SuperFormProps, RequestType, ExtendedDrawerProps } from '../types'
+
+interface UseDrawerFormState<T extends FieldValues> extends Partial<SuperFormProps<T>> {
+  drawerProps: Partial<ExtendedDrawerProps>
+  opened?: boolean
+  onClose?: () => void
+  request: RequestType
+  [key: string]: any
+}
+
+type AskFunction = (request: RequestType, buffer: any) => void
+
+const useDrawerFormState = <T extends FieldValues>(
+  props?: Partial<UseDrawerFormState<T>>
+): {
+  formProps: UseDrawerFormState<T>
+  setFormProps: React.Dispatch<React.SetStateAction<UseDrawerFormState<T>>>
+  open: (props: Partial<UseDrawerFormState<T>>) => void
+  close: () => void
+  ask: AskFunction
+} => {
+  const [formProps, setFormProps] = useState<UseDrawerFormState<T>>({
+    opened: false,
+    request: 'insert',
+    ...props,
+    onClose: () =>
+      setFormProps((curr) => ({
+        ...curr,
+        opened: false,
+        drawerProps: { ...curr.drawerProps, opened: false },
+      })),
+    drawerProps: { opened: false, onClose: () => {}, ...props?.drawerProps },
+  })
+
+  return {
+    formProps,
+    setFormProps,
+    open: (props?: Partial<UseDrawerFormState<T>>) => {
+      setFormProps((curr) => {
+        return {
+          ...curr,
+          ...props,
+          request: props.request ?? curr.request,
+          opened: true,
+          drawerProps: {
+            ...curr.drawerProps,
+            ...props?.drawerProps,
+            opened: true,
+            onClose: curr.onClose,
+          },
+          primeData: props?.primeData,
+          useFormProps: {
+            ...curr.useFormProps,
+            ...props?.useFormProps,
+          },
+          layoutProps: {
+            ...curr.layoutProps,
+            ...props?.layoutProps,
+          },
+          useQueryOptions: {
+            ...curr.useQueryOptions,
+            ...props?.useQueryOptions,
+          },
+          meta: {
+            ...curr.meta,
+            ...props?.meta,
+          },
+          useMutationOptions: {
+            ...curr.useMutationOptions,
+            ...props?.useMutationOptions,
+          },
+        }
+      })
+    },
+    close: () =>
+      setFormProps((curr) => ({
+        ...curr,
+        opened: false,
+        drawerProps: { ...curr.drawerProps, opened: false, onClose: curr.onClose },
+      })),
+    ask: (request: RequestType, buffer: any) => {
+      setFormProps((curr) => ({
+        ...curr,
+        request,
+        value: buffer,
+        opened: true,
+        drawerProps: { ...curr.drawerProps, opened: true, onClose: curr.onClose },
+      }))
+    },
+  }
+}
+
+export default useDrawerFormState
+export type { UseDrawerFormState }

src/Form/hooks/use-modal-form-state.tsx

@@ -0,0 +1,97 @@
+import { useState } from 'react'
+import { FieldValues } from 'react-hook-form'
+import { ModalProps } from '@mantine/core'
+import { SuperFormProps, RequestType } from '../types'
+
+interface UseModalFormState<T extends FieldValues> extends Partial<SuperFormProps<T>> {
+  modalProps: ModalProps
+  opened?: boolean
+  onClose?: () => void
+  request: RequestType
+  [key: string]: any
+}
+
+type AskFunction = (request: RequestType, buffer: any) => void
+
+const useModalFormState = <T extends FieldValues>(
+  props?: Partial<UseModalFormState<T>>
+): {
+  formProps: UseModalFormState<T>
+  setFormProps: React.Dispatch<React.SetStateAction<UseModalFormState<T>>>
+  open: (props: Partial<UseModalFormState<T>>) => void
+  close: () => void
+  ask: AskFunction
+} => {
+  const [formProps, setFormProps] = useState<UseModalFormState<T>>({
+    opened: false,
+    request: 'insert',
+    ...props,
+    onClose: () =>
+      setFormProps((curr) => ({
+        ...curr,
+        opened: false,
+        modalProps: { ...curr.modalProps, opened: false },
+      })),
+    modalProps: { opened: false, onClose: () => {}, ...props?.modalProps },
+  })
+
+  return {
+    formProps,
+    setFormProps,
+    open: (props?: Partial<UseModalFormState<T>>) => {
+      setFormProps((curr) => {
+        return {
+          ...curr,
+          ...props,
+          request: props.request ?? curr.request,
+          opened: true,
+          modalProps: {
+            ...curr.modalProps,
+            ...props?.modalProps,
+            opened: true,
+            onClose: curr.onClose,
+          },
+          primeData: props?.primeData,
+          useFormProps: {
+            ...curr.useFormProps,
+            ...props?.useFormProps,
+          },
+          layoutProps: {
+            ...curr.layoutProps,
+            ...props?.layoutProps,
+          },
+          useQueryOptions: {
+            ...curr.useQueryOptions,
+            ...props?.useQueryOptions,
+          },
+          meta: {
+            ...curr.meta,
+            ...props?.meta,
+          },
+          useMutationOptions: {
+            ...curr.useMutationOptions,
+            ...props?.useMutationOptions,
+          },
+        }
+      })
+    },
+    close: () =>
+      setFormProps((curr) => ({
+        ...curr,
+        opened: false,
+        modalProps: { ...curr.modalProps, opened: false, onClose: curr.onClose },
+      })),
+    ask: (request: RequestType, buffer: any) => {
+      setFormProps((curr) => ({
+        ...curr,
+        request,
+        value: buffer,
+        opened: true,
+        modalProps: { ...curr.modalProps, opened: true, onClose: curr.onClose },
+      }))
+    },
+  }
+}
+
+export default useModalFormState
+export type { UseModalFormState }

src/Form/hooks/use-popover-form-state.tsx

@@ -0,0 +1,97 @@
+import { useState } from 'react'
+import { FieldValues } from 'react-hook-form'
+import { PopoverProps } from '@mantine/core'
+import { SuperFormProps, RequestType } from '../types'
+
+interface UsePopoverFormState<T extends FieldValues> extends Partial<SuperFormProps<T>> {
+  popoverProps: Omit<PopoverProps, 'children'>
+  opened?: boolean
+  onClose?: () => void
+  request: RequestType
+  [key: string]: any
+}
+
+type AskFunction = (request: RequestType, buffer: any) => void
+
+const usePopoverFormState = <T extends FieldValues>(
+  props?: Partial<UsePopoverFormState<T>>
+): {
+  formProps: UsePopoverFormState<T>
+  setFormProps: React.Dispatch<React.SetStateAction<UsePopoverFormState<T>>>
+  open: (props: Partial<UsePopoverFormState<T>>) => void
+  close: () => void
+  ask: AskFunction
+} => {
+  const [formProps, setFormProps] = useState<UsePopoverFormState<T>>({
+    opened: false,
+    request: 'insert',
+    ...props,
+    popoverProps: { opened: false, onClose: () => {}, ...props?.popoverProps },
+    onClose: () =>
+      setFormProps((curr) => ({
+        ...curr,
+        opened: false,
+        popoverProps: { ...curr.popoverProps, opened: false },
+      })),
+  })
+
+  return {
+    formProps,
+    setFormProps,
+    open: (props?: Partial<UsePopoverFormState<T>>) => {
+      setFormProps((curr) => {
+        return {
+          ...curr,
+          ...props,
+          request: props.request ?? curr.request,
+          opened: true,
+          popoverProps: {
+            ...curr.popoverProps,
+            ...props?.popoverProps,
+            opened: true,
+            onClose: curr.onClose,
+          },
+          primeData: props?.primeData,
+          useFormProps: {
+            ...curr.useFormProps,
+            ...props?.useFormProps,
+          },
+          layoutProps: {
+            ...curr.layoutProps,
+            ...props?.layoutProps,
+          },
+          useQueryOptions: {
+            ...curr.useQueryOptions,
+            ...props?.useQueryOptions,
+          },
+          meta: {
+            ...curr.meta,
+            ...props?.meta,
+          },
+          useMutationOptions: {
+            ...curr.useMutationOptions,
+            ...props?.useMutationOptions,
+          },
+        }
+      })
+    },
+    close: () =>
+      setFormProps((curr) => ({
+        ...curr,
+        opened: false,
+        popoverProps: { ...curr.popoverProps, opened: false, onClose: curr.onClose },
+      })),
+    ask: (request: RequestType, buffer: any) => {
+      setFormProps((curr) => ({
+        ...curr,
+        request,
+        value: buffer,
+        opened: true,
+        popoverProps: { ...curr.popoverProps, opened: true, onClose: curr.onClose },
+      }))
+    },
+  }
+}
+
+export default usePopoverFormState
+export type { UsePopoverFormState }

src/Form/hooks/use-subscribe.tsx

@@ -0,0 +1,40 @@
+import { useEffect } from 'react'
+import {
+  EventType,
+  FieldValues,
+  FormState,
+  InternalFieldName,
+  Path,
+  ReadFormState,
+  useFormContext,
+  UseFormReturn,
+} from 'react-hook-form'
+
+const useSubscribe = <T extends FieldValues>(
+  name: Path<T> | readonly Path<T>[] | undefined,
+  callback: (
+    data: Partial<FormState<T>> & {
+      values: FieldValues
+      name?: InternalFieldName
+      type?: EventType
+    },
+    form?: UseFormReturn<T, any, T>
+  ) => void,
+  formState?: ReadFormState,
+  deps?: unknown[]
+) => {
+  const form = useFormContext<T>()
+
+  return useEffect(() => {
+    const unsubscribe = form.subscribe({
+      name,
+      callback: (data) => callback(data, form),
+      formState: { values: true, ...formState },
+      exact: true,
+    })
+
+    return unsubscribe
+  }, [form.subscribe, ...(deps || [])])
+}
+
+export default useSubscribe

src/Form/hooks/use-super-form-state.tsx

@@ -0,0 +1,38 @@
+import { useState } from 'react'
+import { FieldValues } from 'react-hook-form'
+import { SuperFormProps, RequestType } from '../types'
+
+interface UseSuperFormState<T extends FieldValues> extends Partial<SuperFormProps<T>> {
+  request: RequestType
+  [key: string]: any
+}
+
+type AskFunction = (request: RequestType, buffer: any) => void
+
+const useSuperFormState = <T extends FieldValues>(
+  props?: UseSuperFormState<T>
+): {
+  formProps: UseSuperFormState<any>
+  setFormProps: React.Dispatch<React.SetStateAction<UseSuperFormState<T>>>
+  ask: AskFunction
+} => {
+  const [formProps, setFormProps] = useState<UseSuperFormState<T>>({
+    request: 'insert',
+    ...props,
+  })
+
+  return {
+    formProps,
+    setFormProps,
+    ask: (request: RequestType, buffer: any) => {
+      setFormProps((curr) => ({
+        ...curr,
+        request,
+        value: buffer,
+      }))
+    },
+  }
+}
+
+export default useSuperFormState
+export type { UseSuperFormState }

src/Form/hooks/useRemote.tsx

@@ -0,0 +1,123 @@
+import { useEffect, type MutableRefObject } from 'react'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useFormContext, useFormState, type FieldValues } from 'react-hook-form'
+import { useStore } from '../store/SuperForm.store'
+import { useApiURL } from '../config/ApiConfig'
+import { getNestedValue } from '../utils/getNestedValue'
+import { fetchClient, type FetchResponse, FetchError } from '../utils/fetchClient'
+import type { GridRef } from '../types'
+
+const useRemote = <T extends FieldValues>(gridRef?: MutableRefObject<GridRef<any> | null>) => {
+  // Component store State
+  const { onResetForm, remote, request, useMutationOptions, useQueryOptions, value } = useStore(
+    (state) => ({
+      onResetForm: state.onResetForm,
+      remote: state.remote,
+      request: state.request,
+      useMutationOptions: state.useMutationOptions,
+      useQueryOptions: state.useQueryOptions,
+      value: state.value,
+    })
+  )
+
+  // Component Hooks
+  const form = useFormContext<T>()
+  const { isDirty } = useFormState({ control: form.control })
+
+  // Component use Effects
+  const qc = useQueryClient()
+
+  // Get API URL from context or override
+  const contextApiURL = useApiURL()
+
+  const id = remote?.primaryKey?.includes('.')
+    ? getNestedValue(remote?.primaryKey, value)
+    : value?.[remote?.primaryKey ?? '']
+
+  const queryKey = useQueryOptions?.queryKey || [remote?.tableName, id]
+
+  const enabled =
+    useQueryOptions?.enabled ||
+    !!(
+      (remote?.enabled ?? true) &&
+      (remote?.tableName ?? '').length > 0 &&
+      (request === 'change' || request === 'delete') &&
+      String(id) !== 'undefined' &&
+      (String(id)?.length ?? 0) > 0
+    )
+
+  let url = remote?.apiURL ?? `${contextApiURL}/${remote?.tableName}`
+  url = url?.endsWith('/') ? url.substring(0, url.length - 1) : url
+
+  const { isSuccess, status, data, isFetching } = useQuery<FetchResponse<T>>({
+    queryKey,
+    queryFn: () => fetchClient.get<T>(`${url}/${id}`, remote?.apiOptions),
+    enabled,
+    refetchOnMount: 'always',
+    refetchOnReconnect: !isDirty,
+    refetchOnWindowFocus: !isDirty,
+    staleTime: 0,
+    gcTime: 0,
+    ...useQueryOptions,
+  })
+
+  const changeMut = useMutation({
+    // @ts-ignore
+    mutationFn: (mutVal: T) => {
+      if (!remote?.tableName || !remote?.primaryKey) {
+        return Promise.resolve(null)
+      }
+
+      return request === 'insert'
+        ? fetchClient.post(url, mutVal, remote?.apiOptions)
+        : request === 'change'
+          ? fetchClient.post(`${url}/${id}`, mutVal, remote?.apiOptions)
+          : request === 'delete'
+            ? fetchClient.delete(`${url}/${id}`, remote?.apiOptions)
+            : Promise.resolve(null)
+    },
+    onSettled: (response: FetchResponse | null) => {
+      qc?.invalidateQueries({ queryKey: [remote?.tableName] })
+
+      if (request !== 'delete' && response) {
+        if (onResetForm) {
+          onResetForm(response?.data, form).then(() => {
+            form.reset(response?.data, { keepDirty: false })
+          })
+        } else {
+          form.reset(response?.data, { keepDirty: false })
+        }
+      }
+
+      gridRef?.current?.refresh?.()
+      // @ts-ignore
+      gridRef?.current?.selectRow?.(response?.data?.[remote?.primaryKey ?? ''])
+    },
+    ...useMutationOptions,
+  })
+
+  useEffect(() => {
+    if (isSuccess && status === 'success' && enabled && !isFetching) {
+      if (!Object.keys(data?.data ?? {}).includes(remote?.primaryKey ?? '')) {
+        throw new Error('Primary key not found in remote data')
+      }
+
+      if (onResetForm) {
+        onResetForm(data?.data, form).then((resetData) => {
+          form.reset(resetData)
+        })
+      } else {
+        form.reset(data?.data)
+      }
+    }
+  }, [isSuccess, status, enabled, isFetching])
+
+  return {
+    error: changeMut.error as FetchError,
+    isFetching: (enabled ? isFetching : false) || changeMut?.isPending,
+    mutateAsync: changeMut.mutateAsync,
+    queryKey,
+  }
+}
+
+export default useRemote

src/Form/store/FormLayout.store.tsx

@@ -0,0 +1,48 @@
+import React, { createContext, useContext, type ReactNode } from 'react'
+import { create } from 'zustand'
+import type { RequestType } from '../types'
+
+interface FormLayoutState {
+  request: RequestType
+  loading: boolean
+  dirty: boolean
+  onCancel?: () => void
+  onSubmit?: () => void
+  setState: (key: string, value: any) => void
+}
+
+const createFormLayoutStore = (initialProps: any) =>
+  create<FormLayoutState>((set) => ({
+    request: initialProps.request || 'insert',
+    loading: initialProps.loading || false,
+    dirty: initialProps.dirty || false,
+    onCancel: initialProps.onCancel,
+    onSubmit: initialProps.onSubmit,
+    setState: (key, value) => set({ [key]: value }),
+  }))
+
+const FormLayoutStoreContext = createContext<ReturnType<typeof createFormLayoutStore> | null>(null)
+
+export const FormLayoutStoreProvider: React.FC<{ children: ReactNode; [key: string]: any }> = ({
+  children,
+  ...props
+}) => {
+  const storeRef = React.useRef<ReturnType<typeof createFormLayoutStore>>()
+  if (!storeRef.current) {
+    storeRef.current = createFormLayoutStore(props)
+  }
+
+  return (
+    <FormLayoutStoreContext.Provider value={storeRef.current}>
+      {children}
+    </FormLayoutStoreContext.Provider>
+  )
+}
+
+export const useFormLayoutStore = <T,>(selector: (state: FormLayoutState) => T): T => {
+  const store = useContext(FormLayoutStoreContext)
+  if (!store) {
+    throw new Error('useFormLayoutStore must be used within FormLayoutStoreProvider')
+  }
+  return store(selector)
+}

src/Form/store/SuperForm.store.tsx

@@ -0,0 +1,22 @@
+import type { SuperFormProviderProps } from '../types'
+import { createSyncStore } from '@warkypublic/zustandsyncstore'
+
+const { Provider, useStore } = createSyncStore<any, SuperFormProviderProps>((set) => ({
+  request: 'insert',
+  setRequest: (request) => {
+    set({ request })
+  },
+
+  value: undefined,
+  setValue: (value) => {
+    set({ value })
+  },
+
+  noCloseOnSubmit: false,
+  setNoCloseOnSubmit: (noCloseOnSubmit) => {
+    set({ noCloseOnSubmit })
+  },
+}))
+
+export { Provider, useStore }
+export const useSuperFormStore = useStore

src/Form/styles/Form.module.css

@@ -0,0 +1,10 @@
+.disabled {
+  pointer-events: none;
+  opacity: 0.9;
+}
+
+.sticky {
+  position: -webkit-sticky;
+  position: sticky;
+  bottom: 0;
+}

src/Form/types/form.types.ts

@@ -0,0 +1,135 @@
+import type { UseMutationOptions, UseMutationResult, UseQueryOptions } from '@tanstack/react-query'
+import type { FieldValues, UseFormProps, UseFormReturn, UseFormStateReturn } from 'react-hook-form'
+import type { ModalProps, PaperProps, PopoverProps, DrawerProps } from '@mantine/core'
+import type { RemoteConfig } from './remote.types'
+
+export type RequestType = 'insert' | 'change' | 'view' | 'select' | 'delete' | 'get' | 'set'
+
+// Grid integration types (simplified - removes BTGlideRef dependency)
+export interface GridRef<T = any> {
+  refresh?: () => void
+  selectRow?: (id: any) => void
+}
+
+export interface FormSectionBodyProps {
+  // Add properties as needed from original FormLayout
+  [key: string]: any
+}
+
+export interface FormSectionFooterProps {
+  // Add properties as needed from original FormLayout
+  [key: string]: any
+}
+
+export interface BodyRightSection<T extends FieldValues> {
+  opened?: boolean
+  setOpened?: (opened: boolean) => void
+  w: number | string
+  hideToggleButton?: boolean
+  paperProps?: PaperProps
+  render: (props: {
+    form: UseFormReturn<any, any, undefined>
+    formValue: T
+    isFetching: boolean
+    opened: boolean
+    queryKey: any
+    setOpened: (opened: boolean) => void
+  }) => React.ReactNode
+}
+
+export interface SuperFormLayoutProps<T extends FieldValues> {
+  buttonTitles?: { submit?: string; cancel?: string }
+  extraButtons?: React.ReactNode | ((form: UseFormReturn<any, any, undefined>) => React.ReactNode)
+  noFooter?: boolean
+  noHeader?: boolean
+  noLayout?: boolean
+  bodySectionProps?: Partial<FormSectionBodyProps>
+  footerSectionProps?:
+    | Partial<FormSectionFooterProps>
+    | ((ref: React.RefObject<SuperFormRef<T>>) => Partial<FormSectionFooterProps>)
+  rightSection?: React.ReactNode
+  bodyRightSection?: BodyRightSection<T>
+  title?: string
+  showErrorList?: boolean
+}
+
+export interface CommonFormProps<T extends FieldValues> {
+  gridRef?: React.MutableRefObject<GridRef<any> | null>
+  layoutProps?: SuperFormLayoutProps<T>
+  meta?: { [key: string]: any }
+  nested?: boolean
+  onCancel?: (request: RequestType) => void
+  onLayoutMounted?: () => void
+  onLayoutUnMounted?: () => void
+  onResetForm?: (data: T, form?: UseFormReturn<any, any, undefined>) => Promise<T>
+  onBeforeSubmit?: (
+    data: T,
+    request: RequestType,
+    form?: UseFormReturn<any, any, undefined>
+  ) => Promise<T>
+  onSubmit?: (
+    data: T,
+    request: RequestType,
+    formData?: T,
+    form?: UseFormReturn<any, any, undefined>,
+    closeForm?: boolean
+  ) => void
+  primeData?: any
+  readonly?: boolean
+  remote?: RemoteConfig
+  request: RequestType
+  persist?: boolean | { storageKey?: string }
+  useMutationOptions?: UseMutationOptions<any, Error, T, unknown>
+  useQueryOptions?: Partial<UseQueryOptions<any, Error, T>>
+  value?: T | null
+}
+
+export interface SuperFormProps<T extends FieldValues> extends CommonFormProps<T> {
+  children: React.ReactNode | ((props: UseFormReturn<T, any, undefined>) => React.ReactNode)
+  useFormProps?: UseFormProps<T>
+}
+
+export interface SuperFormProviderProps extends Omit<SuperFormProps<any>, 'children'> {
+  children?: React.ReactNode
+}
+
+export interface SuperFormModalProps<T extends FieldValues> extends SuperFormProps<T> {
+  modalProps: ModalProps
+  noCloseOnSubmit?: boolean
+}
+
+export interface SuperFormPopoverProps<T extends FieldValues> extends SuperFormProps<T> {
+  popoverProps?: Omit<PopoverProps, 'children'>
+  target: any
+  noCloseOnSubmit?: boolean
+}
+
+export interface ExtendedDrawerProps extends DrawerProps {
+  // Add any extended drawer props needed
+  [key: string]: any
+}
+
+export interface SuperFormDrawerProps<T extends FieldValues> extends SuperFormProps<T> {
+  drawerProps: ExtendedDrawerProps
+  noCloseOnSubmit?: boolean
+}
+
+export interface SuperFormRef<T extends FieldValues> {
+  form: UseFormReturn<T, any, undefined>
+  mutation: Partial<UseMutationResult<any, Error, any, unknown>>
+  submit: (closeForm?: boolean, afterSubmit?: (data: T | any) => void) => Promise<void>
+  queryKey?: any
+  getFormState: () => UseFormStateReturn<T>
+}
+
+export interface SuperFormDrawerRef<T extends FieldValues> extends SuperFormRef<T> {
+  drawer: HTMLDivElement | null
+}
+
+export interface SuperFormModalRef<T extends FieldValues> extends SuperFormRef<T> {
+  modal: HTMLDivElement | null
+}
+
+export interface SuperFormPopoverRef<T extends FieldValues> extends SuperFormRef<T> {
+  popover: HTMLDivElement | null
+}

src/Form/types/index.ts

@@ -0,0 +1,2 @@
+export * from './form.types'
+export * from './remote.types'

src/Form/types/remote.types.ts

@@ -0,0 +1,11 @@
+export interface RemoteConfig {
+  apiOptions?: RequestInit
+  apiURL?: string
+  enabled?: boolean
+  fetchSize?: number
+  hotFields?: string[]
+  primaryKey?: string
+  sqlFilter?: string
+  tableName: string
+  uniqueKeys?: string[]
+}

src/Form/utils/fetchClient.ts

@@ -0,0 +1,161 @@
+export interface FetchOptions extends RequestInit {
+  params?: Record<string, any>
+  timeout?: number
+}
+
+export interface FetchResponse<T = any> {
+  data: T
+  status: number
+  statusText: string
+  ok: boolean
+  error?: string
+}
+
+export class FetchError extends Error {
+  constructor(
+    public message: string,
+    public status?: number,
+    public response?: any
+  ) {
+    super(message)
+    this.name = 'FetchError'
+  }
+}
+
+/**
+ * Fetch wrapper with timeout support and axios-like interface
+ */
+async function fetchWithTimeout(
+  url: string,
+  options: FetchOptions = {}
+): Promise<Response> {
+  const { timeout = 30000, ...fetchOptions } = options
+
+  const controller = new AbortController()
+  const timeoutId = setTimeout(() => controller.abort(), timeout)
+
+  try {
+    const response = await fetch(url, {
+      ...fetchOptions,
+      signal: controller.signal,
+    })
+    clearTimeout(timeoutId)
+    return response
+  } catch (error) {
+    clearTimeout(timeoutId)
+    throw error
+  }
+}
+
+/**
+ * GET request
+ */
+export async function get<T = any>(
+  url: string,
+  options?: FetchOptions
+): Promise<FetchResponse<T>> {
+  try {
+    const response = await fetchWithTimeout(url, {
+      ...options,
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        ...options?.headers,
+      },
+    })
+
+    const data = await response.json()
+
+    return {
+      data,
+      status: response.status,
+      statusText: response.statusText,
+      ok: response.ok,
+      error: response.ok ? undefined : data?.message || data?.error || response.statusText,
+    }
+  } catch (error) {
+    throw new FetchError(
+      error instanceof Error ? error.message : 'Network request failed',
+      undefined,
+      error
+    )
+  }
+}
+
+/**
+ * POST request
+ */
+export async function post<T = any>(
+  url: string,
+  data?: any,
+  options?: FetchOptions
+): Promise<FetchResponse<T>> {
+  try {
+    const response = await fetchWithTimeout(url, {
+      ...options,
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        ...options?.headers,
+      },
+      body: JSON.stringify(data),
+    })
+
+    const responseData = await response.json()
+
+    return {
+      data: responseData,
+      status: response.status,
+      statusText: response.statusText,
+      ok: response.ok,
+      error: response.ok ? undefined : responseData?.message || responseData?.error || response.statusText,
+    }
+  } catch (error) {
+    throw new FetchError(
+      error instanceof Error ? error.message : 'Network request failed',
+      undefined,
+      error
+    )
+  }
+}
+
+/**
+ * DELETE request
+ */
+export async function del<T = any>(
+  url: string,
+  options?: FetchOptions
+): Promise<FetchResponse<T>> {
+  try {
+    const response = await fetchWithTimeout(url, {
+      ...options,
+      method: 'DELETE',
+      headers: {
+        'Content-Type': 'application/json',
+        ...options?.headers,
+      },
+    })
+
+    const data = await response.json().catch(() => ({}))
+
+    return {
+      data,
+      status: response.status,
+      statusText: response.statusText,
+      ok: response.ok,
+      error: response.ok ? undefined : data?.message || data?.error || response.statusText,
+    }
+  } catch (error) {
+    throw new FetchError(
+      error instanceof Error ? error.message : 'Network request failed',
+      undefined,
+      error
+    )
+  }
+}
+
+export const fetchClient = {
+  get,
+  post,
+  delete: del,
+}

src/Form/utils/getNestedValue.ts

@@ -0,0 +1,9 @@
+/**
+ * Retrieves a nested value from an object using dot notation path
+ * @param path - Dot-separated path (e.g., "user.address.city")
+ * @param obj - Object to extract value from
+ * @returns The value at the specified path, or undefined if not found
+ */
+export const getNestedValue = (path: string, obj: any): any => {
+  return path.split('.').reduce((prev, curr) => prev?.[curr], obj)
+}

src/Form/utils/openConfirmModal.ts

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Stack, Text } from '@mantine/core'
+import { modals } from '@mantine/modals'
+
+export const openConfirmModal = (
+  onConfirm: () => void,
+  onCancel?: (() => void) | null,
+  description?: string | null
+) =>
+  modals.openConfirmModal({
+    size: 'xs',
+    children: (
+      <Stack gap={4}>
+        <Text size='xs' c={description ? 'blue' : 'red'} fw='bold'>
+          You have unsaved changes in this form.
+        </Text>
+        <Text size='xs'>
+          {description ??
+            'Closing now will discard any modifications you have made. Are you sure you want to continue?'}
+        </Text>
+      </Stack>
+    ),
+    labels: { confirm: description ? 'Restore' : 'Confirm', cancel: 'Cancel' },
+    confirmProps: { color: description ? 'blue' : 'red', size: 'compact-xs' },
+    cancelProps: { size: 'compact-xs' },
+    groupProps: { gap: 'xs' },
+    withCloseButton: false,
+    onConfirm,
+    onCancel,
+  })

src/Former/Former.store.tsx

@@ -0,0 +1,188 @@
+import { createSyncStore } from '@warkypublic/zustandsyncstore';
+import { produce } from 'immer';
+
+import type { FormerProps, FormerState } from './Former.types';
+
+const { Provider: FormerProvider, useStore: useFormerStore } = createSyncStore<
+  FormerState<any> & Partial<FormerProps<any>>,
+  FormerProps<any>
+>(
+  (set, get) => ({
+    getState: (key) => {
+      const current = get();
+      return current?.[key];
+    },
+    load: async (reset?: boolean) => {
+      try {
+        set({ loading: true });
+        const keyName = get()?.apiKeyField || 'id';
+        const keyValue = (get().values as any)?.[keyName] ?? (get().primeData as any)?.[keyName];
+        if (get().onAPICall && keyValue !== undefined) {
+          let data = await get().onAPICall!(
+            'read',
+            get().request || 'insert',
+            get().values,
+            keyValue
+          );
+          if (get().afterGet) {
+            data = await get().afterGet!({ ...data });
+          }
+          set({ loading: false, values: data });
+          get().onChange?.(data);
+        }
+        if (reset && get().getFormMethods) {
+          const formMethods = get().getFormMethods!();
+          formMethods.reset();
+        }
+      } catch (e) {
+        set({ error: (e as Error)?.message ?? e, loading: false });
+      }
+      set({ loading: false });
+    },
+
+    onChange: (values) => {
+      set({ values });
+    },
+    request: 'insert',
+    reset: async () => {
+      const state = get();
+      if (state.getFormMethods) {
+        if (state.request !== 'insert') {
+          await state.load(true);
+        }
+
+        const formMethods = state.getFormMethods!();
+        formMethods.reset({ ...state.values, ...state.primeData });
+      }
+    },
+    save: async (e?: React.BaseSyntheticEvent<object, any, any> | undefined) => {
+      try {
+        const keepOpen = get().keepOpen ?? false;
+        set({ loading: true });
+        if (get().getFormMethods) {
+          const formMethods = get().getFormMethods!();
+
+          let data = formMethods.getValues();
+
+          if (get().beforeSave) {
+            const newData = await get().beforeSave!(data);
+            data = newData;
+          }
+
+          let exit = false;
+          const handler = formMethods.handleSubmit(
+            (newdata) => {
+              data = newdata;
+            },
+            (errors) => {
+              set({ error: errors.root?.message || 'Validation errors', loading: false });
+              exit = true;
+            }
+          );
+
+          await handler(e);
+
+          //console.log('Former.store.tsx save called', success, e, data, get().getFormMethods);
+          if (exit) {
+            set({ loading: false });
+            return undefined;
+          }
+
+          if (get().request === 'delete' && !get().deleteConfirmed) {
+            const confirmed = (await get().onConfirmDelete?.(data)) ?? false;
+            if (!confirmed) {
+              set({ loading: false });
+              return undefined;
+            }
+          }
+
+          if (get().onAPICall) {
+            const keyName = get()?.apiKeyField || 'id';
+            const keyValue =
+              (get().values as any)?.[keyName] ?? (get().primeData as any)?.[keyName];
+            const savedData = await get().onAPICall!(
+              'mutate',
+              get().request || 'insert',
+              data,
+              keyValue
+            );
+            if (get().afterSave) {
+              await get().afterSave!(savedData);
+            }
+            set({ loading: false, values: savedData });
+            get().onChange?.(savedData);
+            if (!keepOpen) {
+              get().onClose?.(savedData);
+            }
+            return savedData;
+          }
+
+          set({ loading: false, values: data });
+          get().onChange?.(data);
+          if (!keepOpen) {
+            get().onClose?.(data);
+          }
+
+          return data;
+        }
+      } catch (e) {
+        set({ error: (e as Error)?.message ?? e, loading: false });
+      }
+
+      return undefined;
+    },
+    setRequest: (request) => {
+      set({ request });
+    },
+    setState: (key, value) => {
+      set(
+        produce((state) => {
+          state[key] = value;
+        })
+      );
+    },
+    setStateFN: (key, value) => {
+      const p = new Promise<void>((resolve, reject) => {
+        set(
+          produce((state) => {
+            if (typeof value === 'function') {
+              state[key] = (value as (value: unknown) => unknown)(state[key]);
+            } else {
+              reject(new Error(`Not a function ${value}`));
+              throw Error(`Not a function ${value}`);
+            }
+          })
+        );
+        resolve();
+      });
+
+      return p;
+    },
+    validate: async () => {
+      if (get().getFormMethods) {
+        const formMethods = get().getFormMethods!();
+        const isValid = await formMethods.trigger();
+        return isValid;
+      }
+      return true;
+    },
+    values: undefined,
+  }),
+  ({ onConfirmDelete, primeData, request, values }) => {
+    let _onConfirmDelete = onConfirmDelete;
+    if (!onConfirmDelete) {
+      _onConfirmDelete = async () => {
+        return confirm('Are you sure you want to delete this item?');
+      };
+    }
+    return {
+      onConfirmDelete: _onConfirmDelete,
+      primeData,
+      request: request || 'insert',
+      values: { ...primeData, ...values },
+    };
+  }
+);
+
+export { FormerProvider };
+export { useFormerStore };

src/Former/Former.tsx

@@ -0,0 +1,115 @@
+import { forwardRef, type PropsWithChildren, useEffect, useImperativeHandle } from 'react';
+import { type FieldValues, FormProvider, useForm } from 'react-hook-form';
+
+import type { FormerProps, FormerRef } from './Former.types';
+
+import { FormerProvider, useFormerStore } from './Former.store';
+import { FormerLayout } from './FormerLayout';
+
+const FormerInner = forwardRef<FormerRef<any>, Partial<FormerProps<any>> & PropsWithChildren>(
+  function FormerInner<T extends FieldValues>(
+    props: Partial<FormerProps<T>> & PropsWithChildren<T>,
+    ref: any
+  ) {
+    const {
+      getState,
+      onChange,
+      onClose,
+      onOpen,
+      opened,
+      primeData,
+      reset,
+      save,
+      setState,
+      useFormProps,
+      validate,
+      values,
+      wrapper,
+    } = useFormerStore((state) => ({
+      getState: state.getState,
+      onChange: state.onChange,
+      onClose: state.onClose,
+      onOpen: state.onOpen,
+      opened: state.opened,
+      primeData: state.primeData,
+      reset: state.reset,
+      save: state.save,
+      setState: state.setState,
+      useFormProps: state.useFormProps,
+      validate: state.validate,
+      values: state.values,
+      wrapper: state.wrapper,
+    }));
+
+    const formMethods = useForm<T>({
+      defaultValues: primeData,
+      mode: 'all',
+      shouldUseNativeValidation: true,
+      values: values,
+      ...useFormProps,
+    });
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        close: async () => {
+          //console.log('close called');
+          onClose?.();
+          setState('opened', false);
+        },
+        getValue: () => {
+          return getState('values');
+        },
+        reset: () => {
+          reset();
+        },
+        save: async () => {
+          return await save();
+        },
+        setValue: (value: T) => {
+          onChange?.(value);
+        },
+        show: async () => {
+          //console.log('show called');
+          setState('opened', true);
+          onOpen?.();
+        },
+        validate: async () => {
+          return await validate();
+        },
+      }),
+      [getState, onChange]
+    );
+
+    useEffect(() => {
+      setState('getFormMethods', () => formMethods);
+    }, [formMethods]);
+
+    return (
+      <FormProvider {...formMethods}>
+        {typeof wrapper === 'function' ? (
+          wrapper(<FormerLayout>{props.children}</FormerLayout>, opened, onClose, onOpen, getState)
+        ) : (
+          <FormerLayout>{props.children || null}</FormerLayout>
+        )}
+      </FormProvider>
+    );
+  }
+);
+
+export const Former = forwardRef<FormerRef<any>, FormerProps<any> & PropsWithChildren>(
+  function Former<T extends FieldValues = any>(
+    props: FormerProps<T> & PropsWithChildren<T>,
+    ref: any
+  ) {
+    //if opened is false and wrapper is defined as function, do not render anything
+    if (!props.opened && typeof props.wrapper === 'function') {
+      return null;
+    }
+    return (
+      <FormerProvider {...props}>
+        <FormerInner ref={ref}>{props.children}</FormerInner>
+      </FormerProvider>
+    );
+  }
+);

src/Former/Former.types.ts

@@ -0,0 +1,73 @@
+import type { LoadingOverlayProps, ScrollAreaAutosizeProps } from '@mantine/core';
+import type { FieldValues, UseFormProps, UseFormReturn } from 'react-hook-form';
+
+export interface FormerProps<T extends FieldValues = any> {
+  afterGet?: (data: T) => Promise<T> | void;
+  afterSave?: (data: T) => Promise<void> | void;
+  apiKeyField?: string;
+  beforeSave?: (data: T) => Promise<T> | T;
+  disableHTMlForm?: boolean;
+  keepOpen?: boolean;
+  onAPICall?: (
+    mode: 'mutate' | 'read',
+    request: RequestType,
+    value?: T,
+    key?: number | string
+  ) => Promise<T>;
+  onCancel?: () => void;
+  onChange?: (value: T) => void;
+  onClose?: (data?: T) => void;
+  onConfirmDelete?: (values?: T) => Promise<boolean>;
+  onOpen?: (data?: T) => void;
+
+  opened?: boolean;
+  primeData?: T;
+  request: RequestType;
+  useFormProps?: UseFormProps<T>;
+  values?: T;
+  wrapper?: (
+    children: React.ReactNode,
+    opened: boolean | undefined,
+    onClose: ((data?: T) => void) | undefined,
+    onOpen: ((data?: T) => void) | undefined,
+    getState: <K extends keyof FormStateAndProps<T>>(key: K) => FormStateAndProps<T>[K]
+  ) => React.ReactNode;
+}
+
+export interface FormerRef<T extends FieldValues = any> {
+  close: () => Promise<void>;
+  getValue: () => T | undefined;
+  reset: () => void;
+  save: () => Promise<T | undefined>;
+  setValue: (value: T) => void;
+  show: () => Promise<void>;
+  validate: () => Promise<boolean>;
+}
+
+export interface FormerState<T extends FieldValues = any> {
+  deleteConfirmed?: boolean;
+  error?: string;
+  getFormMethods?: () => UseFormReturn<any, any>;
+  getState: <K extends keyof FormStateAndProps<T>>(key: K) => FormStateAndProps<T>[K];
+  load: (reset?: boolean) => Promise<void>;
+  loading?: boolean;
+  loadingOverlayProps?: LoadingOverlayProps;
+  reset: (e?: React.BaseSyntheticEvent<object, any, any> | undefined) => Promise<void>;
+  save: (e?: React.BaseSyntheticEvent<object, any, any> | undefined) => Promise<T | undefined>;
+  scrollAreaProps?: ScrollAreaAutosizeProps;
+  setRequest: (request: RequestType) => void;
+  setState: <K extends keyof FormStateAndProps<T>>(
+    key: K,
+    value: Partial<FormStateAndProps<T>>[K]
+  ) => void;
+  setStateFN: <K extends keyof FormStateAndProps<T>>(
+    key: K,
+    value: (current: FormStateAndProps<T>[K]) => Partial<FormStateAndProps<T>[K]>
+  ) => Promise<void>;
+  validate: () => Promise<boolean>;
+}
+
+export type FormStateAndProps<T extends FieldValues = any> = FormerProps<T> &
+  Partial<FormerState<T>>;
+
+export type RequestType = 'delete' | 'insert' | 'select' | 'update' | 'view';

src/Former/FormerLayout.tsx

@@ -0,0 +1,93 @@
+import { LoadingOverlay, ScrollAreaAutosize } from '@mantine/core';
+import { type PropsWithChildren, useEffect } from 'react';
+
+import { useFormerStore } from './Former.store';
+
+export const FormerLayout = (props: PropsWithChildren) => {
+  const {
+    disableHTMlForm,
+    getFormMethods,
+    load,
+    loading,
+    loadingOverlayProps,
+    request,
+    reset,
+    save,
+    scrollAreaProps,
+  } = useFormerStore((state) => ({
+    disableHTMlForm: state.disableHTMlForm,
+    getFormMethods: state.getFormMethods,
+    load: state.load,
+    loading: state.loading,
+    loadingOverlayProps: state.loadingOverlayProps,
+    request: state.request,
+    reset: state.reset,
+    save: state.save,
+    scrollAreaProps: state.scrollAreaProps,
+  }));
+
+  useEffect(() => {
+    if (getFormMethods) {
+      const formMethods = getFormMethods();
+      if (formMethods && request !== 'insert') {
+        load(true);
+      }
+    }
+  }, [getFormMethods, request]);
+
+  if (disableHTMlForm) {
+    return (
+      <ScrollAreaAutosize
+        offsetScrollbars
+        scrollbarSize={4}
+        type="auto"
+        {...scrollAreaProps}
+        style={{
+          height: '100%',
+          maxHeight: '89vh',
+          padding: '0.25rem',
+          width: '100%',
+          ...scrollAreaProps?.style,
+        }}
+      >
+        {props.children}
+        <LoadingOverlay
+          loaderProps={{ type: 'bars' }}
+          overlayProps={{
+            backgroundOpacity: 0.5,
+          }}
+          {...loadingOverlayProps}
+          visible={loading}
+        />
+      </ScrollAreaAutosize>
+    );
+  }
+
+  return (
+    <ScrollAreaAutosize
+      offsetScrollbars
+      scrollbarSize={4}
+      type="auto"
+      {...scrollAreaProps}
+      style={{
+        height: '100%',
+        maxHeight: '89vh',
+        padding: '0.25rem',
+        width: '100%',
+        ...scrollAreaProps?.style,
+      }}
+    >
+      <form onReset={(e) => reset(e)} onSubmit={(e) => save(e)}>
+        {props.children}
+        <LoadingOverlay
+          loaderProps={{ type: 'bars' }}
+          overlayProps={{
+            backgroundOpacity: 0.5,
+          }}
+          {...loadingOverlayProps}
+          visible={loading}
+        />
+      </form>
+    </ScrollAreaAutosize>
+  );
+};

src/Former/stories/Gridler.goapi.stories.tsx

@@ -0,0 +1,42 @@
+//@ts-nocheck
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Box } from '@mantine/core';
+import { fn } from 'storybook/test';
+
+import { FormTest } from './example';
+
+const Renderable = (props: any) => {
+  return (
+    <Box h="100%" mih="400px" miw="400px" w="100%">
+      <FormTest {...props} />
+    </Box>
+  );
+};
+
+const meta = {
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: { onClick: fn() },
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  component: Renderable,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    //layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  title: 'Former/Former Basic',
+} satisfies Meta<typeof Renderable>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const BasicExample: Story = {
+  args: {
+    label: 'Test',
+  },
+};

src/Former/stories/example.tsx

@@ -0,0 +1,118 @@
+import { Button, Drawer, Group, Paper, Select, Stack, Switch } from '@mantine/core';
+import { useRef, useState } from 'react';
+import { Controller } from 'react-hook-form';
+
+import type { FormerRef } from '../Former.types';
+
+import { Former } from '../Former';
+
+export const FormTest = () => {
+  const [request, setRequest] = useState<null | string>('insert');
+  const [wrapped, setWrapped] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [formData, setFormData] = useState({ a: 99 });
+  console.log('formData', formData);
+
+  const ref = useRef<FormerRef>(null);
+  return (
+    <Stack h="100%" mih="400px" w="90%">
+      <Select
+        data={['insert', 'update', 'delete', 'select', 'view']}
+        onChange={setRequest}
+        value={request}
+      />
+      <Switch
+        checked={wrapped}
+        label="Wrapped in Drawer"
+        onChange={(event) => setWrapped(event.currentTarget.checked)}
+      />
+      <Button onClick={() => setOpen(true)}>Open Former Drawer</Button>
+      <Group>
+        <Button
+          onClick={async () => {
+            const valid = await ref.current?.validate();
+            console.log('validate -> ', valid, ref.current);
+          }}
+        >
+          Test Ref Values. See console
+        </Button>
+        <Button
+          onClick={async () => {
+            setTimeout(() => {
+              ref.current?.close?.();
+            }, 3000);
+          }}
+        >
+          Test Show/Hide
+        </Button>
+      </Group>
+      <Former
+        //wrapper={(children, getState) => <div>{children}</div>}
+        //opened={true}
+        apiKeyField="a"
+        onAPICall={(mode, request, value) => {
+          console.log('API Call', mode, request, value);
+          if (mode === 'read') {
+            return new Promise((resolve) => {
+              setTimeout(() => {
+                resolve({ a: 'Another Value', test: 'Loaded Value' });
+              }, 1000);
+            });
+          }
+          return new Promise((resolve) => {
+            setTimeout(() => {
+              resolve(value || {});
+            }, 1000);
+          });
+        }}
+        onChange={setFormData}
+        onClose={() => setOpen(false)}
+        opened={open}
+        primeData={{ a: '66', test: 'primed' }}
+        ref={ref}
+        request={request as any}
+        useFormProps={{ criteriaMode: 'all', shouldUseNativeValidation: false }}
+        values={formData}
+        wrapper={
+          wrapped
+            ? (children, opened, onClose, onOpen, getState) => {
+                const values = getState('values');
+                return (
+                  <Drawer
+                    h={'100%'}
+                    onClose={() => onClose?.()}
+                    opened={opened ?? false}
+                    title={`Drawer Former - Current A Value: ${values?.a}`}
+                    w={'50%'}
+                  >
+                    <Paper h="100%" shadow="sm" w="100%" withBorder>
+                      {children}
+                      <Button>Test Save</Button>
+                    </Paper>
+                  </Drawer>
+                );
+              }
+            : undefined
+        }
+      >
+        <Stack h="1200px">
+          <Stack>
+            <Controller
+              name="test"
+              render={({ field }) => <input type="text" {...field} placeholder="A" />}
+            />
+            <Controller
+              name="a"
+              render={({ field }) => <input type="text" {...field} placeholder="B" />}
+              rules={{ required: 'Field is required' }}
+            />
+          </Stack>
+          <Stack>
+            <button type="submit">Submit</button>
+            <button type="reset">Reset</button>
+          </Stack>
+        </Stack>
+      </Former>
+    </Stack>
+  );
+};

src/Former/todo.md

@@ -0,0 +1,11 @@
+- [ ] Headerspec API
+- [ ] Relspec API
+- [ ] SocketSpec API
+- [ ] Layout Tool
+  - [ ] Header Section
+  - [ ] Button Section
+  - [ ] Footer Section
+- [ ] Different Loaded for saving vs loading
+- [ ] Better Confirm Dialog
+- [ ] Reset Confirm Dialog
+- [ ] Request insert and save but keep open (must clear key from API, also add callback)

src/Gridler/Gridler.module.css

@@ -3,11 +3,7 @@
     1px 0 0 #00000030,
     0 1px 0 #00000030,
     -1px 0 0 #00000030;
-  display: flex;
+
-  min-height: 40px;
-  min-width: 40px;
-  height: 100%;
-  width: 100%;
   
   &[data-focused='true'] {
     box-shadow:

src/Gridler/Gridler.tsx

@@ -1,12 +1,14 @@
 import '@glideapps/glide-data-grid/dist/index.css';
+import React, { type Ref } from 'react';
 
 import { MantineBetterMenusProvider } from '../MantineBetterMenu';
 import { GlidlerFormAdaptor } from './components/adaptors/GlidlerFormAdaptor';
 import { GlidlerLocalDataAdaptor } from './components/adaptors/GlidlerLocalDataAdaptor';
-import { type GridlerProps, Provider } from './components/GridlerStore';
+import { type GridlerProps, type GridlerRef, Provider } from './components/GridlerStore';
+import { GridlerRefHandler } from './components/RefHandler';
 import { GridlerDataGrid } from './GridlerDataGrid';
 
-const Gridler = (props: GridlerProps) => {
+const _Gridler = (props: GridlerProps, ref: Ref<GridlerRef> | undefined) => {
   return (
     <MantineBetterMenusProvider>
       <Provider
@@ -19,12 +21,20 @@ const Gridler = (props: GridlerProps) => {
         }}
       >
         <GridlerDataGrid />
+        <GridlerRefHandler ref={ref} />
         {props.children}
       </Provider>
     </MantineBetterMenusProvider>
   );
 };
 
+type GridlerComponentType = {
+  FormAdaptor: typeof GlidlerFormAdaptor;
+  LocalDataAdaptor: typeof GlidlerLocalDataAdaptor;
+} & React.ForwardRefExoticComponent<GridlerProps & React.RefAttributes<GridlerRef>>;
+
+const Gridler = React.forwardRef(_Gridler) as GridlerComponentType;
+
 Gridler.FormAdaptor = GlidlerFormAdaptor;
 Gridler.LocalDataAdaptor = GlidlerLocalDataAdaptor;
 

src/Gridler/GridlerDataGrid.tsx

@@ -6,14 +6,14 @@ import {
   type GridColumn,
 } from '@glideapps/glide-data-grid';
 import { Group, Stack } from '@mantine/core';
-import { useMergedRef } from '@mantine/hooks';
+import { useElementSize, useMergedRef } from '@mantine/hooks';
 import React from 'react';
 
 import { BottomBar } from './components/BottomBar';
 import { Computer } from './components/Computer';
 import { useGridlerStore } from './components/GridlerStore';
 import { Pager } from './components/Pager';
-import { RightMenuIcon } from './components/RightMenuIcon';
+import { GridlerRightMenuIcon } from './components/RightMenuIcon';
 import { SortSprite } from './components/sprites/Sort';
 import { SortDownSprite } from './components/sprites/SortDown';
 import { SortUpSprite } from './components/sprites/SortUp';
@@ -24,8 +24,23 @@ export const GridlerDataGrid = () => {
   const ref = React.useRef<DataEditorRef | null>(null);
   const refContextActivated = React.useRef<boolean>(false);
 
+  const { height, ref: refWrapper, width } = useElementSize({ box: 'content-box' });
+  /*
+    const [_dimensions, setDimensions] = useState<{ height: number; width: number } | null>(null);
+  const { height, width } = _dimensions ?? { height: 0, width: 0 };
+
+  useLayoutEffect(() => {
+    // Measure container before rendering grid
+    if (refWrapper.current) {
+      const { height, width } = refWrapper.current.getBoundingClientRect();
+      setDimensions({ height, width });
+    }
+  }, []);
+   */
+
   const {
     _gridSelection,
+    allowMultiSelect,
     focused,
     getCellContent,
     getCellsForSelection,
@@ -35,6 +50,8 @@ export const GridlerDataGrid = () => {
     headerHeight,
     heightProp,
     mounted,
+    onCellActivated,
+    onCellClicked,
     onCellEdited,
     onColumnMoved,
     onColumnProposeMove,
@@ -54,6 +71,7 @@ export const GridlerDataGrid = () => {
     widthProp,
   } = useGridlerStore((s) => ({
     _gridSelection: s._gridSelection,
+    allowMultiSelect: s.allowMultiSelect,
     focused: s.focused,
     getCellContent: s.getCellContent,
     getCellsForSelection: s.getCellsForSelection,
@@ -63,6 +81,8 @@ export const GridlerDataGrid = () => {
     headerHeight: s.headerHeight,
     heightProp: s.height,
     mounted: s.mounted,
+    onCellActivated: s.onCellActivated,
+    onCellClicked: s.onCellClicked,
     onCellEdited: s.onCellEdited,
     onColumnMoved: s.onColumnMoved,
     onColumnProposeMove: s.onColumnProposeMove,
@@ -70,6 +90,7 @@ export const GridlerDataGrid = () => {
     onContextClick: s.onContextClick,
     onHeaderClicked: s.onHeaderClicked,
     onHeaderMenuClick: s.onHeaderMenuClick,
+
     onItemHovered: s.onItemHovered,
     onVisibleRegionChanged: s.onVisibleRegionChanged,
     renderColumns: s.renderColumns,
@@ -86,18 +107,16 @@ export const GridlerDataGrid = () => {
     setStateFN('_glideref', () => {
       return r ?? undefined;
     });
+
+    const ready = getState('ready');
+    const newReady = !!(r && mounted);
+    if (ready !== newReady) {
+      setState('ready', newReady);
+    }
   });
 
   const theme = useGridTheme();
 
-  if (!mounted) {
-    return (
-      <>
-        Loading...
-        <Computer />
-      </>
-    );
-  }
   return (
     <Stack
       align="stretch"
@@ -115,28 +134,57 @@ export const GridlerDataGrid = () => {
           //Yes this is a litle hacky, but it works to prevent double context menu
           if (!refContextActivated.current) {
             refContextActivated.current = true;
-            onContextClick('other', e);
+            onContextClick('other', e as any);
             setTimeout(() => {
               refContextActivated.current = false;
             }, 100);
           }
         }}
+        ref={refWrapper}
+        style={{
+          display: 'flex',
+          height: '100%',
+          minHeight: '64px',
+          minWidth: '32px',
+          width: '100%',
+        }}
       >
         {sections?.left}
+
+        {width && width > 0 && height && height > 0 && (
           <DataEditor
             cellActivationBehavior="double-click"
             //getCelrefMergedlContent={getCellContent}
             columns={(renderColumns as Array<GridColumn>) ?? []}
             columnSelect="none"
             drawFocusRing
+            height={height ?? 400}
+            overscrollX={16}
+            overscrollY={32}
+            rangeSelect={allowMultiSelect ? 'multi-rect' : 'cell'}
+            rightElementProps={{
+              fill: false,
+              sticky: true,
+            }}
+            rowMarkers={{
+              checkboxStyle: 'square',
+              kind: allowMultiSelect ? 'both' : 'clickable-number',
+            }}
+            rowSelect={allowMultiSelect ? 'multi' : 'single'}
+            rowSelectionMode="auto"
+            spanRangeBehavior="default"
+            {...glideProps}
             getCellContent={getCellContent}
             getCellsForSelection={getCellsForSelection}
             getRowThemeOverride={theme.getRowThemeOverride}
             gridSelection={_gridSelection}
             headerHeight={headerHeight ?? 32}
             headerIcons={{ sort: SortSprite, sortdown: SortDownSprite, sortup: SortUpSprite }}
+            onCellActivated={onCellActivated}
+            onCellClicked={onCellClicked}
             onCellContextMenu={(cell, event) => {
               event.preventDefault();
+              glideProps?.onCellContextMenu?.(cell, event);
               if (!refContextActivated.current) {
                 refContextActivated.current = true;
                 onContextClick('cell', event, cell[0], cell[1]);
@@ -152,7 +200,13 @@ export const GridlerDataGrid = () => {
             onGridSelectionChange={(selection) => {
               let rows = CompactSelection.empty();
               const currentSelection = getState('_gridSelection');
+              const keyField = getState('keyField') ?? 'id';
+              const getRowBuffer = getState('getRowBuffer');
               for (const r of selection.rows) {
+                const validRowID = getRowBuffer ? getRowBuffer(r)?.[keyField] : null;
+                if (!validRowID) {
+                  continue;
+                }
                 rows = rows.hasIndex(r) ? rows : rows.add(r);
               }
               if (selectMode === 'row' && selection.current?.range) {
@@ -161,19 +215,32 @@ export const GridlerDataGrid = () => {
                   y < selection.current.range.y + selection.current.range.height;
                   y++
                 ) {
+                  const validRowID = getRowBuffer ? getRowBuffer(y)?.[keyField] : null;
+                  if (!validRowID) {
+                    continue;
+                  }
                   rows = rows.hasIndex(y) ? rows : rows.add(y);
                 }
               }
-
+              if (rows.length === 0) {
+                for (const r of currentSelection?.rows ?? []) {
+                  const validRowID = getRowBuffer ? getRowBuffer(r)?.[keyField] : null;
+                  if (!validRowID) {
+                    continue;
+                  }
+                  rows = rows.hasIndex(r) ? rows : rows.add(r);
+                }
+              }
+              console.log('Debug:onGridSelectionChange', currentSelection, selection);
               if (
                 JSON.stringify(currentSelection?.columns) !== JSON.stringify(selection.columns) ||
                 JSON.stringify(currentSelection?.rows) !== JSON.stringify(rows) ||
                 JSON.stringify(currentSelection?.current) !== JSON.stringify(selection.current)
               ) {
                 setState('_gridSelection', { ...selection, rows });
-              if (JSON.stringify(currentSelection?.rows) !== JSON.stringify(rows)) {
+                //if (JSON.stringify(currentSelection?.rows) !== JSON.stringify(rows)) {
                 setState('_gridSelectionRows', rows);
-              }
+                //}
               }
 
               //console.log('Selection', selection);
@@ -183,7 +250,7 @@ export const GridlerDataGrid = () => {
               event.preventDefault();
               if (!refContextActivated.current) {
                 refContextActivated.current = true;
-              onContextClick('header', event, col);
+                onContextClick('header', event as any, col);
                 setTimeout(() => {
                   refContextActivated.current = false;
                 }, 100);
@@ -192,38 +259,35 @@ export const GridlerDataGrid = () => {
             onHeaderMenuClick={onHeaderMenuClick}
             onItemHovered={onItemHovered}
             onVisibleRegionChanged={onVisibleRegionChanged}
-          rangeSelect="multi-rect"
+            ref={refMerged as React.Ref<DataEditorRef>}
-          ref={refMerged as any}
             rightElement={
+              sections?.rightElementDisabled ? undefined : (
                 <Group>
                   {sections?.rightElementStart}
-              <RightMenuIcon />
+                  <GridlerRightMenuIcon />
                   {sections?.rightElementEnd}
                 </Group>
+              )
             }
             rowHeight={rowHeight ?? 22}
             //rowMarkersCheckboxStyle='square'
             //rowMarkersKind='both'
-          rowMarkers={{
+
-            checkboxStyle: 'square',
-            kind: 'both',
-          }}
             rows={total_rows ?? 0}
-          rowSelect="multi"
-          rowSelectionMode="auto"
-          spanRangeBehavior="default"
             theme={theme.gridTheme}
-          width="100%"
+            width={width ?? 200}
-          {...glideProps}
           />
+        )}
 
         {/* </Portal> */}
         <Computer />
         {!hasLocalData && <Pager />}
         {sections?.right}
       </div>
+      <div style={{ flexGrow: 0 }}>
         <BottomBar />
         {sections?.bottom}
+      </div>
       {/* <Portal> */}
     </Stack>
   );

src/Gridler/components/BottomBar.tsx

@@ -1,3 +1,4 @@
+ 
 import { useGridlerStore } from './GridlerStore';
 
 export function BottomBar() {

src/Gridler/components/Column.tsx

@@ -18,11 +18,12 @@ export interface GridlerColumn extends Partial<BaseGridColumn> {
     colIndx: string,
     value: any,
     storeState: GridlerStoreState
-  ) => GridCellLoose;
+  ) => Partial<GridCellLoose>;
   defaultIcon?: string;
   disableFilter?: boolean;
   disableMove?: boolean;
   disableResize?: boolean;
+  disableSearch?: boolean;
   disableSort?: boolean;
   getMenuItems?: (
     id: string,
@@ -35,6 +36,7 @@ export interface GridlerColumn extends Partial<BaseGridColumn> {
   maxWidth?: number;
   minWidth?: number;
   tooltip?: ((buffer: any, row: number, col: number) => ReactNode) | string;
+  virtual?: boolean;
   width?: number;
 }
 

src/Gridler/components/Computer.tsx

@@ -1,5 +1,5 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 import { CompactSelection } from '@glideapps/glide-data-grid';
+import { useDebouncedCallback } from '@mantine/hooks';
 import React, { useEffect, useRef } from 'react';
 
 import { useGridlerStore } from './GridlerStore';
@@ -7,47 +7,74 @@ import { useGridlerStore } from './GridlerStore';
 //The computer component does not need to be recalculated on every render, so we use React.memo to prevent unnecessary re-renders.
 export const Computer = React.memo(() => {
   const refFirstRun = useRef(0);
-  const refLastFilters = useRef<any>(null);
+  const refLastSearch = useRef('');
+  const refLastFilters = useRef<unknown>(null);
   const {
     _glideref,
     _gridSelectionRows,
-    askAPIRowNumber,
     colFilters,
     colOrder,
     colSize,
     colSort,
     columns,
+    getRowIndexByKey,
     getState,
     loadPage,
+    ready,
 
+    scrollToRowKey,
+    searchStr,
+    selectedRowKey,
     setState,
     setStateFN,
     values,
   } = useGridlerStore((s) => ({
     _glideref: s._glideref,
     _gridSelectionRows: s._gridSelectionRows,
-    askAPIRowNumber: s.askAPIRowNumber,
     colFilters: s.colFilters,
     colOrder: s.colOrder,
     colSize: s.colSize,
     colSort: s.colSort,
     columns: s.columns,
+    getRowIndexByKey: s.getRowIndexByKey,
     getState: s.getState,
     loadPage: s.loadPage,
+    ready: s.ready,
 
+    scrollToRowKey: s.scrollToRowKey,
+    searchStr: s.searchStr,
+    selectedRowKey: s.selectedRowKey,
     setState: s.setState,
     setStateFN: s.setStateFN,
     uniqueid: s.uniqueid,
     values: s.values,
   }));
 
+  const debouncedDoSearch = useDebouncedCallback(
+    (searchStr: string) => {
+      loadPage(0, 'all').then(() => {
+        getState('refreshCells')?.();
+        getState('_events')?.dispatchEvent?.(
+          new CustomEvent('onSearched', {
+            detail: { search: searchStr },
+          })
+        );
+      });
+    },
+    {
+      delay: 300,
+      leading: false,
+    }
+  );
+
+  //When values change, update selection
   useEffect(() => {
     const searchSelection = async () => {
       const page_data = getState('_page_data');
       const pageSize = getState('pageSize');
       const keyField = getState('keyField') ?? 'id';
       const rowIndexes = [];
-      for (const vi in values as Array<any>) {
+      for (const vi in values as Array<Record<string, unknown>>) {
         let rowIndex = -1;
         const key = String(
           typeof values?.[vi] === 'object'
@@ -71,8 +98,8 @@ export const Computer = React.memo(() => {
             break;
           }
         }
-        if (!(rowIndex >= 0) && typeof askAPIRowNumber === 'function') {
+        if (!(rowIndex >= 0)) {
-          const idx = await askAPIRowNumber(key);
+          const idx = await getRowIndexByKey(key);
           if (idx) {
             rowIndexes.push(idx);
           }
@@ -102,40 +129,12 @@ export const Computer = React.memo(() => {
     }
   }, [values]);
 
+  //Fire onChange when selection changes
   useEffect(() => {
     const onChange = getState('onChange');
     if (onChange && typeof onChange === 'function') {
-      const page_data = getState('_page_data');
+      const getGridSelectedRows = getState('getGridSelectedRows');
-      const pageSize = getState('pageSize');
+      const buffers = getGridSelectedRows();
-
-      const buffers = [];
-      if (_gridSelectionRows) {
-        for (const range of _gridSelectionRows) {
-          let buffer = undefined;
-
-          for (const p in page_data) {
-            for (const r in page_data[p]) {
-              const idx = Number(p) * pageSize + Number(r);
-              if (isNaN(idx)) {
-                continue;
-              }
-
-              if (Number(page_data[p][r]?._rownumber) === range + 1) {
-                buffer = page_data[p][r];
-                //console.log('Found row', range, idx, page_data[p][r]?._rownumber);
-                break;
-              } else if (idx === range + 1) {
-                buffer = page_data[p][r];
-                //console.log('Found row 2', range, idx, page_data[p][r]?._rownumber);
-                break;
-              }
-            }
-          }
-          if (buffer !== undefined) {
-            buffers.push(buffer);
-          }
-        }
-      }
 
       const _values = getState('values');
 
@@ -143,7 +142,7 @@ export const Computer = React.memo(() => {
         onChange(buffers);
       }
     }
-  }, [JSON.stringify(_gridSelectionRows), getState]);
+  }, [_gridSelectionRows, _gridSelectionRows?.length, getState]);
 
   useEffect(() => {
     setState(
@@ -156,6 +155,17 @@ export const Computer = React.memo(() => {
     );
   }, [columns]);
 
+  useEffect(() => {
+    if (searchStr === undefined || searchStr === null) {
+      refLastSearch.current = '';
+      return;
+    }
+    if (refLastSearch.current !== searchStr) {
+      debouncedDoSearch(searchStr);
+      refLastSearch.current = searchStr;
+    }
+  }, [searchStr]);
+
   useEffect(() => {
     if (!colSort) {
       return;
@@ -179,7 +189,14 @@ export const Computer = React.memo(() => {
             : (c.defaultIcon ?? 'sort'),
       }));
     }).then(() => {
-      loadPage(0, 'all');
+      loadPage(0, 'all').then(() => {
+        getState('refreshCells')?.();
+        getState('_events')?.dispatchEvent?.(
+          new CustomEvent('onColumnSorted', {
+            detail: { cols: colSort },
+          })
+        );
+      });
     });
   }, [colSort]);
 
@@ -189,7 +206,14 @@ export const Computer = React.memo(() => {
     }
 
     if (JSON.stringify(refLastFilters.current) !== JSON.stringify(colFilters)) {
-      loadPage(0, 'all');
+      loadPage(0, 'all').then(() => {
+        getState('refreshCells')?.();
+        getState('_events')?.dispatchEvent?.(
+          new CustomEvent('onColumnFiltered', {
+            detail: { filters: colFilters },
+          })
+        );
+      });
       refLastFilters.current = colFilters;
     }
   }, [colFilters]);
@@ -203,6 +227,8 @@ export const Computer = React.memo(() => {
         ...c,
         width: c.id && colSize?.[c.id] ? colSize?.[c.id] : c.width,
       }));
+    }).then(() => {
+      getState('refreshCells')?.();
     });
   }, [colSize]);
 
@@ -220,9 +246,12 @@ export const Computer = React.memo(() => {
       });
 
       return result;
+    }).then(() => {
+      getState('refreshCells')?.();
     });
   }, [colOrder]);
 
+  //Initial Load
   useEffect(() => {
     if (!_glideref) {
       return;
@@ -231,8 +260,114 @@ export const Computer = React.memo(() => {
       return;
     }
     refFirstRun.current = 1;
-    loadPage(0);
+    loadPage(0).then(() => {
-  }, [_glideref]);
+      getState('refreshCells')?.();
+    });
+  }, [ready, loadPage]);
+
+  //Logic to select first row on mount
+  useEffect(() => {
+    const _events = getState('_events');
+    const loadPage = () => {
+      const selectFirstRowOnMount = getState('selectFirstRowOnMount');
+      if (ready && selectFirstRowOnMount) {
+        const scrollToRowKey = getState('scrollToRowKey');
+        if (scrollToRowKey && scrollToRowKey >= 0) {
+          return;
+        }
+        const keyField = getState('keyField') ?? 'id';
+        const page_data = getState('_page_data');
+
+        const firstBuffer = page_data?.[0]?.[0];
+        const firstRow = firstBuffer?.[keyField];
+        const currentValues = getState('values') ?? [];
+
+        if (
+          !(values && values.length > 0) &&
+          firstRow &&
+          firstRow > 0 &&
+          (currentValues.length ?? 0) === 0
+        ) {
+          const values = [firstBuffer, ...(currentValues as Array<Record<string, unknown>>)];
+
+          const onChange = getState('onChange');
+          //console.log('Selecting first row:', firstRow, firstBuffer, values);
+          if (onChange) {
+            onChange(values);
+          } else {
+            setState('values', values);
+          }
+
+          setState('scrollToRowKey', firstRow);
+        }
+      }
+    };
+
+    _events?.addEventListener('loadPage', loadPage);
+
+    return () => {
+      _events?.removeEventListener('loadPage', loadPage);
+    };
+  }, [ready]);
+
+  /// logic to apply the selected row.
+  // useEffect(() => {
+  //   const ready = getState('ready');
+  //   const ref = getState('_glideref');
+  //   const getRowIndexByKey = getState('getRowIndexByKey');
+
+  //   if (scrollToRowKey && ref && ready) {
+  //     getRowIndexByKey?.(scrollToRowKey).then((r) => {
+  //       if (r !== undefined) {
+  //         //console.log('Scrolling to selected row:', scrollToRowKey, r);
+  //         ref.scrollTo(0, r);
+  //         getState('_events').dispatchEvent(
+  //           new CustomEvent('scrollToRowKeyFound', {
+  //             detail: { rowNumber: r, scrollToRowKey: scrollToRowKey },
+  //           })
+  //         );
+  //       }
+  //     });
+  //   }
+  // }, [scrollToRowKey]);
+
+  useEffect(() => {
+    const ready = getState('ready');
+    const ref = getState('_glideref');
+    const getRowIndexByKey = getState('getRowIndexByKey');
+    const key = selectedRowKey ?? scrollToRowKey;
+
+    if (key && ref && ready) {
+      getRowIndexByKey?.(key).then((r) => {
+        if (r !== undefined) {
+          //console.log('Scrolling to selected row:', r, selectedRowKey, scrollToRowKey);
+
+          if (selectedRowKey) {
+            const onChange = getState('onChange');
+            const selected = [{ [getState('keyField') ?? 'id']: selectedRowKey }];
+            if (JSON.stringify(getState('values')) !== JSON.stringify(selected)) {
+              if (onChange) {
+                onChange(selected);
+              } else {
+                setState('values', selected);
+              }
+            }
+          }
+
+          ref.scrollTo(0, r);
+          getState('_events').dispatchEvent(
+            new CustomEvent('scrollToRowKeyFound', {
+              detail: {
+                rowNumber: r,
+                scrollToRowKey: scrollToRowKey,
+                selectedRowKey: selectedRowKey,
+              },
+            })
+          );
+        }
+      });
+    }
+  }, [scrollToRowKey, selectedRowKey]);
 
   // console.log('Gridler:Debug:Computer', {
   //   colFilters,
@@ -245,3 +380,5 @@ export const Computer = React.memo(() => {
 
   return <></>;
 });
+
+Computer.displayName = 'Gridler-Computer';

src/Gridler/components/GridlerStore.tsx

@@ -1,7 +1,10 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
 /* eslint-disable react-refresh/only-export-components */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import {
   type CellArray,
+  type CellClickedEventArgs,
   CompactSelection,
   type DataEditorProps,
   type DataEditorRef,
@@ -53,7 +56,7 @@ export type FilterOptionOperator =
   | 'startswith';
 
 export interface GridlerProps extends PropsWithChildren {
-  askAPIRowNumber?: (key: string) => Promise<number>;
+  allowMultiSelect?: boolean;
   columns?: GridlerColumns;
 
   defaultSort?: Array<SortOption>;
@@ -86,25 +89,43 @@ export interface GridlerProps extends PropsWithChildren {
   ) => GridCell;
 
   rowHeight?: number;
+  scrollToRowKey?: number;
+  searchFields?: Array<string>;
+  searchStr?: string;
   sections?: {
     bottom?: React.ReactNode;
     left?: React.ReactNode;
     right?: React.ReactNode;
+    rightElementDisabled?: boolean;
     rightElementEnd?: React.ReactNode;
     rightElementStart?: React.ReactNode;
     top?: React.ReactNode;
   };
-  selectedRow?: number;
+  selectedRowKey?: number;
+  selectFirstRowOnMount?: boolean;
   selectMode?: 'cell' | 'row';
   showMenu?: (id: string, options?: Partial<MantineBetterMenuInstance>) => void;
+  title?: string;
   tooltipBarProps?: React.HTMLAttributes<HTMLDivElement>;
   total_rows?: number;
+
   uniqueid: string;
-  useAPIQuery?: (index: number) => Promise<Array<Record<string, any>>>;
   values?: Array<Record<string, any>>;
   width?: number | string;
 }
 
+export interface GridlerRef {
+  getGlideRef: () => DataEditorRef | undefined;
+  getState: GridlerState['getState'];
+  isEmpty: () => boolean;
+  refresh: (parms?: any) => Promise<void>;
+  reload: (parms?: any) => Promise<void>;
+  reloadRow: (key: number | string) => Promise<void>;
+  scrollToRow: (key: number | string) => Promise<void>;
+  selectRow: (key: number | string) => Promise<void>;
+  setStateFN: GridlerState['setStateFN'];
+}
+
 export interface GridlerState {
   _active_requests?: Array<{ controller: AbortController; page: number }>;
   _activeTooltip?: ReactNode;
@@ -114,32 +135,38 @@ export interface GridlerState {
   _gridSelectionRows?: GridSelection['rows'];
   _loadingList: CompactSelection;
   _page_data: Record<number, Array<any>>;
+  _refresh: () => Promise<void>;
   _scrollTimeout?: any | number;
   _visibleArea: Rectangle;
   _visiblePages: Rectangle;
-
   addError: (err: string, ...args: Array<any>) => void;
+  askAPIRowNumber?: (key: string) => Promise<number>;
   colFilters?: Array<FilterOption>;
   colOrder?: Record<string, number>;
   colSize?: Record<string, number>;
   colSort?: Array<SortOption>;
   data?: Array<any>;
-
   errors: Array<string>;
   focused?: boolean;
+
   get: () => GridlerState;
   getCellContent: (cell: Item) => GridCell;
   getCellsForSelection: (
     selection: Rectangle,
     abortSignal: AbortSignal
   ) => CellArray | GetCellsThunk;
-  getRowBuffer: (row: number) => any;
+  getGridSelectedRows: () => Array<any>;
+  getRowBuffer: (row: number) => Record<string, any>;
+  getRowIndexByKey: (key: number | string) => Promise<number | undefined>;
   getState: <K extends keyof GridlerStoreState>(key: K) => GridlerStoreState[K];
-
   hasLocalData: boolean;
+  isEmpty: boolean;
+
   loadingData?: boolean;
   loadPage: (page: number, clearMode?: 'all' | 'page') => Promise<void>;
   mounted: boolean;
+  onCellActivated: (cell: Item) => void;
+  onCellClicked: (cell: Item, event: CellClickedEventArgs) => void;
   onCellEdited: (cell: Item, newVal: EditableGridCell) => void;
   onColumnMoved: (from: number, to: number) => void;
   onColumnProposeMove: (startIndex: number, endIndex: number) => boolean;
@@ -149,11 +176,10 @@ export interface GridlerState {
     colIndex: number,
     newSizeWithGrow: number
   ) => void;
-  onContextClick: (area: string, event: any, col?: number, row?: number) => void;
+  onContextClick: (area: string, event: CellClickedEventArgs, col?: number, row?: number) => void;
   onHeaderClicked: (colIndex: number, event: HeaderClickedEventArgs) => void;
   onHeaderMenuClick: (col: number, screenPosition: Rectangle) => void;
   onItemHovered: (args: GridMouseEventArgs) => void;
-
   onVisibleRegionChanged: (
     r: Rectangle,
     tx: number,
@@ -166,7 +192,11 @@ export interface GridlerState {
   ) => void;
 
   pageSize: number;
+
+  ready: boolean;
+  refreshCells: (fromRow?: number, toRow?: number, col?: number) => void;
   reload?: () => Promise<void>;
+
   renderColumns?: GridlerColumns;
   setState: <K extends keyof GridlerStoreState>(
     key: K,
@@ -177,6 +207,7 @@ export interface GridlerState {
     value: (current: GridlerStoreState[K]) => Partial<GridlerStoreState[K]>
   ) => Promise<void>;
   toCell: <TRowType extends Record<string, string>>(row: TRowType, col: number) => GridCell;
+  useAPIQuery?: (index: number) => Promise<Array<Record<string, any>>>;
 }
 
 export type GridlerStoreState = GridlerProps & GridlerState;
@@ -188,9 +219,15 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
     _events: new EventTarget(),
     _loadingList: CompactSelection.empty(),
     _page_data: {},
+    _refresh: async () => {
+      const s = get();
+      await s.loadPage(0, 'all');
+      await s.refreshCells();
+      await s.reload?.();
+    },
     _visibleArea: { height: 10000, width: 1000, x: 0, y: 0 },
     _visiblePages: { height: 0, width: 0, x: 0, y: 0 },
-    addError: (err: string, ...args: Array<any>) => {
+    addError: (err: string, ...args: Array<unknown>) => {
       const s = get();
       console.log('Gridler Error', s.uniqueid, err, args);
       set(
@@ -205,7 +242,7 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
       const state = get();
       const [col, row] = cell;
 
-      const buffer = state.getRowBuffer(row);
+      const buffer = state.getRowBuffer(row) as Record<string, string> | undefined;
 
       if (buffer !== undefined) {
         return state.toCell(buffer, col);
@@ -241,6 +278,42 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
         return result as CellArray;
       };
     },
+    getGridSelectedRows: () => {
+      const state = get();
+      const buffers: Array<any> = [];
+      const page_data = state._page_data;
+      const pageSize = state.pageSize;
+
+      if (state._gridSelectionRows) {
+        for (const range of state._gridSelectionRows) {
+          let buffer = undefined;
+
+          for (const p in page_data) {
+            for (const r in page_data[p]) {
+              const idx = Number(p) * pageSize + Number(r);
+              if (isNaN(idx)) {
+                continue;
+              }
+
+              if (Number(page_data[p][r]?._rownumber) === range + 1) {
+                buffer = page_data[p][r];
+                //console.log('Found row', range, idx, page_data[p][r]?._rownumber);
+                break;
+              } else if (idx === range + 1) {
+                buffer = page_data[p][r];
+                //console.log('Found row 2', range, idx, page_data[p][r]?._rownumber);
+                break;
+              }
+            }
+          }
+          if (buffer !== undefined) {
+            buffers.push(buffer);
+          }
+        }
+      }
+      return buffers;
+    },
+
     getRowBuffer: (row: number) => {
       const state = get();
       //Handle local data
@@ -263,10 +336,48 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
 
       return rowData;
     },
+    getRowIndexByKey: async (key: number | string) => {
+      const state = get();
+
+      let rowIndex = -1;
+      if (state.ready) {
+        const page_data = state._page_data;
+        const pageSize = state.pageSize;
+        const keyField = state.keyField ?? 'id';
+        for (const p in page_data) {
+          for (const r in page_data[p]) {
+            const idx = Number(p) * pageSize + Number(r);
+            //console.log('Found row', idx, page_data[p][r]?.[keyField], scrollToRowKey);
+            if (String(page_data[p][r]?.[keyField]) === String(key)) {
+              rowIndex =
+                page_data[p][r]?._rownumber > 0 ? page_data[p][r]?._rownumber : idx > 0 ? idx : -1;
+              break;
+            }
+          }
+          if (rowIndex > 0) {
+            console.log('Local row index', rowIndex, key);
+            return rowIndex;
+          }
+        }
+
+        if (rowIndex > 0) {
+          return rowIndex;
+        } else if (typeof state.askAPIRowNumber === 'function') {
+          const rn = await state.askAPIRowNumber(String(key));
+          if (rn && rn >= 0) {
+            console.log('Remote row index', rowIndex, key);
+            return rn;
+          }
+        }
+      }
+
+      return undefined;
+    },
     getState: (key) => {
       return get()[key];
     },
     hasLocalData: false,
+    isEmpty: true,
     keyField: 'id',
     loadPage: async (pPage: number, clearMode?: 'all' | 'page') => {
       const state = get();
@@ -325,7 +436,7 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
             );
           })
           .catch((e) => {
-            console.warn('loadPage Error: ', page, e);
+            console.error('loadPage Error: ', page, e);
             state._events.dispatchEvent(
               new CustomEvent('loadPage_error', {
                 detail: { clearMode, error: e, page: pPage, state },
@@ -336,6 +447,35 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
     },
     maxConcurrency: 1,
     mounted: false,
+    onCellActivated: (cell: Item): void => {
+      const state = get();
+      const [col, row] = cell;
+
+      state._events.dispatchEvent(
+        new CustomEvent('onCellActivated', {
+          detail: { cell, col, row, state },
+        })
+      );
+      state.glideProps?.onCellActivated?.(cell);
+    },
+    onCellClicked: (cell: Item, event: CellClickedEventArgs) => {
+      const state = get();
+      const [col, row] = cell;
+      if (state.glideProps?.onCellClicked) {
+        state.glideProps?.onCellClicked?.(cell, event);
+      }
+      if (state.values?.length) {
+        if (state.onChange) {
+          state.onChange(state.values);
+        }
+      }
+
+      state._events.dispatchEvent(
+        new CustomEvent('onCellClicked', {
+          detail: { cell, col, row, state },
+        })
+      );
+    },
     onCellEdited: (cell: Item, newVal: EditableGridCell) => {
       const state = get();
       const [, row] = cell;
@@ -347,6 +487,7 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
           detail: { cell, newVal, row, state },
         })
       );
+      state.glideProps?.onCellEdited?.(cell, newVal);
     },
     onColumnMoved: (from: number, to: number) => {
       const s = get();
@@ -379,6 +520,7 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
       }
       return true;
     },
+
     onColumnResize: (
       column: GridColumn,
       newSize: number,
@@ -403,20 +545,16 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
         });
       }
     },
-
+    onContextClick: (area: string, event: CellClickedEventArgs, col?: number, row?: number) => {
-    onContextClick: (area: string, event: any, col?: number, row?: number) => {
       const s = get();
       const coldef = s.renderColumns?.[col ?? -1];
 
       const items =
         area === 'menu'
-          ? [
+          ? [{ leftSection: <IconGrid4x4 size={16} />, title: s.title ?? 'Grid' }]
-              {
-                label: `Side menu`,
-              },
-            ]
           : coldef
             ? [
+                { leftSection: <IconGrid4x4 size={16} />, title: s.title ?? 'Grid' },
                 {
                   items: [
                     {
@@ -490,7 +628,9 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
           ) ??
           s.getMenuItems?.(area, s, col && row ? s.getRowBuffer(row) : undefined, coldef, items) ??
           items,
+        //@ts-expect-error Check bounds
         x: event.clientX ?? event.bounds?.x,
+        //@ts-expect-error Check bounds
         y: event.clientY ?? event.bounds?.y,
       });
     },
@@ -584,9 +724,11 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
           isDivider: true,
         },
         {
+          id: 'refesh',
           label: `Refresh`,
-          onClickAsync: async () => {
+          onClick: () => {
-            await s.reload?.();
+            const s = get();
+            s._refresh?.();
           },
         },
       ];
@@ -681,8 +823,32 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
         }, 100)
       );
     },
-
     pageSize: 50,
+    ready: false,
+    refreshCells: (fromRow?: number, toRow?: number, col?: number) => {
+      const state = get();
+      const damageList: { cell: [number, number] }[] = [];
+      const colLen = Object.keys(state.renderColumns ?? [1, 2, 3]).length;
+
+      const from = fromRow && fromRow > 0 ? fromRow : 0;
+      const to = toRow && toRow >= from ? toRow : from + state.pageSize;
+
+      for (let row = from; row <= to; row++) {
+        if (col && col > 0) {
+          damageList.push({
+            cell: [col, row],
+          });
+        } else {
+          for (let c = 0; c <= colLen; c++) {
+            damageList.push({
+              cell: [c, row],
+            });
+          }
+        }
+      }
+
+      state._glideref?.updateCells(damageList);
+    },
     setState: (key, value) => {
       set(
         produce((state) => {
@@ -695,7 +861,7 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
         set(
           produce((state) => {
             if (typeof value === 'function') {
-              state[key] = (value as (value: any) => any)(state[key]);
+              state[key] = (value as (value: unknown) => unknown)(state[key]);
             } else {
               reject(new Error(`Not a function ${value}`));
               throw Error(`Not a function ${value}`);
@@ -731,7 +897,7 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
         const val = String(ref).includes('.') ? (getNestedValue(ref, row) ?? '') : row?.[ref];
 
         if (coldef?.Cell) {
-          return coldef?.Cell(row, col, ref, val, s) as GridCell;
+          return { kind: GridCellKind.Text, ...coldef?.Cell(row, col, ref, val, s) } as GridCell;
         }
         if (s.RenderCell) {
           return s.RenderCell(row, col, ref, val, s);
@@ -739,8 +905,8 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
 
         return {
           allowOverlay: true,
-          data: val,
+          data: val ?? '',
-          displayData: String(val),
+          displayData: String(val ?? ''),
           kind: GridCellKind.Text,
         };
       } catch (e) {
@@ -797,62 +963,18 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
       };
     }, [setState, getState]);
 
-    /// logic to apply the selected row.
-    useEffect(() => {
-      const ref = getState('_glideref');
-      const keyField = getState('keyField') ?? 'id';
-      const selectedRow = getState('selectedRow') ?? props.selectedRow;
-      const askAPIRowNumber = getState('askAPIRowNumber');
-      let rowIndex = -1;
-      if (selectedRow && ref) {
-        const page_data = getState('_page_data');
-        const pageSize = getState('pageSize');
-        for (const p in page_data) {
-          for (const r in page_data[p]) {
-            const idx = Number(p) * pageSize + Number(r);
-            //console.log('Found row', idx, page_data[p][r]?.[keyField], selectedRow);
-            if (String(page_data[p][r]?.[keyField]) === String(selectedRow)) {
-              rowIndex =
-                page_data[p][r]?._rownumber > 0 ? page_data[p][r]?._rownumber : idx > 0 ? idx : -1;
-              break;
-            }
-          }
-          if (rowIndex > 0) {
-            break;
-          }
-        }
-
-        if (rowIndex > 0) {
-          ref.scrollTo(0, rowIndex);
-        } else if (typeof askAPIRowNumber === 'function') {
-          askAPIRowNumber(String(selectedRow))
-            .then((r) => {
-              if (r >= 0) {
-                ref.scrollTo(0, r);
-                getState('_events').dispatchEvent(
-                  new CustomEvent('selectedRowFound', {
-                    detail: { rowNumber: r, selectedRow: selectedRow },
-                  })
-                );
-              }
-            })
-            .catch((e) => {
-              console.warn('Error in askAPIRowNumber', e);
-            });
-        }
-      }
-    }, [props.selectedRow]);
-
     getState('_events').addEventListener('reload', (_e: Event) => {
-      getState('reload')?.();
+      getState('_refresh')?.();
     });
 
     return {
       ...props,
 
+      colSort: props.defaultSort ?? getState('colSort') ?? [],
       hideMenu: props.hideMenu ?? menus.hide,
+      scrollToRowKey: props.scrollToRowKey ?? props.selectedRowKey ?? getState('scrollToRowKey'),
       showMenu: props.showMenu ?? menus.show,
-      total_rows: props.total_rows ?? getState('total_rows') ?? 0,
+      total_rows: getState('total_rows') ?? props.total_rows,
     };
   }
 );

src/Gridler/components/Pager.tsx

@@ -7,6 +7,7 @@ import { useGridlerStore } from './GridlerStore';
 export const Pager = React.memo(() => {
   const [
     setState,
+    getState,
     glideref,
     visiblePages,
     //_visibleArea,
@@ -16,6 +17,7 @@ export const Pager = React.memo(() => {
     hasLocalData,
   ] = useGridlerStore((s) => [
     s.setState,
+    s.getState,
     s._glideref,
     s._visiblePages,
     //s._visibleArea,
@@ -38,10 +40,10 @@ export const Pager = React.memo(() => {
     if (!glideref) {
       return;
     }
-    if (hasLocalData) {
+    // if (hasLocalData) {
-      //using local data, no need to load pages
+    //   //using local data, no need to load pages
-      return;
+    //   return;
-    }
+    // }
     const firstPage = Math.max(0, Math.floor(visiblePages.y / pageSize));
     const lastPage = Math.floor((visiblePages.y + visiblePages.height) / pageSize);
     //const upperPage = pageSize * firstPage;
@@ -57,9 +59,14 @@ export const Pager = React.memo(() => {
     // );
 
     for (const page of range(firstPage, lastPage + 1, 1)) {
-      loadPage(page);
+      loadPage(page).then(() => {
+        const pg = getState('_page_data')?.[0] ?? {};
+        setState('isEmpty', pg && pg.length > 0);
+      });
     }
   }, [loadPage, pageSize, visiblePages, glideref, _loadingList, hasLocalData]);
 
   return <></>;
 });
+
+Pager.displayName = 'Gridler-Pager';

src/Gridler/components/RefHandler.tsx

@@ -0,0 +1,55 @@
+import React, { type PropsWithChildren, type Ref, useImperativeHandle } from 'react';
+
+import { type GridlerRef, useGridlerStore } from './GridlerStore';
+
+function _GridlerRefHandler(props: PropsWithChildren, ref: Ref<GridlerRef> | undefined) {
+  const [setStateFN, getstate] = useGridlerStore((s) => [s.setStateFN, s.getState]);
+
+  useImperativeHandle<GridlerRef, GridlerRef>(ref, () => {
+    return {
+      getGlideRef: () => {
+        return getstate('_glideref');
+      },
+      getState: getstate,
+      isEmpty: () => getstate('isEmpty'),
+      refresh: async (parms?: any) => {
+        const refreshCells = getstate('refreshCells');
+        const loadPage = getstate('loadPage');
+        loadPage?.(parms?.pageIndex ?? 0, 'all').then(() => {
+          refreshCells?.();
+        });
+      },
+      reload: async (parms?: any) => {
+        const refreshCells = getstate('refreshCells');
+        const loadPage = getstate('loadPage');
+        loadPage?.(parms?.pageIndex ?? 0, 'all').then(() => {
+          refreshCells?.();
+        });
+      },
+      reloadRow: async (key: number | string) => {
+        const refreshCells = getstate('refreshCells');
+        //const loadPage = getstate('loadPage');
+        const getRowIndexByKey = getstate('getRowIndexByKey');
+        const rn = await getRowIndexByKey?.(String(key));
+        if (rn && rn >= 0) {
+          refreshCells?.(rn, rn + 1);
+          //todo loadpage or row from server
+        }
+      },
+      scrollToRow: async (key: number | string) => {
+        if (key && Number(key) >= 0) {
+          setStateFN('scrollToRowKey', (cv) => Number(key ?? cv));
+        }
+      },
+      selectRow: async (key: number | string) => {
+        if (key && Number(key) >= 0) {
+          setStateFN('selectedRowKey', (cv) => Number(key ?? cv));
+        }
+      },
+      setStateFN: setStateFN,
+    };
+  }, []);
+  return <>{props.children}</>;
+}
+
+export const GridlerRefHandler = React.forwardRef(_GridlerRefHandler);

src/Gridler/components/RightMenuIcon.tsx

@@ -3,7 +3,7 @@ import { IconMenu2 } from '@tabler/icons-react';
 
 import { useGridlerStore } from './GridlerStore';
 
-export function RightMenuIcon() {
+export function GridlerRightMenuIcon() {
   const { loadingData, onContextClick } = useGridlerStore((s) => ({
     loadingData: s.loadingData,
     onContextClick: s.onContextClick,
@@ -14,7 +14,7 @@ export function RightMenuIcon() {
       loading={loadingData}
       mr="xs"
       mt="2px"
-      onClick={(e) => onContextClick('menu', e)}
+      onClick={(e) => onContextClick('menu', e as any)}
       variant="subtle"
     >
       <IconMenu2 />

src/Gridler/components/adaptors/GlidlerAPIAdaptorForGoLangv2.tsx

@@ -1,12 +1,24 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { useEffect } from 'react';
+import React, { useCallback, useEffect } from 'react';
 
 import type { APIOptions } from '../../utils/types';
+import type { GridlerColumn } from '../Column';
 
+import {
+  type FetchAPIOperation,
+  GoAPIHeaders,
+  type GoAPIOperation,
+} from '../../utils/golang-restapi-v2';
 import { useGridlerStore } from '../GridlerStore';
 
-//The computer component does not need to be recalculated on every render, so we use React.memo to prevent unnecessary re-renders.
+export interface GlidlerAPIAdaptorForGoLangv2Props<T = unknown> extends APIOptions {
-export const GlidlerAPIAdaptorForGoLangv2 = React.memo((props: APIOptions) => {
+  filter?: string;
+  hotfields?: Array<string>;
+  initialData?: Array<T>;
+  options?: Array<GoAPIOperation>;
+}
+
+function _GlidlerAPIAdaptorForGoLangv2<T = unknown>(props: GlidlerAPIAdaptorForGoLangv2Props<T>) {
   const [setStateFN, setState, getState, addError, mounted] = useGridlerStore((s) => [
     s.setStateFN,
     s.setState,
@@ -15,38 +27,104 @@ export const GlidlerAPIAdaptorForGoLangv2 = React.memo((props: APIOptions) => {
     s.mounted,
   ]);
 
-  const useAPIQuery: (index: number) => Promise<any> = async (index: number) => {
+  const useAPIQuery: (index: number) => Promise<any> = useCallback(
+    async (index: number) => {
+      const columns = getState('columns');
       const colSort = getState('colSort');
       const pageSize = getState('pageSize');
       const colFilters = getState('colFilters');
+      const searchStr = getState('searchStr');
+      const searchFields = getState('searchFields');
       const _active_requests = getState('_active_requests');
       setState('loadingData', true);
       try {
         //console.log('APIAdaptorGoLangv2', { _active_requests, index, pageSize, props });
         if (props && props.url) {
           const head = new Headers();
-        head.set('x-limit', String(pageSize ?? 50));
-        head.set('x-offset', String((pageSize ?? 50) * index));
 
           head.set('Authorization', `Token ${props.authtoken}`);
+          const ops: FetchAPIOperation[] = [
+            { type: 'limit', value: String(pageSize ?? 50) },
+            { type: 'offset', value: String((pageSize ?? 50) * index) },
+          ];
 
           if (colSort?.length && colSort.length > 0) {
-          head.set(
+            ops.push({
-            'x-sort',
+              type: 'sort',
-            colSort
+              value: colSort
                 ?.map((sort: any) => `${sort.id} ${sort.direction}`)
-              .reduce((acc: any, val: any) => `${acc},${val}`)
+                .reduce((acc: any, val: any) => `${acc},${val}`),
-          );
+            });
           }
 
-        if (colFilters?.length && colFilters.length > 0) {
           colFilters
             ?.filter((f) => f.value?.length > 0)
             ?.forEach((filter: any) => {
               if (filter.value && filter.value !== '') {
-                head.set(`x-searchop-${filter.operator}-${filter.id}`, `${filter.value}`);
+                ops.push({
+                  name: `${filter.id}`,
+                  op: filter.operator,
+                  type: 'searchop',
+                  value: filter.value,
+                });
               }
             });
+
+          if (searchStr && searchStr !== '') {
+            columns
+              ?.filter(
+                (f) =>
+                  !f.disableFilter &&
+                  !f.disableSearch &&
+                  !f.virtual &&
+                  f.id &&
+                  ((searchFields ?? []).length == 0 || searchFields?.includes(f.id))
+              )
+              ?.forEach((filter: any) => {
+                ops.push({
+                  name: `${filter.id ?? ""}`,
+                  op: 'contains',
+                  type: 'searchor',
+                  value: searchStr,
+                });
+              });
+          }
+
+          if (props.filter && props.filter !== '') {
+            ops.push({
+              name: 'sql_filter',
+              type: 'custom-sql-w',
+              value: props.filter,
+            });
+          }
+
+          if ((props.options ?? []).length > 0) {
+            ops.push(...(props.options ?? []));
+          }
+
+          const col_ids =
+            columns
+              ?.filter((col) => !col.virtual)
+              ?.map((col: GridlerColumn) => {
+                return col.id;
+              }) ?? [];
+
+          if (props.hotfields && props.hotfields.length > 0) {
+            col_ids?.push(props.hotfields.join(','));
+          }
+
+          if (col_ids && col_ids.length > 0) {
+            ops.push({
+              type: 'select-fields',
+              value: col_ids.join(','),
+            });
+          }
+
+          if (ops && ops.length > 0) {
+            const optionHeaders = GoAPIHeaders(ops);
+            for (const oh in GoAPIHeaders(ops)) {
+              head.set(oh, optionHeaders[oh]);
+            }
           }
 
           const currentRequestIndex = _active_requests?.findIndex((f) => f.page === index) ?? -1;
@@ -55,14 +133,22 @@ export const GlidlerAPIAdaptorForGoLangv2 = React.memo((props: APIOptions) => {
               r.controller?.abort?.();
             }
           });
-        if (_active_requests && currentRequestIndex >= 0 && _active_requests[currentRequestIndex]) {
+
+          if (
+            _active_requests &&
+            currentRequestIndex >= 0 &&
+            _active_requests[currentRequestIndex]
+          ) {
             //console.log(`Already queued ${index}`, index, s._active_requests);
             setState('loadingData', false);
             return undefined;
           }
 
           const controller = new AbortController();
-        await setStateFN('_active_requests', (cv) => [...(cv ?? []), { controller, page: index }]);
+          await setStateFN('_active_requests', (cv) => [
+            ...(cv ?? []),
+            { controller, page: index },
+          ]);
 
           const res = await fetch(
             `${props.url}?x-limit=${String(pageSize ?? 50)}&x-offset=${String((pageSize ?? 50) * index)}`,
@@ -89,22 +175,37 @@ export const GlidlerAPIAdaptorForGoLangv2 = React.memo((props: APIOptions) => {
             ...(cv ?? []).filter((f) => f.page !== index),
           ]);
         }
-    } catch (e) {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      } catch (_e) {
         //console.log('APIAdaptorGoLangv2 error', e);
-      addError(`Error: ${e}`, 'api', props.url);
+        //addError(`Error: ${e}`, 'api', props.url);
       }
       setState('loadingData', false);
       return [];
-  };
+    },
+    [
+      getState,
+      props.authtoken,
+      props.url,
+      props.filter,
+      JSON.stringify(props.options),
+      setState,
+      setStateFN,
+      addError,
+    ]
+  );
 
-  const askAPIRowNumber: (key: string) => Promise<number> = async (key: string) => {
+  const askAPIRowNumber: (key: string) => Promise<number> = useCallback(
+    async (key: string) => {
       const colFilters = getState('colFilters');
 
       //console.log('APIAdaptorGoLangv2', { _active_requests, index, pageSize, props });
       if (props && props.url) {
         const head = new Headers();
-      head.set('x-limit', '10');
+        const ops: FetchAPIOperation[] = [
-      head.set('x-fetch-rownumber', String(key));
+          { type: 'limit', value: String(10) },
+          { type: 'fetch-rownumber', value: key },
+        ];
 
         head.set('Authorization', `Token ${props.authtoken}`);
 
@@ -118,6 +219,28 @@ export const GlidlerAPIAdaptorForGoLangv2 = React.memo((props: APIOptions) => {
             });
         }
 
+        if (props.filter && props.filter !== '') {
+          ops.push({
+            name: 'sql_filter',
+            type: 'custom-sql-w',
+            value: props.filter,
+          });
+        }
+
+        if (props.options && props.options.length > 0) {
+          const optionHeaders = GoAPIHeaders(props.options);
+          for (const oh in optionHeaders) {
+            head.set(oh, optionHeaders[oh]);
+          }
+        }
+
+        if (ops && ops.length > 0) {
+          const optionHeaders = GoAPIHeaders(ops);
+          for (const oh in GoAPIHeaders(ops)) {
+            head.set(oh, optionHeaders[oh]);
+          }
+        }
+
         const controller = new AbortController();
 
         const res = await fetch(`${props.url}?x-fetch-rownumber=${key}}`, {
@@ -134,12 +257,32 @@ export const GlidlerAPIAdaptorForGoLangv2 = React.memo((props: APIOptions) => {
         addError(`${res.status} ${res.statusText}`, 'api', props.url);
       }
       return [];
-  };
+    },
+    [props.url, props.authtoken, props.filter, props.options, getState, addError]
+  );
 
+  //Reset the function in the store.
   useEffect(() => {
     setState('useAPIQuery', useAPIQuery);
     setState('askAPIRowNumber', askAPIRowNumber);
-  }, [props.url, props.authtoken, mounted, setState]);
+
+    const _refresh = getState('_refresh');
+
+    //Reset the loaded pages to new rules
+    _refresh?.().then(() => {
+      const onChange = getState('onChange');
+      const getGridSelectedRows = getState('getGridSelectedRows');
+      if (onChange && typeof onChange === 'function') {
+        const buffers = getGridSelectedRows?.();
+        onChange(buffers);
+      }
+    });
+  }, [props.url, props.authtoken, props.filter, JSON.stringify(props.options), mounted, setState]);
 
   return <></>;
-});
+}
+
+//The computer component does not need to be recalculated on every render, so we use React.memo to prevent unnecessary re-renders.
+export const GlidlerAPIAdaptorForGoLangv2 = React.memo(_GlidlerAPIAdaptorForGoLangv2);
+
+GlidlerAPIAdaptorForGoLangv2.displayName = 'Gridler-GlidlerAPIAdaptorForGoLangv2';

src/Gridler/components/adaptors/GlidlerFormAdaptor.tsx

@@ -14,6 +14,7 @@ import type { GridlerColumn } from '../Column';
 import { type GridlerProps, type GridlerState, useGridlerStore } from '../GridlerStore';
 
 export function GlidlerFormAdaptor(props: {
+  changeOnActiveClick?: boolean;
   descriptionField?: ((data: Record<string, unknown>) => string) | string;
   getMenuItems?: GridlerProps['getMenuItems'];
   onReload?: () => void;
@@ -23,13 +24,35 @@ export function GlidlerFormAdaptor(props: {
   ) => void;
   showDescriptionInMenu?: boolean;
 }) {
-  const [getState, mounted, setState, reload] = useGridlerStore((s) => [
+  const [getState, mounted, setState, _events] = useGridlerStore((s) => [
     s.getState,
     s.mounted,
     s.setState,
-    s.reload,
+    s._events,
   ]);
 
+  useEffect(() => {
+    if (mounted && props.changeOnActiveClick) {
+      const evf = (event: CustomEvent<any>) => {
+        const { row, state } = event.detail;
+        const getRowBuffer = state.getRowBuffer as (row: number) => Record<string, unknown>;
+        if (getRowBuffer) {
+          const rowData = getRowBuffer(row);
+          if (!rowData) {
+            return;
+          }
+          props.onRequestForm('change', rowData);
+        }
+      };
+      _events?.addEventListener('onCellActivated', evf as any);
+      return () => {
+        if (evf) {
+          _events?.removeEventListener('onCellActivated', evf as any);
+        }
+      };
+    }
+  }, [props.changeOnActiveClick, mounted, _events]);
+
   const getMenuItems = useCallback(
     (
       id: string,
@@ -45,9 +68,9 @@ export function GlidlerFormAdaptor(props: {
       }
 
       const items = [] as Array<MantineBetterMenuInstanceItem>;
-      if (defaultItems && id === 'cell') {
+
       items.push(...(defaultItems as Array<MantineBetterMenuInstanceItem>));
-      }
+
       const rows = getState('_gridSelection')?.rows.toArray() ?? [];
       const manyRows = rows.length > 1;
 
@@ -140,8 +163,9 @@ export function GlidlerFormAdaptor(props: {
         c: 'orange',
         label: 'Refresh',
         leftSection: <IconRefresh color="orange" size={16} />,
-        onClick: () => {
+        onClickAsync: async () => {
-          reload?.();
+          const _refresh = getState('_refresh');
+          await _refresh?.();
         },
       });
 

src/Gridler/components/adaptors/GlidlerLocalDataAdaptor.tsx

@@ -1,15 +1,47 @@
 import React, { useEffect } from 'react';
 
-import { useGridlerStore } from '../GridlerStore';
+import type { GridlerColumns } from '../Column';
 
-export interface GlidlerLocalDataAdaptorProps {
+import { type FilterOption, type SortOption, useGridlerStore } from '../GridlerStore';
-  data: Array<unknown>;
+
+export interface GlidlerLocalDataAdaptorProps<T = unknown> {
+  data: Array<T>;
+  onColumnFilter?: (
+    colFilters: Array<FilterOption> | undefined,
+    cols: GridlerColumns | undefined,
+    data: Array<T>
+  ) => Array<T>;
+  onColumnSort?: (
+    colSort: Array<SortOption> | undefined,
+    cols: GridlerColumns | undefined,
+    data: Array<T>
+  ) => Array<T>;
+  onSearch?: (
+    searchField: string | undefined,
+    cols: GridlerColumns | undefined,
+    data: Array<T>
+  ) => Array<T>;
 }
 
 //The computer component does not need to be recalculated on every render, so we use React.memo to prevent unnecessary re-renders.
-export const GlidlerLocalDataAdaptor = React.memo((props: GlidlerLocalDataAdaptorProps) => {
+function _GlidlerLocalDataAdaptor<T = unknown>(props: GlidlerLocalDataAdaptorProps<T>) {
   const [setState, getState, mounted] = useGridlerStore((s) => [s.setState, s.getState, s.mounted]);
 
+  const { colFilters, colSort, columns, searchStr } = useGridlerStore((s) => ({
+    colFilters: s.colFilters,
+    colOrder: s.colOrder,
+    colSize: s.colSize,
+    colSort: s.colSort,
+    columns: s.columns,
+    searchStr: s.searchStr,
+  }));
+
+  const refChanged = React.useRef({
+    colFilters: colFilters,
+    colSort: colSort,
+    searchStr: searchStr,
+  });
+
   const useAPIQuery: (index: number) => Promise<any> = async (index: number) => {
     const pageSize = getState('pageSize');
 
@@ -25,5 +57,38 @@ export const GlidlerLocalDataAdaptor = React.memo((props: GlidlerLocalDataAdapto
     setState('useAPIQuery', useAPIQuery);
   }, [mounted, setState]);
 
+  useEffect(() => {
+    if (props.onColumnSort && colSort !== refChanged?.current?.colSort) {
+      const sortedData = props.onColumnSort(colSort, columns, props.data as Array<T>);
+      setState('total_rows', sortedData.length);
+      setState('data', sortedData);
+      refChanged.current.colSort = colSort;
+      getState('refreshCells')?.();
+    }
+  }, [colSort, props.onColumnSort]);
+
+  useEffect(() => {
+    if (props.onColumnFilter && colFilters !== refChanged?.current?.colFilters) {
+      const filteredData = props.onColumnFilter(colFilters, columns, props.data as Array<T>);
+      setState('total_rows', filteredData.length);
+      setState('data', filteredData);
+      refChanged.current.colFilters = colFilters;
+      getState('refreshCells')?.();
+    }
+  }, [colFilters, props.onColumnFilter]);
+
+  useEffect(() => {
+    if (props.onSearch && searchStr !== refChanged?.current?.searchStr) {
+      const filteredData = props.onSearch(searchStr, columns, props.data as Array<T>);
+      setState('total_rows', filteredData.length);
+      setState('data', filteredData);
+      refChanged.current.colFilters = colFilters;
+      getState('refreshCells')?.();
+    }
+  }, [searchStr, props.onSearch]);
+
   return <></>;
-});
+}
+export const GlidlerLocalDataAdaptor = React.memo(_GlidlerLocalDataAdaptor);
+
+GlidlerLocalDataAdaptor.displayName = 'Gridler-GlidlerLocalDataAdaptor';

src/Gridler/hooks/use-grid-theme.ts

@@ -102,8 +102,8 @@ export const useGridTheme = () => {
     // }[colorScheme];
 
      
-    // for (const selectedRow of gridSelection?.rows) {
+    // for (const scrollToRowKey of gridSelection?.rows) {
-    //   if (selectedRow === row) {
+    //   if (scrollToRowKey === row) {
     //     return {
     //       bgCell: rowColor.bgCell,
     //       bgCellMedium: rowColor.bgCellMedium

src/Gridler/index.ts

@@ -2,5 +2,9 @@ export {GlidlerAPIAdaptorForGoLangv2 } from './components/adaptors/GlidlerAPIAda
 export {GlidlerFormAdaptor } from './components/adaptors/GlidlerFormAdaptor'
 export {GlidlerLocalDataAdaptor } from './components/adaptors/GlidlerLocalDataAdaptor'
 export * from './components/Column'
-export {useGridlerStore } from './components/GridlerStore'
+export {type GridlerProps,type GridlerRef,type GridlerState, useGridlerStore } from './components/GridlerStore'
+export { GridlerRightMenuIcon } from './components/RightMenuIcon'
 export {Gridler} from './Gridler'
+export  {GoAPIHeaders} from './utils'
+export type {FetchAPIOperation} from './utils'
+export type {APIOptions} from './utils/types'

src/Gridler/stories/Examples.goapi.tsx

@@ -1,10 +1,11 @@
-import { Checkbox, Divider, Group, Stack, TagsInput, TextInput } from '@mantine/core';
+import { Button, Checkbox, Divider, Group, Stack, TagsInput, TextInput } from '@mantine/core';
 import { useLocalStorage } from '@mantine/hooks';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 
 import type { GridlerColumns } from '../components/Column';
 
 import { GlidlerAPIAdaptorForGoLangv2 } from '../components/adaptors';
+import { type GridlerRef } from '../components/GridlerStore';
 import { Gridler } from '../Gridler';
 
 export const GridlerGoAPIExampleEventlog = () => {
@@ -12,12 +13,33 @@ export const GridlerGoAPIExampleEventlog = () => {
     defaultValue: 'http://localhost:8080/api',
     key: 'apiurl',
   });
+  const ref = useRef<GridlerRef>(null);
   const [apiKey, setApiKey] = useLocalStorage({ defaultValue: '', key: 'apikey' });
   const [selectRow, setSelectRow] = useState<string | undefined>('');
   const [values, setValues] = useState<Array<Record<string, any>>>([]);
+  const [search, setSearch] = useState<string>('');
   const [sections, setSections] = useState<Record<string, unknown> | undefined>(undefined);
   const columns: GridlerColumns = [
     {
+      Cell: (row) => {
+        const process = `${
+          row?.cql2?.length > 0
+            ? '🔖'
+            : row?.cql1?.length > 0
+              ? '📕'
+              : row?.status === 1
+                ? '💡'
+                : row?.status === 2
+                  ? '🔒'
+                  : '⚙️'
+        } ${String(row?.id_process ?? '0')}`;
+
+        return {
+          data: process,
+          displayData: process,
+          status: row?.status,
+        } as any;
+      },
       id: 'id_process',
       title: 'RID',
       width: 100,
@@ -45,7 +67,7 @@ export const GridlerGoAPIExampleEventlog = () => {
   ];
 
   return (
-    <Stack h="60vh">
+    <Stack h="80vh" w="50vw">
       <h2>Demo Using Go API Adaptor</h2>
       <TextInput label="API Url" onChange={(e) => setApiUrl(e.target.value)} value={apiUrl} />
       <TextInput label="API Key" onChange={(e) => setApiKey(e.target.value)} value={apiKey} />
@@ -87,14 +109,24 @@ export const GridlerGoAPIExampleEventlog = () => {
           //console.log('GridlerGoAPIExampleEventlog onChange', v);
           setValues(v);
         }}
-        sections={sections}
+        ref={ref}
-        selectedRow={selectRow ? parseInt(selectRow, 10) : undefined}
+        scrollToRowKey={selectRow ? parseInt(selectRow, 10) : undefined}
+        searchStr={search}
+        sections={{ ...sections, rightElementDisabled: false }}
+        selectFirstRowOnMount={true}
         selectMode="row"
+        title="Go API Example"
         uniqueid="gridtest"
         values={values}
       >
-        <GlidlerAPIAdaptorForGoLangv2 authtoken={apiKey} url={`${apiUrl}/public/process`} />
+        <GlidlerAPIAdaptorForGoLangv2
+          authtoken={apiKey}
+          options={[{ type: 'preload', value: 'PRO' }]}
+          //options={[{ type: 'fieldfilter', name: 'process', value: 'test' }]}
+          url={`${apiUrl}/public/process`}
+        />
         <Gridler.FormAdaptor
+          changeOnActiveClick={true}
           descriptionField={'process'}
           onRequestForm={(request, data) => {
             console.log('Form requested', request, data);
@@ -103,6 +135,13 @@ export const GridlerGoAPIExampleEventlog = () => {
       </Gridler>
       <Divider />
       <Group>
+        <TextInput
+          leftSection={<>S</>}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Search"
+          value={search}
+          w="190px"
+        />
         <TextInput
           onChange={(e) => setSelectRow(e.target.value)}
           placeholder="row"
@@ -117,6 +156,43 @@ export const GridlerGoAPIExampleEventlog = () => {
         />
         ;
       </Group>
+      <Group>
+        <Button
+          onClick={() => {
+            ref.current?.refresh();
+          }}
+        >
+          Refresh
+        </Button>
+        <Button
+          onClick={() => {
+            ref.current?.selectRow(20523);
+          }}
+        >
+          Select 20523
+        </Button>
+        <Button
+          onClick={() => {
+            ref.current?.selectRow(4);
+          }}
+        >
+          Select 4
+        </Button>
+        <Button
+          onClick={() => {
+            ref.current?.reloadRow(20523);
+          }}
+        >
+          Reload 20523
+        </Button>
+        <Button
+          onClick={() => {
+            ref.current?.scrollToRow(16272);
+          }}
+        >
+          Goto 2050
+        </Button>
+      </Group>
     </Stack>
   );
 };

src/Gridler/stories/Gridler.goapi.stories.tsx

@@ -1,3 +1,4 @@
+//@ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Box } from '@mantine/core';
@@ -6,7 +7,12 @@ import { fn } from 'storybook/test';
 import { GridlerGoAPIExampleEventlog } from './Examples.goapi';
 
 const Renderable = (props: any) => {
-  return <Box h="100%" mih="400px" miw="400px" w='100%' > <GridlerGoAPIExampleEventlog {...props} /></Box>;
+  return (
+    <Box h="100%" mih="400px" miw="400px" w="100%">
+      {' '}
+      <GridlerGoAPIExampleEventlog {...props} />
+    </Box>
+  );
 };
 
 const meta = {
@@ -19,7 +25,7 @@ const meta = {
   component: Renderable,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
+    //layout: 'centered',
   },
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],

src/Gridler/stories/Gridler.localdata.stories.tsx

@@ -1,3 +1,4 @@
+//@ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Box } from '@mantine/core';
@@ -6,7 +7,12 @@ import { fn } from 'storybook/test';
 import { GridlerLocaldataExampleEventlog } from './Examples.localdata';
 
 const Renderable = (props: any) => {
-  return <Box h="100%" mih="400px" miw="400px" w='100%' > <GridlerLocaldataExampleEventlog {...props} /></Box>;
+  return (
+    <Box h="100%" mih="400px" miw="400px" w="100%">
+      {' '}
+      <GridlerLocaldataExampleEventlog {...props} />
+    </Box>
+  );
 };
 
 const meta = {
@@ -19,7 +25,7 @@ const meta = {
   component: Renderable,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
+    // layout: 'centered',
   },
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],

src/Gridler/utils/golang-restapi-v2/index.ts

@@ -0,0 +1,270 @@
+import {b64EncodeUnicode} from '@warkypublic/artemis-kit/base64'
+const TOKEN_KEY = 'gridler_golang_restapi_v2_token'
+
+export type APIOptionsType = {
+    autocreate?: boolean
+    autoref?: boolean
+    baseurl?: string
+    getAPIProvider?: () => { provider: string; providerKey: string }
+    getAuthToken?: () => string
+    operations?: Array<FetchAPIOperation>
+    postfix?: string
+    prefix?: string
+    requestTimeoutSec?: number
+}
+
+
+
+export interface APIResponse {
+    errmsg: string
+    payload?: any
+    retval: number
+}
+export interface FetchAPIOperation {
+    name?: string
+    op?: string
+    type: GoAPIHeaderTypes //x-fieldfilter
+    value: string
+}
+/**
+ * @description Types for the Go Rest API headers
+ * @typedef {String} GoAPIEnum
+*/
+export type GoAPIEnum =
+  | 'advsql'
+  | 'api-key'
+  | 'api-range-from'
+  | 'api-range-size'
+  | 'api-range-total'
+  | 'api-src'
+  | 'api'
+  | 'association_autocreate'
+  | 'association_autoupdate'
+  | 'association-update'
+  | 'cql-sel'
+  | 'cursor-backward'// For x cursor-backward header
+  | 'cursor-forward' // For x cursor-forward header
+  | 'custom-sql-join'
+  | 'custom-sql-or'
+  | 'custom-sql-w'
+  | 'detailapi'
+  | 'distinct'
+  | 'expand'
+  | 'fetch-rownumber'
+  | 'fieldfilter'
+  | 'fieldfilter'
+  | 'files' //For x files header
+  | 'func'
+  | 'limit'
+  | 'no-return'
+  | 'not-select-fields'
+  | 'offset'
+  | 'parm'
+  | 'pkrow'
+  | 'preload'
+  | 'searchand'
+  | 'searchfilter'
+  | 'searchfilter'
+  | 'searchop'
+  | 'searchop'
+  | 'searchor'
+  | 'select-fields'
+  | 'simpleapi'
+  | 'skipcache'
+  | 'skipcount'
+  | 'sort'
+
+
+export type GoAPIHeaderKeys = `x-${GoAPIEnum}`
+
+
+export type GoAPIHeaderTypes = GoAPIEnum & string
+
+
+export interface GoAPIOperation {
+  name?: string
+  op?: string
+  type: GoAPIHeaderTypes //x-fieldfilter
+  value: string
+}
+export interface MetaData {
+    limit?: number
+    offset?: number
+    total?: number
+}
+
+
+/**
+ * Builds an array of objects by encoding specific values and setting headers.
+ *
+ * @param {Array<FetchAPIOperation>} ops - The array of FetchAPIOperation objects to be built.
+ * @param {Headers} [headers] - Optional headers to be set.
+ * @return {Array<FetchAPIOperation>} - The built array of FetchAPIOperation objects.
+ */
+const buildGoAPIOperation = (
+  ops: Array<FetchAPIOperation>,
+  headers?: Headers
+): Array<FetchAPIOperation> => {
+  const newops = [...ops.filter((i) => i !== undefined && i.type !== undefined)]
+
+   
+  for (let i = 0; i < newops.length; i++) {
+    if (!newops[i].name || newops[i].name === '') {
+      newops[i].name = ''
+    }
+    if (newops[i].type === 'files' && !newops[i].value.startsWith('__')) {
+      newops[i].value = `__${b64EncodeUnicode(newops[i].value)}__`
+    }
+    if (newops[i].type === 'advsql' && !newops[i].value.startsWith('__')) {
+      newops[i].value = `__${b64EncodeUnicode(newops[i].value)}__`
+    }
+
+    if (newops[i].type === 'custom-sql-or' && !newops[i].value.startsWith('__')) {
+      newops[i].value = `__${b64EncodeUnicode(newops[i].value)}__`
+    }
+
+    if (newops[i].type === 'custom-sql-join' && !newops[i].value.startsWith('__')) {
+      newops[i].value = `__${b64EncodeUnicode(newops[i].value)}__`
+    }
+    if (newops[i].type === 'not-select-fields' && !newops[i].value.startsWith('__')) {
+      newops[i].value = `__${b64EncodeUnicode(newops[i].value)}__`
+    }
+    if (newops[i].type === 'custom-sql-w' && !newops[i].value.startsWith('__')) {
+      newops[i].value = `__${b64EncodeUnicode(newops[i].value)}__`
+    }
+    if (newops[i].type === 'select-fields' && !newops[i].value.startsWith('__')) {
+      newops[i].value = `__${b64EncodeUnicode(newops[i].value)}__`
+    }
+    if (newops[i].type === 'cql-sel' && !newops[i].value.startsWith('__')) {
+      newops[i].value = `__${b64EncodeUnicode(newops[i].value)}__`
+    }
+
+    if (headers) {
+      if (!newops || newops.length === 0) {
+        headers.set(`x-limit`, '10')
+      }
+
+      if (newops[i].type === 'association_autoupdate') {
+        headers.set(`association_autoupdate`, newops[i].value ?? '1')
+      }
+      if (newops[i].type === 'association_autocreate') {
+        headers.set(`association_autocreate`, newops[i].value ?? '1')
+      }
+      if (
+        newops[i].type === 'searchop' ||
+        newops[i].type === 'searchor' ||
+        newops[i].type === 'searchand'
+      ) {
+        headers.set(
+          encodeURIComponent(`x-${newops[i].type}-${newops[i].op}-${newops[i].name}`),
+          String(newops[i].value)
+        )
+      } else {
+        headers.set(
+          encodeURIComponent(
+            `x-${newops[i].type}${newops[i].name && newops[i].name !== '' ? '-' + newops[i].name : ''}`
+          ),
+          String(newops[i].value)
+        )
+      }
+    }
+  }
+
+  return newops
+}
+
+/**
+ * Retrieves the headers from an array of FetchAPIOperation objects and returns them as an object.
+ *
+ * @param {Array<FetchAPIOperation>} ops - The array of FetchAPIOperation objects.
+ * @return {{ [key: string]: string }} - The headers as an object with string keys and string values.
+ */
+const GoAPIHeaders = (
+  ops: Array<FetchAPIOperation>,
+  headers?: Headers
+): { [key: string]: string } => {
+  const head = new Headers()
+  const headerlist: Record<string,string> = {}
+
+  const authToken = getAuthToken?.()
+  if (authToken && authToken !== '') {
+     
+    head.set('Authorization', `Token ${authToken}`)
+  } else {
+    const token = getAuthToken()
+    if (token) {
+      head.set('Authorization', `Token ${token}`)
+    }
+  }
+
+
+  if (headers) {
+    headers.forEach((v, k) => {
+      head.set(k, v)
+    })
+  }
+  const distinctOperations: Array<FetchAPIOperation> = []
+
+  for (const value of ops?.filter((val) => !!val) ?? []) {
+    const index = distinctOperations.findIndex(
+      (searchValue) => searchValue.name === value.name && searchValue.type === value.type
+    )
+    if (index === -1) {
+      distinctOperations.push(value)
+    } else {
+      distinctOperations[index] = value
+    }
+  }
+
+  buildGoAPIOperation(distinctOperations, head)
+
+  head?.forEach((v, k) => {
+    headerlist[k] = v
+  })
+
+  if (headers) {
+    for (const key of Object.keys(headerlist)) {
+      headers.set(key, headerlist[key])
+    }
+  }
+
+  return headerlist
+}
+
+const callbacks = {
+    getAuthToken: () => {
+    if (localStorage) {
+        const token = localStorage.getItem(TOKEN_KEY)
+        if (token) {
+        return token
+        }
+    }
+    return undefined
+    }
+}
+
+/**
+ * Retrieves the authentication token from local storage.
+ *
+ * @return {string | undefined} The authentication token if found, otherwise undefined
+ */
+const getAuthToken = () => callbacks?.getAuthToken?.()
+
+const setAuthTokenCallback = (cb: ()=> string) => {
+    callbacks.getAuthToken = cb
+    return callbacks.getAuthToken
+}
+
+/**
+ * Sets the authentication token in the local storage.
+ *
+ * @param {string} token - The authentication token to be set.
+ */
+const setAuthToken = (token: string) => {
+  if (localStorage) {
+    localStorage.setItem(TOKEN_KEY, token)
+  }
+}
+
+
+export {buildGoAPIOperation,getAuthToken,GoAPIHeaders,setAuthToken,setAuthTokenCallback}

src/Gridler/utils/golang-restapi-v2/types.ts

@@ -1,81 +0,0 @@
-export type APIOptionsType = {
-    autocreate?: boolean
-    autoref?: boolean
-    baseurl?: string
-    getAPIProvider?: () => { provider: string; providerKey: string }
-    getAuthToken?: () => string
-    operations?: Array<FetchAPIOperation>
-    postfix?: string
-    prefix?: string
-    requestTimeoutSec?: number
-}
-
-
-
-export interface APIResponse {
-    errmsg: string
-    payload?: any
-    retval: number
-}
-export interface FetchAPIOperation {
-    name?: string
-    op?: string
-    type: FetchOpTypes //x-fieldfilter
-    value: string
-}
-export type FetchOpTypes = GoAPIEnum & string
-
-
-/**
- * @description Types for the Go Rest API headers
- * @typedef {String} GoAPIEnum
-*/
-export type GoAPIEnum = 'advsql'
-    | 'api-key'
-    | 'api-range-from'
-    | 'api-range-size'
-    | 'api-range-total'
-    | 'api-src'
-    | 'api'
-    | 'association_autocreate'
-    | 'association_autoupdate'
-    | 'association-update'
-    | 'cql-sel'
-    | 'custom-sql-join'
-    | 'custom-sql-or'
-    | 'custom-sql-w'
-    | 'detailapi'
-    | 'distinct'
-    | 'expand'
-    | 'fetch-rownumber'
-    | 'fieldfilter'
-    | 'fieldfilter'
-    | 'func'
-    | 'limit'
-    | 'no-return'
-    | 'not-select-fields'
-    | 'offset'
-    | 'parm'
-    | 'pkrow'
-    | 'preload'
-    | 'searchfilter'
-    | 'searchfilter'
-    | 'searchop'
-    | 'searchop'
-    | 'select-fields'
-    | 'simpleapi'
-    | 'skipcache'
-    | 'skipcount'
-    | 'sort'
-
-
-export type GoAPIHeaderKeys = `x-${GoAPIEnum}`
-
-
-export type MetaCallback = (data: MetaData) => void
-
-export interface MetaData {
-    limit?: number
-    offset?: number
-    total?: number
-}

src/Gridler/utils/index.ts

@@ -0,0 +1 @@
+export {type APIOptionsType,type FetchAPIOperation,GoAPIHeaders} from './golang-restapi-v2'

src/MantineBetterMenu/MantineBetterMenu.stories.tsx

@@ -5,21 +5,20 @@ import { fn } from 'storybook/test';
 
 import { MantineBetterMenusProvider, useMantineBetterMenus } from './';
 
-
 const Renderable = (props: Record<string, unknown>) => {
   return (
-  <MantineBetterMenusProvider providerID='test'  {...props} >
+    <MantineBetterMenusProvider providerID="test" {...props}>
       <Menu />
     </MantineBetterMenusProvider>
   );
-}
+};
 
 const Menu = () => {
   const menus = useMantineBetterMenus();
   //menus.setState("menus",[{id:"test",items:[{id:"1",label:"Test",onClick:()=>{console.log("Clicked")}}]}])
 
-  return <Button onClick={()=>  menus.show("test",{})}>Menu</Button>;
+  return <Button onClick={() => menus.show('test', {})}>Menu</Button>;
-}
+};
 
 const meta = {
   // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
@@ -31,7 +30,7 @@ const meta = {
   component: Renderable,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
+    //layout: 'centered',
   },
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
@@ -44,8 +43,6 @@ type Story = StoryObj<typeof meta>;
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const BasicExample: Story = {
   args: {
-
     label: 'Test',
   },
 };
-

src/MantineBetterMenu/MenuRenderer.tsx

@@ -80,7 +80,7 @@ const MenuItemRenderer = ({ children, label, ...props }: MantineBetterMenuInstan
               props.onClick?.(e);
               if (props.onClickAsync) {
                 setLoading(true);
-                props.onClickAsync().finally(() => setLoading(false));
+                props.onClickAsync(e).finally(() => setLoading(false));
               }
             }}
             styles={{
@@ -120,7 +120,7 @@ const MenuItemRenderer = ({ children, label, ...props }: MantineBetterMenuInstan
         props.onClick?.(e);
         if (props.onClickAsync) {
           setLoading(true);
-          props.onClickAsync().finally(() => setLoading(false));
+          props.onClickAsync(e).finally(() => setLoading(false));
         }
       }}
       styles={{

src/MantineBetterMenu/Store.tsx

@@ -22,7 +22,7 @@ export interface MantineBetterMenuInstanceItem extends Partial<MenuItemProps> {
   items?: Array<MantineBetterMenuInstanceItem>;
   label?: string;
   onClick?: (e?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  onClickAsync?: () => Promise<void>;
+  onClickAsync?: (e?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => Promise<void>;
   renderer?:
     | ((props: MantineBetterMenuInstanceItem & Record<string, unknown>) => ReactNode)
     | ReactNode;