@solidxai/core-ui 0.1.12-beta.5 → 0.1.12-beta.7

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/core/card/CardGrid.d.ts

@@ -1,3 +1,3 @@
-export declare const CardGrid: ({ records, solidCardViewMetaData, editButtonUrl, setLightboxUrls, setOpenLightbox, }: any) => import("react/jsx-runtime").JSX.Element;
+export declare const CardGrid: ({ records, solidCardViewMetaData, editButtonUrl, onRecover, setLightboxUrls, setOpenLightbox, showArchived, }: any) => import("react/jsx-runtime").JSX.Element;
 export default CardGrid;
 //# sourceMappingURL=CardGrid.d.ts.map

package/dist/components/core/card/CardGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardGrid.d.ts","sourceRoot":"","sources":["../../../../src/components/core/card/CardGrid.tsx"],"names":[],"mappings":"AAiBA,eAAO,MAAM,QAAQ,yFAMlB,GAAG,4CAyDL,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"CardGrid.d.ts","sourceRoot":"","sources":["../../../../src/components/core/card/CardGrid.tsx"],"names":[],"mappings":"AAiBA,eAAO,MAAM,QAAQ,kHAQlB,GAAG,4CA2DL,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/core/card/CardGrid.js

@@ -20,7 +20,7 @@ var findCardNode = function (nodes) {
 };
 export var CardGrid = function (_a) {
     var _b, _c, _d;
-    var records = _a.records, solidCardViewMetaData = _a.solidCardViewMetaData, editButtonUrl = _a.editButtonUrl, setLightboxUrls = _a.setLightboxUrls, setOpenLightbox = _a.setOpenLightbox;
+    var records = _a.records, solidCardViewMetaData = _a.solidCardViewMetaData, editButtonUrl = _a.editButtonUrl, onRecover = _a.onRecover, setLightboxUrls = _a.setLightboxUrls, setOpenLightbox = _a.setOpenLightbox, showArchived = _a.showArchived;
     var cardNode = findCardNode(((_c = (_b = solidCardViewMetaData === null || solidCardViewMetaData === void 0 ? void 0 : solidCardViewMetaData.solidView) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.children) || []);
     var cardWidget = ((_d = cardNode === null || cardNode === void 0 ? void 0 : cardNode.attrs) === null || _d === void 0 ? void 0 : _d.cardWidget) || (cardNode === null || cardNode === void 0 ? void 0 : cardNode.cardWidget);
     var DynamicCardWidget = cardWidget ? getExtensionComponent(cardWidget) : null;
@@ -36,7 +36,7 @@ export var CardGrid = function (_a) {
                             ? "Register the widget in the extension registry or update the card metadata to point at a valid component."
                             : "Configure attrs.cardWidget on the card metadata so the grid can render each record." })] }) }));
     }
-    return (_jsx("div", { className: "solid-card-view-grid", children: records.map(function (record) { return (_jsx(CardItem, { data: record, solidCardViewMetaData: solidCardViewMetaData, editButtonUrl: editButtonUrl, cardNode: cardNode, DynamicCardWidget: DynamicCardWidget, setLightboxUrls: setLightboxUrls, setOpenLightbox: setOpenLightbox }, record.id)); }) }));
+    return (_jsx("div", { className: "solid-card-view-grid", children: records.map(function (record) { return (_jsx(CardItem, { data: record, solidCardViewMetaData: solidCardViewMetaData, editButtonUrl: editButtonUrl, cardNode: cardNode, DynamicCardWidget: DynamicCardWidget, onRecover: onRecover, setLightboxUrls: setLightboxUrls, setOpenLightbox: setOpenLightbox, showArchived: showArchived }, record.id)); }) }));
 };
 export default CardGrid;
 //# sourceMappingURL=CardGrid.js.map

