@maxio-com/react-ui-components 1.7.0 → 1.8.0

package/dist/index.esm.js

@@ -1 +1 @@
-import e,{createContext as t,useState as a,useContext as n,useRef as i,useEffect as o,useId as r,useCallback as l,useMemo as s,forwardRef as c}from"react";import m from"classnames";import{AnimatePresence as d,motion as u}from"framer-motion";import{useClick as p,useHover as h,useFocus as v,useDismiss as g,useFloating as E,offset as x,useInteractions as f,useRole as _,FloatingPortal as N}from"@floating-ui/react-dom-interactions";const b=({variant:t,white:a,className:n})=>e.createElement("i",{className:m("maxio-icon",`maxio-icon-${t}`,a&&"maxio-icon--white",n)}),w=({items:t,isShadowed:a=!0})=>{const n=m("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:o,description:r,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(b,{variant:n,className:"maxio-action-list__leading-icon"}),e.createElement("span",{className:"maxio-action-list__label"},o),r&&e.createElement("span",{className:"maxio-action-list__description"},r),i&&e.createElement(b,{variant:i,className:"maxio-action-list__trailing-icon"})))})))},y=({className:t,src:a,alt:n="avatar"})=>e.createElement("img",{className:m("maxio-avatar",t),alt:n,src:a}),k=t({}),O=({children:t})=>{const[n,i]=a(!1);return e.createElement(k.Provider,{value:{isOpen:n,onClose:()=>i(!1),onOpen:()=>i(!0),onToggle:()=>i((e=>!e))}},t)};const I=({children:t})=>{const{isOpen:a,onToggle:i,onClose:o}=function(){const e=n(k);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:o}):t)},C=({children:t})=>e.createElement(O,null,e.createElement(I,null,t)),S=({items:t,alignItemsEnd:a=!1})=>{const n=m("maxio-action-menu__content",{"maxio-action-menu__content--align-end":a});return e.createElement("div",{className:n},e.createElement(w,{items:t}))},$=({children:t,iconName:a="chevron-down"})=>{const n=m({"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(b,{variant:a,className:n})))},T=({icon:t,variant:a="default"})=>e.createElement("i",{className:m("maxio-brand-logo",`maxio-brand-logo-${t}`,{[`maxio-brand-logo--${a}`]:"default"!==a})}),P={click:p,hover:h,focus:v,dismiss:g},D=(e,t)=>t.map((t=>P[t](e))),W=({placement:e="top",isActive:t=!1,interactions:a=["hover"],floatingElementOffset:n=0,onOverlayUpdate:r,autoHideMs:l})=>{const s=i(null),{strategy:c,x:m,y:d,context:u,floating:p,reference:h}=E({placement:e,open:t,onOpenChange:e=>r(e),middleware:[x(n)]}),{getReferenceProps:v,getFloatingProps:g}=f([...D(u,a),_(u,{role:"tooltip"})]);o((()=>{s.current&&clearTimeout(s.current),t&&l&&(s.current=setTimeout((()=>r(!1)),l))}),[t,l]);return{isActive:t,refs:{floating:p,reference:h},floatingElementCSSPosition:{position:c,top:null!=d?d:0,left:null!=m?m:0},getReferenceProps:v,getFloatingProps:g}};function H(e,t=0){const n=i((new Date).getTime()),r=i((new Date).getTime()),[l,s]=a(!1);return o((()=>{const a=()=>{n.current=(new Date).getTime(),s(!0)},i=()=>{r.current=(new Date).getTime(),setTimeout((()=>{n.current-r.current<=0&&s(!1)}),t)},o=e&&e.current;return o&&(o.addEventListener("mouseenter",a),o.addEventListener("mouseleave",i)),()=>{o&&(o.removeEventListener("mouseenter",a),o.removeEventListener("mouseleave",i))}}),[e]),l}function F(e=500){const[t,n]=a((()=>{const{innerWidth:e,innerHeight:t}=window;return{windowWitdh:e,windowHeight:t}})),r=i(null);return o((()=>{const t=()=>{const{innerWidth:t,innerHeight:a}=window;clearTimeout(r.current),r.current=setTimeout((()=>{n({windowWitdh:t,windowHeight:a})}),e)};return window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t)}}),[e]),t}const z=({children:t,usePortal:a=!1,isActive:n=!1,placement:i="top",interactions:o=["hover"],role:r="tooltip",renderOverlay:l,floatingElementOffset:s,motionSettings:c={},autoHideMs:p,onOverlayUpdate:h,className:v})=>{const{getReferenceProps:g,getFloatingProps:E,refs:{floating:x,reference:f},floatingElementCSSPosition:_}=W({role:r,isActive:n,onOverlayUpdate:h,autoHideMs:p,floatingElementOffset:s,interactions:o,placement:i}),b=e.createElement(d,null,n&&e.createElement(u.div,{ref:x,style:_,...c,...E()},l()));return e.createElement(e.Fragment,null,e.createElement("div",{ref:f,className:m("maxio-inline-flex",v),...g(),"data-testid":"overlay-trigger"},t),a?e.createElement(N,{id:"maxio-ui-portal"},b):b)},M=({children:t,loading:a=!1,loadingText:n,fullWidth:i=!1,className:o,variant:r="primary",size:l="lg",disabled:s,rightIcon:c,leftIcon:d,...u})=>{const p=m("maxio-button",o,{[`maxio-button--${l}`]:"lg"!==l&&!!t,[`maxio-button--icon-${l}`]:!t,[`maxio-button--${r}`]:"primary"!==r,"maxio-button--loading":a,"maxio-button--full-width":i}),h=m("maxio-button__loader",{"maxio-button__loader--white":["primary","secondary","danger"].includes(r)});return e.createElement("button",{disabled:s,...u,className:p},!a&&d,a&&"string"==typeof n?n:t,!a&&c,a&&e.createElement("div",{className:h}))},V=({icon:t,...a})=>e.createElement(M,{rightIcon:t,...a},null),A=({defaultChecked:t,checked:a,onChange:n,disabled:i,valueDescription:o,valueDescriptionPosition:s,className:c,name:d,id:u})=>{const p=r(),h="boolean"==typeof t,v=u||p,g="left"===s?"row":"row-reverse",E=o&&s,x=l((e=>{if("Enter"===e.code||"Space"===e.code){e.preventDefault();const t=e.currentTarget.checked;h&&(e.currentTarget.checked=!t),n&&n(!t,e)}}),[h,n]);return e.createElement("div",{className:m("maxio-toggle",c,{"maxio-toggle--disabled":i}),style:{display:"inline-flex",flexDirection:g},"data-testid":"toggle-container"},E?e.createElement("label",{className:"maxio-toggle__label",htmlFor:v},o):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:x,disabled:i,"aria-label":E?void 0:o,className:"maxio-toggle__checkbox",id:v,name:d}),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"})))))},L=({children:t,arrowPosition:a,size:n="regular",maxWidth:i=160})=>e.createElement("div",{"data-testid":"tooltip",className:m("maxio-tooltip",`maxio-tooltip--${n}`,{[`maxio-tooltip--arrow-${a}`]:a})},e.createElement("div",{className:"maxio-tooltip__content",style:{maxWidth:i}},t)),U={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"},B=({children:t,interactions:n=["hover"],placement:i="right",maxWidth:o=160,size:r="regular",renderContent:c,autoHideMs:m,isVisible:d,usePortal:u,className:p,onVisibilityUpdate:h,floatingElementOffset:v=5})=>{const[g,E]=a(!1),x=void 0!==d,f=l((e=>{x||E(e),h&&h(e)}),[d]),_=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(z,{role:"tooltip",className:p,floatingElementOffset:v,motionSettings:_,isActive:x?d:g,onOverlayUpdate:f,autoHideMs:m,usePortal:u,placement:i,interactions:n,renderOverlay:()=>e.createElement(L,{size:r,arrowPosition:U[i],maxWidth:o},c())},t)},R=({children:t,as:a,iconName:n,noPadding:i,className:o,...r})=>{const l=a||"button",s=m("maxio-header-button",o,{"maxio-header-button--no-padding":i});return e.createElement(l,{className:s,...r},e.createElement("div",{className:"maxio-header-button__content"},t||null,n&&e.createElement(b,{variant:n})))},j=({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:m("maxio-header-nav__link",{"maxio-header-nav__link--active":n}),...i},t))))),K=c((({className:t,...a},n)=>e.createElement("div",{className:m("maxio-header-search-field",t)},e.createElement("div",{className:"maxio-header-search-field__button"},e.createElement(b,{variant:"search"})),e.createElement("input",{ref:n,className:"maxio-header-search-field__input",type:"search",placeholder:"Search",name:"search",...a}))));K.displayName="SearchField";const X=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(b,{variant:"chevron-down"})))));X.displayName="SearchMenu";const Y=({options:t,onSubmit:a})=>{const n=i(null),o=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=o.current)||void 0===i?void 0:i.value)||""})}},e.createElement(X,{ref:o,options:t}),e.createElement(K,{ref:n}),e.createElement(R,{type:"submit","aria-label":"Submit search",iconName:"arrow-right"}))},q=({leadingIcon:t,trailingIcon:a,type:n="menu",children:i,leadingIconClassName:o,isTooltipVisible:r=!1})=>e.createElement(e.Fragment,null,e.createElement(B,{usePortal:!1,isVisible:r,renderContent:()=>i,floatingElementOffset:12},t&&e.createElement("span",{className:"maxio-side-nav__icon"},e.createElement(b,{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(b,{variant:a}))),G=t({}),J=()=>n(G),Q=({children:t,withIcons:n=!0,sections:i,shouldToggleSidebar:r=!0,topDropdownItems:l,collapseBreakpoint:s=800})=>{const[c,m]=a((()=>!r||("undefined"==typeof window||window.innerWidth>s))),[d,u]=a(i),p=()=>m(!0),h=()=>m(!1),{windowWitdh:v}=F();o((()=>{!function(e){if(!r)return;e<s&&c&&g();e>s&&!c&&E()}(v)}),[v]),o((()=>{c?E():g()}),[]);return e.createElement(G.Provider,{value:{sections:d,topDropdownItems:l,onSectionOpen:e=>{const t=x();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:h,onToggle:()=>m((e=>!e)),withIcons:n}},t);function g(){const e=x();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}})))),h())}function E(){const e=x();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 x(){return d.map((e=>e.items)).flat().filter((e=>null!=e)).find((e=>e.isCurrent))}},Z=()=>{const{onOpen:t,topDropdownItems:a,isOpen:n}=J(),{mainItem:o,otherItems:r,actions:l}=a,c=i(null),m=H(c),d=e=>({label:e.title,leadingIconName:e.icon,link:{href:e.url}}),u=s((()=>[...r.map(d),r.length>0&&{type:"divider",id:"item-divider"},...l.map(d)].filter((e=>null!=e))),[l,r]),p=r.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:o.url,onClick:t},e.createElement("span",{className:"maxio-side-nav__menu-title"},o.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},o.url?e.createElement(e.Fragment,null,e.createElement(q,{type:"menu",isTooltipVisible:!n&&m,leadingIcon:o.icon,trailingIcon:"chevron-down",leadingIconClassName:"maxio-icon-circle-fill maxio-icon--success"},o.title)):e.createElement(q,{type:"menu",trailingIcon:"chevron-down"},o.title)),e.createElement(w,{items:u})))},ee=({section:t})=>{const{isOpen:a}=J(),n=i(null),o=H(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(q,{isTooltipVisible:o&&!a,type:"menu",leadingIcon:t.icon},t.name)))},te=({section:t})=>{var a;const{onOpen:n,onSectionOpen:o,isOpen:r,withIcons:l}=J();const s=i(null),c=H(s);return t.Component?e.createElement(t.Component,{section:t}):t.href?e.createElement(ee,{section:t}):e.createElement("li",{className:m("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(){o(t.name),n()}},e.createElement(q,{type:"menu",isTooltipVisible:!r&&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)))))))},ae=()=>{const{sections:t}=J();return e.createElement("ul",{className:"maxio-side-nav__items"},t.map((t=>e.createElement(te,{key:`section-${t.name}`,section:t}))))},ne=()=>{const{isOpen:t}=J();return e.createElement("nav",{className:m("maxio-side-nav",{"maxio-side-nav--collapsed":!t})},e.createElement(Z,null),e.createElement("hr",{className:"maxio-side-nav__divider"}),e.createElement(ae,null))},ie=({withIcons:t,shouldToggleSidebar:a,topDropdownItems:n,sections:i,collapseBreakpoint:o=800})=>e.createElement(Q,{collapseBreakpoint:o,withIcons:t,shouldToggleSidebar:a,topDropdownItems:n,sections:i},e.createElement(ne,null)),oe=({as:t="div",children:a,compact:n=!1,size:i="md",className:o,...r})=>{const l=t,s=m({[`maxio-body-${i}`]:!n,[`maxio-body-${i}-compact`]:n},o);return e.createElement(l,{className:s,...r},a)},re={sm:"h3",md:"h2",lg:"h1"},le=({children:t,size:a="sm",className:n,...i})=>{const o=re[a],r=m(`maxio-heading-${a}`,n);return e.createElement(o,{className:r,...i},t)},se=({as:t="div",children:a,size:n="md",className:i,...o})=>{const r=t,l=m(`maxio-display-${n}`,i);return e.createElement(r,{className:l,...o},a)},ce=({as:t="div",children:a,className:n,...i})=>{const o=t,r=m("maxio-code",n);return e.createElement(o,{className:r,...i},a)},me=({as:t="div",children:a,size:n="sm",className:i,...o})=>{const r=t,l=m(`maxio-label-${n}`,i);return e.createElement(r,{className:l,...o},a)};export{w as ActionList,y as Avatar,oe as Body,T as BrandLogo,M as Button,ce as Code,se as Display,R as HeaderButton,j as HeaderNav,K as HeaderSearchField,Y as HeaderSearchInput,X as HeaderSearchMenu,le as Heading,b as Icon,V as IconButton,me as Label,C as Menu,$ as MenuButton,S as MenuList,z as OverlayTrigger,ie as SideNav,A as Toggle,L as Tooltip,B as TooltipTrigger,H as useHover,W as useOverlayTrigger,F as useWindowSize};
+import e,{createContext as t,useState as a,useContext as n,useRef as i,useEffect as o,useId as r,useCallback as l,useMemo as s,forwardRef as c}from"react";import m from"classnames";import{AnimatePresence as d,motion as u}from"framer-motion";import{useClick as p,useHover as v,useFocus as h,useDismiss as g,useFloating as E,offset as x,useInteractions as _,useRole as f,FloatingPortal as N}from"@floating-ui/react-dom-interactions";const b=({variant:t,white:a,className:n})=>e.createElement("i",{className:m("maxio-icon",`maxio-icon-${t}`,a&&"maxio-icon--white",n)}),w=({items:t,isShadowed:a=!0})=>{const n=m("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:o,description:r,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(b,{variant:n,className:"maxio-action-list__leading-icon"}),e.createElement("span",{className:"maxio-action-list__label"},o),r&&e.createElement("span",{className:"maxio-action-list__description"},r),i&&e.createElement(b,{variant:i,className:"maxio-action-list__trailing-icon"})))})))},y=({className:t,src:a,alt:n="avatar"})=>e.createElement("img",{className:m("maxio-avatar",t),alt:n,src:a}),k=t({}),O=({children:t})=>{const[n,i]=a(!1);return e.createElement(k.Provider,{value:{isOpen:n,onClose:()=>i(!1),onOpen:()=>i(!0),onToggle:()=>i((e=>!e))}},t)};const C=({children:t})=>{const{isOpen:a,onToggle:i,onClose:o}=function(){const e=n(k);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:o}):t)},I=({children:t})=>e.createElement(O,null,e.createElement(C,null,t)),$=({items:t,alignItemsEnd:a=!1})=>{const n=m("maxio-action-menu__content",{"maxio-action-menu__content--align-end":a});return e.createElement("div",{className:n},e.createElement(w,{items:t}))},S=({children:t,iconName:a="chevron-down"})=>{const n=m({"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(b,{variant:a,className:n})))},T=({icon:t,variant:a="default"})=>e.createElement("i",{className:m("maxio-brand-logo",`maxio-brand-logo-${t}`,{[`maxio-brand-logo--${a}`]:"default"!==a})}),P={click:p,hover:v,focus:h,dismiss:g},D=(e,t)=>t.map((t=>P[t](e))),W=({placement:e="top",isActive:t=!1,interactions:a=["hover"],floatingElementOffset:n=0,onOverlayUpdate:r,autoHideMs:l})=>{const s=i(null),{strategy:c,x:m,y:d,context:u,floating:p,reference:v}=E({placement:e,open:t,onOpenChange:e=>r(e),middleware:[x(n)]}),{getReferenceProps:h,getFloatingProps:g}=_([...D(u,a),f(u,{role:"tooltip"})]);o((()=>{s.current&&clearTimeout(s.current),t&&l&&(s.current=setTimeout((()=>r(!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 H(e,t=0){const n=i((new Date).getTime()),r=i((new Date).getTime()),[l,s]=a(!1);return o((()=>{const a=()=>{n.current=(new Date).getTime(),s(!0)},i=()=>{r.current=(new Date).getTime(),setTimeout((()=>{n.current-r.current<=0&&s(!1)}),t)},o=e&&e.current;return o&&(o.addEventListener("mouseenter",a),o.addEventListener("mouseleave",i)),()=>{o&&(o.removeEventListener("mouseenter",a),o.removeEventListener("mouseleave",i))}}),[e]),l}function F(e=500){const[t,n]=a((()=>{const{innerWidth:e,innerHeight:t}=window;return{windowWitdh:e,windowHeight:t}})),r=i(null);return o((()=>{const t=()=>{const{innerWidth:t,innerHeight:a}=window;clearTimeout(r.current),r.current=setTimeout((()=>{n({windowWitdh:t,windowHeight:a})}),e)};return window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t)}}),[e]),t}const z=({children:t,usePortal:a=!1,isActive:n=!1,placement:i="top",interactions:o=["hover"],role:r="tooltip",renderOverlay:l,floatingElementOffset:s,motionSettings:c={},autoHideMs:p,onOverlayUpdate:v,className:h})=>{const{getReferenceProps:g,getFloatingProps:E,refs:{floating:x,reference:_},floatingElementCSSPosition:f}=W({role:r,isActive:n,onOverlayUpdate:v,autoHideMs:p,floatingElementOffset:s,interactions:o,placement:i}),b=e.createElement(d,null,n&&e.createElement(u.div,{ref:x,style:f,...c,...E()},l()));return e.createElement(e.Fragment,null,e.createElement("div",{ref:_,className:m("maxio-inline-flex",h),...g(),"data-testid":"overlay-trigger"},t),a?e.createElement(N,{id:"maxio-ui-portal"},b):b)},M=({children:t,loading:a=!1,fullWidth:n=!1,className:i,variant:o="primary",size:r="lg",disabled:l,icon:s,...c})=>{const d=m("maxio-button",i,{[`maxio-button--${r}`]:r,[`maxio-button--${o}`]:o,"maxio-button--loading":a,"maxio-button--full-width":n}),u=m("maxio-button__loader",{"maxio-button__loader--white":["primary","secondary","danger"].includes(o)});return e.createElement("button",{disabled:l,...c,className:d},t,!a&&s,a&&e.createElement("div",{className:u}))},V=({icon:t,...a})=>e.createElement(M,{icon:t,className:"maxio-button--icon",...a},null),A=({defaultChecked:t,checked:a,onChange:n,disabled:i,valueDescription:o,valueDescriptionPosition:s,className:c,name:d,id:u})=>{const p=r(),v="boolean"==typeof t,h=u||p,g="left"===s?"row":"row-reverse",E=o&&s,x=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:m("maxio-toggle",c,{"maxio-toggle--disabled":i}),style:{display:"inline-flex",flexDirection:g},"data-testid":"toggle-container"},E?e.createElement("label",{className:"maxio-toggle__label",htmlFor:h},o):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:x,disabled:i,"aria-label":E?void 0:o,className:"maxio-toggle__checkbox",id:h,name:d}),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"})))))},L=({children:t,arrowPosition:a,size:n="regular",maxWidth:i=160})=>e.createElement("div",{"data-testid":"tooltip",className:m("maxio-tooltip",`maxio-tooltip--${n}`,{[`maxio-tooltip--arrow-${a}`]:a})},e.createElement("div",{className:"maxio-tooltip__content",style:{maxWidth:i}},t)),U={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"},B=({children:t,interactions:n=["hover"],placement:i="right",maxWidth:o=160,size:r="regular",renderContent:c,autoHideMs:m,isVisible:d,usePortal:u,className:p,onVisibilityUpdate:v,floatingElementOffset:h=5})=>{const[g,E]=a(!1),x=void 0!==d,_=l((e=>{x||E(e),v&&v(e)}),[d]),f=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(z,{role:"tooltip",className:p,floatingElementOffset:h,motionSettings:f,isActive:x?d:g,onOverlayUpdate:_,autoHideMs:m,usePortal:u,placement:i,interactions:n,renderOverlay:()=>e.createElement(L,{size:r,arrowPosition:U[i],maxWidth:o},c())},t)},R=({children:t,as:a,iconName:n,noPadding:i,className:o,...r})=>{const l=a||"button",s=m("maxio-header-button",o,{"maxio-header-button--no-padding":i});return e.createElement(l,{className:s,...r},e.createElement("div",{className:"maxio-header-button__content"},t||null,n&&e.createElement(b,{variant:n})))},j=({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:m("maxio-header-nav__link",{"maxio-header-nav__link--active":n}),...i},t))))),K=c((({className:t,...a},n)=>e.createElement("div",{className:m("maxio-header-search-field",t)},e.createElement("div",{className:"maxio-header-search-field__button"},e.createElement(b,{variant:"search"})),e.createElement("input",{ref:n,className:"maxio-header-search-field__input",type:"search",placeholder:"Search",name:"search",...a}))));K.displayName="SearchField";const X=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(b,{variant:"chevron-down"})))));X.displayName="SearchMenu";const Y=({options:t,onSubmit:a})=>{const n=i(null),o=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=o.current)||void 0===i?void 0:i.value)||""})}},e.createElement(X,{ref:o,options:t}),e.createElement(K,{ref:n}),e.createElement(R,{type:"submit","aria-label":"Submit search",iconName:"arrow-right"}))},q=({leadingIcon:t,trailingIcon:a,type:n="menu",children:i,leadingIconClassName:o,isTooltipVisible:r=!1})=>e.createElement(e.Fragment,null,e.createElement(B,{usePortal:!1,isVisible:r,renderContent:()=>i,floatingElementOffset:12},t&&e.createElement("span",{className:"maxio-side-nav__icon"},e.createElement(b,{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(b,{variant:a}))),G=t({}),J=()=>n(G),Q=({children:t,withIcons:n=!0,sections:i,shouldToggleSidebar:r=!0,topDropdownItems:l,collapseBreakpoint:s=800})=>{const[c,m]=a((()=>!r||("undefined"==typeof window||window.innerWidth>s))),[d,u]=a(i),p=()=>m(!0),v=()=>m(!1),{windowWitdh:h}=F();o((()=>{!function(e){if(!r)return;e<s&&c&&g();e>s&&!c&&E()}(h)}),[h]),o((()=>{c?E():g()}),[]);return e.createElement(G.Provider,{value:{sections:d,topDropdownItems:l,onSectionOpen:e=>{const t=x();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=x();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 E(){const e=x();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 x(){return d.map((e=>e.items)).flat().filter((e=>null!=e)).find((e=>e.isCurrent))}},Z=()=>{const{onOpen:t,topDropdownItems:a,isOpen:n}=J(),{mainItem:o,otherItems:r,actions:l}=a,c=i(null),m=H(c),d=e=>({label:e.title,leadingIconName:e.icon,link:{href:e.url}}),u=s((()=>[...r.map(d),r.length>0&&{type:"divider",id:"item-divider"},...l.map(d)].filter((e=>null!=e))),[l,r]),p=r.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:o.url,onClick:t},e.createElement("span",{className:"maxio-side-nav__menu-title"},o.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},o.url?e.createElement(e.Fragment,null,e.createElement(q,{type:"menu",isTooltipVisible:!n&&m,leadingIcon:o.icon,trailingIcon:"chevron-down",leadingIconClassName:"maxio-icon-circle-fill maxio-icon--success"},o.title)):e.createElement(q,{type:"menu",trailingIcon:"chevron-down"},o.title)),e.createElement(w,{items:u})))},ee=({section:t})=>{const{isOpen:a}=J(),n=i(null),o=H(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(q,{isTooltipVisible:o&&!a,type:"menu",leadingIcon:t.icon},t.name)))},te=({section:t})=>{var a;const{onOpen:n,onSectionOpen:o,isOpen:r,withIcons:l}=J();const s=i(null),c=H(s);return t.Component?e.createElement(t.Component,{section:t}):t.href?e.createElement(ee,{section:t}):e.createElement("li",{className:m("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(){o(t.name),n()}},e.createElement(q,{type:"menu",isTooltipVisible:!r&&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)))))))},ae=()=>{const{sections:t}=J();return e.createElement("ul",{className:"maxio-side-nav__items"},t.map((t=>e.createElement(te,{key:`section-${t.name}`,section:t}))))},ne=()=>{const{isOpen:t}=J();return e.createElement("nav",{className:m("maxio-side-nav",{"maxio-side-nav--collapsed":!t})},e.createElement(Z,null),e.createElement("hr",{className:"maxio-side-nav__divider"}),e.createElement(ae,null))},ie=({withIcons:t,shouldToggleSidebar:a,topDropdownItems:n,sections:i,collapseBreakpoint:o=800})=>e.createElement(Q,{collapseBreakpoint:o,withIcons:t,shouldToggleSidebar:a,topDropdownItems:n,sections:i},e.createElement(ne,null)),oe=({label:t,helperText:a,size:n="md",variant:i="primary",indent:o=!1,inline:r=!1,value:l=0,leftPosition:s=0})=>{const c=m("maxio-progress-bar",{"maxio-progress-bar--lg":"lg"===n,"maxio-progress-bar--success":"success"===i,"maxio-progress-bar--error":"error"===i,"maxio-progress-bar--indent":o,"maxio-progress-bar--inline":r});return e.createElement("div",{className:c},t&&e.createElement("div",{className:"maxio-progress-bar__label"},t),e.createElement("div",{className:"maxio-progress-bar__track"},e.createElement("div",{className:"maxio-progress-bar__progress",style:{width:`${l}%`,left:`${s}%`}})),("success"===i||"error"===i)&&!!t&&e.createElement("div",{className:`maxio-progress-bar__${i}-icon`}),a&&e.createElement("div",{className:"maxio-progress-bar__helper-text"},a))},re=({as:t="div",children:a,compact:n=!1,size:i="md",className:o,...r})=>{const l=t,s=m({[`maxio-body-${i}`]:!n,[`maxio-body-${i}-compact`]:n},o);return e.createElement(l,{className:s,...r},a)},le={sm:"h3",md:"h2",lg:"h1"},se=({children:t,size:a="sm",className:n,...i})=>{const o=le[a],r=m(`maxio-heading-${a}`,n);return e.createElement(o,{className:r,...i},t)},ce=({as:t="div",children:a,size:n="md",className:i,...o})=>{const r=t,l=m(`maxio-display-${n}`,i);return e.createElement(r,{className:l,...o},a)},me=({as:t="div",children:a,className:n,...i})=>{const o=t,r=m("maxio-code",n);return e.createElement(o,{className:r,...i},a)},de=({as:t="div",children:a,size:n="sm",className:i,...o})=>{const r=t,l=m(`maxio-label-${n}`,i);return e.createElement(r,{className:l,...o},a)};export{w as ActionList,y as Avatar,re as Body,T as BrandLogo,M as Button,me as Code,ce as Display,R as HeaderButton,j as HeaderNav,K as HeaderSearchField,Y as HeaderSearchInput,X as HeaderSearchMenu,se as Heading,b as Icon,V as IconButton,de as Label,I as Menu,S as MenuButton,$ as MenuList,z as OverlayTrigger,oe as ProgressBar,ie as SideNav,A as Toggle,L as Tooltip,B as TooltipTrigger,H as useHover,W as useOverlayTrigger,F as useWindowSize};

package/dist/index.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react"),t=require("classnames"),a=require("framer-motion"),n=require("@floating-ui/react-dom-interactions");const i=({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 o=t("maxio-action-list",{"maxio-action-list--shadow":n});return 0===a.length?null:e.createElement("ul",{className:o},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:o,label:r,description:s,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(i,{variant:n,className:"maxio-action-list__leading-icon"}),e.createElement("span",{className:"maxio-action-list__label"},r),s&&e.createElement("span",{className:"maxio-action-list__description"},s),o&&e.createElement(i,{variant:o,className:"maxio-action-list__trailing-icon"})))})))},r=e.createContext({}),s=({children:t})=>{const[a,n]=e.useState(!1);return e.createElement(r.Provider,{value:{isOpen:a,onClose:()=>n(!1),onOpen:()=>n(!0),onToggle:()=>n((e=>!e))}},t)};const l=({children:t})=>{const{isOpen:a,onToggle:n,onClose:i}=function(){const t=e.useContext(r);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)},c={click:n.useClick,hover:n.useHover,focus:n.useFocus,dismiss:n.useDismiss},m=(e,t)=>t.map((t=>c[t](e))),d=({placement:t="top",isActive:a=!1,interactions:i=["hover"],floatingElementOffset:o=0,onOverlayUpdate:r,autoHideMs:s})=>{const l=e.useRef(null),{strategy:c,x:d,y:u,context:p,floating:v,reference:h}=n.useFloating({placement:t,open:a,onOpenChange:e=>r(e),middleware:[n.offset(o)]}),{getReferenceProps:g,getFloatingProps:x}=n.useInteractions([...m(p,i),n.useRole(p,{role:"tooltip"})]);e.useEffect((()=>{l.current&&clearTimeout(l.current),a&&s&&(l.current=setTimeout((()=>r(!1)),s))}),[a,s]);return{isActive:a,refs:{floating:v,reference:h},floatingElementCSSPosition:{position:c,top:null!=u?u:0,left:null!=d?d:0},getReferenceProps:g,getFloatingProps:x}};function u(t,a=0){const n=e.useRef((new Date).getTime()),i=e.useRef((new Date).getTime()),[o,r]=e.useState(!1);return e.useEffect((()=>{const e=()=>{n.current=(new Date).getTime(),r(!0)},o=()=>{i.current=(new Date).getTime(),setTimeout((()=>{n.current-i.current<=0&&r(!1)}),a)},s=t&&t.current;return s&&(s.addEventListener("mouseenter",e),s.addEventListener("mouseleave",o)),()=>{s&&(s.removeEventListener("mouseenter",e),s.removeEventListener("mouseleave",o))}}),[t]),o}function p(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:o=!1,isActive:r=!1,placement:s="top",interactions:l=["hover"],role:c="tooltip",renderOverlay:m,floatingElementOffset:u,motionSettings:p={},autoHideMs:v,onOverlayUpdate:h,className:g})=>{const{getReferenceProps:x,getFloatingProps:f,refs:{floating:E,reference:_},floatingElementCSSPosition:N}=d({role:c,isActive:r,onOverlayUpdate:h,autoHideMs:v,floatingElementOffset:u,interactions:l,placement:s}),b=e.createElement(a.AnimatePresence,null,r&&e.createElement(a.motion.div,{ref:E,style:N,...p,...f()},m()));return e.createElement(e.Fragment,null,e.createElement("div",{ref:_,className:t("maxio-inline-flex",g),...x(),"data-testid":"overlay-trigger"},i),o?e.createElement(n.FloatingPortal,{id:"maxio-ui-portal"},b):b)},h=({children:a,loading:n=!1,loadingText:i,fullWidth:o=!1,className:r,variant:s="primary",size:l="lg",disabled:c,rightIcon:m,leftIcon:d,...u})=>{const p=t("maxio-button",r,{[`maxio-button--${l}`]:"lg"!==l&&!!a,[`maxio-button--icon-${l}`]:!a,[`maxio-button--${s}`]:"primary"!==s,"maxio-button--loading":n,"maxio-button--full-width":o}),v=t("maxio-button__loader",{"maxio-button__loader--white":["primary","secondary","danger"].includes(s)});return e.createElement("button",{disabled:c,...u,className:p},!n&&d,n&&"string"==typeof i?i:a,!n&&m,n&&e.createElement("div",{className:v}))},g=({children:a,arrowPosition:n,size:i="regular",maxWidth:o=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:o}},a)),x={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:o="regular",renderContent:r,autoHideMs:s,isVisible:l,usePortal:c,className:m,onVisibilityUpdate:d,floatingElementOffset:u=5})=>{const[p,h]=e.useState(!1),f=void 0!==l,E=e.useCallback((e=>{f||h(e),d&&d(e)}),[l]),_=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:_,isActive:f?l:p,onOverlayUpdate:E,autoHideMs:s,usePortal:c,placement:n,interactions:a,renderOverlay:()=>e.createElement(g,{size:o,arrowPosition:x[n],maxWidth:i},r())},t)},E=({children:a,as:n,iconName:o,noPadding:r,className:s,...l})=>{const c=n||"button",m=t("maxio-header-button",s,{"maxio-header-button--no-padding":r});return e.createElement(c,{className:m,...l},e.createElement("div",{className:"maxio-header-button__content"},a||null,o&&e.createElement(i,{variant:o})))},_=e.forwardRef((({className:a,...n},o)=>e.createElement("div",{className:t("maxio-header-search-field",a)},e.createElement("div",{className:"maxio-header-search-field__button"},e.createElement(i,{variant:"search"})),e.createElement("input",{ref:o,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(i,{variant:"chevron-down"})))));N.displayName="SearchMenu";const b=({leadingIcon:t,trailingIcon:a,type:n="menu",children:o,leadingIconClassName:r,isTooltipVisible:s=!1})=>e.createElement(e.Fragment,null,e.createElement(f,{usePortal:!1,isVisible:s,renderContent:()=>o,floatingElementOffset:12},t&&e.createElement("span",{className:"maxio-side-nav__icon"},e.createElement(i,{variant:t,className:r}))),e.createElement("span",{className:`maxio-side-nav__${n}-title`,"data-testid":"maxio-sidebar-section-name"},o),a&&e.createElement("span",{className:"maxio-side-nav__menu-chevron"},e.createElement(i,{variant:a}))),w=e.createContext({}),y=()=>e.useContext(w),k=({children:t,withIcons:a=!0,sections:n,shouldToggleSidebar:i=!0,topDropdownItems:o,collapseBreakpoint:r=800})=>{const[s,l]=e.useState((()=>!i||("undefined"==typeof window||window.innerWidth>r))),[c,m]=e.useState(n),d=()=>l(!0),u=()=>l(!1),{windowWitdh:v}=p();e.useEffect((()=>{!function(e){if(!i)return;e<r&&s&&h();e>r&&!s&&g()}(v)}),[v]),e.useEffect((()=>{s?g():h()}),[]);return e.createElement(w.Provider,{value:{sections:c,topDropdownItems:o,onSectionOpen:e=>{const t=x();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 h(){const e=x();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 g(){const e=x();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 x(){return c.map((e=>e.items)).flat().filter((e=>null!=e)).find((e=>e.isCurrent))}},O=()=>{const{onOpen:t,topDropdownItems:a,isOpen:n}=y(),{mainItem:i,otherItems:r,actions:s}=a,l=e.useRef(null),c=u(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]),p=r.length+s.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: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(b,{type:"menu",isTooltipVisible:!n&&c,leadingIcon:i.icon,trailingIcon:"chevron-down",leadingIconClassName:"maxio-icon-circle-fill maxio-icon--success"},i.title)):e.createElement(b,{type:"menu",trailingIcon:"chevron-down"},i.title)),e.createElement(o,{items:d})))},C=({section:t})=>{const{isOpen:a}=y(),n=e.useRef(null),i=u(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(b,{isTooltipVisible:i&&!a,type:"menu",leadingIcon:t.icon},t.name)))},I=({section:a})=>{var n;const{onOpen:i,onSectionOpen:o,isOpen:r,withIcons:s}=y();const l=e.useRef(null),c=u(l);return a.Component?e.createElement(a.Component,{section:a}):a.href?e.createElement(C,{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(){o(a.name),i()}},e.createElement(b,{type:"menu",isTooltipVisible:!r&&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}=y();return e.createElement("ul",{className:"maxio-side-nav__items"},t.map((t=>e.createElement(I,{key:`section-${t.name}`,section:t}))))},T=()=>{const{isOpen:a}=y();return e.createElement("nav",{className:t("maxio-side-nav",{"maxio-side-nav--collapsed":!a})},e.createElement(O,null),e.createElement("hr",{className:"maxio-side-nav__divider"}),e.createElement(S,null))},$={sm:"h3",md:"h2",lg:"h1"};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:o="md",className:r,...s})=>{const l=a,c=t({[`maxio-body-${o}`]:!i,[`maxio-body-${o}-compact`]:i},r);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,...o})=>{const r=a,s=t("maxio-code",i);return e.createElement(r,{className:s,...o},n)},exports.Display=({as:a="div",children:n,size:i="md",className:o,...r})=>{const s=a,l=t(`maxio-display-${i}`,o);return e.createElement(s,{className:l,...r},n)},exports.HeaderButton=E,exports.HeaderNav=({items:a})=>e.createElement("ul",{className:"maxio-header-nav"},a.map((({label:a,id:n,isActive:i,...o})=>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}),...o},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,o;e.preventDefault(),a({searchField:(null===(t=n.current)||void 0===t?void 0:t.value)||"",selectField:(null===(o=i.current)||void 0===o?void 0:o.value)||""})}},e.createElement(N,{ref:i,options:t}),e.createElement(_,{ref:n}),e.createElement(E,{type:"submit","aria-label":"Submit search",iconName:"arrow-right"}))},exports.HeaderSearchMenu=N,exports.Heading=({children:a,size:n="sm",className:i,...o})=>{const r=$[n],s=t(`maxio-heading-${n}`,i);return e.createElement(r,{className:s,...o},a)},exports.Icon=i,exports.IconButton=({icon:t,...a})=>e.createElement(h,{rightIcon:t,...a},null),exports.Label=({as:a="div",children:n,size:i="sm",className:o,...r})=>{const s=a,l=t(`maxio-label-${i}`,o);return e.createElement(s,{className:l,...r},n)},exports.Menu=({children:t})=>e.createElement(s,null,e.createElement(l,null,t)),exports.MenuButton=({children:a,iconName:n="chevron-down"})=>{const o=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(i,{variant:n,className:o})))},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.SideNav=({withIcons:t,shouldToggleSidebar:a,topDropdownItems:n,sections:i,collapseBreakpoint:o=800})=>e.createElement(k,{collapseBreakpoint:o,withIcons:t,shouldToggleSidebar:a,topDropdownItems:n,sections:i},e.createElement(T,null)),exports.Toggle=({defaultChecked:a,checked:n,onChange:i,disabled:o,valueDescription:r,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",h=r&&s,g=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":o}),style:{display:"inline-flex",flexDirection:v},"data-testid":"toggle-container"},h?e.createElement("label",{className:"maxio-toggle__label",htmlFor:p},r):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:g,disabled:o,"aria-label":h?void 0:r,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=u,exports.useOverlayTrigger=d,exports.useWindowSize=p;
+"use strict";var e=require("react"),t=require("classnames"),a=require("framer-motion"),n=require("@floating-ui/react-dom-interactions");const i=({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 o=t("maxio-action-list",{"maxio-action-list--shadow":n});return 0===a.length?null:e.createElement("ul",{className:o},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:o,label:r,description:s,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(i,{variant:n,className:"maxio-action-list__leading-icon"}),e.createElement("span",{className:"maxio-action-list__label"},r),s&&e.createElement("span",{className:"maxio-action-list__description"},s),o&&e.createElement(i,{variant:o,className:"maxio-action-list__trailing-icon"})))})))},r=e.createContext({}),s=({children:t})=>{const[a,n]=e.useState(!1);return e.createElement(r.Provider,{value:{isOpen:a,onClose:()=>n(!1),onOpen:()=>n(!0),onToggle:()=>n((e=>!e))}},t)};const l=({children:t})=>{const{isOpen:a,onToggle:n,onClose:i}=function(){const t=e.useContext(r);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)},c={click:n.useClick,hover:n.useHover,focus:n.useFocus,dismiss:n.useDismiss},m=(e,t)=>t.map((t=>c[t](e))),d=({placement:t="top",isActive:a=!1,interactions:i=["hover"],floatingElementOffset:o=0,onOverlayUpdate:r,autoHideMs:s})=>{const l=e.useRef(null),{strategy:c,x:d,y:u,context:p,floating:v,reference:g}=n.useFloating({placement:t,open:a,onOpenChange:e=>r(e),middleware:[n.offset(o)]}),{getReferenceProps:x,getFloatingProps:h}=n.useInteractions([...m(p,i),n.useRole(p,{role:"tooltip"})]);e.useEffect((()=>{l.current&&clearTimeout(l.current),a&&s&&(l.current=setTimeout((()=>r(!1)),s))}),[a,s]);return{isActive:a,refs:{floating:v,reference:g},floatingElementCSSPosition:{position:c,top:null!=u?u:0,left:null!=d?d:0},getReferenceProps:x,getFloatingProps:h}};function u(t,a=0){const n=e.useRef((new Date).getTime()),i=e.useRef((new Date).getTime()),[o,r]=e.useState(!1);return e.useEffect((()=>{const e=()=>{n.current=(new Date).getTime(),r(!0)},o=()=>{i.current=(new Date).getTime(),setTimeout((()=>{n.current-i.current<=0&&r(!1)}),a)},s=t&&t.current;return s&&(s.addEventListener("mouseenter",e),s.addEventListener("mouseleave",o)),()=>{s&&(s.removeEventListener("mouseenter",e),s.removeEventListener("mouseleave",o))}}),[t]),o}function p(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:o=!1,isActive:r=!1,placement:s="top",interactions:l=["hover"],role:c="tooltip",renderOverlay:m,floatingElementOffset:u,motionSettings:p={},autoHideMs:v,onOverlayUpdate:g,className:x})=>{const{getReferenceProps:h,getFloatingProps:E,refs:{floating:f,reference:_},floatingElementCSSPosition:b}=d({role:c,isActive:r,onOverlayUpdate:g,autoHideMs:v,floatingElementOffset:u,interactions:l,placement:s}),N=e.createElement(a.AnimatePresence,null,r&&e.createElement(a.motion.div,{ref:f,style:b,...p,...E()},m()));return e.createElement(e.Fragment,null,e.createElement("div",{ref:_,className:t("maxio-inline-flex",x),...h(),"data-testid":"overlay-trigger"},i),o?e.createElement(n.FloatingPortal,{id:"maxio-ui-portal"},N):N)},g=({children:a,loading:n=!1,fullWidth:i=!1,className:o,variant:r="primary",size:s="lg",disabled:l,icon:c,...m})=>{const d=t("maxio-button",o,{[`maxio-button--${s}`]:s,[`maxio-button--${r}`]:r,"maxio-button--loading":n,"maxio-button--full-width":i}),u=t("maxio-button__loader",{"maxio-button__loader--white":["primary","secondary","danger"].includes(r)});return e.createElement("button",{disabled:l,...m,className:d},a,!n&&c,n&&e.createElement("div",{className:u}))},x=({children:a,arrowPosition:n,size:i="regular",maxWidth:o=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:o}},a)),h={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"},E=({children:t,interactions:a=["hover"],placement:n="right",maxWidth:i=160,size:o="regular",renderContent:r,autoHideMs:s,isVisible:l,usePortal:c,className:m,onVisibilityUpdate:d,floatingElementOffset:u=5})=>{const[p,g]=e.useState(!1),E=void 0!==l,f=e.useCallback((e=>{E||g(e),d&&d(e)}),[l]),_=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:_,isActive:E?l:p,onOverlayUpdate:f,autoHideMs:s,usePortal:c,placement:n,interactions:a,renderOverlay:()=>e.createElement(x,{size:o,arrowPosition:h[n],maxWidth:i},r())},t)},f=({children:a,as:n,iconName:o,noPadding:r,className:s,...l})=>{const c=n||"button",m=t("maxio-header-button",s,{"maxio-header-button--no-padding":r});return e.createElement(c,{className:m,...l},e.createElement("div",{className:"maxio-header-button__content"},a||null,o&&e.createElement(i,{variant:o})))},_=e.forwardRef((({className:a,...n},o)=>e.createElement("div",{className:t("maxio-header-search-field",a)},e.createElement("div",{className:"maxio-header-search-field__button"},e.createElement(i,{variant:"search"})),e.createElement("input",{ref:o,className:"maxio-header-search-field__input",type:"search",placeholder:"Search",name:"search",...n}))));_.displayName="SearchField";const b=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(i,{variant:"chevron-down"})))));b.displayName="SearchMenu";const N=({leadingIcon:t,trailingIcon:a,type:n="menu",children:o,leadingIconClassName:r,isTooltipVisible:s=!1})=>e.createElement(e.Fragment,null,e.createElement(E,{usePortal:!1,isVisible:s,renderContent:()=>o,floatingElementOffset:12},t&&e.createElement("span",{className:"maxio-side-nav__icon"},e.createElement(i,{variant:t,className:r}))),e.createElement("span",{className:`maxio-side-nav__${n}-title`,"data-testid":"maxio-sidebar-section-name"},o),a&&e.createElement("span",{className:"maxio-side-nav__menu-chevron"},e.createElement(i,{variant:a}))),w=e.createContext({}),y=()=>e.useContext(w),k=({children:t,withIcons:a=!0,sections:n,shouldToggleSidebar:i=!0,topDropdownItems:o,collapseBreakpoint:r=800})=>{const[s,l]=e.useState((()=>!i||("undefined"==typeof window||window.innerWidth>r))),[c,m]=e.useState(n),d=()=>l(!0),u=()=>l(!1),{windowWitdh:v}=p();e.useEffect((()=>{!function(e){if(!i)return;e<r&&s&&g();e>r&&!s&&x()}(v)}),[v]),e.useEffect((()=>{s?x():g()}),[]);return e.createElement(w.Provider,{value:{sections:c,topDropdownItems:o,onSectionOpen:e=>{const t=h();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 g(){const e=h();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 x(){const e=h();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 h(){return c.map((e=>e.items)).flat().filter((e=>null!=e)).find((e=>e.isCurrent))}},O=()=>{const{onOpen:t,topDropdownItems:a,isOpen:n}=y(),{mainItem:i,otherItems:r,actions:s}=a,l=e.useRef(null),c=u(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]),p=r.length+s.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: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(N,{type:"menu",isTooltipVisible:!n&&c,leadingIcon:i.icon,trailingIcon:"chevron-down",leadingIconClassName:"maxio-icon-circle-fill maxio-icon--success"},i.title)):e.createElement(N,{type:"menu",trailingIcon:"chevron-down"},i.title)),e.createElement(o,{items:d})))},C=({section:t})=>{const{isOpen:a}=y(),n=e.useRef(null),i=u(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(N,{isTooltipVisible:i&&!a,type:"menu",leadingIcon:t.icon},t.name)))},I=({section:a})=>{var n;const{onOpen:i,onSectionOpen:o,isOpen:r,withIcons:s}=y();const l=e.useRef(null),c=u(l);return a.Component?e.createElement(a.Component,{section:a}):a.href?e.createElement(C,{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(){o(a.name),i()}},e.createElement(N,{type:"menu",isTooltipVisible:!r&&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}=y();return e.createElement("ul",{className:"maxio-side-nav__items"},t.map((t=>e.createElement(I,{key:`section-${t.name}`,section:t}))))},T=()=>{const{isOpen:a}=y();return e.createElement("nav",{className:t("maxio-side-nav",{"maxio-side-nav--collapsed":!a})},e.createElement(O,null),e.createElement("hr",{className:"maxio-side-nav__divider"}),e.createElement(S,null))},$={sm:"h3",md:"h2",lg:"h1"};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:o="md",className:r,...s})=>{const l=a,c=t({[`maxio-body-${o}`]:!i,[`maxio-body-${o}-compact`]:i},r);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=g,exports.Code=({as:a="div",children:n,className:i,...o})=>{const r=a,s=t("maxio-code",i);return e.createElement(r,{className:s,...o},n)},exports.Display=({as:a="div",children:n,size:i="md",className:o,...r})=>{const s=a,l=t(`maxio-display-${i}`,o);return e.createElement(s,{className:l,...r},n)},exports.HeaderButton=f,exports.HeaderNav=({items:a})=>e.createElement("ul",{className:"maxio-header-nav"},a.map((({label:a,id:n,isActive:i,...o})=>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}),...o},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,o;e.preventDefault(),a({searchField:(null===(t=n.current)||void 0===t?void 0:t.value)||"",selectField:(null===(o=i.current)||void 0===o?void 0:o.value)||""})}},e.createElement(b,{ref:i,options:t}),e.createElement(_,{ref:n}),e.createElement(f,{type:"submit","aria-label":"Submit search",iconName:"arrow-right"}))},exports.HeaderSearchMenu=b,exports.Heading=({children:a,size:n="sm",className:i,...o})=>{const r=$[n],s=t(`maxio-heading-${n}`,i);return e.createElement(r,{className:s,...o},a)},exports.Icon=i,exports.IconButton=({icon:t,...a})=>e.createElement(g,{icon:t,className:"maxio-button--icon",...a},null),exports.Label=({as:a="div",children:n,size:i="sm",className:o,...r})=>{const s=a,l=t(`maxio-label-${i}`,o);return e.createElement(s,{className:l,...r},n)},exports.Menu=({children:t})=>e.createElement(s,null,e.createElement(l,null,t)),exports.MenuButton=({children:a,iconName:n="chevron-down"})=>{const o=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(i,{variant:n,className:o})))},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:i="md",variant:o="primary",indent:r=!1,inline:s=!1,value:l=0,leftPosition:c=0})=>{const m=t("maxio-progress-bar",{"maxio-progress-bar--lg":"lg"===i,"maxio-progress-bar--success":"success"===o,"maxio-progress-bar--error":"error"===o,"maxio-progress-bar--indent":r,"maxio-progress-bar--inline":s});return e.createElement("div",{className:m},a&&e.createElement("div",{className:"maxio-progress-bar__label"},a),e.createElement("div",{className:"maxio-progress-bar__track"},e.createElement("div",{className:"maxio-progress-bar__progress",style:{width:`${l}%`,left:`${c}%`}})),("success"===o||"error"===o)&&!!a&&e.createElement("div",{className:`maxio-progress-bar__${o}-icon`}),n&&e.createElement("div",{className:"maxio-progress-bar__helper-text"},n))},exports.SideNav=({withIcons:t,shouldToggleSidebar:a,topDropdownItems:n,sections:i,collapseBreakpoint:o=800})=>e.createElement(k,{collapseBreakpoint:o,withIcons:t,shouldToggleSidebar:a,topDropdownItems:n,sections:i},e.createElement(T,null)),exports.Toggle=({defaultChecked:a,checked:n,onChange:i,disabled:o,valueDescription:r,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",g=r&&s,x=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":o}),style:{display:"inline-flex",flexDirection:v},"data-testid":"toggle-container"},g?e.createElement("label",{className:"maxio-toggle__label",htmlFor:p},r):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:x,disabled:o,"aria-label":g?void 0:r,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=x,exports.TooltipTrigger=E,exports.useHover=u,exports.useOverlayTrigger=d,exports.useWindowSize=p;
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maxio-com/react-ui-components",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "React UI components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -48,5 +48,5 @@
     "classnames": "^2.3.2",
     "framer-motion": "^7.6.4"
   },
