@solidstarters/solid-core-ui 0.1.26 → 1.0.0

package/src/components/core/form/SolidFormView.tsx

@@ -1,37 +1,37 @@
 "use client";
 
-import { SolidCancelButton } from "@/components/common/CancelButton";
-import { createPermission, deletePermission, updatePermission } from "@/helpers/permissions";
-import { createSolidEntityApi } from "@/redux/api/solidEntityApi";
+import * as Yup from "yup";
+import React, { useEffect, useRef, useState } from "react";
+import { TabView, TabPanel } from "primereact/tabview";
+import "primeflex/primeflex.css";
 import { useGetSolidViewLayoutQuery } from "@/redux/api/solidViewApi";
-import { useLazyCheckIfPermissionExistsQuery } from "@/redux/api/userApi";
-import { FetchBaseQueryError } from "@reduxjs/toolkit/dist/query";
+import qs from "qs";
 import { useFormik } from "formik";
-import { usePathname, useRouter } from "next/navigation";
-import "primeflex/primeflex.css";
 import { Button } from "primereact/button";
-import { Dialog } from "primereact/dialog";
-import { TabPanel, TabView } from "primereact/tabview";
-import { Toast } from "primereact/toast";
-import qs from "qs";
-import { useEffect, useRef, useState } from "react";
-import * as Yup from "yup";
+import { SolidShortTextField } from "./fields/SolidShortTextField";
 import { FormikObject, ISolidField, SolidFieldProps } from "./fields/ISolidField";
-import { SolidBooleanField } from "./fields/SolidBooleanField";
-import { SolidDateField } from "./fields/SolidDateField";
-import { SolidDateTimeField } from "./fields/SolidDateTimeField";
-import { SolidDecimalField } from "./fields/SolidDecimalField";
+import { SolidSelectionStaticField } from "./fields/SolidSelectionStaticField";
+import { SolidSelectionDynamicField } from "./fields/SolidSelectionDynamicField";
+import { createSolidEntityApi } from "@/redux/api/solidEntityApi";
+import { SolidRelationField } from "./fields/SolidRelationField";
+import { SolidMediaSingleField } from "./fields/SolidMediaSingleField";
+import { SolidMediaMultipleField } from "./fields/SolidMediaMultipleField";
+import { usePathname, useRouter } from "next/navigation";
+import { CancelButton, SolidCancelButton } from "@/components/common/CancelButton";
+import { Dialog } from "primereact/dialog";
 import { SolidIntegerField } from "./fields/SolidIntegerField";
+import { SolidDateTimeField } from "./fields/SolidDateTimeField";
 import { SolidJsonField } from "./fields/SolidJsonField";
+import { FetchBaseQueryError } from "@reduxjs/toolkit/dist/query";
+import { Toast } from "primereact/toast";
+import { SolidDecimalField } from "./fields/SolidDecimalField";
 import { SolidLongTextField } from "./fields/SolidLongTextField";
-import { SolidMediaMultipleField } from "./fields/SolidMediaMultipleField";
-import { SolidMediaSingleField } from "./fields/SolidMediaSingleField";
-import { SolidRelationField } from "./fields/SolidRelationField";
+import { SolidBooleanField } from "./fields/SolidBooleanField";
 import { SolidRichTextField } from "./fields/SolidRichTextField";
-import { SolidSelectionDynamicField } from "./fields/SolidSelectionDynamicField";
-import { SolidSelectionStaticField } from "./fields/SolidSelectionStaticField";
-import { SolidShortTextField } from "./fields/SolidShortTextField";
+import { SolidDateField } from "./fields/SolidDateField";
 import { SolidTimeField } from "./fields/SolidTimeField";
