@solidxai/core-ui 0.1.7-beta.0 → 0.1.7-beta.3

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

@@ -8,11 +8,8 @@ import { useFormik } from "formik";
 import { usePathname } from "../../../hooks/usePathname";
 import { useRouter } from "../../../hooks/useRouter";
 import { useSearchParams } from "../../../hooks/useSearchParams";
-import "primeflex/primeflex.css";
-import { Button } from "primereact/button";
-import { Dialog } from "primereact/dialog";
-import { TabPanel, TabView } from "primereact/tabview";
 import qs from "qs";
+import { getMediaTypeFromUrl } from "../../../helpers/mediaType";
 import React, { ChangeEvent, useEffect, useMemo, useRef, useState } from "react";
 import * as Yup from "yup";
 import { FormikObject, ISolidField, SolidFieldProps } from "./fields/ISolidField";
@@ -36,26 +33,28 @@ import { getExtensionComponent, getExtensionFunction } from "../../../helpers/re
 import { SolidFormWidgetProps, SolidUiEventResponse } from "../../../types/solid-core";
 import { SolidPasswordField } from "./fields/SolidPasswordField";
 import { SolidEmailField } from "./fields/SolidEmailField";
-import { Panel } from "primereact/panel";
 import { SolidFormUserViewLayout } from "./SolidFormUserViewLayout";
-import Lightbox from "yet-another-react-lightbox";
-import Counter from "yet-another-react-lightbox/plugins/counter";
-import Download from "yet-another-react-lightbox/plugins/download";
-import Video from "yet-another-react-lightbox/plugins/video";
-import "yet-another-react-lightbox/styles.css";
-import "yet-another-react-lightbox/plugins/counter.css";
+import { SolidLightbox } from "../../shad-cn-ui/SolidLightbox";
+import type { SolidLightboxSlide } from "../../shad-cn-ui/SolidLightbox";
 import { SolidFormActionHeader } from "./SolidFormActionHeader";
-import { SolidFormViewShimmerLoading } from "./SolidFormViewShimmerLoading";
 import { hasAnyRole } from "../../../helpers/rolesHelper";
 import SolidChatterLocaleTabView from "../locales/SolidChatterLocaleTabView";
-import { ConfirmDialog } from "primereact/confirmdialog";
-import { SolidXAIIcon } from "../solid-ai/SolidXAIIcon";
 import { ERROR_MESSAGES } from "../../../constants/error-messages";
 import { useLazyGetMcpUrlQuery, useLazyGetSolidSettingsQuery } from "../../../redux/api/solidSettingsApi";
 import { SolidFormFooter } from "./SolidFormFooter";
 import { normalizeSolidFormActionPath } from "../../../helpers/routePaths";
 import { showToast } from "../../../redux/features/toastSlice";
 import { useDispatch } from "react-redux";
