@verifiedinc-public/shared-ui-elements 9.9.2-beta.0 → 9.9.2-beta.1

package/dist/components/CopyableUuid/index.d.ts

@@ -23,6 +23,8 @@ export interface CopyableUuidProps {
     /** Whether to use monospace typography. Defaults to true. */
     mono?: boolean;
     typographyProps?: Omit<TypographyProps, 'children'>;
+    /** Styles applied to the copy icon button (button variant only). */
+    iconSx?: SxProps;
     sx?: SxProps;
 }
-export declare function CopyableUuid({ uuid, label, head, tail, variant, placeholder, mono, typographyProps, sx, }: Readonly<CopyableUuidProps>): React.ReactElement;
+export declare function CopyableUuid({ uuid, label, head, tail, variant, placeholder, mono, typographyProps, iconSx, sx, }: Readonly<CopyableUuidProps>): React.ReactElement;

package/dist/components/CopyableUuid/index.mjs

@@ -1 +1 @@
-"use strict";import{ContentCopy as g}from"@mui/icons-material";import{Typography as s,Stack as C,IconButton as v}from"@mui/material";import{useCopyToClipboard as k}from"../../hooks/useCopyToClipboard.mjs";import{useSnackbar as _}from"../Snackbar/index.mjs";import{jsx as r,jsxs as $}from"react/jsx-runtime";function S(o,t,e){return e===0?o.length<=t?o:`${o.slice(0,t)}...`:o.length<=t+e+1?o:`${o.slice(0,t)}\u2026${o.slice(-e)}`}function B({uuid:o,label:t="UUID",head:e=4,tail:d=4,variant:y="button",placeholder:b="\u2014",mono:m=!0,typographyProps:f,sx:n}){const{copy:h}=k({type:"text/plain"}),{enqueueSnackbar:x}=_(),{sx:a,...i}=f??{},l=m?{fontFamily:"monospace"}:{};if(!o)return r(s,{variant:"body2",color:"text.secondary",...i,sx:[l,a,n].filter(Boolean),children:b});const p=S(o,e,d),u=async c=>{c.stopPropagation();try{await h(o),x(`${t} copied to clipboard`,"success")}catch{}};if(y==="text"){const c={background:"transparent",border:0,padding:0,margin:0,font:"inherit",color:"inherit",textAlign:"inherit",cursor:"pointer","&:hover":{textDecoration:"underline"},"&:focus-visible":{outline:"2px solid currentColor",outlineOffset:2}};return r(s,{component:"button",type:"button",variant:"body2","aria-label":`Copy ${t}`,onClick:u,...i,sx:[l,c,a,n].filter(Boolean),children:p})}return $(C,{direction:"row",alignItems:"center",sx:{"& .copyable-uuid__btn":{opacity:0},"&:hover .copyable-uuid__btn":{opacity:1},...n},children:[r(s,{variant:"body2",color:"text.secondary",noWrap:!0,...i,sx:[l,a].filter(Boolean),children:p}),r(v,{className:"copyable-uuid__btn",size:"small","aria-label":`Copy ${t}`,onClick:u,sx:{p:.25,ml:.5},children:r(g,{sx:{fontSize:13}})})]})}export{B as CopyableUuid};
+"use strict";import{ContentCopy as C}from"@mui/icons-material";import{Typography as s,Stack as v,IconButton as k}from"@mui/material";import{useCopyToClipboard as _}from"../../hooks/useCopyToClipboard.mjs";import{useSnackbar as $}from"../Snackbar/index.mjs";import{jsx as r,jsxs as B}from"react/jsx-runtime";function S(o,t,e){return e===0?o.length<=t?o:`${o.slice(0,t)}...`:o.length<=t+e+1?o:`${o.slice(0,t)}\u2026${o.slice(-e)}`}function z({uuid:o,label:t="UUID",head:e=4,tail:d=4,variant:y="button",placeholder:b="\u2014",mono:f=!0,typographyProps:m,iconSx:x,sx:n}){const{copy:h}=_({type:"text/plain"}),{enqueueSnackbar:g}=$(),{sx:a,...i}=m??{},l=f?{fontFamily:"monospace"}:{};if(!o)return r(s,{variant:"body2",color:"text.secondary",...i,sx:[l,a,n].filter(Boolean),children:b});const p=S(o,e,d),u=async c=>{c.stopPropagation();try{await h(o),g(`${t} copied to clipboard`,"success")}catch{}};if(y==="text"){const c={background:"transparent",border:0,padding:0,margin:0,font:"inherit",color:"inherit",textAlign:"inherit",cursor:"pointer","&:hover":{textDecoration:"underline"},"&:focus-visible":{outline:"2px solid currentColor",outlineOffset:2}};return r(s,{component:"button",type:"button",variant:"body2","aria-label":`Copy ${t}`,onClick:u,...i,sx:[l,c,a,n].filter(Boolean),children:p})}return B(v,{direction:"row",alignItems:"center",sx:{"& .copyable-uuid__btn":{opacity:0},"&:hover .copyable-uuid__btn":{opacity:1},...n},children:[r(s,{variant:"body2",color:"text.secondary",noWrap:!0,...i,sx:[l,a].filter(Boolean),children:p}),r(k,{className:"copyable-uuid__btn",size:"small","aria-label":`Copy ${t}`,onClick:u,sx:[{p:.25,ml:.5},x].filter(Boolean),children:r(C,{sx:{fontSize:13}})})]})}export{z as CopyableUuid};

