@solidxai/core-ui 0.1.14-beta.6 → 0.1.14-beta.9

package/dist/components/common/SingleSelectAutoCompleteField.tsx

@@ -0,0 +1,73 @@
+
+import { AutoComplete } from "primereact/autocomplete";
+import { useEffect, useState } from "react";
+import { getVirtualScrollerOptions } from "../../helpers/autoCompleteVirtualScroll";
+
+
+
+// UsesCases
+// Suppose you have a moduelId field In create Dto then you need to creaate a module key in firmik and use that to store the autocomplete state and along with it update the moduleId  Field with id
+// In case of relationType the Id field will always will be id   
+// Else the value will be whatever valuekey use passed 
+
+export const SingleSelectAutoCompleteField = ({ disabled, formik, isFormFieldValid, relationField, fieldName, fieldNameId, labelKey, valueKey, searchData, existingData, additionalAction, formErrors }: any) => {
+
+    const [selectedItem, setSelectedItem] = useState(existingData);
+    const [filteredItem, setFilteredItem] = useState([]);
+    useEffect(() => {
+        // if (existingData) {
+        setSelectedItem(existingData)
+        // formik.setFieldValue(fieldName, existingData);
+
+        // }
+    }, [existingData])
+    const searchItems = async (event: any) => {
+        const data = await searchData(event);
+        setFilteredItem(data);
+
+    };    
+
+
+    return (
+        <>
+            <AutoComplete
+                disabled={disabled ? disabled : false}
+                value={selectedItem}
+                suggestions={filteredItem}
+                // invalid={(isFormFieldValid(formik, fieldName) || (formErrors[fieldName]))}
+                invalid={isFormFieldValid(formik, fieldName)}
+
+                completeMethod={searchItems}
+                // virtualScrollerOptions={{ itemSize: 38 }}
+                virtualScrollerOptions={getVirtualScrollerOptions({
+                    itemsLength: filteredItem.length,
+                  })}
+                  
+                // style={{
+                //     maxHeight: 39.67
+                // }}
+                field={labelKey}
+                dropdown
+                onChange={(e) => {
+                    // formik.handleChange(e)
+                    setSelectedItem(e.value);
+                    if (additionalAction) {
+                        additionalAction(e);
+                    }
+                    if (relationField === true) {
+                        formik.setFieldValue(fieldName, e.value);
+                        formik.setFieldValue(fieldNameId, e.value.id);
+                    } else {
+                        formik.setFieldValue(fieldName, e.value[valueKey]);
+
+                    }
+
+                }}
+                className="solid-standard-autocomplete"
+            />
+
+        </>
+
+
+    )
+}

package/dist/components/common/SolidExportStepper.d.ts