-  "gitHead": "2f3979a415a6eca01c5759496b35c40ba1fcb696"
+  "gitHead": "a1be98d1f9e96988371fc27011f3be7ee86b5c2a"
 }

package/typings/index.d.ts

@@ -140,21 +140,17 @@ declare type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     children: React.ReactNode;
     loading?: boolean;
-    loadingText?: string;
     variant?: ButtonVariant;
     size?: ButtonSize;
     disabled?: boolean;
     fullWidth?: boolean;
-    rightIcon?: React.ReactNode;
-    leftIcon?: React.ReactNode;
+    icon?: React.ReactNode;
 }
 
-declare const Button: ({ children, loading, loadingText, fullWidth, className, variant, size, disabled, rightIcon, leftIcon, ...props }: ButtonProps) => JSX.Element;
+declare const Button: ({ children, loading, fullWidth, className, variant, size, disabled, icon, ...props }: ButtonProps) => JSX.Element;
 //# sourceMappingURL=Button.d.ts.map
 
-declare type IconButtonProps = Omit<ButtonProps, 'leftIcon' | 'rightIcon' | 'loadingText' | 'fullWidth' | 'children'> & {
-    icon: ReactNode;
-};
+declare type IconButtonProps = Omit<ButtonProps, 'fullWidth' | 'children'>;
 
 declare const IconButton: ({ icon, ...props }: IconButtonProps) => JSX.Element;
 //# sourceMappingURL=IconButton.d.ts.map