+import { useLazyCheckIfPermissionExistsQuery } from "@/redux/api/userApi";
+import { createPermission, deletePermission, updatePermission } from "@/helpers/permissions";
 
 export type SolidFormViewProps = {
     moduleName: string;

package/src/components/core/form/fields/ISolidField.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { FieldConfig, FieldHelperProps, FieldInputProps, FieldMetaProps, FormikConfig, FormikErrors, FormikState, FormikTouched, FormikValues } from "formik";
 import { Schema } from "yup";
 

package/src/components/core/form/fields/SolidBooleanField.tsx

@@ -1,10 +1,13 @@
+'use client';
+import { Schema } from "yup";
+import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+import * as Yup from 'yup';
+import { Tooltip } from "primereact/tooltip";
+import { InputText } from "primereact/inputtext";
 import { Message } from "primereact/message";
 import { SelectButton } from "primereact/selectbutton";
 import { classNames } from "primereact/utils";
 import { useEffect } from "react";
-import * as Yup from 'yup';
-import { Schema } from "yup";
-import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
 
 export class SolidBooleanField implements ISolidField {
 

package/src/components/core/form/fields/SolidDateField.tsx

@@ -1,9 +1,11 @@
-import { Calendar } from "primereact/calendar";
-import { Message } from "primereact/message";
-import { useRef } from "react";
-import * as Yup from 'yup';
+'use client';
 import { Schema } from "yup";
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+import * as Yup from 'yup';
+import { Tooltip } from "primereact/tooltip";
+import { Message } from "primereact/message";
+import { Calendar } from "primereact/calendar";
+import { useRef } from "react";
 
 export class SolidDateField implements ISolidField {
 

package/src/components/core/form/fields/SolidDateTimeField.tsx

@@ -1,9 +1,11 @@
-import { Calendar } from "primereact/calendar";
-import { Message } from "primereact/message";
-import { useRef } from "react";
-import * as Yup from 'yup';
+'use client';
 import { Schema } from "yup";
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+import * as Yup from 'yup';
+import { Tooltip } from "primereact/tooltip";
+import { Message } from "primereact/message";
+import { Calendar } from "primereact/calendar";
+import { useRef } from "react";
 
 export class SolidDateTimeField implements ISolidField {
 

package/src/components/core/form/fields/SolidDecimalField.tsx

@@ -1,8 +1,11 @@
-import { InputNumber } from "primereact/inputnumber";
-import { Message } from "primereact/message";
-import * as Yup from 'yup';
+'use client';
 import { Schema } from "yup";
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+import * as Yup from 'yup';
+import { Tooltip } from "primereact/tooltip";
+import { InputText } from "primereact/inputtext";
+import { Message } from "primereact/message";
+import { InputNumber } from "primereact/inputnumber";
 
 export class SolidDecimalField implements ISolidField {
 

package/src/components/core/form/fields/SolidIntegerField.tsx

@@ -1,8 +1,11 @@
-import { InputNumber } from "primereact/inputnumber";
-import { Message } from "primereact/message";
-import * as Yup from 'yup';
+'use client';
 import { Schema } from "yup";
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+import * as Yup from 'yup';
+import { Tooltip } from "primereact/tooltip";
+import { InputText } from "primereact/inputtext";
+import { Message } from "primereact/message";
+import { InputNumber } from "primereact/inputnumber";
 
 export class SolidIntegerField implements ISolidField {
 

package/src/components/core/form/fields/SolidJsonField.tsx

@@ -1,8 +1,15 @@
-import CodeEditor from "@/components/common/CodeEditor";
-import { Message } from "primereact/message";
-import * as Yup from 'yup';
+'use client';
 import { Schema } from "yup";
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+import * as Yup from 'yup';
+import { Tooltip } from "primereact/tooltip";
+import { InputText } from "primereact/inputtext";
+import { Message } from "primereact/message";
+import { InputNumber } from "primereact/inputnumber";
+import { Calendar } from "primereact/calendar";
+import ReactCodeMirror, { oneDark } from "@uiw/react-codemirror";
+import { javascript } from "@codemirror/lang-javascript";
+import CodeEditor from "@/components/common/CodeEditor";
 
 export class SolidJsonField implements ISolidField {
 

package/src/components/core/form/fields/SolidLongTextField.tsx

@@ -1,8 +1,10 @@
-import { InputTextarea } from "primereact/inputtextarea";
-import { Message } from "primereact/message";
-import * as Yup from 'yup';
+'use client';
 import { Schema } from "yup";
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+import * as Yup from 'yup';
+import { Tooltip } from "primereact/tooltip";
+import { Message } from "primereact/message";
+import { InputTextarea } from "primereact/inputtextarea";
 
 export class SolidLongTextField implements ISolidField {
 

package/src/components/core/form/fields/SolidMediaMultipleField.tsx

@@ -1,14 +1,16 @@
+'use client';
+import { Schema } from "yup";
+import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+import * as Yup from 'yup';
+import { Tooltip } from "primereact/tooltip";
+import { Message } from "primereact/message";
 import { DropzonePlaceholder } from "@/components/common/DropzonePlaceholder";
 import { DropzoneUpload } from "@/components/common/DropzoneUpload";
-import { useDeleteMediaMutation } from "@/redux/api/mediaApi";
 import { Button } from "primereact/button";
-import { Dialog } from "primereact/dialog";
-import { Message } from "primereact/message";
-import { useEffect, useState } from "react";
 import { useDropzone } from "react-dropzone";
-import * as Yup from 'yup';
-import { Schema } from "yup";
-import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+import { useEffect, useState } from "react";
+import { useDeleteMediaMutation } from "@/redux/api/mediaApi";
+import { Dialog } from "primereact/dialog";
 
 export class SolidMediaMultipleField implements ISolidField {
 

package/src/components/core/form/fields/SolidMediaSingleField.tsx

@@ -1,14 +1,16 @@
+'use client';
+import { Schema } from "yup";
+import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+import * as Yup from 'yup';
+import { Tooltip } from "primereact/tooltip";
+import { Message } from "primereact/message";
 import { DropzonePlaceholder } from "@/components/common/DropzonePlaceholder";
 import { DropzoneUpload } from "@/components/common/DropzoneUpload";
-import { useDeleteMediaMutation } from "@/redux/api/mediaApi";
 import { Button } from "primereact/button";
-import { Dialog } from "primereact/dialog";
-import { Message } from "primereact/message";
-import { useEffect, useState } from "react";
 import { useDropzone } from "react-dropzone";
-import * as Yup from 'yup';
-import { Schema } from "yup";
-import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+import { useEffect, useState } from "react";
+import { useDeleteMediaMutation } from "@/redux/api/mediaApi";
+import { Dialog } from "primereact/dialog";
 
 export class SolidMediaSingleField implements ISolidField {
 

package/src/components/core/form/fields/SolidRelationField.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { Schema } from "yup";
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
 import { SolidRelationManyToOneField } from "./relations/SolidRelationManyToOneField";

package/src/components/core/form/fields/SolidRichTextField.tsx

@@ -1,9 +1,12 @@
-import { Editor } from "primereact/editor";
-import { Message } from "primereact/message";
-import { useState } from "react";
-import * as Yup from 'yup';
+'use client';
 import { Schema } from "yup";
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+import * as Yup from 'yup';
+import { Tooltip } from "primereact/tooltip";
+import { InputText } from "primereact/inputtext";
+import { Message } from "primereact/message";
+import { Editor } from "primereact/editor";
+import { useEffect, useState } from "react";
 
 export class SolidRichTextField implements ISolidField {
 

package/src/components/core/form/fields/SolidSelectionDynamicField.tsx

@@ -1,11 +1,13 @@
-import { useLazyGetSelectionDynamicValuesQuery } from "@/redux/api/fieldApi";
-import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+'use client';
+import { Schema } from "yup";
+import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+import * as Yup from 'yup';
+import { Tooltip } from "primereact/tooltip";
 import { Message } from "primereact/message";
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
 import qs from "qs";
+import { useLazyGetSelectionDynamicValuesQuery } from "@/redux/api/fieldApi";
 import { useState } from "react";
-import * as Yup from 'yup';
-import { Schema } from "yup";
-import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
 
 
 export class SolidSelectionDynamicField implements ISolidField {

package/src/components/core/form/fields/SolidSelectionStaticField.tsx

@@ -1,9 +1,12 @@
-import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
-import { Message } from "primereact/message";
-import { useState } from "react";
-import * as Yup from 'yup';
+'use client';
 import { Schema } from "yup";
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+import * as Yup from 'yup';
+import { Tooltip } from "primereact/tooltip";
+import { InputText } from "primereact/inputtext";
+import { Message } from "primereact/message";
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+import { useState } from "react";
 
 export class SolidSelectionStaticField implements ISolidField {
 

package/src/components/core/form/fields/SolidShortTextField.tsx

@@ -1,8 +1,10 @@
-import { InputText } from "primereact/inputtext";
-import { Message } from "primereact/message";
-import * as Yup from 'yup';
+'use client';
 import { Schema } from "yup";
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+import * as Yup from 'yup';
+import { Tooltip } from "primereact/tooltip";
+import { InputText } from "primereact/inputtext";
+import { Message } from "primereact/message";
 
 export class SolidShortTextField implements ISolidField {
 

package/src/components/core/form/fields/SolidTimeField.tsx

@@ -1,9 +1,11 @@
-import { Calendar } from "primereact/calendar";
-import { Message } from "primereact/message";
-import { useRef } from "react";
-import * as Yup from 'yup';
+'use client';
 import { Schema } from "yup";
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+import * as Yup from 'yup';
+import { Tooltip } from "primereact/tooltip";
+import { Message } from "primereact/message";
+import { Calendar } from "primereact/calendar";
+import { useRef } from "react";
 
 export class SolidTimeField implements ISolidField {
 

package/src/components/core/form/fields/relations/SolidRelationManyToManyField.tsx

@@ -1,17 +1,21 @@
+'use client';
+import { Schema } from "yup";
+import { FormikObject, ISolidField, SolidFieldProps } from "../ISolidField";
+import * as Yup from 'yup';
+import { Message } from "primereact/message";
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+import qs from "qs";
+import { useEffect, useState } from "react";
 import { createSolidEntityApi } from "@/redux/api/solidEntityApi";
+import { InputText } from "primereact/inputtext";
+import { Checkbox } from "primereact/checkbox";
+import { Panel } from "primereact/panel";
 import { camelCase, capitalize } from "lodash";
-import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
 import { Button } from "primereact/button";
-import { Checkbox } from "primereact/checkbox";
+import { original } from "@reduxjs/toolkit";
 import { Dialog } from "primereact/dialog";
-import { Message } from "primereact/message";
-import { Panel } from "primereact/panel";
-import qs from "qs";
-import { useEffect, useState } from "react";
-import * as Yup from 'yup';
-import { Schema } from "yup";
 import SolidFormView from "../../SolidFormView";
-import { FormikObject, ISolidField, SolidFieldProps } from "../ISolidField";
+import { Menu } from "primereact/menu";
 
 
 

package/src/components/core/form/fields/relations/SolidRelationManyToOneField.tsx

@@ -1,11 +1,13 @@
-import { createSolidEntityApi } from "@/redux/api/solidEntityApi";
-import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+'use client';
+import { Schema } from "yup";
+import { FormikObject, ISolidField, SolidFieldProps } from "../ISolidField";
+import * as Yup from 'yup';
+import { Tooltip } from "primereact/tooltip";
 import { Message } from "primereact/message";
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
 import qs from "qs";
 import { useState } from "react";
-import * as Yup from 'yup';
-import { Schema } from "yup";
-import { FormikObject, ISolidField, SolidFieldProps } from "../ISolidField";
+import { createSolidEntityApi } from "@/redux/api/solidEntityApi";
 
 
 export class SolidRelationManyToOneField implements ISolidField {

package/src/components/core/form/fields/relations/SolidRelationOneToManyField.tsx

@@ -1,11 +1,18 @@
+'use client';
+import { Schema } from "yup";
+import { FormikObject, ISolidField, SolidFieldProps } from "../ISolidField";
+import * as Yup from 'yup';
+import { Message } from "primereact/message";
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+import qs from "qs";
+import { useEffect, useState } from "react";
+import { createSolidEntityApi } from "@/redux/api/solidEntityApi";
+import { InputText } from "primereact/inputtext";
 import { SolidListView } from "@/components/core/list/SolidListView";
 import { camelCase } from "lodash";
+import { Button } from "primereact/button";
 import { Dialog } from "primereact/dialog";
-import { useEffect, useState } from "react";
-import * as Yup from 'yup';
-import { Schema } from "yup";
 import SolidFormView from "../../SolidFormView";
-import { FormikObject, ISolidField, SolidFieldProps } from "../ISolidField";
 
 
 export class SolidRelationOneToManyField implements ISolidField {

package/src/components/core/kanban/KanbanBoard.tsx

@@ -1,4 +1,5 @@
 // @ts-nocheck
+'use client';
 
 import React, { useState, useEffect } from "react";
 import { DragDropContext, DropResult } from "@hello-pangea/dnd";

package/src/components/core/kanban/KanbanCard.tsx

@@ -1,4 +1,5 @@
 // @ts-nocheck
+'use client';
 
 import React from "react";
 import { Draggable, DraggableProvided } from "@hello-pangea/dnd";

package/src/components/core/kanban/KanbanColumn.tsx

@@ -1,4 +1,5 @@
 // @ts-nocheck
+'use client';
 
 
 import React, { useRef } from "react";

package/src/components/core/kanban/SolidKanbanView.tsx

@@ -1,23 +1,26 @@
 "use client";
-import { createPermission, deletePermission, updatePermission } from "@/helpers/permissions";
-import { createSolidEntityApi } from "@/redux/api/solidEntityApi";
-import { useGetSolidViewLayoutQuery } from "@/redux/api/solidViewApi";
-import { useLazyCheckIfPermissionExistsQuery } from "@/redux/api/userApi";
-import { DropResult } from "@hello-pangea/dnd";
-import Link from "next/link";
-import { FilterMatchMode } from "primereact/api";
-import { Button } from "primereact/button";
+import React, { useState, useEffect } from "react";
 import {
+  DataTable,
   DataTableFilterMeta,
-  DataTableStateEvent
+  DataTableStateEvent,
 } from "primereact/datatable";
-import { Dialog } from "primereact/dialog";
+import { Column } from "primereact/column";
+import { FilterMatchMode } from "primereact/api";
+import Link from "next/link";
 import qs from "qs";
-import { useEffect, useState } from "react";
+import { Button } from "primereact/button";
+import { Dialog } from "primereact/dialog";
+import { createSolidEntityApi } from "@/redux/api/solidEntityApi";
+import { useGetSolidViewLayoutQuery } from "@/redux/api/solidViewApi";
+import { useLazyCheckIfPermissionExistsQuery } from "@/redux/api/userApi";
+import { createPermission, deletePermission, updatePermission } from "@/helpers/permissions";
+import KanbanBoard from "./KanbanBoard";
+import { SolidGlobalSearchElement } from "../common/SolidGlobalSearchElement";
 import { SolidConfigureLayoutElement } from "../common/SolidConfigureLayoutElement";
 import { SolidCreateButton } from "../common/SolidCreateButton";
-import { SolidGlobalSearchElement } from "../common/SolidGlobalSearchElement";
-import KanbanBoard from "./KanbanBoard";
+import { DropResult } from "@hello-pangea/dnd";
+import { filter } from "lodash";
 
 type SolidKanbanViewParams = {
   moduleName: string;
@@ -220,17 +223,18 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
       if (toPopulate) {
         const queryData = {
           offset: 0,
-          limit: 10,
+          limit: 2,
           fields: [`${groupByFieldName}`, `count(${groupByFieldName})`],
           groupBy: groupByFieldName,
           populate: toPopulate,
-          populateGroup: true
+          populateGroup: true,
+          groupFilter: {
+            limit: 100,
+            offset: 0
+          }
           // sort: [`id:desc`],
         };
-
         // fields=status&groupBy=status&fields=count(status)&populateGroup=true
-
-
         const queryString = qs.stringify(queryData, {
           encodeValuesOnly: true
         });
@@ -384,8 +388,7 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
       fields: [`${groupByFieldName}`, `count(${groupByFieldName})`],
       groupBy: groupByFieldName,
       populateGroup: true,
-      filters: formattedFilters
-
+      filters: formattedFilters,
     };
 
     // if (sortField) {
@@ -547,8 +550,8 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
     const destinationGroupName = destination.droppableId;
 
     // Find the source and destination groups
-    const sourceGroupIndex = kanbanViewData.findIndex((group :any) => group.groupName === sourceGroupName);
-    const destinationGroupIndex = kanbanViewData.findIndex((group :any) => group.groupName === destinationGroupName);
+    const sourceGroupIndex = kanbanViewData.findIndex((group: any) => group.groupName === sourceGroupName);
+    const destinationGroupIndex = kanbanViewData.findIndex((group: any) => group.groupName === destinationGroupName);
 
     if (sourceGroupIndex === -1 || destinationGroupIndex === -1) return;
 
@@ -575,7 +578,7 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
 
     // Update the kanbanViewData state
     setKanbanViewData((prevData: typeof kanbanViewData) =>
-      prevData.map((group :any) => {
+      prevData.map((group: any) => {
         if (group.groupName === sourceGroupName) {
           return sourceGroup;
         }
@@ -598,6 +601,8 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
     console.log("filter in kanbanview", filter);
   }
 
+  
+
   return (
     <>
       <div className="flex gap-3 mb-4 align-items-center justify-content-between kanban-view">

package/src/components/core/list/ListViewRowActionPopup.tsx

@@ -0,0 +1,36 @@
+'use client';
+import { Button } from "primereact/button"
+import { LoadDynamicJsxComponent } from "../common/LoadDynamicJsxComponent";
+
+
+export const ListViewRowActionPopup = ({ context }: any) => {
+
+    //Note if there is not custom component the need a api call to server 
+    // GenerateModuleCode  is my custom compoennt that will trigger code generation 
+    //Render dynamic lsit action contains code for dynamically rendering compoennt or retunr a fall back
+
+    const triggerServerAction = () => {
+
+        console.log("api  called");
+    }
+
+    return (
+        <div>
+            {
+                context?.rowAction?.action?.customComponent ?
+                    <LoadDynamicJsxComponent context={context}></LoadDynamicJsxComponent>
+                    :
+                    <>
+                        <h1>{context?.modelName}</h1>
+                        <h1>{context?.moduleName}</h1>
+                        <div className="flex justify-content-center">
+                            <Button label={context?.rowAction?.action?.confirmBtnLabel} icon="pi pi-check" className='small-button' severity="danger" autoFocus onClick={triggerServerAction} />
+                            <Button label={context?.rowAction?.action?.cancelBtnLabel} icon="pi pi-times" className='small-button' onClick={() => context.closeCustomRowActionPopup()} />
+                        </div>
+                    </>
+            }
+        </div>
+    )
+}
+
+