@@ -0,0 +1,12 @@
+interface Step {
+    label: string;
+    value: string;
+}
+interface Props {
+    solidFormViewWorkflowData: Step[];
+    activeValue: string;
+    setActiveValue: (value: string) => void;
+}
+export declare const SolidExportStepper: ({ solidFormViewWorkflowData, activeValue, setActiveValue }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SolidExportStepper.d.ts.map

package/dist/components/common/SolidExportStepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidExportStepper.d.ts","sourceRoot":"","sources":["../../../src/components/common/SolidExportStepper.tsx"],"names":[],"mappings":"AAKA,UAAU,IAAI;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,KAAK;IACb,yBAAyB,EAAE,IAAI,EAAE,CAAC;IAClC,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,kBAAkB,+DAA+D,KAAK,4CAsHlG,CAAC"}

package/dist/components/common/SolidExportStepper.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from "primereact/button";
+import { OverlayPanel } from "primereact/overlaypanel";
+import { useRef } from "react";
+export var SolidExportStepper = function (_a) {
+    var solidFormViewWorkflowData = _a.solidFormViewWorkflowData, activeValue = _a.activeValue, setActiveValue = _a.setActiveValue;
+    var formStepperOverlay = useRef(null);
+    var activeIndex = solidFormViewWorkflowData.findIndex(function (step) { return step.value === activeValue; });
+    var visibleSteps = solidFormViewWorkflowData.length > 5
+        ? solidFormViewWorkflowData.slice(0, 5)
+        : solidFormViewWorkflowData;
+    var handleStepClick = function (value) {
+        setActiveValue(value);
+    };
+    return (_jsx("div", { className: "flex solid-dynamic-stepper export-stepper", children: visibleSteps.map(function (step, index) {
+            var isActive = index === activeIndex;
+            var isBeforeActive = index < activeIndex;
+            var isAfterActive = index > activeIndex;
+            var isFirstVisible = index === 0;
+            var isLastVisible = index === visibleSteps.length - 1;
+            var isNextAfterActive = index === activeIndex + 1;
+            var isTwoStepsOnly = visibleSteps.length === 2;
+            return (_jsxs(Button, { type: "button", className: "solid-step-button export relative ".concat(isTwoStepsOnly ? 'two-step-button' : '', " ").concat(isActive ? 'p-button-primary' : '', " ").concat(isBeforeActive ? 'p-button-secondary' : ''), text: !isActive && !isBeforeActive, onClick: function () { return handleStepClick(step.value); }, children: [step.label, _jsxs(_Fragment, { children: [isNextAfterActive && solidFormViewWorkflowData.map(function (step) { return step.value; }).includes(activeValue) &&
+                                (_jsx("div", { className: "absolute active-step-arrow", children: _jsx("svg", { viewBox: "0 0 72 72", xmlns: "http://www.w3.org/2000/svg", fill: "#000000", transform: "rotate(30)", height: "60px", width: "60px", children: _jsxs("g", { id: "SVGRepo_iconCarrier", children: [_jsx("g", { id: "color", children: _jsx("polygon", { fill: "var(--primary-color)", points: "36,62 65,12 7,12" }) }), _jsx("g", { id: "line", children: _jsx("polyline", { fill: "none", stroke: "", strokeMiterlimit: "10", strokeWidth: "1.5", points: "36,62 65,12 7,12" }) })] }) }) })), (isActive || isBeforeActive) && !isFirstVisible && (!isTwoStepsOnly || index === 1) && (_jsx("div", { className: "absolute active-before-step-arrow", children: _jsx("svg", { viewBox: "0 0 72 72", xmlns: "http://www.w3.org/2000/svg", fill: "#000000", transform: "rotate(30)", height: "55px", width: "55px", children: _jsxs("g", { id: "SVGRepo_iconCarrier", children: [_jsx("g", { id: "color", children: _jsx("polygon", { fill: "#EAEDF1", points: "36,62 65,12 7,12" }) }), _jsx("g", { id: "line", children: _jsx("polyline", { fill: "none", stroke: "var(--solid-stepper-border)", strokeMiterlimit: "10", strokeWidth: "1.5", points: "36,62 65,12 7,12" }) })] }) }) })), isAfterActive && !isLastVisible && (_jsx("div", { className: "absolute inactive-step-arrow", children: _jsx("svg", { viewBox: "0 0 72 72", xmlns: "http://www.w3.org/2000/svg", fill: "#000000", transform: "rotate(30)", height: "55px", width: "55px", children: _jsxs("g", { id: "SVGRepo_iconCarrier", children: [_jsx("g", { id: "color", children: _jsx("polygon", { fill: "#EAEDF1", points: "36,62 65,12 7,12" }) }), _jsx("g", { id: "line", children: _jsx("polyline", { fill: "none", stroke: "var(--solid-stepper-border)", strokeMiterlimit: "10", strokeWidth: "1.5", points: "36,62 65,12 7,12" }) })] }) }) }))] }), solidFormViewWorkflowData.length > 5 && index === 4 && (_jsxs("div", { className: 'absolute', style: { right: 5 }, children: [_jsx(Button, { type: 'button', icon: "pi pi-angle-down", text: true, size: 'small', style: { height: 24, width: '1.5rem', padding: 0 }, onClick: function (e) {
+                                    // @ts-ignore 
+                                    return formStepperOverlay.current.toggle(e);
+                                } }), _jsx(OverlayPanel, { ref: formStepperOverlay, className: "solid-custom-overlay solid-form-stepper-overlay", children: _jsx("div", { className: 'flex flex-column gap-1 p-1', children: solidFormViewWorkflowData.slice(5).map(function (step, index) { return (_jsx(Button, { type: 'button', label: step.label, size: 'small', text: true, onClick: function () { return handleStepClick(step.value); } }, index)); }) }) })] }))] }, index));
+        }) }));
+};
+//# sourceMappingURL=SolidExportStepper.js.map

package/dist/components/common/SolidExportStepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidExportStepper.js","sourceRoot":"","sources":["../../../src/components/common/SolidExportStepper.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport { Button } from \"primereact/button\";\nimport { OverlayPanel } from \"primereact/overlaypanel\";\nimport React, { useRef, useState } from \"react\";\n\ninterface Step {\n  label: string;\n  value: string;\n}\n\ninterface Props {\n  solidFormViewWorkflowData: Step[];\n  activeValue: string;\n  setActiveValue: (value: string) => void;\n}\n\nexport const SolidExportStepper = ({ solidFormViewWorkflowData, activeValue ,setActiveValue}: Props) => {\n  const formStepperOverlay = useRef<OverlayPanel>(null);\n  const activeIndex = solidFormViewWorkflowData.findIndex(step => step.value === activeValue);\n  const visibleSteps = solidFormViewWorkflowData.length > 5\n    ? solidFormViewWorkflowData.slice(0, 5)\n    : solidFormViewWorkflowData;\n    const handleStepClick = (value: string) => {\n        setActiveValue(value);\n      };\n  return (\n    <div className=\"flex solid-dynamic-stepper export-stepper\">\n      {visibleSteps.map((step: any, index: number) => {\n                         const isActive = index === activeIndex;\n                         const isBeforeActive = index < activeIndex;\n                         const isAfterActive = index > activeIndex;\n                         const isFirstVisible = index === 0;\n                         const isLastVisible = index === visibleSteps.length - 1;\n                         const isNextAfterActive = index === activeIndex + 1;\n                         const isTwoStepsOnly = visibleSteps.length === 2;\n                         return (\n                             <Button\n                             key={index}\n                             type=\"button\"\n                             className={`solid-step-button export relative ${isTwoStepsOnly ? 'two-step-button' : ''} ${isActive ? 'p-button-primary' : ''} ${isBeforeActive ? 'p-button-secondary' : ''}`}\n                             text={!isActive && !isBeforeActive}\n                                 onClick={() => handleStepClick(step.value)}\n                             >\n                                 {step.label}\n                                 <>\n                                     {isNextAfterActive && solidFormViewWorkflowData.map((step: any) => step.value).includes(activeValue) &&\n                                         (\n                                             <div className=\"absolute active-step-arrow\">\n                                                 <svg viewBox=\"0 0 72 72\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"#000000\" transform=\"rotate(30)\"\n                                                     height=\"60px\"\n                                                     width=\"60px\"\n                                                 >\n                                                     <g id=\"SVGRepo_iconCarrier\">\n                                                         <g id=\"color\">\n                                                             <polygon fill={\"var(--primary-color)\"} points=\"36,62 65,12 7,12\" />\n                                                         </g>\n                                                         <g id=\"line\">\n                                                             <polyline fill=\"none\" stroke=\"\" strokeMiterlimit=\"10\" strokeWidth=\"1.5\" points=\"36,62 65,12 7,12\" />\n                                                         </g>\n                                                     </g>\n                                                 </svg>\n                                             </div>\n                                         )}\n     \n                                     {(isActive || isBeforeActive) && !isFirstVisible && (!isTwoStepsOnly || index === 1) && (\n                                         <div className=\"absolute active-before-step-arrow\">\n                                             <svg viewBox=\"0 0 72 72\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"#000000\" transform=\"rotate(30)\"\n                                                 height=\"55px\"\n                                                 width=\"55px\"\n                                             >\n                                                 <g id=\"SVGRepo_iconCarrier\">\n                                                     <g id=\"color\">\n                                                         <polygon fill=\"#EAEDF1\" points=\"36,62 65,12 7,12\" />\n                                                     </g>\n                                                     <g id=\"line\">\n                                                         <polyline fill=\"none\" stroke=\"var(--solid-stepper-border)\" strokeMiterlimit=\"10\" strokeWidth=\"1.5\" points=\"36,62 65,12 7,12\" />\n                                                     </g>\n                                                 </g>\n                                             </svg>\n                                         </div>\n                                     )}\n     \n                                     {isAfterActive && !isLastVisible && (\n                                         <div className=\"absolute inactive-step-arrow\">\n                                             <svg viewBox=\"0 0 72 72\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"#000000\" transform=\"rotate(30)\"\n                                                 height=\"55px\"\n                                                 width=\"55px\"\n                                             >\n                                                 <g id=\"SVGRepo_iconCarrier\">\n                                                     <g id=\"color\">\n                                                         <polygon fill=\"#EAEDF1\" points=\"36,62 65,12 7,12\" />\n                                                     </g>\n                                                     <g id=\"line\">\n                                                         <polyline fill=\"none\" stroke=\"var(--solid-stepper-border)\" strokeMiterlimit=\"10\" strokeWidth=\"1.5\" points=\"36,62 65,12 7,12\" />\n                                                     </g>\n                                                 </g>\n                                             </svg>\n                                         </div>\n                                     )}\n                                 </>\n                                 {solidFormViewWorkflowData.length > 5 && index === 4 && (\n                                     <div className='absolute' style={{ right: 5 }}>\n                                         <Button\n                                             type='button'\n                                             icon=\"pi pi-angle-down\"\n                                             text\n                                             size='small'\n                                             style={{ height: 24, width: '1.5rem', padding: 0 }}\n                                             onClick={(e) =>\n                                                 // @ts-ignore \n                                                 formStepperOverlay.current.toggle(e)\n                                             }\n                                         />\n                                         <OverlayPanel ref={formStepperOverlay} className=\"solid-custom-overlay solid-form-stepper-overlay\">\n                                             <div className='flex flex-column gap-1 p-1'>\n                                                 {solidFormViewWorkflowData.slice(5).map((step: any, index: number) => (\n                                                     <Button\n                                                         key={index}\n                                                         type='button'\n                                                         label={step.label}\n                                                         size='small'\n                                                         text\n                                                         onClick={() => handleStepClick(step.value)}\n                                                     />\n                                                 ))}\n                                             </div>\n                                         </OverlayPanel>\n                                     </div>\n                                 )}\n                             </Button>\n                         )\n                     })}\n    </div>\n  );\n};\n"]}

package/dist/components/common/SolidExportStepper.tsx

@@ -0,0 +1,135 @@
+
+import { Button } from "primereact/button";
+import { OverlayPanel } from "primereact/overlaypanel";
+import React, { useRef, useState } from "react";
+
+interface Step {
+  label: string;
+  value: string;
+}
+
+interface Props {
+  solidFormViewWorkflowData: Step[];
+  activeValue: string;
+  setActiveValue: (value: string) => void;
+}
+
+export const SolidExportStepper = ({ solidFormViewWorkflowData, activeValue ,setActiveValue}: Props) => {
+  const formStepperOverlay = useRef<OverlayPanel>(null);
+  const activeIndex = solidFormViewWorkflowData.findIndex(step => step.value === activeValue);
+  const visibleSteps = solidFormViewWorkflowData.length > 5
+    ? solidFormViewWorkflowData.slice(0, 5)
+    : solidFormViewWorkflowData;
+    const handleStepClick = (value: string) => {
+        setActiveValue(value);
+      };
+  return (
+    <div className="flex solid-dynamic-stepper export-stepper">
+      {visibleSteps.map((step: any, index: number) => {
+                         const isActive = index === activeIndex;
+                         const isBeforeActive = index < activeIndex;
+                         const isAfterActive = index > activeIndex;
+                         const isFirstVisible = index === 0;
+                         const isLastVisible = index === visibleSteps.length - 1;
+                         const isNextAfterActive = index === activeIndex + 1;
+                         const isTwoStepsOnly = visibleSteps.length === 2;
+                         return (
+                             <Button
+                             key={index}
+                             type="button"
+                             className={`solid-step-button export relative ${isTwoStepsOnly ? 'two-step-button' : ''} ${isActive ? 'p-button-primary' : ''} ${isBeforeActive ? 'p-button-secondary' : ''}`}
+                             text={!isActive && !isBeforeActive}
+                                 onClick={() => handleStepClick(step.value)}
+                             >
+                                 {step.label}
+                                 <>
+                                     {isNextAfterActive && solidFormViewWorkflowData.map((step: any) => step.value).includes(activeValue) &&
+                                         (
+                                             <div className="absolute active-step-arrow">
+                                                 <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" fill="#000000" transform="rotate(30)"
+                                                     height="60px"
+                                                     width="60px"
+                                                 >
+                                                     <g id="SVGRepo_iconCarrier">
+                                                         <g id="color">
+                                                             <polygon fill={"var(--primary-color)"} points="36,62 65,12 7,12" />
+                                                         </g>
+                                                         <g id="line">
+                                                             <polyline fill="none" stroke="" strokeMiterlimit="10" strokeWidth="1.5" points="36,62 65,12 7,12" />
+                                                         </g>
+                                                     </g>
+                                                 </svg>
+                                             </div>
+                                         )}
+     
+                                     {(isActive || isBeforeActive) && !isFirstVisible && (!isTwoStepsOnly || index === 1) && (
+                                         <div className="absolute active-before-step-arrow">
+                                             <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" fill="#000000" transform="rotate(30)"
+                                                 height="55px"
+                                                 width="55px"
+                                             >
+                                                 <g id="SVGRepo_iconCarrier">
+                                                     <g id="color">
+                                                         <polygon fill="#EAEDF1" points="36,62 65,12 7,12" />
+                                                     </g>
+                                                     <g id="line">
+                                                         <polyline fill="none" stroke="var(--solid-stepper-border)" strokeMiterlimit="10" strokeWidth="1.5" points="36,62 65,12 7,12" />
+                                                     </g>
+                                                 </g>
+                                             </svg>
+                                         </div>
+                                     )}
+     
+                                     {isAfterActive && !isLastVisible && (
+                                         <div className="absolute inactive-step-arrow">
+                                             <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" fill="#000000" transform="rotate(30)"
+                                                 height="55px"
+                                                 width="55px"
+                                             >
+                                                 <g id="SVGRepo_iconCarrier">
+                                                     <g id="color">
+                                                         <polygon fill="#EAEDF1" points="36,62 65,12 7,12" />
+                                                     </g>
+                                                     <g id="line">
+                                                         <polyline fill="none" stroke="var(--solid-stepper-border)" strokeMiterlimit="10" strokeWidth="1.5" points="36,62 65,12 7,12" />
+                                                     </g>
+                                                 </g>
+                                             </svg>
+                                         </div>
+                                     )}
+                                 </>
+                                 {solidFormViewWorkflowData.length > 5 && index === 4 && (
+                                     <div className='absolute' style={{ right: 5 }}>
+                                         <Button
+                                             type='button'
+                                             icon="pi pi-angle-down"
+                                             text
+                                             size='small'
+                                             style={{ height: 24, width: '1.5rem', padding: 0 }}
+                                             onClick={(e) =>
+                                                 // @ts-ignore 
+                                                 formStepperOverlay.current.toggle(e)
+                                             }
+                                         />
+                                         <OverlayPanel ref={formStepperOverlay} className="solid-custom-overlay solid-form-stepper-overlay">
+                                             <div className='flex flex-column gap-1 p-1'>
+                                                 {solidFormViewWorkflowData.slice(5).map((step: any, index: number) => (
+                                                     <Button
+                                                         key={index}
+                                                         type='button'
+                                                         label={step.label}
+                                                         size='small'
+                                                         text
+                                                         onClick={() => handleStepClick(step.value)}
+                                                     />
+                                                 ))}
+                                             </div>
+                                         </OverlayPanel>
+                                     </div>
+                                 )}
+                             </Button>
+                         )
+                     })}
+    </div>
+  );
+};

package/dist/components/common/SolidFormStepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidFormStepper.d.ts","sourceRoot":"","sources":["../../../src/components/common/SolidFormStepper.tsx"],"names":[],"mappings":"AAUA,UAAU,KAAK;IACX,qBAAqB,CAAC,EAAE,GAAG,CAAC;IAC5B,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,iBAAiB,CAAC,EAAE,GAAG,CAAC;IACxB,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,uBAAuB,CAAC,EAAE,GAAG,CAAA;IAC7B,0BAA0B,CAAC,EAAE,GAAG,CAAA;IAChC,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;CAC/B;AAED,eAAO,MAAM,gBAAgB,UAAW,KAAK,4CAwS5C,CAAA"}
+{"version":3,"file":"SolidFormStepper.d.ts","sourceRoot":"","sources":["../../../src/components/common/SolidFormStepper.tsx"],"names":[],"mappings":"AAUA,UAAU,KAAK;IACX,qBAAqB,CAAC,EAAE,GAAG,CAAC;IAC5B,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,iBAAiB,CAAC,EAAE,GAAG,CAAC;IACxB,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,uBAAuB,CAAC,EAAE,GAAG,CAAA;IAC7B,0BAA0B,CAAC,EAAE,GAAG,CAAA;IAChC,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;CAC/B;AAED,eAAO,MAAM,gBAAgB,UAAW,KAAK,4CA8S5C,CAAA"}

package/dist/components/common/SolidFormStepper.js

@@ -69,6 +69,7 @@ export var SolidFormStepper = function (props) {
     var activeStep = (_s = solidFormViewWorkflowData === null || solidFormViewWorkflowData === void 0 ? void 0 : solidFormViewWorkflowData[0]) === null || _s === void 0 ? void 0 : _s.value;
     var _u = useState(""), solidWorkflowFieldKey = _u[0], setSolidWorkflowFieldKey = _u[1];
     var _v = useState(1), visibleStepsCount = _v[0], setVisibleStepsCount = _v[1];
+    var isStepperDisabled = solidWorkflowFieldEnabled === false || id === "new" || viewMode === "view";
     // Dynamic responsive logic
     useEffect(function () {
         var calculateVisibleSteps = function () {
@@ -190,7 +191,7 @@ export var SolidFormStepper = function (props) {
         });
     }); };
     var handleButtonClick = function (stepValue) {
-        if (solidWorkflowFieldEnabled === false || id === "new" || viewMode === "view") {
+        if (isStepperDisabled) {
             return;
         }
         else {
@@ -233,11 +234,11 @@ export var SolidFormStepper = function (props) {
     }
     var hasPreviousSteps = previousSteps.length > 0 && !isSingleVisibleStep;
     var hasNextSteps = nextSteps.length > 0 || (isSingleVisibleStep && previousSteps.length > 0);
-    return (_jsx(_Fragment, { children: _jsxs("div", { ref: containerRef, className: 'arrow-stepper-container', children: [hasPreviousSteps && (_jsxs(SolidPopover, { autoCloseGroup: "solid-form-stepper-overflow", children: [_jsx(SolidPopoverTrigger, { asChild: true, children: _jsx("button", { type: 'button', className: "overflow-button overflow-left-button", children: _jsx(SolidIcon, { name: "si-ellipsis-h" }) }) }), _jsx(SolidPopoverContent, { align: "start", className: "solid-custom-overlay solid-form-stepper-overlay", children: _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '0.25rem', padding: '0.5rem' }, children: previousSteps.map(function (step, index) {
+    return (_jsx(_Fragment, { children: _jsxs("div", { ref: containerRef, className: 'arrow-stepper-container', children: [hasPreviousSteps && (_jsxs(SolidPopover, { autoCloseGroup: "solid-form-stepper-overflow", children: [_jsx(SolidPopoverTrigger, { asChild: true, children: _jsx("button", { type: 'button', className: "overflow-button overflow-left-button", disabled: isStepperDisabled, children: _jsx(SolidIcon, { name: "si-ellipsis-h" }) }) }), _jsx(SolidPopoverContent, { align: "start", className: "solid-custom-overlay solid-form-stepper-overlay", children: _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '0.25rem', padding: '0.5rem' }, children: previousSteps.map(function (step, index) {
                                     var stepIndex = index;
                                     var isStepActive = stepIndex === activeIndex;
                                     var isStepBeforeActive = stepIndex < activeIndex;
-                                    return (_jsx("button", { type: 'button', className: "overlay-step-button ".concat(isStepActive ? 'active' : '', " ").concat(isStepBeforeActive ? 'completed' : ''), onClick: function () { return handleButtonClick(step.value); }, children: step.label }, stepIndex));
+                                    return (_jsx("button", { type: 'button', className: "overlay-step-button ".concat(isStepActive ? 'active' : '', " ").concat(isStepBeforeActive ? 'completed' : ''), onClick: function () { return handleButtonClick(step.value); }, disabled: isStepperDisabled, children: step.label }, stepIndex));
                                 }) }) })] })), visibleSteps.map(function (step) {
                     var stepIndex = solidFormViewWorkflowData.findIndex(function (s) { return s.value === step.value; });
                     var isActive = stepIndex === activeIndex;
@@ -247,13 +248,13 @@ export var SolidFormStepper = function (props) {
                             ? 'arrow-step-active'
                             : isBeforeActive
                                 ? 'arrow-step-completed'
-                                : 'arrow-step-future'), onClick: function () { return handleButtonClick(step.value); }, title: step.label, children: _jsx("span", { className: "step-text", children: step.label }) }, step.value));
-                }), hasNextSteps && (_jsxs(SolidPopover, { autoCloseGroup: "solid-form-stepper-overflow", children: [_jsx(SolidPopoverTrigger, { asChild: true, children: _jsx("button", { type: 'button', className: "overflow-button overflow-right-button", children: _jsx(SolidIcon, { name: "si-ellipsis-h" }) }) }), _jsx(SolidPopoverContent, { className: "solid-custom-overlay solid-form-stepper-overlay", children: _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '0.25rem', padding: '0.5rem' }, children: (isSingleVisibleStep
+                                : 'arrow-step-future'), onClick: function () { return handleButtonClick(step.value); }, title: step.label, disabled: isStepperDisabled, children: _jsx("span", { className: "step-text", children: step.label }) }, step.value));
+                }), hasNextSteps && (_jsxs(SolidPopover, { autoCloseGroup: "solid-form-stepper-overflow", children: [_jsx(SolidPopoverTrigger, { asChild: true, children: _jsx("button", { type: 'button', className: "overflow-button overflow-right-button", disabled: isStepperDisabled, children: _jsx(SolidIcon, { name: "si-ellipsis-h" }) }) }), _jsx(SolidPopoverContent, { className: "solid-custom-overlay solid-form-stepper-overlay", children: _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '0.25rem', padding: '0.5rem' }, children: (isSingleVisibleStep
                                     ? __spreadArray(__spreadArray([], previousSteps, true), nextSteps, true) : nextSteps).map(function (step) {
                                     var stepIndex = solidFormViewWorkflowData.findIndex(function (s) { return s.value === step.value; });
                                     var isStepActive = stepIndex === activeIndex;
                                     var isStepBeforeActive = stepIndex < activeIndex;
-                                    return (_jsx("button", { type: 'button', className: "overlay-step-button ".concat(isStepActive ? 'active' : '', " ").concat(isStepBeforeActive ? 'completed' : ''), onClick: function () { return handleButtonClick(step.value); }, children: step.label }, stepIndex));
+                                    return (_jsx("button", { type: 'button', className: "overlay-step-button ".concat(isStepActive ? 'active' : '', " ").concat(isStepBeforeActive ? 'completed' : ''), onClick: function () { return handleButtonClick(step.value); }, disabled: isStepperDisabled, children: step.label }, stepIndex));
                                 }) }) })] }))] }) }));
 };
 //# sourceMappingURL=SolidFormStepper.js.map

package/dist/components/common/SolidFormStepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidFormStepper.js","sourceRoot":"","sources":["../../../src/components/common/SolidFormStepper.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef, useState } from 'react'\nimport { createSolidEntityApi } from '../../redux/api/solidEntityApi';\nimport { useFormik } from 'formik';\nimport { useSearchParams } from \"../../hooks/useSearchParams\";\nimport { ERROR_MESSAGES } from '../../constants/error-messages';\nimport { useDispatch } from 'react-redux';\nimport { showToast } from '../../redux/features/toastSlice';\nimport { SolidPopover, SolidPopoverContent, SolidPopoverTrigger } from '../shad-cn-ui';\nimport { SolidIcon } from '../shad-cn-ui/SolidIcon';\n\ninterface Props {\n    solidFormViewMetaData?: any;\n    modelName?: any,\n    initialEntityData?: any;\n    id?: any,\n    solidWorkflowFieldValue?: any\n    setSolidWorkflowFieldValue?: any\n    onStepperUpdate?: () => void\n}\n\nexport const SolidFormStepper = (props: Props) => {\n    const { solidFormViewMetaData, modelName, initialEntityData, id, solidWorkflowFieldValue, setSolidWorkflowFieldValue, onStepperUpdate } = props;\n    const dispatch = useDispatch();\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    const searchParams = useSearchParams();\n    const viewMode = searchParams.get('viewMode');\n\n    const solidFormViewWorkflowData = solidFormViewMetaData?.data?.solidFormViewWorkflowData;\n    const solidWorkflowField = solidFormViewMetaData?.data?.solidView?.layout?.attrs?.workflowField;\n    const solidWorkflowFieldEnabled = solidFormViewMetaData?.data?.solidView?.layout?.attrs?.workflowFieldUpdateEnabled;\n    const defaultWorkflowFieldValue = solidFormViewMetaData?.data?.solidFieldsMetadata?.[solidWorkflowField]?.defaultValue;\n    const defaultWorkflowFieldDisplayName = solidFormViewMetaData?.data?.solidFieldsMetadata?.[solidWorkflowField]?.displayName;\n    const activeStep = solidFormViewWorkflowData?.[0]?.value;\n    const [solidWorkflowFieldKey, setSolidWorkflowFieldKey] = useState<string>(\"\");\n    const [visibleStepsCount, setVisibleStepsCount] = useState<number>(1);\n\n    // Dynamic responsive logic\n    useEffect(() => {\n        const calculateVisibleSteps = () => {\n            if (!containerRef.current || !solidFormViewWorkflowData || solidFormViewWorkflowData.length === 0) return;\n\n            const containerWidth = containerRef.current.offsetWidth;\n            const isMobile = window.innerWidth <= 767;\n            const overflowButtonWidth = isMobile ? 38 : 50;\n            const arrowWidth = 30; // Width for arrow between buttons\n            const spacing = 0; // No gap needed as arrows connect buttons\n\n            const tempContainer = document.createElement('div');\n            tempContainer.style.visibility = 'hidden';\n            tempContainer.style.position = 'absolute';\n            document.body.appendChild(tempContainer);\n\n            const buttonWidths: number[] = [];\n\n            solidFormViewWorkflowData.forEach((step: any) => {\n                const tempButton = document.createElement('button');\n                tempButton.className = 'arrow-step-button';\n                tempButton.textContent = step.label;\n                tempButton.style.padding = '0.5rem 1.5rem';\n                tempButton.style.minWidth = '100px';\n                tempContainer.appendChild(tempButton);\n                buttonWidths.push(Math.max(100, tempButton.offsetWidth));\n            });\n\n            document.body.removeChild(tempContainer);\n\n            let count = 0;\n            let totalWidth = 0;\n\n            for (let i = 0; i < buttonWidths.length; i++) {\n                const buttonWidth = buttonWidths[i];\n                const arrowSpace = i > 0 ? arrowWidth : 0;\n                const needsOverflow = i < buttonWidths.length - 1;\n                const requiredWidth = totalWidth + buttonWidth + arrowSpace + (needsOverflow ? overflowButtonWidth : 0);\n\n                if (requiredWidth <= containerWidth) {\n                    totalWidth += buttonWidth + arrowSpace;\n                    count++;\n                } else {\n                    break;\n                }\n            }\n\n            count = Math.max(1, count);\n            setVisibleStepsCount(count);\n        };\n\n        calculateVisibleSteps();\n\n        const resizeObserver = new ResizeObserver(calculateVisibleSteps);\n        if (containerRef.current) {\n            resizeObserver.observe(containerRef.current);\n        }\n\n        const timeoutId = setTimeout(calculateVisibleSteps, 100);\n\n        return () => {\n            resizeObserver.disconnect();\n            clearTimeout(timeoutId);\n        };\n    }, [solidFormViewWorkflowData]);\n\n    useEffect(() => {\n        if (!solidWorkflowField) return;\n\n        setSolidWorkflowFieldKey(solidWorkflowField);\n\n        setSolidWorkflowFieldValue(() => {\n            if (initialEntityData?.[solidWorkflowField] !== undefined) {\n                if (solidFormViewMetaData?.data?.solidFieldsMetadata?.[solidWorkflowField]?.type === \"relation\") {\n                    return initialEntityData[solidWorkflowField]?.id || initialEntityData[solidWorkflowField];\n                } else {\n                    return initialEntityData[solidWorkflowField];\n                }\n            } else if (defaultWorkflowFieldValue !== undefined) {\n                return defaultWorkflowFieldValue;\n            } else {\n                return activeStep;\n            }\n        });\n    }, [solidWorkflowField, initialEntityData, defaultWorkflowFieldValue, activeStep]);\n\n    const formik = useFormik({\n        enableReinitialize: true,\n        initialValues: {\n            id: +id,\n            [solidWorkflowFieldKey]: solidWorkflowFieldValue || \"\",\n        },\n        onSubmit: (values) => {\n            handleStepChange(values);\n        }\n    });\n\n    const entityApi = createSolidEntityApi(modelName);\n    const { usePatchUpdateSolidEntityMutation } = entityApi;\n\n    const [\n        updateStepper,\n        { isSuccess: isStepperUpdateSuccessfull, isError: isStepperUpdateError, error: stepperUpdateError },\n    ] = usePatchUpdateSolidEntityMutation();\n\n    const handleStepChange = async (values: any) => {\n        try {\n            const result = await updateStepper({ id: values.id, data: { [solidWorkflowFieldKey]: values[solidWorkflowFieldKey] } }).unwrap();\n            if (result?.statusCode === 200) {\n                dispatch(showToast({ severity: \"success\", summary: ERROR_MESSAGES.FIELD_UPDATE(defaultWorkflowFieldDisplayName), detail: ERROR_MESSAGES.FIELD_UPDATE_SUCCESSFULLY(defaultWorkflowFieldDisplayName) }));\n                if (result?.data?.[solidWorkflowFieldKey]) {\n                    setSolidWorkflowFieldValue(result.data[solidWorkflowFieldKey]);\n                }\n                if (onStepperUpdate) {\n                    onStepperUpdate();\n                }\n            }\n        } catch (error) {\n            console.error(ERROR_MESSAGES.UPDATING_STEPPER, error);\n            dispatch(showToast({ severity: \"error\", summary: ERROR_MESSAGES.UPDATE_FAILED, detail: ERROR_MESSAGES.FAILED_UPDATE_FROM }));\n        }\n    }\n\n    const handleButtonClick = (stepValue: any) => {\n        if (solidWorkflowFieldEnabled === false || id === \"new\" || viewMode === \"view\") {\n            return\n        } else {\n            formik.setFieldValue(solidWorkflowFieldKey, stepValue);\n            formik.handleSubmit();\n        }\n    }\n\n    const activeIndex = solidFormViewWorkflowData?.findIndex((step: any) => step.value === solidWorkflowFieldValue) ?? -1;\n\n    let visibleSteps: any[] = [];\n    let previousSteps: any[] = [];\n    let nextSteps: any[] = [];\n    const isSingleVisibleStep = visibleStepsCount === 1;\n\n    if (solidFormViewWorkflowData && solidFormViewWorkflowData.length > 0) {\n        if (activeIndex === -1) {\n            visibleSteps = solidFormViewWorkflowData.slice(0, visibleStepsCount);\n            nextSteps = solidFormViewWorkflowData.slice(visibleStepsCount);\n        } else if (visibleStepsCount === 1) {\n            visibleSteps = [solidFormViewWorkflowData[activeIndex]];\n            previousSteps = solidFormViewWorkflowData.slice(0, activeIndex);\n            nextSteps = solidFormViewWorkflowData.slice(activeIndex + 1);\n        } else {\n            const totalSteps = solidFormViewWorkflowData.length;\n\n            if (activeIndex < visibleStepsCount) {\n                visibleSteps = solidFormViewWorkflowData.slice(0, visibleStepsCount);\n                nextSteps = solidFormViewWorkflowData.slice(visibleStepsCount);\n            } else {\n                const slotsAvailable = visibleStepsCount - 1;\n                const afterActive = Math.min(Math.floor(slotsAvailable / 2), totalSteps - activeIndex - 1);\n                const beforeActive = slotsAvailable - afterActive;\n\n                const startIndex = Math.max(0, activeIndex - beforeActive);\n                const endIndex = Math.min(totalSteps, activeIndex + afterActive + 1);\n\n                previousSteps = solidFormViewWorkflowData.slice(0, startIndex);\n                visibleSteps = solidFormViewWorkflowData.slice(startIndex, endIndex);\n                nextSteps = solidFormViewWorkflowData.slice(endIndex);\n            }\n        }\n    }\n\n    const hasPreviousSteps =\n        previousSteps.length > 0 && !isSingleVisibleStep;\n\n    const hasNextSteps =\n        nextSteps.length > 0 || (isSingleVisibleStep && previousSteps.length > 0);\n\n    return (\n        <>\n            <div ref={containerRef} className='arrow-stepper-container'>\n                {hasPreviousSteps && (\n                    <SolidPopover autoCloseGroup=\"solid-form-stepper-overflow\">\n                        <SolidPopoverTrigger asChild>\n                            <button\n                                type='button'\n                                className=\"overflow-button overflow-left-button\"\n                            >\n                                <SolidIcon name=\"si-ellipsis-h\" />\n                            </button>\n                        </SolidPopoverTrigger>\n                        <SolidPopoverContent align=\"start\" className=\"solid-custom-overlay solid-form-stepper-overlay\">\n                            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem', padding: '0.5rem' }}>\n                                {previousSteps.map((step: any, index: number) => {\n                                    const stepIndex = index;\n                                    const isStepActive = stepIndex === activeIndex;\n                                    const isStepBeforeActive = stepIndex < activeIndex;\n\n                                    return (\n                                        <button\n                                            key={stepIndex}\n                                            type='button'\n                                            className={`overlay-step-button ${isStepActive ? 'active' : ''} ${isStepBeforeActive ? 'completed' : ''}`}\n                                            onClick={() => handleButtonClick(step.value)}\n                                        >\n                                            {step.label}\n                                        </button>\n                                    )\n                                })}\n                            </div>\n                        </SolidPopoverContent>\n                    </SolidPopover>\n                )}\n\n                {visibleSteps.map((step: any) => {\n                    const stepIndex = solidFormViewWorkflowData.findIndex(\n                        (s: any) => s.value === step.value\n                    );\n\n                    const isActive = stepIndex === activeIndex;\n                    const isBeforeActive = stepIndex < activeIndex;\n                    const isSingleButton = visibleSteps.length === 1;\n\n                    return (\n                        <button\n                            key={step.value}\n                            type=\"button\"\n                            className={`arrow-step-button ${isSingleButton ? 'single-button' : ''\n                                } ${isActive\n                                    ? 'arrow-step-active'\n                                    : isBeforeActive\n                                        ? 'arrow-step-completed'\n                                        : 'arrow-step-future'\n                                }`}\n                            onClick={() => handleButtonClick(step.value)}\n                            title={step.label}\n                        >\n                            <span className=\"step-text\">{step.label}</span>\n                        </button>\n                    );\n                })}\n\n                {hasNextSteps && (\n                    <SolidPopover autoCloseGroup=\"solid-form-stepper-overflow\">\n                        <SolidPopoverTrigger asChild>\n                            <button\n                                type='button'\n                                className=\"overflow-button overflow-right-button\"\n                            >\n                                <SolidIcon name=\"si-ellipsis-h\" />\n                            </button>\n                        </SolidPopoverTrigger>\n                        <SolidPopoverContent className=\"solid-custom-overlay solid-form-stepper-overlay\">\n                            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem', padding: '0.5rem' }}>\n                                {(isSingleVisibleStep\n                                    ? [...previousSteps, ...nextSteps]\n                                    : nextSteps).map((step: any) => {\n\n                                        const stepIndex = solidFormViewWorkflowData.findIndex(\n                                            (s: any) => s.value === step.value\n                                        );\n\n                                        const isStepActive = stepIndex === activeIndex;\n                                        const isStepBeforeActive = stepIndex < activeIndex;\n\n                                        return (\n                                            <button\n                                                key={stepIndex}\n                                                type='button'\n                                                className={`overlay-step-button ${isStepActive ? 'active' : ''} ${isStepBeforeActive ? 'completed' : ''}`}\n                                                onClick={() => handleButtonClick(step.value)}\n                                            >\n                                                {step.label}\n                                            </button>\n                                        )\n                                    })}\n                            </div>\n                        </SolidPopoverContent>\n                    </SolidPopover>\n                )}\n            </div>\n        </>\n    )\n}\n"]}
+{"version":3,"file":"SolidFormStepper.js","sourceRoot":"","sources":["../../../src/components/common/SolidFormStepper.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef, useState } from 'react'\nimport { createSolidEntityApi } from '../../redux/api/solidEntityApi';\nimport { useFormik } from 'formik';\nimport { useSearchParams } from \"../../hooks/useSearchParams\";\nimport { ERROR_MESSAGES } from '../../constants/error-messages';\nimport { useDispatch } from 'react-redux';\nimport { showToast } from '../../redux/features/toastSlice';\nimport { SolidPopover, SolidPopoverContent, SolidPopoverTrigger } from '../shad-cn-ui';\nimport { SolidIcon } from '../shad-cn-ui/SolidIcon';\n\ninterface Props {\n    solidFormViewMetaData?: any;\n    modelName?: any,\n    initialEntityData?: any;\n    id?: any,\n    solidWorkflowFieldValue?: any\n    setSolidWorkflowFieldValue?: any\n    onStepperUpdate?: () => void\n}\n\nexport const SolidFormStepper = (props: Props) => {\n    const { solidFormViewMetaData, modelName, initialEntityData, id, solidWorkflowFieldValue, setSolidWorkflowFieldValue, onStepperUpdate } = props;\n    const dispatch = useDispatch();\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    const searchParams = useSearchParams();\n    const viewMode = searchParams.get('viewMode');\n\n    const solidFormViewWorkflowData = solidFormViewMetaData?.data?.solidFormViewWorkflowData;\n    const solidWorkflowField = solidFormViewMetaData?.data?.solidView?.layout?.attrs?.workflowField;\n    const solidWorkflowFieldEnabled = solidFormViewMetaData?.data?.solidView?.layout?.attrs?.workflowFieldUpdateEnabled;\n    const defaultWorkflowFieldValue = solidFormViewMetaData?.data?.solidFieldsMetadata?.[solidWorkflowField]?.defaultValue;\n    const defaultWorkflowFieldDisplayName = solidFormViewMetaData?.data?.solidFieldsMetadata?.[solidWorkflowField]?.displayName;\n    const activeStep = solidFormViewWorkflowData?.[0]?.value;\n    const [solidWorkflowFieldKey, setSolidWorkflowFieldKey] = useState<string>(\"\");\n    const [visibleStepsCount, setVisibleStepsCount] = useState<number>(1);\n    const isStepperDisabled = solidWorkflowFieldEnabled === false || id === \"new\" || viewMode === \"view\";\n\n    // Dynamic responsive logic\n    useEffect(() => {\n        const calculateVisibleSteps = () => {\n            if (!containerRef.current || !solidFormViewWorkflowData || solidFormViewWorkflowData.length === 0) return;\n\n            const containerWidth = containerRef.current.offsetWidth;\n            const isMobile = window.innerWidth <= 767;\n            const overflowButtonWidth = isMobile ? 38 : 50;\n            const arrowWidth = 30; // Width for arrow between buttons\n            const spacing = 0; // No gap needed as arrows connect buttons\n\n            const tempContainer = document.createElement('div');\n            tempContainer.style.visibility = 'hidden';\n            tempContainer.style.position = 'absolute';\n            document.body.appendChild(tempContainer);\n\n            const buttonWidths: number[] = [];\n\n            solidFormViewWorkflowData.forEach((step: any) => {\n                const tempButton = document.createElement('button');\n                tempButton.className = 'arrow-step-button';\n                tempButton.textContent = step.label;\n                tempButton.style.padding = '0.5rem 1.5rem';\n                tempButton.style.minWidth = '100px';\n                tempContainer.appendChild(tempButton);\n                buttonWidths.push(Math.max(100, tempButton.offsetWidth));\n            });\n\n            document.body.removeChild(tempContainer);\n\n            let count = 0;\n            let totalWidth = 0;\n\n            for (let i = 0; i < buttonWidths.length; i++) {\n                const buttonWidth = buttonWidths[i];\n                const arrowSpace = i > 0 ? arrowWidth : 0;\n                const needsOverflow = i < buttonWidths.length - 1;\n                const requiredWidth = totalWidth + buttonWidth + arrowSpace + (needsOverflow ? overflowButtonWidth : 0);\n\n                if (requiredWidth <= containerWidth) {\n                    totalWidth += buttonWidth + arrowSpace;\n                    count++;\n                } else {\n                    break;\n                }\n            }\n\n            count = Math.max(1, count);\n            setVisibleStepsCount(count);\n        };\n\n        calculateVisibleSteps();\n\n        const resizeObserver = new ResizeObserver(calculateVisibleSteps);\n        if (containerRef.current) {\n            resizeObserver.observe(containerRef.current);\n        }\n\n        const timeoutId = setTimeout(calculateVisibleSteps, 100);\n\n        return () => {\n            resizeObserver.disconnect();\n            clearTimeout(timeoutId);\n        };\n    }, [solidFormViewWorkflowData]);\n\n    useEffect(() => {\n        if (!solidWorkflowField) return;\n\n        setSolidWorkflowFieldKey(solidWorkflowField);\n\n        setSolidWorkflowFieldValue(() => {\n            if (initialEntityData?.[solidWorkflowField] !== undefined) {\n                if (solidFormViewMetaData?.data?.solidFieldsMetadata?.[solidWorkflowField]?.type === \"relation\") {\n                    return initialEntityData[solidWorkflowField]?.id || initialEntityData[solidWorkflowField];\n                } else {\n                    return initialEntityData[solidWorkflowField];\n                }\n            } else if (defaultWorkflowFieldValue !== undefined) {\n                return defaultWorkflowFieldValue;\n            } else {\n                return activeStep;\n            }\n        });\n    }, [solidWorkflowField, initialEntityData, defaultWorkflowFieldValue, activeStep]);\n\n    const formik = useFormik({\n        enableReinitialize: true,\n        initialValues: {\n            id: +id,\n            [solidWorkflowFieldKey]: solidWorkflowFieldValue || \"\",\n        },\n        onSubmit: (values) => {\n            handleStepChange(values);\n        }\n    });\n\n    const entityApi = createSolidEntityApi(modelName);\n    const { usePatchUpdateSolidEntityMutation } = entityApi;\n\n    const [\n        updateStepper,\n        { isSuccess: isStepperUpdateSuccessfull, isError: isStepperUpdateError, error: stepperUpdateError },\n    ] = usePatchUpdateSolidEntityMutation();\n\n    const handleStepChange = async (values: any) => {\n        try {\n            const result = await updateStepper({ id: values.id, data: { [solidWorkflowFieldKey]: values[solidWorkflowFieldKey] } }).unwrap();\n            if (result?.statusCode === 200) {\n                dispatch(showToast({ severity: \"success\", summary: ERROR_MESSAGES.FIELD_UPDATE(defaultWorkflowFieldDisplayName), detail: ERROR_MESSAGES.FIELD_UPDATE_SUCCESSFULLY(defaultWorkflowFieldDisplayName) }));\n                if (result?.data?.[solidWorkflowFieldKey]) {\n                    setSolidWorkflowFieldValue(result.data[solidWorkflowFieldKey]);\n                }\n                if (onStepperUpdate) {\n                    onStepperUpdate();\n                }\n            }\n        } catch (error) {\n            console.error(ERROR_MESSAGES.UPDATING_STEPPER, error);\n            dispatch(showToast({ severity: \"error\", summary: ERROR_MESSAGES.UPDATE_FAILED, detail: ERROR_MESSAGES.FAILED_UPDATE_FROM }));\n        }\n    }\n\n    const handleButtonClick = (stepValue: any) => {\n        if (isStepperDisabled) {\n            return\n        } else {\n            formik.setFieldValue(solidWorkflowFieldKey, stepValue);\n            formik.handleSubmit();\n        }\n    }\n\n    const activeIndex = solidFormViewWorkflowData?.findIndex((step: any) => step.value === solidWorkflowFieldValue) ?? -1;\n\n    let visibleSteps: any[] = [];\n    let previousSteps: any[] = [];\n    let nextSteps: any[] = [];\n    const isSingleVisibleStep = visibleStepsCount === 1;\n\n    if (solidFormViewWorkflowData && solidFormViewWorkflowData.length > 0) {\n        if (activeIndex === -1) {\n            visibleSteps = solidFormViewWorkflowData.slice(0, visibleStepsCount);\n            nextSteps = solidFormViewWorkflowData.slice(visibleStepsCount);\n        } else if (visibleStepsCount === 1) {\n            visibleSteps = [solidFormViewWorkflowData[activeIndex]];\n            previousSteps = solidFormViewWorkflowData.slice(0, activeIndex);\n            nextSteps = solidFormViewWorkflowData.slice(activeIndex + 1);\n        } else {\n            const totalSteps = solidFormViewWorkflowData.length;\n\n            if (activeIndex < visibleStepsCount) {\n                visibleSteps = solidFormViewWorkflowData.slice(0, visibleStepsCount);\n                nextSteps = solidFormViewWorkflowData.slice(visibleStepsCount);\n            } else {\n                const slotsAvailable = visibleStepsCount - 1;\n                const afterActive = Math.min(Math.floor(slotsAvailable / 2), totalSteps - activeIndex - 1);\n                const beforeActive = slotsAvailable - afterActive;\n\n                const startIndex = Math.max(0, activeIndex - beforeActive);\n                const endIndex = Math.min(totalSteps, activeIndex + afterActive + 1);\n\n                previousSteps = solidFormViewWorkflowData.slice(0, startIndex);\n                visibleSteps = solidFormViewWorkflowData.slice(startIndex, endIndex);\n                nextSteps = solidFormViewWorkflowData.slice(endIndex);\n            }\n        }\n    }\n\n    const hasPreviousSteps =\n        previousSteps.length > 0 && !isSingleVisibleStep;\n\n    const hasNextSteps =\n        nextSteps.length > 0 || (isSingleVisibleStep && previousSteps.length > 0);\n\n    return (\n        <>\n            <div ref={containerRef} className='arrow-stepper-container'>\n                {hasPreviousSteps && (\n                    <SolidPopover autoCloseGroup=\"solid-form-stepper-overflow\">\n                        <SolidPopoverTrigger asChild>\n                            <button\n                                type='button'\n                                className=\"overflow-button overflow-left-button\"\n                                disabled={isStepperDisabled}\n                            >\n                                <SolidIcon name=\"si-ellipsis-h\" />\n                            </button>\n                        </SolidPopoverTrigger>\n                        <SolidPopoverContent align=\"start\" className=\"solid-custom-overlay solid-form-stepper-overlay\">\n                            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem', padding: '0.5rem' }}>\n                                {previousSteps.map((step: any, index: number) => {\n                                    const stepIndex = index;\n                                    const isStepActive = stepIndex === activeIndex;\n                                    const isStepBeforeActive = stepIndex < activeIndex;\n\n                                    return (\n                                        <button\n                                            key={stepIndex}\n                                            type='button'\n                                            className={`overlay-step-button ${isStepActive ? 'active' : ''} ${isStepBeforeActive ? 'completed' : ''}`}\n                                            onClick={() => handleButtonClick(step.value)}\n                                            disabled={isStepperDisabled}\n                                        >\n                                            {step.label}\n                                        </button>\n                                    )\n                                })}\n                            </div>\n                        </SolidPopoverContent>\n                    </SolidPopover>\n                )}\n\n                {visibleSteps.map((step: any) => {\n                    const stepIndex = solidFormViewWorkflowData.findIndex(\n                        (s: any) => s.value === step.value\n                    );\n\n                    const isActive = stepIndex === activeIndex;\n                    const isBeforeActive = stepIndex < activeIndex;\n                    const isSingleButton = visibleSteps.length === 1;\n\n                    return (\n                        <button\n                            key={step.value}\n                            type=\"button\"\n                            className={`arrow-step-button ${isSingleButton ? 'single-button' : ''\n                                } ${isActive\n                                    ? 'arrow-step-active'\n                                    : isBeforeActive\n                                        ? 'arrow-step-completed'\n                                        : 'arrow-step-future'\n                                }`}\n                            onClick={() => handleButtonClick(step.value)}\n                            title={step.label}\n                            disabled={isStepperDisabled}\n                        >\n                            <span className=\"step-text\">{step.label}</span>\n                        </button>\n                    );\n                })}\n\n                {hasNextSteps && (\n                    <SolidPopover autoCloseGroup=\"solid-form-stepper-overflow\">\n                        <SolidPopoverTrigger asChild>\n                            <button\n                                type='button'\n                                className=\"overflow-button overflow-right-button\"\n                                disabled={isStepperDisabled}\n                            >\n                                <SolidIcon name=\"si-ellipsis-h\" />\n                            </button>\n                        </SolidPopoverTrigger>\n                        <SolidPopoverContent className=\"solid-custom-overlay solid-form-stepper-overlay\">\n                            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem', padding: '0.5rem' }}>\n                                {(isSingleVisibleStep\n                                    ? [...previousSteps, ...nextSteps]\n                                    : nextSteps).map((step: any) => {\n\n                                        const stepIndex = solidFormViewWorkflowData.findIndex(\n                                            (s: any) => s.value === step.value\n                                        );\n\n                                        const isStepActive = stepIndex === activeIndex;\n                                        const isStepBeforeActive = stepIndex < activeIndex;\n\n                                        return (\n                                            <button\n                                                key={stepIndex}\n                                                type='button'\n                                                className={`overlay-step-button ${isStepActive ? 'active' : ''} ${isStepBeforeActive ? 'completed' : ''}`}\n                                                onClick={() => handleButtonClick(step.value)}\n                                                disabled={isStepperDisabled}\n                                            >\n                                                {step.label}\n                                            </button>\n                                        )\n                                    })}\n                            </div>\n                        </SolidPopoverContent>\n                    </SolidPopover>\n                )}\n            </div>\n        </>\n    )\n}\n"]}

package/dist/components/common/SolidFormStepper.tsx

@@ -34,6 +34,7 @@ export const SolidFormStepper = (props: Props) => {
     const activeStep = solidFormViewWorkflowData?.[0]?.value;
     const [solidWorkflowFieldKey, setSolidWorkflowFieldKey] = useState<string>("");
     const [visibleStepsCount, setVisibleStepsCount] = useState<number>(1);
+    const isStepperDisabled = solidWorkflowFieldEnabled === false || id === "new" || viewMode === "view";
 
     // Dynamic responsive logic
     useEffect(() => {
@@ -159,7 +160,7 @@ export const SolidFormStepper = (props: Props) => {
     }
 
     const handleButtonClick = (stepValue: any) => {
-        if (solidWorkflowFieldEnabled === false || id === "new" || viewMode === "view") {
+        if (isStepperDisabled) {
             return
         } else {
             formik.setFieldValue(solidWorkflowFieldKey, stepValue);
@@ -218,6 +219,7 @@ export const SolidFormStepper = (props: Props) => {
                             <button
                                 type='button'
                                 className="overflow-button overflow-left-button"
+                                disabled={isStepperDisabled}
                             >
                                 <SolidIcon name="si-ellipsis-h" />
                             </button>
@@ -235,6 +237,7 @@ export const SolidFormStepper = (props: Props) => {
                                             type='button'
                                             className={`overlay-step-button ${isStepActive ? 'active' : ''} ${isStepBeforeActive ? 'completed' : ''}`}
                                             onClick={() => handleButtonClick(step.value)}
+                                            disabled={isStepperDisabled}
                                         >
                                             {step.label}
                                         </button>
@@ -267,6 +270,7 @@ export const SolidFormStepper = (props: Props) => {
                                 }`}
                             onClick={() => handleButtonClick(step.value)}
                             title={step.label}
+                            disabled={isStepperDisabled}
                         >
                             <span className="step-text">{step.label}</span>
                         </button>
@@ -279,6 +283,7 @@ export const SolidFormStepper = (props: Props) => {
                             <button
                                 type='button'
                                 className="overflow-button overflow-right-button"
+                                disabled={isStepperDisabled}
                             >
                                 <SolidIcon name="si-ellipsis-h" />
                             </button>
@@ -302,6 +307,7 @@ export const SolidFormStepper = (props: Props) => {
                                                 type='button'
                                                 className={`overlay-step-button ${isStepActive ? 'active' : ''} ${isStepBeforeActive ? 'completed' : ''}`}
                                                 onClick={() => handleButtonClick(step.value)}
+                                                disabled={isStepperDisabled}
                                             >
                                                 {step.label}
                                             </button>

package/dist/components/common/SolidThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidThemeProvider.d.ts","sourceRoot":"","sources":["../../../src/components/common/SolidThemeProvider.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,kBAAkB,YAqB9B,CAAC"}
+{"version":3,"file":"SolidThemeProvider.d.ts","sourceRoot":"","sources":["../../../src/components/common/SolidThemeProvider.tsx"],"names":[],"mappings":"AA6BA,eAAO,MAAM,kBAAkB,YA8E9B,CAAC"}