npm - @maxio-com/react-ui-components - Versions diffs - 1.11.0 → 1.11.2 - Mend

@maxio-com/react-ui-components 1.11.0 → 1.11.2

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.

Files changed (4) hide show

package/dist/index.esm.js CHANGED Viewed

	@@ -1 +1 @@
1	- import e,{createContext as t,useState as a,useContext as n,useRef as i,useEffect as r,useId as o,useCallback as l,useMemo as s,forwardRef as c,Children as m,isValidElement as d,cloneElement as u}from"react";import p from"classnames";import{AnimatePresence as v,motion as h}from"framer-motion";import{useClick as g,useHover as x,useFocus as E,useDismiss as _,useFloating as b,offset as f,useInteractions as N,useRole as w,FloatingPortal as y}from"@floating-ui/react-dom-interactions";import{useId as k}from"react-aria";const C=({variant:t,white:a,className:n})=>e.createElement("i",{className:p("maxio-icon",`maxio-icon-${t}`,a&&"maxio-icon--white",n)}),I=({items:t,isShadowed:a=!0})=>{const n=p("maxio-action-list",{"maxio-action-list--shadow":a});return 0===t.length?null:e.createElement("ul",{className:n},t.map((t=>{if("divider"===t.type)return e.createElement("li",{key:`list-item-divider-${t.id}`,className:"maxio-action-list__divider",role:"separator","aria-hidden":"true"});const{id:a,leadingIconName:n,trailingIconName:i,label:r,description:o,link:l}=t;return e.createElement("li",{className:"maxio-action-list__item",key:`list-item-${a\|\|r}`},e.createElement("a",{...l,className:"maxio-action-list__content"},n&&e.createElement(C,{variant:n,className:"maxio-action-list__leading-icon"}),e.createElement("span",{className:"maxio-action-list__label"},r),o&&e.createElement("span",{className:"maxio-action-list__description"},o),i&&e.createElement(C,{variant:i,className:"maxio-action-list__trailing-icon"})))})))},O=({className:t,src:a,alt:n="avatar"})=>e.createElement("img",{className:p("maxio-avatar",t),alt:n,src:a}),T=t({}),$=({children:t})=>{const[n,i]=a(!1);return e.createElement(T.Provider,{value:{isOpen:n,onClose:()=>i(!1),onOpen:()=>i(!0),onToggle:()=>i((e=>!e))}},t)};const S=({children:t})=>{const{isOpen:a,onToggle:i,onClose:r}=function(){const e=n(T);if(!e\|\|"object"==typeof e&&0===Object.keys(e).length)throw new Error("useMenu hook must be used within a MenuProvider");return e}();return e.createElement("details",{open:a,onToggle:i,className:"maxio-action-menu"},"function"==typeof t?t({isOpen:a,onClose:r}):t)},P=({children:t})=>e.createElement($,null,e.createElement(S,null,t)),D=({items:t,alignItemsEnd:a=!1})=>{const n=p("maxio-action-menu__content",{"maxio-action-menu__content--align-end":a});return e.createElement("div",{className:n},e.createElement(I,{items:t}))},W=({children:t,iconName:a="chevron-down"})=>{const n=p({"maxio-action-menu__chevron":"chevron-down"===a});return e.createElement("summary",{className:"maxio-header-button","aria-haspopup":"true"},e.createElement("div",{className:"maxio-header-button__content"},t&&e.createElement("span",null,t),a&&e.createElement(C,{variant:a,className:n})))},F=({icon:t,variant:a="default"})=>e.createElement("i",{className:p("maxio-brand-logo",`maxio-brand-logo-${t}`,{[`maxio-brand-logo--${a}`]:"default"!==a})}),H={click:g,hover:x,focus:E,dismiss:_},z=(e,t)=>t.map((t=>H[t](e))),M=({placement:e="top",isActive:t=!1,interactions:a=["hover"],floatingElementOffset:n=0,onOverlayUpdate:o,autoHideMs:l})=>{const s=i(null),{strategy:c,x:m,y:d,context:u,floating:p,reference:v}=b({placement:e,open:t,onOpenChange:e=>o(e),middleware:[f(n)]}),{getReferenceProps:h,getFloatingProps:g}=N([...z(u,a),w(u,{role:"tooltip"})]);r((()=>{s.current&&clearTimeout(s.current),t&&l&&(s.current=setTimeout((()=>o(!1)),l))}),[t,l]);return{isActive:t,refs:{floating:p,reference:v},floatingElementCSSPosition:{position:c,top:null!=d?d:0,left:null!=m?m:0},getReferenceProps:h,getFloatingProps:g}};function V(e,t=0){const n=i((new Date).getTime()),o=i((new Date).getTime()),[l,s]=a(!1);return r((()=>{const a=()=>{n.current=(new Date).getTime(),s(!0)},i=()=>{o.current=(new Date).getTime(),setTimeout((()=>{n.current-o.current<=0&&s(!1)}),t)},r=e&&e.current;return r&&(r.addEventListener("mouseenter",a),r.addEventListener("mouseleave",i)),()=>{r&&(r.removeEventListener("mouseenter",a),r.removeEventListener("mouseleave",i))}}),[e]),l}function A(e=500){const[t,n]=a((()=>{const{innerWidth:e,innerHeight:t}=window;return{windowWitdh:e,windowHeight:t}})),o=i(null);return r((()=>{const t=()=>{const{innerWidth:t,innerHeight:a}=window;clearTimeout(o.current),o.current=setTimeout((()=>{n({windowWitdh:t,windowHeight:a})}),e)};return window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t)}}),[e]),t}const L=({children:t,usePortal:a=!1,isActive:n=!1,placement:i="top",interactions:r=["hover"],role:o="tooltip",renderOverlay:l,floatingElementOffset:s,motionSettings:c={},autoHideMs:m,onOverlayUpdate:d,className:u})=>{const{getReferenceProps:g,getFloatingProps:x,refs:{floating:E,reference:_},floatingElementCSSPosition:b}=M({role:o,isActive:n,onOverlayUpdate:d,autoHideMs:m,floatingElementOffset:s,interactions:r,placement:i}),f=e.createElement(v,null,n&&e.createElement(h.div,{ref:E,style:b,...c,...x()},l()));return e.createElement(e.Fragment,null,e.createElement("div",{ref:_,className:p("maxio-inline-flex",u),...g(),"data-testid":"overlay-trigger"},t),a?e.createElement(y,{id:"maxio-ui-portal"},f):f)},U=({children:t,loading:a=!1,fullWidth:n=!1,className:i,variant:r="primary",size:o="lg",disabled:l,icon:s,...c})=>{const m=p("maxio-button",i,{[`maxio-button--${o}`]:o,[`maxio-button--${r}`]:r,"maxio-button--loading":a,"maxio-button--full-width":n}),d=p("maxio-button__loader",{"maxio-button__loader--white":["primary","secondary","danger"].includes(r)});return e.createElement("button",{disabled:l,...c,className:m},t,!a&&s,a&&e.createElement("div",{className:d}))},B=({icon:t,...a})=>e.createElement(U,{icon:t,className:"maxio-button--icon",...a},null),R=({defaultChecked:t,checked:a,onChange:n,disabled:i,valueDescription:r,valueDescriptionPosition:s,className:c,name:m,id:d})=>{const u=o(),v="boolean"==typeof t,h=d\|\|u,g="left"===s?"row":"row-reverse",x=r&&s,E=l((e=>{if("Enter"===e.code\|\|"Space"===e.code){e.preventDefault();const t=e.currentTarget.checked;v&&(e.currentTarget.checked=!t),n&&n(!t,e)}}),[v,n]);return e.createElement("div",{className:p("maxio-toggle",c,{"maxio-toggle--disabled":i}),style:{display:"inline-flex",flexDirection:g},"data-testid":"toggle-container"},x?e.createElement("label",{className:"maxio-toggle__label",htmlFor:h},r):null,e.createElement("div",{className:"maxio-toggle__container"},e.createElement("input",{type:"checkbox",defaultChecked:t,checked:a,onChange:e=>{n&&n(e.target.checked,e)},onKeyDown:E,disabled:i,"aria-label":x?void 0:r,className:"maxio-toggle__checkbox",id:h,name:m}),e.createElement("div",{className:"maxio-toggle__track",role:"switch","aria-checked":a},e.createElement("div",{className:"maxio-toggle__handle"}),e.createElement("span",{className:"maxio-toggle__icon"},e.createElement("i",{className:"maxio-toggle__icon-on"})),e.createElement("span",{className:"maxio-toggle__icon"},e.createElement("i",{className:"maxio-toggle__icon-off"})))))},Y=({children:t,arrowPosition:a,size:n="regular",maxWidth:i=160})=>e.createElement("div",{"data-testid":"tooltip",className:p("maxio-tooltip",`maxio-tooltip--${n}`,{[`maxio-tooltip--arrow-${a}`]:a})},e.createElement("div",{className:"maxio-tooltip__content",style:{maxWidth:i}},t)),j={top:"bottom",right:"left",bottom:"top",left:"right","top-start":"bottom-left","top-end":"bottom-right","right-start":"left-top","right-end":"left-bottom","bottom-start":"top-left","bottom-end":"top-right","left-start":"right-top","left-end":"right-bottom"},K=({children:t,interactions:n=["hover"],placement:i="right",maxWidth:r=160,size:o="regular",renderContent:c,autoHideMs:m,isVisible:d,usePortal:u,className:p,onVisibilityUpdate:v,floatingElementOffset:h=5})=>{const[g,x]=a(!1),E=void 0!==d,_=l((e=>{E\|\|x(e),v&&v(e)}),[d]),b=s((()=>(e=>{const t=e.startsWith("top")\|\|e.startsWith("bottom")?"Y":"X",a=`translate${t}(${e.startsWith("bottom")\|\|e.startsWith("right")?"-":""}10px)`;return{initial:{opacity:0,visibility:"hidden",transform:a},animate:{opacity:1,visibility:"visible",transform:`translate${t}(0px)`},exit:{opacity:0,visibility:"hidden",transform:a},transition:{ease:[.4,0,.5,1],duration:.2}}})(i)),[i]);return e.createElement(L,{role:"tooltip",className:p,floatingElementOffset:h,motionSettings:b,isActive:E?d:g,onOverlayUpdate:_,autoHideMs:m,usePortal:u,placement:i,interactions:n,renderOverlay:()=>e.createElement(Y,{size:o,arrowPosition:j[i],maxWidth:r},c())},t)},X=({children:t,as:a,iconName:n,noPadding:i,className:r,...o})=>{const l=a\|\|"button",s=p("maxio-header-button",r,{"maxio-header-button--no-padding":i});return e.createElement(l,{className:s,...o},e.createElement("div",{className:"maxio-header-button__content"},t\|\|null,n&&e.createElement(C,{variant:n})))},q=({items:t})=>e.createElement("ul",{className:"maxio-header-nav"},t.map((({label:t,id:a,isActive:n,...i})=>e.createElement("li",{className:"maxio-header-nav__item",key:`header-nav-list-item-${a}`},e.createElement("a",{className:p("maxio-header-nav__link",{"maxio-header-nav__link--active":n}),...i},t))))),G=c((({className:t,...a},n)=>e.createElement("div",{className:p("maxio-header-search-field",t)},e.createElement("div",{className:"maxio-header-search-field__button"},e.createElement(C,{variant:"search"})),e.createElement("input",{ref:n,className:"maxio-header-search-field__input",type:"search",placeholder:"Search",name:"search",...a}))));G.displayName="SearchField";const J=c((({options:t,...a},n)=>e.createElement("div",{className:"maxio-header-search-menu",role:"button"},e.createElement("select",{name:"entity",className:"maxio-header-search-menu__select","aria-label":"Select entity",ref:n,...a},t.map((({label:t,value:a})=>e.createElement("option",{key:`${t}-${a}`,value:a},t)))),e.createElement("div",{className:"maxio-header-search-menu__icon"},e.createElement(C,{variant:"chevron-down"})))));J.displayName="SearchMenu";const Q=({options:t,onSubmit:a})=>{const n=i(null),r=i(null);return e.createElement("form",{className:"maxio-header-search-input",onSubmit:function(e){var t,i;e.preventDefault(),a({searchField:(null===(t=n.current)\|\|void 0===t?void 0:t.value)\|\|"",selectField:(null===(i=r.current)\|\|void 0===i?void 0:i.value)\|\|""})}},e.createElement(J,{ref:r,options:t}),e.createElement(G,{ref:n}),e.createElement(X,{type:"submit","aria-label":"Submit search",iconName:"arrow-right"}))},Z=({leadingIcon:t,trailingIcon:a,type:n="menu",children:i,leadingIconClassName:r,isTooltipVisible:o=!1})=>e.createElement(e.Fragment,null,e.createElement(K,{usePortal:!1,isVisible:o,renderContent:()=>i,floatingElementOffset:12},t&&e.createElement("span",{className:"maxio-side-nav__icon"},e.createElement(C,{variant:t,className:r}))),e.createElement("span",{className:`maxio-side-nav__${n}-title`,"data-testid":"maxio-sidebar-section-name"},i),a&&e.createElement("span",{className:"maxio-side-nav__menu-chevron"},e.createElement(C,{variant:a}))),ee=t({}),te=()=>n(ee),ae=({children:t,withIcons:n=!0,sections:i,shouldToggleSidebar:o=!0,topDropdownItems:l,collapseBreakpoint:s=800})=>{const[c,m]=a((()=>!o\|\|("undefined"==typeof window\|\|window.innerWidth>s))),[d,u]=a(i),p=()=>m(!0),v=()=>m(!1),{windowWitdh:h}=A();r((()=>{!function(e){if(!o)return;e<s&&c&&g();e>s&&!c&&x()}(h)}),[h]),r((()=>{c?x():g()}),[]);return e.createElement(ee.Provider,{value:{sections:d,topDropdownItems:l,onSectionOpen:e=>{const t=E();u((a=>a.map((a=>{var n;const i=a.name===e&&!a.isOpen;return t&&(null===(n=a.items)\|\|void 0===n?void 0:n.includes(t))?{...a,isOpen:i,isCurrent:!i}:{...a,isOpen:i}}))))},isOpen:c,onOpen:p,onClose:v,onToggle:()=>m((e=>!e)),withIcons:n}},t);function g(){const e=E();e&&(u((t=>t.map((t=>{var a;return{...t,isOpen:!1,isCurrent:(null===(a=t.items)\|\|void 0===a?void 0:a.includes(e))\|\|!1}})))),v())}function x(){const e=E();e&&(u((t=>t.map((t=>{var a;return{...t,isOpen:(null===(a=t.items)\|\|void 0===a?void 0:a.includes(e))\|\|!1,isCurrent:!1}})))),p())}function E(){return d.map((e=>e.items)).flat().filter((e=>null!=e)).find((e=>e.isCurrent))}},ne=()=>{const{onOpen:t,topDropdownItems:a,isOpen:n}=te(),{mainItem:r,otherItems:o,actions:l}=a,c=i(null),m=V(c),d=e=>({label:e.title,leadingIconName:e.icon,link:{href:e.url}}),u=s((()=>[...o.map(d),o.length>0&&{type:"divider",id:"item-divider"},...l.map(d)].filter((e=>null!=e))),[l,o]),p=o.length+l.length;return e.createElement(e.Fragment,null,0===p?e.createElement("a",{className:"maxio-side-nav__menu-button maxio-side-nav__menu-button--large",href:r.url,onClick:t},e.createElement("span",{className:"maxio-side-nav__menu-title"},r.title)):e.createElement("details",{className:"maxio-action-menu maxio-side-nav--action-menu"},e.createElement("summary",{onClick:t,className:"maxio-side-nav__menu-button maxio-side-nav__menu-button--large","aria-haspopup":"true",ref:c},r.url?e.createElement(e.Fragment,null,e.createElement(Z,{type:"menu",isTooltipVisible:!n&&m,leadingIcon:r.icon,trailingIcon:"chevron-down",leadingIconClassName:"maxio-icon-circle-fill maxio-icon--success"},r.title)):e.createElement(Z,{type:"menu",trailingIcon:"chevron-down"},r.title)),e.createElement(I,{items:u})))},ie=({section:t})=>{const{isOpen:a}=te(),n=i(null),r=V(n);return e.createElement("li",{className:"maxio-side-nav__item","data-key":t.key,"data-testid":"maxio-sidebar-section"},e.createElement("a",{className:"maxio-side-nav__link","aria-current":t.isCurrent?"page":void 0,role:"button",href:t.href,ref:n},e.createElement(Z,{isTooltipVisible:r&&!a,type:"menu",leadingIcon:t.icon},t.name)))},re=({section:t})=>{var a;const{onOpen:n,onSectionOpen:r,isOpen:o,withIcons:l}=te();const s=i(null),c=V(s);return t.Component?e.createElement(t.Component,{section:t}):t.href?e.createElement(ie,{section:t}):e.createElement("li",{className:p("maxio-side-nav__item",{"maxio-side-nav__item--active":t.isCurrent,"maxio-side-nav__item--icon":l}),"data-testid":"maxio-sidebar-section"},e.createElement("button",{className:"maxio-side-nav__menu-button",ref:s,"aria-expanded":t.isOpen,"aria-current":t.isCurrent?"page":void 0,type:"button",onClick:function(){r(t.name),n()}},e.createElement(Z,{type:"menu",isTooltipVisible:!o&&c,leadingIcon:t.icon,trailingIcon:(null===(a=t.items)\|\|void 0===a?void 0:a.length)?"chevron-down":void 0},t.name)),t.isOpen&&e.createElement("ul",{className:"maxio-side-nav__menu"},t.items.map((t=>e.createElement("li",{key:`section-sub-item-${t.name}`,className:"maxio-side-nav__item","data-testid":"maxio-section-item"},e.createElement("a",{className:"maxio-side-nav__link",href:t.href,"aria-current":t.isCurrent?"page":void 0},e.createElement("span",{className:"maxio-side-nav__link-title"},t.name)))))))},oe=()=>{const{sections:t}=te();return e.createElement("ul",{className:"maxio-side-nav__items"},t.map((t=>e.createElement(re,{key:`section-${t.name}`,section:t}))))},le=()=>{const{isOpen:t}=te();return e.createElement("nav",{className:p("maxio-side-nav",{"maxio-side-nav--collapsed":!t})},e.createElement(ne,null),e.createElement("hr",{className:"maxio-side-nav__divider"}),e.createElement(oe,null))},se=({withIcons:t,shouldToggleSidebar:a,topDropdownItems:n,sections:i,collapseBreakpoint:r=800})=>e.createElement(ae,{collapseBreakpoint:r,withIcons:t,shouldToggleSidebar:a,topDropdownItems:n,sections:i},e.createElement(le,null)),ce=({label:t,helperText:a,size:n="md",variant:i="default",status:r,value:o,maxValue:l=100})=>{const s=k(),c=k(),m=r&&!!t&&!!o&&!("inline"===i),d=a&&!("inline"===i),u=a&&"inline"===i,v=p("maxio-progress-bar",{"maxio-progress-bar--lg":"lg"===n,"maxio-progress-bar--success":o&&!("inline"===i)&&"success"===r,"maxio-progress-bar--error":o&&!("inline"===i)&&"error"===r,"maxio-progress-bar--indent":"indent"===i,"maxio-progress-bar--inline":"inline"===i,"maxio-progress-bar--indeterminate":!o});return e.createElement("div",{className:v},t&&e.createElement("div",{id:s,className:"maxio-progress-bar__label"},t),u&&e.createElement("div",{id:c,className:"maxio-progress-bar__helper-text"},a),e.createElement("div",{className:"maxio-progress-bar__track",role:"progressbar","aria-labelledby":s,"aria-describedby":c,"aria-valuenow":o,"aria-valuemin":0,"aria-valuemax":l,"aria-busy":!r,"aria-invalid":"error"===r},e.createElement("div",{className:"maxio-progress-bar__progress",style:{"--tw-scale-x":`${o}%`}})),m&&e.createElement("div",{className:`maxio-progress-bar__${r}-icon`}),d&&e.createElement("div",{id:c,className:"maxio-progress-bar__helper-text"},a))},me=({as:t="div",children:a,compact:n=!1,size:i="md",className:r,...o})=>{const l=t,s=p({[`maxio-body-${i}`]:!n,[`maxio-body-${i}-compact`]:n},r);return e.createElement(l,{className:s,...o},a)},de={sm:"h3",md:"h2",lg:"h1"},ue=({children:t,size:a="sm",className:n,...i})=>{const r=de[a],o=p(`maxio-heading-${a}`,n);return e.createElement(r,{className:o,...i},t)},pe=({as:t="div",children:a,size:n="md",className:i,...r})=>{const o=t,l=p(`maxio-display-${n}`,i);return e.createElement(o,{className:l,...r},a)},ve=({as:t="div",children:a,className:n,...i})=>{const r=t,o=p("maxio-code",n);return e.createElement(r,{className:o,...i},a)},he=({as:t="div",children:a,size:n="sm",className:i,...r})=>{const o=t,l=p(`maxio-label-${n}`,i);return e.createElement(o,{className:l,...r},a)},ge=t({}),xe=()=>n(ge),Ee=({children:t,variant:n,withDivider:i,defaultIndex:o=0,onChange:l,index:s})=>{const[c,m]=a((()=>void 0!==s?s:o));r((()=>{void 0===s&&m(o),"number"==typeof s&&m(s)}),[o,s]);return e.createElement(ge.Provider,{value:{currentIndex:c,variant:n,withDivider:i,onChange:e=>{void 0===s&&m(e),"function"==typeof l&&l(e)}}},t)},_e=({disabled:t=!1,value:a=0,...n})=>{const{onChange:i,currentIndex:r}=xe(),o=p("maxio-tabs__tab",{"maxio-tabs__tab--active":r===a,"maxio-tabs__tab--disabled":t,"maxio-tabs__tab--icon":"icon"===n.type}),l=()=>{i(a)};if("icon"===n.type){const{icon:t}=n;return e.createElement("div",{className:o,onClick:l},e.createElement("div",{className:"maxio-tabs__tab__content"},t))}const{children:s,rightIcon:c}=n;return e.createElement("div",{className:o,onClick:l},e.createElement("div",{className:"maxio-tabs__tab__content"},s,c\|\|null))},be=({children:t,variant:a="line",withDivider:n=!1,defaultIndex:i=0,index:r,onChange:o})=>e.createElement(Ee,{defaultIndex:i,variant:a,withDivider:n,index:r,onChange:o},t),fe=({children:t})=>e.createElement(e.Fragment,null,t),Ne=({children:t})=>{const{currentIndex:a}=xe();return e.createElement(e.Fragment,null,m.map(t,((e,t)=>{if(d(e)&&e.type===fe)return t===a?u(e,{}):null;throw new Error("You can only pass <TabPanel /> component as children")})))},we=({children:t})=>{const{variant:a,withDivider:n}=xe(),i=p("maxio-tabs",{"maxio-tabs--contained":"contained"===a,"maxio-tabs--divider":n});return e.createElement("div",{className:i},m.map(t,((e,t)=>{if(d(e)&&e.type===_e)return u(e,{value:t});throw new Error("You can only pass <Tab /> component as children")})))};export{I as ActionList,O as Avatar,me as Body,F as BrandLogo,U as Button,ve as Code,pe as Display,X as HeaderButton,q as HeaderNav,G as HeaderSearchField,Q as HeaderSearchInput,J as HeaderSearchMenu,ue as Heading,C as Icon,B as IconButton,he as Label,P as Menu,W as MenuButton,D as MenuList,L as OverlayTrigger,ce as ProgressBar,se as SideNav,_e as Tab,we as TabList,fe as TabPanel,Ne as TabPanels,be as Tabs,R as Toggle,Y as Tooltip,K as TooltipTrigger,V as useHover,M as useOverlayTrigger,A as useWindowSize};
1	+ import e,{createContext as t,useState as a,useContext as n,useRef as i,useEffect as r,useId as o,useCallback as l,useMemo as s,forwardRef as c,Children as m,isValidElement as d,cloneElement as u}from"react";import p from"classnames";import{AnimatePresence as v,motion as h}from"framer-motion";import{useClick as g,useHover as x,useFocus as E,useDismiss as _,useFloating as b,offset as f,useInteractions as N,useRole as w,FloatingPortal as y}from"@floating-ui/react-dom-interactions";import{useId as k}from"react-aria";const C=({variant:t,white:a,className:n})=>e.createElement("i",{className:p("maxio-icon",`maxio-icon-${t}`,a&&"maxio-icon--white",n)}),I=({items:t,isShadowed:a=!0})=>{const n=p("maxio-action-list",{"maxio-action-list--shadow":a});return 0===t.length?null:e.createElement("ul",{className:n},t.map((t=>{if("divider"===t.type)return e.createElement("li",{key:`list-item-divider-${t.id}`,className:"maxio-action-list__divider",role:"separator","aria-hidden":"true"});const{id:a,leadingIconName:n,trailingIconName:i,label:r,description:o,link:l}=t;return e.createElement("li",{className:"maxio-action-list__item",key:`list-item-${a\|\|r}`},e.createElement("a",{...l,className:"maxio-action-list__content"},n&&e.createElement(C,{variant:n,className:"maxio-action-list__leading-icon"}),e.createElement("span",{className:"maxio-action-list__label"},r),o&&e.createElement("span",{className:"maxio-action-list__description"},o),i&&e.createElement(C,{variant:i,className:"maxio-action-list__trailing-icon"})))})))},O=({className:t,src:a,alt:n="avatar"})=>e.createElement("img",{className:p("maxio-avatar",t),alt:n,src:a}),$=t({}),T=({children:t})=>{const[n,i]=a(!1);return e.createElement($.Provider,{value:{isOpen:n,onClose:()=>i(!1),onOpen:()=>i(!0),onToggle:()=>i((e=>!e))}},t)};const S=({children:t})=>{const{isOpen:a,onToggle:i,onClose:r}=function(){const e=n($);if(!e\|\|"object"==typeof e&&0===Object.keys(e).length)throw new Error("useMenu hook must be used within a MenuProvider");return e}();return e.createElement("details",{open:a,onToggle:i,className:"maxio-action-menu"},"function"==typeof t?t({isOpen:a,onClose:r}):t)},P=({children:t})=>e.createElement(T,null,e.createElement(S,null,t)),D=({items:t,alignItemsEnd:a=!1})=>{const n=p("maxio-action-menu__content",{"maxio-action-menu__content--align-end":a});return e.createElement("div",{className:n},e.createElement(I,{items:t}))},W=({children:t,iconName:a="chevron-down"})=>{const n=p({"maxio-action-menu__chevron":"chevron-down"===a});return e.createElement("summary",{className:"maxio-header-button","aria-haspopup":"true"},e.createElement("div",{className:"maxio-header-button__content"},t&&e.createElement("span",null,t),a&&e.createElement(C,{variant:a,className:n})))},F=({icon:t,variant:a="default"})=>e.createElement("i",{className:p("maxio-brand-logo",`maxio-brand-logo-${t}`,{[`maxio-brand-logo--${a}`]:"default"!==a})}),H={click:g,hover:x,focus:E,dismiss:_},z=(e,t)=>t.map((t=>H[t](e))),M=({placement:e="top",isActive:t=!1,interactions:a=["hover"],floatingElementOffset:n=0,onOverlayUpdate:o,autoHideMs:l})=>{const s=i(null),{strategy:c,x:m,y:d,context:u,floating:p,reference:v}=b({placement:e,open:t,onOpenChange:e=>o(e),middleware:[f(n)]}),{getReferenceProps:h,getFloatingProps:g}=N([...z(u,a),w(u,{role:"tooltip"})]);r((()=>{s.current&&clearTimeout(s.current),t&&l&&(s.current=setTimeout((()=>o(!1)),l))}),[t,l]);return{isActive:t,refs:{floating:p,reference:v},floatingElementCSSPosition:{position:c,top:null!=d?d:0,left:null!=m?m:0},getReferenceProps:h,getFloatingProps:g}};function V(e,t=0){const n=i((new Date).getTime()),o=i((new Date).getTime()),[l,s]=a(!1);return r((()=>{const a=()=>{n.current=(new Date).getTime(),s(!0)},i=()=>{o.current=(new Date).getTime(),setTimeout((()=>{n.current-o.current<=0&&s(!1)}),t)},r=e&&e.current;return r&&(r.addEventListener("mouseenter",a),r.addEventListener("mouseleave",i)),()=>{r&&(r.removeEventListener("mouseenter",a),r.removeEventListener("mouseleave",i))}}),[e]),l}function A(e=500){const[t,n]=a((()=>{const{innerWidth:e,innerHeight:t}=window;return{windowWitdh:e,windowHeight:t}})),o=i(null);return r((()=>{const t=()=>{const{innerWidth:t,innerHeight:a}=window;clearTimeout(o.current),o.current=setTimeout((()=>{n({windowWitdh:t,windowHeight:a})}),e)};return window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t)}}),[e]),t}const L=({children:t,usePortal:a=!1,isActive:n=!1,placement:i="top",interactions:r=["hover"],role:o="tooltip",renderOverlay:l,floatingElementOffset:s,motionSettings:c={},autoHideMs:m,onOverlayUpdate:d,className:u})=>{const{getReferenceProps:g,getFloatingProps:x,refs:{floating:E,reference:_},floatingElementCSSPosition:b}=M({role:o,isActive:n,onOverlayUpdate:d,autoHideMs:m,floatingElementOffset:s,interactions:r,placement:i}),f=e.createElement(v,null,n&&e.createElement(h.div,{ref:E,style:b,...c,...x()},l()));return e.createElement(e.Fragment,null,e.createElement("div",{ref:_,className:p("maxio-inline-flex",u),...g(),"data-testid":"overlay-trigger"},t),a?e.createElement(y,{id:"maxio-ui-portal"},f):f)},U=({children:t,loading:a=!1,fullWidth:n=!1,className:i,variant:r="primary",size:o="lg",disabled:l,icon:s,...c})=>{const m=p("maxio-button",i,{[`maxio-button--${o}`]:o,[`maxio-button--${r}`]:r,"maxio-button--loading":a,"maxio-button--full-width":n}),d=p("maxio-button__loader",{"maxio-button__loader--white":["primary","secondary","danger"].includes(r)});return e.createElement("button",{disabled:l,...c,className:m},t,!a&&s,a&&e.createElement("div",{className:d}))},B=({icon:t,...a})=>e.createElement(U,{icon:t,className:"maxio-button--icon",...a},null),R=({defaultChecked:t,checked:a,onChange:n,disabled:i,valueDescription:r,valueDescriptionPosition:s,className:c,name:m,id:d})=>{const u=o(),v="boolean"==typeof t,h=d\|\|u,g="left"===s?"row":"row-reverse",x=r&&s,E=l((e=>{if("Enter"===e.code\|\|"Space"===e.code){e.preventDefault();const t=e.currentTarget.checked;v&&(e.currentTarget.checked=!t),n&&n(!t,e)}}),[v,n]);return e.createElement("div",{className:p("maxio-toggle",c,{"maxio-toggle--disabled":i}),style:{display:"inline-flex",flexDirection:g},"data-testid":"toggle-container"},x?e.createElement("label",{className:"maxio-toggle__label",htmlFor:h},r):null,e.createElement("div",{className:"maxio-toggle__container"},e.createElement("input",{type:"checkbox",defaultChecked:t,checked:a,onChange:e=>{n&&n(e.target.checked,e)},onKeyDown:E,disabled:i,"aria-label":x?void 0:r,className:"maxio-toggle__checkbox",id:h,name:m}),e.createElement("div",{className:"maxio-toggle__track",role:"switch","aria-checked":a},e.createElement("div",{className:"maxio-toggle__handle"}),e.createElement("span",{className:"maxio-toggle__icon"},e.createElement("i",{className:"maxio-toggle__icon-on"})),e.createElement("span",{className:"maxio-toggle__icon"},e.createElement("i",{className:"maxio-toggle__icon-off"})))))},Y=({children:t,arrowPosition:a,size:n="regular",maxWidth:i=160})=>e.createElement("div",{"data-testid":"tooltip",className:p("maxio-tooltip",`maxio-tooltip--${n}`,{[`maxio-tooltip--arrow-${a}`]:a})},e.createElement("div",{className:"maxio-tooltip__content",style:{maxWidth:i}},t)),j={top:"bottom",right:"left",bottom:"top",left:"right","top-start":"bottom-left","top-end":"bottom-right","right-start":"left-top","right-end":"left-bottom","bottom-start":"top-left","bottom-end":"top-right","left-start":"right-top","left-end":"right-bottom"},K=({children:t,interactions:n=["hover"],placement:i="right",maxWidth:r=160,size:o="regular",renderContent:c,autoHideMs:m,isVisible:d,usePortal:u,className:p,onVisibilityUpdate:v,floatingElementOffset:h=5})=>{const[g,x]=a(!1),E=void 0!==d,_=l((e=>{E\|\|x(e),v&&v(e)}),[d]),b=s((()=>(e=>{const t=e.startsWith("top")\|\|e.startsWith("bottom")?"Y":"X",a=`translate${t}(${e.startsWith("bottom")\|\|e.startsWith("right")?"-":""}10px)`;return{initial:{opacity:0,visibility:"hidden",transform:a},animate:{opacity:1,visibility:"visible",transform:`translate${t}(0px)`},exit:{opacity:0,visibility:"hidden",transform:a},transition:{ease:[.4,0,.5,1],duration:.2}}})(i)),[i]);return e.createElement(L,{role:"tooltip",className:p,floatingElementOffset:h,motionSettings:b,isActive:E?d:g,onOverlayUpdate:_,autoHideMs:m,usePortal:u,placement:i,interactions:n,renderOverlay:()=>e.createElement(Y,{size:o,arrowPosition:j[i],maxWidth:r},c())},t)},X=({children:t,as:a,iconName:n,noPadding:i,className:r,...o})=>{const l=a\|\|"button",s=p("maxio-header-button",r,{"maxio-header-button--no-padding":i});return e.createElement(l,{className:s,...o},e.createElement("div",{className:"maxio-header-button__content"},t\|\|null,n&&e.createElement(C,{variant:n})))},q=({items:t})=>e.createElement("ul",{className:"maxio-header-nav"},t.map((({label:t,id:a,isActive:n,...i})=>e.createElement("li",{className:"maxio-header-nav__item",key:`header-nav-list-item-${a}`},e.createElement("a",{className:p("maxio-header-nav__link",{"maxio-header-nav__link--active":n}),...i},t))))),G=c((({className:t,...a},n)=>e.createElement("div",{className:p("maxio-header-search-field",t)},e.createElement("div",{className:"maxio-header-search-field__button"},e.createElement(C,{variant:"search"})),e.createElement("input",{ref:n,className:"maxio-header-search-field__input",type:"search",placeholder:"Search",name:"search",...a}))));G.displayName="SearchField";const J=c((({options:t,...a},n)=>e.createElement("div",{className:"maxio-header-search-menu",role:"button"},e.createElement("select",{name:"entity",className:"maxio-header-search-menu__select","aria-label":"Select entity",ref:n,...a},t.map((({label:t,value:a})=>e.createElement("option",{key:`${t}-${a}`,value:a},t)))),e.createElement("div",{className:"maxio-header-search-menu__icon"},e.createElement(C,{variant:"chevron-down"})))));J.displayName="SearchMenu";const Q=({options:t,onSubmit:a})=>{const n=i(null),r=i(null);return e.createElement("form",{className:"maxio-header-search-input",onSubmit:function(e){var t,i;e.preventDefault(),a({searchField:(null===(t=n.current)\|\|void 0===t?void 0:t.value)\|\|"",selectField:(null===(i=r.current)\|\|void 0===i?void 0:i.value)\|\|""})}},e.createElement(J,{ref:r,options:t}),e.createElement(G,{ref:n}),e.createElement(X,{type:"submit","aria-label":"Submit search",iconName:"arrow-right"}))},Z=({leadingIcon:t,trailingIcon:a,type:n="menu",children:i,leadingIconClassName:r,isTooltipVisible:o=!1})=>e.createElement(e.Fragment,null,e.createElement(K,{usePortal:!1,isVisible:o,renderContent:()=>i,floatingElementOffset:12},t&&e.createElement("span",{className:"maxio-side-nav__icon"},e.createElement(C,{variant:t,className:r}))),e.createElement("span",{className:`maxio-side-nav__${n}-title`,"data-testid":"maxio-sidebar-section-name"},i),a&&e.createElement("span",{className:"maxio-side-nav__menu-chevron"},e.createElement(C,{variant:a}))),ee=t({}),te=()=>n(ee),ae=({children:t,withIcons:n=!0,sections:i,shouldToggleSidebar:o=!0,topDropdownItems:l,collapseBreakpoint:s=800})=>{const[c,m]=a((()=>!o\|\|("undefined"==typeof window\|\|window.innerWidth>s))),[d,u]=a(i),p=()=>m(!0),v=()=>m(!1),{windowWitdh:h}=A();r((()=>{!function(e){if(!o)return;e<s&&c&&g();e>s&&!c&&x()}(h)}),[h]),r((()=>{c?x():g()}),[]);return e.createElement(ee.Provider,{value:{sections:d,topDropdownItems:l,onSectionOpen:e=>{const t=E();u((a=>a.map((a=>{var n;const i=a.name===e&&!a.isOpen;return t&&(null===(n=a.items)\|\|void 0===n?void 0:n.includes(t))?{...a,isOpen:i,isCurrent:!i}:{...a,isOpen:i}}))))},isOpen:c,onOpen:p,onClose:v,onToggle:()=>m((e=>!e)),withIcons:n}},t);function g(){const e=E();e&&(u((t=>t.map((t=>{var a;return{...t,isOpen:!1,isCurrent:(null===(a=t.items)\|\|void 0===a?void 0:a.includes(e))\|\|!1}})))),v())}function x(){const e=E();e&&(u((t=>t.map((t=>{var a;return{...t,isOpen:(null===(a=t.items)\|\|void 0===a?void 0:a.includes(e))\|\|!1,isCurrent:!1}})))),p())}function E(){return d.map((e=>e.items)).flat().filter((e=>null!=e)).find((e=>e.isCurrent))}},ne=()=>{const{onOpen:t,topDropdownItems:a,isOpen:n}=te(),{mainItem:r,otherItems:o,actions:l}=a,c=i(null),m=V(c),d=e=>({label:e.title,leadingIconName:e.icon,link:{href:e.url}}),u=s((()=>[...o.map(d),o.length>0&&{type:"divider",id:"item-divider"},...l.map(d)].filter((e=>null!=e))),[l,o]),p=o.length+l.length;return e.createElement(e.Fragment,null,0===p?e.createElement("a",{className:"maxio-side-nav__menu-button maxio-side-nav__menu-button--large",href:r.url,onClick:t},e.createElement("span",{className:"maxio-side-nav__menu-title"},r.title)):e.createElement("details",{className:"maxio-action-menu maxio-side-nav--action-menu"},e.createElement("summary",{onClick:t,className:"maxio-side-nav__menu-button maxio-side-nav__menu-button--large","aria-haspopup":"true",ref:c},r.url?e.createElement(e.Fragment,null,e.createElement(Z,{type:"menu",isTooltipVisible:!n&&m,leadingIcon:r.icon,trailingIcon:"chevron-down",leadingIconClassName:"maxio-icon-circle-fill maxio-icon--success"},r.title)):e.createElement(Z,{type:"menu",trailingIcon:"chevron-down"},r.title)),e.createElement(I,{items:u})))},ie=({section:t})=>{const{isOpen:a}=te(),n=i(null),r=V(n);return e.createElement("li",{className:"maxio-side-nav__item","data-key":t.key,"data-testid":"maxio-sidebar-section"},e.createElement("a",{className:"maxio-side-nav__link","aria-current":t.isCurrent?"page":void 0,role:"button",href:t.href,ref:n},e.createElement(Z,{isTooltipVisible:r&&!a,type:"menu",leadingIcon:t.icon},t.name)))},re=({section:t})=>{var a;const{onOpen:n,onSectionOpen:r,isOpen:o,withIcons:l}=te();const s=i(null),c=V(s);return t.Component?e.createElement(t.Component,{section:t}):t.href?e.createElement(ie,{section:t}):e.createElement("li",{className:p("maxio-side-nav__item",{"maxio-side-nav__item--active":t.isCurrent,"maxio-side-nav__item--icon":l}),"data-testid":"maxio-sidebar-section"},e.createElement("button",{className:"maxio-side-nav__menu-button",ref:s,"aria-expanded":t.isOpen,"aria-current":t.isCurrent?"page":void 0,type:"button",onClick:function(){r(t.name),n()}},e.createElement(Z,{type:"menu",isTooltipVisible:!o&&c,leadingIcon:t.icon,trailingIcon:(null===(a=t.items)\|\|void 0===a?void 0:a.length)?"chevron-down":void 0},t.name)),t.isOpen&&e.createElement("ul",{className:"maxio-side-nav__menu"},t.items.map((t=>e.createElement("li",{key:`section-sub-item-${t.name}`,className:"maxio-side-nav__item","data-testid":"maxio-section-item"},e.createElement("a",{className:"maxio-side-nav__link",href:t.href,"aria-current":t.isCurrent?"page":void 0},e.createElement("span",{className:"maxio-side-nav__link-title"},t.name)))))))},oe=()=>{const{sections:t}=te();return e.createElement("ul",{className:"maxio-side-nav__items"},t.map((t=>e.createElement(re,{key:`section-${t.name}`,section:t}))))},le=()=>{const{isOpen:t}=te();return e.createElement("nav",{className:p("maxio-side-nav",{"maxio-side-nav--collapsed":!t})},e.createElement(ne,null),e.createElement("hr",{className:"maxio-side-nav__divider"}),e.createElement(oe,null))},se=({withIcons:t,shouldToggleSidebar:a,topDropdownItems:n,sections:i,collapseBreakpoint:r=800})=>e.createElement(ae,{collapseBreakpoint:r,withIcons:t,shouldToggleSidebar:a,topDropdownItems:n,sections:i},e.createElement(le,null)),ce=({label:t,helperText:a,size:n="md",variant:i="default",status:r,value:o,maxValue:l=100})=>{const s=k(),c=k(),m=r&&!!t&&!!o&&!("inline"===i),d=a&&!("inline"===i),u=a&&"inline"===i,v=p("maxio-progress-bar",{"maxio-progress-bar--lg":"lg"===n,"maxio-progress-bar--success":o&&!("inline"===i)&&"success"===r,"maxio-progress-bar--error":o&&!("inline"===i)&&"error"===r,"maxio-progress-bar--indent":"indent"===i,"maxio-progress-bar--inline":"inline"===i,"maxio-progress-bar--indeterminate":void 0===o});return e.createElement("div",{className:v},t&&e.createElement("div",{id:s,className:"maxio-progress-bar__label"},t),u&&e.createElement("div",{id:c,className:"maxio-progress-bar__helper-text"},a),e.createElement("div",{className:"maxio-progress-bar__track",role:"progressbar","aria-labelledby":s,"aria-describedby":c,"aria-valuenow":o,"aria-valuemin":0,"aria-valuemax":l,"aria-busy":!r,"aria-invalid":"error"===r},e.createElement("div",{className:"maxio-progress-bar__progress",style:{"--tw-scale-x":`${o}%`}})),m&&e.createElement("div",{className:`maxio-progress-bar__${r}-icon`}),d&&e.createElement("div",{id:c,className:"maxio-progress-bar__helper-text"},a))},me=({as:t="div",children:a,compact:n=!1,size:i="md",className:r,...o})=>{const l=t,s=p({[`maxio-body-${i}`]:!n,[`maxio-body-${i}-compact`]:n},r);return e.createElement(l,{className:s,...o},a)},de={sm:"h3",md:"h2",lg:"h1"},ue=({children:t,size:a="sm",className:n,...i})=>{const r=de[a],o=p(`maxio-heading-${a}`,n);return e.createElement(r,{className:o,...i},t)},pe=({as:t="div",children:a,size:n="md",className:i,...r})=>{const o=t,l=p(`maxio-display-${n}`,i);return e.createElement(o,{className:l,...r},a)},ve=({as:t="div",children:a,className:n,...i})=>{const r=t,o=p("maxio-code",n);return e.createElement(r,{className:o,...i},a)},he=({as:t="div",children:a,size:n="sm",className:i,...r})=>{const o=t,l=p(`maxio-label-${n}`,i);return e.createElement(o,{className:l,...r},a)},ge=t({}),xe=()=>n(ge),Ee=({children:t,variant:n,withDivider:i,defaultIndex:o=0,onChange:l,index:s})=>{const[c,m]=a((()=>void 0!==s?s:o));r((()=>{void 0===s&&m(o),"number"==typeof s&&m(s)}),[o,s]);return e.createElement(ge.Provider,{value:{currentIndex:c,variant:n,withDivider:i,onChange:e=>{void 0===s&&m(e),"function"==typeof l&&l(e)}}},t)},_e=({disabled:t=!1,value:a=0,...n})=>{const{onChange:i,currentIndex:r}=xe(),o=p("maxio-tabs__tab",{"maxio-tabs__tab--active":r===a,"maxio-tabs__tab--disabled":t,"maxio-tabs__tab--icon":"icon"===n.type}),l=()=>{i(a)};if("icon"===n.type){const{icon:t}=n;return e.createElement("div",{className:o,onClick:l},e.createElement("div",{className:"maxio-tabs__tab__content"},t))}const{children:s,rightIcon:c}=n;return e.createElement("div",{className:o,onClick:l},e.createElement("div",{className:"maxio-tabs__tab__content"},s,c\|\|null))},be=({children:t,variant:a="line",withDivider:n=!1,defaultIndex:i=0,index:r,onChange:o})=>e.createElement(Ee,{defaultIndex:i,variant:a,withDivider:n,index:r,onChange:o},t),fe=({children:t})=>e.createElement(e.Fragment,null,t),Ne=({children:t})=>{const{currentIndex:a}=xe();return e.createElement(e.Fragment,null,m.map(t,((e,t)=>{if(d(e)&&e.type===fe)return t===a?u(e,{}):null;throw new Error("You can only pass <TabPanel /> component as children")})))},we=({children:t})=>{const{variant:a,withDivider:n}=xe(),i=p("maxio-tabs",{"maxio-tabs--contained":"contained"===a,"maxio-tabs--divider":n});return e.createElement("div",{className:i},m.map(t,((e,t)=>{if(d(e)&&e.type===_e)return u(e,{value:t});throw new Error("You can only pass <Tab /> component as children")})))},ye=({className:t,children:a,disabled:n=!1,external:i=!1,icon:r="arrow-right",noArrow:o=!1,size:l="md",...s})=>{const c=p("maxio-link",{[`maxio-link--${l}`]:!0,"maxio-link--disabled":n},t),m=i?"_blank":"_self";return r=i?"arrow-up-right":r,e.createElement("a",{className:c,target:m,...s},e.createElement("span",{className:"maxio-link__text"},a),!o&&e.createElement(C,{variant:r}))};export{I as ActionList,O as Avatar,me as Body,F as BrandLogo,U as Button,ve as Code,pe as Display,X as HeaderButton,q as HeaderNav,G as HeaderSearchField,Q as HeaderSearchInput,J as HeaderSearchMenu,ue as Heading,C as Icon,B as IconButton,he as Label,ye as Link,P as Menu,W as MenuButton,D as MenuList,L as OverlayTrigger,ce as ProgressBar,se as SideNav,_e as Tab,we as TabList,fe as TabPanel,Ne as TabPanels,be as Tabs,R as Toggle,Y as Tooltip,K as TooltipTrigger,V as useHover,M as useOverlayTrigger,A as useWindowSize};