package/dist/components/core/card/CardGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardGrid.js","sourceRoot":"","sources":["../../../../src/components/core/card/CardGrid.tsx"],"names":[],"mappings":"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","sourcesContent":["// @ts-nocheck\nimport CardItem from \"./CardItem\";\nimport { getExtensionComponent } from \"../../../helpers/registry\";\n\nconst findCardNode = (nodes: any[] = []): any => {\n  for (const node of nodes) {\n    if (!node) continue;\n    if (node.type === \"card\") return node;\n    if (Array.isArray(node?.children) && node.children.length > 0) {\n      const nestedCard = findCardNode(node.children);\n      if (nestedCard) return nestedCard;\n    }\n  }\n\n  return null;\n};\n\nexport const CardGrid = ({\n  records,\n  solidCardViewMetaData,\n  editButtonUrl,\n  setLightboxUrls,\n  setOpenLightbox,\n}: any) => {\n  const cardNode = findCardNode(solidCardViewMetaData?.solidView?.layout?.children || []);\n  const cardWidget = cardNode?.attrs?.cardWidget || cardNode?.cardWidget;\n  const DynamicCardWidget = cardWidget ? getExtensionComponent(cardWidget) : null;\n  const cardConfigurationIssue = !cardWidget\n    ? { type: \"missing_widget_reference\" }\n    : !DynamicCardWidget\n      ? { type: \"missing_widget\", cardWidget }\n      : null;\n\n  if (cardConfigurationIssue) {\n    return (\n      <div className=\"solid-kanban-config-placeholder-container\">\n        <div className=\"solid-kanban-config-placeholder-panel\">\n          <div className=\"solid-kanban-config-placeholder-badge\">CARD CONFIGURATION</div>\n          <div className=\"solid-kanban-config-placeholder-title\">\n            {cardConfigurationIssue.type === \"missing_widget\"\n              ? \"Card widget could not be resolved\"\n              : \"Card widget is not configured\"}\n          </div>\n          <div className=\"solid-kanban-config-placeholder-description\">\n            {cardConfigurationIssue.type === \"missing_widget\" ? (\n              <>\n                This card view references <code>{cardConfigurationIssue.cardWidget}</code>, but no matching card widget is registered.\n              </>\n            ) : (\n              <>\n                This card view does not define a <code>cardWidget</code> on the card node.\n              </>\n            )}\n          </div>\n          <div className=\"solid-kanban-config-placeholder-hint\">\n            {cardConfigurationIssue.type === \"missing_widget\"\n              ? \"Register the widget in the extension registry or update the card metadata to point at a valid component.\"\n              : \"Configure attrs.cardWidget on the card metadata so the grid can render each record.\"}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"solid-card-view-grid\">\n      {records.map((record: any) => (\n        <CardItem\n          key={record.id}\n          data={record}\n          solidCardViewMetaData={solidCardViewMetaData}\n          editButtonUrl={editButtonUrl}\n          cardNode={cardNode}\n          DynamicCardWidget={DynamicCardWidget}\n          setLightboxUrls={setLightboxUrls}\n          setOpenLightbox={setOpenLightbox}\n        />\n      ))}\n    </div>\n  );\n};\n\nexport default CardGrid;\n"]}
+{"version":3,"file":"CardGrid.js","sourceRoot":"","sources":["../../../../src/components/core/card/CardGrid.tsx"],"names":[],"mappings":"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","sourcesContent":["// @ts-nocheck\nimport CardItem from \"./CardItem\";\nimport { getExtensionComponent } from \"../../../helpers/registry\";\n\nconst findCardNode = (nodes: any[] = []): any => {\n  for (const node of nodes) {\n    if (!node) continue;\n    if (node.type === \"card\") return node;\n    if (Array.isArray(node?.children) && node.children.length > 0) {\n      const nestedCard = findCardNode(node.children);\n      if (nestedCard) return nestedCard;\n    }\n  }\n\n  return null;\n};\n\nexport const CardGrid = ({\n  records,\n  solidCardViewMetaData,\n  editButtonUrl,\n  onRecover,\n  setLightboxUrls,\n  setOpenLightbox,\n  showArchived,\n}: any) => {\n  const cardNode = findCardNode(solidCardViewMetaData?.solidView?.layout?.children || []);\n  const cardWidget = cardNode?.attrs?.cardWidget || cardNode?.cardWidget;\n  const DynamicCardWidget = cardWidget ? getExtensionComponent(cardWidget) : null;\n  const cardConfigurationIssue = !cardWidget\n    ? { type: \"missing_widget_reference\" }\n    : !DynamicCardWidget\n      ? { type: \"missing_widget\", cardWidget }\n      : null;\n\n  if (cardConfigurationIssue) {\n    return (\n      <div className=\"solid-kanban-config-placeholder-container\">\n        <div className=\"solid-kanban-config-placeholder-panel\">\n          <div className=\"solid-kanban-config-placeholder-badge\">CARD CONFIGURATION</div>\n          <div className=\"solid-kanban-config-placeholder-title\">\n            {cardConfigurationIssue.type === \"missing_widget\"\n              ? \"Card widget could not be resolved\"\n              : \"Card widget is not configured\"}\n          </div>\n          <div className=\"solid-kanban-config-placeholder-description\">\n            {cardConfigurationIssue.type === \"missing_widget\" ? (\n              <>\n                This card view references <code>{cardConfigurationIssue.cardWidget}</code>, but no matching card widget is registered.\n              </>\n            ) : (\n              <>\n                This card view does not define a <code>cardWidget</code> on the card node.\n              </>\n            )}\n          </div>\n          <div className=\"solid-kanban-config-placeholder-hint\">\n            {cardConfigurationIssue.type === \"missing_widget\"\n              ? \"Register the widget in the extension registry or update the card metadata to point at a valid component.\"\n              : \"Configure attrs.cardWidget on the card metadata so the grid can render each record.\"}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"solid-card-view-grid\">\n      {records.map((record: any) => (\n        <CardItem\n          key={record.id}\n          data={record}\n          solidCardViewMetaData={solidCardViewMetaData}\n          editButtonUrl={editButtonUrl}\n          cardNode={cardNode}\n          DynamicCardWidget={DynamicCardWidget}\n          onRecover={onRecover}\n          setLightboxUrls={setLightboxUrls}\n          setOpenLightbox={setOpenLightbox}\n          showArchived={showArchived}\n        />\n      ))}\n    </div>\n  );\n};\n\nexport default CardGrid;\n"]}