package/dist/components/chart/BillableEventsProductTable/BillableEventsProductTable.mjs

@@ -1 +1 @@
-"use strict";import{TableContainer as k,Paper as C,Table as U,TableHead as x,TableRow as h,TableCell as i,TableBody as B,TableSortLabel as D}from"@mui/material";import{useMemo as p}from"react";import{EmptyChartSection as L}from"../EmptyChartSection.mjs";import{LoadingChartSection as S}from"../LoadingChartSection.mjs";import{BILLABLE_PRODUCTS as v}from"../BillableEventsTable/BillableEventsTable.types.mjs";import{useBillableSort as I}from"../BillableEventsTable/useBillableSort.hook.mjs";import{CopyableUuid as E}from"../../CopyableUuid/index.mjs";import{white as P}from"../../../styles/colors.mjs";import{jsx as a,jsxs as d}from"react/jsx-runtime";const j=["brand","integrationType"],w=({data:l,isLoading:b,isFetching:u,product:s,columnSlots:n})=>{const{sortKey:c,sortDir:g,handleSort:y,sortedData:f}=I(l,j,"brand"),o=p(()=>v.find(e=>e.product===s),[s]),m=p(()=>o?.columns??[],[o]),t=(e,r,T="left")=>a(D,{active:c===e,direction:c===e?g:"asc",onClick:()=>y(e),sx:T==="right"?{flexDirection:"row"}:void 0,children:r});return!(l!=null&&l.length)&&b?a(S,{}):l!=null&&l.length?a(k,{component:C,sx:{opacity:u?.4:1},children:d(U,{sx:{backgroundColor:P},children:[a(x,{children:d(h,{children:[a(i,{children:t("brand","Brand")}),a(i,{children:"UUID"}),a(i,{children:t("integrationType","Integration Type")}),m.map(e=>a(i,{align:"right",children:t(e.key,e.label,"right")},e.key))]})}),a(B,{children:f.map(e=>d(h,{children:[a(i,{children:e.brand}),a(i,{children:a(E,{uuid:e.brandUuid,label:"Brand UUID",variant:"button"})}),a(i,{children:e.integrationType}),m.map(r=>a(i,{align:"right",children:n!=null&&n[r.key]?n[r.key](e):e.metrics[r.key]??0},r.key))]},e.brandUuid))})]})}):a(L,{})};export{w as BillableEventsProductTable};
+"use strict";import{TableContainer as k,Paper as x,Table as B,TableHead as C,TableRow as h,TableCell as i,TableBody as S,TableSortLabel as U}from"@mui/material";import{useMemo as p}from"react";import{EmptyChartSection as D}from"../EmptyChartSection.mjs";import{LoadingChartSection as L}from"../LoadingChartSection.mjs";import{BILLABLE_PRODUCTS as v}from"../BillableEventsTable/BillableEventsTable.types.mjs";import{useBillableSort as I}from"../BillableEventsTable/useBillableSort.hook.mjs";import{CopyableUuid as E}from"../../CopyableUuid/index.mjs";import{white as P}from"../../../styles/colors.mjs";import{jsx as e,jsxs as d}from"react/jsx-runtime";const w=["brand","integrationType"],R=({data:n,isLoading:b,isFetching:u,product:s,columnSlots:o})=>{const{sortKey:c,sortDir:g,handleSort:y,sortedData:T}=I(n,w,"brand"),l=p(()=>v.find(a=>a.product===s),[s]),m=p(()=>l?.columns??[],[l]),t=(a,r,f="left")=>e(U,{active:c===a,direction:c===a?g:"asc",onClick:()=>y(a),sx:f==="right"?{flexDirection:"row"}:void 0,children:r});return!(n!=null&&n.length)&&b?e(L,{}):n!=null&&n.length?e(k,{component:x,sx:{opacity:u?.4:1},children:d(B,{sx:{backgroundColor:P},children:[e(C,{children:d(h,{children:[e(i,{children:t("brand","Brand Name")}),e(i,{children:"Brand UUID"}),e(i,{children:t("integrationType","Integration Type")}),m.map(a=>e(i,{align:"right",children:t(a.key,a.label,"right")},a.key))]})}),e(S,{children:T.map(a=>d(h,{children:[e(i,{children:a.brand}),e(i,{children:e(E,{uuid:a.brandUuid,label:"Brand UUID",variant:"button",head:6,tail:0,mono:!1,iconSx:{color:"success.main"}})}),e(i,{children:a.integrationType}),m.map(r=>e(i,{align:"right",children:o!=null&&o[r.key]?o[r.key](a):a.metrics[r.key]??0},r.key))]},a.brandUuid))})]})}):e(D,{})};export{R as BillableEventsProductTable};