package/dist/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react"),t=require("classnames"),a=require("framer-motion"),n=require("@floating-ui/react-dom-interactions"),i=require("react-aria");const r=({variant:a,white:n,className:i})=>e.createElement("i",{className:t("maxio-icon",`maxio-icon-${a}`,n&&"maxio-icon--white",i)}),o=({items:a,isShadowed:n=!0})=>{const i=t("maxio-action-list",{"maxio-action-list--shadow":n});return 0===a.length?null:e.createElement("ul",{className:i},a.map((t=>{if("divider"===t.type)return e.createElement("li",{key:`list-item-divider-${t.id}`,className:"maxio-action-list__divider",role:"separator","aria-hidden":"true"});const{id:a,leadingIconName:n,trailingIconName:i,label:o,description:s,link:l}=t;return e.createElement("li",{className:"maxio-action-list__item",key:`list-item-${a||o}`},e.createElement("a",{...l,className:"maxio-action-list__content"},n&&e.createElement(r,{variant:n,className:"maxio-action-list__leading-icon"}),e.createElement("span",{className:"maxio-action-list__label"},o),s&&e.createElement("span",{className:"maxio-action-list__description"},s),i&&e.createElement(r,{variant:i,className:"maxio-action-list__trailing-icon"})))})))},s=e.createContext({}),l=({children:t})=>{const[a,n]=e.useState(!1);return e.createElement(s.Provider,{value:{isOpen:a,onClose:()=>n(!1),onOpen:()=>n(!0),onToggle:()=>n((e=>!e))}},t)};const c=({children:t})=>{const{isOpen:a,onToggle:n,onClose:i}=function(){const t=e.useContext(s);if(!t||"object"==typeof t&&0===Object.keys(t).length)throw new Error("useMenu hook must be used within a MenuProvider");return t}();return e.createElement("details",{open:a,onToggle:n,className:"maxio-action-menu"},"function"==typeof t?t({isOpen:a,onClose:i}):t)},m={click:n.useClick,hover:n.useHover,focus:n.useFocus,dismiss:n.useDismiss},d=(e,t)=>t.map((t=>m[t](e))),u=({placement:t="top",isActive:a=!1,interactions:i=["hover"],floatingElementOffset:r=0,onOverlayUpdate:o,autoHideMs:s})=>{const l=e.useRef(null),{strategy:c,x:m,y:u,context:p,floating:v,reference:x}=n.useFloating({placement:t,open:a,onOpenChange:e=>o(e),middleware:[n.offset(r)]}),{getReferenceProps:h,getFloatingProps:g}=n.useInteractions([...d(p,i),n.useRole(p,{role:"tooltip"})]);e.useEffect((()=>{l.current&&clearTimeout(l.current),a&&s&&(l.current=setTimeout((()=>o(!1)),s))}),[a,s]);return{isActive:a,refs:{floating:v,reference:x},floatingElementCSSPosition:{position:c,top:null!=u?u:0,left:null!=m?m:0},getReferenceProps:h,getFloatingProps:g}};function p(t,a=0){const n=e.useRef((new Date).getTime()),i=e.useRef((new Date).getTime()),[r,o]=e.useState(!1);return e.useEffect((()=>{const e=()=>{n.current=(new Date).getTime(),o(!0)},r=()=>{i.current=(new Date).getTime(),setTimeout((()=>{n.current-i.current<=0&&o(!1)}),a)},s=t&&t.current;return s&&(s.addEventListener("mouseenter",e),s.addEventListener("mouseleave",r)),()=>{s&&(s.removeEventListener("mouseenter",e),s.removeEventListener("mouseleave",r))}}),[t]),r}function v(t=500){const[a,n]=e.useState((()=>{const{innerWidth:e,innerHeight:t}=window;return{windowWitdh:e,windowHeight:t}})),i=e.useRef(null);return e.useEffect((()=>{const e=()=>{const{innerWidth:e,innerHeight:a}=window;clearTimeout(i.current),i.current=setTimeout((()=>{n({windowWitdh:e,windowHeight:a})}),t)};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[t]),a}const x=({children:i,usePortal:r=!1,isActive:o=!1,placement:s="top",interactions:l=["hover"],role:c="tooltip",renderOverlay:m,floatingElementOffset:d,motionSettings:p={},autoHideMs:v,onOverlayUpdate:x,className:h})=>{const{getReferenceProps:g,getFloatingProps:E,refs:{floating:f,reference:b},floatingElementCSSPosition:_}=u({role:c,isActive:o,onOverlayUpdate:x,autoHideMs:v,floatingElementOffset:d,interactions:l,placement:s}),N=e.createElement(a.AnimatePresence,null,o&&e.createElement(a.motion.div,{ref:f,style:_,...p,...E()},m()));return e.createElement(e.Fragment,null,e.createElement("div",{ref:b,className:t("maxio-inline-flex",h),...g(),"data-testid":"overlay-trigger"},i),r?e.createElement(n.FloatingPortal,{id:"maxio-ui-portal"},N):N)},h=({children:a,loading:n=!1,fullWidth:i=!1,className:r,variant:o="primary",size:s="lg",disabled:l,icon:c,...m})=>{const d=t("maxio-button",r,{[`maxio-button--${s}`]:s,[`maxio-button--${o}`]:o,"maxio-button--loading":n,"maxio-button--full-width":i}),u=t("maxio-button__loader",{"maxio-button__loader--white":["primary","secondary","danger"].includes(o)});return e.createElement("button",{disabled:l,...m,className:d},a,!n&&c,n&&e.createElement("div",{className:u}))},g=({children:a,arrowPosition:n,size:i="regular",maxWidth:r=160})=>e.createElement("div",{"data-testid":"tooltip",className:t("maxio-tooltip",`maxio-tooltip--${i}`,{[`maxio-tooltip--arrow-${n}`]:n})},e.createElement("div",{className:"maxio-tooltip__content",style:{maxWidth:r}},a)),E={top:"bottom",right:"left",bottom:"top",left:"right","top-start":"bottom-left","top-end":"bottom-right","right-start":"left-top","right-end":"left-bottom","bottom-start":"top-left","bottom-end":"top-right","left-start":"right-top","left-end":"right-bottom"},f=({children:t,interactions:a=["hover"],placement:n="right",maxWidth:i=160,size:r="regular",renderContent:o,autoHideMs:s,isVisible:l,usePortal:c,className:m,onVisibilityUpdate:d,floatingElementOffset:u=5})=>{const[p,v]=e.useState(!1),h=void 0!==l,f=e.useCallback((e=>{h||v(e),d&&d(e)}),[l]),b=e.useMemo((()=>(e=>{const t=e.startsWith("top")||e.startsWith("bottom")?"Y":"X",a=`translate${t}(${e.startsWith("bottom")||e.startsWith("right")?"-":""}10px)`;return{initial:{opacity:0,visibility:"hidden",transform:a},animate:{opacity:1,visibility:"visible",transform:`translate${t}(0px)`},exit:{opacity:0,visibility:"hidden",transform:a},transition:{ease:[.4,0,.5,1],duration:.2}}})(n)),[n]);return e.createElement(x,{role:"tooltip",className:m,floatingElementOffset:u,motionSettings:b,isActive:h?l:p,onOverlayUpdate:f,autoHideMs:s,usePortal:c,placement:n,interactions:a,renderOverlay:()=>e.createElement(g,{size:r,arrowPosition:E[n],maxWidth:i},o())},t)},b=({children:a,as:n,iconName:i,noPadding:o,className:s,...l})=>{const c=n||"button",m=t("maxio-header-button",s,{"maxio-header-button--no-padding":o});return e.createElement(c,{className:m,...l},e.createElement("div",{className:"maxio-header-button__content"},a||null,i&&e.createElement(r,{variant:i})))},_=e.forwardRef((({className:a,...n},i)=>e.createElement("div",{className:t("maxio-header-search-field",a)},e.createElement("div",{className:"maxio-header-search-field__button"},e.createElement(r,{variant:"search"})),e.createElement("input",{ref:i,className:"maxio-header-search-field__input",type:"search",placeholder:"Search",name:"search",...n}))));_.displayName="SearchField";const N=e.forwardRef((({options:t,...a},n)=>e.createElement("div",{className:"maxio-header-search-menu",role:"button"},e.createElement("select",{name:"entity",className:"maxio-header-search-menu__select","aria-label":"Select entity",ref:n,...a},t.map((({label:t,value:a})=>e.createElement("option",{key:`${t}-${a}`,value:a},t)))),e.createElement("div",{className:"maxio-header-search-menu__icon"},e.createElement(r,{variant:"chevron-down"})))));N.displayName="SearchMenu";const w=({leadingIcon:t,trailingIcon:a,type:n="menu",children:i,leadingIconClassName:o,isTooltipVisible:s=!1})=>e.createElement(e.Fragment,null,e.createElement(f,{usePortal:!1,isVisible:s,renderContent:()=>i,floatingElementOffset:12},t&&e.createElement("span",{className:"maxio-side-nav__icon"},e.createElement(r,{variant:t,className:o}))),e.createElement("span",{className:`maxio-side-nav__${n}-title`,"data-testid":"maxio-sidebar-section-name"},i),a&&e.createElement("span",{className:"maxio-side-nav__menu-chevron"},e.createElement(r,{variant:a}))),y=e.createContext({}),C=()=>e.useContext(y),k=({children:t,withIcons:a=!0,sections:n,shouldToggleSidebar:i=!0,topDropdownItems:r,collapseBreakpoint:o=800})=>{const[s,l]=e.useState((()=>!i||("undefined"==typeof window||window.innerWidth>o))),[c,m]=e.useState(n),d=()=>l(!0),u=()=>l(!1),{windowWitdh:p}=v();e.useEffect((()=>{!function(e){if(!i)return;e<o&&s&&x();e>o&&!s&&h()}(p)}),[p]),e.useEffect((()=>{s?h():x()}),[]);return e.createElement(y.Provider,{value:{sections:c,topDropdownItems:r,onSectionOpen:e=>{const t=g();m((a=>a.map((a=>{var n;const i=a.name===e&&!a.isOpen;return t&&(null===(n=a.items)||void 0===n?void 0:n.includes(t))?{...a,isOpen:i,isCurrent:!i}:{...a,isOpen:i}}))))},isOpen:s,onOpen:d,onClose:u,onToggle:()=>l((e=>!e)),withIcons:a}},t);function x(){const e=g();e&&(m((t=>t.map((t=>{var a;return{...t,isOpen:!1,isCurrent:(null===(a=t.items)||void 0===a?void 0:a.includes(e))||!1}})))),u())}function h(){const e=g();e&&(m((t=>t.map((t=>{var a;return{...t,isOpen:(null===(a=t.items)||void 0===a?void 0:a.includes(e))||!1,isCurrent:!1}})))),d())}function g(){return c.map((e=>e.items)).flat().filter((e=>null!=e)).find((e=>e.isCurrent))}},I=()=>{const{onOpen:t,topDropdownItems:a,isOpen:n}=C(),{mainItem:i,otherItems:r,actions:s}=a,l=e.useRef(null),c=p(l),m=e=>({label:e.title,leadingIconName:e.icon,link:{href:e.url}}),d=e.useMemo((()=>[...r.map(m),r.length>0&&{type:"divider",id:"item-divider"},...s.map(m)].filter((e=>null!=e))),[s,r]),u=r.length+s.length;return e.createElement(e.Fragment,null,0===u?e.createElement("a",{className:"maxio-side-nav__menu-button maxio-side-nav__menu-button--large",href:i.url,onClick:t},e.createElement("span",{className:"maxio-side-nav__menu-title"},i.title)):e.createElement("details",{className:"maxio-action-menu maxio-side-nav--action-menu"},e.createElement("summary",{onClick:t,className:"maxio-side-nav__menu-button maxio-side-nav__menu-button--large","aria-haspopup":"true",ref:l},i.url?e.createElement(e.Fragment,null,e.createElement(w,{type:"menu",isTooltipVisible:!n&&c,leadingIcon:i.icon,trailingIcon:"chevron-down",leadingIconClassName:"maxio-icon-circle-fill maxio-icon--success"},i.title)):e.createElement(w,{type:"menu",trailingIcon:"chevron-down"},i.title)),e.createElement(o,{items:d})))},O=({section:t})=>{const{isOpen:a}=C(),n=e.useRef(null),i=p(n);return e.createElement("li",{className:"maxio-side-nav__item","data-key":t.key,"data-testid":"maxio-sidebar-section"},e.createElement("a",{className:"maxio-side-nav__link","aria-current":t.isCurrent?"page":void 0,role:"button",href:t.href,ref:n},e.createElement(w,{isTooltipVisible:i&&!a,type:"menu",leadingIcon:t.icon},t.name)))},T=({section:a})=>{var n;const{onOpen:i,onSectionOpen:r,isOpen:o,withIcons:s}=C();const l=e.useRef(null),c=p(l);return a.Component?e.createElement(a.Component,{section:a}):a.href?e.createElement(O,{section:a}):e.createElement("li",{className:t("maxio-side-nav__item",{"maxio-side-nav__item--active":a.isCurrent,"maxio-side-nav__item--icon":s}),"data-testid":"maxio-sidebar-section"},e.createElement("button",{className:"maxio-side-nav__menu-button",ref:l,"aria-expanded":a.isOpen,"aria-current":a.isCurrent?"page":void 0,type:"button",onClick:function(){r(a.name),i()}},e.createElement(w,{type:"menu",isTooltipVisible:!o&&c,leadingIcon:a.icon,trailingIcon:(null===(n=a.items)||void 0===n?void 0:n.length)?"chevron-down":void 0},a.name)),a.isOpen&&e.createElement("ul",{className:"maxio-side-nav__menu"},a.items.map((t=>e.createElement("li",{key:`section-sub-item-${t.name}`,className:"maxio-side-nav__item","data-testid":"maxio-section-item"},e.createElement("a",{className:"maxio-side-nav__link",href:t.href,"aria-current":t.isCurrent?"page":void 0},e.createElement("span",{className:"maxio-side-nav__link-title"},t.name)))))))},S=()=>{const{sections:t}=C();return e.createElement("ul",{className:"maxio-side-nav__items"},t.map((t=>e.createElement(T,{key:`section-${t.name}`,section:t}))))},P=()=>{const{isOpen:a}=C();return e.createElement("nav",{className:t("maxio-side-nav",{"maxio-side-nav--collapsed":!a})},e.createElement(I,null),e.createElement("hr",{className:"maxio-side-nav__divider"}),e.createElement(S,null))},$={sm:"h3",md:"h2",lg:"h1"},D=e.createContext({}),F=()=>e.useContext(D),H=({children:t,variant:a,withDivider:n,defaultIndex:i=0,onChange:r,index:o})=>{const[s,l]=e.useState((()=>void 0!==o?o:i));e.useEffect((()=>{void 0===o&&l(i),"number"==typeof o&&l(o)}),[i,o]);return e.createElement(D.Provider,{value:{currentIndex:s,variant:a,withDivider:n,onChange:e=>{void 0===o&&l(e),"function"==typeof r&&r(e)}}},t)},W=({disabled:a=!1,value:n=0,...i})=>{const{onChange:r,currentIndex:o}=F(),s=t("maxio-tabs__tab",{"maxio-tabs__tab--active":o===n,"maxio-tabs__tab--disabled":a,"maxio-tabs__tab--icon":"icon"===i.type}),l=()=>{r(n)};if("icon"===i.type){const{icon:t}=i;return e.createElement("div",{className:s,onClick:l},e.createElement("div",{className:"maxio-tabs__tab__content"},t))}const{children:c,rightIcon:m}=i;return e.createElement("div",{className:s,onClick:l},e.createElement("div",{className:"maxio-tabs__tab__content"},c,m||null))},R=({children:t})=>e.createElement(e.Fragment,null,t);exports.ActionList=o,exports.Avatar=({className:a,src:n,alt:i="avatar"})=>e.createElement("img",{className:t("maxio-avatar",a),alt:i,src:n}),exports.Body=({as:a="div",children:n,compact:i=!1,size:r="md",className:o,...s})=>{const l=a,c=t({[`maxio-body-${r}`]:!i,[`maxio-body-${r}-compact`]:i},o);return e.createElement(l,{className:c,...s},n)},exports.BrandLogo=({icon:a,variant:n="default"})=>e.createElement("i",{className:t("maxio-brand-logo",`maxio-brand-logo-${a}`,{[`maxio-brand-logo--${n}`]:"default"!==n})}),exports.Button=h,exports.Code=({as:a="div",children:n,className:i,...r})=>{const o=a,s=t("maxio-code",i);return e.createElement(o,{className:s,...r},n)},exports.Display=({as:a="div",children:n,size:i="md",className:r,...o})=>{const s=a,l=t(`maxio-display-${i}`,r);return e.createElement(s,{className:l,...o},n)},exports.HeaderButton=b,exports.HeaderNav=({items:a})=>e.createElement("ul",{className:"maxio-header-nav"},a.map((({label:a,id:n,isActive:i,...r})=>e.createElement("li",{className:"maxio-header-nav__item",key:`header-nav-list-item-${n}`},e.createElement("a",{className:t("maxio-header-nav__link",{"maxio-header-nav__link--active":i}),...r},a))))),exports.HeaderSearchField=_,exports.HeaderSearchInput=({options:t,onSubmit:a})=>{const n=e.useRef(null),i=e.useRef(null);return e.createElement("form",{className:"maxio-header-search-input",onSubmit:function(e){var t,r;e.preventDefault(),a({searchField:(null===(t=n.current)||void 0===t?void 0:t.value)||"",selectField:(null===(r=i.current)||void 0===r?void 0:r.value)||""})}},e.createElement(N,{ref:i,options:t}),e.createElement(_,{ref:n}),e.createElement(b,{type:"submit","aria-label":"Submit search",iconName:"arrow-right"}))},exports.HeaderSearchMenu=N,exports.Heading=({children:a,size:n="sm",className:i,...r})=>{const o=$[n],s=t(`maxio-heading-${n}`,i);return e.createElement(o,{className:s,...r},a)},exports.Icon=r,exports.IconButton=({icon:t,...a})=>e.createElement(h,{icon:t,className:"maxio-button--icon",...a},null),exports.Label=({as:a="div",children:n,size:i="sm",className:r,...o})=>{const s=a,l=t(`maxio-label-${i}`,r);return e.createElement(s,{className:l,...o},n)},exports.Menu=({children:t})=>e.createElement(l,null,e.createElement(c,null,t)),exports.MenuButton=({children:a,iconName:n="chevron-down"})=>{const i=t({"maxio-action-menu__chevron":"chevron-down"===n});return e.createElement("summary",{className:"maxio-header-button","aria-haspopup":"true"},e.createElement("div",{className:"maxio-header-button__content"},a&&e.createElement("span",null,a),n&&e.createElement(r,{variant:n,className:i})))},exports.MenuList=({items:a,alignItemsEnd:n=!1})=>{const i=t("maxio-action-menu__content",{"maxio-action-menu__content--align-end":n});return e.createElement("div",{className:i},e.createElement(o,{items:a}))},exports.OverlayTrigger=x,exports.ProgressBar=({label:a,helperText:n,size:r="md",variant:o="default",status:s,value:l,maxValue:c=100})=>{const m=i.useId(),d=i.useId(),u=s&&!!a&&!!l&&!("inline"===o),p=n&&!("inline"===o),v=n&&"inline"===o,x=t("maxio-progress-bar",{"maxio-progress-bar--lg":"lg"===r,"maxio-progress-bar--success":l&&!("inline"===o)&&"success"===s,"maxio-progress-bar--error":l&&!("inline"===o)&&"error"===s,"maxio-progress-bar--indent":"indent"===o,"maxio-progress-bar--inline":"inline"===o,"maxio-progress-bar--indeterminate":!l});return e.createElement("div",{className:x},a&&e.createElement("div",{id:m,className:"maxio-progress-bar__label"},a),v&&e.createElement("div",{id:d,className:"maxio-progress-bar__helper-text"},n),e.createElement("div",{className:"maxio-progress-bar__track",role:"progressbar","aria-labelledby":m,"aria-describedby":d,"aria-valuenow":l,"aria-valuemin":0,"aria-valuemax":c,"aria-busy":!s,"aria-invalid":"error"===s},e.createElement("div",{className:"maxio-progress-bar__progress",style:{"--tw-scale-x":`${l}%`}})),u&&e.createElement("div",{className:`maxio-progress-bar__${s}-icon`}),p&&e.createElement("div",{id:d,className:"maxio-progress-bar__helper-text"},n))},exports.SideNav=({withIcons:t,shouldToggleSidebar:a,topDropdownItems:n,sections:i,collapseBreakpoint:r=800})=>e.createElement(k,{collapseBreakpoint:r,withIcons:t,shouldToggleSidebar:a,topDropdownItems:n,sections:i},e.createElement(P,null)),exports.Tab=W,exports.TabList=({children:a})=>{const{variant:n,withDivider:i}=F(),r=t("maxio-tabs",{"maxio-tabs--contained":"contained"===n,"maxio-tabs--divider":i});return e.createElement("div",{className:r},e.Children.map(a,((t,a)=>{if(e.isValidElement(t)&&t.type===W)return e.cloneElement(t,{value:a});throw new Error("You can only pass <Tab /> component as children")})))},exports.TabPanel=R,exports.TabPanels=({children:t})=>{const{currentIndex:a}=F();return e.createElement(e.Fragment,null,e.Children.map(t,((t,n)=>{if(e.isValidElement(t)&&t.type===R)return n===a?e.cloneElement(t,{}):null;throw new Error("You can only pass <TabPanel /> component as children")})))},exports.Tabs=({children:t,variant:a="line",withDivider:n=!1,defaultIndex:i=0,index:r,onChange:o})=>e.createElement(H,{defaultIndex:i,variant:a,withDivider:n,index:r,onChange:o},t),exports.Toggle=({defaultChecked:a,checked:n,onChange:i,disabled:r,valueDescription:o,valueDescriptionPosition:s,className:l,name:c,id:m})=>{const d=e.useId(),u="boolean"==typeof a,p=m||d,v="left"===s?"row":"row-reverse",x=o&&s,h=e.useCallback((e=>{if("Enter"===e.code||"Space"===e.code){e.preventDefault();const t=e.currentTarget.checked;u&&(e.currentTarget.checked=!t),i&&i(!t,e)}}),[u,i]);return e.createElement("div",{className:t("maxio-toggle",l,{"maxio-toggle--disabled":r}),style:{display:"inline-flex",flexDirection:v},"data-testid":"toggle-container"},x?e.createElement("label",{className:"maxio-toggle__label",htmlFor:p},o):null,e.createElement("div",{className:"maxio-toggle__container"},e.createElement("input",{type:"checkbox",defaultChecked:a,checked:n,onChange:e=>{i&&i(e.target.checked,e)},onKeyDown:h,disabled:r,"aria-label":x?void 0:o,className:"maxio-toggle__checkbox",id:p,name:c}),e.createElement("div",{className:"maxio-toggle__track",role:"switch","aria-checked":n},e.createElement("div",{className:"maxio-toggle__handle"}),e.createElement("span",{className:"maxio-toggle__icon"},e.createElement("i",{className:"maxio-toggle__icon-on"})),e.createElement("span",{className:"maxio-toggle__icon"},e.createElement("i",{className:"maxio-toggle__icon-off"})))))},exports.Tooltip=g,exports.TooltipTrigger=f,exports.useHover=p,exports.useOverlayTrigger=u,exports.useWindowSize=v;
+"use strict";var e=require("react"),t=require("classnames"),a=require("framer-motion"),n=require("@floating-ui/react-dom-interactions"),i=require("react-aria");const r=({variant:a,white:n,className:i})=>e.createElement("i",{className:t("maxio-icon",`maxio-icon-${a}`,n&&"maxio-icon--white",i)}),o=({items:a,isShadowed:n=!0})=>{const i=t("maxio-action-list",{"maxio-action-list--shadow":n});return 0===a.length?null:e.createElement("ul",{className:i},a.map((t=>{if("divider"===t.type)return e.createElement("li",{key:`list-item-divider-${t.id}`,className:"maxio-action-list__divider",role:"separator","aria-hidden":"true"});const{id:a,leadingIconName:n,trailingIconName:i,label:o,description:s,link:l}=t;return e.createElement("li",{className:"maxio-action-list__item",key:`list-item-${a||o}`},e.createElement("a",{...l,className:"maxio-action-list__content"},n&&e.createElement(r,{variant:n,className:"maxio-action-list__leading-icon"}),e.createElement("span",{className:"maxio-action-list__label"},o),s&&e.createElement("span",{className:"maxio-action-list__description"},s),i&&e.createElement(r,{variant:i,className:"maxio-action-list__trailing-icon"})))})))},s=e.createContext({}),l=({children:t})=>{const[a,n]=e.useState(!1);return e.createElement(s.Provider,{value:{isOpen:a,onClose:()=>n(!1),onOpen:()=>n(!0),onToggle:()=>n((e=>!e))}},t)};const c=({children:t})=>{const{isOpen:a,onToggle:n,onClose:i}=function(){const t=e.useContext(s);if(!t||"object"==typeof t&&0===Object.keys(t).length)throw new Error("useMenu hook must be used within a MenuProvider");return t}();return e.createElement("details",{open:a,onToggle:n,className:"maxio-action-menu"},"function"==typeof t?t({isOpen:a,onClose:i}):t)},m={click:n.useClick,hover:n.useHover,focus:n.useFocus,dismiss:n.useDismiss},d=(e,t)=>t.map((t=>m[t](e))),u=({placement:t="top",isActive:a=!1,interactions:i=["hover"],floatingElementOffset:r=0,onOverlayUpdate:o,autoHideMs:s})=>{const l=e.useRef(null),{strategy:c,x:m,y:u,context:p,floating:x,reference:v}=n.useFloating({placement:t,open:a,onOpenChange:e=>o(e),middleware:[n.offset(r)]}),{getReferenceProps:h,getFloatingProps:g}=n.useInteractions([...d(p,i),n.useRole(p,{role:"tooltip"})]);e.useEffect((()=>{l.current&&clearTimeout(l.current),a&&s&&(l.current=setTimeout((()=>o(!1)),s))}),[a,s]);return{isActive:a,refs:{floating:x,reference:v},floatingElementCSSPosition:{position:c,top:null!=u?u:0,left:null!=m?m:0},getReferenceProps:h,getFloatingProps:g}};function p(t,a=0){const n=e.useRef((new Date).getTime()),i=e.useRef((new Date).getTime()),[r,o]=e.useState(!1);return e.useEffect((()=>{const e=()=>{n.current=(new Date).getTime(),o(!0)},r=()=>{i.current=(new Date).getTime(),setTimeout((()=>{n.current-i.current<=0&&o(!1)}),a)},s=t&&t.current;return s&&(s.addEventListener("mouseenter",e),s.addEventListener("mouseleave",r)),()=>{s&&(s.removeEventListener("mouseenter",e),s.removeEventListener("mouseleave",r))}}),[t]),r}function x(t=500){const[a,n]=e.useState((()=>{const{innerWidth:e,innerHeight:t}=window;return{windowWitdh:e,windowHeight:t}})),i=e.useRef(null);return e.useEffect((()=>{const e=()=>{const{innerWidth:e,innerHeight:a}=window;clearTimeout(i.current),i.current=setTimeout((()=>{n({windowWitdh:e,windowHeight:a})}),t)};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[t]),a}const v=({children:i,usePortal:r=!1,isActive:o=!1,placement:s="top",interactions:l=["hover"],role:c="tooltip",renderOverlay:m,floatingElementOffset:d,motionSettings:p={},autoHideMs:x,onOverlayUpdate:v,className:h})=>{const{getReferenceProps:g,getFloatingProps:E,refs:{floating:f,reference:b},floatingElementCSSPosition:_}=u({role:c,isActive:o,onOverlayUpdate:v,autoHideMs:x,floatingElementOffset:d,interactions:l,placement:s}),N=e.createElement(a.AnimatePresence,null,o&&e.createElement(a.motion.div,{ref:f,style:_,...p,...E()},m()));return e.createElement(e.Fragment,null,e.createElement("div",{ref:b,className:t("maxio-inline-flex",h),...g(),"data-testid":"overlay-trigger"},i),r?e.createElement(n.FloatingPortal,{id:"maxio-ui-portal"},N):N)},h=({children:a,loading:n=!1,fullWidth:i=!1,className:r,variant:o="primary",size:s="lg",disabled:l,icon:c,...m})=>{const d=t("maxio-button",r,{[`maxio-button--${s}`]:s,[`maxio-button--${o}`]:o,"maxio-button--loading":n,"maxio-button--full-width":i}),u=t("maxio-button__loader",{"maxio-button__loader--white":["primary","secondary","danger"].includes(o)});return e.createElement("button",{disabled:l,...m,className:d},a,!n&&c,n&&e.createElement("div",{className:u}))},g=({children:a,arrowPosition:n,size:i="regular",maxWidth:r=160})=>e.createElement("div",{"data-testid":"tooltip",className:t("maxio-tooltip",`maxio-tooltip--${i}`,{[`maxio-tooltip--arrow-${n}`]:n})},e.createElement("div",{className:"maxio-tooltip__content",style:{maxWidth:r}},a)),E={top:"bottom",right:"left",bottom:"top",left:"right","top-start":"bottom-left","top-end":"bottom-right","right-start":"left-top","right-end":"left-bottom","bottom-start":"top-left","bottom-end":"top-right","left-start":"right-top","left-end":"right-bottom"},f=({children:t,interactions:a=["hover"],placement:n="right",maxWidth:i=160,size:r="regular",renderContent:o,autoHideMs:s,isVisible:l,usePortal:c,className:m,onVisibilityUpdate:d,floatingElementOffset:u=5})=>{const[p,x]=e.useState(!1),h=void 0!==l,f=e.useCallback((e=>{h||x(e),d&&d(e)}),[l]),b=e.useMemo((()=>(e=>{const t=e.startsWith("top")||e.startsWith("bottom")?"Y":"X",a=`translate${t}(${e.startsWith("bottom")||e.startsWith("right")?"-":""}10px)`;return{initial:{opacity:0,visibility:"hidden",transform:a},animate:{opacity:1,visibility:"visible",transform:`translate${t}(0px)`},exit:{opacity:0,visibility:"hidden",transform:a},transition:{ease:[.4,0,.5,1],duration:.2}}})(n)),[n]);return e.createElement(v,{role:"tooltip",className:m,floatingElementOffset:u,motionSettings:b,isActive:h?l:p,onOverlayUpdate:f,autoHideMs:s,usePortal:c,placement:n,interactions:a,renderOverlay:()=>e.createElement(g,{size:r,arrowPosition:E[n],maxWidth:i},o())},t)},b=({children:a,as:n,iconName:i,noPadding:o,className:s,...l})=>{const c=n||"button",m=t("maxio-header-button",s,{"maxio-header-button--no-padding":o});return e.createElement(c,{className:m,...l},e.createElement("div",{className:"maxio-header-button__content"},a||null,i&&e.createElement(r,{variant:i})))},_=e.forwardRef((({className:a,...n},i)=>e.createElement("div",{className:t("maxio-header-search-field",a)},e.createElement("div",{className:"maxio-header-search-field__button"},e.createElement(r,{variant:"search"})),e.createElement("input",{ref:i,className:"maxio-header-search-field__input",type:"search",placeholder:"Search",name:"search",...n}))));_.displayName="SearchField";const N=e.forwardRef((({options:t,...a},n)=>e.createElement("div",{className:"maxio-header-search-menu",role:"button"},e.createElement("select",{name:"entity",className:"maxio-header-search-menu__select","aria-label":"Select entity",ref:n,...a},t.map((({label:t,value:a})=>e.createElement("option",{key:`${t}-${a}`,value:a},t)))),e.createElement("div",{className:"maxio-header-search-menu__icon"},e.createElement(r,{variant:"chevron-down"})))));N.displayName="SearchMenu";const w=({leadingIcon:t,trailingIcon:a,type:n="menu",children:i,leadingIconClassName:o,isTooltipVisible:s=!1})=>e.createElement(e.Fragment,null,e.createElement(f,{usePortal:!1,isVisible:s,renderContent:()=>i,floatingElementOffset:12},t&&e.createElement("span",{className:"maxio-side-nav__icon"},e.createElement(r,{variant:t,className:o}))),e.createElement("span",{className:`maxio-side-nav__${n}-title`,"data-testid":"maxio-sidebar-section-name"},i),a&&e.createElement("span",{className:"maxio-side-nav__menu-chevron"},e.createElement(r,{variant:a}))),y=e.createContext({}),k=()=>e.useContext(y),C=({children:t,withIcons:a=!0,sections:n,shouldToggleSidebar:i=!0,topDropdownItems:r,collapseBreakpoint:o=800})=>{const[s,l]=e.useState((()=>!i||("undefined"==typeof window||window.innerWidth>o))),[c,m]=e.useState(n),d=()=>l(!0),u=()=>l(!1),{windowWitdh:p}=x();e.useEffect((()=>{!function(e){if(!i)return;e<o&&s&&v();e>o&&!s&&h()}(p)}),[p]),e.useEffect((()=>{s?h():v()}),[]);return e.createElement(y.Provider,{value:{sections:c,topDropdownItems:r,onSectionOpen:e=>{const t=g();m((a=>a.map((a=>{var n;const i=a.name===e&&!a.isOpen;return t&&(null===(n=a.items)||void 0===n?void 0:n.includes(t))?{...a,isOpen:i,isCurrent:!i}:{...a,isOpen:i}}))))},isOpen:s,onOpen:d,onClose:u,onToggle:()=>l((e=>!e)),withIcons:a}},t);function v(){const e=g();e&&(m((t=>t.map((t=>{var a;return{...t,isOpen:!1,isCurrent:(null===(a=t.items)||void 0===a?void 0:a.includes(e))||!1}})))),u())}function h(){const e=g();e&&(m((t=>t.map((t=>{var a;return{...t,isOpen:(null===(a=t.items)||void 0===a?void 0:a.includes(e))||!1,isCurrent:!1}})))),d())}function g(){return c.map((e=>e.items)).flat().filter((e=>null!=e)).find((e=>e.isCurrent))}},I=()=>{const{onOpen:t,topDropdownItems:a,isOpen:n}=k(),{mainItem:i,otherItems:r,actions:s}=a,l=e.useRef(null),c=p(l),m=e=>({label:e.title,leadingIconName:e.icon,link:{href:e.url}}),d=e.useMemo((()=>[...r.map(m),r.length>0&&{type:"divider",id:"item-divider"},...s.map(m)].filter((e=>null!=e))),[s,r]),u=r.length+s.length;return e.createElement(e.Fragment,null,0===u?e.createElement("a",{className:"maxio-side-nav__menu-button maxio-side-nav__menu-button--large",href:i.url,onClick:t},e.createElement("span",{className:"maxio-side-nav__menu-title"},i.title)):e.createElement("details",{className:"maxio-action-menu maxio-side-nav--action-menu"},e.createElement("summary",{onClick:t,className:"maxio-side-nav__menu-button maxio-side-nav__menu-button--large","aria-haspopup":"true",ref:l},i.url?e.createElement(e.Fragment,null,e.createElement(w,{type:"menu",isTooltipVisible:!n&&c,leadingIcon:i.icon,trailingIcon:"chevron-down",leadingIconClassName:"maxio-icon-circle-fill maxio-icon--success"},i.title)):e.createElement(w,{type:"menu",trailingIcon:"chevron-down"},i.title)),e.createElement(o,{items:d})))},O=({section:t})=>{const{isOpen:a}=k(),n=e.useRef(null),i=p(n);return e.createElement("li",{className:"maxio-side-nav__item","data-key":t.key,"data-testid":"maxio-sidebar-section"},e.createElement("a",{className:"maxio-side-nav__link","aria-current":t.isCurrent?"page":void 0,role:"button",href:t.href,ref:n},e.createElement(w,{isTooltipVisible:i&&!a,type:"menu",leadingIcon:t.icon},t.name)))},T=({section:a})=>{var n;const{onOpen:i,onSectionOpen:r,isOpen:o,withIcons:s}=k();const l=e.useRef(null),c=p(l);return a.Component?e.createElement(a.Component,{section:a}):a.href?e.createElement(O,{section:a}):e.createElement("li",{className:t("maxio-side-nav__item",{"maxio-side-nav__item--active":a.isCurrent,"maxio-side-nav__item--icon":s}),"data-testid":"maxio-sidebar-section"},e.createElement("button",{className:"maxio-side-nav__menu-button",ref:l,"aria-expanded":a.isOpen,"aria-current":a.isCurrent?"page":void 0,type:"button",onClick:function(){r(a.name),i()}},e.createElement(w,{type:"menu",isTooltipVisible:!o&&c,leadingIcon:a.icon,trailingIcon:(null===(n=a.items)||void 0===n?void 0:n.length)?"chevron-down":void 0},a.name)),a.isOpen&&e.createElement("ul",{className:"maxio-side-nav__menu"},a.items.map((t=>e.createElement("li",{key:`section-sub-item-${t.name}`,className:"maxio-side-nav__item","data-testid":"maxio-section-item"},e.createElement("a",{className:"maxio-side-nav__link",href:t.href,"aria-current":t.isCurrent?"page":void 0},e.createElement("span",{className:"maxio-side-nav__link-title"},t.name)))))))},S=()=>{const{sections:t}=k();return e.createElement("ul",{className:"maxio-side-nav__items"},t.map((t=>e.createElement(T,{key:`section-${t.name}`,section:t}))))},P=()=>{const{isOpen:a}=k();return e.createElement("nav",{className:t("maxio-side-nav",{"maxio-side-nav--collapsed":!a})},e.createElement(I,null),e.createElement("hr",{className:"maxio-side-nav__divider"}),e.createElement(S,null))},$={sm:"h3",md:"h2",lg:"h1"},D=e.createContext({}),F=()=>e.useContext(D),H=({children:t,variant:a,withDivider:n,defaultIndex:i=0,onChange:r,index:o})=>{const[s,l]=e.useState((()=>void 0!==o?o:i));e.useEffect((()=>{void 0===o&&l(i),"number"==typeof o&&l(o)}),[i,o]);return e.createElement(D.Provider,{value:{currentIndex:s,variant:a,withDivider:n,onChange:e=>{void 0===o&&l(e),"function"==typeof r&&r(e)}}},t)},W=({disabled:a=!1,value:n=0,...i})=>{const{onChange:r,currentIndex:o}=F(),s=t("maxio-tabs__tab",{"maxio-tabs__tab--active":o===n,"maxio-tabs__tab--disabled":a,"maxio-tabs__tab--icon":"icon"===i.type}),l=()=>{r(n)};if("icon"===i.type){const{icon:t}=i;return e.createElement("div",{className:s,onClick:l},e.createElement("div",{className:"maxio-tabs__tab__content"},t))}const{children:c,rightIcon:m}=i;return e.createElement("div",{className:s,onClick:l},e.createElement("div",{className:"maxio-tabs__tab__content"},c,m||null))},R=({children:t})=>e.createElement(e.Fragment,null,t);exports.ActionList=o,exports.Avatar=({className:a,src:n,alt:i="avatar"})=>e.createElement("img",{className:t("maxio-avatar",a),alt:i,src:n}),exports.Body=({as:a="div",children:n,compact:i=!1,size:r="md",className:o,...s})=>{const l=a,c=t({[`maxio-body-${r}`]:!i,[`maxio-body-${r}-compact`]:i},o);return e.createElement(l,{className:c,...s},n)},exports.BrandLogo=({icon:a,variant:n="default"})=>e.createElement("i",{className:t("maxio-brand-logo",`maxio-brand-logo-${a}`,{[`maxio-brand-logo--${n}`]:"default"!==n})}),exports.Button=h,exports.Code=({as:a="div",children:n,className:i,...r})=>{const o=a,s=t("maxio-code",i);return e.createElement(o,{className:s,...r},n)},exports.Display=({as:a="div",children:n,size:i="md",className:r,...o})=>{const s=a,l=t(`maxio-display-${i}`,r);return e.createElement(s,{className:l,...o},n)},exports.HeaderButton=b,exports.HeaderNav=({items:a})=>e.createElement("ul",{className:"maxio-header-nav"},a.map((({label:a,id:n,isActive:i,...r})=>e.createElement("li",{className:"maxio-header-nav__item",key:`header-nav-list-item-${n}`},e.createElement("a",{className:t("maxio-header-nav__link",{"maxio-header-nav__link--active":i}),...r},a))))),exports.HeaderSearchField=_,exports.HeaderSearchInput=({options:t,onSubmit:a})=>{const n=e.useRef(null),i=e.useRef(null);return e.createElement("form",{className:"maxio-header-search-input",onSubmit:function(e){var t,r;e.preventDefault(),a({searchField:(null===(t=n.current)||void 0===t?void 0:t.value)||"",selectField:(null===(r=i.current)||void 0===r?void 0:r.value)||""})}},e.createElement(N,{ref:i,options:t}),e.createElement(_,{ref:n}),e.createElement(b,{type:"submit","aria-label":"Submit search",iconName:"arrow-right"}))},exports.HeaderSearchMenu=N,exports.Heading=({children:a,size:n="sm",className:i,...r})=>{const o=$[n],s=t(`maxio-heading-${n}`,i);return e.createElement(o,{className:s,...r},a)},exports.Icon=r,exports.IconButton=({icon:t,...a})=>e.createElement(h,{icon:t,className:"maxio-button--icon",...a},null),exports.Label=({as:a="div",children:n,size:i="sm",className:r,...o})=>{const s=a,l=t(`maxio-label-${i}`,r);return e.createElement(s,{className:l,...o},n)},exports.Link=({className:a,children:n,disabled:i=!1,external:o=!1,icon:s="arrow-right",noArrow:l=!1,size:c="md",...m})=>{const d=t("maxio-link",{[`maxio-link--${c}`]:!0,"maxio-link--disabled":i},a),u=o?"_blank":"_self";return s=o?"arrow-up-right":s,e.createElement("a",{className:d,target:u,...m},e.createElement("span",{className:"maxio-link__text"},n),!l&&e.createElement(r,{variant:s}))},exports.Menu=({children:t})=>e.createElement(l,null,e.createElement(c,null,t)),exports.MenuButton=({children:a,iconName:n="chevron-down"})=>{const i=t({"maxio-action-menu__chevron":"chevron-down"===n});return e.createElement("summary",{className:"maxio-header-button","aria-haspopup":"true"},e.createElement("div",{className:"maxio-header-button__content"},a&&e.createElement("span",null,a),n&&e.createElement(r,{variant:n,className:i})))},exports.MenuList=({items:a,alignItemsEnd:n=!1})=>{const i=t("maxio-action-menu__content",{"maxio-action-menu__content--align-end":n});return e.createElement("div",{className:i},e.createElement(o,{items:a}))},exports.OverlayTrigger=v,exports.ProgressBar=({label:a,helperText:n,size:r="md",variant:o="default",status:s,value:l,maxValue:c=100})=>{const m=i.useId(),d=i.useId(),u=s&&!!a&&!!l&&!("inline"===o),p=n&&!("inline"===o),x=n&&"inline"===o,v=t("maxio-progress-bar",{"maxio-progress-bar--lg":"lg"===r,"maxio-progress-bar--success":l&&!("inline"===o)&&"success"===s,"maxio-progress-bar--error":l&&!("inline"===o)&&"error"===s,"maxio-progress-bar--indent":"indent"===o,"maxio-progress-bar--inline":"inline"===o,"maxio-progress-bar--indeterminate":void 0===l});return e.createElement("div",{className:v},a&&e.createElement("div",{id:m,className:"maxio-progress-bar__label"},a),x&&e.createElement("div",{id:d,className:"maxio-progress-bar__helper-text"},n),e.createElement("div",{className:"maxio-progress-bar__track",role:"progressbar","aria-labelledby":m,"aria-describedby":d,"aria-valuenow":l,"aria-valuemin":0,"aria-valuemax":c,"aria-busy":!s,"aria-invalid":"error"===s},e.createElement("div",{className:"maxio-progress-bar__progress",style:{"--tw-scale-x":`${l}%`}})),u&&e.createElement("div",{className:`maxio-progress-bar__${s}-icon`}),p&&e.createElement("div",{id:d,className:"maxio-progress-bar__helper-text"},n))},exports.SideNav=({withIcons:t,shouldToggleSidebar:a,topDropdownItems:n,sections:i,collapseBreakpoint:r=800})=>e.createElement(C,{collapseBreakpoint:r,withIcons:t,shouldToggleSidebar:a,topDropdownItems:n,sections:i},e.createElement(P,null)),exports.Tab=W,exports.TabList=({children:a})=>{const{variant:n,withDivider:i}=F(),r=t("maxio-tabs",{"maxio-tabs--contained":"contained"===n,"maxio-tabs--divider":i});return e.createElement("div",{className:r},e.Children.map(a,((t,a)=>{if(e.isValidElement(t)&&t.type===W)return e.cloneElement(t,{value:a});throw new Error("You can only pass <Tab /> component as children")})))},exports.TabPanel=R,exports.TabPanels=({children:t})=>{const{currentIndex:a}=F();return e.createElement(e.Fragment,null,e.Children.map(t,((t,n)=>{if(e.isValidElement(t)&&t.type===R)return n===a?e.cloneElement(t,{}):null;throw new Error("You can only pass <TabPanel /> component as children")})))},exports.Tabs=({children:t,variant:a="line",withDivider:n=!1,defaultIndex:i=0,index:r,onChange:o})=>e.createElement(H,{defaultIndex:i,variant:a,withDivider:n,index:r,onChange:o},t),exports.Toggle=({defaultChecked:a,checked:n,onChange:i,disabled:r,valueDescription:o,valueDescriptionPosition:s,className:l,name:c,id:m})=>{const d=e.useId(),u="boolean"==typeof a,p=m||d,x="left"===s?"row":"row-reverse",v=o&&s,h=e.useCallback((e=>{if("Enter"===e.code||"Space"===e.code){e.preventDefault();const t=e.currentTarget.checked;u&&(e.currentTarget.checked=!t),i&&i(!t,e)}}),[u,i]);return e.createElement("div",{className:t("maxio-toggle",l,{"maxio-toggle--disabled":r}),style:{display:"inline-flex",flexDirection:x},"data-testid":"toggle-container"},v?e.createElement("label",{className:"maxio-toggle__label",htmlFor:p},o):null,e.createElement("div",{className:"maxio-toggle__container"},e.createElement("input",{type:"checkbox",defaultChecked:a,checked:n,onChange:e=>{i&&i(e.target.checked,e)},onKeyDown:h,disabled:r,"aria-label":v?void 0:o,className:"maxio-toggle__checkbox",id:p,name:c}),e.createElement("div",{className:"maxio-toggle__track",role:"switch","aria-checked":n},e.createElement("div",{className:"maxio-toggle__handle"}),e.createElement("span",{className:"maxio-toggle__icon"},e.createElement("i",{className:"maxio-toggle__icon-on"})),e.createElement("span",{className:"maxio-toggle__icon"},e.createElement("i",{className:"maxio-toggle__icon-off"})))))},exports.Tooltip=g,exports.TooltipTrigger=f,exports.useHover=p,exports.useOverlayTrigger=u,exports.useWindowSize=x;
 //# sourceMappingURL=index.js.map

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@maxio-com/react-ui-components",
-  "version": "1.11.0",
+  "version": "1.11.2",
   "description": "React UI components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -49,5 +49,5 @@
     "framer-motion": "^7.6.4",
     "react-aria": "^3.28.0"
   },
-  "gitHead": "2a91df0c00c193b120df246816b0035df35b333e"
+  "gitHead": "df5ca62b46b3f940a20dff1e41d48af07169f7f3"
 }