+import { SolidButton, SolidConfirmDialog, SolidPanel } from "../../shad-cn-ui";
+import {
+    SolidDialog,
+    SolidDialogBody,
+    SolidDialogClose,
+    SolidDialogHeader,
+    SolidDialogSeparator,
+    SolidDialogTitle
+} from "../../shad-cn-ui/SolidDialog";
+import { SolidHeaderRequestStatus } from "../../common/SolidHeaderRequestStatus";
 
 export type SolidFormViewProps = {
     moduleName: string;
@@ -277,9 +276,9 @@ const SolidColumn = ({ children, attrs }: any) => {
         //figma fieldset ui
         attrs.label ?
             <div className={`${className}`}>
-                <Panel header={attrs.label} className="solid-column-panel">
+                <SolidPanel header={attrs.label} className="solid-column-panel">
                     <div className="grid">{children}</div>
-                </Panel>
+                </SolidPanel>
                 {/* <div className="p-fieldset">
                     <div className="solid-fieldset-header">
                         <div>{attrs.label}</div>
@@ -300,49 +299,59 @@ const SolidSheet = ({ children }: any) => (
     </div>
 );
 
+// Internal tab data carrier — SolidNotebook reads props from this
+const SolidPageTab = ({ children }: any) => <>{children}</>;
+
 const SolidNotebook = ({ children, activeTab, embeded }: any) => {
-    // const childrenArray = children;
-    // const childrenArray = React.Children.toArray(children).filter(Boolean);
-    const childrenArray = React.Children.toArray(children).filter(child => !!child);
+    const childrenArray = React.Children.toArray(children).filter(child => !!child) as any[];
 
     const router = useRouter();
     const pathname = usePathname();
     const searchParams = useSearchParams();
-
-    // Local state to manage active tab in embedded context
     const [localActiveTab, setLocalActiveTab] = useState(activeTab);
 
-    const activeIndex = useMemo(() => {
-        return childrenArray.findIndex((child: any) => {
-            return child.key === (embeded ? localActiveTab : activeTab);
-        });
-    }, [childrenArray, activeTab, localActiveTab, embeded]);
-
-    const handleTabChange = (e: any) => {
-        const selectedChild = childrenArray[e.index] as any;
-        const newTabLabel = selectedChild?.key;
+    const effectiveTab = embeded ? localActiveTab : activeTab;
 
-        if (newTabLabel) {
+    const activeIndex = useMemo(() => {
+        const idx = childrenArray.findIndex((child: any) => child.props?.tabKey === effectiveTab);
+        return idx >= 0 ? idx : 0;
+    }, [childrenArray, effectiveTab]);
+
+    const handleTabChange = (index: number) => {
+        const selectedChild = childrenArray[index];
+        const newTabKey = selectedChild?.props?.tabKey;
+        if (newTabKey) {
             if (!embeded) {
                 const queryParams = new URLSearchParams(searchParams.toString());
-                queryParams.set('activeTab', newTabLabel);
+                queryParams.set('activeTab', newTabKey);
                 router.push(`${pathname}?${queryParams.toString()}`);
             } else {
-                // Update the active tab state locally for embedded view
-                setLocalActiveTab(newTabLabel);
+                setLocalActiveTab(newTabKey);
             }
         }
     };
 
-
     return (
-        <div className="solid-tab-view w-full">
-            <TabView activeIndex={activeIndex >= 0 ? activeIndex : 0} onTabChange={handleTabChange}>
-                {/* {children} */}
-                {childrenArray}
-            </TabView>
+        <div className="solid-notebook w-full">
+            <div className="solid-notebook-tablist" role="tablist">
+                {childrenArray.map((child: any, index: number) => (
+                    <button
+                        key={index}
+                        type="button"
+                        role="tab"
+                        aria-selected={index === activeIndex}
+                        onClick={() => handleTabChange(index)}
+                        className={`solid-notebook-tab-trigger${index === activeIndex ? ' active' : ''}${child.props?.hasError ? ' error' : ''}`}
+                    >
+                        {child.props?.label}
+                    </button>
+                ))}
+            </div>
+            <div className="solid-notebook-content" role="tabpanel">
+                {childrenArray[activeIndex]}
+            </div>
         </div>
-    )
+    );
 };
 
 const SolidDynamicWidget = ({ widgetName, formik, field, solidFormViewMetaData, solidFormViewData }: any) => {
@@ -370,20 +379,13 @@ const SolidDynamicWidget = ({ widgetName, formik, field, solidFormViewMetaData,
 const SolidPage = ({ attrs, children, key, formik, fields }: any) => {
     const fieldsName = fields.map((f: any) => f.attrs.name);
     const errorCount = formik.submitCount > 0 ? fieldsName.filter((name: any) => !!formik.errors[name]).length : 0;
-    const label = (
-        <span style={{ color: errorCount > 0 ? 'red' : 'inherit' }}>
-            {attrs.label}{errorCount > 0 && ` (${errorCount})`}
-        </span>
-    );
-
+    const label = `${attrs.label}${errorCount > 0 ? ` (${errorCount})` : ''}`;
 
     return (
-
-        <TabPanel key={key} header={label} >
+        <SolidPageTab key={key} label={label} tabKey={key} hasError={errorCount > 0}>
             <div className="p-fluid">{children}</div>
-        </TabPanel>
-    )
-
+        </SolidPageTab>
+    );
 };
 
 // Original code...
@@ -1221,7 +1223,23 @@ const SolidFormView = (params: SolidFormViewProps) => {
             onSubmit: onFormikSubmit,
         });
 
-        return <SolidFormViewShimmerLoading />;
+        return (
+            <div className="solid-form-wrapper">
+                <div className="solid-form-section" style={{ borderRight: params.embeded !== true ? '1px solid var(--primary-light-color)' : '' }}>
+                    <div className="page-header solid-list-toolbar flex-column lg:flex-row">
+                        <div className="flex justify-content-between w-full solid-form-toolbar-row">
+                            <div className="flex gap-3 align-items-center solid-form-toolbar-left">
+                                <p className="m-0 view-title solid-text-wrapper">Loading form</p>
+                            </div>
+                            <div className="flex align-items-center solid-header-buttons-wrapper solid-form-toolbar-actions">
+                                <SolidHeaderRequestStatus label="Loading..." />
+                            </div>
+                        </div>
+                    </div>
+                    <div className="solid-view-loading-body-spacer flex-1 min-h-0" />
+                </div>
+            </div>
+        );
     }
     // At this point everything required to render the form is loaded, so we go ahead and start rendering things dynamically...
     else {
@@ -1358,11 +1376,11 @@ const SolidFormView = (params: SolidFormViewProps) => {
         }
 
         // Now render the form dynamically...
-        const renderFormElementDynamically: any = (element: any, recursiveFVMD: any) => {
+        const renderFormElementDynamically: any = (element: any, recursiveFVMD: any, path = "root") => {
             let { type, attrs, body, children } = element;
 
             // const key = attrs?.name ?? generateRandomKey();
-            const key = attrs?.label;
+            const key = attrs?.key ?? attrs?.name ?? attrs?.label ?? `${type}-${path}`;
             let visible = attrs?.visible;
             if (visible === undefined || visible === null) {
                 visible = true;
@@ -1381,11 +1399,11 @@ const SolidFormView = (params: SolidFormViewProps) => {
                 case "form":
                     if (!children)
                         children = [];
-                    return <div key={key}>{children.map((element: any) => renderFormElementDynamically(element, recursiveFVMD, formik))}</div>;
+                    return <div key={key}>{children.map((element: any, index: number) => renderFormElementDynamically(element, recursiveFVMD, `${path}.${index}`))}</div>;
                 case "div":
                     if (!children)
                         children = [];
-                    return <div key={key} {...attrs}>{children.map((element: any) => renderFormElementDynamically(element, recursiveFVMD, formik))}</div>
+                    return <div key={key} {...attrs}>{children.map((element: any, index: number) => renderFormElementDynamically(element, recursiveFVMD, `${path}.${index}`))}</div>
                 case "span":
                     return <span key={key} {...attrs}>{body}</span>
                 case "p":
@@ -1397,24 +1415,24 @@ const SolidFormView = (params: SolidFormViewProps) => {
                 case "ul":
                     if (!children)
                         children = [];
-                    return <ul key={key} {...attrs}>{children.map((element: any) => renderFormElementDynamically(element, recursiveFVMD, formik))}</ul>
+                    return <ul key={key} {...attrs}>{children.map((element: any, index: number) => renderFormElementDynamically(element, recursiveFVMD, `${path}.${index}`))}</ul>
                 case "li":
                     return <li key={key} {...attrs}>{body}</li>
                 case "sheet":
-                    return <SolidSheet key={key}>{children.map((element: any) => renderFormElementDynamically(element, recursiveFVMD, formik))}</SolidSheet>;
+                    return <SolidSheet key={key}>{children.map((element: any, index: number) => renderFormElementDynamically(element, recursiveFVMD, `${path}.${index}`))}</SolidSheet>;
                 case "group":
                     if (visible === true) {
-                        return <SolidGroup key={key} attrs={attrs}>{children.map((element: any) => renderFormElementDynamically(element, recursiveFVMD, formik))}</SolidGroup>;
+                        return <SolidGroup key={key} attrs={attrs}>{children.map((element: any, index: number) => renderFormElementDynamically(element, recursiveFVMD, `${path}.${index}`))}</SolidGroup>;
                     }
                     break;
                 case "row":
                     if (visible === true) {
-                        return <SolidRow key={key} attrs={attrs}>{children.map((element: any) => renderFormElementDynamically(element, recursiveFVMD, formik))}</SolidRow>;
+                        return <SolidRow key={key} attrs={attrs}>{children.map((element: any, index: number) => renderFormElementDynamically(element, recursiveFVMD, `${path}.${index}`))}</SolidRow>;
                     }
                     break;
                 case "column":
                     if (visible === true) {
-                        return <SolidColumn key={key} attrs={attrs}>{children.map((element: any) => renderFormElementDynamically(element, recursiveFVMD, formik))}</SolidColumn>;
+                        return <SolidColumn key={key} attrs={attrs}>{children.map((element: any, index: number) => renderFormElementDynamically(element, recursiveFVMD, `${path}.${index}`))}</SolidColumn>;
                     }
                     break;
                 case "field":
@@ -1447,13 +1465,13 @@ const SolidFormView = (params: SolidFormViewProps) => {
 
                 case "notebook":
                     if (visible === true) {
-                        return <SolidNotebook key={key} activeTab={searchParams.get("activeTab") || ""} embeded={params.embeded}>{children.map((element: any) => renderFormElementDynamically(element, recursiveFVMD, formik))}</SolidNotebook>;
+                        return <SolidNotebook key={key} activeTab={searchParams.get("activeTab") || ""} embeded={params.embeded}>{children.map((element: any, index: number) => renderFormElementDynamically(element, recursiveFVMD, `${path}.${index}`))}</SolidNotebook>;
                     }
                     break;
                 case "page":
                     if (visible === true) {
                         const fields = children.flatMap((child: any) => getLayoutFields(child));
-                        const pageChildren = children.map((element: any) => renderFormElementDynamically(element, recursiveFVMD));
+                        const pageChildren = children.map((element: any, index: number) => renderFormElementDynamically(element, recursiveFVMD, `${path}.${index}`));
                         return SolidPage({ children: pageChildren, attrs: attrs, key: key, formik: formik, fields });
                     }
                     break;
@@ -1495,7 +1513,7 @@ const SolidFormView = (params: SolidFormViewProps) => {
                 return;
             }
             const updatedLayout = [formViewLayout];
-            const dynamicForm = updatedLayout.map((element: any) => renderFormElementDynamically(element, recursiveFVMD));
+            const dynamicForm = updatedLayout.map((element: any, index: number) => renderFormElementDynamically(element, recursiveFVMD, `root-${index}`));
 
             return dynamicForm;
         };
@@ -1622,30 +1640,20 @@ const SolidFormView = (params: SolidFormViewProps) => {
         };
 
 
-        const isVideoOrAudio = (url: string) => {
-            // Remove query params if present
-            const cleanUrl = url.split("?")[0];
-            const ext = cleanUrl.split(".").pop()?.toLowerCase();
-
-            // Combined list of supported media extensions
-            const mediaExt = ["mp4", "webm", "ogg", "mov", "mp3", "wav", "m4a", "aac"];
-
-            return ext ? mediaExt.includes(ext) : false;
-        };
-
-        const controlsList = ["nodownload", "nofullscreen", "noremoteplayback"];
-        const slides = lightboxUrls.map((item: any) => {
-            const url = item.src || item.downloadUrl || "";
-            if (isVideoOrAudio(url)) {
-                return {
-                    type: "video" as const,
-                    sources: [{ src: url, type: "video/mp4", }],
-                };
-            }
-            return { src: url };
-        });
-
-        const hasMedia = slides.some((s) => s.type === "video");
+        const lightboxSlides: SolidLightboxSlide[] = lightboxUrls
+            .map((item: any) => {
+                const src = item?.src || item?.downloadUrl || "";
+                if (!src) {
+                    return null;
+                }
+                const mediaType = getMediaTypeFromUrl(src);
+                const slide: SolidLightboxSlide = { src };
+                if (mediaType !== "image") {
+                    slide.type = mediaType;
+                }
+                return slide;
+            })
+            .filter((slide): slide is SolidLightboxSlide => !!slide);
 
 
 
@@ -1675,8 +1683,9 @@ const SolidFormView = (params: SolidFormViewProps) => {
                             handleDraftPublishWorkFlow={handleDraftPublishWorkFlow}
                             onStepperUpdate={() => setRefreshChatterMessage(true)}
                             isSubmitting={isSubmitting}
+                            headerRequestStatusLabel={isSubmitting ? "Saving..." : null}
                         />
-                        <div className={`px-4 py-3 md:p-4 solid-form-content ${params.embeded === true ? 'h-auto' : ''}`} style={{ maxHeight: params.embeded === true ? '80vh' : '', overflowY: 'auto' }}>
+                        <div className={`px-4 py-3 md:p-4 solid-form-content md:pt-1 ${createMode ? 'solid-create-mode-form-content' : ''} ${params.embeded === true ? 'h-auto' : ''}`} style={{ maxHeight: params.embeded === true ? '80vh' : '', overflowY: 'auto' }}>
                             {DynamicHeaderComponent && <DynamicHeaderComponent />}
                             {params.id === 'new' && DynamicFormComponentNew ? (
                                 <DynamicFormComponentNew params={params} />
@@ -1707,9 +1716,9 @@ const SolidFormView = (params: SolidFormViewProps) => {
                             />
                         )}
                         {isShowChatter === true &&
-                            <Button
-                                icon="pi pi-angle-double-right"
-                                size="small"
+                            <SolidButton
+                                icon="si si-angle-double-right"
+                                size="sm"
                                 text
                                 className="chatter-collapse-btn"
                                 style={{ width: 30, height: 30, aspectRatio: '1/1' }}
@@ -1717,7 +1726,7 @@ const SolidFormView = (params: SolidFormViewProps) => {
                             />
                         }
                         {isShowChatter === false ?
-                            <div className="flex flex-column gap-2 justify-content-center p-2">
+                            <div className="flex flex-column gap-2 justify-content-center p-1">
                                 {/*if solidview Internationalisation is enabled then show the locale tab */}
                                 {solidFormViewMetaData?.data?.solidView?.model?.draftPublishWorkflow &&
                                     <div className="chatter-collapsed-content" onClick={() => handleChatterExpandClick('info')}>
@@ -1726,17 +1735,9 @@ const SolidFormView = (params: SolidFormViewProps) => {
                                 <div className="chatter-collapsed-content" onClick={() => handleChatterExpandClick('chatter')}>
                                     Audit Trail
                                 </div>
-                                {
-                                    mcpUrl &&
-                                    (
-                                        <div className="chatter-collapsed-content" onClick={() => handleChatterExpandClick('solidx-ai')}>
-                                            <div className="flex gap-2"> <SolidXAIIcon /> SolidX AI </div>
-                                        </div>
-                                    )
-                                }
-                                <Button
-                                    icon="pi pi-chevron-left"
-                                    size="small"
+                                <SolidButton
+                                    icon="si si-chevron-left"
+                                    size="sm"
                                     className="px-0"
                                     style={{ width: 30 }}
                                     onClick={() => handleChatterExpandClick('chatter')}
@@ -1764,73 +1765,49 @@ const SolidFormView = (params: SolidFormViewProps) => {
                     </div>
                 }
 
-                <Dialog
+                <SolidDialog
                     visible={isDeleteDialogVisible}
                     header="Confirm Delete"
                     className="solid-confirm-dialog"
-                    modal
-                    footer={() => (
-                        <div className="flex justify-content-center">
-                            <Button label="Yes" icon="pi pi-check" className='small-button' severity="danger" autoFocus onClick={() => handleDeleteEntity()} />
-                            <Button label="No" icon="pi pi-times" className='small-button' onClick={onDeleteClose} />
-                        </div>
-                    )}
                     onHide={() => setDeleteDialogVisible(false)}
+                    footer={
+                        <div className="flex justify-content-center gap-2">
+                            <SolidButton label="Yes" icon="si si-check" className='small-button' severity="danger" autoFocus onClick={() => handleDeleteEntity()} />
+                            <SolidButton label="No" icon="si si-times" className='small-button' variant="outline" onClick={onDeleteClose} />
+                        </div>
+                    }
                 >
                     <p>Are you sure you want to delete?</p>
-                </Dialog>
-                <Dialog
-                    visible={isLayoutDialogVisible}
-                    header="Change Form Layout"
-                    modal
-                    onHide={() => setLayoutDialogVisible(false)}
-                    style={{ width: '50vw' }}
-                    breakpoints={{
-                        '960px': '80vw',
-                        '641px': '95vw'
-                    }}
-                    contentClassName="p-3 pt-0 lg:p-4"
+                </SolidDialog>
+                <SolidDialog
+                    open={isLayoutDialogVisible}
+                    onOpenChange={setLayoutDialogVisible}
+                    className="solid-form-layout-dialog"
                 >
-                    <SolidFormUserViewLayout solidFormViewMetaData={solidFormViewMetaData} setLayoutDialogVisible={setLayoutDialogVisible} />
-                </Dialog>
-                {openLightbox &&
-                    <Lightbox
+                    <SolidDialogHeader className="solid-shadcn-dialog-head">
+                        <SolidDialogTitle>Change Form Layout</SolidDialogTitle>
+                        <SolidDialogClose />
+                    </SolidDialogHeader>
+                    <SolidDialogSeparator />
+                    <SolidDialogBody className="p-3 pt-0 lg:p-4">
+                        <SolidFormUserViewLayout solidFormViewMetaData={solidFormViewMetaData} setLayoutDialogVisible={setLayoutDialogVisible} />
+                    </SolidDialogBody>
+                </SolidDialog>
+                {openLightbox && (
+                    <SolidLightbox
                         open={openLightbox}
-                        plugins={
-                            hasMedia
-                                ? [Counter, Download, Video] // add Video plugin if needed
-                                : [Counter, Download]
-                        }
-                        close={() => setOpenLightbox(false)}
-                        slides={[...slides]}
-                        {...(hasMedia && {
-                            video: {
-                                controls: true,
-                                playsInline: true,
-                                autoPlay: false,
-                                loop: false,
-                                muted: false,
-                                disablePictureInPicture: false,
-                                disableRemotePlayback: false,
-                                controlsList: controlsList.join(" "),
-                                crossOrigin: "anonymous",
-                                preload: "auto",
-                            },
-                        })}
+                        slides={lightboxSlides}
+                        onClose={() => setOpenLightbox(false)}
                     />
-                }
-
-                <ConfirmDialog
-                    visible={confirmVisible}
-                    onHide={() => setConfirmVisible(false)}
-                    header="Confirmation"
-                    acceptLabel="Yes, confrim"
-                    rejectLabel="No, cancel"
-                    acceptClassName="p-button-danger"
-                    rejectClassName="p-button-text"
-                    position="center"
-                    accept={handleConfirmAccept}
-                    reject={handleConfirmReject}
+                )}
+
+                <SolidConfirmDialog
+                    open={confirmVisible}
+                    title="Confirmation"
+                    confirmLabel="Yes, confirm"
+                    cancelLabel="No, cancel"
+                    onConfirm={handleConfirmAccept}
+                    onCancel={handleConfirmReject}
                     message={
                         <div className="flex flex-col items-center justify-center text-center space-y-3">
                             <p className="text-gray-800 text-base">

package/dist/components/core/form/SolidFormViewContextMenuHeaderButton.d.ts

@@ -5,7 +5,9 @@ interface SolidFormViewContextMenuHeaderButtonProps {
     solidFormViewMetaData: any;
     handleCustomButtonClick: (attrs: any, event: any) => void;
     formData: any;
+    onActionComplete?: () => void;
+    variant?: "default" | "menu";
 }
-export declare function SolidFormViewContextMenuHeaderButton({ button, params, formik, solidFormViewMetaData, handleCustomButtonClick, formData }: SolidFormViewContextMenuHeaderButtonProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function SolidFormViewContextMenuHeaderButton({ button, params, formik, solidFormViewMetaData, handleCustomButtonClick, formData, onActionComplete, variant }: SolidFormViewContextMenuHeaderButtonProps): import("react/jsx-runtime").JSX.Element | null;
 export {};
 //# sourceMappingURL=SolidFormViewContextMenuHeaderButton.d.ts.map

package/dist/components/core/form/SolidFormViewContextMenuHeaderButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidFormViewContextMenuHeaderButton.d.ts","sourceRoot":"","sources":["../../../../src/components/core/form/SolidFormViewContextMenuHeaderButton.tsx"],"names":[],"mappings":"AAIA,UAAU,yCAAyC;IAC/C,MAAM,EAAE,GAAG,CAAC;IACZ,MAAM,EAAE,GAAG,CAAC;IACZ,MAAM,EAAE,GAAG,CAAC;IACZ,qBAAqB,EAAE,GAAG,CAAC;IAC3B,uBAAuB,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC1D,QAAQ,EAAE,GAAG,CAAC;CACjB;AAED,wBAAgB,oCAAoC,CAAC,EACjD,MAAM,EACN,MAAM,EACN,MAAM,EACN,qBAAqB,EACrB,uBAAuB,EACvB,QAAQ,EACX,EAAE,yCAAyC,kDAgC3C"}
+{"version":3,"file":"SolidFormViewContextMenuHeaderButton.d.ts","sourceRoot":"","sources":["../../../../src/components/core/form/SolidFormViewContextMenuHeaderButton.tsx"],"names":[],"mappings":"AAIA,UAAU,yCAAyC;IAC/C,MAAM,EAAE,GAAG,CAAC;IACZ,MAAM,EAAE,GAAG,CAAC;IACZ,MAAM,EAAE,GAAG,CAAC;IACZ,qBAAqB,EAAE,GAAG,CAAC;IAC3B,uBAAuB,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC1D,QAAQ,EAAE,GAAG,CAAC;IACd,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;CAChC;AAED,wBAAgB,oCAAoC,CAAC,EACjD,MAAM,EACN,MAAM,EACN,MAAM,EACN,qBAAqB,EACrB,uBAAuB,EACvB,QAAQ,EACR,gBAAgB,EAChB,OAAmB,EACtB,EAAE,yCAAyC,kDAyD3C"}

package/dist/components/core/form/SolidFormViewContextMenuHeaderButton.js

@@ -1,26 +1,32 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Button } from 'primereact/button';
-import { hasAnyRole } from '../../../helpers/rolesHelper';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { hasAnyRole } from "../../../helpers/rolesHelper";
 import { useSession } from "../../../hooks/useSession";
+import { SolidButton, SolidIcon, parseSolidIconMeta } from "../../shad-cn-ui";
 export function SolidFormViewContextMenuHeaderButton(_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j;
-    var button = _a.button, params = _a.params, formik = _a.formik, solidFormViewMetaData = _a.solidFormViewMetaData, handleCustomButtonClick = _a.handleCustomButtonClick, formData = _a.formData;
-    var _k = useSession(), session = _k.data, status = _k.status;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var button = _a.button, params = _a.params, formik = _a.formik, solidFormViewMetaData = _a.solidFormViewMetaData, handleCustomButtonClick = _a.handleCustomButtonClick, formData = _a.formData, onActionComplete = _a.onActionComplete, _m = _a.variant, variant = _m === void 0 ? "default" : _m;
+    var _o = useSession(), session = _o.data, status = _o.status;
     var user = session === null || session === void 0 ? void 0 : session.user;
     var hasRole = !((_b = button.attrs) === null || _b === void 0 ? void 0 : _b.roles) || ((_c = button === null || button === void 0 ? void 0 : button.attrs) === null || _c === void 0 ? void 0 : _c.roles.length) === 0 ? true : hasAnyRole(user === null || user === void 0 ? void 0 : user.roles, (_d = button === null || button === void 0 ? void 0 : button.attrs) === null || _d === void 0 ? void 0 : _d.roles);
     if (!hasRole)
         return null;
     if (((_e = button.attrs) === null || _e === void 0 ? void 0 : _e.visible) == false)
         return null;
-    return (_jsx("div", { children: _jsx(Button, { text: true, type: "button", className: "w-full text-left gap-2 ".concat(((_f = button === null || button === void 0 ? void 0 : button.attrs) === null || _f === void 0 ? void 0 : _f.className) ? (_g = button === null || button === void 0 ? void 0 : button.attrs) === null || _g === void 0 ? void 0 : _g.className : ''), label: button.attrs.label, size: "small", iconPos: "left", icon: ((_h = button === null || button === void 0 ? void 0 : button.attrs) === null || _h === void 0 ? void 0 : _h.icon) ? (_j = button === null || button === void 0 ? void 0 : button.attrs) === null || _j === void 0 ? void 0 : _j.icon : "pi pi-pencil", onClick: function () {
-                var event = {
-                    action: button.attrs.action,
-                    params: params,
-                    formik: formik,
-                    solidFormViewMetaData: solidFormViewMetaData.data,
-                    formData: formData
-                };
-                handleCustomButtonClick(button.attrs, event);
-            } }) }));
+    var iconMeta = parseSolidIconMeta((_g = (_f = button === null || button === void 0 ? void 0 : button.attrs) === null || _f === void 0 ? void 0 : _f.icon) !== null && _g !== void 0 ? _g : "si si-pencil");
+    var handleClick = function () {
+        var event = {
+            action: button.attrs.action,
+            params: params,
+            formik: formik,
+            solidFormViewMetaData: solidFormViewMetaData.data,
+            formData: formData
+        };
+        handleCustomButtonClick(button.attrs, event);
+        onActionComplete === null || onActionComplete === void 0 ? void 0 : onActionComplete();
+    };
+    if (variant === "menu") {
+        return (_jsxs("button", { type: "button", className: "solid-row-action-button ".concat(((_h = button === null || button === void 0 ? void 0 : button.attrs) === null || _h === void 0 ? void 0 : _h.className) ? (_j = button === null || button === void 0 ? void 0 : button.attrs) === null || _j === void 0 ? void 0 : _j.className : ''), onClick: handleClick, children: [iconMeta ? (_jsx(SolidIcon, { name: iconMeta.name, spin: iconMeta.spin, className: "solid-row-action-button-icon", "aria-hidden": true })) : null, _jsx("span", { className: "solid-row-action-button-label", children: button.attrs.label })] }));
+    }
+    return (_jsx("div", { children: _jsx(SolidButton, { text: true, type: "button", className: "w-full text-left gap-2 ".concat(((_k = button === null || button === void 0 ? void 0 : button.attrs) === null || _k === void 0 ? void 0 : _k.className) ? (_l = button === null || button === void 0 ? void 0 : button.attrs) === null || _l === void 0 ? void 0 : _l.className : ''), label: button.attrs.label, size: "sm", leftIcon: iconMeta ? _jsx(SolidIcon, { name: iconMeta.name, spin: iconMeta.spin, "aria-hidden": true }) : undefined, onClick: handleClick }) }));
 }
 //# sourceMappingURL=SolidFormViewContextMenuHeaderButton.js.map

package/dist/components/core/form/SolidFormViewContextMenuHeaderButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidFormViewContextMenuHeaderButton.js","sourceRoot":"","sources":["../../../../src/components/core/form/SolidFormViewContextMenuHeaderButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAWvD,MAAM,UAAU,oCAAoC,CAAC,EAOT;;QANxC,MAAM,YAAA,EACN,MAAM,YAAA,EACN,MAAM,YAAA,EACN,qBAAqB,2BAAA,EACrB,uBAAuB,6BAAA,EACvB,QAAQ,cAAA;IAGF,IAAA,KAA4B,UAAU,EAAE,EAAhC,OAAO,UAAA,EAAE,MAAM,YAAiB,CAAC;IAC/C,IAAM,IAAI,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,CAAC;IAE3B,IAAM,OAAO,GAAG,CAAC,CAAA,MAAA,MAAM,CAAC,KAAK,0CAAE,KAAK,CAAA,IAAI,CAAA,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,0CAAE,KAAK,CAAC,MAAM,MAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,EAAE,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,0CAAE,KAAK,CAAC,CAAC;IAEjI,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IAC1B,IAAI,CAAA,MAAA,MAAM,CAAC,KAAK,0CAAE,OAAO,KAAI,KAAK;QAAE,OAAO,IAAI,CAAA;IAC/C,OAAO,CACH,wBACI,KAAC,MAAM,IACH,IAAI,QACJ,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,iCAA0B,CAAA,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,0CAAE,SAAS,EAAC,CAAC,CAAC,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,0CAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAE,EAC/F,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,KAAK,EACzB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,MAAM,EACd,IAAI,EAAE,CAAA,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,0CAAE,IAAI,EAAC,CAAC,CAAC,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,0CAAE,IAAI,CAAC,CAAC,CAAC,cAAc,EAChE,OAAO,EAAE;gBACL,IAAM,KAAK,GAAG;oBACV,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,MAAM;oBAC3B,MAAM,QAAA;oBACN,MAAM,QAAA;oBACN,qBAAqB,EAAE,qBAAqB,CAAC,IAAI;oBACjD,QAAQ,UAAA;iBACX,CAAA;gBACD,uBAAuB,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAA;YAChD,CAAC,GACH,GACA,CACT,CAAC;AACN,CAAC","sourcesContent":["import { Button } from 'primereact/button';\nimport { hasAnyRole } from '../../../helpers/rolesHelper';\nimport { useSession } from \"../../../hooks/useSession\";\n\ninterface SolidFormViewContextMenuHeaderButtonProps {\n    button: any;\n    params: any;\n    formik: any;\n    solidFormViewMetaData: any;\n    handleCustomButtonClick: (attrs: any, event: any) => void;\n    formData: any;\n}\n\nexport function SolidFormViewContextMenuHeaderButton({\n    button,\n    params,\n    formik,\n    solidFormViewMetaData,\n    handleCustomButtonClick,\n    formData\n}: SolidFormViewContextMenuHeaderButtonProps) {\n\n    const { data: session, status } = useSession();\n    const user = session?.user;\n\n    const hasRole = !button.attrs?.roles || button?.attrs?.roles.length === 0 ? true : hasAnyRole(user?.roles, button?.attrs?.roles);\n\n    if (!hasRole) return null;\n    if (button.attrs?.visible == false) return null\n    return (\n        <div>\n            <Button\n                text\n                type=\"button\"\n                className={`w-full text-left gap-2 ${button?.attrs?.className ? button?.attrs?.className : ''}`}\n                label={button.attrs.label}\n                size=\"small\"\n                iconPos=\"left\"\n                icon={button?.attrs?.icon ? button?.attrs?.icon : \"pi pi-pencil\"}\n                onClick={() => {\n                    const event = {\n                        action: button.attrs.action,\n                        params,\n                        formik,\n                        solidFormViewMetaData: solidFormViewMetaData.data,\n                        formData\n                    }\n                    handleCustomButtonClick(button.attrs, event)\n                }}\n            />\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"SolidFormViewContextMenuHeaderButton.js","sourceRoot":"","sources":["../../../../src/components/core/form/SolidFormViewContextMenuHeaderButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { hasAnyRole } from \"../../../helpers/rolesHelper\";\nimport { useSession } from \"../../../hooks/useSession\";\nimport { SolidButton, SolidIcon, parseSolidIconMeta } from \"../../shad-cn-ui\";\n\ninterface SolidFormViewContextMenuHeaderButtonProps {\n    button: any;\n    params: any;\n    formik: any;\n    solidFormViewMetaData: any;\n    handleCustomButtonClick: (attrs: any, event: any) => void;\n    formData: any;\n    onActionComplete?: () => void;\n    variant?: \"default\" | \"menu\";\n}\n\nexport function SolidFormViewContextMenuHeaderButton({\n    button,\n    params,\n    formik,\n    solidFormViewMetaData,\n    handleCustomButtonClick,\n    formData,\n    onActionComplete,\n    variant = \"default\"\n}: SolidFormViewContextMenuHeaderButtonProps) {\n\n    const { data: session, status } = useSession();\n    const user = session?.user;\n\n    const hasRole = !button.attrs?.roles || button?.attrs?.roles.length === 0 ? true : hasAnyRole(user?.roles, button?.attrs?.roles);\n\n    if (!hasRole) return null;\n    if (button.attrs?.visible == false) return null\n    const iconMeta = parseSolidIconMeta(button?.attrs?.icon ?? \"si si-pencil\");\n    const handleClick = () => {\n        const event = {\n            action: button.attrs.action,\n            params,\n            formik,\n            solidFormViewMetaData: solidFormViewMetaData.data,\n            formData\n        };\n        handleCustomButtonClick(button.attrs, event);\n        onActionComplete?.();\n    };\n\n    if (variant === \"menu\") {\n        return (\n            <button\n                type=\"button\"\n                className={`solid-row-action-button ${button?.attrs?.className ? button?.attrs?.className : ''}`}\n                onClick={handleClick}\n            >\n                {iconMeta ? (\n                    <SolidIcon\n                        name={iconMeta.name}\n                        spin={iconMeta.spin}\n                        className=\"solid-row-action-button-icon\"\n                        aria-hidden\n                    />\n                ) : null}\n                <span className=\"solid-row-action-button-label\">{button.attrs.label}</span>\n            </button>\n        );\n    }\n\n    return (\n        <div>\n            <SolidButton\n                text\n                type=\"button\"\n                className={`w-full text-left gap-2 ${button?.attrs?.className ? button?.attrs?.className : ''}`}\n                label={button.attrs.label}\n                size=\"sm\"\n                leftIcon={\n                    iconMeta ? <SolidIcon name={iconMeta.name} spin={iconMeta.spin} aria-hidden /> : undefined\n                }\n                onClick={handleClick}\n            />\n        </div>\n    );\n}\n"]}