package/dist/components/core/card/CardGrid.tsx

@@ -19,8 +19,10 @@ export const CardGrid = ({
   records,
   solidCardViewMetaData,
   editButtonUrl,
+  onRecover,
   setLightboxUrls,
   setOpenLightbox,
+  showArchived,
 }: any) => {
   const cardNode = findCardNode(solidCardViewMetaData?.solidView?.layout?.children || []);
   const cardWidget = cardNode?.attrs?.cardWidget || cardNode?.cardWidget;
@@ -72,8 +74,10 @@ export const CardGrid = ({
           editButtonUrl={editButtonUrl}
           cardNode={cardNode}
           DynamicCardWidget={DynamicCardWidget}
+          onRecover={onRecover}
           setLightboxUrls={setLightboxUrls}
           setOpenLightbox={setOpenLightbox}
+          showArchived={showArchived}
         />
       ))}
     </div>

package/dist/components/core/card/CardItem.d.ts

@@ -5,8 +5,10 @@ interface CardItemProps {
     editButtonUrl?: string;
     cardNode?: any;
     DynamicCardWidget?: any;
+    onRecover?: (record: any) => void;
     setLightboxUrls?: any;
     setOpenLightbox?: any;
+    showArchived?: boolean;
 }
 declare const CardItem: React.FC<CardItemProps>;
 export default CardItem;