package/typings/index.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import * as React$1 from 'react';
-import React__default, { ReactNode, RefObject, FC, ElementType } from 'react';
+import React__default, { ReactNode, RefObject, FC, ElementType, AnchorHTMLAttributes } from 'react';
 import * as _floating_ui_react_dom_interactions from '@floating-ui/react-dom-interactions';
 import { AnimationProps } from 'framer-motion';
@@ -369,4 +369,16 @@ declare const TabList: ({ children }: {
 }) => JSX.Element;
 //# sourceMappingURL=TabList.d.ts.map
-export { ActionList, Avatar, Body, BrandLogo, Button, Code, Display, HeaderButton, HeaderNav, SearchField as HeaderSearchField, SearchInput as HeaderSearchInput, SearchMenu as HeaderSearchMenu, Heading, Icon, IconButton, Interactions, Label, Menu, MenuButton, MenuList, OverlayAriaRole, OverlayTrigger, Placement, ProgressBar, SideNavWrapper as SideNav, Tab, TabList, TabPanel, TabPanels, Tabs, Toggle, Tooltip, TooltipTrigger, useHover, useOverlayTrigger, useWindowSize };
+interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    children: ReactNode;
+    size?: 'xs' | 'sm' | 'md';
+    disabled?: boolean;
+    noArrow?: boolean;
+    icon?: IconVariant;
+    external?: boolean;
+}
+declare const Link: React__default.FC<LinkProps>;
+//# sourceMappingURL=Link.d.ts.map
+export { ActionList, Avatar, Body, BrandLogo, Button, Code, Display, HeaderButton, HeaderNav, SearchField as HeaderSearchField, SearchInput as HeaderSearchInput, SearchMenu as HeaderSearchMenu, Heading, Icon, IconButton, Interactions, Label, Link, Menu, MenuButton, MenuList, OverlayAriaRole, OverlayTrigger, Placement, ProgressBar, SideNavWrapper as SideNav, Tab, TabList, TabPanel, TabPanels, Tabs, Toggle, Tooltip, TooltipTrigger, useHover, useOverlayTrigger, useWindowSize };