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