package/dist/components/core/card/CardItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardItem.d.ts","sourceRoot":"","sources":["../../../../src/components/core/card/CardItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,UAAU,aAAa;IACrB,IAAI,EAAE,GAAG,CAAC;IACV,qBAAqB,EAAE,GAAG,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,iBAAiB,CAAC,EAAE,GAAG,CAAC;IACxB,eAAe,CAAC,EAAE,GAAG,CAAC;IACtB,eAAe,CAAC,EAAE,GAAG,CAAC;CACvB;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAiErC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"CardItem.d.ts","sourceRoot":"","sources":["../../../../src/components/core/card/CardItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,UAAU,aAAa;IACrB,IAAI,EAAE,GAAG,CAAC;IACV,qBAAqB,EAAE,GAAG,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,iBAAiB,CAAC,EAAE,GAAG,CAAC;IACxB,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IAClC,eAAe,CAAC,EAAE,GAAG,CAAC;IACtB,eAAe,CAAC,EAAE,GAAG,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAqFrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/core/card/CardItem.js

@@ -4,17 +4,22 @@ import { storeCurrentModelViewContext } from "../../../helpers/modelViewPersiste
 import { SolidDropdownMenu, SolidDropdownMenuContent, SolidDropdownMenuItem, SolidDropdownMenuTrigger, SolidIcon, } from "../../shad-cn-ui";
 var CardItem = function (_a) {
     var _b, _c;
-    var data = _a.data, solidCardViewMetaData = _a.solidCardViewMetaData, editButtonUrl = _a.editButtonUrl, cardNode = _a.cardNode, DynamicCardWidget = _a.DynamicCardWidget, setLightboxUrls = _a.setLightboxUrls, setOpenLightbox = _a.setOpenLightbox;
+    var data = _a.data, solidCardViewMetaData = _a.solidCardViewMetaData, editButtonUrl = _a.editButtonUrl, cardNode = _a.cardNode, DynamicCardWidget = _a.DynamicCardWidget, onRecover = _a.onRecover, setLightboxUrls = _a.setLightboxUrls, setOpenLightbox = _a.setOpenLightbox, showArchived = _a.showArchived;
     var router = useRouter();
+    var isArchivedRecord = (data === null || data === void 0 ? void 0 : data.deletedAt) !== null && (data === null || data === void 0 ? void 0 : data.deletedAt) !== undefined;
     var openRecord = function () {
+        if (isArchivedRecord)
+            return;
         storeCurrentModelViewContext();
         router.push("".concat(editButtonUrl, "/").concat(data === null || data === void 0 ? void 0 : data.id));
     };
     var openEdit = function () {
+        if (isArchivedRecord)
+            return;
         storeCurrentModelViewContext();
         router.push("".concat(editButtonUrl, "/").concat(data === null || data === void 0 ? void 0 : data.id));
     };
-    return (_jsx("div", { className: "solid-card-view-item", children: _jsxs("div", { className: "solid-card-view-card solid-kanban-card", onClick: openRecord, children: [_jsx("div", { className: "solid-kanban-action", onClick: function (e) { return e.stopPropagation(); }, children: _jsxs(SolidDropdownMenu, { children: [_jsx(SolidDropdownMenuTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "solid-header-cog-trigger solid-kanban-action-trigger", "aria-label": "Open card actions", children: _jsx(SolidIcon, { name: "si-ellipsis-v", "aria-hidden": true }) }) }), _jsx(SolidDropdownMenuContent, { className: "solid-custom-overlay", align: "end", children: _jsxs(SolidDropdownMenuItem, { className: "solid-header-dropdown-item", onSelect: openEdit, children: [_jsx(SolidIcon, { name: "si-pencil", className: "solid-header-action-button-icon", "aria-hidden": true }), _jsx("span", { className: "solid-header-action-button-label", children: "Edit" })] }) })] }) }), DynamicCardWidget ? (_jsx(DynamicCardWidget, { rowData: data, solidKanbanViewMetaData: solidCardViewMetaData, solidView: solidCardViewMetaData === null || solidCardViewMetaData === void 0 ? void 0 : solidCardViewMetaData.solidView, solidFieldsMetadata: solidCardViewMetaData === null || solidCardViewMetaData === void 0 ? void 0 : solidCardViewMetaData.solidFieldsMetadata, card: cardNode, layoutAttrs: ((_c = (_b = solidCardViewMetaData === null || solidCardViewMetaData === void 0 ? void 0 : solidCardViewMetaData.solidView) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.attrs) || {}, groupedView: false, editButtonUrl: editButtonUrl, setLightboxUrls: setLightboxUrls, setOpenLightbox: setOpenLightbox, openRecord: openRecord, openEdit: openEdit })) : null] }) }));
+    return (_jsx("div", { className: "solid-card-view-item", children: _jsxs("div", { className: "solid-card-view-card solid-kanban-card".concat(isArchivedRecord ? " greyed-out-row" : ""), onClick: openRecord, style: { cursor: isArchivedRecord ? "default" : "pointer" }, children: [_jsx("div", { className: "solid-kanban-action", onClick: function (e) { return e.stopPropagation(); }, children: _jsxs(SolidDropdownMenu, { children: [_jsx(SolidDropdownMenuTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "solid-header-cog-trigger solid-kanban-action-trigger", "aria-label": "Open card actions", children: _jsx(SolidIcon, { name: "si-ellipsis-v", "aria-hidden": true }) }) }), _jsxs(SolidDropdownMenuContent, { className: "solid-custom-overlay", align: "end", children: [!isArchivedRecord ? (_jsxs(SolidDropdownMenuItem, { className: "solid-header-dropdown-item", onSelect: openEdit, children: [_jsx(SolidIcon, { name: "si-pencil", className: "solid-header-action-button-icon", "aria-hidden": true }), _jsx("span", { className: "solid-header-action-button-label", children: "Edit" })] })) : null, showArchived && (data === null || data === void 0 ? void 0 : data.deletedAt) !== null && (data === null || data === void 0 ? void 0 : data.deletedAt) !== undefined && onRecover ? (_jsxs(SolidDropdownMenuItem, { className: "solid-header-dropdown-item", onSelect: function () { return onRecover(data); }, children: [_jsx(SolidIcon, { name: "si-refresh", className: "solid-header-action-button-icon", "aria-hidden": true }), _jsx("span", { className: "solid-header-action-button-label", children: "Recover" })] })) : null] })] }) }), DynamicCardWidget ? (_jsx(DynamicCardWidget, { rowData: data, solidKanbanViewMetaData: solidCardViewMetaData, solidView: solidCardViewMetaData === null || solidCardViewMetaData === void 0 ? void 0 : solidCardViewMetaData.solidView, solidFieldsMetadata: solidCardViewMetaData === null || solidCardViewMetaData === void 0 ? void 0 : solidCardViewMetaData.solidFieldsMetadata, card: cardNode, layoutAttrs: ((_c = (_b = solidCardViewMetaData === null || solidCardViewMetaData === void 0 ? void 0 : solidCardViewMetaData.solidView) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.attrs) || {}, groupedView: false, editButtonUrl: editButtonUrl, setLightboxUrls: setLightboxUrls, setOpenLightbox: setOpenLightbox, openRecord: openRecord, openEdit: openEdit })) : null] }) }));
 };
 export default CardItem;
 //# sourceMappingURL=CardItem.js.map

