@internxt/ui 0.1.21 → 0.1.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/feedback/notifications/usageBanner/UsageWarningBanner.d.ts +16 -0
- package/dist/components/feedback/notifications/usageBanner/index.d.ts +2 -0
- package/dist/components/feedback/skeleton/Skeleton.d.ts +5 -0
- package/dist/components/feedback/skeleton/SkeletonItem.d.ts +5 -0
- package/dist/components/feedback/skeleton/index.d.ts +3 -0
- package/dist/components/index.d.ts +2 -0
- package/dist/components/navigation/sidenav/Sidenav.d.ts +3 -0
- package/dist/components/navigation/sidenav/SidenavStorage.d.ts +2 -9
- package/dist/index.cjs.js +26 -26
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.es.js +378 -325
- package/dist/index.es.js.map +1 -1
- package/dist/stories/components/sidenav/SidenavStorage.stories.d.ts +11 -0
- package/dist/stories/components/usageBanner/Banner.stories.d.ts +9 -0
- package/package.json +1 -1
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { default as React, ReactNode } from 'react';
|
|
2
|
+
export interface UsageWarningBannerProps {
|
|
3
|
+
title: string;
|
|
4
|
+
description: ReactNode;
|
|
5
|
+
usage: string;
|
|
6
|
+
limit: string;
|
|
7
|
+
percentage: number;
|
|
8
|
+
upgradeLabel: string;
|
|
9
|
+
closeButtonLabel: string;
|
|
10
|
+
onUpgradeClick: () => void;
|
|
11
|
+
onCloseButtonClick: () => void;
|
|
12
|
+
barClassName?: string;
|
|
13
|
+
isLoading?: boolean;
|
|
14
|
+
}
|
|
15
|
+
declare const UsageWarningBanner: React.FC<UsageWarningBannerProps>;
|
|
16
|
+
export default UsageWarningBanner;
|
|
@@ -4,7 +4,9 @@ export * from './data-display/list';
|
|
|
4
4
|
export * from './data-display/table/Table';
|
|
5
5
|
export * from './feedback/empty';
|
|
6
6
|
export * from './feedback/loader';
|
|
7
|
+
export * from './feedback/skeleton';
|
|
7
8
|
export * from './feedback/skeletonLoader';
|
|
9
|
+
export * from './feedback/notifications/usageBanner';
|
|
8
10
|
export * from './input/button';
|
|
9
11
|
export * from './input/buttonCircle';
|
|
10
12
|
export * from './input/checkbox';
|
|
@@ -13,6 +13,9 @@ export interface SidenavStorageProps {
|
|
|
13
13
|
onUpgradeClick: () => void;
|
|
14
14
|
upgradeLabel?: string;
|
|
15
15
|
isLoading?: boolean;
|
|
16
|
+
barClassName?: string;
|
|
17
|
+
containerClassName?: string;
|
|
18
|
+
advertisement?: ReactNode;
|
|
16
19
|
}
|
|
17
20
|
export interface SidenavProps {
|
|
18
21
|
header: SidenavHeaderProps;
|
|
@@ -1,10 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
limit: string;
|
|
4
|
-
percentage: number;
|
|
5
|
-
onUpgradeClick: () => void;
|
|
6
|
-
upgradeLabel?: string;
|
|
7
|
-
isLoading?: boolean;
|
|
8
|
-
}
|
|
9
|
-
declare const SidenavStorage: ({ usage, limit, percentage, onUpgradeClick, upgradeLabel, isLoading, }: SidenavStorageProps) => JSX.Element;
|
|
1
|
+
import { SidenavStorageProps } from './Sidenav';
|
|
2
|
+
declare const SidenavStorage: ({ usage, limit, percentage, onUpgradeClick, upgradeLabel, isLoading, barClassName, containerClassName, advertisement, }: SidenavStorageProps) => JSX.Element;
|
|
10
3
|
export default SidenavStorage;
|
package/dist/index.cjs.js
CHANGED
|
@@ -1,41 +1,41 @@
|
|
|
1
1
|
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('.loader-container{width:100%;height:90%}.loader06{position:absolute;left:49%;top:50%}.loader06:before{content:"";border:4px solid rgba(0,82,236,.5);border-radius:50%;width:67.2px;height:67.2px;position:absolute;top:-9.6px;left:-9.6px;animation:loader-scale 1s ease-out infinite;animation-delay:1s;opacity:0}.loader06:after{content:"";border:4px solid #0052ec;border-radius:50%;width:56px;height:56px;position:absolute;top:-4px;left:-4px;animation:loader-scale 1s ease-out infinite;animation-delay:.5s}.loader-text{position:absolute;top:calc(50% + 3rem);left:50%;transform:translate(-50%)}@keyframes loader-scale{0%{transform:scale(0);opacity:0}50%{opacity:1}to{transform:scale(1);opacity:0}}.custom-range-slider{width:100%;height:6px;background-color:#fff;border-radius:50%;outline:none;position:relative}input[type=range]{position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;width:"100%";background:#d5d5d5;border-radius:16px;outline:none}input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none;height:6px}input[type=range]::-moz-track{appearance:none;height:6px}input[type=range]::-ms-track{appearance:none;height:6px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:24px;width:24px;background-color:#3264fe;border-radius:50%;pointer-events:auto;cursor:pointer;margin-top:-9px;border:none}input[type=range]::-moz-range-thumb{appearance:none;height:24px;width:24px;background-color:#3264fe;border-radius:50%;pointer-events:auto;cursor:pointer;margin-top:-9px;border:none}input[type=range]::-ms-thumb{appearance:none;height:24px;width:24px;background-color:#3264fe;border-radius:50%;pointer-events:auto;cursor:pointer;margin-top:-9px;border:none}')),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
|
|
2
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("react"),C=require("@phosphor-icons/react");function
|
|
2
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("react"),C=require("@phosphor-icons/react");function $e(t){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(s,r,n.get?n:{enumerable:!0,get:()=>t[r]})}}return s.default=t,Object.freeze(s)}const J=$e(d);function Ce({fullName:t,diameter:s,className:r=""}){const n=Se(t);return e.jsx("div",{style:{width:s,height:s,fontSize:s/2.1},className:`${r} flex shrink-0 select-none items-center justify-center rounded-full bg-primary/20 font-medium text-primary dark:bg-primary/75 dark:text-white`,children:e.jsx("p",{children:n})})}function Se(t){if(!t)return"";const s=t?.trim();if(!s)return"";const r=s.split(" ");if(r.length===1)return`${r[0].charAt(0)}`;{const n=r[0].charAt(0),a=r[1].charAt(0);return n+a}}function Ie({src:t,diameter:s,className:r="",style:n={}}){return e.jsx("img",{style:{width:s,height:s,...n},className:`${r} shrink-0 select-none rounded-full object-cover`,src:t,draggable:!1})}const De={xxs:28,xs:36,sm:40,base:48,lg:80,xl:128},te=({src:t,diameter:s=80,size:r,className:n="",fullName:a,style:i={}})=>{const l=r?De[r]:s;return t?e.jsx(Ie,{src:t,diameter:l,className:n,style:i}):e.jsx(Ce,{diameter:l,className:n,fullName:a})},Ee=({className:t="",children:s})=>e.jsx("div",{className:`rounded-xl border border-gray-10 bg-surface p-5 shadow-[0_12px_20px_0_rgba(0,0,0,0.02)] dark:bg-gray-1 ${t}`,children:s}),se=(t,s=[])=>{const r=n=>{if(["input","textarea"].includes(document.activeElement?.tagName.toLowerCase()??"")&&n.key.toLowerCase()!=="escape")return;const i=`${n.ctrlKey?"ctrl+":""}${n.metaKey?"meta+":""}${n.key.toLowerCase()}`;t[i]&&(n.preventDefault(),t[i]())};d.useEffect(()=>(window.addEventListener("keydown",r),()=>{window.removeEventListener("keydown",r)}),s)},re=({item:t,menu:s,isOpen:r,genericEnterKey:n,handleMenuClose:a,paddingX:i="px-4",paddingY:l="py-1.5"})=>{const[o,c]=d.useState(null),[m,g]=d.useState(!1),x=u=>{c(u)},h=u=>u?.separator||t&&u?.disabled?.(t)||t&&u?.isTitle?.(t),p=()=>{s&&r&&c(u=>{const f=E=>{let S=E,L=s[S];for(;h(L)&&(S=(S+1)%s.length,L=s[S],E!==S););return S},j=u===null?0:(u+1)%s.length,N=f(j),$=s[N];return h($)?null:N})},b=()=>{s&&r&&c(u=>{const f=E=>{let S=E,L=s[S];for(;h(L)&&(S=(S-1+s.length)%s.length,L=s[S],E!==S););return S},j=u===null?s.length-1:(u-1+s.length)%s.length,N=f(j),$=s[N];return h($)?null:N})},v=()=>{s&&r&&c(u=>{if(u!==null){const f=s?s[u]:void 0;if(t&&f&&"action"in f&&f.action&&f.action(t),t&&f&&"node"in f&&f.node&&d.isValidElement(f.node)){const j=f.node.props.onClick;j&&j()}}else n&&n();return g(!0),null})};return d.useEffect(()=>{m&&(a(),g(!1))},[m]),se({arrowdown:p,arrowup:b,enter:v},[r]),e.jsx("div",{className:`z-20 mt-0 flex flex-col rounded-lg bg-surface ${l} outline-none dark:bg-gray-5`,children:s?.map((u,f)=>e.jsx("div",{children:u&&u.separator?e.jsx("div",{className:"my-0.5 flex w-full flex-row px-4",children:e.jsx("div",{className:"h-px w-full bg-gray-10"})}):u&&e.jsx("div",{className:`${h(u)?"pointer-events-none":""}`,onClick:j=>{h(u)||(j.stopPropagation(),t&&u.action?.(t),u.onClick&&u.onClick(),a())},onMouseEnter:()=>x(f),children:e.jsxs("div",{className:`flex cursor-pointer flex-row whitespace-nowrap ${i} ${l} text-base
|
|
3
3
|
${t&&u.disabled?.(t)&&"font-medium text-gray-50"}
|
|
4
4
|
${t&&u.isTitle?.(t)&&!u.disabled?.(t)&&"font-medium text-gray-100"}
|
|
5
|
-
${
|
|
6
|
-
${t&&!u.disabled?.(t)&&!u.isTitle?.(t)&&
|
|
7
|
-
`,children:[u.node?u.node:e.jsxs("div",{className:"flex flex-row items-center space-x-2",children:[u.icon&&e.jsx(u.icon,{size:20}),e.jsx("span",{children:u.name})]}),u.keyboardShortcutOptions&&e.jsxs("span",{className:"ml-5 flex grow items-center justify-end text-sm text-gray-40",children:[u.keyboardShortcutOptions?.keyboardShortcutIcon&&e.jsx(u.keyboardShortcutOptions.keyboardShortcutIcon,{size:14}),u.keyboardShortcutOptions?.keyboardShortcutText??""]})]})})},f))})},De=40,oe=({item:t,menuItemsRef:r,menu:s,openedFromRightClick:n,posX:a,posY:o,isContextMenuCutOff:l,isOpen:i,genericEnterKey:c,handleMenuClose:m})=>e.jsx("div",{className:"z-20 mt-0 flex flex-col rounded-lg bg-surface py-1.5 shadow-subtle-hard outline-none dark:bg-gray-5",style:n?{position:"absolute",left:a,top:o,zIndex:99}:{position:"absolute",right:20,[l?"bottom":"top"]:De,zIndex:9999},ref:r,children:e.jsx(re,{item:t,isOpen:i,genericEnterKey:c,handleMenuClose:m,menu:s})}),Ee=t=>G.createElement("svg",{fill:"none",height:20,viewBox:"0 0 20 20",width:20,xmlns:"http://www.w3.org/2000/svg",...t},G.createElement("path",{d:"m8.85955 15c.38202 0 .67978-.1461.88202-.4551l5.23593-8.00557c.1461-.22472.2079-.43259.2079-.62922 0-.52809-.3933-.91011-.9326-.91011-.3708 0-.6011.13483-.8258.48876l-4.59554 7.24724-2.33146-2.8933c-.20787-.24719-.43259-.35955-.74719-.35955-.54495 0-.9382.38764-.9382.91575 0 .2359.07303.4438.27528.6741l2.89887 3.5113c.24158.2865.51124.4157.87079.4157z",fill:"currentColor"})),Te=t=>G.createElement("svg",{fill:"none",height:20,viewBox:"0 0 20 20",width:20,xmlns:"http://www.w3.org/2000/svg",...t},G.createElement("rect",{fill:"currentColor",height:2,rx:1,width:12,x:4,y:9})),se=({id:t,checked:r=!0,indeterminate:s=!1,onClick:n,required:a,className:o,checkboxDataCy:l,disabled:i=!1})=>e.jsxs("label",{className:`relative h-5 w-5 rounded focus-within:outline-primary ${o}`,onClick:i?void 0:n,onKeyDown:()=>{},children:[e.jsx("div",{onClick:c=>c.preventDefault(),"data-cy":l,onKeyDown:()=>{},className:`relative flex h-5 w-5 cursor-pointer flex-col items-center justify-center rounded border text-white ${i?s||r?"bg-gray-20 cursor-auto":"border-gray-10 cursor-auto":s||r?"border-primary bg-primary":"border-gray-30 hover:border-gray-40"}`,children:s?e.jsx(Te,{className:"absolute -inset-px"}):r&&e.jsx(Ee,{className:"absolute -inset-px"})}),e.jsx("input",{id:t,checked:r,type:"checkbox",required:a??!1,readOnly:!0,className:"base-checkbox h-0 w-0 appearance-none opacity-0",disabled:i})]}),Me=500,Le=({item:t,listIndex:r,itemComposition:s,selected:n,isOpen:a,columnsWidth:o,onClose:l,onSelectedChanged:i,onDoubleClick:c,onClick:m,onClickContextMenu:g,onThreeDotsButtonPressed:x,disableItemCompositionStyles:h,menu:p,onMouseEnter:b,onMouseLeave:v,genericEnterKey:u})=>{const f=d.useRef(),j=d.useRef(null),N=d.useRef(null),[$,E]=d.useState(!1),[S,L]=d.useState(0),[M,A]=d.useState(0),[T,H]=d.useState({width:0,height:0}),[F,V]=d.useState(!1);d.useEffect(()=>{N.current&&(N.current.offsetHeight!==T.height||N.current?.offsetWidth!==T.width)&&H({width:N.current.offsetWidth,height:N.current.offsetHeight})},[T.height,T.width]),d.useEffect(()=>{$||B(),a||(E(!1),L(0),A(0))},[a]);function B(){const w=f.current,I=N?.current?.offsetHeight||300;if(!w)return;const{bottom:W}=w.getBoundingClientRect(),K=window.innerHeight,X=W+I>K;V(X)}const U=w=>{w.preventDefault(),g?.(w);const I=N?.current?.offsetWidth||240,W=N?.current?.offsetHeight||300,K=j?.current?.getBoundingClientRect(),{innerWidth:X,innerHeight:J}=window;let P=w.clientX-(K?.left||0),q=w.clientY-(K?.top||0);w.clientX+I>X&&(P=P-I),w.clientY+W>J&&w.clientY>Me&&(q=q-W),L(P),A(q),E(!0)},R=w=>{w.preventDefault(),x?.(w),E(!1)},_=w=>{m?.(w),$&&z()},z=()=>{l()};return te({r:z,backspace:z,enter:()=>{a||u()}},[]),e.jsxs("div",{onDoubleClick:c,onClick:_,onContextMenu:U,ref:j,className:`group relative flex h-14 flex-row items-center pl-14 pr-5 ${n?"bg-primary/10 text-gray-100 dark:bg-primary/20":"focus-within:bg-gray-1 hover:bg-gray-1"} ${a?"z-40":""}`,onMouseEnter:b,onMouseLeave:v,children:[a&&n&&e.jsx(oe,{item:t,menu:p,menuItemsRef:N,openedFromRightClick:$,isOpen:a,posX:S,posY:M,isContextMenuCutOff:F,genericEnterKey:u,handleMenuClose:z}),e.jsx("div",{className:`absolute left-5 top-0 flex h-full w-0 flex-row items-center justify-start p-0 opacity-0 focus-within:opacity-100 group-hover:opacity-100 ${n&&"opacity-100"}`,children:e.jsx(se,{onClick:w=>{w.stopPropagation(),i(!n)},checked:n,checkboxDataCy:`driveListItemCheckbox${r}`})}),h?e.jsx("div",{className:`grow-1 relative flex h-full w-full flex-row items-center border-b ${n?"border-primary/5":"border-gray-5"}`,children:s[0](t)},0):new Array(s.length).fill(0).map((w,I)=>e.jsx("div",{className:`relative flex h-full shrink-0 flex-row items-center border-b ${n?"border-primary/5":"border-gray-5"} ${o[I]}`,children:s[I](t)},I)),e.jsx("div",{className:`flex h-14 w-12 shrink-0 flex-col items-center justify-center border-b ${n?"border-primary/5":"border-gray-5"}`,children:e.jsx("button",{ref:f,className:`flex h-10 w-10 flex-col items-center justify-center rounded-md opacity-0 outline-none focus-visible:opacity-100 group-hover:opacity-100 ${n?"text-gray-80 hover:bg-primary/10 focus-visible:bg-primary/10":"text-gray-60 hover:bg-gray-10 focus-visible:bg-gray-10"}`,onClick:w=>{R(w)},children:e.jsx(C.DotsThree,{size:24,weight:"bold"})})})]})},Re=({selectedItems:t,onTopSelectionCheckboxClick:r,items:s,header:n,orderBy:a,onOrderableColumnClicked:o,menu:l,displayMenuDiv:i,isVerticalScrollbarVisible:c,checkboxDataCy:m,onClose:g})=>e.jsx("div",{onClick:g,onContextMenu:g,className:"flex min-w-max h-12 shrink-0 flex-row px-5",children:e.jsxs("div",{className:"flex h-full min-w-full flex-row items-center border-b border-gray-10",children:[e.jsx("div",{className:"flex h-full flex-row items-center justify-between pr-4",children:e.jsx(se,{checked:t.length>0,indeterminate:s.length>t.length&&t.length>0,onClick:r,checkboxDataCy:m})}),n.map(x=>e.jsxs("button",{onClick:x.orderable?()=>{o(x)}:void 0,"data-cy":"buttonDataCy"in x&&x?.buttonDataCy,className:`flex h-full shrink-0 flex-row items-center space-x-1.5 text-base font-medium text-gray-60 ${x.width} ${x.orderable?"cursor-pointer hover:text-gray-80":""}`,children:[e.jsx("span",{"data-cy":"textDataCy"in x&&x?.textDataCy,children:x.label}),x.name===a?.field&&x.orderable&&(a?.direction==="ASC"?e.jsx(C.ArrowUp,{size:14,weight:"bold"}):e.jsx(C.ArrowDown,{size:14,weight:"bold"}))]},x.name.toString())),c&&e.jsx("div",{className:"mr-15px"}),(l||i)&&e.jsx("div",{className:"flex h-full w-12 shrink-0"})]})}),ze=({skeletonItem:t,columns:r})=>e.jsxs("div",{"data-testid":"skeleton-loader-item",className:"group relative flex h-14 animate-pulse flex-row items-center px-5",children:[e.jsx("div",{className:"w-9 shrink-0"}),new Array(r.length).fill(0).map((s,n)=>e.jsx("div",{className:`relative flex h-full shrink-0 flex-row items-center overflow-hidden whitespace-nowrap border-b border-gray-5 ${r[n]}`,children:t?.[n]},`${s}-${n}`)),e.jsx("div",{className:"flex h-14 w-12 shrink-0 flex-col items-center justify-center border-b border-gray-5"})]}),ie=({skeleton:t})=>e.jsx(e.Fragment,{children:new Array(t.length).fill(0).map((r,s)=>e.jsx(ze,{skeletonItem:t[s].skeletonItem,columns:t[s].columns},`skinSkeletonRow${s}`))}),ne=({children:t,handleNextPage:r,hasMoreItems:s,loader:n,scrollableTarget:a,classNameLoader:o})=>{const l=d.useRef(null),i=d.useRef(null),[c,m]=d.useState(!1);d.useEffect(()=>{a&&(i.current=document.getElementById(a));const x=new IntersectionObserver(([p])=>{p.isIntersecting&&(s?(r(),m(!0)):m(!1))},{root:i.current||null,rootMargin:"100px",threshold:0}),h=l.current;return h&&x.observe(h),()=>{h&&x.unobserve(h)}},[s,r,a]);const g=d.Children.map(t,(x,h)=>h===d.Children.count(t)-1&&s?e.jsxs(e.Fragment,{children:[x,e.jsx("div",{ref:l,className:o,children:c&&n})]}):x);return e.jsx("div",{children:g})},Pe=({header:t,checkboxDataCy:r,items:s,itemComposition:n,selectedItems:a,onClick:o,onDoubleClick:l,onEnterPressed:i,onSelectedItemsChanged:c,isLoading:m,forceLoading:g,skinSkeleton:x,emptyState:h,orderBy:p,onOrderByChanged:b,onNextPage:v,hasMoreItems:u,menu:f,displayMenuDiv:j,className:N,disableItemCompositionStyles:$,onMouseEnter:E,onMouseLeave:S,headerBackgroundColor:L="bg-surface",keyBoardShortcutActions:M,disableKeyboardShortcuts:A})=>{const T=d.useRef(null),H=y=>a.some(k=>y.id===k.id),F=document.getElementById("scrollableList"),V=F&&F.scrollHeight>F.clientHeight,B=!u&&s.length===0&&!m,[U,R]=d.useState(null),_=new Array(25).fill(0).map(()=>({skeletonItem:x,columns:t.map(y=>y.width)})),z=e.jsx(ie,{skeleton:_});d.useEffect(()=>{const y=k=>{T.current&&!T.current.contains(k.target)&&R(null)};return document.addEventListener("mousedown",y),document.addEventListener("contextmenu",y),()=>{document.removeEventListener("mousedown",y),document.removeEventListener("contextmenu",y)}},[]);const O=()=>{v?.()},w=()=>{const y=a.map(k=>({props:k,value:!1}));c(y)},I=y=>{const k=[...a.map(D=>({props:D,value:!1})),{props:y,value:!0}];c(k)},W=()=>{if(a.length===1){const k=a[0];i?.(k)}},K=()=>{const k=s.filter(D=>!a.some(ve=>ve.id===D.id)).map(D=>({props:D,value:!0}));c(k)},X=()=>{a.length===s.length?w():K()},J=y=>{if(Z(),!y.orderable||!b)return;const k=p?.field===y.name;b(k?{field:y.name,direction:p.direction==="ASC"?"DESC":"ASC"}:{field:y.name,direction:y.defaultDirection??"ASC"})},P=y=>{A||y()},q=()=>{M?.onRKeyPressed?.()},ae=()=>{M?.onBackspaceKeyPressed?.()};te({"ctrl+a":()=>P(K),"meta+a":()=>P(K),esc:()=>P(w),r:()=>P(q),backspace:()=>P(ae),delete:()=>P(ae)},[s,a,A]);const pe=(y,k)=>{k.metaKey||k.ctrlKey?c([{props:y,value:!H(y)}]):H(y)||o?.(y),R(null)},we=(y,k)=>{k.preventDefault(),H(y)||I(y),R(y.id)},Z=()=>{R(null)},je=(y,k)=>{y.stopPropagation(),R(D=>D?null:k.id),H(k)||I(k)};return e.jsx("div",{id:"generic-list-component",className:`relative isolate flex h-full flex-col overflow-x-auto overflow-y-hidden ${N}`,ref:T,children:e.jsxs("div",{id:"scrollableList",className:"flex h-full flex-col min-w-max overflow-x-hidden overflow-y-auto",children:[e.jsx("div",{className:`sticky top-0 z-50 ${L}`,children:B?null:e.jsx(Re,{selectedItems:a,onTopSelectionCheckboxClick:X,items:s,header:t,orderBy:p,onOrderableColumnClicked:J,menu:f,displayMenuDiv:j,isVerticalScrollbarVisible:V,checkboxDataCy:r,onClose:Z})}),B?h:s.length>0&&!g?e.jsx(ne,{handleNextPage:O,hasMoreItems:!!u,loader:z,scrollableTarget:"scrollableList",children:s.map((y,k)=>e.jsx(Le,{item:y,listIndex:k,isOpen:U===y.id,onClose:Z,itemComposition:n,selected:H(y),onDoubleClick:l&&(()=>l(y)),onClick:D=>pe(y,D),onClickContextMenu:D=>we(y,D),onThreeDotsButtonPressed:D=>je(D,y),columnsWidth:t.map(D=>D.width),menu:f,onSelectedChanged:D=>c([{props:y,value:D}]),disableItemCompositionStyles:$,onMouseEnter:E,onMouseLeave:S,genericEnterKey:W},y.id))}):e.jsx("div",{children:z}),s.length>0&&e.jsx("div",{"data-testid":"outside-click-element",className:"h-full w-full py-6",onClick:w,onContextMenu:y=>{y.preventDefault(),w()}})]})})},He=({children:t,className:r,...s})=>e.jsx("div",{className:r,children:e.jsx("table",{className:"w-full",...s,children:t})}),Be=({children:t,className:r,...s})=>e.jsx("thead",{className:r,...s,children:t}),Oe=({children:t,className:r,...s})=>e.jsx("tbody",{className:r,...s,children:t}),Ke=({children:t,className:r,onClick:s,...n})=>e.jsx("tr",{onClick:s,className:r,...n,children:t}),Ae=({children:t,className:r,isHeader:s=!1,onClick:n,...a})=>{const o=s?"th":"td";return e.jsx(o,{onClick:n,className:r,...a,children:t})},ce=({classNameContainer:t,classNameLoader:r,classNameText:s,type:n="spinner",text:a,size:o=32})=>{const l=n==="spinner";return e.jsx("div",{className:t,children:l?e.jsxs(e.Fragment,{children:[e.jsxs("svg",{className:`animate-spin ${r}`,width:o,height:o,xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",role:"img",children:[e.jsx("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),e.jsx("path",{className:"opacity-75",fill:"currentColor",d:`M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824
|
|
8
|
-
3 7.938l3-2.647z`})]}),a&&e.jsx("p",{className:
|
|
9
|
-
transition-all duration-200`:t==="tertiary"&&
|
|
5
|
+
${o===f&&t&&!u.disabled?.(t)&&"bg-gray-5 text-gray-100 dark:bg-gray-10"}
|
|
6
|
+
${t&&!u.disabled?.(t)&&!u.isTitle?.(t)&&o!==f&&"text-gray-80"}
|
|
7
|
+
`,children:[u.node?u.node:e.jsxs("div",{className:"flex flex-row items-center space-x-2",children:[u.icon&&e.jsx(u.icon,{size:20}),e.jsx("span",{children:u.name})]}),u.keyboardShortcutOptions&&e.jsxs("span",{className:"ml-5 flex grow items-center justify-end text-sm text-gray-40",children:[u.keyboardShortcutOptions?.keyboardShortcutIcon&&e.jsx(u.keyboardShortcutOptions.keyboardShortcutIcon,{size:14}),u.keyboardShortcutOptions?.keyboardShortcutText??""]})]})})},f))})},Te=40,ce=({item:t,menuItemsRef:s,menu:r,openedFromRightClick:n,posX:a,posY:i,isContextMenuCutOff:l,isOpen:o,genericEnterKey:c,handleMenuClose:m})=>e.jsx("div",{className:"z-20 mt-0 flex flex-col rounded-lg bg-surface py-1.5 shadow-subtle-hard outline-none dark:bg-gray-5",style:n?{position:"absolute",left:a,top:i,zIndex:99}:{position:"absolute",right:20,[l?"bottom":"top"]:Te,zIndex:9999},ref:s,children:e.jsx(re,{item:t,isOpen:o,genericEnterKey:c,handleMenuClose:m,menu:r})}),Me=t=>J.createElement("svg",{fill:"none",height:20,viewBox:"0 0 20 20",width:20,xmlns:"http://www.w3.org/2000/svg",...t},J.createElement("path",{d:"m8.85955 15c.38202 0 .67978-.1461.88202-.4551l5.23593-8.00557c.1461-.22472.2079-.43259.2079-.62922 0-.52809-.3933-.91011-.9326-.91011-.3708 0-.6011.13483-.8258.48876l-4.59554 7.24724-2.33146-2.8933c-.20787-.24719-.43259-.35955-.74719-.35955-.54495 0-.9382.38764-.9382.91575 0 .2359.07303.4438.27528.6741l2.89887 3.5113c.24158.2865.51124.4157.87079.4157z",fill:"currentColor"})),Le=t=>J.createElement("svg",{fill:"none",height:20,viewBox:"0 0 20 20",width:20,xmlns:"http://www.w3.org/2000/svg",...t},J.createElement("rect",{fill:"currentColor",height:2,rx:1,width:12,x:4,y:9})),ne=({id:t,checked:s=!0,indeterminate:r=!1,onClick:n,required:a,className:i,checkboxDataCy:l,disabled:o=!1})=>e.jsxs("label",{className:`relative h-5 w-5 rounded focus-within:outline-primary ${i}`,onClick:o?void 0:n,onKeyDown:()=>{},children:[e.jsx("div",{onClick:c=>c.preventDefault(),"data-cy":l,onKeyDown:()=>{},className:`relative flex h-5 w-5 cursor-pointer flex-col items-center justify-center rounded border text-white ${o?r||s?"bg-gray-20 cursor-auto":"border-gray-10 cursor-auto":r||s?"border-primary bg-primary":"border-gray-30 hover:border-gray-40"}`,children:r?e.jsx(Le,{className:"absolute -inset-px"}):s&&e.jsx(Me,{className:"absolute -inset-px"})}),e.jsx("input",{id:t,checked:s,type:"checkbox",required:a??!1,readOnly:!0,className:"base-checkbox h-0 w-0 appearance-none opacity-0",disabled:o})]}),Re=500,ze=({item:t,listIndex:s,itemComposition:r,selected:n,isOpen:a,columnsWidth:i,onClose:l,onSelectedChanged:o,onDoubleClick:c,onClick:m,onClickContextMenu:g,onThreeDotsButtonPressed:x,disableItemCompositionStyles:h,menu:p,onMouseEnter:b,onMouseLeave:v,genericEnterKey:u})=>{const f=d.useRef(),j=d.useRef(null),N=d.useRef(null),[$,E]=d.useState(!1),[S,L]=d.useState(0),[M,A]=d.useState(0),[T,H]=d.useState({width:0,height:0}),[W,U]=d.useState(!1);d.useEffect(()=>{N.current&&(N.current.offsetHeight!==T.height||N.current?.offsetWidth!==T.width)&&H({width:N.current.offsetWidth,height:N.current.offsetHeight})},[T.height,T.width]),d.useEffect(()=>{$||B(),a||(E(!1),L(0),A(0))},[a]);function B(){const w=f.current,I=N?.current?.offsetHeight||300;if(!w)return;const{bottom:_}=w.getBoundingClientRect(),K=window.innerHeight,X=_+I>K;U(X)}const V=w=>{w.preventDefault(),g?.(w);const I=N?.current?.offsetWidth||240,_=N?.current?.offsetHeight||300,K=j?.current?.getBoundingClientRect(),{innerWidth:X,innerHeight:Z}=window;let P=w.clientX-(K?.left||0),q=w.clientY-(K?.top||0);w.clientX+I>X&&(P=P-I),w.clientY+_>Z&&w.clientY>Re&&(q=q-_),L(P),A(q),E(!0)},R=w=>{w.preventDefault(),x?.(w),E(!1)},F=w=>{m?.(w),$&&z()},z=()=>{l()};return se({r:z,backspace:z,enter:()=>{a||u()}},[]),e.jsxs("div",{onDoubleClick:c,onClick:F,onContextMenu:V,ref:j,className:`group relative flex h-14 flex-row items-center pl-14 pr-5 ${n?"bg-primary/10 text-gray-100 dark:bg-primary/20":"focus-within:bg-gray-1 hover:bg-gray-1"} ${a?"z-40":""}`,onMouseEnter:b,onMouseLeave:v,children:[a&&n&&e.jsx(ce,{item:t,menu:p,menuItemsRef:N,openedFromRightClick:$,isOpen:a,posX:S,posY:M,isContextMenuCutOff:W,genericEnterKey:u,handleMenuClose:z}),e.jsx("div",{className:`absolute left-5 top-0 flex h-full w-0 flex-row items-center justify-start p-0 opacity-0 focus-within:opacity-100 group-hover:opacity-100 ${n&&"opacity-100"}`,children:e.jsx(ne,{onClick:w=>{w.stopPropagation(),o(!n)},checked:n,checkboxDataCy:`driveListItemCheckbox${s}`})}),h?e.jsx("div",{className:`grow-1 relative flex h-full w-full flex-row items-center border-b ${n?"border-primary/5":"border-gray-5"}`,children:r[0](t)},0):new Array(r.length).fill(0).map((w,I)=>e.jsx("div",{className:`relative flex h-full shrink-0 flex-row items-center border-b ${n?"border-primary/5":"border-gray-5"} ${i[I]}`,children:r[I](t)},I)),e.jsx("div",{className:`flex h-14 w-12 shrink-0 flex-col items-center justify-center border-b ${n?"border-primary/5":"border-gray-5"}`,children:e.jsx("button",{ref:f,className:`flex h-10 w-10 flex-col items-center justify-center rounded-md opacity-0 outline-none focus-visible:opacity-100 group-hover:opacity-100 ${n?"text-gray-80 hover:bg-primary/10 focus-visible:bg-primary/10":"text-gray-60 hover:bg-gray-10 focus-visible:bg-gray-10"}`,onClick:w=>{R(w)},children:e.jsx(C.DotsThree,{size:24,weight:"bold"})})})]})},Pe=({selectedItems:t,onTopSelectionCheckboxClick:s,items:r,header:n,orderBy:a,onOrderableColumnClicked:i,menu:l,displayMenuDiv:o,isVerticalScrollbarVisible:c,checkboxDataCy:m,onClose:g})=>e.jsx("div",{onClick:g,onContextMenu:g,className:"flex min-w-max h-12 shrink-0 flex-row px-5",children:e.jsxs("div",{className:"flex h-full min-w-full flex-row items-center border-b border-gray-10",children:[e.jsx("div",{className:"flex h-full flex-row items-center justify-between pr-4",children:e.jsx(ne,{checked:t.length>0,indeterminate:r.length>t.length&&t.length>0,onClick:s,checkboxDataCy:m})}),n.map(x=>e.jsxs("button",{onClick:x.orderable?()=>{i(x)}:void 0,"data-cy":"buttonDataCy"in x&&x?.buttonDataCy,className:`flex h-full shrink-0 flex-row items-center space-x-1.5 text-base font-medium text-gray-60 ${x.width} ${x.orderable?"cursor-pointer hover:text-gray-80":""}`,children:[e.jsx("span",{"data-cy":"textDataCy"in x&&x?.textDataCy,children:x.label}),x.name===a?.field&&x.orderable&&(a?.direction==="ASC"?e.jsx(C.ArrowUp,{size:14,weight:"bold"}):e.jsx(C.ArrowDown,{size:14,weight:"bold"}))]},x.name.toString())),c&&e.jsx("div",{className:"mr-15px"}),(l||o)&&e.jsx("div",{className:"flex h-full w-12 shrink-0"})]})}),He=({skeletonItem:t,columns:s})=>e.jsxs("div",{"data-testid":"skeleton-loader-item",className:"group relative flex h-14 animate-pulse flex-row items-center px-5",children:[e.jsx("div",{className:"w-9 shrink-0"}),new Array(s.length).fill(0).map((r,n)=>e.jsx("div",{className:`relative flex h-full shrink-0 flex-row items-center overflow-hidden whitespace-nowrap border-b border-gray-5 ${s[n]}`,children:t?.[n]},`${r}-${n}`)),e.jsx("div",{className:"flex h-14 w-12 shrink-0 flex-col items-center justify-center border-b border-gray-5"})]}),de=({skeleton:t})=>e.jsx(e.Fragment,{children:new Array(t.length).fill(0).map((s,r)=>e.jsx(He,{skeletonItem:t[r].skeletonItem,columns:t[r].columns},`skinSkeletonRow${r}`))}),ae=({children:t,handleNextPage:s,hasMoreItems:r,loader:n,scrollableTarget:a,classNameLoader:i})=>{const l=d.useRef(null),o=d.useRef(null),[c,m]=d.useState(!1);d.useEffect(()=>{a&&(o.current=document.getElementById(a));const x=new IntersectionObserver(([p])=>{p.isIntersecting&&(r?(s(),m(!0)):m(!1))},{root:o.current||null,rootMargin:"100px",threshold:0}),h=l.current;return h&&x.observe(h),()=>{h&&x.unobserve(h)}},[r,s,a]);const g=d.Children.map(t,(x,h)=>h===d.Children.count(t)-1&&r?e.jsxs(e.Fragment,{children:[x,e.jsx("div",{ref:l,className:i,children:c&&n})]}):x);return e.jsx("div",{children:g})},Be=({header:t,checkboxDataCy:s,items:r,itemComposition:n,selectedItems:a,onClick:i,onDoubleClick:l,onEnterPressed:o,onSelectedItemsChanged:c,isLoading:m,forceLoading:g,skinSkeleton:x,emptyState:h,orderBy:p,onOrderByChanged:b,onNextPage:v,hasMoreItems:u,menu:f,displayMenuDiv:j,className:N,disableItemCompositionStyles:$,onMouseEnter:E,onMouseLeave:S,headerBackgroundColor:L="bg-surface",keyBoardShortcutActions:M,disableKeyboardShortcuts:A})=>{const T=d.useRef(null),H=y=>a.some(k=>y.id===k.id),W=document.getElementById("scrollableList"),U=W&&W.scrollHeight>W.clientHeight,B=!u&&r.length===0&&!m,[V,R]=d.useState(null),F=new Array(25).fill(0).map(()=>({skeletonItem:x,columns:t.map(y=>y.width)})),z=e.jsx(de,{skeleton:F});d.useEffect(()=>{const y=k=>{T.current&&!T.current.contains(k.target)&&R(null)};return document.addEventListener("mousedown",y),document.addEventListener("contextmenu",y),()=>{document.removeEventListener("mousedown",y),document.removeEventListener("contextmenu",y)}},[]);const O=()=>{v?.()},w=()=>{const y=a.map(k=>({props:k,value:!1}));c(y)},I=y=>{const k=[...a.map(D=>({props:D,value:!1})),{props:y,value:!0}];c(k)},_=()=>{if(a.length===1){const k=a[0];o?.(k)}},K=()=>{const k=r.filter(D=>!a.some(ke=>ke.id===D.id)).map(D=>({props:D,value:!0}));c(k)},X=()=>{a.length===r.length?w():K()},Z=y=>{if(Q(),!y.orderable||!b)return;const k=p?.field===y.name;b(k?{field:y.name,direction:p.direction==="ASC"?"DESC":"ASC"}:{field:y.name,direction:y.defaultDirection??"ASC"})},P=y=>{A||y()},q=()=>{M?.onRKeyPressed?.()},ie=()=>{M?.onBackspaceKeyPressed?.()};se({"ctrl+a":()=>P(K),"meta+a":()=>P(K),esc:()=>P(w),r:()=>P(q),backspace:()=>P(ie),delete:()=>P(ie)},[r,a,A]);const je=(y,k)=>{k.metaKey||k.ctrlKey?c([{props:y,value:!H(y)}]):H(y)||i?.(y),R(null)},ve=(y,k)=>{k.preventDefault(),H(y)||I(y),R(y.id)},Q=()=>{R(null)},Ne=(y,k)=>{y.stopPropagation(),R(D=>D?null:k.id),H(k)||I(k)};return e.jsx("div",{id:"generic-list-component",className:`relative isolate flex h-full flex-col overflow-x-auto overflow-y-hidden ${N}`,ref:T,children:e.jsxs("div",{id:"scrollableList",className:"flex h-full flex-col min-w-max overflow-x-hidden overflow-y-auto",children:[e.jsx("div",{className:`sticky top-0 z-50 ${L}`,children:B?null:e.jsx(Pe,{selectedItems:a,onTopSelectionCheckboxClick:X,items:r,header:t,orderBy:p,onOrderableColumnClicked:Z,menu:f,displayMenuDiv:j,isVerticalScrollbarVisible:U,checkboxDataCy:s,onClose:Q})}),B?h:r.length>0&&!g?e.jsx(ae,{handleNextPage:O,hasMoreItems:!!u,loader:z,scrollableTarget:"scrollableList",children:r.map((y,k)=>e.jsx(ze,{item:y,listIndex:k,isOpen:V===y.id,onClose:Q,itemComposition:n,selected:H(y),onDoubleClick:l&&(()=>l(y)),onClick:D=>je(y,D),onClickContextMenu:D=>ve(y,D),onThreeDotsButtonPressed:D=>Ne(D,y),columnsWidth:t.map(D=>D.width),menu:f,onSelectedChanged:D=>c([{props:y,value:D}]),disableItemCompositionStyles:$,onMouseEnter:E,onMouseLeave:S,genericEnterKey:_},y.id))}):e.jsx("div",{children:z}),r.length>0&&e.jsx("div",{"data-testid":"outside-click-element",className:"h-full w-full py-6",onClick:w,onContextMenu:y=>{y.preventDefault(),w()}})]})})},Oe=({children:t,className:s,...r})=>e.jsx("div",{className:s,children:e.jsx("table",{className:"w-full",...r,children:t})}),Ke=({children:t,className:s,...r})=>e.jsx("thead",{className:s,...r,children:t}),Ae=({children:t,className:s,...r})=>e.jsx("tbody",{className:s,...r,children:t}),We=({children:t,className:s,onClick:r,...n})=>e.jsx("tr",{onClick:r,className:s,...n,children:t}),Fe=({children:t,className:s,isHeader:r=!1,onClick:n,...a})=>{const i=r?"th":"td";return e.jsx(i,{onClick:n,className:s,...a,children:t})},ue=({classNameContainer:t,classNameLoader:s,classNameText:r,type:n="spinner",text:a,size:i=32})=>{const l=n==="spinner";return e.jsx("div",{className:t,children:l?e.jsxs(e.Fragment,{children:[e.jsxs("svg",{className:`animate-spin ${s}`,width:i,height:i,xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",role:"img",children:[e.jsx("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),e.jsx("path",{className:"opacity-75",fill:"currentColor",d:`M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824
|
|
8
|
+
3 7.938l3-2.647z`})]}),a&&e.jsx("p",{className:r,children:a})]}):e.jsxs("div",{className:`loader-container ${s}`,children:[e.jsx("div",{className:"loader06"}),a&&e.jsx("p",{className:`loader-text ${r}`,children:a})]})})},G=({variant:t="primary",type:s="button",id:r,children:n,className:a="",disabled:i=!1,onClick:l=()=>{},onKeyDown:o=()=>{},size:c="default",loading:m,dataTest:g,autofocus:x,buttonDataCy:h,buttonChildrenDataCy:p})=>{let b="";return t==="primary"&&!i?b=`${m?"bg-primary-dark":"bg-primary"} active:bg-primary-dark text-white shadow-sm`:t==="primary"&&i?b="bg-gray-30 text-white shadow-sm":t==="destructive"&&!i?b=`${m?"bg-red-dark":"bg-red"} active:bg-red-dark text-white shadow-sm`:t==="destructive"&&i?b="bg-gray-30 text-white shadow-sm":t==="secondary"&&!i?b="bg-surface dark:bg-gray-5 border border-gray-10 hover:border-gray-20 active:bg-gray-1 dark:active:bg-gray-10 text-gray-80 shadow-sm":t==="secondary"&&i?b="bg-surface dark:bg-gray-5 text-gray-30 border border-gray-5 shadow-sm":t==="ghost"&&!i?b="hover:bg-gray-5 active:bg-gray-10 focus-visible:bg-gray-10":t==="ghost"&&i?b="text-gray-30":t==="tertiary"&&!i?b=`${m?"bg-white/45":"bg-white/15"} active:bg-white/25 text-white shadow-sm border border-white/20 active:border-white hover:border-white/40 active:border-white
|
|
9
|
+
transition-all duration-200`:t==="tertiary"&&i&&(b="bg-white/45 text-white shadow-sm border border-white/20"),e.jsxs("button",{"data-cy":h,id:r,onClick:l,onKeyDown:o,disabled:i||m,type:s,"data-test":g,autoFocus:x,className:`${c==="default"?"h-10 px-5":"h-8 px-3.5"} relative flex shrink-0 select-none flex-row items-center justify-center space-x-2
|
|
10
10
|
whitespace-nowrap rounded-lg text-base font-medium outline-none ring-2 ring-primary/0
|
|
11
11
|
ring-offset-2 ring-offset-transparent transition-all duration-100 ease-in-out
|
|
12
|
-
focus-visible:ring-primary/50 ${b} ${a}`,children:[m&&e.jsx(
|
|
12
|
+
focus-visible:ring-primary/50 ${b} ${a}`,children:[m&&e.jsx(ue,{size:18}),e.jsx("div",{className:"flex items-center justify-center space-x-2","data-cy":p,children:n})]})},_e=({icon:t,title:s,subtitle:r,action:n,contextMenuClick:a})=>{let i=null;return n&&(i=e.jsxs(G,{variant:"secondary",onClick:n.onClick,children:[e.jsx("span",{children:n.text}),e.jsx(n.icon,{size:20})]})),e.jsx("div",{className:"h-full w-full p-8",onContextMenu:a,children:e.jsxs("div",{className:"flex h-full flex-col items-center justify-center space-y-6 pb-20",children:[e.jsx("div",{className:"pointer-events-none mx-auto w-max",children:t}),e.jsxs("div",{className:"pointer-events-none space-y-1 text-center",children:[e.jsx("p",{className:"text-2xl font-medium text-gray-100",children:s}),e.jsx("p",{className:"text-lg text-gray-60",children:r})]}),i]})})},Y=({className:t})=>e.jsx("div",{className:`rounded-lg bg-gray-5 animate-pulse${t?` ${t}`:""}`}),le=()=>e.jsxs("div",{className:"flex flex-row items-center gap-2",children:[e.jsx(Y,{className:"h-3 w-8"}),e.jsx(Y,{className:"h-3 w-2"}),e.jsx(Y,{className:"h-3 w-8"})]}),Ue=({title:t,description:s,usage:r,limit:n,percentage:a,upgradeLabel:i,closeButtonLabel:l,onUpgradeClick:o,onCloseButtonClick:c,barClassName:m="bg-yellow-60",isLoading:g=!1})=>e.jsxs("div",{className:"flex flex-col w-full px-4 py-3 rounded-xl bg-alert border-alert-dark border h-min",children:[e.jsxs("div",{className:"flex flex-col w-full gap-1",children:[e.jsxs("div",{className:"flex flex-row justify-between items-center",children:[e.jsxs("span",{className:"flex flex-row items-center gap-2",children:[e.jsx(C.CloudWarningIcon,{weight:"fill",className:"size-5 text-yellow-60"}),e.jsx("p",{className:"text-sm font-semibold text-gray-80",children:t})]}),e.jsx("button",{type:"button","aria-label":l,onClick:c,className:"flex items-center justify-center",children:e.jsx(C.XIcon,{className:"size-5 text-gray-53 cursor-pointer"})})]}),e.jsx("div",{className:"text-xs font-medium text-gray-52",children:s})]}),e.jsxs("div",{className:"flex flex-row items-center gap-6 h-10",children:[e.jsxs("div",{className:"flex flex-1 flex-col gap-1",children:[e.jsx("div",{className:"flex w-full h-1.5 bg-gray-10 rounded-full",children:e.jsx("div",{className:`${m} h-full rounded-full`,style:{width:`${a}%`}})}),g?e.jsx(le,{}):e.jsxs("span",{className:"flex flex-row gap-1",children:[e.jsx("p",{className:"text-gray-60 text-xs",children:r}),e.jsx("p",{className:"text-gray-60 text-xs",children:"/"}),e.jsx("p",{className:"text-gray-60 text-xs",children:n})]})]}),e.jsx(G,{variant:"secondary",size:"medium",onClick:o,children:i})]})]}),Ve=({children:t,variant:s="default",active:r=!1,onClick:n,onClickToggleButton:a,className:i="",dropdown:l,indicator:o,isOpen:c=!1,handleOpen:m=()=>{},handleClose:g=()=>{}})=>{d.useEffect(()=>{const u=f=>{if(c){const j=f.target,N=document.querySelector(`[data-circle-button="${s}"]`);N&&!N.contains(j)&&g()}};return document.addEventListener("click",u),()=>{document.removeEventListener("click",u)}},[c,s]);const x=u=>{u.stopPropagation(),l&&(a?.(),c?g():m())},h=()=>{n?.()},p=()=>{switch(s){case"cancel":return"bg-red hover:bg-red/85";case"warning":return r?"bg-white/85":"bg-white/25 hover:bg-white/35";default:return r?"bg-white/85":"bg-white/25 hover:bg-white/35"}},b=()=>o?s==="warning"?e.jsx("div",{className:"absolute -top-1 -right-1 h-5 w-5 bg-orange border border-black/35 rounded-full flex items-center justify-center",children:e.jsx(C.Warning,{size:12,color:"black",weight:"bold"})}):e.jsx("div",{className:`absolute -top-1 -right-1 h-5 w-5 flex items-center justify-center rounded-full ${o.className||""}`,children:o.icon}):null,v=()=>!l||s==="cancel"||s==="warning"?null:e.jsx("button",{onClick:x,className:"absolute -top-1 -right-1 h-5 w-5 border bg-white border-black/35 rounded-full flex items-center justify-center hover:bg-gray-50",children:e.jsx(C.CaretUp,{size:10,color:"black",weight:"fill"})});return e.jsxs("div",{className:"relative w-11 h-11","data-circle-button":s,children:[e.jsx("button",{onClick:h,className:`
|
|
13
13
|
h-11 w-11
|
|
14
14
|
flex items-center justify-center
|
|
15
15
|
rounded-full
|
|
16
16
|
transition-all duration-200
|
|
17
17
|
${p()}
|
|
18
|
-
${
|
|
19
|
-
`,children:t}),v(),b(),c&&l&&
|
|
20
|
-
${H} ${T} ${
|
|
21
|
-
${R?"bg-white":"bg-gray-5"}`,children:e.jsx(C.X,{size:20})})]});let O,w;switch(n){case"success":O="text-green",w=C.CheckCircle;break;case"warning":O="text-orange",w=C.Warning;break;case"error":O="text-red",w=C.WarningOctagon;break;default:O="text-gray-80"}return e.jsxs("div",{className:`${t}`,children:[
|
|
18
|
+
${i}
|
|
19
|
+
`,children:t}),v(),b(),c&&l&&s!=="cancel"&&e.jsx("div",{className:"absolute bottom-full mb-2 left-0",children:l})]})},xe=({children:t,title:s,subtitle:r,popsFrom:n,className:a,delayInMs:i,arrow:l=!0})=>{const[o,c]=d.useState(!1),m=d.useRef(null);function g(){c(!0)}function x(){c(!1)}function h(){m.current!==null&&clearTimeout(m.current),g()}function p(){i?m.current=setTimeout(()=>{m.current=null,x()},i):x()}let b="",v="",u="";switch(n){case"right":b="left-full top-1/2 -translate-y-1/2 ml-1.5",v="flex-row-reverse",u="polygon(100% 0%, 100% 100%, 0% 50%)";break;case"left":b="right-full top-1/2 -translate-y-1/2 mr-1.5",v="flex-row",u="polygon(0% 0%, 0% 100%, 100% 50%)";break;case"top":b="bottom-full left-1/2 -translate-x-1/2 mb-1.5 origin-bottom",v="flex-col",u="polygon(0% 0%, 100% 0%, 50% 100%)";break;case"bottom":b="top-full left-1/2 -translate-x-1/2 mt-1.5",v="flex-col-reverse",u="polygon(50% 0%, 0% 100%, 100% 100%)";break}return e.jsxs("div",{className:`relative w-max ${a}`,onMouseEnter:h,onMouseLeave:p,style:{lineHeight:0},children:[e.jsxs("div",{className:`pointer-events-none absolute ${b} flex items-center ${v} drop-shadow-tooltip transition-all duration-150 ${o?"scale-100 opacity-100":"scale-50 opacity-0"}`,children:[e.jsxs("div",{className:"w-max rounded-lg bg-gray-90 px-4 py-1.5 text-center dark:bg-gray-5",children:[e.jsx("p",{className:"text-base text-white",children:s}),r&&e.jsx("p",{className:"-mt-1 text-sm text-gray-40",children:r})]}),l&&e.jsx("div",{className:`bg-gray-90 dark:bg-gray-5 ${n==="bottom"||n==="top"?"h-1.5 w-4":"h-4 w-1.5"}`,style:{clipPath:u,marginTop:n==="top"?"-1px":void 0},"data-testid":"tooltip-arrow"})]}),t]})},Xe=({className:t="",classText:s="select-text text-gray-80",text:r,copiedText:n="Copied!",copyToClipboardText:a="Copy to clipboard"})=>{const[i,l]=d.useState(!1);async function o(){await navigator.clipboard.writeText(r),l(!0),setTimeout(()=>l(!1),1e3)}return e.jsxs("div",{className:`${t} flex h-11 items-center justify-between rounded-md border border-gray-10 bg-gray-5 px-4`,children:[e.jsx("p",{className:`${s}`,children:r}),e.jsx(xe,{className:"ml-6",popsFrom:"top",title:i?n:a,delayInMs:i?500:void 0,children:e.jsx("button",{disabled:i,onClick:o,children:e.jsx(C.Copy,{className:"shrink-0 text-gray-50 hover:text-gray-60",size:24})})})]})},qe=({className:t="",label:s,variant:r="default",accent:n,disabled:a,placeholder:i,value:l,maxLength:o,onChange:c,onClear:m,message:g,onFocus:x,onBlur:h,autofocus:p=!1,autoComplete:b="on",dataTest:v,name:u,required:f=!1,labelDataCy:j,inputDataCy:N,onKeyDown:$,inputClassName:E="",borderRadius:S="rounded-md",fontClasses:L="text-lg font-normal"})=>{const M=d.useRef(null),A=()=>{M&&M.current&&(r!=="email"&&(M.current.selectionStart=M.current.value.length,M.current.selectionEnd=M.current.value.length),M.current.focus())};d.useEffect(()=>{(g||p)&&A()},[g,p,a]);let T;switch(n){case"error":T="border-red focus:border-red ring-red";break;case"warning":T="focus:border-orange ring-orange";break;case"success":T="focus:border-green ring-green";break;default:T="focus:border-primary ring-primary";break}const H=r==="search"?"border-transparent":"border-gray-20 disabled:border-gray-10 hover:border-gray-30",W=r==="search"?"placeholder-gray-40":"placeholder-gray-30",U=r==="search"?"pr-4 pl-10":"px-4",[B,V]=d.useState(!1),[R,F]=d.useState(!1),z=e.jsxs("div",{className:"relative",children:[e.jsx("input",{ref:M,disabled:a,className:`inxt-input h-10 w-full border bg-transparent ${L} text-gray-80 outline-none ring-opacity-10 focus:ring-3 disabled:text-gray-40 disabled:placeholder-gray-20 dark:ring-opacity-20
|
|
20
|
+
${H} ${T} ${W} ${U} ${S} ${E}`,type:r==="password"&&!B?"password":r==="email"?"email":"text",placeholder:i,onChange:I=>c&&c(I.target.value),onFocus:()=>{x&&x(),F(!0)},onBlur:()=>{h&&h(),F(!1)},autoComplete:b,value:l,maxLength:o,"data-test":v,"data-cy":N,name:u,required:f,onKeyDown:$??void 0}),r==="password"&&R&&e.jsx("div",{role:"button",tabIndex:0,onMouseDown:I=>{I.preventDefault(),V(!B)},className:"absolute right-4 top-1/2 -translate-y-1/2 cursor-pointer bg-transparent py-2 pl-2 text-gray-80",children:B?e.jsx(C.Eye,{size:24}):e.jsx(C.EyeSlash,{size:24})}),r==="search"&&e.jsx(C.MagnifyingGlass,{className:`absolute left-4 top-1/2 -translate-y-1/2 ${a?"text-gray-20":"text-gray-40"}`,size:20}),r==="search"&&l&&!a&&e.jsx("div",{role:"button",tabIndex:0,onMouseDown:I=>{I.preventDefault(),m&&m()},className:`absolute right-4 top-1/2 -translate-y-1/2 cursor-pointer py-2 pl-2 text-gray-40
|
|
21
|
+
${R?"bg-white":"bg-gray-5"}`,children:e.jsx(C.X,{size:20})})]});let O,w;switch(n){case"success":O="text-green",w=C.CheckCircle;break;case"warning":O="text-orange",w=C.Warning;break;case"error":O="text-red",w=C.WarningOctagon;break;default:O="text-gray-80"}return e.jsxs("div",{className:`${t}`,children:[s?e.jsxs("label",{children:[e.jsx("span",{"data-cy":j,className:`text-sm ${a?"text-gray-40":"text-gray-80"}`,children:s}),z]}):z,o&&e.jsx("p",{className:"font-regular mt-1 text-right text-sm text-gray-50",children:`${l?.length??0}/${o}`}),g&&e.jsxs("div",{className:`mt-0.5 flex items-center ${O}`,children:[w&&e.jsx(w,{size:16,weight:"fill"}),e.jsx("p",{className:"ml-1 text-sm",children:g})]})]})},Ge=({checked:t,id:s,disabled:r=!1,onClick:n})=>{const a=r?"border-gray-10":"border-gray-40",i=r&&t?"border-0 bg-gray-20":t&&"border-0 bg-primary active:bg-primary-dark";return e.jsxs("div",{id:s,className:"flex cursor-pointer",children:[e.jsx("button",{disabled:r,onClick:n,className:`flex h-5 w-5 items-center justify-center rounded-full border ${i} ${a}`,children:e.jsx("div",{className:`h-2.5 w-2.5 rounded-full ${t||r?"bg-white":"hover:bg-gray-10"}`})}),e.jsx("input",{type:"radio",className:"h-0 w-0 appearance-none opacity-0",checked:!0,readOnly:!0})]})},Ye=({value:t,min:s=0,max:r,step:n,className:a,disabled:i=!1,ariaLabel:l="Range slider",onChange:o})=>{const c=(t-s)/(r-s)*100,m=`linear-gradient(to right, #3264fe ${c}%, #d5d5d5 ${c}%)`;return e.jsx("div",{className:a,children:e.jsx("input",{id:"my-slider",type:"range",min:s,max:r,value:t,step:n,onInput:g=>o(Number(g.target.value)),disabled:i,"aria-label":l,style:{background:m}})})},Je=({disabled:t=!1,id:s,dataTestId:r="switch",size:n="md",onClick:a,onCheckedChange:i})=>{const[l,o]=d.useState(!1),c=p=>{const b=p.target.checked;o(b),i&&i(b)},m=t?"bg-gray-5":l?"bg-green":"bg-gray-10",g={md:"w-8 h-5",lg:"w-12 h-7",xl:"w-14 h-8"},x={md:"w-4 h-4",lg:"w-6 h-6",xl:"w-7 h-7"},h={md:"translate-x-[13px]",lg:"translate-x-[21px]",xl:"translate-x-[25px]"};return e.jsxs("label",{htmlFor:s,className:`relative inline-flex items-center cursor-pointer ${g[n]}`,"data-testid":r,children:[e.jsx("input",{type:"checkbox",id:s,disabled:t,checked:l,onChange:c,onClick:a,className:"sr-only"}),e.jsx("div",{className:`absolute inset-0 rounded-full transition-colors duration-200 ${m} ${t?"data-[state=checked]:bg-green/50":""}`}),e.jsx("span",{className:`block bg-white rounded-full transition-transform duration-200 transform ${l?h[n]:"translate-x-[3px]"} ${x[n]} ${t?"pointer-events-none":""}`})]})},Ze=({disabled:t=!1,accentColor:s,placeholder:r="",value:n="",onChange:a,name:i})=>e.jsx("textarea",{disabled:t,placeholder:r,className:`
|
|
22
22
|
w-full h-full py-4 px-3.5 bg-transparent border rounded-md outline-none text-lg font-regular resize-none
|
|
23
23
|
placeholder:text-gray-30
|
|
24
24
|
${t?"border-gray-5 text-gray-40":"border-gray-20 text-gray-100"}
|
|
25
|
-
${!
|
|
26
|
-
${
|
|
27
|
-
`,value:n,onChange:a,name:
|
|
25
|
+
${!s&&"border-gray-20 focus:border-primary focus:ring focus:ring-primary/10"}
|
|
26
|
+
${s==="red"&&"border-red focus:ring focus:ring-red/10"}
|
|
27
|
+
`,value:n,onChange:a,name:i}),Qe=({leftContent:t,rightContent:s,className:r=""})=>e.jsxs("header",{className:`
|
|
28
28
|
flex
|
|
29
29
|
items-center
|
|
30
30
|
justify-between
|
|
31
|
-
${
|
|
32
|
-
`,children:[e.jsx("div",{className:"flex items-center space-x-4",children:t}),e.jsx("div",{className:"flex items-center space-x-4",children:
|
|
33
|
-
transform shadow-subtle-hard transition-all duration-100 ease-in-out ${c?`scale-100 opacity-100 ${g}`:"pointer-events-none scale-95 opacity-0"}`,"data-testid":"menu-dropdown",children:e.jsx("div",{className:`absolute ${a}`,children:e.jsx(re,{item:
|
|
34
|
-
${!t.item.active||t.item.isFirstPath&&t.totalBreadcrumbsLength===1?"text-gray-80":"text-gray-50 hover:text-gray-80"}`,onClick:()=>a(t.item),onKeyDown:()=>{},"data-cy":t?.breadcrumbButtonDataCy,children:[t.itemComponent&&e.jsx(t.itemComponent,{className:"h-5 w-5"}),t.item.icon?t.item.icon:null,t.item.label?e.jsx("span",{className:`max-w-sm flex-1 cursor-pointer truncate ${t.isHiddenInList&&"pl-3 text-base"}`,title:t.item.label,children:t.item.label}):null]},t.item.uuid)})},
|
|
35
|
-
rounded-md border border-gray-10 bg-surface dark:bg-gray-5 shadow-subtle-hard z-10`,menuItems:
|
|
36
|
-
rounded-full text-gray-60 transition-all duration-75 ease-in-out hover:bg-gray-5 hover:text-gray-80 ${c?"bg-gray-5":""}`,children:e.jsx(C.DotsThree,{weight:"bold",className:"h-5 w-5"})})},"breadcrumbDropdownItems");a.splice(2,0,
|
|
37
|
-
-translate-y-1/2 flex-col overflow-hidden ${n?"rounded-2xl":"rounded-lg pt-8"} text-gray-100 ${x||"bg-surface"}`,children:[e.jsxs("div",{className:`${
|
|
38
|
-
transition duration-200 ease-in-out ${m||"text-primary hover:text-primary-dark"} `,children:e.jsx(C.X,{role:"button",onClick:
|
|
31
|
+
${r}
|
|
32
|
+
`,children:[e.jsx("div",{className:"flex items-center space-x-4",children:t}),e.jsx("div",{className:"flex items-center space-x-4",children:s})]}),et=({children:t,className:s="",id:r,dataCy:n})=>e.jsx("div",{id:r,"data-cy":n,className:`grid min-w-full auto-rows-min grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 ${s}`,children:t}),tt=t=>{const s=t.match(/px-(\d+(\.\d+)?)/),r=t.match(/py-(\d+(\.\d+)?)/),n=s?s[1]:void 0,a=r?r[1]:void 0;return{px:n,py:a}},fe=({children:t,options:s,classButton:r,menuItems:n,classMenuItems:a,openDirection:i,dropdownActionsContext:l,item:o={}})=>{const[c,m]=d.useState(!1),g=i==="left"?"origin-top-left":"origin-top-right",x=d.useRef(null);d.useEffect(()=>{const $=E=>{x.current&&!x.current.contains(E.target)&&m(!1)};return document.addEventListener("mousedown",$),document.addEventListener("contextmenu",$),()=>{document.removeEventListener("mousedown",$),document.removeEventListener("contextmenu",$)}},[]);const h=s?s.map($=>({name:$.text,action:()=>$.onClick()})):[],p=n?n.map($=>({node:$})):[],b=l||[],v=[...h,...p,...b],u=()=>m($=>!$),f=()=>m(!1),{px:j,py:N}=tt(a);return e.jsxs("div",{className:"relative outline-none min-w-breadcrumb",ref:x,children:[e.jsx("button",{className:`cursor-pointer outline-none ${r}`,onClick:u,"aria-expanded":c,"aria-haspopup":"menu",children:typeof t=="function"?t({open:c}):t}),e.jsx("div",{className:`absolute ${i==="left"?"left-0":"right-0"}
|
|
33
|
+
transform shadow-subtle-hard transition-all duration-100 ease-in-out ${c?`scale-100 opacity-100 ${g}`:"pointer-events-none scale-95 opacity-0"}`,"data-testid":"menu-dropdown",children:e.jsx("div",{className:`absolute ${a}`,children:e.jsx(re,{item:o,isOpen:c,handleMenuClose:f,menu:v,paddingX:j,paddingY:N})})})]})},oe=t=>{const[{isOver:s,canDrop:r},n]=t.useDrop(()=>({accept:t.acceptedTypes,collect:l=>({isOver:l.isOver(),canDrop:l.canDrop()}),canDrop:t.canItemDrop(t.item),drop:t.onItemDropped(t.item,t.namePath,t.isSomeItemSelected,t.selectedItems,t.dispatch)}),[t.selectedItems]),a=l=>{l.active&&l.onClick&&l.onClick()},i=s&&r?"drag-over-effect":"";return e.jsx(e.Fragment,{children:!t.item.active&&!t.item.dialog&&t.menu?e.jsx(t.menu,{item:t.item,items:t.items,onItemClicked:a}):e.jsxs("div",{ref:n,className:`flex ${t.isHiddenInList?"w-full":"max-w-fit"} ${t.item.isFirstPath?"shrink-0 pr-1":"min-w-breadcrumb flex-1 px-1.5 py-1.5"} cursor-pointer flex-row items-center truncate font-medium ${i}
|
|
34
|
+
${!t.item.active||t.item.isFirstPath&&t.totalBreadcrumbsLength===1?"text-gray-80":"text-gray-50 hover:text-gray-80"}`,onClick:()=>a(t.item),onKeyDown:()=>{},"data-cy":t?.breadcrumbButtonDataCy,children:[t.itemComponent&&e.jsx(t.itemComponent,{className:"h-5 w-5"}),t.item.icon?t.item.icon:null,t.item.label?e.jsx("span",{className:`max-w-sm flex-1 cursor-pointer truncate ${t.isHiddenInList&&"pl-3 text-base"}`,title:t.item.label,children:t.item.label}):null]},t.item.uuid)})},st=t=>{const s=d.forwardRef((n,a)=>e.jsx("div",{ref:a,className:"flex cursor-pointer items-center hover:bg-gray-5 hover:text-gray-80 dark:hover:bg-gray-10",children:n.children})),r=()=>{const n=t.items,a=[],i=[],l=o=>e.jsx("div",{className:"text-dgray-50 flex items-center",children:e.jsx(C.CaretRight,{weight:"bold",className:"h-4 w-4","data-testid":"caret-right"})},o);for(let o=0;o<n.length;o++){const c="breadcrumbSeparator-"+n[o].uuid+o.toString(),m="breadcrumbItem-"+n[o].uuid+o.toString();n.length>3&&o!==0&&o<n.length-2?(o===1&&a.push(l(c)),i.push(e.jsx(s,{children:e.jsx(oe,{item:n[o],isHiddenInList:!0,totalBreadcrumbsLength:n.length,items:n,namePath:t.namePath,isSomeItemSelected:t.isSomeItemSelected,selectedItems:t.selectedItems,onItemDropped:t.onItemDropped,canItemDrop:t.canItemDrop,itemComponent:t.itemComponent,acceptedTypes:t.acceptedTypes,dispatch:t.dispatch,useDrop:t.useDrop},m)}))):(a.push(e.jsx(oe,{breadcrumbButtonDataCy:o===0?t?.rootBreadcrumbItemDataCy:void 0,item:n[o],totalBreadcrumbsLength:n.length,items:n,menu:t.menu,namePath:t.namePath,isSomeItemSelected:t.isSomeItemSelected,selectedItems:t.selectedItems,onItemDropped:t.onItemDropped,canItemDrop:t.canItemDrop,acceptedTypes:t.acceptedTypes,dispatch:t.dispatch,useDrop:t.useDrop},m)),o<n.length-1&&a.push(l(c)))}if(i.length>0){const o=e.jsx(fe,{openDirection:"left",classMenuItems:`left-0 top-1 w-max max-h-80 overflow-y-auto
|
|
35
|
+
rounded-md border border-gray-10 bg-surface dark:bg-gray-5 shadow-subtle-hard z-10`,menuItems:i,children:({open:c})=>e.jsx("div",{className:`flex h-8 w-8 items-center justify-center
|
|
36
|
+
rounded-full text-gray-60 transition-all duration-75 ease-in-out hover:bg-gray-5 hover:text-gray-80 ${c?"bg-gray-5":""}`,children:e.jsx(C.DotsThree,{weight:"bold",className:"h-5 w-5"})})},"breadcrumbDropdownItems");a.splice(2,0,o)}return a};return e.jsx("div",{className:"flex w-full items-center",children:r()})},me=({label:t,Icon:s,onClick:r,notifications:n,iconDataCy:a,isActive:i=!1,isCollapsed:l=!1,subsection:o=!1})=>e.jsx("button",{onClick:r,"data-cy":a,className:`flex w-full flex-col overflow-hidden focus-visible:bg-gray-10 rounded-lg ${i?"bg-primary/20":"hover:bg-gray-5"} ${o?"pl-5":""}`,title:l?t:void 0,children:e.jsxs("div",{className:"flex flex-row px-2.5 py-2 w-full items-center justify-between min-h-[36px]",children:[e.jsxs("div",{className:`flex flex-row gap-3 items-center ${i?"text-primary":"text-gray-80"}`,children:[e.jsx(s,{size:20,weight:i?"fill":"regular",className:"flex-shrink-0"}),e.jsx("p",{className:`font-medium whitespace-nowrap overflow-hidden transition-all duration-300 ${l?"opacity-0 delay-200":"opacity-100 delay-0"}`,children:t})]}),e.jsx("div",{className:`flex rounded-full px-2 py-1 transition-all duration-300 ${i?"text-white bg-primary":"bg-gray-10 text-gray-60"} ${l||!n?"opacity-0 invisible delay-300":"opacity-100 delay-0"}`,children:n&&e.jsx("p",{className:"text-xs font-medium",children:n})})]})}),he=({options:t,isCollapsed:s,showSubsections:r})=>e.jsx("div",{className:"flex flex-col w-full",children:t.filter(n=>n.isVisible).map((n,a)=>n.subsection&&!r||s&&n.subsection?null:e.jsx(me,{label:n.label,Icon:n.icon,iconDataCy:n.iconDataCy,isActive:n.isActive,notifications:n.notifications,onClick:n.onClick,isCollapsed:s,subsection:n.subsection},`${n.iconDataCy}-${a}`))}),ge=({childrenButton:t,panel:s,className:r,classButton:n,align:a="right"})=>{const[i,l]=d.useState(!1),o=d.useRef(null),[c,m]=d.useState(i),[g,x]=d.useState("opacity-0"),[h,p]=d.useState("scale-95"),b=()=>l(f=>!f),v=f=>{o.current&&!o.current.contains(f.target)&&u()},u=()=>{l(!1)};return d.useEffect(()=>{if(i){const f=setTimeout(()=>{x("opacity-100"),p("scale-100")},10);return m(!0),()=>clearTimeout(f)}else{x("opacity-0"),p("scale-95");const f=setTimeout(()=>{m(!1)},100);return()=>clearTimeout(f)}},[i]),d.useEffect(()=>(document.addEventListener("mousedown",v),()=>{document.removeEventListener("mousedown",v)}),[]),e.jsxs("div",{style:{lineHeight:0},className:`relative ${r}`,children:[e.jsx("button",{onClick:b,className:`cursor-pointer outline-none ${n}`,"aria-expanded":i,"data-testid":"popover-button",children:t}),c&&e.jsx("div",{ref:o,className:`absolute z-50 mt-1 transform rounded-md border border-gray-10 ${a==="left"?"left-0 origin-top-left":"right-0 origin-top-right"} bg-surface py-1.5 shadow-subtle duration-100 ease-out dark:bg-gray-5 ${g} ${h}`,children:s(u)})]})};function ye({className:t="",suiteArray:s,soonText:r,align:n="right"}){const a=e.jsx("div",{className:"flex h-10 w-10 items-center justify-center",children:e.jsx(C.DotsNineIcon,{size:26,className:"h-7 w-7",weight:"bold"})}),i=e.jsx("div",{className:"w-64 flex flex-wrap p-4","data-testid":"suite-launcher-panel",children:s.map((l,o)=>e.jsx("div",{className:`w-1/3 flex items-center justify-center rounded-md ${l.isMain?"bg-primary/10 dark:bg-primary/20":""}`,children:e.jsx("div",{role:"none",className:`flex items-center p-4 text-gray-80 w-full rounded-md ${l.availableSoon?"":"cursor-pointer hover:bg-gray-1 dark:hover:bg-gray-10"}`,style:{lineHeight:1.25},onClick:l.availableSoon?void 0:l.onClick,children:e.jsxs("div",{className:"flex flex-col items-center w-full rounded-md",children:[l.isLocked?e.jsx(C.LockIcon,{size:26,weight:"regular",className:"opacity-50 filter grayscale","data-testid":"suite-launcher-lock-icon"}):d.isValidElement(l.icon)?d.cloneElement(l.icon,{size:26,className:`${l.icon.props?.className??""} ${l.isMain?"text-primary":"text-gray-80"} ${l.availableSoon||l.isLocked?"opacity-50 filter grayscale":""}`,weight:l.isMain?"fill":"regular"}):l.icon,e.jsxs("div",{className:"mt-1 flex items-center",children:[e.jsx("span",{className:`text-xs font-medium whitespace-nowrap ${l.isMain?"text-primary":"text-gray-80"}`,style:{lineHeight:1,opacity:l.availableSoon||l.isLocked?.5:1},children:l.title}),l.availableSoon&&e.jsx("div",{className:"flex rounded-sm px-1 ml-1 py-0.5 bg-purple-1 dark:bg-purple-10 items-center",children:e.jsx("span",{className:"font-medium text-purple-10 dark:text-purple-1",style:{lineHeight:1,fontSize:"xx-small"},children:r??"Soon"})})]})]})})},o))});return e.jsx(ge,{className:t,childrenButton:a,panel:()=>i,align:n,"data-testid":"app-suite-dropdown"})}const be=({logo:t,title:s,onClick:r,isCollapsed:n,className:a,onToggleCollapse:i,suiteLauncher:l})=>e.jsxs("div",{className:`flex flex-row justify-between w-full py-5 px-2 ${a}`,children:[e.jsxs("div",{className:"relative flex flex-row gap-2 items-center",children:[e.jsxs("button",{className:"flex flex-row gap-2 items-center",onClick:r,children:[e.jsx("img",{src:t,width:28,height:28,alt:s,className:`flex-shrink-0 min-w-[28px] min-h-[28px] ${n?"group-hover:hidden":""}`}),!n&&e.jsx("p",{className:"text-xl font-medium text-gray-100 whitespace-nowrap",children:s})]}),n&&i&&e.jsx("button",{onClick:i,className:"hidden group-hover:flex items-center justify-center text-gray-80 absolute left-0",children:e.jsx(C.SidebarSimpleIcon,{size:28})})]}),e.jsxs("div",{className:`flex z-20 flex-row gap-2 items-center transition-opacity duration-100 ${n?"opacity-0 invisible":"opacity-100"}`,children:[l&&e.jsx(ye,{suiteArray:l?.suiteArray,soonText:l?.soonText,className:`text-gray-80 ${l?.className}`,align:"left"}),i&&e.jsx("button",{onClick:i,className:"flex items-center justify-center text-gray-80 hover:text-gray-90",children:e.jsx(C.SidebarSimpleIcon,{size:28})})]})]}),pe=({usage:t,limit:s,percentage:r,onUpgradeClick:n,upgradeLabel:a,isLoading:i=!1,barClassName:l="bg-gray-60",containerClassName:o,advertisement:c})=>e.jsxs("div",{className:`flex flex-col w-full gap-2.5 p-3${o?` ${o}`:""}`,children:[c,e.jsxs("div",{className:"flex flex-row w-full justify-between",children:[e.jsx("div",{className:"flex flex-row items-center gap-2",children:i?e.jsx(le,{}):e.jsxs(e.Fragment,{children:[e.jsx("p",{className:"text-gray-60 text-sm font-semibold",children:t}),e.jsx("p",{className:"text-gray-60 text-sm",children:"/"}),e.jsx("p",{className:"text-gray-60 text-sm",children:s})]})}),a&&e.jsx("button",{className:"text-primary text-sm hover:text-primary-dark font-semibold",onClick:n,children:a})]}),e.jsx("div",{className:"flex w-full h-1.5 bg-gray-10 rounded-full",children:e.jsx("div",{className:`${l} rounded-full`,style:{width:`${r}%`}})})]}),rt=({header:t,primaryAction:s,suiteLauncher:r,collapsedPrimaryAction:n,options:a,showSubsections:i,isCollapsed:l=!1,storage:o,notification:c,onToggleCollapse:m})=>{const[g,x]=d.useState(!l),h=d.useRef(null);return d.useEffect(()=>(h.current&&clearTimeout(h.current),l?x(!1):h.current=setTimeout(()=>x(!0),300),()=>{h.current&&clearTimeout(h.current)}),[l]),e.jsxs("div",{className:`relative flex flex-col p-2 h-full justify-between bg-gray-1 border-r border-gray-10 transition-all duration-300 group ${l?"w-[60px]":"w-64"}`,children:[e.jsxs("div",{className:"flex flex-col",children:[e.jsx(be,{logo:t.logo,title:t.title,onClick:t.onClick,isCollapsed:l,onToggleCollapse:m,suiteLauncher:r,className:t.className}),e.jsxs("div",{className:"flex flex-col gap-4 overflow-hidden",children:[e.jsxs("div",{className:"relative",children:[!l&&e.jsx("div",{className:"transition-opacity duration-300 opacity-100",children:s}),l&&e.jsx("div",{className:"transition-opacity duration-300 opacity-100",children:n})]}),e.jsx(he,{options:a,isCollapsed:l,showSubsections:i})]})]}),(c||o)&&g&&e.jsxs("div",{className:"flex flex-col",children:[c&&e.jsx("div",{className:"px-2 pb-2",children:e.jsxs("div",{className:"flex gap-1.5 items-start p-3 rounded-lg bg-yellow/10 border border-yellow/20",children:[e.jsx(C.WarningIcon,{className:"size-5 shrink-0 text-yellow-dark",weight:"fill"}),e.jsxs("div",{className:"flex flex-col gap-0.5 min-w-0",children:[e.jsx("p",{className:"text-xs leading-tight text-gray-100",children:c.message}),e.jsx("button",{type:"button",onClick:c.onAction,className:"self-start text-xs font-medium text-primary hover:underline",children:c.actionLabel})]})]})}),o&&e.jsx(pe,{usage:o.usage,limit:o.limit,percentage:o.percentage,onUpgradeClick:o.onUpgradeClick,upgradeLabel:o.upgradeLabel,isLoading:o.isLoading,barClassName:o.barClassName,containerClassName:o.containerClassName,advertisement:o.advertisement})]})]})},nt=({isOpen:t,title:s,subTitle:r,dialogRounded:n,children:a,onClose:i,classes:l,panelClasses:o,titleClasses:c,closeClass:m,weightIcon:g,bgColor:x,dataTest:h,hideCloseButton:p})=>e.jsx("div",{"data-test":h,className:`${t?"flex":"hidden"} ${l||""} absolute bottom-0 left-0 right-0 top-0 z-50 bg-black/40`,children:e.jsxs("div",{className:`${o||""} absolute left-1/2 top-1/2 flex w-104 -translate-x-1/2
|
|
37
|
+
-translate-y-1/2 flex-col overflow-hidden ${n?"rounded-2xl":"rounded-lg pt-8"} text-gray-100 ${x||"bg-surface"}`,children:[e.jsxs("div",{className:`${r?"justify-between bg-gray-1":""} p-5 flex flex-row items-start`,children:[s?e.jsxs("div",{className:"relative flex max-w-full flex-1 flex-col truncate",children:[e.jsx("span",{className:`${c||""} truncate text-xl`,title:s,children:s}),e.jsx("span",{className:"max-w-fit flex-1 truncate text-base font-normal text-gray-50",children:r})]}):null,p?null:e.jsx("div",{className:`relative ml-auto cursor-pointer bg-surface
|
|
38
|
+
transition duration-200 ease-in-out ${m||"text-primary hover:text-primary-dark"} `,children:e.jsx(C.X,{role:"button",onClick:i,size:28,weight:g})})]}),a]})}),at=({isOpen:t,onClose:s,onPrimaryAction:r,onSecondaryAction:n,title:a,subtitle:i,primaryAction:l,secondaryAction:o,primaryActionColor:c,isLoading:m,maxWidth:g="sm"})=>{const[x,h]=d.useState(t),[p,b]=d.useState("opacity-0"),[v,u]=d.useState("scale-95");return d.useEffect(()=>{if(t){const f=setTimeout(()=>{b("opacity-100"),u("scale-100")},10);return h(!0),()=>clearTimeout(f)}else{b("opacity-0"),u("scale-95");const f=setTimeout(()=>{h(!1)},150);return()=>clearTimeout(f)}},[t]),d.useEffect(()=>{const f=j=>{j.key==="Escape"&&s()};return t&&window.addEventListener("keydown",f),()=>{window.removeEventListener("keydown",f)}},[t,s]),e.jsx(e.Fragment,{children:x&&e.jsxs("div",{className:`fixed inset-0 z-50 ${t?"":"pointer-events-none"}`,children:[e.jsx("div",{className:`absolute inset-0 bg-gray-100/50 transition-opacity duration-150 dark:bg-black/75 ${p}`,onClick:s,"data-testid":"dialog-overlay"}),e.jsxs("div",{className:`absolute left-1/2 top-1/2 w-full max-w-${g} -translate-x-1/2 -translate-y-1/2 transform rounded-2xl bg-surface p-5 transition-all duration-150 dark:bg-gray-1 ${v} ${p}`,children:[e.jsxs("div",{className:"flex flex-col space-y-2",children:[e.jsx("p",{className:"text-2xl font-medium text-gray-100",children:a}),e.jsx("p",{className:"text-gray-60",children:i})]}),e.jsxs("div",{className:"mt-5 flex justify-end space-x-2",children:[e.jsx(G,{variant:"secondary",onClick:n,disabled:m,children:o}),e.jsx(G,{onClick:r,loading:m,variant:c==="primary"?"primary":"destructive",children:l})]})]})]})})},lt=({isOpen:t,onClose:s,children:r,maxWidth:n,className:a,width:i,preventClosing:l=!1,stopMouseDownPropagation:o=!1})=>{const c=d.useRef(null),[m,g]=d.useState(t),[x,h]=d.useState("opacity-0"),[p,b]=d.useState("scale-95"),v=()=>{const f=document.querySelectorAll("[data-modal]"),j=f[f.length-1];c.current===j&&s()},u=f=>{o&&f.stopPropagation()};return d.useEffect(()=>{if(t){const f=setTimeout(()=>{h("opacity-100"),b("scale-100")},10);return g(!0),()=>clearTimeout(f)}else{h("opacity-0"),b("scale-95");const f=setTimeout(()=>{g(!1)},150);return()=>clearTimeout(f)}},[t]),d.useEffect(()=>{const f=j=>{c.current&&!c.current.contains(j.target)&&!l&&(j.preventDefault(),v())};return t&&document.addEventListener("mousedown",f),()=>{document.removeEventListener("mousedown",f)}},[t,s,l]),d.useEffect(()=>{const f=j=>{j.key==="Escape"&&!l&&(j.preventDefault(),v())};return t&&window.addEventListener("keydown",f),()=>{window.removeEventListener("keydown",f)}},[t,s,l]),e.jsx(e.Fragment,{children:m&&e.jsxs("div",{className:"m-0",onMouseDown:u,role:"dialog","aria-modal":"true",children:[e.jsx("div",{className:`
|
|
39
39
|
fixed
|
|
40
40
|
min-h-full
|
|
41
41
|
inset-0
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
${x}
|
|
62
62
|
${p}
|
|
63
63
|
`,children:e.jsx("section",{"data-testid":"ModalContent",ref:c,"data-modal":!0,className:`
|
|
64
|
-
${
|
|
64
|
+
${i??"w-full"}
|
|
65
65
|
${n??"max-w-lg"}
|
|
66
66
|
${a??"p-5"}
|
|
67
67
|
text-gray-100
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
ease-out
|
|
75
75
|
${x}
|
|
76
76
|
${p}
|
|
77
|
-
`,children:
|
|
77
|
+
`,children:r})})]})})},it=({isOpen:t,onClose:s,children:r,className:n,disableBackdrop:a=!1})=>{const i=d.useRef(null),[l,o]=d.useState(t),[c,m]=d.useState("opacity-0"),[g,x]=d.useState("scale-95");return d.useEffect(()=>{if(t){o(!0);const h=setTimeout(()=>{m("opacity-100"),x("scale-100")},10);return()=>clearTimeout(h)}else{m("opacity-0"),x("scale-95");const h=setTimeout(()=>{o(!1)},150);return()=>clearTimeout(h)}},[t]),d.useEffect(()=>{const h=p=>{i.current&&!i.current.contains(p.target)&&s()};return t&&!a&&document.addEventListener("mousedown",h),()=>{document.removeEventListener("mousedown",h)}},[t,s,a]),l?e.jsxs("div",{className:`
|
|
78
78
|
fixed
|
|
79
79
|
inset-0
|
|
80
80
|
z-50
|
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
transition-opacity
|
|
91
91
|
duration-200
|
|
92
92
|
${c}
|
|
93
|
-
`}),e.jsx("div",{ref:
|
|
93
|
+
`}),e.jsx("div",{ref:i,className:`
|
|
94
94
|
relative
|
|
95
95
|
flex
|
|
96
96
|
bg-black/15
|
|
@@ -105,5 +105,5 @@
|
|
|
105
105
|
${c}
|
|
106
106
|
${g}
|
|
107
107
|
${n}
|
|
108
|
-
`,children:
|
|
108
|
+
`,children:r})]}):null},ee=()=>e.jsx("div",{className:"flex flex-col text-left gap-2 w-full py-3 px-5 border-b border-gray-5",children:e.jsxs("div",{className:"flex flex-row w-full gap-2",children:[e.jsx("div",{className:"flex flex-col h-7 w-8 rounded-full animate-pulse bg-gray-10"}),e.jsxs("div",{className:"flex flex-col gap-1 w-full",children:[e.jsxs("div",{className:"flex flex-row w-full justify-between",children:[e.jsx("div",{className:"flex rounded-md w-1/3 h-3 bg-gray-10 animate-pulse"}),e.jsx("div",{className:"flex rounded-md w-1/4 h-3 bg-gray-10 animate-pulse"})]}),e.jsx("div",{className:"flex rounded-md w-1/2 h-3 bg-gray-10 animate-pulse"}),e.jsx("div",{className:"flex rounded-md w-full h-3 bg-gray-10 animate-pulse"})]})]})}),we=({email:t,active:s,selected:r,onClick:n})=>{const a=s||r;return e.jsx("button",{onClick:()=>n(t.id,t.read),className:`flex flex-col border-b border-gray-10 text-left gap-2 w-full py-3 px-5 ${a?"bg-primary/10":""}`,children:e.jsxs("div",{className:"flex flex-row w-full gap-2",children:[e.jsx(te,{fullName:t.from.name,src:t.from.avatar,size:"xxs"}),e.jsxs("div",{className:"flex flex-col w-full",children:[e.jsxs("div",{className:`flex flex-row w-full justify-between ${a?"text-primary":""}`,children:[e.jsxs("div",{className:"flex flex-row gap-1 w-full max-w-[150px] items-center",children:[!t.read&&e.jsx("div",{className:"h-2 w-2 rounded-full bg-primary"}),e.jsx("p",{className:"font-semibold truncate",children:t.from.name})]}),e.jsx("div",{children:e.jsx("p",{className:`text-sm font-medium ${a?"text-primary":"text-gray-50"}`,children:t.createdAt})})]}),e.jsx("p",{className:`text-sm font-semibold ${a?"text-primary":""}`,children:t.subject}),e.jsx("p",{className:`text-sm ${a?"text-primary/80":"text-gray-50"}`,children:t.body})]})]})})},ot=({mails:t,selectedEmails:s=[],loading:r,checked:n,activeEmail:a,hasMoreItems:i=!1,emptyState:l,onMailSelected:o=()=>{},onLoadMore:c=()=>{}})=>{const m=e.jsx("div",{className:"flex flex-col",children:new Array(3).fill(0).map((g,x)=>e.jsx(ee,{},x))});return e.jsx("div",{className:"flex flex-col w-[400px] min-w-[200px] max-w-[400px] h-full",children:e.jsx("div",{id:"tray-scroll-container",className:"overflow-y-auto w-full h-full min-h-0",children:r?e.jsx(e.Fragment,{children:new Array(8).fill(0).map((g,x)=>e.jsx("div",{className:"flex flex-col gap-2",children:e.jsx(ee,{})},x))}):e.jsx(e.Fragment,{children:t.length===0?e.jsx(e.Fragment,{children:l}):e.jsx(ae,{handleNextPage:c,hasMoreItems:i,loader:m,scrollableTarget:"tray-scroll-container",children:t.map(g=>e.jsx("div",{className:"flex items-center w-full flex-col",children:e.jsx(we,{email:g,active:a===g.id,selected:n||s.includes(g.id),onClick:o})},g.id))})})})})},ct=({fullName:t,email:s,avatar:r})=>e.jsx("div",{className:"flex flex-row gap-2 border max-w-64 bg-surface w-full border-gray-10 shadow-subtle rounded-lg",children:e.jsxs("div",{className:"flex flex-row w-full gap-2 p-4",children:[e.jsx(te,{src:r,fullName:t,diameter:40}),e.jsxs("div",{className:"flex flex-col min-w-0",children:[e.jsx("p",{className:"font-medium text-gray-100 truncate",children:t}),e.jsx("p",{className:"text-sm text-gray-50 truncate",children:s})]})]})});exports.Avatar=te;exports.BaseDialog=nt;exports.Breadcrumbs=st;exports.Button=G;exports.Card=Ee;exports.Checkbox=ne;exports.CircleButton=Ve;exports.ContextMenu=ce;exports.Copyable=Xe;exports.Dialog=at;exports.Dropdown=fe;exports.Empty=_e;exports.Grid=et;exports.Header=Qe;exports.InfiniteScroll=ae;exports.Input=qe;exports.List=Be;exports.Loader=ue;exports.Menu=re;exports.MessageCheap=we;exports.MessageCheapSkeleton=ee;exports.Modal=lt;exports.Popover=ge;exports.RadioButton=Ge;exports.RangeSlider=Ye;exports.Sidenav=rt;exports.SidenavHeader=be;exports.SidenavItem=me;exports.SidenavOptions=he;exports.SidenavStorage=pe;exports.Skeleton=le;exports.SkeletonItem=Y;exports.SkeletonLoader=de;exports.SuiteLauncher=ye;exports.SwitchComponent=Je;exports.Table=Oe;exports.TableBody=Ae;exports.TableCell=Fe;exports.TableHeader=Ke;exports.TableRow=We;exports.TextArea=Ze;exports.Tooltip=xe;exports.TransparentModal=it;exports.Tray=ot;exports.UsageWarningBanner=Ue;exports.UserCheap=ct;
|
|
109
109
|
//# sourceMappingURL=index.cjs.js.map
|