tcce-design-system 0.3.31 → 0.3.33

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

@@ -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 })
         ] })
       ] })
     }
@@ -9914,7 +9909,6 @@ const U1 = ({
     height: 100%;
     background: var(--color-main-white);
     border-bottom-right-radius: var(--border-radius-article);
-    border-right: 1px solid var(--color-main-light-borders);
     z-index: ${nt.SIDEBAR_ASIDE};
     width: ${({ $collapsed: e }) => e ? ut.SIDEBAR_COLLAPSED_WIDTH : ut.SIDEBAR_EXPANDED_WIDTH};
     transform: translateX(${({ $open: e }) => e ? "0" : "-100%"});
@@ -13494,12 +13488,6 @@ const n1 = S(Ue.div)`
       p.key === "Escape" && i(!1);
     };
     return document.addEventListener("keydown", m), () => document.removeEventListener("keydown", m);
-  }, [r]), ie(() => {
-    if (!r) {
-      a.current?.focus();
-      return;
-    }
-    l.current?.querySelector("button")?.focus();
   }, [r]);
   const u = (m) => {
     if (!r || m.key !== "Tab" || !s.current)
@@ -13755,6 +13743,7 @@ const u1 = S.main`
     transition: margin-left 0.3s ease-out;
     background-color: var(--color-main-light-background);
     padding: 1.25rem 1.5rem;
+    border-top-left-radius: 1rem;
 
     margin-left: ${ut.SIDEBAR_COLLAPSED_WIDTH};
 `, fc = ({

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

@@ -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;
@@ -1441,7 +1441,6 @@
     height: 100%;
     background: var(--color-main-white);
     border-bottom-right-radius: var(--border-radius-article);
-    border-right: 1px solid var(--color-main-light-borders);
     z-index: ${je.SIDEBAR_ASIDE};
     width: ${({$collapsed:e})=>e?ot.SIDEBAR_COLLAPSED_WIDTH:ot.SIDEBAR_EXPANDED_WIDTH};
     transform: translateX(${({$open:e})=>e?"0":"-100%"});
@@ -2194,7 +2193,7 @@
     &.danger {
         color: var(--color-main-warning-state);
     }
-`,Zr=({user:e,onProfileClick:t,onLogout:n,menuItems:o=[]})=>{const[r,i]=m.useState(!1),s=m.useRef(null),a=m.useRef(null),l=m.useRef(null),c=m.useId();m.useEffect(()=>{if(!r)return;const p=y=>{s.current&&!s.current.contains(y.target)&&i(!1)};return document.addEventListener("mousedown",p),()=>document.removeEventListener("mousedown",p)},[r]),m.useEffect(()=>{if(!r)return;const p=y=>{y.key==="Escape"&&i(!1)};return document.addEventListener("keydown",p),()=>document.removeEventListener("keydown",p)},[r]),m.useEffect(()=>{if(!r){a.current?.focus();return}l.current?.querySelector("button")?.focus()},[r]);const u=p=>{if(!r||p.key!=="Tab"||!s.current)return;const y=s.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');if(y.length===0)return;const b=y[0],w=y[y.length-1],x=document.activeElement;p.shiftKey&&x===b?(p.preventDefault(),w.focus()):!p.shiftKey&&x===w&&(p.preventDefault(),b.focus())},d=p=>p.split(" ").map(y=>y[0]).join("").toUpperCase().slice(0,2),h=[...[{id:"profile",label:"Profile",icon:yg,onClick:()=>{i(!1),t?.()},variant:"default"},{id:"logout",label:"Logout",icon:pg,onClick:()=>{i(!1),n?.()},variant:"danger"}],...o];return g.jsxs("div",{ref:s,style:{position:"relative"},onKeyDown:u,children:[g.jsxs(_y,{ref:a,type:"button",onClick:()=>i(!r),"aria-haspopup":"menu","aria-expanded":r,"aria-controls":c,onKeyDown:p=>{(p.key==="Enter"||p.key===" ")&&(p.preventDefault(),i(!r))},children:[g.jsxs(By,{children:[g.jsx(Ve,{size:14,className:"font-semibold!",children:e?.name||""}),g.jsx(Ve,{size:12,children:e?.roles?.[0]?.name||""})]}),g.jsx(Ny,{className:"font-semibold!",children:d(e?.name||"")})]}),g.jsx(Ot,{children:r&&g.jsx(Oy,{id:c,ref:l,role:"menu",initial:{opacity:0,y:-10,scale:.95},animate:{opacity:1,y:0,scale:1},exit:{opacity:0,y:-10,scale:.95},transition:{duration:.15},children:h.map(p=>g.jsx(m.Fragment,{children:g.jsxs(zy,{type:"button",role:"menuitem",onClick:p.onClick,className:p.variant==="danger"?"danger":"",children:[g.jsx(U,{component:p.icon,size:"sm",color:p.variant==="danger"?"var(--color-main-warning-state)":"var(--color-main-blue-primary)"}),g.jsx(Ve,{size:14,color:`${p.variant==="danger"&&"var(--color-main-warning-state)"}`,children:p.label})]})},p.id))})})]})};Zr.displayName="UserProfile";const Ac=({hasNotifications:e=!1,notificationCount:t})=>{const n=(t??0)>0||e,o=t&&t>0?t:void 0,r=o?`${o} notification${o===1?"":"s"}`:n?"New notifications":"No notifications",i=`Notifications: ${r}`;return{effectiveHasNotifications:n,displayCount:o,badgeLabel:r,bellAriaLabel:i}},Hy=v.button`
+`,Zr=({user:e,onProfileClick:t,onLogout:n,menuItems:o=[]})=>{const[r,i]=m.useState(!1),s=m.useRef(null),a=m.useRef(null),l=m.useRef(null),c=m.useId();m.useEffect(()=>{if(!r)return;const p=y=>{s.current&&!s.current.contains(y.target)&&i(!1)};return document.addEventListener("mousedown",p),()=>document.removeEventListener("mousedown",p)},[r]),m.useEffect(()=>{if(!r)return;const p=y=>{y.key==="Escape"&&i(!1)};return document.addEventListener("keydown",p),()=>document.removeEventListener("keydown",p)},[r]);const u=p=>{if(!r||p.key!=="Tab"||!s.current)return;const y=s.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');if(y.length===0)return;const b=y[0],w=y[y.length-1],x=document.activeElement;p.shiftKey&&x===b?(p.preventDefault(),w.focus()):!p.shiftKey&&x===w&&(p.preventDefault(),b.focus())},d=p=>p.split(" ").map(y=>y[0]).join("").toUpperCase().slice(0,2),h=[...[{id:"profile",label:"Profile",icon:yg,onClick:()=>{i(!1),t?.()},variant:"default"},{id:"logout",label:"Logout",icon:pg,onClick:()=>{i(!1),n?.()},variant:"danger"}],...o];return g.jsxs("div",{ref:s,style:{position:"relative"},onKeyDown:u,children:[g.jsxs(_y,{ref:a,type:"button",onClick:()=>i(!r),"aria-haspopup":"menu","aria-expanded":r,"aria-controls":c,onKeyDown:p=>{(p.key==="Enter"||p.key===" ")&&(p.preventDefault(),i(!r))},children:[g.jsxs(By,{children:[g.jsx(Ve,{size:14,className:"font-semibold!",children:e?.name||""}),g.jsx(Ve,{size:12,children:e?.roles?.[0]?.name||""})]}),g.jsx(Ny,{className:"font-semibold!",children:d(e?.name||"")})]}),g.jsx(Ot,{children:r&&g.jsx(Oy,{id:c,ref:l,role:"menu",initial:{opacity:0,y:-10,scale:.95},animate:{opacity:1,y:0,scale:1},exit:{opacity:0,y:-10,scale:.95},transition:{duration:.15},children:h.map(p=>g.jsx(m.Fragment,{children:g.jsxs(zy,{type:"button",role:"menuitem",onClick:p.onClick,className:p.variant==="danger"?"danger":"",children:[g.jsx(U,{component:p.icon,size:"sm",color:p.variant==="danger"?"var(--color-main-warning-state)":"var(--color-main-blue-primary)"}),g.jsx(Ve,{size:14,color:`${p.variant==="danger"&&"var(--color-main-warning-state)"}`,children:p.label})]})},p.id))})})]})};Zr.displayName="UserProfile";const Ac=({hasNotifications:e=!1,notificationCount:t})=>{const n=(t??0)>0||e,o=t&&t>0?t:void 0,r=o?`${o} notification${o===1?"":"s"}`:n?"New notifications":"No notifications",i=`Notifications: ${r}`;return{effectiveHasNotifications:n,displayCount:o,badgeLabel:r,bellAriaLabel:i}},Hy=v.button`
     position: relative;
     background: transparent;
     border: none;
@@ -2277,6 +2276,7 @@
     transition: margin-left 0.3s ease-out;
     background-color: var(--color-main-light-background);
     padding: 1.25rem 1.5rem;
+    border-top-left-radius: 1rem;
 
     margin-left: ${ot.SIDEBAR_COLLAPSED_WIDTH};
 `,ei=({children:e,className:t,id:n,inert:o,"aria-hidden":r})=>g.jsx(Ky,{id:n,className:t,inert:o,"aria-hidden":r,children:e});ei.displayName="LayoutMainContent";const Yy=v.div`

package/package.json

@@ -3,7 +3,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "0.3.31",
+    "version": "0.3.33",
     "description": "This package provides reusable UI components to ensure consistency across all CRM frontend applications",
     "author": "BizAppsTotal <bizapps@tcce.biz>",
     "type": "module",
@@ -14,7 +14,6 @@
     "module": "./dist/tcce-design-system-componentsfdsafds.js",
     "exports": {
         ".": {
-          
             "import": "./dist/tcce-design-system-components.js",
             "require": "./dist/tcce-design-system-components.umd.cjs"
         },