package/dist/components/core/card/CardItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardItem.js","sourceRoot":"","sources":["../../../../src/components/core/card/CardItem.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,EAAE,4BAA4B,EAAE,MAAM,uCAAuC,CAAC;AACrF,OAAO,EACL,iBAAiB,EACjB,wBAAwB,EACxB,qBAAqB,EACrB,wBAAwB,EACxB,SAAS,GACV,MAAM,kBAAkB,CAAC;AAY1B,IAAM,QAAQ,GAA4B,UAAC,EAQ1C;;QAPC,IAAI,UAAA,EACJ,qBAAqB,2BAAA,EACrB,aAAa,mBAAA,EACb,QAAQ,cAAA,EACR,iBAAiB,uBAAA,EACjB,eAAe,qBAAA,EACf,eAAe,qBAAA;IAEf,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,IAAM,UAAU,GAAG;QACjB,4BAA4B,EAAE,CAAC;QAC/B,MAAM,CAAC,IAAI,CAAC,UAAG,aAAa,cAAI,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,EAAE,CAAE,CAAC,CAAC;IAC9C,CAAC,CAAC;IAEF,IAAM,QAAQ,GAAG;QACf,4BAA4B,EAAE,CAAC;QAC/B,MAAM,CAAC,IAAI,CAAC,UAAG,aAAa,cAAI,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,EAAE,CAAE,CAAC,CAAC;IAC9C,CAAC,CAAC;IAEF,OAAO,CACL,cAAK,SAAS,EAAC,sBAAsB,YACnC,eAAK,SAAS,EAAC,wCAAwC,EAAC,OAAO,EAAE,UAAU,aACzE,cAAK,SAAS,EAAC,qBAAqB,EAAC,OAAO,EAAE,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,eAAe,EAAE,EAAnB,CAAmB,YACtE,MAAC,iBAAiB,eAChB,KAAC,wBAAwB,IAAC,OAAO,kBAC/B,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,sDAAsD,gBACrD,mBAAmB,YAE9B,KAAC,SAAS,IAAC,IAAI,EAAC,eAAe,wBAAe,GACvC,GACgB,EAC3B,KAAC,wBAAwB,IAAC,SAAS,EAAC,sBAAsB,EAAC,KAAK,EAAC,KAAK,YACpE,MAAC,qBAAqB,IACpB,SAAS,EAAC,4BAA4B,EACtC,QAAQ,EAAE,QAAQ,aAElB,KAAC,SAAS,IAAC,IAAI,EAAC,WAAW,EAAC,SAAS,EAAC,iCAAiC,wBAAe,EACtF,eAAM,SAAS,EAAC,kCAAkC,qBAAY,IACxC,GACC,IACT,GAChB,EACL,iBAAiB,CAAC,CAAC,CAAC,CACnB,KAAC,iBAAiB,IAChB,OAAO,EAAE,IAAI,EACb,uBAAuB,EAAE,qBAAqB,EAC9C,SAAS,EAAE,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,SAAS,EAC3C,mBAAmB,EAAE,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,mBAAmB,EAC/D,IAAI,EAAE,QAAQ,EACd,WAAW,EAAE,CAAA,MAAA,MAAA,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,SAAS,0CAAE,MAAM,0CAAE,KAAK,KAAI,EAAE,EAClE,WAAW,EAAE,KAAK,EAClB,aAAa,EAAE,aAAa,EAC5B,eAAe,EAAE,eAAe,EAChC,eAAe,EAAE,eAAe,EAChC,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC,CAAC,CAAC,IAAI,IACJ,GACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["// @ts-nocheck\nimport React from \"react\";\nimport { useRouter } from \"../../../hooks/useRouter\";\nimport { storeCurrentModelViewContext } from \"../../../helpers/modelViewPersistence\";\nimport {\n  SolidDropdownMenu,\n  SolidDropdownMenuContent,\n  SolidDropdownMenuItem,\n  SolidDropdownMenuTrigger,\n  SolidIcon,\n} from \"../../shad-cn-ui\";\n\ninterface CardItemProps {\n  data: any;\n  solidCardViewMetaData: any;\n  editButtonUrl?: string;\n  cardNode?: any;\n  DynamicCardWidget?: any;\n  setLightboxUrls?: any;\n  setOpenLightbox?: any;\n}\n\nconst CardItem: React.FC<CardItemProps> = ({\n  data,\n  solidCardViewMetaData,\n  editButtonUrl,\n  cardNode,\n  DynamicCardWidget,\n  setLightboxUrls,\n  setOpenLightbox,\n}) => {\n  const router = useRouter();\n\n  const openRecord = () => {\n    storeCurrentModelViewContext();\n    router.push(`${editButtonUrl}/${data?.id}`);\n  };\n\n  const openEdit = () => {\n    storeCurrentModelViewContext();\n    router.push(`${editButtonUrl}/${data?.id}`);\n  };\n\n  return (\n    <div className=\"solid-card-view-item\">\n      <div className=\"solid-card-view-card solid-kanban-card\" onClick={openRecord}>\n        <div className=\"solid-kanban-action\" onClick={(e) => e.stopPropagation()}>\n          <SolidDropdownMenu>\n            <SolidDropdownMenuTrigger asChild>\n              <button\n                type=\"button\"\n                className=\"solid-header-cog-trigger solid-kanban-action-trigger\"\n                aria-label=\"Open card actions\"\n              >\n                <SolidIcon name=\"si-ellipsis-v\" aria-hidden />\n              </button>\n            </SolidDropdownMenuTrigger>\n            <SolidDropdownMenuContent className=\"solid-custom-overlay\" align=\"end\">\n              <SolidDropdownMenuItem\n                className=\"solid-header-dropdown-item\"\n                onSelect={openEdit}\n              >\n                <SolidIcon name=\"si-pencil\" className=\"solid-header-action-button-icon\" aria-hidden />\n                <span className=\"solid-header-action-button-label\">Edit</span>\n              </SolidDropdownMenuItem>\n            </SolidDropdownMenuContent>\n          </SolidDropdownMenu>\n        </div>\n        {DynamicCardWidget ? (\n          <DynamicCardWidget\n            rowData={data}\n            solidKanbanViewMetaData={solidCardViewMetaData}\n            solidView={solidCardViewMetaData?.solidView}\n            solidFieldsMetadata={solidCardViewMetaData?.solidFieldsMetadata}\n            card={cardNode}\n            layoutAttrs={solidCardViewMetaData?.solidView?.layout?.attrs || {}}\n            groupedView={false}\n            editButtonUrl={editButtonUrl}\n            setLightboxUrls={setLightboxUrls}\n            setOpenLightbox={setOpenLightbox}\n            openRecord={openRecord}\n            openEdit={openEdit}\n          />\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\nexport default CardItem;\n"]}
+{"version":3,"file":"CardItem.js","sourceRoot":"","sources":["../../../../src/components/core/card/CardItem.tsx"],"names":[],"mappings":"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","sourcesContent":["// @ts-nocheck\nimport React from \"react\";\nimport { useRouter } from \"../../../hooks/useRouter\";\nimport { storeCurrentModelViewContext } from \"../../../helpers/modelViewPersistence\";\nimport {\n  SolidDropdownMenu,\n  SolidDropdownMenuContent,\n  SolidDropdownMenuItem,\n  SolidDropdownMenuTrigger,\n  SolidIcon,\n} from \"../../shad-cn-ui\";\n\ninterface CardItemProps {\n  data: any;\n  solidCardViewMetaData: any;\n  editButtonUrl?: string;\n  cardNode?: any;\n  DynamicCardWidget?: any;\n  onRecover?: (record: any) => void;\n  setLightboxUrls?: any;\n  setOpenLightbox?: any;\n  showArchived?: boolean;\n}\n\nconst CardItem: React.FC<CardItemProps> = ({\n  data,\n  solidCardViewMetaData,\n  editButtonUrl,\n  cardNode,\n  DynamicCardWidget,\n  onRecover,\n  setLightboxUrls,\n  setOpenLightbox,\n  showArchived,\n}) => {\n  const router = useRouter();\n  const isArchivedRecord = data?.deletedAt !== null && data?.deletedAt !== undefined;\n\n  const openRecord = () => {\n    if (isArchivedRecord) return;\n    storeCurrentModelViewContext();\n    router.push(`${editButtonUrl}/${data?.id}`);\n  };\n\n  const openEdit = () => {\n    if (isArchivedRecord) return;\n    storeCurrentModelViewContext();\n    router.push(`${editButtonUrl}/${data?.id}`);\n  };\n\n  return (\n    <div className=\"solid-card-view-item\">\n      <div\n        className={`solid-card-view-card solid-kanban-card${isArchivedRecord ? \" greyed-out-row\" : \"\"}`}\n        onClick={openRecord}\n        style={{ cursor: isArchivedRecord ? \"default\" : \"pointer\" }}\n      >\n        <div className=\"solid-kanban-action\" onClick={(e) => e.stopPropagation()}>\n          <SolidDropdownMenu>\n            <SolidDropdownMenuTrigger asChild>\n              <button\n                type=\"button\"\n                className=\"solid-header-cog-trigger solid-kanban-action-trigger\"\n                aria-label=\"Open card actions\"\n              >\n                <SolidIcon name=\"si-ellipsis-v\" aria-hidden />\n              </button>\n            </SolidDropdownMenuTrigger>\n            <SolidDropdownMenuContent className=\"solid-custom-overlay\" align=\"end\">\n              {!isArchivedRecord ? (\n                <SolidDropdownMenuItem\n                  className=\"solid-header-dropdown-item\"\n                  onSelect={openEdit}\n                >\n                  <SolidIcon name=\"si-pencil\" className=\"solid-header-action-button-icon\" aria-hidden />\n                  <span className=\"solid-header-action-button-label\">Edit</span>\n                </SolidDropdownMenuItem>\n              ) : null}\n              {showArchived && data?.deletedAt !== null && data?.deletedAt !== undefined && onRecover ? (\n                <SolidDropdownMenuItem\n                  className=\"solid-header-dropdown-item\"\n                  onSelect={() => onRecover(data)}\n                >\n                  <SolidIcon name=\"si-refresh\" className=\"solid-header-action-button-icon\" aria-hidden />\n                  <span className=\"solid-header-action-button-label\">Recover</span>\n                </SolidDropdownMenuItem>\n              ) : null}\n            </SolidDropdownMenuContent>\n          </SolidDropdownMenu>\n        </div>\n        {DynamicCardWidget ? (\n          <DynamicCardWidget\n            rowData={data}\n            solidKanbanViewMetaData={solidCardViewMetaData}\n            solidView={solidCardViewMetaData?.solidView}\n            solidFieldsMetadata={solidCardViewMetaData?.solidFieldsMetadata}\n            card={cardNode}\n            layoutAttrs={solidCardViewMetaData?.solidView?.layout?.attrs || {}}\n            groupedView={false}\n            editButtonUrl={editButtonUrl}\n            setLightboxUrls={setLightboxUrls}\n            setOpenLightbox={setOpenLightbox}\n            openRecord={openRecord}\n            openEdit={openEdit}\n          />\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\nexport default CardItem;\n"]}

