@maxio-com/react-ui-components 1.13.0 → 1.13.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.esm.js CHANGED
@@ -1 +1 @@
1
- import e,{createContext as a,useState as t,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,useRadio as C,useRadioGroup as I}from"react-aria";const O=({variant:a,white:t,className:n})=>e.createElement("i",{className:p("maxio-icon",`maxio-icon-${a}`,t&&"maxio-icon--white",n)}),S=({items:a,isShadowed:t=!0})=>{const n=p("maxio-action-list",{"maxio-action-list--shadow":t});return 0===a.length?null:e.createElement("ul",{className:n},a.map((a=>{if("divider"===a.type)return e.createElement("li",{key:`list-item-divider-${a.id}`,className:"maxio-action-list__divider",role:"separator","aria-hidden":"true"});const{id:t,leadingIconName:n,trailingIconName:i,label:r,description:o,link:l}=a;return e.createElement("li",{className:"maxio-action-list__item",key:`list-item-${t||r}`},e.createElement("a",{...l,className:"maxio-action-list__content"},n&&e.createElement(O,{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(O,{variant:i,className:"maxio-action-list__trailing-icon"})))})))},P=({className:a,src:t,alt:n="avatar"})=>e.createElement("img",{className:p("maxio-avatar",a),alt:n,src:t}),T=a({}),$=({children:a})=>{const[n,i]=t(!1);return e.createElement(T.Provider,{value:{isOpen:n,onClose:()=>i(!1),onOpen:()=>i(!0),onToggle:()=>i((e=>!e))}},a)};const F=({children:a})=>{const{isOpen:t,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:t,onToggle:i,className:"maxio-action-menu"},"function"==typeof a?a({isOpen:t,onClose:r}):a)},V=({children:a})=>e.createElement($,null,e.createElement(F,null,a)),D=({items:a,alignItemsEnd:t=!1})=>{const n=p("maxio-action-menu__content",{"maxio-action-menu__content--align-end":t});return e.createElement("div",{className:n},e.createElement(S,{items:a}))},W=({children:a,iconName:t="chevron-down"})=>{const n=p({"maxio-action-menu__chevron":"chevron-down"===t});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),t&&e.createElement(O,{variant:t,className:n})))},H=({icon:a,variant:t="default"})=>e.createElement("i",{className:p("maxio-brand-logo",`maxio-brand-logo-${a}`,{[`maxio-brand-logo--${t}`]:"default"!==t})}),z={click:g,hover:x,focus:E,dismiss:_},L=(e,a)=>a.map((a=>z[a](e))),M=({placement:e="top",isActive:a=!1,interactions:t=["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:a,onOpenChange:e=>o(e),middleware:[f(n)]}),{getReferenceProps:h,getFloatingProps:g}=N([...L(u,t),w(u,{role:"tooltip"})]);r((()=>{s.current&&clearTimeout(s.current),a&&l&&(s.current=setTimeout((()=>o(!1)),l))}),[a,l]);return{isActive:a,refs:{floating:p,reference:v},floatingElementCSSPosition:{position:c,top:null!=d?d:0,left:null!=m?m:0},getReferenceProps:h,getFloatingProps:g}};function R(e,a=0){const n=i((new Date).getTime()),o=i((new Date).getTime()),[l,s]=t(!1);return r((()=>{const t=()=>{n.current=(new Date).getTime(),s(!0)},i=()=>{o.current=(new Date).getTime(),setTimeout((()=>{n.current-o.current<=0&&s(!1)}),a)},r=e&&e.current;return r&&(r.addEventListener("mouseenter",t),r.addEventListener("mouseleave",i)),()=>{r&&(r.removeEventListener("mouseenter",t),r.removeEventListener("mouseleave",i))}}),[e]),l}function A(e=500){const[a,n]=t((()=>{const{innerWidth:e,innerHeight:a}=window;return{windowWitdh:e,windowHeight:a}})),o=i(null);return r((()=>{const a=()=>{const{innerWidth:a,innerHeight:t}=window;clearTimeout(o.current),o.current=setTimeout((()=>{n({windowWitdh:a,windowHeight:t})}),e)};return window.addEventListener("resize",a),()=>{window.removeEventListener("resize",a)}}),[e]),a}const U=({children:a,usePortal:t=!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"},a),t?e.createElement(y,{id:"maxio-ui-portal"},f):f)},B=({children:a,loading:t=!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":t,"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},a,!t&&s,t&&e.createElement("div",{className:d}))},Y=({icon:a,...t})=>e.createElement(B,{icon:a,className:"maxio-button--icon",...t},null),j=({defaultChecked:a,checked:t,onChange:n,disabled:i,valueDescription:r,valueDescriptionPosition:s,className:c,name:m,id:d})=>{const u=o(),v="boolean"==typeof a,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 a=e.currentTarget.checked;v&&(e.currentTarget.checked=!a),n&&n(!a,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:a,checked:t,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":t},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"})))))},q=({children:a,arrowPosition:t,size:n="regular",maxWidth:i=160})=>e.createElement("div",{"data-testid":"tooltip",className:p("maxio-tooltip",`maxio-tooltip--${n}`,{[`maxio-tooltip--arrow-${t}`]:t})},e.createElement("div",{className:"maxio-tooltip__content",style:{maxWidth:i}},a)),G={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:a,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]=t(!1),E=void 0!==d,_=l((e=>{E||x(e),v&&v(e)}),[d]),b=s((()=>(e=>{const a=e.startsWith("top")||e.startsWith("bottom")?"Y":"X",t=`translate${a}(${e.startsWith("bottom")||e.startsWith("right")?"-":""}10px)`;return{initial:{opacity:0,visibility:"hidden",transform:t},animate:{opacity:1,visibility:"visible",transform:`translate${a}(0px)`},exit:{opacity:0,visibility:"hidden",transform:t},transition:{ease:[.4,0,.5,1],duration:.2}}})(i)),[i]);return e.createElement(U,{role:"tooltip",className:p,floatingElementOffset:h,motionSettings:b,isActive:E?d:g,onOverlayUpdate:_,autoHideMs:m,usePortal:u,placement:i,interactions:n,renderOverlay:()=>e.createElement(q,{size:o,arrowPosition:G[i],maxWidth:r},c())},a)},X=({children:a,as:t,iconName:n,noPadding:i,className:r,...o})=>{const l=t||"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"},a||null,n&&e.createElement(O,{variant:n})))},J=({items:a})=>e.createElement("ul",{className:"maxio-header-nav"},a.map((({label:a,id:t,isActive:n,...i})=>e.createElement("li",{className:"maxio-header-nav__item",key:`header-nav-list-item-${t}`},e.createElement("a",{className:p("maxio-header-nav__link",{"maxio-header-nav__link--active":n}),...i},a))))),Q=c((({className:a,...t},n)=>e.createElement("div",{className:p("maxio-header-search-field",a)},e.createElement("div",{className:"maxio-header-search-field__button"},e.createElement(O,{variant:"search"})),e.createElement("input",{ref:n,className:"maxio-header-search-field__input",type:"search",placeholder:"Search",name:"search",...t}))));Q.displayName="SearchField";const Z=c((({options:a,...t},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,...t},a.map((({label:a,value:t})=>e.createElement("option",{key:`${a}-${t}`,value:t},a)))),e.createElement("div",{className:"maxio-header-search-menu__icon"},e.createElement(O,{variant:"chevron-down"})))));Z.displayName="SearchMenu";const ee=({options:a,onSubmit:t})=>{const n=i(null),r=i(null);return e.createElement("form",{className:"maxio-header-search-input",onSubmit:function(e){var a,i;e.preventDefault(),t({searchField:(null===(a=n.current)||void 0===a?void 0:a.value)||"",selectField:(null===(i=r.current)||void 0===i?void 0:i.value)||""})}},e.createElement(Z,{ref:r,options:a}),e.createElement(Q,{ref:n}),e.createElement(X,{type:"submit","aria-label":"Submit search",iconName:"arrow-right"}))},ae=({leadingIcon:a,trailingIcon:t,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},a&&e.createElement("span",{className:"maxio-side-nav__icon"},e.createElement(O,{variant:a,className:r}))),e.createElement("span",{className:`maxio-side-nav__${n}-title`,"data-testid":"maxio-sidebar-section-name"},i),t&&e.createElement("span",{className:"maxio-side-nav__menu-chevron"},e.createElement(O,{variant:t}))),te=a({}),ne=()=>n(te),ie=({children:a,withIcons:n=!0,sections:i,shouldToggleSidebar:o=!0,topDropdownItems:l,collapseBreakpoint:s=800})=>{const[c,m]=t((()=>!o||("undefined"==typeof window||window.innerWidth>s))),[d,u]=t(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(te.Provider,{value:{sections:d,topDropdownItems:l,onSectionOpen:e=>{const a=E();u((t=>t.map((t=>{var n;const i=t.name===e&&!t.isOpen;return a&&(null===(n=t.items)||void 0===n?void 0:n.includes(a))?{...t,isOpen:i,isCurrent:!i}:{...t,isOpen:i}}))))},isOpen:c,onOpen:p,onClose:v,onToggle:()=>m((e=>!e)),withIcons:n}},a);function g(){const e=E();e&&(u((a=>a.map((a=>{var t;return{...a,isOpen:!1,isCurrent:(null===(t=a.items)||void 0===t?void 0:t.includes(e))||!1}})))),v())}function x(){const e=E();e&&(u((a=>a.map((a=>{var t;return{...a,isOpen:(null===(t=a.items)||void 0===t?void 0:t.includes(e))||!1,isCurrent:!1}})))),p())}function E(){return d.map((e=>e.items)).flat().filter((e=>null!=e)).find((e=>e.isCurrent))}},re=()=>{const{onOpen:a,topDropdownItems:t,isOpen:n}=ne(),{mainItem:r,otherItems:o,actions:l}=t,c=i(null),m=R(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:a},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:a,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(ae,{type:"menu",isTooltipVisible:!n&&m,leadingIcon:r.icon,trailingIcon:"chevron-down",leadingIconClassName:"maxio-icon-circle-fill maxio-icon--success"},r.title)):e.createElement(ae,{type:"menu",trailingIcon:"chevron-down"},r.title)),e.createElement(S,{items:u})))},oe=({section:a})=>{const{isOpen:t}=ne(),n=i(null),r=R(n);return e.createElement("li",{className:"maxio-side-nav__item","data-key":a.key,"data-testid":"maxio-sidebar-section"},e.createElement("a",{className:"maxio-side-nav__link","aria-current":a.isCurrent?"page":void 0,role:"button",href:a.href,ref:n},e.createElement(ae,{isTooltipVisible:r&&!t,type:"menu",leadingIcon:a.icon},a.name)))},le=({section:a})=>{var t;const{onOpen:n,onSectionOpen:r,isOpen:o,withIcons:l}=ne();const s=i(null),c=R(s);return a.Component?e.createElement(a.Component,{section:a}):a.href?e.createElement(oe,{section:a}):e.createElement("li",{className:p("maxio-side-nav__item",{"maxio-side-nav__item--active":a.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":a.isOpen,"aria-current":a.isCurrent?"page":void 0,type:"button",onClick:function(){r(a.name),n()}},e.createElement(ae,{type:"menu",isTooltipVisible:!o&&c,leadingIcon:a.icon,trailingIcon:(null===(t=a.items)||void 0===t?void 0:t.length)?"chevron-down":void 0},a.name)),a.isOpen&&e.createElement("ul",{className:"maxio-side-nav__menu"},a.items.map((a=>e.createElement("li",{key:`section-sub-item-${a.name}`,className:"maxio-side-nav__item","data-testid":"maxio-section-item"},e.createElement("a",{className:"maxio-side-nav__link",href:a.href,"aria-current":a.isCurrent?"page":void 0},e.createElement("span",{className:"maxio-side-nav__link-title"},a.name)))))))},se=()=>{const{sections:a}=ne();return e.createElement("ul",{className:"maxio-side-nav__items"},a.map((a=>e.createElement(le,{key:`section-${a.name}`,section:a}))))},ce=()=>{const{isOpen:a}=ne();return e.createElement("nav",{className:p("maxio-side-nav",{"maxio-side-nav--collapsed":!a})},e.createElement(re,null),e.createElement("hr",{className:"maxio-side-nav__divider"}),e.createElement(se,null))},me=({withIcons:a,shouldToggleSidebar:t,topDropdownItems:n,sections:i,collapseBreakpoint:r=800})=>e.createElement(ie,{collapseBreakpoint:r,withIcons:a,shouldToggleSidebar:t,topDropdownItems:n,sections:i},e.createElement(ce,null)),de=({label:a,helperText:t,size:n="md",variant:i="default",status:r,value:o,maxValue:l=100})=>{const s=k(),c=k(),m=r&&!!a&&!!o&&!("inline"===i),d=t&&!("inline"===i),u=t&&"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},a&&e.createElement("div",{id:s,className:"maxio-progress-bar__label"},a),u&&e.createElement("div",{id:c,className:"maxio-progress-bar__helper-text"},t),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"},t))},ue=({as:a="div",children:t,compact:n=!1,size:i="md",className:r,...o})=>{const l=a,s=p({[`maxio-body-${i}`]:!n,[`maxio-body-${i}-compact`]:n},r);return e.createElement(l,{className:s,...o},t)},pe={sm:"h3",md:"h2",lg:"h1"},ve=({children:a,size:t="sm",className:n,...i})=>{const r=pe[t],o=p(`maxio-heading-${t}`,n);return e.createElement(r,{className:o,...i},a)},he=({as:a="div",children:t,size:n="md",className:i,...r})=>{const o=a,l=p(`maxio-display-${n}`,i);return e.createElement(o,{className:l,...r},t)},ge=({as:a="div",children:t,className:n,...i})=>{const r=a,o=p("maxio-code",n);return e.createElement(r,{className:o,...i},t)},xe=({as:a="div",children:t,size:n="sm",className:i,...r})=>{const o=a,l=p(`maxio-label-${n}`,i);return e.createElement(o,{className:l,...r},t)},Ee=a({}),_e=()=>n(Ee),be=({children:a,variant:n,withDivider:i,defaultIndex:o=0,onChange:l,index:s})=>{const[c,m]=t((()=>void 0!==s?s:o));r((()=>{void 0===s&&m(o),"number"==typeof s&&m(s)}),[o,s]);return e.createElement(Ee.Provider,{value:{currentIndex:c,variant:n,withDivider:i,onChange:e=>{void 0===s&&m(e),"function"==typeof l&&l(e)}}},a)},fe=({disabled:a=!1,value:t=0,...n})=>{const{onChange:i,currentIndex:r}=_e(),o=p("maxio-tabs__tab",{"maxio-tabs__tab--active":r===t,"maxio-tabs__tab--disabled":a,"maxio-tabs__tab--icon":"icon"===n.type}),l=()=>{i(t)};if("icon"===n.type){const{icon:a}=n;return e.createElement("div",{className:o,onClick:l},e.createElement("div",{className:"maxio-tabs__tab__content"},a))}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))},Ne=({children:a,variant:t="line",withDivider:n=!1,defaultIndex:i=0,index:r,onChange:o})=>e.createElement(be,{defaultIndex:i,variant:t,withDivider:n,index:r,onChange:o},a),we=({children:a})=>e.createElement(e.Fragment,null,a),ye=({children:a})=>{const{currentIndex:t}=_e();return e.createElement(e.Fragment,null,m.map(a,((e,a)=>{if(d(e)&&e.type===we)return a===t?u(e,{}):null;throw new Error("You can only pass <TabPanel /> component as children")})))},ke=({children:a})=>{const{variant:t,withDivider:n}=_e(),i=p("maxio-tabs",{"maxio-tabs--contained":"contained"===t,"maxio-tabs--divider":n});return e.createElement("div",{className:i},m.map(a,((e,a)=>{if(d(e)&&e.type===fe)return u(e,{value:a});throw new Error("You can only pass <Tab /> component as children")})))},Ce=({className:a,children:t,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},a),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"},t),!o&&e.createElement(O,{variant:r}))},Ie=a({}),Oe=()=>n(Ie),Se=({children:a,onChange:n,value:i,defaultValue:o="",name:l,indent:s,disabled:c})=>{const[m,d]=t(o),[u,p]=t(null);r((()=>{d(i)}),[i]);return e.createElement(Ie.Provider,{value:{onChange:e=>{d(e),n&&n(e)},name:l,value:m,indent:s,disabled:c,lastFocusedValue:u,setLastFocusedValue:p}},a)},Pe=({indent:a=!1,disabled:t=!1,invalid:n=!1,label:r,...o})=>{const l=i(null),{disabled:s,indent:c,invalid:m,name:d,onChange:u,value:v,setLastFocusedValue:h=(()=>{}),lastFocusedValue:g=null}=Oe(),x=!!d,E=m||n,_=s||t,b=p("maxio-radio",{"maxio-radio--indent":c||a,"maxio-radio--disabled":_,"maxio-radio--error":E}),{inputProps:f}=C({...o,children:r,value:(o.value||"").toString()},{isDisabled:_,isReadOnly:_,isRequired:!1,name:d,validationState:E?"invalid":"valid",isInvalid:E,selectedValue:v,setSelectedValue:u,setLastFocusedValue:h,lastFocusedValue:g},l);return e.createElement("label",{className:b},e.createElement("input",{ref:l,type:"radio",className:"maxio-radio__input",...x?f:o}),e.createElement("span",{className:"maxio-radio__control",tabIndex:0}),e.createElement("span",{className:"maxio-radio__label"},r))},Te=({children:a,className:t,...n})=>e.createElement("div",{className:p("maxio-form-error",t),...n},e.createElement("i",{className:"maxio-form-error__icon"}),e.createElement("div",{className:"maxio-form-error__text"},a)),$e=({children:a,className:t,...n})=>e.createElement("div",{className:p("maxio-form-helper-text",t),...n},a),Fe=({children:a,label:t,errorMessage:n,helperText:i,disabled:r=!1,invalid:o=!1})=>{const{name:l,onChange:s,value:c,lastFocusedValue:m,setLastFocusedValue:d}=Oe(),{radioGroupProps:u,labelProps:p,descriptionProps:v,errorMessageProps:h}=I({name:l,label:t},{name:l,validationState:o?"invalid":"valid",isDisabled:r,isInvalid:o,isReadOnly:r,isRequired:!1,selectedValue:c,lastFocusedValue:m,setLastFocusedValue:d,setSelectedValue:s});return e.createElement(e.Fragment,null,e.createElement("div",{className:"maxio-radio-group",...u},t&&e.createElement("label",{className:"maxio-radio-group__label",...p},t),a,n&&o&&e.createElement(Te,{...h},n),i&&!n&&e.createElement($e,{...v},i)))},Ve=a=>e.createElement(Se,{...a},e.createElement(Fe,{...a},a.children));export{S as ActionList,P as Avatar,ue as Body,H as BrandLogo,B as Button,ge as Code,he as Display,Te as FormErrorMessage,$e as FormHelperText,X as HeaderButton,J as HeaderNav,Q as HeaderSearchField,ee as HeaderSearchInput,Z as HeaderSearchMenu,ve as Heading,O as Icon,Y as IconButton,xe as Label,Ce as Link,V as Menu,W as MenuButton,D as MenuList,U as OverlayTrigger,de as ProgressBar,Pe as Radio,Ve as RadioGroup,me as SideNav,fe as Tab,ke as TabList,we as TabPanel,ye as TabPanels,Ne as Tabs,j as Toggle,q as Tooltip,K as TooltipTrigger,R as useHover,M as useOverlayTrigger,A as useWindowSize};
1
+ import e,{createContext as a,useState as t,useContext as n,useRef as i,useEffect as l,useId as r,useCallback as o,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 x,useHover as g,useFocus as b,useDismiss as E,useFloating as _,offset as f,useInteractions as N,useRole as y,FloatingPortal as w}from"@floating-ui/react-dom-interactions";import{useId as k,useCheckboxGroupItem as C,useCheckboxGroup as I,useRadio as O,useRadioGroup as P}from"react-aria";const S=({variant:a,white:t,className:n})=>e.createElement("i",{className:p("maxio-icon",`maxio-icon-${a}`,t&&"maxio-icon--white",n)}),V=({items:a,isShadowed:t=!0})=>{const n=p("maxio-action-list",{"maxio-action-list--shadow":t});return 0===a.length?null:e.createElement("ul",{className:n},a.map((a=>{if("divider"===a.type)return e.createElement("li",{key:`list-item-divider-${a.id}`,className:"maxio-action-list__divider",role:"separator","aria-hidden":"true"});const{id:t,leadingIconName:n,trailingIconName:i,label:l,description:r,link:o}=a;return e.createElement("li",{className:"maxio-action-list__item",key:`list-item-${t||l}`},e.createElement("a",{...o,className:"maxio-action-list__content"},n&&e.createElement(S,{variant:n,className:"maxio-action-list__leading-icon"}),e.createElement("span",{className:"maxio-action-list__label"},l),r&&e.createElement("span",{className:"maxio-action-list__description"},r),i&&e.createElement(S,{variant:i,className:"maxio-action-list__trailing-icon"})))})))},T=({className:a,src:t,alt:n="avatar"})=>e.createElement("img",{className:p("maxio-avatar",a),alt:n,src:t}),$=a({}),F=({children:a})=>{const[n,i]=t(!1);return e.createElement($.Provider,{value:{isOpen:n,onClose:()=>i(!1),onOpen:()=>i(!0),onToggle:()=>i((e=>!e))}},a)};const D=({children:a})=>{const{isOpen:t,onToggle:i,onClose:l}=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:t,onToggle:i,className:"maxio-action-menu"},"function"==typeof a?a({isOpen:t,onClose:l}):a)},W=({children:a})=>e.createElement(F,null,e.createElement(D,null,a)),H=({items:a,alignItemsEnd:t=!1})=>{const n=p("maxio-action-menu__content",{"maxio-action-menu__content--align-end":t});return e.createElement("div",{className:n},e.createElement(V,{items:a}))},M=({children:a,iconName:t="chevron-down"})=>{const n=p({"maxio-action-menu__chevron":"chevron-down"===t});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),t&&e.createElement(S,{variant:t,className:n})))},z=({icon:a,variant:t="default"})=>e.createElement("i",{className:p("maxio-brand-logo",`maxio-brand-logo-${a}`,{[`maxio-brand-logo--${t}`]:"default"!==t})}),L={click:x,hover:g,focus:b,dismiss:E},R=(e,a)=>a.map((a=>L[a](e))),A=({placement:e="top",isActive:a=!1,interactions:t=["hover"],floatingElementOffset:n=0,onOverlayUpdate:r,autoHideMs:o})=>{const s=i(null),{strategy:c,x:m,y:d,context:u,floating:p,reference:v}=_({placement:e,open:a,onOpenChange:e=>r(e),middleware:[f(n)]}),{getReferenceProps:h,getFloatingProps:x}=N([...R(u,t),y(u,{role:"tooltip"})]);l((()=>{s.current&&clearTimeout(s.current),a&&o&&(s.current=setTimeout((()=>r(!1)),o))}),[a,o]);return{isActive:a,refs:{floating:p,reference:v},floatingElementCSSPosition:{position:c,top:null!=d?d:0,left:null!=m?m:0},getReferenceProps:h,getFloatingProps:x}};function U(e,a=0){const n=i((new Date).getTime()),r=i((new Date).getTime()),[o,s]=t(!1);return l((()=>{const t=()=>{n.current=(new Date).getTime(),s(!0)},i=()=>{r.current=(new Date).getTime(),setTimeout((()=>{n.current-r.current<=0&&s(!1)}),a)},l=e&&e.current;return l&&(l.addEventListener("mouseenter",t),l.addEventListener("mouseleave",i)),()=>{l&&(l.removeEventListener("mouseenter",t),l.removeEventListener("mouseleave",i))}}),[e]),o}function B(e=500){const[a,n]=t((()=>{const{innerWidth:e,innerHeight:a}=window;return{windowWitdh:e,windowHeight:a}})),r=i(null);return l((()=>{const a=()=>{const{innerWidth:a,innerHeight:t}=window;clearTimeout(r.current),r.current=setTimeout((()=>{n({windowWitdh:a,windowHeight:t})}),e)};return window.addEventListener("resize",a),()=>{window.removeEventListener("resize",a)}}),[e]),a}const G=({children:a,usePortal:t=!1,isActive:n=!1,placement:i="top",interactions:l=["hover"],role:r="tooltip",renderOverlay:o,floatingElementOffset:s,motionSettings:c={},autoHideMs:m,onOverlayUpdate:d,className:u})=>{const{getReferenceProps:x,getFloatingProps:g,refs:{floating:b,reference:E},floatingElementCSSPosition:_}=A({role:r,isActive:n,onOverlayUpdate:d,autoHideMs:m,floatingElementOffset:s,interactions:l,placement:i}),f=e.createElement(v,null,n&&e.createElement(h.div,{ref:b,style:_,...c,...g()},o()));return e.createElement(e.Fragment,null,e.createElement("div",{ref:E,className:p("maxio-inline-flex",u),...x(),"data-testid":"overlay-trigger"},a),t?e.createElement(w,{id:"maxio-ui-portal"},f):f)},Y=({children:a,loading:t=!1,fullWidth:n=!1,className:i,variant:l="primary",size:r="lg",disabled:o,icon:s,...c})=>{const m=p("maxio-button",i,{[`maxio-button--${r}`]:r,[`maxio-button--${l}`]:l,"maxio-button--loading":t,"maxio-button--full-width":n}),d=p("maxio-button__loader",{"maxio-button__loader--white":["primary","secondary","danger"].includes(l)});return e.createElement("button",{disabled:o,...c,className:m},a,!t&&s,t&&e.createElement("div",{className:d}))},j=({icon:a,...t})=>e.createElement(Y,{icon:a,className:"maxio-button--icon",...t},null),q=({defaultChecked:a,checked:t,onChange:n,disabled:i,valueDescription:l,valueDescriptionPosition:s,className:c,name:m,id:d})=>{const u=r(),v="boolean"==typeof a,h=d||u,x="left"===s?"row":"row-reverse",g=l&&s,b=o((e=>{if("Enter"===e.code||"Space"===e.code){e.preventDefault();const a=e.currentTarget.checked;v&&(e.currentTarget.checked=!a),n&&n(!a,e)}}),[v,n]);return e.createElement("div",{className:p("maxio-toggle",c,{"maxio-toggle--disabled":i}),style:{display:"inline-flex",flexDirection:x},"data-testid":"toggle-container"},g?e.createElement("label",{className:"maxio-toggle__label",htmlFor:h},l):null,e.createElement("div",{className:"maxio-toggle__container"},e.createElement("input",{type:"checkbox",defaultChecked:a,checked:t,onChange:e=>{n&&n(e.target.checked,e)},onKeyDown:b,disabled:i,"aria-label":g?void 0:l,className:"maxio-toggle__checkbox",id:h,name:m}),e.createElement("div",{className:"maxio-toggle__track",role:"switch","aria-checked":t},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"})))))},K=({children:a,arrowPosition:t,size:n="regular",maxWidth:i=160})=>e.createElement("div",{"data-testid":"tooltip",className:p("maxio-tooltip",`maxio-tooltip--${n}`,{[`maxio-tooltip--arrow-${t}`]:t})},e.createElement("div",{className:"maxio-tooltip__content",style:{maxWidth:i}},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"},J=({children:a,interactions:n=["hover"],placement:i="right",maxWidth:l=160,size:r="regular",renderContent:c,autoHideMs:m,isVisible:d,usePortal:u,className:p,onVisibilityUpdate:v,floatingElementOffset:h=5})=>{const[x,g]=t(!1),b=void 0!==d,E=o((e=>{b||g(e),v&&v(e)}),[d]),_=s((()=>(e=>{const a=e.startsWith("top")||e.startsWith("bottom")?"Y":"X",t=`translate${a}(${e.startsWith("bottom")||e.startsWith("right")?"-":""}10px)`;return{initial:{opacity:0,visibility:"hidden",transform:t},animate:{opacity:1,visibility:"visible",transform:`translate${a}(0px)`},exit:{opacity:0,visibility:"hidden",transform:t},transition:{ease:[.4,0,.5,1],duration:.2}}})(i)),[i]);return e.createElement(G,{role:"tooltip",className:p,floatingElementOffset:h,motionSettings:_,isActive:b?d:x,onOverlayUpdate:E,autoHideMs:m,usePortal:u,placement:i,interactions:n,renderOverlay:()=>e.createElement(K,{size:r,arrowPosition:X[i],maxWidth:l},c())},a)},Q=({children:a,as:t,iconName:n,noPadding:i,className:l,...r})=>{const o=t||"button",s=p("maxio-header-button",l,{"maxio-header-button--no-padding":i});return e.createElement(o,{className:s,...r},e.createElement("div",{className:"maxio-header-button__content"},a||null,n&&e.createElement(S,{variant:n})))},Z=({items:a})=>e.createElement("ul",{className:"maxio-header-nav"},a.map((({label:a,id:t,isActive:n,...i})=>e.createElement("li",{className:"maxio-header-nav__item",key:`header-nav-list-item-${t}`},e.createElement("a",{className:p("maxio-header-nav__link",{"maxio-header-nav__link--active":n}),...i},a))))),ee=c((({className:a,...t},n)=>e.createElement("div",{className:p("maxio-header-search-field",a)},e.createElement("div",{className:"maxio-header-search-field__button"},e.createElement(S,{variant:"search"})),e.createElement("input",{ref:n,className:"maxio-header-search-field__input",type:"search",placeholder:"Search",name:"search",...t}))));ee.displayName="SearchField";const ae=c((({options:a,...t},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,...t},a.map((({label:a,value:t})=>e.createElement("option",{key:`${a}-${t}`,value:t},a)))),e.createElement("div",{className:"maxio-header-search-menu__icon"},e.createElement(S,{variant:"chevron-down"})))));ae.displayName="SearchMenu";const te=({options:a,onSubmit:t})=>{const n=i(null),l=i(null);return e.createElement("form",{className:"maxio-header-search-input",onSubmit:function(e){var a,i;e.preventDefault(),t({searchField:(null===(a=n.current)||void 0===a?void 0:a.value)||"",selectField:(null===(i=l.current)||void 0===i?void 0:i.value)||""})}},e.createElement(ae,{ref:l,options:a}),e.createElement(ee,{ref:n}),e.createElement(Q,{type:"submit","aria-label":"Submit search",iconName:"arrow-right"}))},ne=({leadingIcon:a,trailingIcon:t,type:n="menu",children:i,leadingIconClassName:l,isTooltipVisible:r=!1})=>e.createElement(e.Fragment,null,e.createElement(J,{usePortal:!1,isVisible:r,renderContent:()=>i,floatingElementOffset:12},a&&e.createElement("span",{className:"maxio-side-nav__icon"},e.createElement(S,{variant:a,className:l}))),e.createElement("span",{className:`maxio-side-nav__${n}-title`,"data-testid":"maxio-sidebar-section-name"},i),t&&e.createElement("span",{className:"maxio-side-nav__menu-chevron"},e.createElement(S,{variant:t}))),ie=a({}),le=()=>n(ie),re=({children:a,withIcons:n=!0,sections:i,shouldToggleSidebar:r=!0,topDropdownItems:o,collapseBreakpoint:s=800})=>{const[c,m]=t((()=>!r||("undefined"==typeof window||window.innerWidth>s))),[d,u]=t(i),p=()=>m(!0),v=()=>m(!1),{windowWitdh:h}=B();l((()=>{!function(e){if(!r)return;e<s&&c&&x();e>s&&!c&&g()}(h)}),[h]),l((()=>{c?g():x()}),[]);return e.createElement(ie.Provider,{value:{sections:d,topDropdownItems:o,onSectionOpen:e=>{const a=b();u((t=>t.map((t=>{var n;const i=t.name===e&&!t.isOpen;return a&&(null===(n=t.items)||void 0===n?void 0:n.includes(a))?{...t,isOpen:i,isCurrent:!i}:{...t,isOpen:i}}))))},isOpen:c,onOpen:p,onClose:v,onToggle:()=>m((e=>!e)),withIcons:n}},a);function x(){const e=b();e&&(u((a=>a.map((a=>{var t;return{...a,isOpen:!1,isCurrent:(null===(t=a.items)||void 0===t?void 0:t.includes(e))||!1}})))),v())}function g(){const e=b();e&&(u((a=>a.map((a=>{var t;return{...a,isOpen:(null===(t=a.items)||void 0===t?void 0:t.includes(e))||!1,isCurrent:!1}})))),p())}function b(){return d.map((e=>e.items)).flat().filter((e=>null!=e)).find((e=>e.isCurrent))}},oe=()=>{const{onOpen:a,topDropdownItems:t,isOpen:n}=le(),{mainItem:l,otherItems:r,actions:o}=t,c=i(null),m=U(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"},...o.map(d)].filter((e=>null!=e))),[o,r]),p=r.length+o.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:l.url,onClick:a},e.createElement("span",{className:"maxio-side-nav__menu-title"},l.title)):e.createElement("details",{className:"maxio-action-menu maxio-side-nav--action-menu"},e.createElement("summary",{onClick:a,className:"maxio-side-nav__menu-button maxio-side-nav__menu-button--large","aria-haspopup":"true",ref:c},l.url?e.createElement(e.Fragment,null,e.createElement(ne,{type:"menu",isTooltipVisible:!n&&m,leadingIcon:l.icon,trailingIcon:"chevron-down",leadingIconClassName:"maxio-icon-circle-small-fill maxio-icon--success"},l.title)):e.createElement(ne,{type:"menu",trailingIcon:"chevron-down"},l.title)),e.createElement(V,{items:u})))},se=({section:a})=>{const{isOpen:t}=le(),n=i(null),l=U(n);return e.createElement("li",{className:"maxio-side-nav__item","data-key":a.key,"data-testid":"maxio-sidebar-section"},e.createElement("a",{className:"maxio-side-nav__link","aria-current":a.isCurrent?"page":void 0,role:"button",href:a.href,ref:n},e.createElement(ne,{isTooltipVisible:l&&!t,type:"menu",leadingIcon:a.icon},a.name)))},ce=({section:a})=>{var t;const{onOpen:n,onSectionOpen:l,isOpen:r,withIcons:o}=le();const s=i(null),c=U(s);return a.Component?e.createElement(a.Component,{section:a}):a.href?e.createElement(se,{section:a}):e.createElement("li",{className:p("maxio-side-nav__item",{"maxio-side-nav__item--active":a.isCurrent,"maxio-side-nav__item--icon":o}),"data-testid":"maxio-sidebar-section"},e.createElement("button",{className:"maxio-side-nav__menu-button",ref:s,"aria-expanded":a.isOpen,"aria-current":a.isCurrent?"page":void 0,type:"button",onClick:function(){l(a.name),n()}},e.createElement(ne,{type:"menu",isTooltipVisible:!r&&c,leadingIcon:a.icon,trailingIcon:(null===(t=a.items)||void 0===t?void 0:t.length)?"chevron-down":void 0},a.name)),a.isOpen&&e.createElement("ul",{className:"maxio-side-nav__menu"},a.items.map((a=>e.createElement("li",{key:`section-sub-item-${a.name}`,className:"maxio-side-nav__item","data-testid":"maxio-section-item"},e.createElement("a",{className:"maxio-side-nav__link",href:a.href,"aria-current":a.isCurrent?"page":void 0},e.createElement("span",{className:"maxio-side-nav__link-title"},a.name)))))))},me=()=>{const{sections:a}=le();return e.createElement("ul",{className:"maxio-side-nav__items"},a.map((a=>e.createElement(ce,{key:`section-${a.name}`,section:a}))))},de=()=>{const{isOpen:a}=le();return e.createElement("nav",{className:p("maxio-side-nav",{"maxio-side-nav--collapsed":!a})},e.createElement(oe,null),e.createElement("hr",{className:"maxio-side-nav__divider"}),e.createElement(me,null))},ue=({withIcons:a,shouldToggleSidebar:t,topDropdownItems:n,sections:i,collapseBreakpoint:l=800})=>e.createElement(re,{collapseBreakpoint:l,withIcons:a,shouldToggleSidebar:t,topDropdownItems:n,sections:i},e.createElement(de,null)),pe=({label:a,helperText:t,size:n="md",variant:i="default",status:l,value:r,maxValue:o=100})=>{const s=k(),c=k(),m=l&&!!a&&!!r&&!("inline"===i),d=t&&!("inline"===i),u=t&&"inline"===i,v=p("maxio-progress-bar",{"maxio-progress-bar--lg":"lg"===n,"maxio-progress-bar--success":r&&!("inline"===i)&&"success"===l,"maxio-progress-bar--error":r&&!("inline"===i)&&"error"===l,"maxio-progress-bar--indent":"indent"===i,"maxio-progress-bar--inline":"inline"===i,"maxio-progress-bar--indeterminate":void 0===r});return e.createElement("div",{className:v},a&&e.createElement("div",{id:s,className:"maxio-progress-bar__label"},a),u&&e.createElement("div",{id:c,className:"maxio-progress-bar__helper-text"},t),e.createElement("div",{className:"maxio-progress-bar__track",role:"progressbar","aria-labelledby":s,"aria-describedby":c,"aria-valuenow":r,"aria-valuemin":0,"aria-valuemax":o,"aria-busy":!l,"aria-invalid":"error"===l},e.createElement("div",{className:"maxio-progress-bar__progress",style:{"--tw-scale-x":`${r}%`}})),m&&e.createElement("div",{className:`maxio-progress-bar__${l}-icon`}),d&&e.createElement("div",{id:c,className:"maxio-progress-bar__helper-text"},t))},ve=({as:a="div",children:t,compact:n=!1,size:i="md",className:l,...r})=>{const o=a,s=p({[`maxio-body-${i}`]:!n,[`maxio-body-${i}-compact`]:n},l);return e.createElement(o,{className:s,...r},t)},he={sm:"h3",md:"h2",lg:"h1"},xe=({children:a,size:t="sm",className:n,...i})=>{const l=he[t],r=p(`maxio-heading-${t}`,n);return e.createElement(l,{className:r,...i},a)},ge=({as:a="div",children:t,size:n="md",className:i,...l})=>{const r=a,o=p(`maxio-display-${n}`,i);return e.createElement(r,{className:o,...l},t)},be=({as:a="div",children:t,className:n,...i})=>{const l=a,r=p("maxio-code",n);return e.createElement(l,{className:r,...i},t)},Ee=({as:a="div",children:t,size:n="sm",className:i,...l})=>{const r=a,o=p(`maxio-label-${n}`,i);return e.createElement(r,{className:o,...l},t)},_e=a({}),fe=()=>n(_e),Ne=({children:a,variant:n,withDivider:i,defaultIndex:r=0,onChange:o,index:s})=>{const[c,m]=t((()=>void 0!==s?s:r));l((()=>{void 0===s&&m(r),"number"==typeof s&&m(s)}),[r,s]);return e.createElement(_e.Provider,{value:{currentIndex:c,variant:n,withDivider:i,onChange:e=>{void 0===s&&m(e),"function"==typeof o&&o(e)}}},a)},ye=({disabled:a=!1,value:t=0,...n})=>{const{onChange:i,currentIndex:l}=fe(),r=p("maxio-tabs__tab",{"maxio-tabs__tab--active":l===t,"maxio-tabs__tab--disabled":a,"maxio-tabs__tab--icon":"icon"===n.type}),o=()=>{i(t)};if("icon"===n.type){const{icon:a}=n;return e.createElement("div",{className:r,onClick:o},e.createElement("div",{className:"maxio-tabs__tab__content"},a))}const{children:s,rightIcon:c}=n;return e.createElement("div",{className:r,onClick:o},e.createElement("div",{className:"maxio-tabs__tab__content"},s,c||null))},we=({children:a,variant:t="line",withDivider:n=!1,defaultIndex:i=0,index:l,onChange:r})=>e.createElement(Ne,{defaultIndex:i,variant:t,withDivider:n,index:l,onChange:r},a),ke=({children:a})=>e.createElement(e.Fragment,null,a),Ce=({children:a})=>{const{currentIndex:t}=fe();return e.createElement(e.Fragment,null,m.map(a,((e,a)=>{if(d(e)&&e.type===ke)return a===t?u(e,{}):null;throw new Error("You can only pass <TabPanel /> component as children")})))},Ie=({children:a})=>{const{variant:t,withDivider:n}=fe(),i=p("maxio-tabs",{"maxio-tabs--contained":"contained"===t,"maxio-tabs--divider":n});return e.createElement("div",{className:i},m.map(a,((e,a)=>{if(d(e)&&e.type===ye)return u(e,{value:a});throw new Error("You can only pass <Tab /> component as children")})))},Oe=({className:a,children:t,disabled:n=!1,external:i=!1,icon:l="arrow-right",noArrow:r=!1,size:o="md",...s})=>{const c=p("maxio-link",{[`maxio-link--${o}`]:!0,"maxio-link--disabled":n},a),m=i?"_blank":"_self";return l=i?"arrow-up-right":l,e.createElement("a",{className:c,target:m,...s},e.createElement("span",{className:"maxio-link__text"},t),!r&&e.createElement(S,{variant:l}))},Pe=a({}),Se=()=>n(Pe),Ve=({name:a,values:n,onChange:i,disabled:l=!1,invalid:r=!1,children:o})=>{const[s,c]=t(n||[]);return e.createElement(Pe.Provider,{value:{disabled:l,invalid:r,name:a,values:s,onChange:e=>{let a=[];a=s.includes(e)?s.filter((a=>a!==e)):[...s,e],c(a),i&&i(a)}}},o)},Te=({label:a,error:t=!1,className:n,indeterminate:l,...r})=>{const o=i(null),{name:s,disabled:c,invalid:m,onChange:d,values:u=[]}=Se(),v=!!s,h=c||r.disabled,x=m||t,g=v?u.includes(r.value):r.checked,b=p("maxio-checkbox",{"maxio-checkbox--checked":g,"maxio-checkbox--disabled":h,"maxio-checkbox--error":x,"maxio-checkbox--indeterminate":l},n),{inputProps:E}=C({value:r.value,"aria-label":a},{isDisabled:h,isReadOnly:h,setValue:d,addValue:d,toggleValue:d,removeValue:d,value:u,isSelected:e=>u.includes(e),validationState:t?"invalid":"valid",isInvalid:!!t},o);return e.createElement("label",{className:b},e.createElement("input",{type:"checkbox",role:"checkbox",className:"maxio-checkbox__input",ref:o,...v?E:r}),e.createElement("span",{className:"maxio-checkbox__control"}),e.createElement("span",{className:"maxio-checkbox__label"},a))},$e=({children:a,className:t,...n})=>e.createElement("div",{className:p("maxio-form-helper-text",t),...n},a),Fe=({children:a,className:t,...n})=>e.createElement("div",{className:p("maxio-form-error",t),...n},e.createElement("i",{className:"maxio-form-error__icon"}),e.createElement("div",{className:"maxio-form-error__text"},a)),De=({className:a,children:t,label:n,errorMessage:i,helperText:l,disabled:r})=>{const{values:o,onChange:s,name:c}=Se(),{descriptionProps:m,errorMessageProps:d,groupProps:u,labelProps:v}=I({name:c,label:n},{validationState:i?"invalid":"valid",isDisabled:r,isInvalid:!!i,isReadOnly:r,setValue:s,addValue:s,toggleValue:s,removeValue:s,value:o,isSelected:e=>o.includes(e)}),h=p("maxio-checkbox-group",{"maxio-checkbox-group--disabled":r},a),x=l&&!i;return e.createElement("div",{className:h,...u},n&&e.createElement("label",{className:"maxio-checkbox-group__label",...v},n),t,x&&e.createElement($e,{...m},l),i&&e.createElement(Fe,{...d},i))},We=a=>e.createElement(Ve,{...a},e.createElement(De,{...a},a.children)),He=a({}),Me=()=>n(He),ze=({children:a,onChange:n,value:i,defaultValue:r="",name:o,indent:s,disabled:c})=>{const[m,d]=t(r),[u,p]=t(null);l((()=>{d(i)}),[i]);return e.createElement(He.Provider,{value:{onChange:e=>{d(e),n&&n(e)},name:o,value:m,indent:s,disabled:c,lastFocusedValue:u,setLastFocusedValue:p}},a)},Le=({indent:a=!1,disabled:t=!1,invalid:n=!1,label:l,...r})=>{const o=i(null),{disabled:s,indent:c,invalid:m,name:d,onChange:u,value:v,setLastFocusedValue:h=(()=>{}),lastFocusedValue:x=null}=Me(),g=!!d,b=m||n,E=s||t,_=p("maxio-radio",{"maxio-radio--indent":c||a,"maxio-radio--disabled":E,"maxio-radio--error":b}),{inputProps:f}=O({...r,children:l,value:(r.value||"").toString()},{isDisabled:E,isReadOnly:E,isRequired:!1,name:d,validationState:b?"invalid":"valid",isInvalid:b,selectedValue:v,setSelectedValue:u,setLastFocusedValue:h,lastFocusedValue:x},o);return e.createElement("label",{className:_},e.createElement("input",{ref:o,type:"radio",className:"maxio-radio__input",...g?f:r}),e.createElement("span",{className:"maxio-radio__control",tabIndex:0}),e.createElement("span",{className:"maxio-radio__label"},l))},Re=({children:a,label:t,errorMessage:n,helperText:i,disabled:l=!1,invalid:r=!1})=>{const{name:o,onChange:s,value:c,lastFocusedValue:m,setLastFocusedValue:d}=Me(),{radioGroupProps:u,labelProps:p,descriptionProps:v,errorMessageProps:h}=P({name:o,label:t},{name:o,validationState:r?"invalid":"valid",isDisabled:l,isInvalid:r,isReadOnly:l,isRequired:!1,selectedValue:c,lastFocusedValue:m,setLastFocusedValue:d,setSelectedValue:s});return e.createElement(e.Fragment,null,e.createElement("div",{className:"maxio-radio-group",...u},t&&e.createElement("label",{className:"maxio-radio-group__label",...p},t),a,n&&r&&e.createElement(Fe,{...h},n),i&&!n&&e.createElement($e,{...v},i)))},Ae=a=>e.createElement(ze,{...a},e.createElement(Re,{...a},a.children));export{V as ActionList,T as Avatar,ve as Body,z as BrandLogo,Y as Button,Te as Checkbox,We as CheckboxGroup,be as Code,ge as Display,Fe as FormErrorMessage,$e as FormHelperText,Q as HeaderButton,Z as HeaderNav,ee as HeaderSearchField,te as HeaderSearchInput,ae as HeaderSearchMenu,xe as Heading,S as Icon,j as IconButton,Ee as Label,Oe as Link,W as Menu,M as MenuButton,H as MenuList,G as OverlayTrigger,pe as ProgressBar,Le as Radio,Ae as RadioGroup,ue as SideNav,ye as Tab,Ie as TabList,ke as TabPanel,Ce as TabPanels,we as Tabs,q as Toggle,K as Tooltip,J as TooltipTrigger,U as useHover,A as useOverlayTrigger,B as useWindowSize};
package/dist/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "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:b,reference:f},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:b,style:_,...p,...E()},m()));return e.createElement(e.Fragment,null,e.createElement("div",{ref:f,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"},b=({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,b=e.useCallback((e=>{h||x(e),d&&d(e)}),[l]),f=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:f,isActive:h?l:p,onOverlayUpdate:b,autoHideMs:s,usePortal:c,placement:n,interactions:a,renderOverlay:()=>e.createElement(g,{size:r,arrowPosition:E[n],maxWidth:i},o())},t)},f=({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(b,{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}=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}=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)))},S=({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)))))))},T=()=>{const{sections:t}=C();return e.createElement("ul",{className:"maxio-side-nav__items"},t.map((t=>e.createElement(S,{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(T,null))},F={sm:"h3",md:"h2",lg:"h1"},$=e.createContext({}),V=()=>e.useContext($),D=({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($.Provider,{value:{currentIndex:s,variant:a,withDivider:n,onChange:e=>{void 0===o&&l(e),"function"==typeof r&&r(e)}}},t)},R=({disabled:a=!1,value:n=0,...i})=>{const{onChange:r,currentIndex:o}=V(),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))},H=({children:t})=>e.createElement(e.Fragment,null,t),L=e.createContext({}),M=()=>e.useContext(L),W=({children:t,onChange:a,value:n,defaultValue:i="",name:r,indent:o,disabled:s})=>{const[l,c]=e.useState(i),[m,d]=e.useState(null);e.useEffect((()=>{c(n)}),[n]);return e.createElement(L.Provider,{value:{onChange:e=>{c(e),a&&a(e)},name:r,value:l,indent:o,disabled:s,lastFocusedValue:m,setLastFocusedValue:d}},t)},z=({children:a,className:n,...i})=>e.createElement("div",{className:t("maxio-form-error",n),...i},e.createElement("i",{className:"maxio-form-error__icon"}),e.createElement("div",{className:"maxio-form-error__text"},a)),A=({children:a,className:n,...i})=>e.createElement("div",{className:t("maxio-form-helper-text",n),...i},a),B=({children:t,label:a,errorMessage:n,helperText:r,disabled:o=!1,invalid:s=!1})=>{const{name:l,onChange:c,value:m,lastFocusedValue:d,setLastFocusedValue:u}=M(),{radioGroupProps:p,labelProps:x,descriptionProps:v,errorMessageProps:h}=i.useRadioGroup({name:l,label:a},{name:l,validationState:s?"invalid":"valid",isDisabled:o,isInvalid:s,isReadOnly:o,isRequired:!1,selectedValue:m,lastFocusedValue:d,setLastFocusedValue:u,setSelectedValue:c});return e.createElement(e.Fragment,null,e.createElement("div",{className:"maxio-radio-group",...p},a&&e.createElement("label",{className:"maxio-radio-group__label",...x},a),t,n&&s&&e.createElement(z,{...h},n),r&&!n&&e.createElement(A,{...v},r)))};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.FormErrorMessage=z,exports.FormHelperText=A,exports.HeaderButton=f,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(f,{type:"submit","aria-label":"Submit search",iconName:"arrow-right"}))},exports.HeaderSearchMenu=N,exports.Heading=({children:a,size:n="sm",className:i,...r})=>{const o=F[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.Radio=({indent:a=!1,disabled:n=!1,invalid:r=!1,label:o,...s})=>{const l=e.useRef(null),{disabled:c,indent:m,invalid:d,name:u,onChange:p,value:x,setLastFocusedValue:v=(()=>{}),lastFocusedValue:h=null}=M(),g=!!u,E=d||r,b=c||n,f=t("maxio-radio",{"maxio-radio--indent":m||a,"maxio-radio--disabled":b,"maxio-radio--error":E}),{inputProps:_}=i.useRadio({...s,children:o,value:(s.value||"").toString()},{isDisabled:b,isReadOnly:b,isRequired:!1,name:u,validationState:E?"invalid":"valid",isInvalid:E,selectedValue:x,setSelectedValue:p,setLastFocusedValue:v,lastFocusedValue:h},l);return e.createElement("label",{className:f},e.createElement("input",{ref:l,type:"radio",className:"maxio-radio__input",...g?_:s}),e.createElement("span",{className:"maxio-radio__control",tabIndex:0}),e.createElement("span",{className:"maxio-radio__label"},o))},exports.RadioGroup=t=>e.createElement(W,{...t},e.createElement(B,{...t},t.children)),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=R,exports.TabList=({children:a})=>{const{variant:n,withDivider:i}=V(),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===R)return e.cloneElement(t,{value:a});throw new Error("You can only pass <Tab /> component as children")})))},exports.TabPanel=H,exports.TabPanels=({children:t})=>{const{currentIndex:a}=V();return e.createElement(e.Fragment,null,e.Children.map(t,((t,n)=>{if(e.isValidElement(t)&&t.type===H)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(D,{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=b,exports.useHover=p,exports.useOverlayTrigger=u,exports.useWindowSize=x;
1
+ "use strict";var e=require("react"),a=require("classnames"),t=require("framer-motion"),n=require("@floating-ui/react-dom-interactions"),i=require("react-aria");const r=({variant:t,white:n,className:i})=>e.createElement("i",{className:a("maxio-icon",`maxio-icon-${t}`,n&&"maxio-icon--white",i)}),o=({items:t,isShadowed:n=!0})=>{const i=a("maxio-action-list",{"maxio-action-list--shadow":n});return 0===t.length?null:e.createElement("ul",{className:i},t.map((a=>{if("divider"===a.type)return e.createElement("li",{key:`list-item-divider-${a.id}`,className:"maxio-action-list__divider",role:"separator","aria-hidden":"true"});const{id:t,leadingIconName:n,trailingIconName:i,label:o,description:l,link:s}=a;return e.createElement("li",{className:"maxio-action-list__item",key:`list-item-${t||o}`},e.createElement("a",{...s,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),l&&e.createElement("span",{className:"maxio-action-list__description"},l),i&&e.createElement(r,{variant:i,className:"maxio-action-list__trailing-icon"})))})))},l=e.createContext({}),s=({children:a})=>{const[t,n]=e.useState(!1);return e.createElement(l.Provider,{value:{isOpen:t,onClose:()=>n(!1),onOpen:()=>n(!0),onToggle:()=>n((e=>!e))}},a)};const c=({children:a})=>{const{isOpen:t,onToggle:n,onClose:i}=function(){const a=e.useContext(l);if(!a||"object"==typeof a&&0===Object.keys(a).length)throw new Error("useMenu hook must be used within a MenuProvider");return a}();return e.createElement("details",{open:t,onToggle:n,className:"maxio-action-menu"},"function"==typeof a?a({isOpen:t,onClose:i}):a)},m={click:n.useClick,hover:n.useHover,focus:n.useFocus,dismiss:n.useDismiss},d=(e,a)=>a.map((a=>m[a](e))),u=({placement:a="top",isActive:t=!1,interactions:i=["hover"],floatingElementOffset:r=0,onOverlayUpdate:o,autoHideMs:l})=>{const s=e.useRef(null),{strategy:c,x:m,y:u,context:p,floating:x,reference:v}=n.useFloating({placement:a,open:t,onOpenChange:e=>o(e),middleware:[n.offset(r)]}),{getReferenceProps:h,getFloatingProps:g}=n.useInteractions([...d(p,i),n.useRole(p,{role:"tooltip"})]);e.useEffect((()=>{s.current&&clearTimeout(s.current),t&&l&&(s.current=setTimeout((()=>o(!1)),l))}),[t,l]);return{isActive:t,refs:{floating:x,reference:v},floatingElementCSSPosition:{position:c,top:null!=u?u:0,left:null!=m?m:0},getReferenceProps:h,getFloatingProps:g}};function p(a,t=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)}),t)},l=a&&a.current;return l&&(l.addEventListener("mouseenter",e),l.addEventListener("mouseleave",r)),()=>{l&&(l.removeEventListener("mouseenter",e),l.removeEventListener("mouseleave",r))}}),[a]),r}function x(a=500){const[t,n]=e.useState((()=>{const{innerWidth:e,innerHeight:a}=window;return{windowWitdh:e,windowHeight:a}})),i=e.useRef(null);return e.useEffect((()=>{const e=()=>{const{innerWidth:e,innerHeight:t}=window;clearTimeout(i.current),i.current=setTimeout((()=>{n({windowWitdh:e,windowHeight:t})}),a)};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[a]),t}const v=({children:i,usePortal:r=!1,isActive:o=!1,placement:l="top",interactions:s=["hover"],role:c="tooltip",renderOverlay:m,floatingElementOffset:d,motionSettings:p={},autoHideMs:x,onOverlayUpdate:v,className:h})=>{const{getReferenceProps:g,getFloatingProps:b,refs:{floating:E,reference:f},floatingElementCSSPosition:_}=u({role:c,isActive:o,onOverlayUpdate:v,autoHideMs:x,floatingElementOffset:d,interactions:s,placement:l}),N=e.createElement(t.AnimatePresence,null,o&&e.createElement(t.motion.div,{ref:E,style:_,...p,...b()},m()));return e.createElement(e.Fragment,null,e.createElement("div",{ref:f,className:a("maxio-inline-flex",h),...g(),"data-testid":"overlay-trigger"},i),r?e.createElement(n.FloatingPortal,{id:"maxio-ui-portal"},N):N)},h=({children:t,loading:n=!1,fullWidth:i=!1,className:r,variant:o="primary",size:l="lg",disabled:s,icon:c,...m})=>{const d=a("maxio-button",r,{[`maxio-button--${l}`]:l,[`maxio-button--${o}`]:o,"maxio-button--loading":n,"maxio-button--full-width":i}),u=a("maxio-button__loader",{"maxio-button__loader--white":["primary","secondary","danger"].includes(o)});return e.createElement("button",{disabled:s,...m,className:d},t,!n&&c,n&&e.createElement("div",{className:u}))},g=({children:t,arrowPosition:n,size:i="regular",maxWidth:r=160})=>e.createElement("div",{"data-testid":"tooltip",className:a("maxio-tooltip",`maxio-tooltip--${i}`,{[`maxio-tooltip--arrow-${n}`]:n})},e.createElement("div",{className:"maxio-tooltip__content",style:{maxWidth:r}},t)),b={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:a,interactions:t=["hover"],placement:n="right",maxWidth:i=160,size:r="regular",renderContent:o,autoHideMs:l,isVisible:s,usePortal:c,className:m,onVisibilityUpdate:d,floatingElementOffset:u=5})=>{const[p,x]=e.useState(!1),h=void 0!==s,E=e.useCallback((e=>{h||x(e),d&&d(e)}),[s]),f=e.useMemo((()=>(e=>{const a=e.startsWith("top")||e.startsWith("bottom")?"Y":"X",t=`translate${a}(${e.startsWith("bottom")||e.startsWith("right")?"-":""}10px)`;return{initial:{opacity:0,visibility:"hidden",transform:t},animate:{opacity:1,visibility:"visible",transform:`translate${a}(0px)`},exit:{opacity:0,visibility:"hidden",transform:t},transition:{ease:[.4,0,.5,1],duration:.2}}})(n)),[n]);return e.createElement(v,{role:"tooltip",className:m,floatingElementOffset:u,motionSettings:f,isActive:h?s:p,onOverlayUpdate:E,autoHideMs:l,usePortal:c,placement:n,interactions:t,renderOverlay:()=>e.createElement(g,{size:r,arrowPosition:b[n],maxWidth:i},o())},a)},f=({children:t,as:n,iconName:i,noPadding:o,className:l,...s})=>{const c=n||"button",m=a("maxio-header-button",l,{"maxio-header-button--no-padding":o});return e.createElement(c,{className:m,...s},e.createElement("div",{className:"maxio-header-button__content"},t||null,i&&e.createElement(r,{variant:i})))},_=e.forwardRef((({className:t,...n},i)=>e.createElement("div",{className:a("maxio-header-search-field",t)},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:a,...t},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,...t},a.map((({label:a,value:t})=>e.createElement("option",{key:`${a}-${t}`,value:t},a)))),e.createElement("div",{className:"maxio-header-search-menu__icon"},e.createElement(r,{variant:"chevron-down"})))));N.displayName="SearchMenu";const y=({leadingIcon:a,trailingIcon:t,type:n="menu",children:i,leadingIconClassName:o,isTooltipVisible:l=!1})=>e.createElement(e.Fragment,null,e.createElement(E,{usePortal:!1,isVisible:l,renderContent:()=>i,floatingElementOffset:12},a&&e.createElement("span",{className:"maxio-side-nav__icon"},e.createElement(r,{variant:a,className:o}))),e.createElement("span",{className:`maxio-side-nav__${n}-title`,"data-testid":"maxio-sidebar-section-name"},i),t&&e.createElement("span",{className:"maxio-side-nav__menu-chevron"},e.createElement(r,{variant:t}))),w=e.createContext({}),k=()=>e.useContext(w),C=({children:a,withIcons:t=!0,sections:n,shouldToggleSidebar:i=!0,topDropdownItems:r,collapseBreakpoint:o=800})=>{const[l,s]=e.useState((()=>!i||("undefined"==typeof window||window.innerWidth>o))),[c,m]=e.useState(n),d=()=>s(!0),u=()=>s(!1),{windowWitdh:p}=x();e.useEffect((()=>{!function(e){if(!i)return;e<o&&l&&v();e>o&&!l&&h()}(p)}),[p]),e.useEffect((()=>{l?h():v()}),[]);return e.createElement(w.Provider,{value:{sections:c,topDropdownItems:r,onSectionOpen:e=>{const a=g();m((t=>t.map((t=>{var n;const i=t.name===e&&!t.isOpen;return a&&(null===(n=t.items)||void 0===n?void 0:n.includes(a))?{...t,isOpen:i,isCurrent:!i}:{...t,isOpen:i}}))))},isOpen:l,onOpen:d,onClose:u,onToggle:()=>s((e=>!e)),withIcons:t}},a);function v(){const e=g();e&&(m((a=>a.map((a=>{var t;return{...a,isOpen:!1,isCurrent:(null===(t=a.items)||void 0===t?void 0:t.includes(e))||!1}})))),u())}function h(){const e=g();e&&(m((a=>a.map((a=>{var t;return{...a,isOpen:(null===(t=a.items)||void 0===t?void 0:t.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:a,topDropdownItems:t,isOpen:n}=k(),{mainItem:i,otherItems:r,actions:l}=t,s=e.useRef(null),c=p(s),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"},...l.map(m)].filter((e=>null!=e))),[l,r]),u=r.length+l.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:a},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:a,className:"maxio-side-nav__menu-button maxio-side-nav__menu-button--large","aria-haspopup":"true",ref:s},i.url?e.createElement(e.Fragment,null,e.createElement(y,{type:"menu",isTooltipVisible:!n&&c,leadingIcon:i.icon,trailingIcon:"chevron-down",leadingIconClassName:"maxio-icon-circle-small-fill maxio-icon--success"},i.title)):e.createElement(y,{type:"menu",trailingIcon:"chevron-down"},i.title)),e.createElement(o,{items:d})))},S=({section:a})=>{const{isOpen:t}=k(),n=e.useRef(null),i=p(n);return e.createElement("li",{className:"maxio-side-nav__item","data-key":a.key,"data-testid":"maxio-sidebar-section"},e.createElement("a",{className:"maxio-side-nav__link","aria-current":a.isCurrent?"page":void 0,role:"button",href:a.href,ref:n},e.createElement(y,{isTooltipVisible:i&&!t,type:"menu",leadingIcon:a.icon},a.name)))},O=({section:t})=>{var n;const{onOpen:i,onSectionOpen:r,isOpen:o,withIcons:l}=k();const s=e.useRef(null),c=p(s);return t.Component?e.createElement(t.Component,{section:t}):t.href?e.createElement(S,{section:t}):e.createElement("li",{className:a("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),i()}},e.createElement(y,{type:"menu",isTooltipVisible:!o&&c,leadingIcon:t.icon,trailingIcon:(null===(n=t.items)||void 0===n?void 0:n.length)?"chevron-down":void 0},t.name)),t.isOpen&&e.createElement("ul",{className:"maxio-side-nav__menu"},t.items.map((a=>e.createElement("li",{key:`section-sub-item-${a.name}`,className:"maxio-side-nav__item","data-testid":"maxio-section-item"},e.createElement("a",{className:"maxio-side-nav__link",href:a.href,"aria-current":a.isCurrent?"page":void 0},e.createElement("span",{className:"maxio-side-nav__link-title"},a.name)))))))},T=()=>{const{sections:a}=k();return e.createElement("ul",{className:"maxio-side-nav__items"},a.map((a=>e.createElement(O,{key:`section-${a.name}`,section:a}))))},P=()=>{const{isOpen:t}=k();return e.createElement("nav",{className:a("maxio-side-nav",{"maxio-side-nav--collapsed":!t})},e.createElement(I,null),e.createElement("hr",{className:"maxio-side-nav__divider"}),e.createElement(T,null))},V={sm:"h3",md:"h2",lg:"h1"},F=e.createContext({}),R=()=>e.useContext(F),D=({children:a,variant:t,withDivider:n,defaultIndex:i=0,onChange:r,index:o})=>{const[l,s]=e.useState((()=>void 0!==o?o:i));e.useEffect((()=>{void 0===o&&s(i),"number"==typeof o&&s(o)}),[i,o]);return e.createElement(F.Provider,{value:{currentIndex:l,variant:t,withDivider:n,onChange:e=>{void 0===o&&s(e),"function"==typeof r&&r(e)}}},a)},$=({disabled:t=!1,value:n=0,...i})=>{const{onChange:r,currentIndex:o}=R(),l=a("maxio-tabs__tab",{"maxio-tabs__tab--active":o===n,"maxio-tabs__tab--disabled":t,"maxio-tabs__tab--icon":"icon"===i.type}),s=()=>{r(n)};if("icon"===i.type){const{icon:a}=i;return e.createElement("div",{className:l,onClick:s},e.createElement("div",{className:"maxio-tabs__tab__content"},a))}const{children:c,rightIcon:m}=i;return e.createElement("div",{className:l,onClick:s},e.createElement("div",{className:"maxio-tabs__tab__content"},c,m||null))},M=({children:a})=>e.createElement(e.Fragment,null,a),H=e.createContext({}),L=()=>e.useContext(H),W=({name:a,values:t,onChange:n,disabled:i=!1,invalid:r=!1,children:o})=>{const[l,s]=e.useState(t||[]);return e.createElement(H.Provider,{value:{disabled:i,invalid:r,name:a,values:l,onChange:e=>{let a=[];a=l.includes(e)?l.filter((a=>a!==e)):[...l,e],s(a),n&&n(a)}}},o)},z=({children:t,className:n,...i})=>e.createElement("div",{className:a("maxio-form-helper-text",n),...i},t),A=({children:t,className:n,...i})=>e.createElement("div",{className:a("maxio-form-error",n),...i},e.createElement("i",{className:"maxio-form-error__icon"}),e.createElement("div",{className:"maxio-form-error__text"},t)),B=({className:t,children:n,label:r,errorMessage:o,helperText:l,disabled:s})=>{const{values:c,onChange:m,name:d}=L(),{descriptionProps:u,errorMessageProps:p,groupProps:x,labelProps:v}=i.useCheckboxGroup({name:d,label:r},{validationState:o?"invalid":"valid",isDisabled:s,isInvalid:!!o,isReadOnly:s,setValue:m,addValue:m,toggleValue:m,removeValue:m,value:c,isSelected:e=>c.includes(e)}),h=a("maxio-checkbox-group",{"maxio-checkbox-group--disabled":s},t),g=l&&!o;return e.createElement("div",{className:h,...x},r&&e.createElement("label",{className:"maxio-checkbox-group__label",...v},r),n,g&&e.createElement(z,{...u},l),o&&e.createElement(A,{...p},o))},q=e.createContext({}),G=()=>e.useContext(q),U=({children:a,onChange:t,value:n,defaultValue:i="",name:r,indent:o,disabled:l})=>{const[s,c]=e.useState(i),[m,d]=e.useState(null);e.useEffect((()=>{c(n)}),[n]);return e.createElement(q.Provider,{value:{onChange:e=>{c(e),t&&t(e)},name:r,value:s,indent:o,disabled:l,lastFocusedValue:m,setLastFocusedValue:d}},a)},Y=({children:a,label:t,errorMessage:n,helperText:r,disabled:o=!1,invalid:l=!1})=>{const{name:s,onChange:c,value:m,lastFocusedValue:d,setLastFocusedValue:u}=G(),{radioGroupProps:p,labelProps:x,descriptionProps:v,errorMessageProps:h}=i.useRadioGroup({name:s,label:t},{name:s,validationState:l?"invalid":"valid",isDisabled:o,isInvalid:l,isReadOnly:o,isRequired:!1,selectedValue:m,lastFocusedValue:d,setLastFocusedValue:u,setSelectedValue:c});return e.createElement(e.Fragment,null,e.createElement("div",{className:"maxio-radio-group",...p},t&&e.createElement("label",{className:"maxio-radio-group__label",...x},t),a,n&&l&&e.createElement(A,{...h},n),r&&!n&&e.createElement(z,{...v},r)))};exports.ActionList=o,exports.Avatar=({className:t,src:n,alt:i="avatar"})=>e.createElement("img",{className:a("maxio-avatar",t),alt:i,src:n}),exports.Body=({as:t="div",children:n,compact:i=!1,size:r="md",className:o,...l})=>{const s=t,c=a({[`maxio-body-${r}`]:!i,[`maxio-body-${r}-compact`]:i},o);return e.createElement(s,{className:c,...l},n)},exports.BrandLogo=({icon:t,variant:n="default"})=>e.createElement("i",{className:a("maxio-brand-logo",`maxio-brand-logo-${t}`,{[`maxio-brand-logo--${n}`]:"default"!==n})}),exports.Button=h,exports.Checkbox=({label:t,error:n=!1,className:r,indeterminate:o,...l})=>{const s=e.useRef(null),{name:c,disabled:m,invalid:d,onChange:u,values:p=[]}=L(),x=!!c,v=m||l.disabled,h=d||n,g=x?p.includes(l.value):l.checked,b=a("maxio-checkbox",{"maxio-checkbox--checked":g,"maxio-checkbox--disabled":v,"maxio-checkbox--error":h,"maxio-checkbox--indeterminate":o},r),{inputProps:E}=i.useCheckboxGroupItem({value:l.value,"aria-label":t},{isDisabled:v,isReadOnly:v,setValue:u,addValue:u,toggleValue:u,removeValue:u,value:p,isSelected:e=>p.includes(e),validationState:n?"invalid":"valid",isInvalid:!!n},s);return e.createElement("label",{className:b},e.createElement("input",{type:"checkbox",role:"checkbox",className:"maxio-checkbox__input",ref:s,...x?E:l}),e.createElement("span",{className:"maxio-checkbox__control"}),e.createElement("span",{className:"maxio-checkbox__label"},t))},exports.CheckboxGroup=a=>e.createElement(W,{...a},e.createElement(B,{...a},a.children)),exports.Code=({as:t="div",children:n,className:i,...r})=>{const o=t,l=a("maxio-code",i);return e.createElement(o,{className:l,...r},n)},exports.Display=({as:t="div",children:n,size:i="md",className:r,...o})=>{const l=t,s=a(`maxio-display-${i}`,r);return e.createElement(l,{className:s,...o},n)},exports.FormErrorMessage=A,exports.FormHelperText=z,exports.HeaderButton=f,exports.HeaderNav=({items:t})=>e.createElement("ul",{className:"maxio-header-nav"},t.map((({label:t,id:n,isActive:i,...r})=>e.createElement("li",{className:"maxio-header-nav__item",key:`header-nav-list-item-${n}`},e.createElement("a",{className:a("maxio-header-nav__link",{"maxio-header-nav__link--active":i}),...r},t))))),exports.HeaderSearchField=_,exports.HeaderSearchInput=({options:a,onSubmit:t})=>{const n=e.useRef(null),i=e.useRef(null);return e.createElement("form",{className:"maxio-header-search-input",onSubmit:function(e){var a,r;e.preventDefault(),t({searchField:(null===(a=n.current)||void 0===a?void 0:a.value)||"",selectField:(null===(r=i.current)||void 0===r?void 0:r.value)||""})}},e.createElement(N,{ref:i,options:a}),e.createElement(_,{ref:n}),e.createElement(f,{type:"submit","aria-label":"Submit search",iconName:"arrow-right"}))},exports.HeaderSearchMenu=N,exports.Heading=({children:t,size:n="sm",className:i,...r})=>{const o=V[n],l=a(`maxio-heading-${n}`,i);return e.createElement(o,{className:l,...r},t)},exports.Icon=r,exports.IconButton=({icon:a,...t})=>e.createElement(h,{icon:a,className:"maxio-button--icon",...t},null),exports.Label=({as:t="div",children:n,size:i="sm",className:r,...o})=>{const l=t,s=a(`maxio-label-${i}`,r);return e.createElement(l,{className:s,...o},n)},exports.Link=({className:t,children:n,disabled:i=!1,external:o=!1,icon:l="arrow-right",noArrow:s=!1,size:c="md",...m})=>{const d=a("maxio-link",{[`maxio-link--${c}`]:!0,"maxio-link--disabled":i},t),u=o?"_blank":"_self";return l=o?"arrow-up-right":l,e.createElement("a",{className:d,target:u,...m},e.createElement("span",{className:"maxio-link__text"},n),!s&&e.createElement(r,{variant:l}))},exports.Menu=({children:a})=>e.createElement(s,null,e.createElement(c,null,a)),exports.MenuButton=({children:t,iconName:n="chevron-down"})=>{const i=a({"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"},t&&e.createElement("span",null,t),n&&e.createElement(r,{variant:n,className:i})))},exports.MenuList=({items:t,alignItemsEnd:n=!1})=>{const i=a("maxio-action-menu__content",{"maxio-action-menu__content--align-end":n});return e.createElement("div",{className:i},e.createElement(o,{items:t}))},exports.OverlayTrigger=v,exports.ProgressBar=({label:t,helperText:n,size:r="md",variant:o="default",status:l,value:s,maxValue:c=100})=>{const m=i.useId(),d=i.useId(),u=l&&!!t&&!!s&&!("inline"===o),p=n&&!("inline"===o),x=n&&"inline"===o,v=a("maxio-progress-bar",{"maxio-progress-bar--lg":"lg"===r,"maxio-progress-bar--success":s&&!("inline"===o)&&"success"===l,"maxio-progress-bar--error":s&&!("inline"===o)&&"error"===l,"maxio-progress-bar--indent":"indent"===o,"maxio-progress-bar--inline":"inline"===o,"maxio-progress-bar--indeterminate":void 0===s});return e.createElement("div",{className:v},t&&e.createElement("div",{id:m,className:"maxio-progress-bar__label"},t),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":s,"aria-valuemin":0,"aria-valuemax":c,"aria-busy":!l,"aria-invalid":"error"===l},e.createElement("div",{className:"maxio-progress-bar__progress",style:{"--tw-scale-x":`${s}%`}})),u&&e.createElement("div",{className:`maxio-progress-bar__${l}-icon`}),p&&e.createElement("div",{id:d,className:"maxio-progress-bar__helper-text"},n))},exports.Radio=({indent:t=!1,disabled:n=!1,invalid:r=!1,label:o,...l})=>{const s=e.useRef(null),{disabled:c,indent:m,invalid:d,name:u,onChange:p,value:x,setLastFocusedValue:v=(()=>{}),lastFocusedValue:h=null}=G(),g=!!u,b=d||r,E=c||n,f=a("maxio-radio",{"maxio-radio--indent":m||t,"maxio-radio--disabled":E,"maxio-radio--error":b}),{inputProps:_}=i.useRadio({...l,children:o,value:(l.value||"").toString()},{isDisabled:E,isReadOnly:E,isRequired:!1,name:u,validationState:b?"invalid":"valid",isInvalid:b,selectedValue:x,setSelectedValue:p,setLastFocusedValue:v,lastFocusedValue:h},s);return e.createElement("label",{className:f},e.createElement("input",{ref:s,type:"radio",className:"maxio-radio__input",...g?_:l}),e.createElement("span",{className:"maxio-radio__control",tabIndex:0}),e.createElement("span",{className:"maxio-radio__label"},o))},exports.RadioGroup=a=>e.createElement(U,{...a},e.createElement(Y,{...a},a.children)),exports.SideNav=({withIcons:a,shouldToggleSidebar:t,topDropdownItems:n,sections:i,collapseBreakpoint:r=800})=>e.createElement(C,{collapseBreakpoint:r,withIcons:a,shouldToggleSidebar:t,topDropdownItems:n,sections:i},e.createElement(P,null)),exports.Tab=$,exports.TabList=({children:t})=>{const{variant:n,withDivider:i}=R(),r=a("maxio-tabs",{"maxio-tabs--contained":"contained"===n,"maxio-tabs--divider":i});return e.createElement("div",{className:r},e.Children.map(t,((a,t)=>{if(e.isValidElement(a)&&a.type===$)return e.cloneElement(a,{value:t});throw new Error("You can only pass <Tab /> component as children")})))},exports.TabPanel=M,exports.TabPanels=({children:a})=>{const{currentIndex:t}=R();return e.createElement(e.Fragment,null,e.Children.map(a,((a,n)=>{if(e.isValidElement(a)&&a.type===M)return n===t?e.cloneElement(a,{}):null;throw new Error("You can only pass <TabPanel /> component as children")})))},exports.Tabs=({children:a,variant:t="line",withDivider:n=!1,defaultIndex:i=0,index:r,onChange:o})=>e.createElement(D,{defaultIndex:i,variant:t,withDivider:n,index:r,onChange:o},a),exports.Toggle=({defaultChecked:t,checked:n,onChange:i,disabled:r,valueDescription:o,valueDescriptionPosition:l,className:s,name:c,id:m})=>{const d=e.useId(),u="boolean"==typeof t,p=m||d,x="left"===l?"row":"row-reverse",v=o&&l,h=e.useCallback((e=>{if("Enter"===e.code||"Space"===e.code){e.preventDefault();const a=e.currentTarget.checked;u&&(e.currentTarget.checked=!a),i&&i(!a,e)}}),[u,i]);return e.createElement("div",{className:a("maxio-toggle",s,{"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:t,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=E,exports.useHover=p,exports.useOverlayTrigger=u,exports.useWindowSize=x;
2
2
  //# sourceMappingURL=index.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@maxio-com/react-ui-components",
3
- "version": "1.13.0",
3
+ "version": "1.13.1",
4
4
  "description": "React UI components",
5
5
  "license": "MIT",
6
6
  "main": "dist/index.js",
@@ -49,5 +49,5 @@
49
49
  "framer-motion": "^7.6.4",
50
50
  "react-aria": "^3.28.0"
51
51
  },
52
- "gitHead": "cce6e38d270a5b1b69454e79cf4c886e60eded3d"
52
+ "gitHead": "09a49b57568fb3103d0ecd5c196c76e7a69828b4"
53
53
  }
@@ -1,10 +1,10 @@
1
1
  /// <reference types="react" />
2
2
  import * as React$1 from 'react';
3
- import React__default, { ReactNode, RefObject, FC, ElementType, AnchorHTMLAttributes } from 'react';
3
+ import React__default, { ReactNode, RefObject, FC, ElementType, AnchorHTMLAttributes, InputHTMLAttributes } from 'react';
4
4
  import * as _floating_ui_react_dom_interactions from '@floating-ui/react-dom-interactions';
5
5
  import { AnimationProps } from 'framer-motion';
6
6
 
7
- declare const ICONS: readonly ["address-card", "arrow-down", "arrow-down-left", "arrow-down-right", "arrow-left", "arrow-left-right", "arrow-right", "arrow-up", "arrow-up-left", "arrow-up-right", "bank", "bar-chart", "briefcase", "building", "business-intelligence", "chat", "check", "check-circle", "chevron-down", "circle-dash", "circle-fill", "circle-stroke", "clipboard", "cloud", "cog", "copy-file", "credit-card", "cross", "cross-circle", "dashboard", "document", "document-blank", "dollar", "edit", "error", "globe", "graph", "home", "info-circle", "life-buoy", "list", "login", "logout", "megaphone", "menu", "menu-chevron-left", "menu-chevron-right", "notification", "notification-unread", "plus", "plus-circle", "profile", "question-circle", "recently-viewed", "search", "trash", "warning-circle"];
7
+ declare const ICONS: readonly ["address-card", "arrow-down", "arrow-down-left", "arrow-down-left-long", "arrow-down-long", "arrow-down-right", "arrow-down-right-long", "arrow-down-up", "arrow-left", "arrow-left-long", "arrow-left-right", "arrow-right", "arrow-right-long", "arrow-turn-down-right", "arrow-up", "arrow-up-left", "arrow-up-left-long", "arrow-up-long", "arrow-up-right", "arrow-up-right-long", "bank", "bar-chart", "briefcase", "building", "business-intelligence", "caret-down", "caret-left", "caret-right", "caret-up", "chat", "check", "check-box", "check-box-checked", "check-box-checked-fill", "check-box-indeterminate-fill", "check-circle", "check-circle-fill", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "chevron-up-down", "circle", "circle-half-stroke-small", "circle-small-dash", "circle-small-fill", "circle-small-stroke", "clipboard", "cloud", "cog", "copy-file", "credit-card", "cross", "cross-circle", "cross-circle-fill", "dashboard", "diamond-small-fill", "document", "document-blank", "dollar", "dot-circle-fill", "dot-fill", "edit", "error", "error-fill", "error-small-fill", "globe", "graph", "home", "info-circle", "info-circle-fill", "life-buoy", "line-vertical", "list", "login", "logout", "megaphone", "menu", "menu-chevron-left", "menu-chevron-right", "notification", "notification-unread", "plus", "plus-circle", "plus-circle-fill", "profile", "question-circle", "question-circle-fill", "recently-viewed", "search", "square-small-fill", "trash", "triangle-small-fill", "warning-circle", "warning-circle-fill"];
8
8
 
9
9
  declare type IconVariant = (typeof ICONS)[number];
10
10
  declare type IconProps = {
@@ -381,6 +381,37 @@ interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
381
381
  declare const Link: React__default.FC<LinkProps>;
382
382
  //# sourceMappingURL=Link.d.ts.map
383
383
 
384
+ interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
385
+ error?: boolean;
386
+ indeterminate?: boolean;
387
+ label: string;
388
+ value: string;
389
+ }
390
+ declare const Checkbox: ({ label, error, className, indeterminate, ...props }: CheckboxProps) => JSX.Element;
391
+
392
+ declare type CheckboxGroupContext = {
393
+ name: string;
394
+ values?: string[];
395
+ onChange?: (value: string | string[]) => void;
396
+ disabled?: boolean;
397
+ invalid?: boolean;
398
+ };
399
+ declare type CheckboxGroupProviderProps = CheckboxGroupContext & {
400
+ children: React__default.ReactNode;
401
+ onChange?: (value: string[]) => void;
402
+ };
403
+
404
+ interface CheckboxGroupProps {
405
+ children: ReactNode;
406
+ className?: string;
407
+ disabled?: boolean;
408
+ errorMessage?: string;
409
+ helperText?: string;
410
+ label?: string;
411
+ name: string;
412
+ }
413
+ declare const CheckboxGroup: (props: CheckboxGroupProviderProps & CheckboxGroupProps) => JSX.Element;
414
+
384
415
  interface RadioProps extends React__default.InputHTMLAttributes<HTMLInputElement> {
385
416
  label: string;
386
417
  indent?: boolean;
@@ -420,4 +451,4 @@ interface FormHelperTextProps extends React__default.HtmlHTMLAttributes<HTMLDivE
420
451
  declare const FormHelperText: ({ children, className, ...props }: FormHelperTextProps) => JSX.Element;
421
452
  //# sourceMappingURL=FormHelperText.d.ts.map
422
453
 
423
- export { ActionList, Avatar, Body, BrandLogo, Button, Code, Display, FormErrorMessage, FormHelperText, HeaderButton, HeaderNav, SearchField as HeaderSearchField, SearchInput as HeaderSearchInput, SearchMenu as HeaderSearchMenu, Heading, Icon, IconButton, Interactions, Label, Link, Menu, MenuButton, MenuList, OverlayAriaRole, OverlayTrigger, Placement, ProgressBar, Radio, RadioGroup, SideNavWrapper as SideNav, Tab, TabList, TabPanel, TabPanels, Tabs, Toggle, Tooltip, TooltipTrigger, useHover, useOverlayTrigger, useWindowSize };
454
+ export { ActionList, Avatar, Body, BrandLogo, Button, Checkbox, CheckboxGroup, Code, Display, FormErrorMessage, FormHelperText, HeaderButton, HeaderNav, SearchField as HeaderSearchField, SearchInput as HeaderSearchInput, SearchMenu as HeaderSearchMenu, Heading, Icon, IconButton, Interactions, Label, Link, Menu, MenuButton, MenuList, OverlayAriaRole, OverlayTrigger, Placement, ProgressBar, Radio, RadioGroup, SideNavWrapper as SideNav, Tab, TabList, TabPanel, TabPanels, Tabs, Toggle, Tooltip, TooltipTrigger, useHover, useOverlayTrigger, useWindowSize };