@maxio-com/react-ui-components 2.0.1 → 2.1.0
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 +1 -1
- package/dist/index.js +1 -1
- package/package.json +2 -2
- package/typings/index.d.ts +4 -2
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 l,useId as r,useCallback as o,useMemo as s,Children as c,isValidElement as m,cloneElement as d}from"react";import u from"classnames";import{AnimatePresence as p,motion as v}from"framer-motion";import{useClick as h,useHover as x,useFocus as b,useDismiss as g,useFloating as E,offset as _,useInteractions as f,useRole as N,FloatingPortal as w}from"@floating-ui/react-dom-interactions";import{useButton as y,useLink as k,useSearchField as C,useId as I,useProgressBar as O,useCheckboxGroupItem as P,useCheckboxGroup as S,useRadio as V,useRadioGroup as $}from"react-aria";const T=({variant:a,white:t,className:n})=>e.createElement("i",{className:u("maxio-icon",`maxio-icon-${a}`,t&&"maxio-icon--white",n)}),D=({items:a,isShadowed:t=!0})=>{const n=u("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(T,{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(T,{variant:i,className:"maxio-action-list__trailing-icon"})))})))},F=({className:a,src:t,alt:n="avatar"})=>e.createElement("img",{className:u("maxio-avatar",a),alt:n,src:t}),R=a({}),W=({children:a})=>{const[n,i]=t(!1);return e.createElement(R.Provider,{value:{isOpen:n,onClose:()=>i(!1),onOpen:()=>i(!0),onToggle:()=>i((e=>!e))}},a)};const M=({children:a})=>{const{isOpen:t,onToggle:i,onClose:l}=function(){const e=n(R);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)},z=({children:a})=>e.createElement(W,null,e.createElement(M,null,a)),H=({items:a,alignItemsEnd:t=!1})=>{const n=u("maxio-action-menu__content",{"maxio-action-menu__content--align-end":t});return e.createElement("div",{className:n},e.createElement(D,{items:a}))},L=({children:a,iconName:t="chevron-down"})=>{const n=u({"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(T,{variant:t,className:n})))},A=({icon:a,variant:t="default"})=>e.createElement("i",{className:u("maxio-brand-logo",`maxio-brand-logo-${a}`,{[`maxio-brand-logo--${t}`]:"default"!==t})}),U={click:h,hover:x,focus:b,dismiss:g},B=(e,a)=>a.map((a=>U[a](e))),G=({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}=E({placement:e,open:a,onOpenChange:e=>r(e),middleware:[_(n)]}),{getReferenceProps:h,getFloatingProps:x}=f([...B(u,t),N(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 Y(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 j(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 q=({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:h})=>{const{getReferenceProps:x,getFloatingProps:b,refs:{floating:g,reference:E},floatingElementCSSPosition:_}=G({role:r,isActive:n,onOverlayUpdate:d,autoHideMs:m,floatingElementOffset:s,interactions:l,placement:i}),f=e.createElement(p,null,n&&e.createElement(v.div,{ref:g,style:_,...c,...b()},o()));return e.createElement(e.Fragment,null,e.createElement("div",{ref:E,className:u("maxio-inline-flex",h),...x(),"data-testid":"overlay-trigger"},a),t?e.createElement(w,{id:"maxio-ui-portal"},f):f)},K=({children:a,loading:t=!1,fullWidth:n=!1,className:l,variant:r="primary",size:o="lg",disabled:s,icon:c,...m})=>{const d=i(),{buttonProps:p}=y({...m,isDisabled:s},d),v=u("maxio-button",l,{[`maxio-button--${o}`]:o,[`maxio-button--${r}`]:r,"maxio-button--loading":t,"maxio-button--full-width":n}),h=u("maxio-button__loader",{"maxio-button__loader--white":["primary","secondary","danger"].includes(r)});return e.createElement("button",{...p,className:v},a,!t&&c,t&&e.createElement("div",{className:h}))},X=({icon:a,...t})=>e.createElement(K,{icon:a,className:"maxio-button--icon",...t},null),J=({defaultChecked:a,checked:t,onChange:n,disabled:i,valueDescription:l,valueDescriptionPosition:s,className:c,name:m,id:d})=>{const p=r(),v="boolean"==typeof a,h=d||p,x="left"===s?"row":"row-reverse",b=l&&s,g=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:u("maxio-toggle",c,{"maxio-toggle--disabled":i}),style:{display:"inline-flex",flexDirection:x},"data-testid":"toggle-container"},b?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:g,disabled:i,"aria-label":b?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"})))))},Q=({children:a,arrowPosition:t,size:n="regular",maxWidth:i=160})=>e.createElement("div",{"data-testid":"tooltip",className:u("maxio-tooltip",`maxio-tooltip--${n}`,{[`maxio-tooltip--arrow-${t}`]:t})},e.createElement("div",{className:"maxio-tooltip__content",style:{maxWidth:i}},a)),Z={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"},ee=({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,b]=t(!1),g=void 0!==d,E=o((e=>{g||b(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(q,{role:"tooltip",className:p,floatingElementOffset:h,motionSettings:_,isActive:g?d:x,onOverlayUpdate:E,autoHideMs:m,usePortal:u,placement:i,interactions:n,renderOverlay:()=>e.createElement(Q,{size:r,arrowPosition:Z[i],maxWidth:l},c())},a)},ae=({children:a,as:t,iconName:n,noPadding:i,className:l,...r})=>{const o=e.useRef(null);let{buttonProps:s}=y(r,o),{linkProps:c}=k(r,o);const m="a"===t?c:s,d=t||"button";return e.createElement(d,{className:u("maxio-header-button",l,{"maxio-header-button--no-padding":i}),ref:o,...m},e.createElement("div",{className:"maxio-header-button__content"},a||null,n&&e.createElement(T,{variant:n})))},te=({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:u("maxio-header-nav__link",{"maxio-header-nav__link--active":n}),...i},a))))),ne=({className:a,innerRef:t,...n})=>{const[i,l]=e.useState(n.value||""),{inputProps:r}=C({value:n.value,"aria-label":"Search",placeholder:"Search",name:"search"},{value:i,setValue:l},t);return e.createElement("div",{className:u("maxio-header-search-field",a)},e.createElement("div",{className:"maxio-header-search-field__button"},e.createElement(T,{variant:"search"})),e.createElement("input",{ref:t,className:"maxio-header-search-field__input",type:"search",...r}))};ne.displayName="SearchField";const ie=({options:a,innerRef: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":"Menu",ref:t,...n},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(T,{variant:"chevron-down"})));ie.displayName="SearchMenu";const le=({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(ie,{innerRef:l,options:a}),e.createElement(ne,{innerRef:n}),e.createElement(ae,{type:"submit","aria-label":"Submit search",iconName:"arrow-right"}))},re=({leadingIcon:a,trailingIcon:t,type:n="menu",children:i,leadingIconClassName:l,isTooltipVisible:r=!1})=>e.createElement(e.Fragment,null,e.createElement(ee,{usePortal:!1,isVisible:r,renderContent:()=>i,floatingElementOffset:12},a&&e.createElement("span",{className:"maxio-side-nav__icon"},e.createElement(T,{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(T,{variant:t}))),oe=a({}),se=()=>n(oe),ce=({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}=j();l((()=>{!function(e){if(!r)return;e<s&&c&&x();e>s&&!c&&b()}(h)}),[h]),l((()=>{c?b():x()}),[]);return e.createElement(oe.Provider,{value:{sections:d,topDropdownItems:o,onSectionOpen:e=>{const a=g();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=g();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 b(){const e=g();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 g(){return d.map((e=>e.items)).flat().filter((e=>null!=e)).find((e=>e.isCurrent))}},me=()=>{const{onOpen:a,topDropdownItems:t,isOpen:n}=se(),{mainItem:l,otherItems:r,actions:o}=t,c=i(null),m=Y(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(re,{type:"menu",isTooltipVisible:!n&&m,leadingIcon:l.icon,trailingIcon:"chevron-down",leadingIconClassName:"maxio-icon-circle-small-fill maxio-icon--success"},l.title)):e.createElement(re,{type:"menu",trailingIcon:"chevron-down"},l.title)),e.createElement(D,{items:u})))},de=({section:a})=>{const{isOpen:t}=se(),n=i(null),l=Y(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(re,{isTooltipVisible:l&&!t,type:"menu",leadingIcon:a.icon},a.name)))},ue=({section:a})=>{var t;const{onOpen:n,onSectionOpen:l,isOpen:r,withIcons:o}=se();const s=i(null),c=Y(s);return a.Component?e.createElement(a.Component,{section:a}):a.href?e.createElement(de,{section:a}):e.createElement("li",{className:u("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(re,{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)))))))},pe=()=>{const{sections:a}=se();return e.createElement("ul",{className:"maxio-side-nav__items"},a.map((a=>e.createElement(ue,{key:`section-${a.name}`,section:a}))))},ve=()=>{const{isOpen:a}=se();return e.createElement("nav",{className:u("maxio-side-nav",{"maxio-side-nav--collapsed":!a})},e.createElement(me,null),e.createElement("hr",{className:"maxio-side-nav__divider"}),e.createElement(pe,null))},he=({withIcons:a,shouldToggleSidebar:t,topDropdownItems:n,sections:i,collapseBreakpoint:l=800})=>e.createElement(ce,{collapseBreakpoint:l,withIcons:a,shouldToggleSidebar:t,topDropdownItems:n,sections:i},e.createElement(ve,null)),xe=({label:a,helperText:t,size:n="md",variant:i="default",status:l,value:r,maxValue:o=100})=>{const s=I(),c=I(),m=l&&!!a&&!!r&&!("inline"===i),d=t&&!("inline"===i),p=t&&"inline"===i,{progressBarProps:v,labelProps:h}=O({maxValue:o,value:r,label:a}),x=u("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:x,...v},e.createElement("div",{id:s,className:"maxio-progress-bar__label",...h},a),p&&e.createElement("div",{id:c,className:"maxio-progress-bar__helper-text"},t),e.createElement("div",{className:"maxio-progress-bar__track"},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))},be=({as:a="div",children:t,compact:n=!1,size:i="md",className:l,...r})=>{const o=a,s=u({[`maxio-body-${i}`]:!n,[`maxio-body-${i}-compact`]:n},l);return e.createElement(o,{className:s,...r},t)},ge={sm:"h3",md:"h2",lg:"h1"},Ee=({children:a,size:t="sm",className:n,...i})=>{const l=ge[t],r=u(`maxio-heading-${t}`,n);return e.createElement(l,{className:r,...i},a)},_e=({as:a="div",children:t,size:n="md",className:i,...l})=>{const r=a,o=u(`maxio-display-${n}`,i);return e.createElement(r,{className:o,...l},t)},fe=({as:a="div",children:t,className:n,...i})=>{const l=a,r=u("maxio-code",n);return e.createElement(l,{className:r,...i},t)},Ne=({as:a="div",children:t,size:n="sm",className:i,...l})=>{const r=a,o=u(`maxio-label-${n}`,i);return e.createElement(r,{className:o,...l},t)},we=a({}),ye=()=>n(we),ke=({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(we.Provider,{value:{currentIndex:c,variant:n,withDivider:i,onChange:e=>{let a;a="function"==typeof e?e(c):e,void 0===s&&m(a),"function"==typeof o&&o(a)}}},a)},Ce=({disabled:a=!1,value:t=0,isCurrent:n,...r})=>{const{onChange:o,currentIndex:s}=ye(),c=u("maxio-tabs__tab",{"maxio-tabs__tab--active":s===t,"maxio-tabs__tab--disabled":a,"maxio-tabs__tab--icon":"icon"===r.type}),m=()=>{o(t)},d={"aria-selected":n,id:`tab-${t}`,"aria-controls":`panel-${t}`,role:"tab",tabIndex:n?0:-1},p=i(null),v=i(!1);if(l((()=>{n&&v.current&&p.current.focus()}),[n]),l((()=>{v.current=!0}),[]),"icon"===r.type){const{icon:a,...t}=r;return e.createElement("div",{className:c,ref:p,onClick:m,...d,...t},e.createElement("div",{className:"maxio-tabs__tab__content"},a))}const{children:h,rightIcon:x,...b}=r;return e.createElement("div",{role:"tab",ref:p,className:c,onClick:m,...d,...b},e.createElement("div",{className:"maxio-tabs__tab__content"},h,x||null))},Ie=({children:a,variant:t="line",withDivider:n=!1,defaultIndex:i=0,index:l,onChange:r})=>e.createElement(ke,{defaultIndex:i,variant:t,withDivider:n,index:l,onChange:r},a),Oe=({children:a,value:t,...n})=>{const{currentIndex:i}=ye();return e.createElement("div",{...n,...t?{id:`panel-${t}`}:{},role:"tabpanel","aria-labelledby":`tab-${t}`,hidden:i!==t},a)},Pe=({children:a})=>{const{currentIndex:t}=ye();return e.createElement(e.Fragment,null,c.map(a,((e,a)=>{if(m(e)&&e.type===Oe)return a===t?d(e,{value:a}):null;throw new Error("You can only pass <TabPanel /> component as children")})))},Se=(e,a,t)=>0===e?e:1===e&&a[e-1].disabled?t||e:a[e-1].disabled?Se(e-1,a,t||e):e-1,Ve=({children:a,className:t,ariaLabel:n,...l})=>{const{variant:r,withDivider:o,currentIndex:s,onChange:p}=ye(),v=u("maxio-tabs",t,{"maxio-tabs--contained":"contained"===r,"maxio-tabs--divider":o}),h=i(),x=()=>c.map(a,(e=>e.props));return e.createElement("div",{className:v,role:"tablist","aria-label":n,"aria-orientation":"horizontal",ref:h,onKeyDown:e=>{"ArrowRight"===e.key&&p((e=>((e,a)=>{const t=a.findIndex(((a,t)=>!a.disabled&&t>e));return-1===t?e:t})(e,x()))),"ArrowLeft"===e.key&&p((e=>Se(e,x()))),h.current.focus()},...l},c.map(a,((e,a)=>{if(m(e)&&e.type===Ce)return d(e,{value:a,isCurrent:s===a});throw new Error("You can only pass <Tab /> component as children")})))},$e=({className:a,children:t,disabled:n=!1,external:i=!1,icon:l="arrow-right",noArrow:r=!1,size:o="md",...s})=>{const c=u("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(T,{variant:l}))},Te=a({}),De=()=>n(Te),Fe=({name:a,values:n,onChange:i,disabled:l=!1,invalid:r=!1,children:o})=>{const[s,c]=t(n||[]);return e.createElement(Te.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)},Re=({label:a,error:t=!1,className:n,indeterminate:l,...r})=>{const o=i(null),{name:s,disabled:c,invalid:m,onChange:d,values:p=[]}=De(),v=!!s,h=c||r.disabled,x=m||t,b=v?p.includes(r.value):r.checked,g=u("maxio-checkbox",{"maxio-checkbox--checked":b,"maxio-checkbox--disabled":h,"maxio-checkbox--error":x,"maxio-checkbox--indeterminate":l},n),{inputProps:E}=P({value:r.value,"aria-label":a},{isDisabled:h,isReadOnly:h,setValue:d,addValue:d,toggleValue:d,removeValue:d,value:p,isSelected:e=>p.includes(e),validationState:t?"invalid":"valid",isInvalid:!!t},o);return e.createElement("label",{className:g},e.createElement("input",{type:"checkbox",role:"checkbox",className:"maxio-checkbox__input",ref:o,...v?E:r}),e.createElement("span",{className:"maxio-checkbox__control"},t&&e.createElement("span",{className:"maxio-checkbox__control-error"})),e.createElement("span",{className:"maxio-checkbox__label"},a))},We=({children:a,className:t,...n})=>e.createElement("div",{className:u("maxio-form-helper-text",t),...n},a),Me=({children:a,className:t,...n})=>e.createElement("div",{className:u("maxio-form-error",t),...n},e.createElement("i",{className:"maxio-form-error__icon"}),e.createElement("div",{className:"maxio-form-error__text"},a)),ze=({className:a,children:t,label:n,errorMessage:i,helperText:l,disabled:r})=>{const{values:o,onChange:s,name:c}=De(),{descriptionProps:m,errorMessageProps:d,groupProps:p,labelProps:v}=S({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=u("maxio-checkbox-group",{"maxio-checkbox-group--disabled":r},a),x=l&&!i;return e.createElement("div",{className:h,...p},n&&e.createElement("label",{className:"maxio-checkbox-group__label",...v},n),t,x&&e.createElement(We,{...m},l),i&&e.createElement(Me,{...d},i))},He=a=>e.createElement(Fe,{...a},e.createElement(ze,{...a},a.children)),Le=a({}),Ae=()=>n(Le),Ue=({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(Le.Provider,{value:{onChange:e=>{d(e),n&&n(e)},name:o,value:m,indent:s,disabled:c,lastFocusedValue:u,setLastFocusedValue:p}},a)},Be=({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:p,value:v,setLastFocusedValue:h=(()=>{}),lastFocusedValue:x=null}=Ae(),b=!!d,g=m||n,E=s||t,_=u("maxio-radio",{"maxio-radio--indent":c||a,"maxio-radio--disabled":E,"maxio-radio--error":g}),{inputProps:f}=V({...r,children:l,value:(r.value||"").toString()},{isDisabled:E,isReadOnly:E,isRequired:!1,name:d,validationState:g?"invalid":"valid",isInvalid:g,selectedValue:v,setSelectedValue:p,setLastFocusedValue:h,lastFocusedValue:x},o);return e.createElement("label",{className:_},e.createElement("input",{ref:o,type:"radio",className:"maxio-radio__input",...b?f:r}),e.createElement("span",{className:"maxio-radio__control",tabIndex:0}),e.createElement("span",{className:"maxio-radio__label"},l))},Ge=({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}=Ae(),{radioGroupProps:u,labelProps:p,descriptionProps:v,errorMessageProps:h}=$({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(Me,{...h},n),i&&!n&&e.createElement(We,{...v},i)))},Ye=a=>e.createElement(Ue,{...a},e.createElement(Ge,{...a},a.children));export{D as ActionList,F as Avatar,be as Body,A as BrandLogo,K as Button,Re as Checkbox,He as CheckboxGroup,fe as Code,_e as Display,Me as FormErrorMessage,We as FormHelperText,ae as HeaderButton,te as HeaderNav,ne as HeaderSearchField,le as HeaderSearchInput,ie as HeaderSearchMenu,Ee as Heading,T as Icon,X as IconButton,Ne as Label,$e as Link,z as Menu,L as MenuButton,H as MenuList,q as OverlayTrigger,xe as ProgressBar,Be as Radio,Ye as RadioGroup,he as SideNav,Ce as Tab,Ve as TabList,Oe as TabPanel,Pe as TabPanels,Ie as Tabs,J as Toggle,Q as Tooltip,ee as TooltipTrigger,Y as useHover,G as useOverlayTrigger,j as useWindowSize};
|
|
1
|
+
import e,{useRef as a,useEffect as t,useState as n,createContext as i,useContext as r,useId as l,useCallback as o,useMemo as s,Children as c,isValidElement as m,cloneElement as d}from"react";import u from"classnames";import{AnimatePresence as p,motion as v}from"framer-motion";import{useClick as h,useHover as x,useFocus as b,useDismiss as g,useFloating as E,offset as _,useInteractions as f,useRole as N,FloatingPortal as w}from"@floating-ui/react-dom-interactions";import{useButton as y,useLink as k,useSearchField as C,useId as I,useProgressBar as O,useCheckboxGroupItem as P,useCheckboxGroup as S,useRadio as V,useRadioGroup as D}from"react-aria";const $=({variant:a,white:t,className:n})=>e.createElement("i",{className:u("maxio-icon",`maxio-icon-${a}`,t&&"maxio-icon--white",n)}),T=({item:n,isSelected:i})=>{const r=a(),l=a(!1);if(t((()=>{var e;i&&l.current&&(null===(e=r.current)||void 0===e||e.focus())}),[i]),t((()=>{l.current=!0}),[]),"divider"===n.type)return e.createElement("div",{className:"maxio-action-list__divider",role:"separator","aria-hidden":"true"});const{leadingIconName:o,trailingIconName:s,label:c,description:m,link:d}=n;return e.createElement("a",{role:"option","aria-selected":i,...d,className:"maxio-action-list__content",tabIndex:i?0:-1,ref:r},o&&e.createElement($,{variant:o,className:"maxio-action-list__leading-icon"}),e.createElement("span",{className:"maxio-action-list__label"},c),m&&e.createElement("span",{className:"maxio-action-list__description"},m),s&&e.createElement($,{variant:s,className:"maxio-action-list__trailing-icon"}))},F=(e,a,t)=>0===e?e:1===e&&"divider"===a[e-1].type?t||e:"divider"===a[e-1].type?F(e-1,a,t||e):e-1,R=({items:a,isShadowed:t=!0,...i})=>{const r=u("maxio-action-list",{"maxio-action-list--shadow":t}),[l,o]=n((()=>a.findIndex((e=>"divider"!==e.type))));return 0===a.length?null:e.createElement("div",{className:r,onKeyDown:e=>{if("Space"===e.code||"Enter"===e.code){const e=a[l];e&&"divider"!==e.type&&window.open(e.link.href,e.link.target||"_self")}"ArrowUp"===e.code&&(e.preventDefault(),o((e=>F(e,a)))),"ArrowDown"===e.code&&(e.preventDefault(),o((e=>((e,a)=>{const t=a.findIndex(((a,t)=>"divider"!==a.type&&t>e));return-1===t?e:t})(e,a))))},"aria-label":i["aria-label"],role:"listbox"},a.map(((a,t)=>e.createElement(T,{item:a,key:`listbox-${a.id}`,isSelected:t===l}))))},M=({className:a,src:t,alt:n="avatar"})=>e.createElement("img",{className:u("maxio-avatar",a),alt:n,src:t}),W=i({}),z=({children:a})=>{const[t,i]=n(!1);return e.createElement(W.Provider,{value:{isOpen:t,onClose:()=>i(!1),onOpen:()=>i(!0),onToggle:()=>i((e=>!e))}},a)};const H=({children:a})=>{const{isOpen:t,onToggle:n,onClose:i}=function(){const e=r(W);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:n,className:"maxio-action-menu"},"function"==typeof a?a({isOpen:t,onClose:i}):a)},L=({children:a})=>e.createElement(z,null,e.createElement(H,null,a)),A=({items:a,alignItemsEnd:t=!1})=>{const n=u("maxio-action-menu__content",{"maxio-action-menu__content--align-end":t});return e.createElement("div",{className:n},e.createElement(R,{"aria-label":"Menu list items",items:a}))},U=({children:a,iconName:t="chevron-down"})=>{const n=u({"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($,{variant:t,className:n})))},B=({icon:a,variant:t="default"})=>e.createElement("i",{className:u("maxio-brand-logo",`maxio-brand-logo-${a}`,{[`maxio-brand-logo--${t}`]:"default"!==t})}),G={click:h,hover:x,focus:b,dismiss:g},K=(e,a)=>a.map((a=>G[a](e))),Y=({placement:e="top",isActive:n=!1,interactions:i=["hover"],floatingElementOffset:r=0,onOverlayUpdate:l,autoHideMs:o})=>{const s=a(null),{strategy:c,x:m,y:d,context:u,floating:p,reference:v}=E({placement:e,open:n,onOpenChange:e=>l(e),middleware:[_(r)]}),{getReferenceProps:h,getFloatingProps:x}=f([...K(u,i),N(u,{role:"tooltip"})]);t((()=>{s.current&&clearTimeout(s.current),n&&o&&(s.current=setTimeout((()=>l(!1)),o))}),[n,o]);return{isActive:n,refs:{floating:p,reference:v},floatingElementCSSPosition:{position:c,top:null!=d?d:0,left:null!=m?m:0},getReferenceProps:h,getFloatingProps:x}};function j(e,i=0){const r=a((new Date).getTime()),l=a((new Date).getTime()),[o,s]=n(!1);return t((()=>{const a=()=>{r.current=(new Date).getTime(),s(!0)},t=()=>{l.current=(new Date).getTime(),setTimeout((()=>{r.current-l.current<=0&&s(!1)}),i)},n=e&&e.current;return n&&(n.addEventListener("mouseenter",a),n.addEventListener("mouseleave",t)),()=>{n&&(n.removeEventListener("mouseenter",a),n.removeEventListener("mouseleave",t))}}),[e]),o}function q(e=500){const[i,r]=n((()=>{const{innerWidth:e,innerHeight:a}=window;return{windowWitdh:e,windowHeight:a}})),l=a(null);return t((()=>{const a=()=>{const{innerWidth:a,innerHeight:t}=window;clearTimeout(l.current),l.current=setTimeout((()=>{r({windowWitdh:a,windowHeight:t})}),e)};return window.addEventListener("resize",a),()=>{window.removeEventListener("resize",a)}}),[e]),i}const X=({children:a,usePortal:t=!1,isActive:n=!1,placement:i="top",interactions:r=["hover"],role:l="tooltip",renderOverlay:o,floatingElementOffset:s,motionSettings:c={},autoHideMs:m,onOverlayUpdate:d,className:h})=>{const{getReferenceProps:x,getFloatingProps:b,refs:{floating:g,reference:E},floatingElementCSSPosition:_}=Y({role:l,isActive:n,onOverlayUpdate:d,autoHideMs:m,floatingElementOffset:s,interactions:r,placement:i}),f=e.createElement(p,null,n&&e.createElement(v.div,{ref:g,style:_,...c,...b()},o()));return e.createElement(e.Fragment,null,e.createElement("div",{ref:E,className:u("maxio-inline-flex",h),...x(),"data-testid":"overlay-trigger"},a),t?e.createElement(w,{id:"maxio-ui-portal"},f):f)},J=({children:t,loading:n=!1,fullWidth:i=!1,className:r,variant:l="primary",size:o="lg",disabled:s,icon:c,...m})=>{const d=a(),{buttonProps:p}=y({...m,isDisabled:s},d),v=u("maxio-button",r,{[`maxio-button--${o}`]:o,[`maxio-button--${l}`]:l,"maxio-button--loading":n,"maxio-button--full-width":i}),h=u("maxio-button__loader",{"maxio-button__loader--white":["primary","secondary","danger"].includes(l)});return e.createElement("button",{...p,className:v},t,!n&&c,n&&e.createElement("div",{className:h}))},Q=({icon:a,...t})=>e.createElement(J,{icon:a,className:"maxio-button--icon",...t},null),Z=({defaultChecked:a,checked:t,onChange:n,disabled:i,valueDescription:r,valueDescriptionPosition:s,className:c,name:m,id:d})=>{const p=l(),v="boolean"==typeof a,h=d||p,x="left"===s?"row":"row-reverse",b=r&&s,g=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:u("maxio-toggle",c,{"maxio-toggle--disabled":i}),style:{display:"inline-flex",flexDirection:x},"data-testid":"toggle-container"},b?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:g,disabled:i,"aria-label":b?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"})))))},ee=({children:a,arrowPosition:t,size:n="regular",maxWidth:i=160})=>e.createElement("div",{"data-testid":"tooltip",className:u("maxio-tooltip",`maxio-tooltip--${n}`,{[`maxio-tooltip--arrow-${t}`]:t})},e.createElement("div",{className:"maxio-tooltip__content",style:{maxWidth:i}},a)),ae={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"},te=({children:a,interactions:t=["hover"],placement:i="right",maxWidth:r=160,size:l="regular",renderContent:c,autoHideMs:m,isVisible:d,usePortal:u,className:p,onVisibilityUpdate:v,floatingElementOffset:h=5})=>{const[x,b]=n(!1),g=void 0!==d,E=o((e=>{g||b(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(X,{role:"tooltip",className:p,floatingElementOffset:h,motionSettings:_,isActive:g?d:x,onOverlayUpdate:E,autoHideMs:m,usePortal:u,placement:i,interactions:t,renderOverlay:()=>e.createElement(ee,{size:l,arrowPosition:ae[i],maxWidth:r},c())},a)},ne=({children:a,as:t,iconName:n,noPadding:i,className:r,...l})=>{const o=e.useRef(null);let{buttonProps:s}=y(l,o),{linkProps:c}=k(l,o);const m="a"===t?c:s,d=t||"button";return e.createElement(d,{className:u("maxio-header-button",r,{"maxio-header-button--no-padding":i}),ref:o,...m},e.createElement("div",{className:"maxio-header-button__content"},a||null,n&&e.createElement($,{variant:n})))},ie=({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:u("maxio-header-nav__link",{"maxio-header-nav__link--active":n}),...i},a))))),re=({className:a,innerRef:t,...n})=>{const[i,r]=e.useState(n.value||""),{inputProps:l}=C({value:n.value,"aria-label":"Search",placeholder:"Search",name:"search"},{value:i,setValue:r},t);return e.createElement("div",{className:u("maxio-header-search-field",a)},e.createElement("div",{className:"maxio-header-search-field__button"},e.createElement($,{variant:"search"})),e.createElement("input",{ref:t,className:"maxio-header-search-field__input",type:"search",...l}))};re.displayName="SearchField";const le=({options:a,innerRef: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":"Menu",ref:t,...n},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($,{variant:"chevron-down"})));le.displayName="SearchMenu";const oe=({options:t,onSubmit:n})=>{const i=a(null),r=a(null);return e.createElement("form",{className:"maxio-header-search-input",onSubmit:function(e){var a,t;e.preventDefault(),n({searchField:(null===(a=i.current)||void 0===a?void 0:a.value)||"",selectField:(null===(t=r.current)||void 0===t?void 0:t.value)||""})}},e.createElement(le,{innerRef:r,options:t}),e.createElement(re,{innerRef:i}),e.createElement(ne,{type:"submit","aria-label":"Submit search",iconName:"arrow-right"}))},se=({leadingIcon:a,trailingIcon:t,type:n="menu",children:i,leadingIconClassName:r,isTooltipVisible:l=!1})=>e.createElement(e.Fragment,null,e.createElement(te,{usePortal:!1,isVisible:l,renderContent:()=>i,floatingElementOffset:12},a&&e.createElement("span",{className:"maxio-side-nav__icon"},e.createElement($,{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($,{variant:t}))),ce=i({}),me=()=>r(ce),de=({children:a,withIcons:i=!0,sections:r,shouldToggleSidebar:l=!0,topDropdownItems:o,collapseBreakpoint:s=800})=>{const[c,m]=n((()=>!l||("undefined"==typeof window||window.innerWidth>s))),[d,u]=n(r),p=()=>m(!0),v=()=>m(!1),{windowWitdh:h}=q();t((()=>{!function(e){if(!l)return;e<s&&c&&x();e>s&&!c&&b()}(h)}),[h]),t((()=>{c?b():x()}),[]);return e.createElement(ce.Provider,{value:{sections:d,topDropdownItems:o,onSectionOpen:e=>{const a=g();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:i}},a);function x(){const e=g();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 b(){const e=g();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 g(){return d.map((e=>e.items)).flat().filter((e=>null!=e)).find((e=>e.isCurrent))}},ue=()=>{const{onOpen:t,topDropdownItems:n,isOpen:i}=me(),{mainItem:r,otherItems:l,actions:o}=n,c=a(null),m=j(c),d=e=>({id:e.id,label:e.title,leadingIconName:e.icon,link:{href:e.url}}),u=s((()=>[...l.map(d),l.length>0&&{type:"divider",id:"item-divider"},...o.map(d)].filter((e=>null!=e))),[o,l]),p=l.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:r.url,onClick:t},e.createElement("span",{className:"maxio-side-nav__menu-title"},r.title)):e.createElement("details",{className:"maxio-action-menu maxio-side-nav--action-menu"},e.createElement("summary",{onClick:t,className:"maxio-side-nav__menu-button maxio-side-nav__menu-button--large","aria-haspopup":"true",ref:c},r.url?e.createElement(e.Fragment,null,e.createElement(se,{type:"menu",isTooltipVisible:!i&&m,leadingIcon:r.icon,trailingIcon:"chevron-down",leadingIconClassName:"maxio-icon-circle-small-fill maxio-icon--success"},r.title)):e.createElement(se,{type:"menu",trailingIcon:"chevron-down"},r.title)),e.createElement(R,{"aria-label":"Action list",items:u})))},pe=({section:t})=>{const{isOpen:n}=me(),i=a(null),r=j(i);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:i},e.createElement(se,{isTooltipVisible:r&&!n,type:"menu",leadingIcon:t.icon},t.name)))},ve=({section:t})=>{var n;const{onOpen:i,onSectionOpen:r,isOpen:l,withIcons:o}=me();const s=a(null),c=j(s);return t.Component?e.createElement(t.Component,{section:t}):t.href?e.createElement(pe,{section:t}):e.createElement("li",{className:u("maxio-side-nav__item",{"maxio-side-nav__item--active":t.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":t.isOpen,"aria-current":t.isCurrent?"page":void 0,type:"button",onClick:function(){r(t.name),i()}},e.createElement(se,{type:"menu",isTooltipVisible:!l&&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)))))))},he=()=>{const{sections:a}=me();return e.createElement("ul",{className:"maxio-side-nav__items"},a.map((a=>e.createElement(ve,{key:`section-${a.name}`,section:a}))))},xe=()=>{const{isOpen:a}=me();return e.createElement("nav",{className:u("maxio-side-nav",{"maxio-side-nav--collapsed":!a})},e.createElement(ue,null),e.createElement("hr",{className:"maxio-side-nav__divider"}),e.createElement(he,null))},be=({withIcons:a,shouldToggleSidebar:t,topDropdownItems:n,sections:i,collapseBreakpoint:r=800})=>e.createElement(de,{collapseBreakpoint:r,withIcons:a,shouldToggleSidebar:t,topDropdownItems:n,sections:i},e.createElement(xe,null)),ge=({label:a,helperText:t,size:n="md",variant:i="default",status:r,value:l,maxValue:o=100})=>{const s=I(),c=I(),m=r&&!!a&&!!l&&!("inline"===i),d=t&&!("inline"===i),p=t&&"inline"===i,{progressBarProps:v,labelProps:h}=O({maxValue:o,value:l,label:a}),x=u("maxio-progress-bar",{"maxio-progress-bar--lg":"lg"===n,"maxio-progress-bar--success":l&&!("inline"===i)&&"success"===r,"maxio-progress-bar--error":l&&!("inline"===i)&&"error"===r,"maxio-progress-bar--indent":"indent"===i,"maxio-progress-bar--inline":"inline"===i,"maxio-progress-bar--indeterminate":void 0===l});return e.createElement("div",{className:x,...v},e.createElement("div",{id:s,className:"maxio-progress-bar__label",...h},a),p&&e.createElement("div",{id:c,className:"maxio-progress-bar__helper-text"},t),e.createElement("div",{className:"maxio-progress-bar__track"},e.createElement("div",{className:"maxio-progress-bar__progress",style:{"--tw-scale-x":`${l}%`}})),m&&e.createElement("div",{className:`maxio-progress-bar__${r}-icon`}),d&&e.createElement("div",{id:c,className:"maxio-progress-bar__helper-text"},t))},Ee=({as:a="div",children:t,compact:n=!1,size:i="md",className:r,...l})=>{const o=a,s=u({[`maxio-body-${i}`]:!n,[`maxio-body-${i}-compact`]:n},r);return e.createElement(o,{className:s,...l},t)},_e={sm:"h3",md:"h2",lg:"h1"},fe=({children:a,size:t="sm",className:n,...i})=>{const r=_e[t],l=u(`maxio-heading-${t}`,n);return e.createElement(r,{className:l,...i},a)},Ne=({as:a="div",children:t,size:n="md",className:i,...r})=>{const l=a,o=u(`maxio-display-${n}`,i);return e.createElement(l,{className:o,...r},t)},we=({as:a="div",children:t,className:n,...i})=>{const r=a,l=u("maxio-code",n);return e.createElement(r,{className:l,...i},t)},ye=({as:a="div",children:t,size:n="sm",className:i,...r})=>{const l=a,o=u(`maxio-label-${n}`,i);return e.createElement(l,{className:o,...r},t)},ke=i({}),Ce=()=>r(ke),Ie=({children:a,variant:i,withDivider:r,defaultIndex:l=0,onChange:o,index:s})=>{const[c,m]=n((()=>void 0!==s?s:l));t((()=>{void 0===s&&m(l),"number"==typeof s&&m(s)}),[l,s]);return e.createElement(ke.Provider,{value:{currentIndex:c,variant:i,withDivider:r,onChange:e=>{let a;a="function"==typeof e?e(c):e,void 0===s&&m(a),"function"==typeof o&&o(a)}}},a)},Oe=({disabled:n=!1,value:i=0,isCurrent:r,...l})=>{const{onChange:o,currentIndex:s}=Ce(),c=u("maxio-tabs__tab",{"maxio-tabs__tab--active":s===i,"maxio-tabs__tab--disabled":n,"maxio-tabs__tab--icon":"icon"===l.type}),m=()=>{o(i)},d={"aria-selected":r,id:`tab-${i}`,"aria-controls":`panel-${i}`,role:"tab",tabIndex:r?0:-1},p=a(null),v=a(!1);if(t((()=>{r&&v.current&&p.current.focus()}),[r]),t((()=>{v.current=!0}),[]),"icon"===l.type){const{icon:a,...t}=l;return e.createElement("div",{className:c,ref:p,onClick:m,...d,...t},e.createElement("div",{className:"maxio-tabs__tab__content"},a))}const{children:h,rightIcon:x,...b}=l;return e.createElement("div",{role:"tab",ref:p,className:c,onClick:m,...d,...b},e.createElement("div",{className:"maxio-tabs__tab__content"},h,x||null))},Pe=({children:a,variant:t="line",withDivider:n=!1,defaultIndex:i=0,index:r,onChange:l})=>e.createElement(Ie,{defaultIndex:i,variant:t,withDivider:n,index:r,onChange:l},a),Se=({children:a,value:t,...n})=>{const{currentIndex:i}=Ce();return e.createElement("div",{...n,...t?{id:`panel-${t}`}:{},role:"tabpanel","aria-labelledby":`tab-${t}`,hidden:i!==t},a)},Ve=({children:a})=>{const{currentIndex:t}=Ce();return e.createElement(e.Fragment,null,c.map(a,((e,a)=>{if(m(e)&&e.type===Se)return a===t?d(e,{value:a}):null;throw new Error("You can only pass <TabPanel /> component as children")})))},De=(e,a,t)=>0===e?e:1===e&&a[e-1].disabled?t||e:a[e-1].disabled?De(e-1,a,t||e):e-1,$e=({children:t,className:n,ariaLabel:i,...r})=>{const{variant:l,withDivider:o,currentIndex:s,onChange:p}=Ce(),v=u("maxio-tabs",n,{"maxio-tabs--contained":"contained"===l,"maxio-tabs--divider":o}),h=a(),x=()=>c.map(t,(e=>e.props));return e.createElement("div",{className:v,role:"tablist","aria-label":i,"aria-orientation":"horizontal",ref:h,onKeyDown:e=>{"ArrowRight"===e.key&&p((e=>((e,a)=>{const t=a.findIndex(((a,t)=>!a.disabled&&t>e));return-1===t?e:t})(e,x()))),"ArrowLeft"===e.key&&p((e=>De(e,x()))),h.current.focus()},...r},c.map(t,((e,a)=>{if(m(e)&&e.type===Oe)return d(e,{value:a,isCurrent:s===a});throw new Error("You can only pass <Tab /> component as children")})))},Te=({className:a,children:t,disabled:n=!1,external:i=!1,icon:r="arrow-right",noArrow:l=!1,size:o="md",...s})=>{const c=u("maxio-link",{[`maxio-link--${o}`]:!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),!l&&e.createElement($,{variant:r}))},Fe=i({}),Re=()=>r(Fe),Me=({name:a,values:t,onChange:i,disabled:r=!1,invalid:l=!1,children:o})=>{const[s,c]=n(t||[]);return e.createElement(Fe.Provider,{value:{disabled:r,invalid:l,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)},We=({label:t,error:n=!1,className:i,indeterminate:r,...l})=>{const o=a(null),{name:s,disabled:c,invalid:m,onChange:d,values:p=[]}=Re(),v=!!s,h=c||l.disabled,x=m||n,b=v?p.includes(l.value):l.checked,g=u("maxio-checkbox",{"maxio-checkbox--checked":b,"maxio-checkbox--disabled":h,"maxio-checkbox--error":x,"maxio-checkbox--indeterminate":r},i),{inputProps:E}=P({value:l.value,"aria-label":t},{isDisabled:h,isReadOnly:h,setValue:d,addValue:d,toggleValue:d,removeValue:d,value:p,isSelected:e=>p.includes(e),validationState:n?"invalid":"valid",isInvalid:!!n},o);return e.createElement("label",{className:g},e.createElement("input",{type:"checkbox",role:"checkbox",className:"maxio-checkbox__input",ref:o,...v?E:l}),e.createElement("span",{className:"maxio-checkbox__control"},n&&e.createElement("span",{className:"maxio-checkbox__control-error"})),e.createElement("span",{className:"maxio-checkbox__label"},t))},ze=({children:a,className:t,...n})=>e.createElement("div",{className:u("maxio-form-helper-text",t),...n},a),He=({children:a,className:t,...n})=>e.createElement("div",{className:u("maxio-form-error",t),...n},e.createElement("i",{className:"maxio-form-error__icon"}),e.createElement("div",{className:"maxio-form-error__text"},a)),Le=({className:a,children:t,label:n,errorMessage:i,helperText:r,disabled:l})=>{const{values:o,onChange:s,name:c}=Re(),{descriptionProps:m,errorMessageProps:d,groupProps:p,labelProps:v}=S({name:c,label:n},{validationState:i?"invalid":"valid",isDisabled:l,isInvalid:!!i,isReadOnly:l,setValue:s,addValue:s,toggleValue:s,removeValue:s,value:o,isSelected:e=>o.includes(e)}),h=u("maxio-checkbox-group",{"maxio-checkbox-group--disabled":l},a),x=r&&!i;return e.createElement("div",{className:h,...p},n&&e.createElement("label",{className:"maxio-checkbox-group__label",...v},n),t,x&&e.createElement(ze,{...m},r),i&&e.createElement(He,{...d},i))},Ae=a=>e.createElement(Me,{...a},e.createElement(Le,{...a},a.children)),Ue=i({}),Be=()=>r(Ue),Ge=({children:a,onChange:i,value:r,defaultValue:l="",name:o,indent:s,disabled:c})=>{const[m,d]=n(l),[u,p]=n(null);t((()=>{d(r)}),[r]);return e.createElement(Ue.Provider,{value:{onChange:e=>{d(e),i&&i(e)},name:o,value:m,indent:s,disabled:c,lastFocusedValue:u,setLastFocusedValue:p}},a)},Ke=({indent:t=!1,disabled:n=!1,invalid:i=!1,label:r,...l})=>{const o=a(null),{disabled:s,indent:c,invalid:m,name:d,onChange:p,value:v,setLastFocusedValue:h=(()=>{}),lastFocusedValue:x=null}=Be(),b=!!d,g=m||i,E=s||n,_=u("maxio-radio",{"maxio-radio--indent":c||t,"maxio-radio--disabled":E,"maxio-radio--error":g}),{inputProps:f}=V({...l,children:r,value:(l.value||"").toString()},{isDisabled:E,isReadOnly:E,isRequired:!1,name:d,validationState:g?"invalid":"valid",isInvalid:g,selectedValue:v,setSelectedValue:p,setLastFocusedValue:h,lastFocusedValue:x},o);return e.createElement("label",{className:_},e.createElement("input",{ref:o,type:"radio",className:"maxio-radio__input",...b?f:l}),e.createElement("span",{className:"maxio-radio__control",tabIndex:0}),e.createElement("span",{className:"maxio-radio__label"},r))},Ye=({children:a,label:t,errorMessage:n,helperText:i,disabled:r=!1,invalid:l=!1})=>{const{name:o,onChange:s,value:c,lastFocusedValue:m,setLastFocusedValue:d}=Be(),{radioGroupProps:u,labelProps:p,descriptionProps:v,errorMessageProps:h}=D({name:o,label:t},{name:o,validationState:l?"invalid":"valid",isDisabled:r,isInvalid:l,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&&l&&e.createElement(He,{...h},n),i&&!n&&e.createElement(ze,{...v},i)))},je=a=>e.createElement(Ge,{...a},e.createElement(Ye,{...a},a.children));export{R as ActionList,M as Avatar,Ee as Body,B as BrandLogo,J as Button,We as Checkbox,Ae as CheckboxGroup,we as Code,Ne as Display,He as FormErrorMessage,ze as FormHelperText,ne as HeaderButton,ie as HeaderNav,re as HeaderSearchField,oe as HeaderSearchInput,le as HeaderSearchMenu,fe as Heading,$ as Icon,Q as IconButton,ye as Label,Te as Link,L as Menu,U as MenuButton,A as MenuList,X as OverlayTrigger,ge as ProgressBar,Ke as Radio,je as RadioGroup,be as SideNav,Oe as Tab,$e as TabList,Se as TabPanel,Ve as TabPanels,Pe as Tabs,Z as Toggle,ee as Tooltip,te as TooltipTrigger,j as useHover,Y as useOverlayTrigger,q 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:l,link:s}=t;return e.createElement("li",{className:"maxio-action-list__item",key:`list-item-${a||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:t})=>{const[a,n]=e.useState(!1);return e.createElement(l.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(l);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:l})=>{const s=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((()=>{s.current&&clearTimeout(s.current),a&&l&&(s.current=setTimeout((()=>o(!1)),l))}),[a,l]);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)},l=t&&t.current;return l&&(l.addEventListener("mouseenter",e),l.addEventListener("mouseleave",r)),()=>{l&&(l.removeEventListener("mouseenter",e),l.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: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(a.AnimatePresence,null,o&&e.createElement(a.motion.div,{ref:E,style:_,...p,...b()},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:r=!1,className:o,variant:l="primary",size:s="lg",disabled:c,icon:m,...d})=>{const u=e.useRef(),{buttonProps:p}=i.useButton({...d,isDisabled:c},u),x=t("maxio-button",o,{[`maxio-button--${s}`]:s,[`maxio-button--${l}`]:l,"maxio-button--loading":n,"maxio-button--full-width":r}),v=t("maxio-button__loader",{"maxio-button__loader--white":["primary","secondary","danger"].includes(l)});return e.createElement("button",{...p,className:x},a,!n&&m,n&&e.createElement("div",{className:v}))},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)),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:t,interactions:a=["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 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?s:p,onOverlayUpdate:E,autoHideMs:l,usePortal:c,placement:n,interactions:a,renderOverlay:()=>e.createElement(g,{size:r,arrowPosition:b[n],maxWidth:i},o())},t)},f=({children:a,as:n,iconName:o,noPadding:l,className:s,...c})=>{const m=e.useRef(null);let{buttonProps:d}=i.useButton(c,m),{linkProps:u}=i.useLink(c,m);const p="a"===n?u:d,x=n||"button";return e.createElement(x,{className:t("maxio-header-button",s,{"maxio-header-button--no-padding":l}),ref:m,...p},e.createElement("div",{className:"maxio-header-button__content"},a||null,o&&e.createElement(r,{variant:o})))},_=({className:a,innerRef:n,...o})=>{const[l,s]=e.useState(o.value||""),{inputProps:c}=i.useSearchField({value:o.value,"aria-label":"Search",placeholder:"Search",name:"search"},{value:l,setValue:s},n);return 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:n,className:"maxio-header-search-field__input",type:"search",...c}))};_.displayName="SearchField";const N=({options:t,innerRef: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":"Menu",ref:a,...n},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 y=({leadingIcon:t,trailingIcon:a,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},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}))),w=e.createContext({}),k=()=>e.useContext(w),C=({children:t,withIcons:a=!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 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:l,onOpen:d,onClose:u,onToggle:()=>s((e=>!e)),withIcons:a}},t);function v(){const e=g();e&&(m((t=>t.map((t=>{var a;return{...t,isOpen:!1,isCurrent:(null===(a=t.items)||void 0===a?void 0:a.includes(e))||!1}})))),u())}function h(){const e=g();e&&(m((t=>t.map((t=>{var a;return{...t,isOpen:(null===(a=t.items)||void 0===a?void 0:a.includes(e))||!1,isCurrent:!1}})))),d())}function g(){return c.map((e=>e.items)).flat().filter((e=>null!=e)).find((e=>e.isCurrent))}},I=()=>{const{onOpen:t,topDropdownItems:a,isOpen:n}=k(),{mainItem:i,otherItems:r,actions:l}=a,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: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: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:t})=>{const{isOpen:a}=k(),n=e.useRef(null),i=p(n);return e.createElement("li",{className:"maxio-side-nav__item","data-key":t.key,"data-testid":"maxio-sidebar-section"},e.createElement("a",{className:"maxio-side-nav__link","aria-current":t.isCurrent?"page":void 0,role:"button",href:t.href,ref:n},e.createElement(y,{isTooltipVisible:i&&!a,type:"menu",leadingIcon:t.icon},t.name)))},P=({section:a})=>{var n;const{onOpen:i,onSectionOpen:r,isOpen:o,withIcons:l}=k();const s=e.useRef(null),c=p(s);return a.Component?e.createElement(a.Component,{section:a}):a.href?e.createElement(S,{section:a}):e.createElement("li",{className:t("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),i()}},e.createElement(y,{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)))))))},O=()=>{const{sections:t}=k();return e.createElement("ul",{className:"maxio-side-nav__items"},t.map((t=>e.createElement(P,{key:`section-${t.name}`,section:t}))))},T=()=>{const{isOpen:a}=k();return e.createElement("nav",{className:t("maxio-side-nav",{"maxio-side-nav--collapsed":!a})},e.createElement(I,null),e.createElement("hr",{className:"maxio-side-nav__divider"}),e.createElement(O,null))},R={sm:"h3",md:"h2",lg:"h1"},V=e.createContext({}),F=()=>e.useContext(V),$=({children:t,variant:a,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(V.Provider,{value:{currentIndex:l,variant:a,withDivider:n,onChange:e=>{let t;t="function"==typeof e?e(l):e,void 0===o&&s(t),"function"==typeof r&&r(t)}}},t)},D=({disabled:a=!1,value:n=0,isCurrent:i,...r})=>{const{onChange:o,currentIndex:l}=F(),s=t("maxio-tabs__tab",{"maxio-tabs__tab--active":l===n,"maxio-tabs__tab--disabled":a,"maxio-tabs__tab--icon":"icon"===r.type}),c=()=>{o(n)},m={"aria-selected":i,id:`tab-${n}`,"aria-controls":`panel-${n}`,role:"tab",tabIndex:i?0:-1},d=e.useRef(null),u=e.useRef(!1);if(e.useEffect((()=>{i&&u.current&&d.current.focus()}),[i]),e.useEffect((()=>{u.current=!0}),[]),"icon"===r.type){const{icon:t,...a}=r;return e.createElement("div",{className:s,ref:d,onClick:c,...m,...a},e.createElement("div",{className:"maxio-tabs__tab__content"},t))}const{children:p,rightIcon:x,...v}=r;return e.createElement("div",{role:"tab",ref:d,className:s,onClick:c,...m,...v},e.createElement("div",{className:"maxio-tabs__tab__content"},p,x||null))},L=({children:t,value:a,...n})=>{const{currentIndex:i}=F();return e.createElement("div",{...n,...a?{id:`panel-${a}`}:{},role:"tabpanel","aria-labelledby":`tab-${a}`,hidden:i!==a},t)},M=(e,t,a)=>0===e?e:1===e&&t[e-1].disabled?a||e:t[e-1].disabled?M(e-1,t,a||e):e-1,H=e.createContext({}),W=()=>e.useContext(H),z=({name:t,values:a,onChange:n,disabled:i=!1,invalid:r=!1,children:o})=>{const[l,s]=e.useState(a||[]);return e.createElement(H.Provider,{value:{disabled:i,invalid:r,name:t,values:l,onChange:e=>{let t=[];t=l.includes(e)?l.filter((t=>t!==e)):[...l,e],s(t),n&&n(t)}}},o)},B=({children:a,className:n,...i})=>e.createElement("div",{className:t("maxio-form-helper-text",n),...i},a),A=({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)),q=({className:a,children:n,label:r,errorMessage:o,helperText:l,disabled:s})=>{const{values:c,onChange:m,name:d}=W(),{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=t("maxio-checkbox-group",{"maxio-checkbox-group--disabled":s},a),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(B,{...u},l),o&&e.createElement(A,{...p},o))},G=e.createContext({}),U=()=>e.useContext(G),Y=({children:t,onChange:a,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(G.Provider,{value:{onChange:e=>{c(e),a&&a(e)},name:r,value:s,indent:o,disabled:l,lastFocusedValue:m,setLastFocusedValue:d}},t)},j=({children:t,label:a,errorMessage:n,helperText:r,disabled:o=!1,invalid:l=!1})=>{const{name:s,onChange:c,value:m,lastFocusedValue:d,setLastFocusedValue:u}=U(),{radioGroupProps:p,labelProps:x,descriptionProps:v,errorMessageProps:h}=i.useRadioGroup({name:s,label:a},{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},a&&e.createElement("label",{className:"maxio-radio-group__label",...x},a),t,n&&l&&e.createElement(A,{...h},n),r&&!n&&e.createElement(B,{...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,...l})=>{const s=a,c=t({[`maxio-body-${r}`]:!i,[`maxio-body-${r}-compact`]:i},o);return e.createElement(s,{className:c,...l},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.Checkbox=({label:a,error:n=!1,className:r,indeterminate:o,...l})=>{const s=e.useRef(null),{name:c,disabled:m,invalid:d,onChange:u,values:p=[]}=W(),x=!!c,v=m||l.disabled,h=d||n,g=x?p.includes(l.value):l.checked,b=t("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":a},{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"},n&&e.createElement("span",{className:"maxio-checkbox__control-error"})),e.createElement("span",{className:"maxio-checkbox__label"},a))},exports.CheckboxGroup=t=>e.createElement(z,{...t},e.createElement(q,{...t},t.children)),exports.Code=({as:a="div",children:n,className:i,...r})=>{const o=a,l=t("maxio-code",i);return e.createElement(o,{className:l,...r},n)},exports.Display=({as:a="div",children:n,size:i="md",className:r,...o})=>{const l=a,s=t(`maxio-display-${i}`,r);return e.createElement(l,{className:s,...o},n)},exports.FormErrorMessage=A,exports.FormHelperText=B,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,{innerRef:i,options:t}),e.createElement(_,{innerRef: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=R[n],l=t(`maxio-heading-${n}`,i);return e.createElement(o,{className:l,...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 l=a,s=t(`maxio-label-${i}`,r);return e.createElement(l,{className:s,...o},n)},exports.Link=({className:a,children:n,disabled:i=!1,external:o=!1,icon:l="arrow-right",noArrow:s=!1,size:c="md",...m})=>{const d=t("maxio-link",{[`maxio-link--${c}`]:!0,"maxio-link--disabled":i},a),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:t})=>e.createElement(s,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:l,value:s,maxValue:c=100})=>{const m=i.useId(),d=i.useId(),u=l&&!!a&&!!s&&!("inline"===o),p=n&&!("inline"===o),x=n&&"inline"===o,{progressBarProps:v,labelProps:h}=i.useProgressBar({maxValue:c,value:s,label:a}),g=t("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:g,...v},e.createElement("div",{id:m,className:"maxio-progress-bar__label",...h},a),x&&e.createElement("div",{id:d,className:"maxio-progress-bar__helper-text"},n),e.createElement("div",{className:"maxio-progress-bar__track"},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:a=!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}=U(),g=!!u,b=d||r,E=c||n,f=t("maxio-radio",{"maxio-radio--indent":m||a,"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=t=>e.createElement(Y,{...t},e.createElement(j,{...t},t.children)),exports.SideNav=({withIcons:t,shouldToggleSidebar:a,topDropdownItems:n,sections:i,collapseBreakpoint:r=800})=>e.createElement(C,{collapseBreakpoint:r,withIcons:t,shouldToggleSidebar:a,topDropdownItems:n,sections:i},e.createElement(T,null)),exports.Tab=D,exports.TabList=({children:a,className:n,ariaLabel:i,...r})=>{const{variant:o,withDivider:l,currentIndex:s,onChange:c}=F(),m=t("maxio-tabs",n,{"maxio-tabs--contained":"contained"===o,"maxio-tabs--divider":l}),d=e.useRef(),u=()=>e.Children.map(a,(e=>e.props));return e.createElement("div",{className:m,role:"tablist","aria-label":i,"aria-orientation":"horizontal",ref:d,onKeyDown:e=>{"ArrowRight"===e.key&&c((e=>((e,t)=>{const a=t.findIndex(((t,a)=>!t.disabled&&a>e));return-1===a?e:a})(e,u()))),"ArrowLeft"===e.key&&c((e=>M(e,u()))),d.current.focus()},...r},e.Children.map(a,((t,a)=>{if(e.isValidElement(t)&&t.type===D)return e.cloneElement(t,{value:a,isCurrent:s===a});throw new Error("You can only pass <Tab /> component as children")})))},exports.TabPanel=L,exports.TabPanels=({children:t})=>{const{currentIndex:a}=F();return e.createElement(e.Fragment,null,e.Children.map(t,((t,n)=>{if(e.isValidElement(t)&&t.type===L)return n===a?e.cloneElement(t,{value:n}):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($,{defaultIndex:i,variant:a,withDivider:n,index:r,onChange:o},t),exports.Toggle=({defaultChecked:a,checked:n,onChange:i,disabled:r,valueDescription:o,valueDescriptionPosition:l,className:s,name:c,id:m})=>{const d=e.useId(),u="boolean"==typeof a,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 t=e.currentTarget.checked;u&&(e.currentTarget.checked=!t),i&&i(!t,e)}}),[u,i]);return e.createElement("div",{className:t("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: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=E,exports.useHover=p,exports.useOverlayTrigger=u,exports.useWindowSize=x;
|
|
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=({item:t,isSelected:a})=>{const n=e.useRef(),i=e.useRef(!1);if(e.useEffect((()=>{var e;a&&i.current&&(null===(e=n.current)||void 0===e||e.focus())}),[a]),e.useEffect((()=>{i.current=!0}),[]),"divider"===t.type)return e.createElement("div",{className:"maxio-action-list__divider",role:"separator","aria-hidden":"true"});const{leadingIconName:o,trailingIconName:l,label:s,description:c,link:m}=t;return e.createElement("a",{role:"option","aria-selected":a,...m,className:"maxio-action-list__content",tabIndex:a?0:-1,ref:n},o&&e.createElement(r,{variant:o,className:"maxio-action-list__leading-icon"}),e.createElement("span",{className:"maxio-action-list__label"},s),c&&e.createElement("span",{className:"maxio-action-list__description"},c),l&&e.createElement(r,{variant:l,className:"maxio-action-list__trailing-icon"}))},l=(e,t,a)=>0===e?e:1===e&&"divider"===t[e-1].type?a||e:"divider"===t[e-1].type?l(e-1,t,a||e):e-1,s=({items:a,isShadowed:n=!0,...i})=>{const r=t("maxio-action-list",{"maxio-action-list--shadow":n}),[s,c]=e.useState((()=>a.findIndex((e=>"divider"!==e.type))));return 0===a.length?null:e.createElement("div",{className:r,onKeyDown:e=>{if("Space"===e.code||"Enter"===e.code){const e=a[s];e&&"divider"!==e.type&&window.open(e.link.href,e.link.target||"_self")}"ArrowUp"===e.code&&(e.preventDefault(),c((e=>l(e,a)))),"ArrowDown"===e.code&&(e.preventDefault(),c((e=>((e,t)=>{const a=t.findIndex(((t,a)=>"divider"!==t.type&&a>e));return-1===a?e:a})(e,a))))},"aria-label":i["aria-label"],role:"listbox"},a.map(((t,a)=>e.createElement(o,{item:t,key:`listbox-${t.id}`,isSelected:a===s}))))},c=e.createContext({}),m=({children:t})=>{const[a,n]=e.useState(!1);return e.createElement(c.Provider,{value:{isOpen:a,onClose:()=>n(!1),onOpen:()=>n(!0),onToggle:()=>n((e=>!e))}},t)};const d=({children:t})=>{const{isOpen:a,onToggle:n,onClose:i}=function(){const t=e.useContext(c);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)},u={click:n.useClick,hover:n.useHover,focus:n.useFocus,dismiss:n.useDismiss},p=(e,t)=>t.map((t=>u[t](e))),x=({placement:t="top",isActive:a=!1,interactions:i=["hover"],floatingElementOffset:r=0,onOverlayUpdate:o,autoHideMs:l})=>{const s=e.useRef(null),{strategy:c,x:m,y:d,context:u,floating:x,reference:v}=n.useFloating({placement:t,open:a,onOpenChange:e=>o(e),middleware:[n.offset(r)]}),{getReferenceProps:h,getFloatingProps:b}=n.useInteractions([...p(u,i),n.useRole(u,{role:"tooltip"})]);e.useEffect((()=>{s.current&&clearTimeout(s.current),a&&l&&(s.current=setTimeout((()=>o(!1)),l))}),[a,l]);return{isActive:a,refs:{floating:x,reference:v},floatingElementCSSPosition:{position:c,top:null!=d?d:0,left:null!=m?m:0},getReferenceProps:h,getFloatingProps:b}};function v(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)},l=t&&t.current;return l&&(l.addEventListener("mouseenter",e),l.addEventListener("mouseleave",r)),()=>{l&&(l.removeEventListener("mouseenter",e),l.removeEventListener("mouseleave",r))}}),[t]),r}function h(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 b=({children:i,usePortal:r=!1,isActive:o=!1,placement:l="top",interactions:s=["hover"],role:c="tooltip",renderOverlay:m,floatingElementOffset:d,motionSettings:u={},autoHideMs:p,onOverlayUpdate:v,className:h})=>{const{getReferenceProps:b,getFloatingProps:g,refs:{floating:E,reference:f},floatingElementCSSPosition:_}=x({role:c,isActive:o,onOverlayUpdate:v,autoHideMs:p,floatingElementOffset:d,interactions:s,placement:l}),N=e.createElement(a.AnimatePresence,null,o&&e.createElement(a.motion.div,{ref:E,style:_,...u,...g()},m()));return e.createElement(e.Fragment,null,e.createElement("div",{ref:f,className:t("maxio-inline-flex",h),...b(),"data-testid":"overlay-trigger"},i),r?e.createElement(n.FloatingPortal,{id:"maxio-ui-portal"},N):N)},g=({children:a,loading:n=!1,fullWidth:r=!1,className:o,variant:l="primary",size:s="lg",disabled:c,icon:m,...d})=>{const u=e.useRef(),{buttonProps:p}=i.useButton({...d,isDisabled:c},u),x=t("maxio-button",o,{[`maxio-button--${s}`]:s,[`maxio-button--${l}`]:l,"maxio-button--loading":n,"maxio-button--full-width":r}),v=t("maxio-button__loader",{"maxio-button__loader--white":["primary","secondary","danger"].includes(l)});return e.createElement("button",{...p,className:x},a,!n&&m,n&&e.createElement("div",{className:v}))},E=({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)),f={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"},_=({children:t,interactions:a=["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),v=void 0!==s,h=e.useCallback((e=>{v||x(e),d&&d(e)}),[s]),g=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(b,{role:"tooltip",className:m,floatingElementOffset:u,motionSettings:g,isActive:v?s:p,onOverlayUpdate:h,autoHideMs:l,usePortal:c,placement:n,interactions:a,renderOverlay:()=>e.createElement(E,{size:r,arrowPosition:f[n],maxWidth:i},o())},t)},N=({children:a,as:n,iconName:o,noPadding:l,className:s,...c})=>{const m=e.useRef(null);let{buttonProps:d}=i.useButton(c,m),{linkProps:u}=i.useLink(c,m);const p="a"===n?u:d,x=n||"button";return e.createElement(x,{className:t("maxio-header-button",s,{"maxio-header-button--no-padding":l}),ref:m,...p},e.createElement("div",{className:"maxio-header-button__content"},a||null,o&&e.createElement(r,{variant:o})))},y=({className:a,innerRef:n,...o})=>{const[l,s]=e.useState(o.value||""),{inputProps:c}=i.useSearchField({value:o.value,"aria-label":"Search",placeholder:"Search",name:"search"},{value:l,setValue:s},n);return 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:n,className:"maxio-header-search-field__input",type:"search",...c}))};y.displayName="SearchField";const w=({options:t,innerRef: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":"Menu",ref:a,...n},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"})));w.displayName="SearchMenu";const k=({leadingIcon:t,trailingIcon:a,type:n="menu",children:i,leadingIconClassName:o,isTooltipVisible:l=!1})=>e.createElement(e.Fragment,null,e.createElement(_,{usePortal:!1,isVisible:l,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}))),C=e.createContext({}),I=()=>e.useContext(C),S=({children:t,withIcons:a=!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}=h();e.useEffect((()=>{!function(e){if(!i)return;e<o&&l&&x();e>o&&!l&&v()}(p)}),[p]),e.useEffect((()=>{l?v():x()}),[]);return e.createElement(C.Provider,{value:{sections:c,topDropdownItems:r,onSectionOpen:e=>{const t=b();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:l,onOpen:d,onClose:u,onToggle:()=>s((e=>!e)),withIcons:a}},t);function x(){const e=b();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 v(){const e=b();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 b(){return c.map((e=>e.items)).flat().filter((e=>null!=e)).find((e=>e.isCurrent))}},P=()=>{const{onOpen:t,topDropdownItems:a,isOpen:n}=I(),{mainItem:i,otherItems:r,actions:o}=a,l=e.useRef(null),c=v(l),m=e=>({id:e.id,label:e.title,leadingIconName:e.icon,link:{href:e.url}}),d=e.useMemo((()=>[...r.map(m),r.length>0&&{type:"divider",id:"item-divider"},...o.map(m)].filter((e=>null!=e))),[o,r]),u=r.length+o.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(k,{type:"menu",isTooltipVisible:!n&&c,leadingIcon:i.icon,trailingIcon:"chevron-down",leadingIconClassName:"maxio-icon-circle-small-fill maxio-icon--success"},i.title)):e.createElement(k,{type:"menu",trailingIcon:"chevron-down"},i.title)),e.createElement(s,{"aria-label":"Action list",items:d})))},O=({section:t})=>{const{isOpen:a}=I(),n=e.useRef(null),i=v(n);return e.createElement("li",{className:"maxio-side-nav__item","data-key":t.key,"data-testid":"maxio-sidebar-section"},e.createElement("a",{className:"maxio-side-nav__link","aria-current":t.isCurrent?"page":void 0,role:"button",href:t.href,ref:n},e.createElement(k,{isTooltipVisible:i&&!a,type:"menu",leadingIcon:t.icon},t.name)))},T=({section:a})=>{var n;const{onOpen:i,onSectionOpen:r,isOpen:o,withIcons:l}=I();const s=e.useRef(null),c=v(s);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":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),i()}},e.createElement(k,{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)))))))},R=()=>{const{sections:t}=I();return e.createElement("ul",{className:"maxio-side-nav__items"},t.map((t=>e.createElement(T,{key:`section-${t.name}`,section:t}))))},V=()=>{const{isOpen:a}=I();return e.createElement("nav",{className:t("maxio-side-nav",{"maxio-side-nav--collapsed":!a})},e.createElement(P,null),e.createElement("hr",{className:"maxio-side-nav__divider"}),e.createElement(R,null))},D={sm:"h3",md:"h2",lg:"h1"},F=e.createContext({}),$=()=>e.useContext(F),M=({children:t,variant:a,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:a,withDivider:n,onChange:e=>{let t;t="function"==typeof e?e(l):e,void 0===o&&s(t),"function"==typeof r&&r(t)}}},t)},L=({disabled:a=!1,value:n=0,isCurrent:i,...r})=>{const{onChange:o,currentIndex:l}=$(),s=t("maxio-tabs__tab",{"maxio-tabs__tab--active":l===n,"maxio-tabs__tab--disabled":a,"maxio-tabs__tab--icon":"icon"===r.type}),c=()=>{o(n)},m={"aria-selected":i,id:`tab-${n}`,"aria-controls":`panel-${n}`,role:"tab",tabIndex:i?0:-1},d=e.useRef(null),u=e.useRef(!1);if(e.useEffect((()=>{i&&u.current&&d.current.focus()}),[i]),e.useEffect((()=>{u.current=!0}),[]),"icon"===r.type){const{icon:t,...a}=r;return e.createElement("div",{className:s,ref:d,onClick:c,...m,...a},e.createElement("div",{className:"maxio-tabs__tab__content"},t))}const{children:p,rightIcon:x,...v}=r;return e.createElement("div",{role:"tab",ref:d,className:s,onClick:c,...m,...v},e.createElement("div",{className:"maxio-tabs__tab__content"},p,x||null))},H=({children:t,value:a,...n})=>{const{currentIndex:i}=$();return e.createElement("div",{...n,...a?{id:`panel-${a}`}:{},role:"tabpanel","aria-labelledby":`tab-${a}`,hidden:i!==a},t)},W=(e,t,a)=>0===e?e:1===e&&t[e-1].disabled?a||e:t[e-1].disabled?W(e-1,t,a||e):e-1,A=e.createContext({}),z=()=>e.useContext(A),B=({name:t,values:a,onChange:n,disabled:i=!1,invalid:r=!1,children:o})=>{const[l,s]=e.useState(a||[]);return e.createElement(A.Provider,{value:{disabled:i,invalid:r,name:t,values:l,onChange:e=>{let t=[];t=l.includes(e)?l.filter((t=>t!==e)):[...l,e],s(t),n&&n(t)}}},o)},q=({children:a,className:n,...i})=>e.createElement("div",{className:t("maxio-form-helper-text",n),...i},a),G=({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)),U=({className:a,children:n,label:r,errorMessage:o,helperText:l,disabled:s})=>{const{values:c,onChange:m,name:d}=z(),{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=t("maxio-checkbox-group",{"maxio-checkbox-group--disabled":s},a),b=l&&!o;return e.createElement("div",{className:h,...x},r&&e.createElement("label",{className:"maxio-checkbox-group__label",...v},r),n,b&&e.createElement(q,{...u},l),o&&e.createElement(G,{...p},o))},K=e.createContext({}),Y=()=>e.useContext(K),j=({children:t,onChange:a,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(K.Provider,{value:{onChange:e=>{c(e),a&&a(e)},name:r,value:s,indent:o,disabled:l,lastFocusedValue:m,setLastFocusedValue:d}},t)},X=({children:t,label:a,errorMessage:n,helperText:r,disabled:o=!1,invalid:l=!1})=>{const{name:s,onChange:c,value:m,lastFocusedValue:d,setLastFocusedValue:u}=Y(),{radioGroupProps:p,labelProps:x,descriptionProps:v,errorMessageProps:h}=i.useRadioGroup({name:s,label:a},{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},a&&e.createElement("label",{className:"maxio-radio-group__label",...x},a),t,n&&l&&e.createElement(G,{...h},n),r&&!n&&e.createElement(q,{...v},r)))};exports.ActionList=s,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,...l})=>{const s=a,c=t({[`maxio-body-${r}`]:!i,[`maxio-body-${r}-compact`]:i},o);return e.createElement(s,{className:c,...l},n)},exports.BrandLogo=({icon:a,variant:n="default"})=>e.createElement("i",{className:t("maxio-brand-logo",`maxio-brand-logo-${a}`,{[`maxio-brand-logo--${n}`]:"default"!==n})}),exports.Button=g,exports.Checkbox=({label:a,error:n=!1,className:r,indeterminate:o,...l})=>{const s=e.useRef(null),{name:c,disabled:m,invalid:d,onChange:u,values:p=[]}=z(),x=!!c,v=m||l.disabled,h=d||n,b=x?p.includes(l.value):l.checked,g=t("maxio-checkbox",{"maxio-checkbox--checked":b,"maxio-checkbox--disabled":v,"maxio-checkbox--error":h,"maxio-checkbox--indeterminate":o},r),{inputProps:E}=i.useCheckboxGroupItem({value:l.value,"aria-label":a},{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:g},e.createElement("input",{type:"checkbox",role:"checkbox",className:"maxio-checkbox__input",ref:s,...x?E:l}),e.createElement("span",{className:"maxio-checkbox__control"},n&&e.createElement("span",{className:"maxio-checkbox__control-error"})),e.createElement("span",{className:"maxio-checkbox__label"},a))},exports.CheckboxGroup=t=>e.createElement(B,{...t},e.createElement(U,{...t},t.children)),exports.Code=({as:a="div",children:n,className:i,...r})=>{const o=a,l=t("maxio-code",i);return e.createElement(o,{className:l,...r},n)},exports.Display=({as:a="div",children:n,size:i="md",className:r,...o})=>{const l=a,s=t(`maxio-display-${i}`,r);return e.createElement(l,{className:s,...o},n)},exports.FormErrorMessage=G,exports.FormHelperText=q,exports.HeaderButton=N,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=y,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(w,{innerRef:i,options:t}),e.createElement(y,{innerRef:n}),e.createElement(N,{type:"submit","aria-label":"Submit search",iconName:"arrow-right"}))},exports.HeaderSearchMenu=w,exports.Heading=({children:a,size:n="sm",className:i,...r})=>{const o=D[n],l=t(`maxio-heading-${n}`,i);return e.createElement(o,{className:l,...r},a)},exports.Icon=r,exports.IconButton=({icon:t,...a})=>e.createElement(g,{icon:t,className:"maxio-button--icon",...a},null),exports.Label=({as:a="div",children:n,size:i="sm",className:r,...o})=>{const l=a,s=t(`maxio-label-${i}`,r);return e.createElement(l,{className:s,...o},n)},exports.Link=({className:a,children:n,disabled:i=!1,external:o=!1,icon:l="arrow-right",noArrow:s=!1,size:c="md",...m})=>{const d=t("maxio-link",{[`maxio-link--${c}`]:!0,"maxio-link--disabled":i},a),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:t})=>e.createElement(m,null,e.createElement(d,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(s,{"aria-label":"Menu list items",items:a}))},exports.OverlayTrigger=b,exports.ProgressBar=({label:a,helperText:n,size:r="md",variant:o="default",status:l,value:s,maxValue:c=100})=>{const m=i.useId(),d=i.useId(),u=l&&!!a&&!!s&&!("inline"===o),p=n&&!("inline"===o),x=n&&"inline"===o,{progressBarProps:v,labelProps:h}=i.useProgressBar({maxValue:c,value:s,label:a}),b=t("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:b,...v},e.createElement("div",{id:m,className:"maxio-progress-bar__label",...h},a),x&&e.createElement("div",{id:d,className:"maxio-progress-bar__helper-text"},n),e.createElement("div",{className:"maxio-progress-bar__track"},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:a=!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}=Y(),b=!!u,g=d||r,E=c||n,f=t("maxio-radio",{"maxio-radio--indent":m||a,"maxio-radio--disabled":E,"maxio-radio--error":g}),{inputProps:_}=i.useRadio({...l,children:o,value:(l.value||"").toString()},{isDisabled:E,isReadOnly:E,isRequired:!1,name:u,validationState:g?"invalid":"valid",isInvalid:g,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",...b?_:l}),e.createElement("span",{className:"maxio-radio__control",tabIndex:0}),e.createElement("span",{className:"maxio-radio__label"},o))},exports.RadioGroup=t=>e.createElement(j,{...t},e.createElement(X,{...t},t.children)),exports.SideNav=({withIcons:t,shouldToggleSidebar:a,topDropdownItems:n,sections:i,collapseBreakpoint:r=800})=>e.createElement(S,{collapseBreakpoint:r,withIcons:t,shouldToggleSidebar:a,topDropdownItems:n,sections:i},e.createElement(V,null)),exports.Tab=L,exports.TabList=({children:a,className:n,ariaLabel:i,...r})=>{const{variant:o,withDivider:l,currentIndex:s,onChange:c}=$(),m=t("maxio-tabs",n,{"maxio-tabs--contained":"contained"===o,"maxio-tabs--divider":l}),d=e.useRef(),u=()=>e.Children.map(a,(e=>e.props));return e.createElement("div",{className:m,role:"tablist","aria-label":i,"aria-orientation":"horizontal",ref:d,onKeyDown:e=>{"ArrowRight"===e.key&&c((e=>((e,t)=>{const a=t.findIndex(((t,a)=>!t.disabled&&a>e));return-1===a?e:a})(e,u()))),"ArrowLeft"===e.key&&c((e=>W(e,u()))),d.current.focus()},...r},e.Children.map(a,((t,a)=>{if(e.isValidElement(t)&&t.type===L)return e.cloneElement(t,{value:a,isCurrent:s===a});throw new Error("You can only pass <Tab /> component as children")})))},exports.TabPanel=H,exports.TabPanels=({children:t})=>{const{currentIndex:a}=$();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,{value:n}):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(M,{defaultIndex:i,variant:a,withDivider:n,index:r,onChange:o},t),exports.Toggle=({defaultChecked:a,checked:n,onChange:i,disabled:r,valueDescription:o,valueDescriptionPosition:l,className:s,name:c,id:m})=>{const d=e.useId(),u="boolean"==typeof a,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 t=e.currentTarget.checked;u&&(e.currentTarget.checked=!t),i&&i(!t,e)}}),[u,i]);return e.createElement("div",{className:t("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: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=E,exports.TooltipTrigger=_,exports.useHover=v,exports.useOverlayTrigger=x,exports.useWindowSize=h;
|
|
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": "2.0
|
|
3
|
+
"version": "2.1.0",
|
|
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": "
|
|
52
|
+
"gitHead": "1844f722847517befd01d4b68fc26a4c2854366d"
|
|
53
53
|
}
|
package/typings/index.d.ts
CHANGED
|
@@ -22,7 +22,7 @@ interface DividerListItem {
|
|
|
22
22
|
}
|
|
23
23
|
interface ListItem {
|
|
24
24
|
type?: 'default';
|
|
25
|
-
id
|
|
25
|
+
id: string | number;
|
|
26
26
|
label: string;
|
|
27
27
|
description?: string;
|
|
28
28
|
leadingIconName?: IconVariant;
|
|
@@ -33,9 +33,10 @@ declare type ActionListItem = ListItem | DividerListItem;
|
|
|
33
33
|
interface ActionListProps {
|
|
34
34
|
items: ActionListItem[];
|
|
35
35
|
isShadowed?: boolean;
|
|
36
|
+
'aria-label': string;
|
|
36
37
|
}
|
|
37
38
|
|
|
38
|
-
declare const ActionList: ({ items, isShadowed }: ActionListProps) => JSX.Element;
|
|
39
|
+
declare const ActionList: ({ items, isShadowed, ...props }: ActionListProps) => JSX.Element;
|
|
39
40
|
//# sourceMappingURL=ActionList.d.ts.map
|
|
40
41
|
|
|
41
42
|
declare type AvatarProps = {
|
|
@@ -275,6 +276,7 @@ interface SideNavTopDropdown {
|
|
|
275
276
|
actions: SideNavTopDropdownItem[];
|
|
276
277
|
}
|
|
277
278
|
interface SideNavTopDropdownItem {
|
|
279
|
+
id: string;
|
|
278
280
|
title: string;
|
|
279
281
|
icon: IconVariant;
|
|
280
282
|
url: string;
|