package/dist/components/chart/BillableEventsTable/BillableEventsTable.mjs

@@ -1 +1 @@
-"use strict";import{TableContainer as B,Paper as w,Table as x,TableHead as U,TableRow as b,TableCell as a,TableBody as v,TableSortLabel as D}from"@mui/material";import{useEffect as L,useMemo as u}from"react";import{EmptyChartSection as E}from"../EmptyChartSection.mjs";import{LoadingChartSection as I}from"../LoadingChartSection.mjs";import{BillableProduct as P,BILLABLE_PRODUCTS as j}from"./BillableEventsTable.types.mjs";import{useBillableSort as M}from"./useBillableSort.hook.mjs";import{CopyableUuid as O}from"../../CopyableUuid/index.mjs";import{white as R}from"../../../styles/colors.mjs";import{jsx as r,jsxs as s}from"react/jsx-runtime";const K=["brand","integrationType"],_=({data:o,isLoading:k,isFetching:S,visibleProducts:y,onSortedDataChange:c,columnSlots:l,topLevelColumns:t=[]})=>{const{sortKey:g,sortDir:T,handleSort:C,sortedData:d}=M(o,K,"brand");L(()=>{c?.(d)},[d,c]);const h=u(()=>{const e=y??Object.values(P);return j.filter(n=>e.includes(n.product))},[y]),m=u(()=>new Set(t.map(e=>e.key)),[t]),f=u(()=>h.flatMap(e=>e.columns).filter(e=>!m.has(e.key)),[h,m]),i=(e,n,p="left")=>r(D,{active:g===e,direction:g===e?T:"asc",onClick:()=>C(e),sx:p==="right"?{flexDirection:"row"}:void 0,children:n});return!(o!=null&&o.length)&&k?r(I,{}):o!=null&&o.length?r(B,{component:w,sx:{opacity:S?.4:1},children:s(x,{sx:{backgroundColor:R},children:[s(U,{children:[s(b,{children:[r(a,{rowSpan:2,children:i("brand","Brand")}),r(a,{rowSpan:2,children:"UUID"}),r(a,{rowSpan:2,children:i("integrationType","Integration Type")}),t.map(e=>r(a,{rowSpan:2,children:i(e.key,e.label)},e.key)),h.map(e=>{const n=e.columns.filter(p=>!m.has(p.key)).length;return n===0?null:r(a,{colSpan:n,align:"center",sx:{fontWeight:"bold",borderBottom:"none"},children:e.label},e.product)})]}),r(b,{children:f.map(e=>r(a,{align:"right",children:i(e.key,e.label,"right")},e.key))})]}),r(v,{children:d.map(e=>s(b,{children:[r(a,{children:e.brand}),r(a,{children:r(O,{uuid:e.brandUuid,label:"Brand UUID",variant:"button"})}),r(a,{children:e.integrationType}),t.map(n=>r(a,{children:l!=null&&l[n.key]?l[n.key](e):e.metrics[n.key]??0},n.key)),f.map(n=>r(a,{align:"right",children:l!=null&&l[n.key]?l[n.key](e):e.metrics[n.key]??0},n.key))]},e.brandUuid))})]})}):r(E,{})};export{_ as BillableEventsTable};
+"use strict";import{TableContainer as C,Paper as x,Table as w,TableHead as U,TableRow as u,TableCell as a,TableBody as v,TableSortLabel as D}from"@mui/material";import{useEffect as L,useMemo as b}from"react";import{EmptyChartSection as E}from"../EmptyChartSection.mjs";import{LoadingChartSection as I}from"../LoadingChartSection.mjs";import{BillableProduct as P,BILLABLE_PRODUCTS as j}from"./BillableEventsTable.types.mjs";import{useBillableSort as M}from"./useBillableSort.hook.mjs";import{CopyableUuid as O}from"../../CopyableUuid/index.mjs";import{white as R}from"../../../styles/colors.mjs";import{jsx as r,jsxs as s}from"react/jsx-runtime";const K=["brand","integrationType"],_=({data:o,isLoading:f,isFetching:S,visibleProducts:y,onSortedDataChange:d,columnSlots:l,topLevelColumns:t=[]})=>{const{sortKey:g,sortDir:T,handleSort:B,sortedData:c}=M(o,K,"brand");L(()=>{d?.(c)},[c,d]);const m=b(()=>{const e=y??Object.values(P);return j.filter(n=>e.includes(n.product))},[y]),h=b(()=>new Set(t.map(e=>e.key)),[t]),k=b(()=>m.flatMap(e=>e.columns).filter(e=>!h.has(e.key)),[m,h]),i=(e,n,p="left")=>r(D,{active:g===e,direction:g===e?T:"asc",onClick:()=>B(e),sx:p==="right"?{flexDirection:"row"}:void 0,children:n});return!(o!=null&&o.length)&&f?r(I,{}):o!=null&&o.length?r(C,{component:x,sx:{opacity:S?.4:1},children:s(w,{sx:{backgroundColor:R},children:[s(U,{children:[s(u,{children:[r(a,{rowSpan:2,children:i("brand","Brand Name")}),r(a,{rowSpan:2,children:"Brand UUID"}),r(a,{rowSpan:2,children:i("integrationType","Integration Type")}),t.map(e=>r(a,{rowSpan:2,children:i(e.key,e.label)},e.key)),m.map(e=>{const n=e.columns.filter(p=>!h.has(p.key)).length;return n===0?null:r(a,{colSpan:n,align:"center",sx:{fontWeight:"bold",borderBottom:"none"},children:e.label},e.product)})]}),r(u,{children:k.map(e=>r(a,{align:"right",children:i(e.key,e.label,"right")},e.key))})]}),r(v,{children:c.map(e=>s(u,{children:[r(a,{children:e.brand}),r(a,{children:r(O,{uuid:e.brandUuid,label:"Brand UUID",variant:"button",head:6,tail:0,mono:!1,iconSx:{color:"success.main"}})}),r(a,{children:e.integrationType}),t.map(n=>r(a,{children:l!=null&&l[n.key]?l[n.key](e):e.metrics[n.key]??0},n.key)),k.map(n=>r(a,{align:"right",children:l!=null&&l[n.key]?l[n.key](e):e.metrics[n.key]??0},n.key))]},e.brandUuid))})]})}):r(E,{})};export{_ as BillableEventsTable};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verifiedinc-public/shared-ui-elements",
-  "version": "9.9.2-beta.0",
+  "version": "9.9.2-beta.1",
   "description": "A set of UI components, utilities that is shareable with the core apps.",
   "private": false,
   "sideEffects": false,