Merge branch 'main' of git.warky.dev:wdevs/oranguru

src/Former/Former.types.ts

@@ -23,8 +23,8 @@ export interface FormerProps<T extends FieldValues = any> {
   id?: string;
   keepOpen?: boolean;
   layout?: {
+    buttonArea?: "bottom" | "none" | "top";
     buttonAreaGroupProps?: GroupProps;
-    buttonOnTop?: boolean;
     closeButtonProps?: ButtonProps;
     closeButtonTitle?: React.ReactNode;
     renderBottom?: FormerSectionRender<T>;

src/Former/FormerLayoutBottom.tsx

@@ -2,8 +2,8 @@ import { useFormerStore } from './Former.store';
 import { FormerButtonArea } from './FormerButtonArea';
 
 export const FormerLayoutBottom = () => {
-  const { buttonOnTop, getState, opened, renderBottom } = useFormerStore((state) => ({
-    buttonOnTop: state.layout?.buttonOnTop,
+  const { buttonArea, getState, opened, renderBottom } = useFormerStore((state) => ({
+    buttonArea: state.layout?.buttonArea,
     getState: state.getState,
     opened: state.opened,
     renderBottom: state.layout?.renderBottom,
@@ -19,5 +19,5 @@ export const FormerLayoutBottom = () => {
     );
   }
 
-  return buttonOnTop ? <></> : <FormerButtonArea />;
+  return buttonArea === "bottom" ?  <FormerButtonArea /> : <></>;
 };

src/Former/FormerLayoutTop.tsx

@@ -2,8 +2,8 @@ import { useFormerStore } from './Former.store';
 import { FormerButtonArea } from './FormerButtonArea';
 
 export const FormerLayoutTop = () => {
-  const { buttonOnTop, getState, opened, renderTop } = useFormerStore((state) => ({
-    buttonOnTop: state.layout?.buttonOnTop,
+  const { buttonArea, getState, opened, renderTop } = useFormerStore((state) => ({
+    buttonArea: state.layout?.buttonArea,
     getState: state.getState,
     opened: state.opened,
     renderTop: state.layout?.renderTop,
@@ -18,5 +18,5 @@ export const FormerLayoutTop = () => {
       getState
     );
   }
-  return buttonOnTop ? <FormerButtonArea /> : <></>;
+  return buttonArea === "top" ? <FormerButtonArea /> : <></>;
 };

src/Former/stories/example.tsx

@@ -35,8 +35,8 @@ export const FormTest = () => {
     url: '',
   });
   const [layout, setLayout] = useState({
+    buttonArea: "bottom",
     buttonAreaGroupProps: { justify: 'center' },
-    buttonOnTop: false,
     title: 'Custom Former Title',
   } as FormerProps['layout']);
 
@@ -63,11 +63,13 @@ export const FormTest = () => {
           label="Disable HTML Form"
           onChange={(event) => setDisableHTML(event.currentTarget.checked)}
         />
-        <Switch
-          checked={layout?.buttonOnTop ?? false}
-          label="Button On Top"
-          onChange={(event) => setLayout({ ...layout, buttonOnTop: event.currentTarget.checked })}
+        <Select
+        data={['top', 'bottom', 'none']}
+  
+          onChange={(value) => setLayout({ ...layout, buttonArea: value as 'bottom' | 'none' | 'top' })}
+          value={layout?.buttonArea}
         />
+
         <Switch
           checked={apiOptions.type === 'api'}
           label="Use API"

src/Gridler/components/GridlerStore.tsx

@@ -202,7 +202,7 @@ export interface GridlerState {
   renderColumns?: GridlerColumns;
   setState: <K extends keyof GridlerStoreState>(
     key: K,
-    value: Partial<GridlerStoreState[K]>
+    value: GridlerStoreState[K]
   ) => void;
   setStateFN: <K extends keyof GridlerStoreState>(
     key: K,

src/Gridler/components/adaptors/GlidlerFormAdaptor.tsx

@@ -59,8 +59,8 @@ export function GlidlerFormAdaptor(props: {
       storeState: GridlerState,
       row?: Record<string, unknown>,
       col?: GridlerColumn,
-      defaultItems?: Array<unknown>
-    ) => {
+      defaultItems?: MantineBetterMenuInstanceItem[]
+    ): MantineBetterMenuInstanceItem[] => {
       //console.log('GlidlerFormInterface getMenuItems', id);
 
       if (id === 'header-menu') {

src/test/setup.ts

@@ -17,14 +17,14 @@ Object.defineProperty(window, 'matchMedia', {
 })
 
 // Mock ResizeObserver
-global.ResizeObserver = vi.fn().mockImplementation(() => ({
+globalThis.ResizeObserver = vi.fn().mockImplementation(() => ({
   disconnect: vi.fn(),
   observe: vi.fn(),
   unobserve: vi.fn(),
 }))
 
 // Mock IntersectionObserver
-global.IntersectionObserver = vi.fn().mockImplementation(() => ({
+globalThis.IntersectionObserver = vi.fn().mockImplementation(() => ({
   disconnect: vi.fn(),
   observe: vi.fn(),
   unobserve: vi.fn(),