@@ -277,6 +273,18 @@ interface SideNavTopDropdownItem {
 declare const SideNavWrapper: ({ withIcons, shouldToggleSidebar, topDropdownItems, sections, collapseBreakpoint, }: Pick<SideNavProviderProps, 'withIcons' | 'shouldToggleSidebar' | 'topDropdownItems' | 'sections' | 'collapseBreakpoint'>) => JSX.Element;
 //# sourceMappingURL=SideNav.d.ts.map
 
+interface ProgressBarProps {
+    label?: string;
+    helperText?: string;
+    size?: 'md' | 'lg';
+    variant?: 'primary' | 'success' | 'error';
+    indent?: boolean;
+    inline?: boolean;
+    value?: number;
+    leftPosition?: number;
+}
+declare const ProgressBar: ({ label, helperText, size, variant, indent, inline, value, leftPosition, }: ProgressBarProps) => JSX.Element;
+
 declare type BaseTypographyProps = {
     className?: string;
     children: ReactNode;
@@ -311,4 +319,4 @@ declare type LabelProps = BaseTypographyProps & {
 };
 declare const Label: ({ as, children, size, className, ...rest }: LabelProps) => JSX.Element;
 
-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, SideNavWrapper as SideNav, Toggle, Tooltip, TooltipTrigger, useHover, useOverlayTrigger, useWindowSize };
+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, Toggle, Tooltip, TooltipTrigger, useHover, useOverlayTrigger, useWindowSize };