tcce-design-system 0.3.30 → 0.3.32

package/dist/tcce-design-system-components.d.ts

@@ -1,4 +1,5 @@
 import { AnchorHTMLAttributes } from 'react';
+import { AnySchema } from 'yup';
 import { ButtonHTMLAttributes } from 'react';
 import { Cell } from '@tanstack/react-table';
 import { ChangeEvent } from 'react';
@@ -1907,7 +1908,7 @@ export declare type StepperSize = 'sm' | 'md' | 'lg';
  */
 export declare const StoreDialog: <T extends {
     id?: number | string;
-}>({ isOpen, setOpen, handleCreate, handleEdit, item, initialValues, formInputs, option, title, buttonText, }: StoreDialogProps<T>) => JSX.Element;
+}>({ isOpen, setOpen, handleCreate, handleEdit, item, initialValues, formInputs, option, title, buttonText, validationSchema, }: StoreDialogProps<T>) => JSX.Element;
 
 /**
  * Label set used for create and edit mode text.
@@ -1939,6 +1940,7 @@ export declare type StoreDialogOption = 'create' | 'edit';
  * @param option - Defines whether the dialog works in create or edit mode.
  * @param title - Optional heading labels for each mode.
  * @param buttonText - Optional submit button labels for each mode.
+ * @param validationSchema - Optional Yup schema passed to Formik for form validation.
  */
 export declare interface StoreDialogProps<T = any> {
     isOpen: boolean;
@@ -1951,6 +1953,7 @@ export declare interface StoreDialogProps<T = any> {
     option: StoreDialogOption;
     title?: StoreDialogLabels;
     buttonText?: StoreDialogLabels;
+    validationSchema?: AnySchema;
 }
 
 /**

package/dist/tcce-design-system-components.js

@@ -9109,7 +9109,7 @@ const w0 = S.div`
   // Overlays / modals
   // Tooltips / menus that should appear above header/sidebar.
   TOOLTIP: 1202,
-  POPOVER_MENU: 1201,
+  POPOVER_MENU: 9999,
   DIALOG_OVERLAY: 2001
 }, R0 = S(Ue.div)`
     position: fixed;
@@ -9620,26 +9620,21 @@ const U1 = ({
   buttonText: c = {
     create: "Create",
     edit: "Save Changes"
-  }
+  },
+  validationSchema: u
 }) => /* @__PURE__ */ D(_r, { isOpen: e, onClose: () => t(!1), showCloseButton: !0, children: [
   /* @__PURE__ */ g(Nr, { children: /* @__PURE__ */ g(er, { children: a === "create" ? l.create : l.edit }) }),
   /* @__PURE__ */ g(Br, { children: /* @__PURE__ */ g(
     _c,
     {
       initialValues: i,
+      validationSchema: u,
       enableReinitialize: !0,
-      onSubmit: (u) => {
-        a === "create" ? n(u) : o && r?.id && o(r.id, u);
+      onSubmit: (d) => {
+        a === "create" ? n(d) : a === "edit" && o && r?.id !== void 0 && r?.id !== null && o(r.id, d);
       },
-      children: ({ values: u, isValid: d }) => /* @__PURE__ */ D(Nc, { children: [
-        s.map((f) => /* @__PURE__ */ g(
-          x0,
-          {
-            ...f,
-            value: u[f.name]
-          },
-          f.name
-        )),
+      children: ({ values: d, isValid: f }) => /* @__PURE__ */ D(Nc, { children: [
+        s.map((h) => /* @__PURE__ */ g(x0, { ...h, value: d[h.name] }, h.name)),
         /* @__PURE__ */ D("section", { className: "flex justify-between py-4", children: [
           /* @__PURE__ */ g(
             je,
@@ -9650,7 +9645,7 @@ const U1 = ({
               children: "Cancel"
             }
           ),
-          /* @__PURE__ */ g(je, { type: "submit", disabled: !d, children: a === "create" ? c.create : c.edit })
+          /* @__PURE__ */ g(je, { type: "submit", disabled: !f, children: a === "create" ? c.create : c.edit })
         ] })
       ] })
     }
@@ -12873,7 +12868,7 @@ const Iv = Ln(Fv), Lv = Is`
         l.id
       );
     }),
-    e.length === 0 && /* @__PURE__ */ g("tr", { children: /* @__PURE__ */ g("td", { colSpan: 100, className: "text-main-grey py-4 text-center", children: "No results found" }) })
+    e.length === 0 && /* @__PURE__ */ g("tr", { children: /* @__PURE__ */ g("td", { colSpan: 100, className: "text-main-grey py-4 text-center bg-main-white", children: "No results found" }) })
   ] }) });
 }, zv = S.section`
     display: flex;

package/dist/tcce-design-system-components.umd.cjs

@@ -1134,7 +1134,7 @@
     flex-direction: column;
     gap: 0.5rem;
     width: 100%;
-`,E0=m.memo(({inputId:e,label:t,size:n,required:o,disabled:r,hasError:i,errorMessage:s,isCheckbox:a=!1,className:l,labelClassName:c,messageErrorClassName:u,children:d})=>g.jsxs($0,{className:l,children:[t&&!a&&g.jsx(Tn,{htmlFor:e,size:n,required:o,disabled:r,className:c,children:t}),d,i&&s&&g.jsx(fr,{id:`${e}-error`,size:n,className:u,children:s})]})),Il=({id:e,name:t,label:n,type:o="text",size:r="md",placeholder:i,disabled:s=!1,required:a=!1,options:l=[],checkboxLabel:c,radioName:u,pinLength:d=6,pinType:f="number",rows:h=4,className:p,inputClassName:y,labelClassName:b,messageErrorClassName:w,leftIcon:x,rightIcon:C,iconSize:T,iconColor:$,onOptionSelect:M,onRadioChange:F,onPinComplete:E,onChange:D,optionsClassName:P,optionClassName:R,..._})=>{const{field:k,hasError:A,errorMessage:O,inputId:L,ariaProps:G,handleStandardChange:H,handleTextAreaChange:Y,handleCheckboxChange:J,handleSelectChange:te,handleRadioChange:We,handlePinChange:j,handlePinComplete:Q}=C0({name:t,required:a,onChange:D,onOptionSelect:M,onRadioChange:F,onPinComplete:E,options:l}),K=e?.toString?.()||L;return g.jsx(E0,{inputId:K,label:n,size:r,required:a,disabled:s,hasError:A,errorMessage:O,isCheckbox:o==="checkbox",className:p,labelClassName:b,messageErrorClassName:w,children:g.jsx(Fl,{type:o,inputId:K,name:t,size:r,hasError:A,disabled:s,placeholder:i,inputClassName:y,fieldValue:k.value,ariaProps:G,options:l,onSelectChange:te,checkboxLabel:c,onCheckboxChange:J,radioName:u,onRadioChange:We,pinLength:d,pinType:f,rows:h,onPinChange:j,onPinComplete:Q,onStandardChange:H,onTextAreaChange:Y,leftIcon:x,rightIcon:C,iconSize:T,iconColor:$,optionsClassName:P,optionClassName:R,additionalProps:_})})},Ll={initial:{opacity:0,scale:.95},animate:{opacity:1,scale:1},exit:{opacity:0,scale:.95},transition:{duration:.2,ease:"easeInOut"},layout:!1},Tr={initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3,ease:"easeInOut"}},P0={fromBottom:{initial:{opacity:0,y:20},animate:{opacity:1,y:0},exit:{opacity:0,y:20},transition:{duration:.2,ease:"easeInOut"}},fromTop:{initial:{opacity:0,y:-20},animate:{opacity:1,y:0},exit:{opacity:0,y:-20},transition:{duration:.2,ease:"easeInOut"}},fromLeft:{initial:{opacity:0,x:-20},animate:{opacity:1,x:0},exit:{opacity:0,x:-20},transition:{duration:.2,ease:"easeInOut"}},fromRight:{initial:{opacity:0,x:20},animate:{opacity:1,x:0},exit:{opacity:0,x:20},transition:{duration:.2,ease:"easeInOut"}}},Rl={initial:{height:0,opacity:0,y:-6},animate:{height:"auto",opacity:1,y:0},exit:{height:0,opacity:0,y:-6},transition:{duration:.2,ease:"easeInOut"}},je={HEADER:1e3,HEADER_DROPDOWN:1001,MOBILE_OPEN_BUTTON:1002,SIDEBAR_OVERLAY:1100,SIDEBAR_ASIDE:1101,TOOLTIP:1202,POPOVER_MENU:1201,DIALOG_OVERLAY:2001},k0=v(Ie.div)`
+`,E0=m.memo(({inputId:e,label:t,size:n,required:o,disabled:r,hasError:i,errorMessage:s,isCheckbox:a=!1,className:l,labelClassName:c,messageErrorClassName:u,children:d})=>g.jsxs($0,{className:l,children:[t&&!a&&g.jsx(Tn,{htmlFor:e,size:n,required:o,disabled:r,className:c,children:t}),d,i&&s&&g.jsx(fr,{id:`${e}-error`,size:n,className:u,children:s})]})),Il=({id:e,name:t,label:n,type:o="text",size:r="md",placeholder:i,disabled:s=!1,required:a=!1,options:l=[],checkboxLabel:c,radioName:u,pinLength:d=6,pinType:f="number",rows:h=4,className:p,inputClassName:y,labelClassName:b,messageErrorClassName:w,leftIcon:x,rightIcon:C,iconSize:T,iconColor:$,onOptionSelect:M,onRadioChange:F,onPinComplete:E,onChange:D,optionsClassName:P,optionClassName:R,..._})=>{const{field:k,hasError:A,errorMessage:O,inputId:L,ariaProps:G,handleStandardChange:H,handleTextAreaChange:Y,handleCheckboxChange:J,handleSelectChange:te,handleRadioChange:We,handlePinChange:j,handlePinComplete:Q}=C0({name:t,required:a,onChange:D,onOptionSelect:M,onRadioChange:F,onPinComplete:E,options:l}),K=e?.toString?.()||L;return g.jsx(E0,{inputId:K,label:n,size:r,required:a,disabled:s,hasError:A,errorMessage:O,isCheckbox:o==="checkbox",className:p,labelClassName:b,messageErrorClassName:w,children:g.jsx(Fl,{type:o,inputId:K,name:t,size:r,hasError:A,disabled:s,placeholder:i,inputClassName:y,fieldValue:k.value,ariaProps:G,options:l,onSelectChange:te,checkboxLabel:c,onCheckboxChange:J,radioName:u,onRadioChange:We,pinLength:d,pinType:f,rows:h,onPinChange:j,onPinComplete:Q,onStandardChange:H,onTextAreaChange:Y,leftIcon:x,rightIcon:C,iconSize:T,iconColor:$,optionsClassName:P,optionClassName:R,additionalProps:_})})},Ll={initial:{opacity:0,scale:.95},animate:{opacity:1,scale:1},exit:{opacity:0,scale:.95},transition:{duration:.2,ease:"easeInOut"},layout:!1},Tr={initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3,ease:"easeInOut"}},P0={fromBottom:{initial:{opacity:0,y:20},animate:{opacity:1,y:0},exit:{opacity:0,y:20},transition:{duration:.2,ease:"easeInOut"}},fromTop:{initial:{opacity:0,y:-20},animate:{opacity:1,y:0},exit:{opacity:0,y:-20},transition:{duration:.2,ease:"easeInOut"}},fromLeft:{initial:{opacity:0,x:-20},animate:{opacity:1,x:0},exit:{opacity:0,x:-20},transition:{duration:.2,ease:"easeInOut"}},fromRight:{initial:{opacity:0,x:20},animate:{opacity:1,x:0},exit:{opacity:0,x:20},transition:{duration:.2,ease:"easeInOut"}}},Rl={initial:{height:0,opacity:0,y:-6},animate:{height:"auto",opacity:1,y:0},exit:{height:0,opacity:0,y:-6},transition:{duration:.2,ease:"easeInOut"}},je={HEADER:1e3,HEADER_DROPDOWN:1001,MOBILE_OPEN_BUTTON:1002,SIDEBAR_OVERLAY:1100,SIDEBAR_ASIDE:1101,TOOLTIP:1202,POPOVER_MENU:9999,DIALOG_OVERLAY:2001},k0=v(Ie.div)`
     position: fixed;
     inset: 0;
     z-index: ${je.DIALOG_OVERLAY};
@@ -1333,7 +1333,7 @@
     background-color: var(--color-dark-600);
 
     ${({$placement:e})=>j0(e)}
-`,_l=({content:e,children:t,placement:n="bottom",trigger:o="hover",className:r="",arrowClassName:i="",delay:s=200,showArrow:a=!0})=>{const[l,c]=m.useState(!1),u=m.useRef(null),d=m.useRef(null),f=m.useRef(null);m.useEffect(()=>{if(o!=="click"||!l)return;const w=x=>{d.current&&!d.current.contains(x.target)&&f.current&&!f.current.contains(x.target)&&c(!1)};return document.addEventListener("mousedown",w),()=>document.removeEventListener("mousedown",w)},[l,o]),m.useEffect(()=>()=>{u.current&&clearTimeout(u.current)},[]);const b=o==="hover"?{onMouseEnter:()=>{u.current&&clearTimeout(u.current),u.current=setTimeout(()=>c(!0),s)},onMouseLeave:()=>{u.current&&clearTimeout(u.current),u.current=setTimeout(()=>c(!1),100)}}:{onClick:()=>{c(w=>!w)}};return g.jsxs(N0,{children:[g.jsx(O0,{ref:f,...b,children:t}),l&&g.jsxs(H0,{ref:d,$placement:n,className:r,role:"tooltip","aria-hidden":!l,children:[e,a&&g.jsx(G0,{$placement:n,className:i})]})]})};_l.displayName="Tooltip";const U0=({isOpen:e,setOpen:t,handleCreate:n,handleEdit:o,item:r,initialValues:i,formInputs:s,option:a,title:l={create:"Create New Item",edit:"Edit Item"},buttonText:c={create:"Create",edit:"Save Changes"}})=>g.jsxs(kn,{isOpen:e,onClose:()=>t(!1),showCloseButton:!0,children:[g.jsx(Mn,{children:g.jsx(qt,{children:a==="create"?l.create:l.edit})}),g.jsx(Dn,{children:g.jsx(Un.Formik,{initialValues:i,enableReinitialize:!0,onSubmit:u=>{a==="create"?n(u):o&&r?.id&&o(r.id,u)},children:({values:u,isValid:d})=>g.jsxs(Un.Form,{children:[s.map(f=>g.jsx(Il,{...f,value:u[f.name]},f.name)),g.jsxs("section",{className:"flex justify-between py-4",children:[g.jsx(Me,{variant:"secondary",type:"button",onClick:()=>t(!1),children:"Cancel"}),g.jsx(Me,{type:"submit",disabled:!d,children:a==="create"?c.create:c.edit})]})]})})})]}),W0=({isOpen:e,onClose:t,onConfirm:n,isLoading:o=!1,itemLabel:r="this item"})=>g.jsxs(kn,{isOpen:e,onClose:t,showCloseButton:!0,size:"sm",children:[g.jsx(Mn,{showDivider:!0,children:g.jsx(qt,{size:20,color:"var(--color-main-warning-state)",children:"Confirm Delete"})}),g.jsx(Dn,{padded:!0,children:g.jsxs(Ve,{size:14,color:"var(--color-dark-800)",children:["Are you sure you want to delete ",g.jsx("strong",{children:r}),"? This action cannot be undone."]})}),g.jsxs($r,{showDivider:!0,align:"end",children:[g.jsx(Me,{variant:"cancel",size:"md",onClick:t,disabled:o,children:"Cancel"}),g.jsx(Me,{variant:"primary",size:"md",onClick:n,isLoading:o,disabled:o,children:"Delete"})]})]}),Er=m.createContext(void 0),Bl=({children:e})=>{const[t,n]=m.useState(!0),[o,r]=m.useState(!1);return g.jsx(Er.Provider,{value:{isCollapsed:t,setIsCollapsed:n,isMobileOpen:o,setIsMobileOpen:r},children:e})},Vn=()=>{const e=m.useContext(Er);if(!e)throw new Error("useSidebar must be used within a SidebarProvider");return e},Pr=(e=[],t=[])=>!t||t.length===0?!1:t.includes("all")?!0:e.map(o=>o.name).some(o=>t.includes(o)),K0=v.css`
+`,_l=({content:e,children:t,placement:n="bottom",trigger:o="hover",className:r="",arrowClassName:i="",delay:s=200,showArrow:a=!0})=>{const[l,c]=m.useState(!1),u=m.useRef(null),d=m.useRef(null),f=m.useRef(null);m.useEffect(()=>{if(o!=="click"||!l)return;const w=x=>{d.current&&!d.current.contains(x.target)&&f.current&&!f.current.contains(x.target)&&c(!1)};return document.addEventListener("mousedown",w),()=>document.removeEventListener("mousedown",w)},[l,o]),m.useEffect(()=>()=>{u.current&&clearTimeout(u.current)},[]);const b=o==="hover"?{onMouseEnter:()=>{u.current&&clearTimeout(u.current),u.current=setTimeout(()=>c(!0),s)},onMouseLeave:()=>{u.current&&clearTimeout(u.current),u.current=setTimeout(()=>c(!1),100)}}:{onClick:()=>{c(w=>!w)}};return g.jsxs(N0,{children:[g.jsx(O0,{ref:f,...b,children:t}),l&&g.jsxs(H0,{ref:d,$placement:n,className:r,role:"tooltip","aria-hidden":!l,children:[e,a&&g.jsx(G0,{$placement:n,className:i})]})]})};_l.displayName="Tooltip";const U0=({isOpen:e,setOpen:t,handleCreate:n,handleEdit:o,item:r,initialValues:i,formInputs:s,option:a,title:l={create:"Create New Item",edit:"Edit Item"},buttonText:c={create:"Create",edit:"Save Changes"},validationSchema:u})=>g.jsxs(kn,{isOpen:e,onClose:()=>t(!1),showCloseButton:!0,children:[g.jsx(Mn,{children:g.jsx(qt,{children:a==="create"?l.create:l.edit})}),g.jsx(Dn,{children:g.jsx(Un.Formik,{initialValues:i,validationSchema:u,enableReinitialize:!0,onSubmit:d=>{a==="create"?n(d):a==="edit"&&o&&r?.id!==void 0&&r?.id!==null&&o(r.id,d)},children:({values:d,isValid:f})=>g.jsxs(Un.Form,{children:[s.map(h=>g.jsx(Il,{...h,value:d[h.name]},h.name)),g.jsxs("section",{className:"flex justify-between py-4",children:[g.jsx(Me,{variant:"secondary",type:"button",onClick:()=>t(!1),children:"Cancel"}),g.jsx(Me,{type:"submit",disabled:!f,children:a==="create"?c.create:c.edit})]})]})})})]}),W0=({isOpen:e,onClose:t,onConfirm:n,isLoading:o=!1,itemLabel:r="this item"})=>g.jsxs(kn,{isOpen:e,onClose:t,showCloseButton:!0,size:"sm",children:[g.jsx(Mn,{showDivider:!0,children:g.jsx(qt,{size:20,color:"var(--color-main-warning-state)",children:"Confirm Delete"})}),g.jsx(Dn,{padded:!0,children:g.jsxs(Ve,{size:14,color:"var(--color-dark-800)",children:["Are you sure you want to delete ",g.jsx("strong",{children:r}),"? This action cannot be undone."]})}),g.jsxs($r,{showDivider:!0,align:"end",children:[g.jsx(Me,{variant:"cancel",size:"md",onClick:t,disabled:o,children:"Cancel"}),g.jsx(Me,{variant:"primary",size:"md",onClick:n,isLoading:o,disabled:o,children:"Delete"})]})]}),Er=m.createContext(void 0),Bl=({children:e})=>{const[t,n]=m.useState(!0),[o,r]=m.useState(!1);return g.jsx(Er.Provider,{value:{isCollapsed:t,setIsCollapsed:n,isMobileOpen:o,setIsMobileOpen:r},children:e})},Vn=()=>{const e=m.useContext(Er);if(!e)throw new Error("useSidebar must be used within a SidebarProvider");return e},Pr=(e=[],t=[])=>!t||t.length===0?!1:t.includes("all")?!0:e.map(o=>o.name).some(o=>t.includes(o)),K0=v.css`
     display: flex;
     align-items: center;
     justify-content: center;
@@ -2007,7 +2007,7 @@
     &:hover {
         background-color: transparent;
     }
-`,by=e=>{const t=["60%","75%","85%","70%","80%"];return t[e%t.length]},xy=({columnCount:e,cellWidths:t,size:n="md"})=>g.jsx(wy,{role:"row","aria-busy":"true",children:Array.from({length:e}).map((o,r)=>g.jsx(yy,{$width:t?.[r]||by(r),$size:n},r))}),Bn=({rows:e,className:t,rowClassName:n,cellClassName:o,isLoading:r=!1,rowCount:i=5,columnCount:s=3})=>{const{size:a}=Ct();return g.jsx("tbody",{className:t,"aria-busy":r,children:r?Array.from({length:i}).map((l,c)=>g.jsx(xy,{columnCount:s,size:a},`skeleton-${c}`)):g.jsxs(g.Fragment,{children:[e.map(l=>{const c=typeof n=="function"?n(l):n,u=typeof o=="function"?o(l):o;return g.jsx(xc,{row:l,className:c,cellClassName:u},l.id)}),e.length===0&&g.jsx("tr",{children:g.jsx("td",{colSpan:100,className:"text-main-grey py-4 text-center",children:"No results found"})})]})})},Cy=v.section`
+`,by=e=>{const t=["60%","75%","85%","70%","80%"];return t[e%t.length]},xy=({columnCount:e,cellWidths:t,size:n="md"})=>g.jsx(wy,{role:"row","aria-busy":"true",children:Array.from({length:e}).map((o,r)=>g.jsx(yy,{$width:t?.[r]||by(r),$size:n},r))}),Bn=({rows:e,className:t,rowClassName:n,cellClassName:o,isLoading:r=!1,rowCount:i=5,columnCount:s=3})=>{const{size:a}=Ct();return g.jsx("tbody",{className:t,"aria-busy":r,children:r?Array.from({length:i}).map((l,c)=>g.jsx(xy,{columnCount:s,size:a},`skeleton-${c}`)):g.jsxs(g.Fragment,{children:[e.map(l=>{const c=typeof n=="function"?n(l):n,u=typeof o=="function"?o(l):o;return g.jsx(xc,{row:l,className:c,cellClassName:u},l.id)}),e.length===0&&g.jsx("tr",{children:g.jsx("td",{colSpan:100,className:"text-main-grey py-4 text-center bg-main-white",children:"No results found"})})]})})},Cy=v.section`
     display: flex;
     align-items: center;
     gap: 0.5rem;

package/package.json

@@ -3,7 +3,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "0.3.30",
+    "version": "0.3.32",
     "description": "This package provides reusable UI components to ensure consistency across all CRM frontend applications",
     "author": "BizAppsTotal <bizapps@tcce.biz>",
     "type": "module",