package/dist/components/core/card/CardItem.tsx

@@ -16,8 +16,10 @@ interface CardItemProps {
   editButtonUrl?: string;
   cardNode?: any;
   DynamicCardWidget?: any;
+  onRecover?: (record: any) => void;
   setLightboxUrls?: any;
   setOpenLightbox?: any;
+  showArchived?: boolean;
 }
 
 const CardItem: React.FC<CardItemProps> = ({
@@ -26,24 +28,33 @@ const CardItem: React.FC<CardItemProps> = ({
   editButtonUrl,
   cardNode,
   DynamicCardWidget,
+  onRecover,
   setLightboxUrls,
   setOpenLightbox,
+  showArchived,
 }) => {
   const router = useRouter();
+  const isArchivedRecord = data?.deletedAt !== null && data?.deletedAt !== undefined;
 
   const openRecord = () => {
+    if (isArchivedRecord) return;
     storeCurrentModelViewContext();
     router.push(`${editButtonUrl}/${data?.id}`);
   };
 
   const openEdit = () => {
+    if (isArchivedRecord) return;
     storeCurrentModelViewContext();
     router.push(`${editButtonUrl}/${data?.id}`);
   };
 
   return (
     <div className="solid-card-view-item">
-      <div className="solid-card-view-card solid-kanban-card" onClick={openRecord}>
+      <div
+        className={`solid-card-view-card solid-kanban-card${isArchivedRecord ? " greyed-out-row" : ""}`}
+        onClick={openRecord}
+        style={{ cursor: isArchivedRecord ? "default" : "pointer" }}
+      >
         <div className="solid-kanban-action" onClick={(e) => e.stopPropagation()}>
           <SolidDropdownMenu>
             <SolidDropdownMenuTrigger asChild>
@@ -56,13 +67,24 @@ const CardItem: React.FC<CardItemProps> = ({
               </button>
             </SolidDropdownMenuTrigger>
             <SolidDropdownMenuContent className="solid-custom-overlay" align="end">
-              <SolidDropdownMenuItem
-                className="solid-header-dropdown-item"
-                onSelect={openEdit}
-              >
-                <SolidIcon name="si-pencil" className="solid-header-action-button-icon" aria-hidden />
-                <span className="solid-header-action-button-label">Edit</span>
-              </SolidDropdownMenuItem>
+              {!isArchivedRecord ? (
+                <SolidDropdownMenuItem
+                  className="solid-header-dropdown-item"
+                  onSelect={openEdit}
+                >
+                  <SolidIcon name="si-pencil" className="solid-header-action-button-icon" aria-hidden />
+                  <span className="solid-header-action-button-label">Edit</span>
+                </SolidDropdownMenuItem>
+              ) : null}
+              {showArchived && data?.deletedAt !== null && data?.deletedAt !== undefined && onRecover ? (
+                <SolidDropdownMenuItem
+                  className="solid-header-dropdown-item"
+                  onSelect={() => onRecover(data)}
+                >
+                  <SolidIcon name="si-refresh" className="solid-header-action-button-icon" aria-hidden />
+                  <span className="solid-header-action-button-label">Recover</span>
+                </SolidDropdownMenuItem>
+              ) : null}
             </SolidDropdownMenuContent>
           </SolidDropdownMenu>
         </div>

package/dist/components/core/card/SolidCardView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidCardView.d.ts","sourceRoot":"","sources":["../../../../src/components/core/card/SolidCardView.tsx"],"names":[],"mappings":"AAiCA,KAAK,mBAAmB,GAAG;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AA8DF,eAAO,MAAM,aAAa,WAAY,mBAAmB,4CA4axD,CAAC"}
+{"version":3,"file":"SolidCardView.d.ts","sourceRoot":"","sources":["../../../../src/components/core/card/SolidCardView.tsx"],"names":[],"mappings":"AAmCA,KAAK,mBAAmB,GAAG;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AA8DF,eAAO,MAAM,aAAa,WAAY,mBAAmB,4CAkexD,CAAC"}