@maxio-com/react-ui-components 1.11.3 → 1.13.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.
Files changed (5) hide show
  1. package/README.md +2 -2
  2. package/dist/index.esm.js +1 -1
  3. package/dist/index.js +1 -1
  4. package/package.json +2 -2
  5. package/typings/index.d.ts +40 -1
package/README.md CHANGED
@@ -1,12 +1,12 @@
1
1
  # React UI Components
2
2
 
3
- UI Components for React Applications. Built with [Maxio CSS Design System 4.7.0](https://internal-cdn.chargify.com/4.7.0/storybook/index.html).
3
+ UI Components for React Applications. Built with [Maxio CSS Design System 4.9.1](https://internal-cdn.chargify.com/4.9.1/storybook/index.html).
4
4
 
5
5
  ## Usage
6
6
 
7
7
  Make sure to include the snippet with design system stylesheet CSS file on Your page:
8
8
 
9
- `<link rel="stylesheet" href="https://internal-cdn.chargify.com/4.7.0/styles.css">`
9
+ `<link rel="stylesheet" href="https://internal-cdn.chargify.com/4.9.1/styles.css">`
10
10
 
11
11
  or import it in main js file:
12
12
 
package/dist/index.esm.js CHANGED
@@ -1 +1 @@
1
- import e,{createContext as t,useState as a,useContext as n,useRef as i,useEffect as r,useId as o,useCallback as l,useMemo as s,forwardRef as c,Children as m,isValidElement as d,cloneElement as u}from"react";import p from"classnames";import{AnimatePresence as v,motion as h}from"framer-motion";import{useClick as g,useHover as x,useFocus as E,useDismiss as _,useFloating as b,offset as f,useInteractions as N,useRole as w,FloatingPortal as y}from"@floating-ui/react-dom-interactions";import{useId as k}from"react-aria";const C=({variant:t,white:a,className:n})=>e.createElement("i",{className:p("maxio-icon",`maxio-icon-${t}`,a&&"maxio-icon--white",n)}),I=({items:t,isShadowed:a=!0})=>{const n=p("maxio-action-list",{"maxio-action-list--shadow":a});return 0===t.length?null:e.createElement("ul",{className:n},t.map((t=>{if("divider"===t.type)return e.createElement("li",{key:`list-item-divider-${t.id}`,className:"maxio-action-list__divider",role:"separator","aria-hidden":"true"});const{id:a,leadingIconName:n,trailingIconName:i,label:r,description:o,link:l}=t;return e.createElement("li",{className:"maxio-action-list__item",key:`list-item-${a||r}`},e.createElement("a",{...l,className:"maxio-action-list__content"},n&&e.createElement(C,{variant:n,className:"maxio-action-list__leading-icon"}),e.createElement("span",{className:"maxio-action-list__label"},r),o&&e.createElement("span",{className:"maxio-action-list__description"},o),i&&e.createElement(C,{variant:i,className:"maxio-action-list__trailing-icon"})))})))},O=({className:t,src:a,alt:n="avatar"})=>e.createElement("img",{className:p("maxio-avatar",t),alt:n,src:a}),$=t({}),T=({children:t})=>{const[n,i]=a(!1);return e.createElement($.Provider,{value:{isOpen:n,onClose:()=>i(!1),onOpen:()=>i(!0),onToggle:()=>i((e=>!e))}},t)};const S=({children:t})=>{const{isOpen:a,onToggle:i,onClose:r}=function(){const e=n($);if(!e||"object"==typeof e&&0===Object.keys(e).length)throw new Error("useMenu hook must be used within a MenuProvider");return e}();return e.createElement("details",{open:a,onToggle:i,className:"maxio-action-menu"},"function"==typeof t?t({isOpen:a,onClose:r}):t)},P=({children:t})=>e.createElement(T,null,e.createElement(S,null,t)),D=({items:t,alignItemsEnd:a=!1})=>{const n=p("maxio-action-menu__content",{"maxio-action-menu__content--align-end":a});return e.createElement("div",{className:n},e.createElement(I,{items:t}))},W=({children:t,iconName:a="chevron-down"})=>{const n=p({"maxio-action-menu__chevron":"chevron-down"===a});return e.createElement("summary",{className:"maxio-header-button","aria-haspopup":"true"},e.createElement("div",{className:"maxio-header-button__content"},t&&e.createElement("span",null,t),a&&e.createElement(C,{variant:a,className:n})))},F=({icon:t,variant:a="default"})=>e.createElement("i",{className:p("maxio-brand-logo",`maxio-brand-logo-${t}`,{[`maxio-brand-logo--${a}`]:"default"!==a})}),H={click:g,hover:x,focus:E,dismiss:_},z=(e,t)=>t.map((t=>H[t](e))),M=({placement:e="top",isActive:t=!1,interactions:a=["hover"],floatingElementOffset:n=0,onOverlayUpdate:o,autoHideMs:l})=>{const s=i(null),{strategy:c,x:m,y:d,context:u,floating:p,reference:v}=b({placement:e,open:t,onOpenChange:e=>o(e),middleware:[f(n)]}),{getReferenceProps:h,getFloatingProps:g}=N([...z(u,a),w(u,{role:"tooltip"})]);r((()=>{s.current&&clearTimeout(s.current),t&&l&&(s.current=setTimeout((()=>o(!1)),l))}),[t,l]);return{isActive:t,refs:{floating:p,reference:v},floatingElementCSSPosition:{position:c,top:null!=d?d:0,left:null!=m?m:0},getReferenceProps:h,getFloatingProps:g}};function V(e,t=0){const n=i((new Date).getTime()),o=i((new Date).getTime()),[l,s]=a(!1);return r((()=>{const a=()=>{n.current=(new Date).getTime(),s(!0)},i=()=>{o.current=(new Date).getTime(),setTimeout((()=>{n.current-o.current<=0&&s(!1)}),t)},r=e&&e.current;return r&&(r.addEventListener("mouseenter",a),r.addEventListener("mouseleave",i)),()=>{r&&(r.removeEventListener("mouseenter",a),r.removeEventListener("mouseleave",i))}}),[e]),l}function A(e=500){const[t,n]=a((()=>{const{innerWidth:e,innerHeight:t}=window;return{windowWitdh:e,windowHeight:t}})),o=i(null);return r((()=>{const t=()=>{const{innerWidth:t,innerHeight:a}=window;clearTimeout(o.current),o.current=setTimeout((()=>{n({windowWitdh:t,windowHeight:a})}),e)};return window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t)}}),[e]),t}const L=({children:t,usePortal:a=!1,isActive:n=!1,placement:i="top",interactions:r=["hover"],role:o="tooltip",renderOverlay:l,floatingElementOffset:s,motionSettings:c={},autoHideMs:m,onOverlayUpdate:d,className:u})=>{const{getReferenceProps:g,getFloatingProps:x,refs:{floating:E,reference:_},floatingElementCSSPosition:b}=M({role:o,isActive:n,onOverlayUpdate:d,autoHideMs:m,floatingElementOffset:s,interactions:r,placement:i}),f=e.createElement(v,null,n&&e.createElement(h.div,{ref:E,style:b,...c,...x()},l()));return e.createElement(e.Fragment,null,e.createElement("div",{ref:_,className:p("maxio-inline-flex",u),...g(),"data-testid":"overlay-trigger"},t),a?e.createElement(y,{id:"maxio-ui-portal"},f):f)},U=({children:t,loading:a=!1,fullWidth:n=!1,className:i,variant:r="primary",size:o="lg",disabled:l,icon:s,...c})=>{const m=p("maxio-button",i,{[`maxio-button--${o}`]:o,[`maxio-button--${r}`]:r,"maxio-button--loading":a,"maxio-button--full-width":n}),d=p("maxio-button__loader",{"maxio-button__loader--white":["primary","secondary","danger"].includes(r)});return e.createElement("button",{disabled:l,...c,className:m},t,!a&&s,a&&e.createElement("div",{className:d}))},B=({icon:t,...a})=>e.createElement(U,{icon:t,className:"maxio-button--icon",...a},null),R=({defaultChecked:t,checked:a,onChange:n,disabled:i,valueDescription:r,valueDescriptionPosition:s,className:c,name:m,id:d})=>{const u=o(),v="boolean"==typeof t,h=d||u,g="left"===s?"row":"row-reverse",x=r&&s,E=l((e=>{if("Enter"===e.code||"Space"===e.code){e.preventDefault();const t=e.currentTarget.checked;v&&(e.currentTarget.checked=!t),n&&n(!t,e)}}),[v,n]);return e.createElement("div",{className:p("maxio-toggle",c,{"maxio-toggle--disabled":i}),style:{display:"inline-flex",flexDirection:g},"data-testid":"toggle-container"},x?e.createElement("label",{className:"maxio-toggle__label",htmlFor:h},r):null,e.createElement("div",{className:"maxio-toggle__container"},e.createElement("input",{type:"checkbox",defaultChecked:t,checked:a,onChange:e=>{n&&n(e.target.checked,e)},onKeyDown:E,disabled:i,"aria-label":x?void 0:r,className:"maxio-toggle__checkbox",id:h,name:m}),e.createElement("div",{className:"maxio-toggle__track",role:"switch","aria-checked":a},e.createElement("div",{className:"maxio-toggle__handle"}),e.createElement("span",{className:"maxio-toggle__icon"},e.createElement("i",{className:"maxio-toggle__icon-on"})),e.createElement("span",{className:"maxio-toggle__icon"},e.createElement("i",{className:"maxio-toggle__icon-off"})))))},Y=({children:t,arrowPosition:a,size:n="regular",maxWidth:i=160})=>e.createElement("div",{"data-testid":"tooltip",className:p("maxio-tooltip",`maxio-tooltip--${n}`,{[`maxio-tooltip--arrow-${a}`]:a})},e.createElement("div",{className:"maxio-tooltip__content",style:{maxWidth:i}},t)),j={top:"bottom",right:"left",bottom:"top",left:"right","top-start":"bottom-left","top-end":"bottom-right","right-start":"left-top","right-end":"left-bottom","bottom-start":"top-left","bottom-end":"top-right","left-start":"right-top","left-end":"right-bottom"},K=({children:t,interactions:n=["hover"],placement:i="right",maxWidth:r=160,size:o="regular",renderContent:c,autoHideMs:m,isVisible:d,usePortal:u,className:p,onVisibilityUpdate:v,floatingElementOffset:h=5})=>{const[g,x]=a(!1),E=void 0!==d,_=l((e=>{E||x(e),v&&v(e)}),[d]),b=s((()=>(e=>{const t=e.startsWith("top")||e.startsWith("bottom")?"Y":"X",a=`translate${t}(${e.startsWith("bottom")||e.startsWith("right")?"-":""}10px)`;return{initial:{opacity:0,visibility:"hidden",transform:a},animate:{opacity:1,visibility:"visible",transform:`translate${t}(0px)`},exit:{opacity:0,visibility:"hidden",transform:a},transition:{ease:[.4,0,.5,1],duration:.2}}})(i)),[i]);return e.createElement(L,{role:"tooltip",className:p,floatingElementOffset:h,motionSettings:b,isActive:E?d:g,onOverlayUpdate:_,autoHideMs:m,usePortal:u,placement:i,interactions:n,renderOverlay:()=>e.createElement(Y,{size:o,arrowPosition:j[i],maxWidth:r},c())},t)},X=({children:t,as:a,iconName:n,noPadding:i,className:r,...o})=>{const l=a||"button",s=p("maxio-header-button",r,{"maxio-header-button--no-padding":i});return e.createElement(l,{className:s,...o},e.createElement("div",{className:"maxio-header-button__content"},t||null,n&&e.createElement(C,{variant:n})))},q=({items:t})=>e.createElement("ul",{className:"maxio-header-nav"},t.map((({label:t,id:a,isActive:n,...i})=>e.createElement("li",{className:"maxio-header-nav__item",key:`header-nav-list-item-${a}`},e.createElement("a",{className:p("maxio-header-nav__link",{"maxio-header-nav__link--active":n}),...i},t))))),G=c((({className:t,...a},n)=>e.createElement("div",{className:p("maxio-header-search-field",t)},e.createElement("div",{className:"maxio-header-search-field__button"},e.createElement(C,{variant:"search"})),e.createElement("input",{ref:n,className:"maxio-header-search-field__input",type:"search",placeholder:"Search",name:"search",...a}))));G.displayName="SearchField";const J=c((({options:t,...a},n)=>e.createElement("div",{className:"maxio-header-search-menu",role:"button"},e.createElement("select",{name:"entity",className:"maxio-header-search-menu__select","aria-label":"Select entity",ref:n,...a},t.map((({label:t,value:a})=>e.createElement("option",{key:`${t}-${a}`,value:a},t)))),e.createElement("div",{className:"maxio-header-search-menu__icon"},e.createElement(C,{variant:"chevron-down"})))));J.displayName="SearchMenu";const Q=({options:t,onSubmit:a})=>{const n=i(null),r=i(null);return e.createElement("form",{className:"maxio-header-search-input",onSubmit:function(e){var t,i;e.preventDefault(),a({searchField:(null===(t=n.current)||void 0===t?void 0:t.value)||"",selectField:(null===(i=r.current)||void 0===i?void 0:i.value)||""})}},e.createElement(J,{ref:r,options:t}),e.createElement(G,{ref:n}),e.createElement(X,{type:"submit","aria-label":"Submit search",iconName:"arrow-right"}))},Z=({leadingIcon:t,trailingIcon:a,type:n="menu",children:i,leadingIconClassName:r,isTooltipVisible:o=!1})=>e.createElement(e.Fragment,null,e.createElement(K,{usePortal:!1,isVisible:o,renderContent:()=>i,floatingElementOffset:12},t&&e.createElement("span",{className:"maxio-side-nav__icon"},e.createElement(C,{variant:t,className:r}))),e.createElement("span",{className:`maxio-side-nav__${n}-title`,"data-testid":"maxio-sidebar-section-name"},i),a&&e.createElement("span",{className:"maxio-side-nav__menu-chevron"},e.createElement(C,{variant:a}))),ee=t({}),te=()=>n(ee),ae=({children:t,withIcons:n=!0,sections:i,shouldToggleSidebar:o=!0,topDropdownItems:l,collapseBreakpoint:s=800})=>{const[c,m]=a((()=>!o||("undefined"==typeof window||window.innerWidth>s))),[d,u]=a(i),p=()=>m(!0),v=()=>m(!1),{windowWitdh:h}=A();r((()=>{!function(e){if(!o)return;e<s&&c&&g();e>s&&!c&&x()}(h)}),[h]),r((()=>{c?x():g()}),[]);return e.createElement(ee.Provider,{value:{sections:d,topDropdownItems:l,onSectionOpen:e=>{const t=E();u((a=>a.map((a=>{var n;const i=a.name===e&&!a.isOpen;return t&&(null===(n=a.items)||void 0===n?void 0:n.includes(t))?{...a,isOpen:i,isCurrent:!i}:{...a,isOpen:i}}))))},isOpen:c,onOpen:p,onClose:v,onToggle:()=>m((e=>!e)),withIcons:n}},t);function g(){const e=E();e&&(u((t=>t.map((t=>{var a;return{...t,isOpen:!1,isCurrent:(null===(a=t.items)||void 0===a?void 0:a.includes(e))||!1}})))),v())}function x(){const e=E();e&&(u((t=>t.map((t=>{var a;return{...t,isOpen:(null===(a=t.items)||void 0===a?void 0:a.includes(e))||!1,isCurrent:!1}})))),p())}function E(){return d.map((e=>e.items)).flat().filter((e=>null!=e)).find((e=>e.isCurrent))}},ne=()=>{const{onOpen:t,topDropdownItems:a,isOpen:n}=te(),{mainItem:r,otherItems:o,actions:l}=a,c=i(null),m=V(c),d=e=>({label:e.title,leadingIconName:e.icon,link:{href:e.url}}),u=s((()=>[...o.map(d),o.length>0&&{type:"divider",id:"item-divider"},...l.map(d)].filter((e=>null!=e))),[l,o]),p=o.length+l.length;return e.createElement(e.Fragment,null,0===p?e.createElement("a",{className:"maxio-side-nav__menu-button maxio-side-nav__menu-button--large",href:r.url,onClick:t},e.createElement("span",{className:"maxio-side-nav__menu-title"},r.title)):e.createElement("details",{className:"maxio-action-menu maxio-side-nav--action-menu"},e.createElement("summary",{onClick:t,className:"maxio-side-nav__menu-button maxio-side-nav__menu-button--large","aria-haspopup":"true",ref:c},r.url?e.createElement(e.Fragment,null,e.createElement(Z,{type:"menu",isTooltipVisible:!n&&m,leadingIcon:r.icon,trailingIcon:"chevron-down",leadingIconClassName:"maxio-icon-circle-fill maxio-icon--success"},r.title)):e.createElement(Z,{type:"menu",trailingIcon:"chevron-down"},r.title)),e.createElement(I,{items:u})))},ie=({section:t})=>{const{isOpen:a}=te(),n=i(null),r=V(n);return e.createElement("li",{className:"maxio-side-nav__item","data-key":t.key,"data-testid":"maxio-sidebar-section"},e.createElement("a",{className:"maxio-side-nav__link","aria-current":t.isCurrent?"page":void 0,role:"button",href:t.href,ref:n},e.createElement(Z,{isTooltipVisible:r&&!a,type:"menu",leadingIcon:t.icon},t.name)))},re=({section:t})=>{var a;const{onOpen:n,onSectionOpen:r,isOpen:o,withIcons:l}=te();const s=i(null),c=V(s);return t.Component?e.createElement(t.Component,{section:t}):t.href?e.createElement(ie,{section:t}):e.createElement("li",{className:p("maxio-side-nav__item",{"maxio-side-nav__item--active":t.isCurrent,"maxio-side-nav__item--icon":l}),"data-testid":"maxio-sidebar-section"},e.createElement("button",{className:"maxio-side-nav__menu-button",ref:s,"aria-expanded":t.isOpen,"aria-current":t.isCurrent?"page":void 0,type:"button",onClick:function(){r(t.name),n()}},e.createElement(Z,{type:"menu",isTooltipVisible:!o&&c,leadingIcon:t.icon,trailingIcon:(null===(a=t.items)||void 0===a?void 0:a.length)?"chevron-down":void 0},t.name)),t.isOpen&&e.createElement("ul",{className:"maxio-side-nav__menu"},t.items.map((t=>e.createElement("li",{key:`section-sub-item-${t.name}`,className:"maxio-side-nav__item","data-testid":"maxio-section-item"},e.createElement("a",{className:"maxio-side-nav__link",href:t.href,"aria-current":t.isCurrent?"page":void 0},e.createElement("span",{className:"maxio-side-nav__link-title"},t.name)))))))},oe=()=>{const{sections:t}=te();return e.createElement("ul",{className:"maxio-side-nav__items"},t.map((t=>e.createElement(re,{key:`section-${t.name}`,section:t}))))},le=()=>{const{isOpen:t}=te();return e.createElement("nav",{className:p("maxio-side-nav",{"maxio-side-nav--collapsed":!t})},e.createElement(ne,null),e.createElement("hr",{className:"maxio-side-nav__divider"}),e.createElement(oe,null))},se=({withIcons:t,shouldToggleSidebar:a,topDropdownItems:n,sections:i,collapseBreakpoint:r=800})=>e.createElement(ae,{collapseBreakpoint:r,withIcons:t,shouldToggleSidebar:a,topDropdownItems:n,sections:i},e.createElement(le,null)),ce=({label:t,helperText:a,size:n="md",variant:i="default",status:r,value:o,maxValue:l=100})=>{const s=k(),c=k(),m=r&&!!t&&!!o&&!("inline"===i),d=a&&!("inline"===i),u=a&&"inline"===i,v=p("maxio-progress-bar",{"maxio-progress-bar--lg":"lg"===n,"maxio-progress-bar--success":o&&!("inline"===i)&&"success"===r,"maxio-progress-bar--error":o&&!("inline"===i)&&"error"===r,"maxio-progress-bar--indent":"indent"===i,"maxio-progress-bar--inline":"inline"===i,"maxio-progress-bar--indeterminate":void 0===o});return e.createElement("div",{className:v},t&&e.createElement("div",{id:s,className:"maxio-progress-bar__label"},t),u&&e.createElement("div",{id:c,className:"maxio-progress-bar__helper-text"},a),e.createElement("div",{className:"maxio-progress-bar__track",role:"progressbar","aria-labelledby":s,"aria-describedby":c,"aria-valuenow":o,"aria-valuemin":0,"aria-valuemax":l,"aria-busy":!r,"aria-invalid":"error"===r},e.createElement("div",{className:"maxio-progress-bar__progress",style:{"--tw-scale-x":`${o}%`}})),m&&e.createElement("div",{className:`maxio-progress-bar__${r}-icon`}),d&&e.createElement("div",{id:c,className:"maxio-progress-bar__helper-text"},a))},me=({as:t="div",children:a,compact:n=!1,size:i="md",className:r,...o})=>{const l=t,s=p({[`maxio-body-${i}`]:!n,[`maxio-body-${i}-compact`]:n},r);return e.createElement(l,{className:s,...o},a)},de={sm:"h3",md:"h2",lg:"h1"},ue=({children:t,size:a="sm",className:n,...i})=>{const r=de[a],o=p(`maxio-heading-${a}`,n);return e.createElement(r,{className:o,...i},t)},pe=({as:t="div",children:a,size:n="md",className:i,...r})=>{const o=t,l=p(`maxio-display-${n}`,i);return e.createElement(o,{className:l,...r},a)},ve=({as:t="div",children:a,className:n,...i})=>{const r=t,o=p("maxio-code",n);return e.createElement(r,{className:o,...i},a)},he=({as:t="div",children:a,size:n="sm",className:i,...r})=>{const o=t,l=p(`maxio-label-${n}`,i);return e.createElement(o,{className:l,...r},a)},ge=t({}),xe=()=>n(ge),Ee=({children:t,variant:n,withDivider:i,defaultIndex:o=0,onChange:l,index:s})=>{const[c,m]=a((()=>void 0!==s?s:o));r((()=>{void 0===s&&m(o),"number"==typeof s&&m(s)}),[o,s]);return e.createElement(ge.Provider,{value:{currentIndex:c,variant:n,withDivider:i,onChange:e=>{void 0===s&&m(e),"function"==typeof l&&l(e)}}},t)},_e=({disabled:t=!1,value:a=0,...n})=>{const{onChange:i,currentIndex:r}=xe(),o=p("maxio-tabs__tab",{"maxio-tabs__tab--active":r===a,"maxio-tabs__tab--disabled":t,"maxio-tabs__tab--icon":"icon"===n.type}),l=()=>{i(a)};if("icon"===n.type){const{icon:t}=n;return e.createElement("div",{className:o,onClick:l},e.createElement("div",{className:"maxio-tabs__tab__content"},t))}const{children:s,rightIcon:c}=n;return e.createElement("div",{className:o,onClick:l},e.createElement("div",{className:"maxio-tabs__tab__content"},s,c||null))},be=({children:t,variant:a="line",withDivider:n=!1,defaultIndex:i=0,index:r,onChange:o})=>e.createElement(Ee,{defaultIndex:i,variant:a,withDivider:n,index:r,onChange:o},t),fe=({children:t})=>e.createElement(e.Fragment,null,t),Ne=({children:t})=>{const{currentIndex:a}=xe();return e.createElement(e.Fragment,null,m.map(t,((e,t)=>{if(d(e)&&e.type===fe)return t===a?u(e,{}):null;throw new Error("You can only pass <TabPanel /> component as children")})))},we=({children:t})=>{const{variant:a,withDivider:n}=xe(),i=p("maxio-tabs",{"maxio-tabs--contained":"contained"===a,"maxio-tabs--divider":n});return e.createElement("div",{className:i},m.map(t,((e,t)=>{if(d(e)&&e.type===_e)return u(e,{value:t});throw new Error("You can only pass <Tab /> component as children")})))},ye=({className:t,children:a,disabled:n=!1,external:i=!1,icon:r="arrow-right",noArrow:o=!1,size:l="md",...s})=>{const c=p("maxio-link",{[`maxio-link--${l}`]:!0,"maxio-link--disabled":n},t),m=i?"_blank":"_self";return r=i?"arrow-up-right":r,e.createElement("a",{className:c,target:m,...s},e.createElement("span",{className:"maxio-link__text"},a),!o&&e.createElement(C,{variant:r}))};export{I as ActionList,O as Avatar,me as Body,F as BrandLogo,U as Button,ve as Code,pe as Display,X as HeaderButton,q as HeaderNav,G as HeaderSearchField,Q as HeaderSearchInput,J as HeaderSearchMenu,ue as Heading,C as Icon,B as IconButton,he as Label,ye as Link,P as Menu,W as MenuButton,D as MenuList,L as OverlayTrigger,ce as ProgressBar,se as SideNav,_e as Tab,we as TabList,fe as TabPanel,Ne as TabPanels,be as Tabs,R as Toggle,Y as Tooltip,K as TooltipTrigger,V as useHover,M as useOverlayTrigger,A as useWindowSize};
1
+ import e,{createContext as a,useState as t,useContext as n,useRef as i,useEffect as r,useId as o,useCallback as l,useMemo as s,forwardRef as c,Children as m,isValidElement as d,cloneElement as u}from"react";import p from"classnames";import{AnimatePresence as v,motion as h}from"framer-motion";import{useClick as g,useHover as x,useFocus as E,useDismiss as _,useFloating as b,offset as f,useInteractions as N,useRole as w,FloatingPortal as y}from"@floating-ui/react-dom-interactions";import{useId as k,useRadio as C,useRadioGroup as I}from"react-aria";const O=({variant:a,white:t,className:n})=>e.createElement("i",{className:p("maxio-icon",`maxio-icon-${a}`,t&&"maxio-icon--white",n)}),S=({items:a,isShadowed:t=!0})=>{const n=p("maxio-action-list",{"maxio-action-list--shadow":t});return 0===a.length?null:e.createElement("ul",{className:n},a.map((a=>{if("divider"===a.type)return e.createElement("li",{key:`list-item-divider-${a.id}`,className:"maxio-action-list__divider",role:"separator","aria-hidden":"true"});const{id:t,leadingIconName:n,trailingIconName:i,label:r,description:o,link:l}=a;return e.createElement("li",{className:"maxio-action-list__item",key:`list-item-${t||r}`},e.createElement("a",{...l,className:"maxio-action-list__content"},n&&e.createElement(O,{variant:n,className:"maxio-action-list__leading-icon"}),e.createElement("span",{className:"maxio-action-list__label"},r),o&&e.createElement("span",{className:"maxio-action-list__description"},o),i&&e.createElement(O,{variant:i,className:"maxio-action-list__trailing-icon"})))})))},P=({className:a,src:t,alt:n="avatar"})=>e.createElement("img",{className:p("maxio-avatar",a),alt:n,src:t}),T=a({}),$=({children:a})=>{const[n,i]=t(!1);return e.createElement(T.Provider,{value:{isOpen:n,onClose:()=>i(!1),onOpen:()=>i(!0),onToggle:()=>i((e=>!e))}},a)};const F=({children:a})=>{const{isOpen:t,onToggle:i,onClose:r}=function(){const e=n(T);if(!e||"object"==typeof e&&0===Object.keys(e).length)throw new Error("useMenu hook must be used within a MenuProvider");return e}();return e.createElement("details",{open:t,onToggle:i,className:"maxio-action-menu"},"function"==typeof a?a({isOpen:t,onClose:r}):a)},V=({children:a})=>e.createElement($,null,e.createElement(F,null,a)),D=({items:a,alignItemsEnd:t=!1})=>{const n=p("maxio-action-menu__content",{"maxio-action-menu__content--align-end":t});return e.createElement("div",{className:n},e.createElement(S,{items:a}))},W=({children:a,iconName:t="chevron-down"})=>{const n=p({"maxio-action-menu__chevron":"chevron-down"===t});return e.createElement("summary",{className:"maxio-header-button","aria-haspopup":"true"},e.createElement("div",{className:"maxio-header-button__content"},a&&e.createElement("span",null,a),t&&e.createElement(O,{variant:t,className:n})))},H=({icon:a,variant:t="default"})=>e.createElement("i",{className:p("maxio-brand-logo",`maxio-brand-logo-${a}`,{[`maxio-brand-logo--${t}`]:"default"!==t})}),z={click:g,hover:x,focus:E,dismiss:_},L=(e,a)=>a.map((a=>z[a](e))),M=({placement:e="top",isActive:a=!1,interactions:t=["hover"],floatingElementOffset:n=0,onOverlayUpdate:o,autoHideMs:l})=>{const s=i(null),{strategy:c,x:m,y:d,context:u,floating:p,reference:v}=b({placement:e,open:a,onOpenChange:e=>o(e),middleware:[f(n)]}),{getReferenceProps:h,getFloatingProps:g}=N([...L(u,t),w(u,{role:"tooltip"})]);r((()=>{s.current&&clearTimeout(s.current),a&&l&&(s.current=setTimeout((()=>o(!1)),l))}),[a,l]);return{isActive:a,refs:{floating:p,reference:v},floatingElementCSSPosition:{position:c,top:null!=d?d:0,left:null!=m?m:0},getReferenceProps:h,getFloatingProps:g}};function R(e,a=0){const n=i((new Date).getTime()),o=i((new Date).getTime()),[l,s]=t(!1);return r((()=>{const t=()=>{n.current=(new Date).getTime(),s(!0)},i=()=>{o.current=(new Date).getTime(),setTimeout((()=>{n.current-o.current<=0&&s(!1)}),a)},r=e&&e.current;return r&&(r.addEventListener("mouseenter",t),r.addEventListener("mouseleave",i)),()=>{r&&(r.removeEventListener("mouseenter",t),r.removeEventListener("mouseleave",i))}}),[e]),l}function A(e=500){const[a,n]=t((()=>{const{innerWidth:e,innerHeight:a}=window;return{windowWitdh:e,windowHeight:a}})),o=i(null);return r((()=>{const a=()=>{const{innerWidth:a,innerHeight:t}=window;clearTimeout(o.current),o.current=setTimeout((()=>{n({windowWitdh:a,windowHeight:t})}),e)};return window.addEventListener("resize",a),()=>{window.removeEventListener("resize",a)}}),[e]),a}const U=({children:a,usePortal:t=!1,isActive:n=!1,placement:i="top",interactions:r=["hover"],role:o="tooltip",renderOverlay:l,floatingElementOffset:s,motionSettings:c={},autoHideMs:m,onOverlayUpdate:d,className:u})=>{const{getReferenceProps:g,getFloatingProps:x,refs:{floating:E,reference:_},floatingElementCSSPosition:b}=M({role:o,isActive:n,onOverlayUpdate:d,autoHideMs:m,floatingElementOffset:s,interactions:r,placement:i}),f=e.createElement(v,null,n&&e.createElement(h.div,{ref:E,style:b,...c,...x()},l()));return e.createElement(e.Fragment,null,e.createElement("div",{ref:_,className:p("maxio-inline-flex",u),...g(),"data-testid":"overlay-trigger"},a),t?e.createElement(y,{id:"maxio-ui-portal"},f):f)},B=({children:a,loading:t=!1,fullWidth:n=!1,className:i,variant:r="primary",size:o="lg",disabled:l,icon:s,...c})=>{const m=p("maxio-button",i,{[`maxio-button--${o}`]:o,[`maxio-button--${r}`]:r,"maxio-button--loading":t,"maxio-button--full-width":n}),d=p("maxio-button__loader",{"maxio-button__loader--white":["primary","secondary","danger"].includes(r)});return e.createElement("button",{disabled:l,...c,className:m},a,!t&&s,t&&e.createElement("div",{className:d}))},Y=({icon:a,...t})=>e.createElement(B,{icon:a,className:"maxio-button--icon",...t},null),j=({defaultChecked:a,checked:t,onChange:n,disabled:i,valueDescription:r,valueDescriptionPosition:s,className:c,name:m,id:d})=>{const u=o(),v="boolean"==typeof a,h=d||u,g="left"===s?"row":"row-reverse",x=r&&s,E=l((e=>{if("Enter"===e.code||"Space"===e.code){e.preventDefault();const a=e.currentTarget.checked;v&&(e.currentTarget.checked=!a),n&&n(!a,e)}}),[v,n]);return e.createElement("div",{className:p("maxio-toggle",c,{"maxio-toggle--disabled":i}),style:{display:"inline-flex",flexDirection:g},"data-testid":"toggle-container"},x?e.createElement("label",{className:"maxio-toggle__label",htmlFor:h},r):null,e.createElement("div",{className:"maxio-toggle__container"},e.createElement("input",{type:"checkbox",defaultChecked:a,checked:t,onChange:e=>{n&&n(e.target.checked,e)},onKeyDown:E,disabled:i,"aria-label":x?void 0:r,className:"maxio-toggle__checkbox",id:h,name:m}),e.createElement("div",{className:"maxio-toggle__track",role:"switch","aria-checked":t},e.createElement("div",{className:"maxio-toggle__handle"}),e.createElement("span",{className:"maxio-toggle__icon"},e.createElement("i",{className:"maxio-toggle__icon-on"})),e.createElement("span",{className:"maxio-toggle__icon"},e.createElement("i",{className:"maxio-toggle__icon-off"})))))},q=({children:a,arrowPosition:t,size:n="regular",maxWidth:i=160})=>e.createElement("div",{"data-testid":"tooltip",className:p("maxio-tooltip",`maxio-tooltip--${n}`,{[`maxio-tooltip--arrow-${t}`]:t})},e.createElement("div",{className:"maxio-tooltip__content",style:{maxWidth:i}},a)),G={top:"bottom",right:"left",bottom:"top",left:"right","top-start":"bottom-left","top-end":"bottom-right","right-start":"left-top","right-end":"left-bottom","bottom-start":"top-left","bottom-end":"top-right","left-start":"right-top","left-end":"right-bottom"},K=({children:a,interactions:n=["hover"],placement:i="right",maxWidth:r=160,size:o="regular",renderContent:c,autoHideMs:m,isVisible:d,usePortal:u,className:p,onVisibilityUpdate:v,floatingElementOffset:h=5})=>{const[g,x]=t(!1),E=void 0!==d,_=l((e=>{E||x(e),v&&v(e)}),[d]),b=s((()=>(e=>{const a=e.startsWith("top")||e.startsWith("bottom")?"Y":"X",t=`translate${a}(${e.startsWith("bottom")||e.startsWith("right")?"-":""}10px)`;return{initial:{opacity:0,visibility:"hidden",transform:t},animate:{opacity:1,visibility:"visible",transform:`translate${a}(0px)`},exit:{opacity:0,visibility:"hidden",transform:t},transition:{ease:[.4,0,.5,1],duration:.2}}})(i)),[i]);return e.createElement(U,{role:"tooltip",className:p,floatingElementOffset:h,motionSettings:b,isActive:E?d:g,onOverlayUpdate:_,autoHideMs:m,usePortal:u,placement:i,interactions:n,renderOverlay:()=>e.createElement(q,{size:o,arrowPosition:G[i],maxWidth:r},c())},a)},X=({children:a,as:t,iconName:n,noPadding:i,className:r,...o})=>{const l=t||"button",s=p("maxio-header-button",r,{"maxio-header-button--no-padding":i});return e.createElement(l,{className:s,...o},e.createElement("div",{className:"maxio-header-button__content"},a||null,n&&e.createElement(O,{variant:n})))},J=({items:a})=>e.createElement("ul",{className:"maxio-header-nav"},a.map((({label:a,id:t,isActive:n,...i})=>e.createElement("li",{className:"maxio-header-nav__item",key:`header-nav-list-item-${t}`},e.createElement("a",{className:p("maxio-header-nav__link",{"maxio-header-nav__link--active":n}),...i},a))))),Q=c((({className:a,...t},n)=>e.createElement("div",{className:p("maxio-header-search-field",a)},e.createElement("div",{className:"maxio-header-search-field__button"},e.createElement(O,{variant:"search"})),e.createElement("input",{ref:n,className:"maxio-header-search-field__input",type:"search",placeholder:"Search",name:"search",...t}))));Q.displayName="SearchField";const Z=c((({options:a,...t},n)=>e.createElement("div",{className:"maxio-header-search-menu",role:"button"},e.createElement("select",{name:"entity",className:"maxio-header-search-menu__select","aria-label":"Select entity",ref:n,...t},a.map((({label:a,value:t})=>e.createElement("option",{key:`${a}-${t}`,value:t},a)))),e.createElement("div",{className:"maxio-header-search-menu__icon"},e.createElement(O,{variant:"chevron-down"})))));Z.displayName="SearchMenu";const ee=({options:a,onSubmit:t})=>{const n=i(null),r=i(null);return e.createElement("form",{className:"maxio-header-search-input",onSubmit:function(e){var a,i;e.preventDefault(),t({searchField:(null===(a=n.current)||void 0===a?void 0:a.value)||"",selectField:(null===(i=r.current)||void 0===i?void 0:i.value)||""})}},e.createElement(Z,{ref:r,options:a}),e.createElement(Q,{ref:n}),e.createElement(X,{type:"submit","aria-label":"Submit search",iconName:"arrow-right"}))},ae=({leadingIcon:a,trailingIcon:t,type:n="menu",children:i,leadingIconClassName:r,isTooltipVisible:o=!1})=>e.createElement(e.Fragment,null,e.createElement(K,{usePortal:!1,isVisible:o,renderContent:()=>i,floatingElementOffset:12},a&&e.createElement("span",{className:"maxio-side-nav__icon"},e.createElement(O,{variant:a,className:r}))),e.createElement("span",{className:`maxio-side-nav__${n}-title`,"data-testid":"maxio-sidebar-section-name"},i),t&&e.createElement("span",{className:"maxio-side-nav__menu-chevron"},e.createElement(O,{variant:t}))),te=a({}),ne=()=>n(te),ie=({children:a,withIcons:n=!0,sections:i,shouldToggleSidebar:o=!0,topDropdownItems:l,collapseBreakpoint:s=800})=>{const[c,m]=t((()=>!o||("undefined"==typeof window||window.innerWidth>s))),[d,u]=t(i),p=()=>m(!0),v=()=>m(!1),{windowWitdh:h}=A();r((()=>{!function(e){if(!o)return;e<s&&c&&g();e>s&&!c&&x()}(h)}),[h]),r((()=>{c?x():g()}),[]);return e.createElement(te.Provider,{value:{sections:d,topDropdownItems:l,onSectionOpen:e=>{const a=E();u((t=>t.map((t=>{var n;const i=t.name===e&&!t.isOpen;return a&&(null===(n=t.items)||void 0===n?void 0:n.includes(a))?{...t,isOpen:i,isCurrent:!i}:{...t,isOpen:i}}))))},isOpen:c,onOpen:p,onClose:v,onToggle:()=>m((e=>!e)),withIcons:n}},a);function g(){const e=E();e&&(u((a=>a.map((a=>{var t;return{...a,isOpen:!1,isCurrent:(null===(t=a.items)||void 0===t?void 0:t.includes(e))||!1}})))),v())}function x(){const e=E();e&&(u((a=>a.map((a=>{var t;return{...a,isOpen:(null===(t=a.items)||void 0===t?void 0:t.includes(e))||!1,isCurrent:!1}})))),p())}function E(){return d.map((e=>e.items)).flat().filter((e=>null!=e)).find((e=>e.isCurrent))}},re=()=>{const{onOpen:a,topDropdownItems:t,isOpen:n}=ne(),{mainItem:r,otherItems:o,actions:l}=t,c=i(null),m=R(c),d=e=>({label:e.title,leadingIconName:e.icon,link:{href:e.url}}),u=s((()=>[...o.map(d),o.length>0&&{type:"divider",id:"item-divider"},...l.map(d)].filter((e=>null!=e))),[l,o]),p=o.length+l.length;return e.createElement(e.Fragment,null,0===p?e.createElement("a",{className:"maxio-side-nav__menu-button maxio-side-nav__menu-button--large",href:r.url,onClick:a},e.createElement("span",{className:"maxio-side-nav__menu-title"},r.title)):e.createElement("details",{className:"maxio-action-menu maxio-side-nav--action-menu"},e.createElement("summary",{onClick:a,className:"maxio-side-nav__menu-button maxio-side-nav__menu-button--large","aria-haspopup":"true",ref:c},r.url?e.createElement(e.Fragment,null,e.createElement(ae,{type:"menu",isTooltipVisible:!n&&m,leadingIcon:r.icon,trailingIcon:"chevron-down",leadingIconClassName:"maxio-icon-circle-fill maxio-icon--success"},r.title)):e.createElement(ae,{type:"menu",trailingIcon:"chevron-down"},r.title)),e.createElement(S,{items:u})))},oe=({section:a})=>{const{isOpen:t}=ne(),n=i(null),r=R(n);return e.createElement("li",{className:"maxio-side-nav__item","data-key":a.key,"data-testid":"maxio-sidebar-section"},e.createElement("a",{className:"maxio-side-nav__link","aria-current":a.isCurrent?"page":void 0,role:"button",href:a.href,ref:n},e.createElement(ae,{isTooltipVisible:r&&!t,type:"menu",leadingIcon:a.icon},a.name)))},le=({section:a})=>{var t;const{onOpen:n,onSectionOpen:r,isOpen:o,withIcons:l}=ne();const s=i(null),c=R(s);return a.Component?e.createElement(a.Component,{section:a}):a.href?e.createElement(oe,{section:a}):e.createElement("li",{className:p("maxio-side-nav__item",{"maxio-side-nav__item--active":a.isCurrent,"maxio-side-nav__item--icon":l}),"data-testid":"maxio-sidebar-section"},e.createElement("button",{className:"maxio-side-nav__menu-button",ref:s,"aria-expanded":a.isOpen,"aria-current":a.isCurrent?"page":void 0,type:"button",onClick:function(){r(a.name),n()}},e.createElement(ae,{type:"menu",isTooltipVisible:!o&&c,leadingIcon:a.icon,trailingIcon:(null===(t=a.items)||void 0===t?void 0:t.length)?"chevron-down":void 0},a.name)),a.isOpen&&e.createElement("ul",{className:"maxio-side-nav__menu"},a.items.map((a=>e.createElement("li",{key:`section-sub-item-${a.name}`,className:"maxio-side-nav__item","data-testid":"maxio-section-item"},e.createElement("a",{className:"maxio-side-nav__link",href:a.href,"aria-current":a.isCurrent?"page":void 0},e.createElement("span",{className:"maxio-side-nav__link-title"},a.name)))))))},se=()=>{const{sections:a}=ne();return e.createElement("ul",{className:"maxio-side-nav__items"},a.map((a=>e.createElement(le,{key:`section-${a.name}`,section:a}))))},ce=()=>{const{isOpen:a}=ne();return e.createElement("nav",{className:p("maxio-side-nav",{"maxio-side-nav--collapsed":!a})},e.createElement(re,null),e.createElement("hr",{className:"maxio-side-nav__divider"}),e.createElement(se,null))},me=({withIcons:a,shouldToggleSidebar:t,topDropdownItems:n,sections:i,collapseBreakpoint:r=800})=>e.createElement(ie,{collapseBreakpoint:r,withIcons:a,shouldToggleSidebar:t,topDropdownItems:n,sections:i},e.createElement(ce,null)),de=({label:a,helperText:t,size:n="md",variant:i="default",status:r,value:o,maxValue:l=100})=>{const s=k(),c=k(),m=r&&!!a&&!!o&&!("inline"===i),d=t&&!("inline"===i),u=t&&"inline"===i,v=p("maxio-progress-bar",{"maxio-progress-bar--lg":"lg"===n,"maxio-progress-bar--success":o&&!("inline"===i)&&"success"===r,"maxio-progress-bar--error":o&&!("inline"===i)&&"error"===r,"maxio-progress-bar--indent":"indent"===i,"maxio-progress-bar--inline":"inline"===i,"maxio-progress-bar--indeterminate":void 0===o});return e.createElement("div",{className:v},a&&e.createElement("div",{id:s,className:"maxio-progress-bar__label"},a),u&&e.createElement("div",{id:c,className:"maxio-progress-bar__helper-text"},t),e.createElement("div",{className:"maxio-progress-bar__track",role:"progressbar","aria-labelledby":s,"aria-describedby":c,"aria-valuenow":o,"aria-valuemin":0,"aria-valuemax":l,"aria-busy":!r,"aria-invalid":"error"===r},e.createElement("div",{className:"maxio-progress-bar__progress",style:{"--tw-scale-x":`${o}%`}})),m&&e.createElement("div",{className:`maxio-progress-bar__${r}-icon`}),d&&e.createElement("div",{id:c,className:"maxio-progress-bar__helper-text"},t))},ue=({as:a="div",children:t,compact:n=!1,size:i="md",className:r,...o})=>{const l=a,s=p({[`maxio-body-${i}`]:!n,[`maxio-body-${i}-compact`]:n},r);return e.createElement(l,{className:s,...o},t)},pe={sm:"h3",md:"h2",lg:"h1"},ve=({children:a,size:t="sm",className:n,...i})=>{const r=pe[t],o=p(`maxio-heading-${t}`,n);return e.createElement(r,{className:o,...i},a)},he=({as:a="div",children:t,size:n="md",className:i,...r})=>{const o=a,l=p(`maxio-display-${n}`,i);return e.createElement(o,{className:l,...r},t)},ge=({as:a="div",children:t,className:n,...i})=>{const r=a,o=p("maxio-code",n);return e.createElement(r,{className:o,...i},t)},xe=({as:a="div",children:t,size:n="sm",className:i,...r})=>{const o=a,l=p(`maxio-label-${n}`,i);return e.createElement(o,{className:l,...r},t)},Ee=a({}),_e=()=>n(Ee),be=({children:a,variant:n,withDivider:i,defaultIndex:o=0,onChange:l,index:s})=>{const[c,m]=t((()=>void 0!==s?s:o));r((()=>{void 0===s&&m(o),"number"==typeof s&&m(s)}),[o,s]);return e.createElement(Ee.Provider,{value:{currentIndex:c,variant:n,withDivider:i,onChange:e=>{void 0===s&&m(e),"function"==typeof l&&l(e)}}},a)},fe=({disabled:a=!1,value:t=0,...n})=>{const{onChange:i,currentIndex:r}=_e(),o=p("maxio-tabs__tab",{"maxio-tabs__tab--active":r===t,"maxio-tabs__tab--disabled":a,"maxio-tabs__tab--icon":"icon"===n.type}),l=()=>{i(t)};if("icon"===n.type){const{icon:a}=n;return e.createElement("div",{className:o,onClick:l},e.createElement("div",{className:"maxio-tabs__tab__content"},a))}const{children:s,rightIcon:c}=n;return e.createElement("div",{className:o,onClick:l},e.createElement("div",{className:"maxio-tabs__tab__content"},s,c||null))},Ne=({children:a,variant:t="line",withDivider:n=!1,defaultIndex:i=0,index:r,onChange:o})=>e.createElement(be,{defaultIndex:i,variant:t,withDivider:n,index:r,onChange:o},a),we=({children:a})=>e.createElement(e.Fragment,null,a),ye=({children:a})=>{const{currentIndex:t}=_e();return e.createElement(e.Fragment,null,m.map(a,((e,a)=>{if(d(e)&&e.type===we)return a===t?u(e,{}):null;throw new Error("You can only pass <TabPanel /> component as children")})))},ke=({children:a})=>{const{variant:t,withDivider:n}=_e(),i=p("maxio-tabs",{"maxio-tabs--contained":"contained"===t,"maxio-tabs--divider":n});return e.createElement("div",{className:i},m.map(a,((e,a)=>{if(d(e)&&e.type===fe)return u(e,{value:a});throw new Error("You can only pass <Tab /> component as children")})))},Ce=({className:a,children:t,disabled:n=!1,external:i=!1,icon:r="arrow-right",noArrow:o=!1,size:l="md",...s})=>{const c=p("maxio-link",{[`maxio-link--${l}`]:!0,"maxio-link--disabled":n},a),m=i?"_blank":"_self";return r=i?"arrow-up-right":r,e.createElement("a",{className:c,target:m,...s},e.createElement("span",{className:"maxio-link__text"},t),!o&&e.createElement(O,{variant:r}))},Ie=a({}),Oe=()=>n(Ie),Se=({children:a,onChange:n,value:i,defaultValue:o="",name:l,indent:s,disabled:c})=>{const[m,d]=t(o),[u,p]=t(null);r((()=>{d(i)}),[i]);return e.createElement(Ie.Provider,{value:{onChange:e=>{d(e),n&&n(e)},name:l,value:m,indent:s,disabled:c,lastFocusedValue:u,setLastFocusedValue:p}},a)},Pe=({indent:a=!1,disabled:t=!1,invalid:n=!1,label:r,...o})=>{const l=i(null),{disabled:s,indent:c,invalid:m,name:d,onChange:u,value:v,setLastFocusedValue:h=(()=>{}),lastFocusedValue:g=null}=Oe(),x=!!d,E=m||n,_=s||t,b=p("maxio-radio",{"maxio-radio--indent":c||a,"maxio-radio--disabled":_,"maxio-radio--error":E}),{inputProps:f}=C({...o,children:r,value:(o.value||"").toString()},{isDisabled:_,isReadOnly:_,isRequired:!1,name:d,validationState:E?"invalid":"valid",isInvalid:E,selectedValue:v,setSelectedValue:u,setLastFocusedValue:h,lastFocusedValue:g},l);return e.createElement("label",{className:b},e.createElement("input",{ref:l,type:"radio",className:"maxio-radio__input",...x?f:o}),e.createElement("span",{className:"maxio-radio__control",tabIndex:0}),e.createElement("span",{className:"maxio-radio__label"},r))},Te=({children:a,className:t,...n})=>e.createElement("div",{className:p("maxio-form-error",t),...n},e.createElement("i",{className:"maxio-form-error__icon"}),e.createElement("div",{className:"maxio-form-error__text"},a)),$e=({children:a,className:t,...n})=>e.createElement("div",{className:p("maxio-form-helper-text",t),...n},a),Fe=({children:a,label:t,errorMessage:n,helperText:i,disabled:r=!1,invalid:o=!1})=>{const{name:l,onChange:s,value:c,lastFocusedValue:m,setLastFocusedValue:d}=Oe(),{radioGroupProps:u,labelProps:p,descriptionProps:v,errorMessageProps:h}=I({name:l,label:t},{name:l,validationState:o?"invalid":"valid",isDisabled:r,isInvalid:o,isReadOnly:r,isRequired:!1,selectedValue:c,lastFocusedValue:m,setLastFocusedValue:d,setSelectedValue:s});return e.createElement(e.Fragment,null,e.createElement("div",{className:"maxio-radio-group",...u},t&&e.createElement("label",{className:"maxio-radio-group__label",...p},t),a,n&&o&&e.createElement(Te,{...h},n),i&&!n&&e.createElement($e,{...v},i)))},Ve=a=>e.createElement(Se,{...a},e.createElement(Fe,{...a},a.children));export{S as ActionList,P as Avatar,ue as Body,H as BrandLogo,B as Button,ge as Code,he as Display,Te as FormErrorMessage,$e as FormHelperText,X as HeaderButton,J as HeaderNav,Q as HeaderSearchField,ee as HeaderSearchInput,Z as HeaderSearchMenu,ve as Heading,O as Icon,Y as IconButton,xe as Label,Ce as Link,V as Menu,W as MenuButton,D as MenuList,U as OverlayTrigger,de as ProgressBar,Pe as Radio,Ve as RadioGroup,me as SideNav,fe as Tab,ke as TabList,we as TabPanel,ye as TabPanels,Ne as Tabs,j as Toggle,q as Tooltip,K as TooltipTrigger,R as useHover,M as useOverlayTrigger,A as useWindowSize};
package/dist/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var e=require("react"),t=require("classnames"),a=require("framer-motion"),n=require("@floating-ui/react-dom-interactions"),i=require("react-aria");const r=({variant:a,white:n,className:i})=>e.createElement("i",{className:t("maxio-icon",`maxio-icon-${a}`,n&&"maxio-icon--white",i)}),o=({items:a,isShadowed:n=!0})=>{const i=t("maxio-action-list",{"maxio-action-list--shadow":n});return 0===a.length?null:e.createElement("ul",{className:i},a.map((t=>{if("divider"===t.type)return e.createElement("li",{key:`list-item-divider-${t.id}`,className:"maxio-action-list__divider",role:"separator","aria-hidden":"true"});const{id:a,leadingIconName:n,trailingIconName:i,label:o,description:s,link:l}=t;return e.createElement("li",{className:"maxio-action-list__item",key:`list-item-${a||o}`},e.createElement("a",{...l,className:"maxio-action-list__content"},n&&e.createElement(r,{variant:n,className:"maxio-action-list__leading-icon"}),e.createElement("span",{className:"maxio-action-list__label"},o),s&&e.createElement("span",{className:"maxio-action-list__description"},s),i&&e.createElement(r,{variant:i,className:"maxio-action-list__trailing-icon"})))})))},s=e.createContext({}),l=({children:t})=>{const[a,n]=e.useState(!1);return e.createElement(s.Provider,{value:{isOpen:a,onClose:()=>n(!1),onOpen:()=>n(!0),onToggle:()=>n((e=>!e))}},t)};const c=({children:t})=>{const{isOpen:a,onToggle:n,onClose:i}=function(){const t=e.useContext(s);if(!t||"object"==typeof t&&0===Object.keys(t).length)throw new Error("useMenu hook must be used within a MenuProvider");return t}();return e.createElement("details",{open:a,onToggle:n,className:"maxio-action-menu"},"function"==typeof t?t({isOpen:a,onClose:i}):t)},m={click:n.useClick,hover:n.useHover,focus:n.useFocus,dismiss:n.useDismiss},d=(e,t)=>t.map((t=>m[t](e))),u=({placement:t="top",isActive:a=!1,interactions:i=["hover"],floatingElementOffset:r=0,onOverlayUpdate:o,autoHideMs:s})=>{const l=e.useRef(null),{strategy:c,x:m,y:u,context:p,floating:x,reference:v}=n.useFloating({placement:t,open:a,onOpenChange:e=>o(e),middleware:[n.offset(r)]}),{getReferenceProps:h,getFloatingProps:g}=n.useInteractions([...d(p,i),n.useRole(p,{role:"tooltip"})]);e.useEffect((()=>{l.current&&clearTimeout(l.current),a&&s&&(l.current=setTimeout((()=>o(!1)),s))}),[a,s]);return{isActive:a,refs:{floating:x,reference:v},floatingElementCSSPosition:{position:c,top:null!=u?u:0,left:null!=m?m:0},getReferenceProps:h,getFloatingProps:g}};function p(t,a=0){const n=e.useRef((new Date).getTime()),i=e.useRef((new Date).getTime()),[r,o]=e.useState(!1);return e.useEffect((()=>{const e=()=>{n.current=(new Date).getTime(),o(!0)},r=()=>{i.current=(new Date).getTime(),setTimeout((()=>{n.current-i.current<=0&&o(!1)}),a)},s=t&&t.current;return s&&(s.addEventListener("mouseenter",e),s.addEventListener("mouseleave",r)),()=>{s&&(s.removeEventListener("mouseenter",e),s.removeEventListener("mouseleave",r))}}),[t]),r}function x(t=500){const[a,n]=e.useState((()=>{const{innerWidth:e,innerHeight:t}=window;return{windowWitdh:e,windowHeight:t}})),i=e.useRef(null);return e.useEffect((()=>{const e=()=>{const{innerWidth:e,innerHeight:a}=window;clearTimeout(i.current),i.current=setTimeout((()=>{n({windowWitdh:e,windowHeight:a})}),t)};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[t]),a}const v=({children:i,usePortal:r=!1,isActive:o=!1,placement:s="top",interactions:l=["hover"],role:c="tooltip",renderOverlay:m,floatingElementOffset:d,motionSettings:p={},autoHideMs:x,onOverlayUpdate:v,className:h})=>{const{getReferenceProps:g,getFloatingProps:E,refs:{floating:f,reference:b},floatingElementCSSPosition:_}=u({role:c,isActive:o,onOverlayUpdate:v,autoHideMs:x,floatingElementOffset:d,interactions:l,placement:s}),N=e.createElement(a.AnimatePresence,null,o&&e.createElement(a.motion.div,{ref:f,style:_,...p,...E()},m()));return e.createElement(e.Fragment,null,e.createElement("div",{ref:b,className:t("maxio-inline-flex",h),...g(),"data-testid":"overlay-trigger"},i),r?e.createElement(n.FloatingPortal,{id:"maxio-ui-portal"},N):N)},h=({children:a,loading:n=!1,fullWidth:i=!1,className:r,variant:o="primary",size:s="lg",disabled:l,icon:c,...m})=>{const d=t("maxio-button",r,{[`maxio-button--${s}`]:s,[`maxio-button--${o}`]:o,"maxio-button--loading":n,"maxio-button--full-width":i}),u=t("maxio-button__loader",{"maxio-button__loader--white":["primary","secondary","danger"].includes(o)});return e.createElement("button",{disabled:l,...m,className:d},a,!n&&c,n&&e.createElement("div",{className:u}))},g=({children:a,arrowPosition:n,size:i="regular",maxWidth:r=160})=>e.createElement("div",{"data-testid":"tooltip",className:t("maxio-tooltip",`maxio-tooltip--${i}`,{[`maxio-tooltip--arrow-${n}`]:n})},e.createElement("div",{className:"maxio-tooltip__content",style:{maxWidth:r}},a)),E={top:"bottom",right:"left",bottom:"top",left:"right","top-start":"bottom-left","top-end":"bottom-right","right-start":"left-top","right-end":"left-bottom","bottom-start":"top-left","bottom-end":"top-right","left-start":"right-top","left-end":"right-bottom"},f=({children:t,interactions:a=["hover"],placement:n="right",maxWidth:i=160,size:r="regular",renderContent:o,autoHideMs:s,isVisible:l,usePortal:c,className:m,onVisibilityUpdate:d,floatingElementOffset:u=5})=>{const[p,x]=e.useState(!1),h=void 0!==l,f=e.useCallback((e=>{h||x(e),d&&d(e)}),[l]),b=e.useMemo((()=>(e=>{const t=e.startsWith("top")||e.startsWith("bottom")?"Y":"X",a=`translate${t}(${e.startsWith("bottom")||e.startsWith("right")?"-":""}10px)`;return{initial:{opacity:0,visibility:"hidden",transform:a},animate:{opacity:1,visibility:"visible",transform:`translate${t}(0px)`},exit:{opacity:0,visibility:"hidden",transform:a},transition:{ease:[.4,0,.5,1],duration:.2}}})(n)),[n]);return e.createElement(v,{role:"tooltip",className:m,floatingElementOffset:u,motionSettings:b,isActive:h?l:p,onOverlayUpdate:f,autoHideMs:s,usePortal:c,placement:n,interactions:a,renderOverlay:()=>e.createElement(g,{size:r,arrowPosition:E[n],maxWidth:i},o())},t)},b=({children:a,as:n,iconName:i,noPadding:o,className:s,...l})=>{const c=n||"button",m=t("maxio-header-button",s,{"maxio-header-button--no-padding":o});return e.createElement(c,{className:m,...l},e.createElement("div",{className:"maxio-header-button__content"},a||null,i&&e.createElement(r,{variant:i})))},_=e.forwardRef((({className:a,...n},i)=>e.createElement("div",{className:t("maxio-header-search-field",a)},e.createElement("div",{className:"maxio-header-search-field__button"},e.createElement(r,{variant:"search"})),e.createElement("input",{ref:i,className:"maxio-header-search-field__input",type:"search",placeholder:"Search",name:"search",...n}))));_.displayName="SearchField";const N=e.forwardRef((({options:t,...a},n)=>e.createElement("div",{className:"maxio-header-search-menu",role:"button"},e.createElement("select",{name:"entity",className:"maxio-header-search-menu__select","aria-label":"Select entity",ref:n,...a},t.map((({label:t,value:a})=>e.createElement("option",{key:`${t}-${a}`,value:a},t)))),e.createElement("div",{className:"maxio-header-search-menu__icon"},e.createElement(r,{variant:"chevron-down"})))));N.displayName="SearchMenu";const w=({leadingIcon:t,trailingIcon:a,type:n="menu",children:i,leadingIconClassName:o,isTooltipVisible:s=!1})=>e.createElement(e.Fragment,null,e.createElement(f,{usePortal:!1,isVisible:s,renderContent:()=>i,floatingElementOffset:12},t&&e.createElement("span",{className:"maxio-side-nav__icon"},e.createElement(r,{variant:t,className:o}))),e.createElement("span",{className:`maxio-side-nav__${n}-title`,"data-testid":"maxio-sidebar-section-name"},i),a&&e.createElement("span",{className:"maxio-side-nav__menu-chevron"},e.createElement(r,{variant:a}))),y=e.createContext({}),k=()=>e.useContext(y),C=({children:t,withIcons:a=!0,sections:n,shouldToggleSidebar:i=!0,topDropdownItems:r,collapseBreakpoint:o=800})=>{const[s,l]=e.useState((()=>!i||("undefined"==typeof window||window.innerWidth>o))),[c,m]=e.useState(n),d=()=>l(!0),u=()=>l(!1),{windowWitdh:p}=x();e.useEffect((()=>{!function(e){if(!i)return;e<o&&s&&v();e>o&&!s&&h()}(p)}),[p]),e.useEffect((()=>{s?h():v()}),[]);return e.createElement(y.Provider,{value:{sections:c,topDropdownItems:r,onSectionOpen:e=>{const t=g();m((a=>a.map((a=>{var n;const i=a.name===e&&!a.isOpen;return t&&(null===(n=a.items)||void 0===n?void 0:n.includes(t))?{...a,isOpen:i,isCurrent:!i}:{...a,isOpen:i}}))))},isOpen:s,onOpen:d,onClose:u,onToggle:()=>l((e=>!e)),withIcons:a}},t);function v(){const e=g();e&&(m((t=>t.map((t=>{var a;return{...t,isOpen:!1,isCurrent:(null===(a=t.items)||void 0===a?void 0:a.includes(e))||!1}})))),u())}function h(){const e=g();e&&(m((t=>t.map((t=>{var a;return{...t,isOpen:(null===(a=t.items)||void 0===a?void 0:a.includes(e))||!1,isCurrent:!1}})))),d())}function g(){return c.map((e=>e.items)).flat().filter((e=>null!=e)).find((e=>e.isCurrent))}},I=()=>{const{onOpen:t,topDropdownItems:a,isOpen:n}=k(),{mainItem:i,otherItems:r,actions:s}=a,l=e.useRef(null),c=p(l),m=e=>({label:e.title,leadingIconName:e.icon,link:{href:e.url}}),d=e.useMemo((()=>[...r.map(m),r.length>0&&{type:"divider",id:"item-divider"},...s.map(m)].filter((e=>null!=e))),[s,r]),u=r.length+s.length;return e.createElement(e.Fragment,null,0===u?e.createElement("a",{className:"maxio-side-nav__menu-button maxio-side-nav__menu-button--large",href:i.url,onClick:t},e.createElement("span",{className:"maxio-side-nav__menu-title"},i.title)):e.createElement("details",{className:"maxio-action-menu maxio-side-nav--action-menu"},e.createElement("summary",{onClick:t,className:"maxio-side-nav__menu-button maxio-side-nav__menu-button--large","aria-haspopup":"true",ref:l},i.url?e.createElement(e.Fragment,null,e.createElement(w,{type:"menu",isTooltipVisible:!n&&c,leadingIcon:i.icon,trailingIcon:"chevron-down",leadingIconClassName:"maxio-icon-circle-fill maxio-icon--success"},i.title)):e.createElement(w,{type:"menu",trailingIcon:"chevron-down"},i.title)),e.createElement(o,{items:d})))},O=({section:t})=>{const{isOpen:a}=k(),n=e.useRef(null),i=p(n);return e.createElement("li",{className:"maxio-side-nav__item","data-key":t.key,"data-testid":"maxio-sidebar-section"},e.createElement("a",{className:"maxio-side-nav__link","aria-current":t.isCurrent?"page":void 0,role:"button",href:t.href,ref:n},e.createElement(w,{isTooltipVisible:i&&!a,type:"menu",leadingIcon:t.icon},t.name)))},T=({section:a})=>{var n;const{onOpen:i,onSectionOpen:r,isOpen:o,withIcons:s}=k();const l=e.useRef(null),c=p(l);return a.Component?e.createElement(a.Component,{section:a}):a.href?e.createElement(O,{section:a}):e.createElement("li",{className:t("maxio-side-nav__item",{"maxio-side-nav__item--active":a.isCurrent,"maxio-side-nav__item--icon":s}),"data-testid":"maxio-sidebar-section"},e.createElement("button",{className:"maxio-side-nav__menu-button",ref:l,"aria-expanded":a.isOpen,"aria-current":a.isCurrent?"page":void 0,type:"button",onClick:function(){r(a.name),i()}},e.createElement(w,{type:"menu",isTooltipVisible:!o&&c,leadingIcon:a.icon,trailingIcon:(null===(n=a.items)||void 0===n?void 0:n.length)?"chevron-down":void 0},a.name)),a.isOpen&&e.createElement("ul",{className:"maxio-side-nav__menu"},a.items.map((t=>e.createElement("li",{key:`section-sub-item-${t.name}`,className:"maxio-side-nav__item","data-testid":"maxio-section-item"},e.createElement("a",{className:"maxio-side-nav__link",href:t.href,"aria-current":t.isCurrent?"page":void 0},e.createElement("span",{className:"maxio-side-nav__link-title"},t.name)))))))},S=()=>{const{sections:t}=k();return e.createElement("ul",{className:"maxio-side-nav__items"},t.map((t=>e.createElement(T,{key:`section-${t.name}`,section:t}))))},P=()=>{const{isOpen:a}=k();return e.createElement("nav",{className:t("maxio-side-nav",{"maxio-side-nav--collapsed":!a})},e.createElement(I,null),e.createElement("hr",{className:"maxio-side-nav__divider"}),e.createElement(S,null))},$={sm:"h3",md:"h2",lg:"h1"},D=e.createContext({}),F=()=>e.useContext(D),H=({children:t,variant:a,withDivider:n,defaultIndex:i=0,onChange:r,index:o})=>{const[s,l]=e.useState((()=>void 0!==o?o:i));e.useEffect((()=>{void 0===o&&l(i),"number"==typeof o&&l(o)}),[i,o]);return e.createElement(D.Provider,{value:{currentIndex:s,variant:a,withDivider:n,onChange:e=>{void 0===o&&l(e),"function"==typeof r&&r(e)}}},t)},W=({disabled:a=!1,value:n=0,...i})=>{const{onChange:r,currentIndex:o}=F(),s=t("maxio-tabs__tab",{"maxio-tabs__tab--active":o===n,"maxio-tabs__tab--disabled":a,"maxio-tabs__tab--icon":"icon"===i.type}),l=()=>{r(n)};if("icon"===i.type){const{icon:t}=i;return e.createElement("div",{className:s,onClick:l},e.createElement("div",{className:"maxio-tabs__tab__content"},t))}const{children:c,rightIcon:m}=i;return e.createElement("div",{className:s,onClick:l},e.createElement("div",{className:"maxio-tabs__tab__content"},c,m||null))},R=({children:t})=>e.createElement(e.Fragment,null,t);exports.ActionList=o,exports.Avatar=({className:a,src:n,alt:i="avatar"})=>e.createElement("img",{className:t("maxio-avatar",a),alt:i,src:n}),exports.Body=({as:a="div",children:n,compact:i=!1,size:r="md",className:o,...s})=>{const l=a,c=t({[`maxio-body-${r}`]:!i,[`maxio-body-${r}-compact`]:i},o);return e.createElement(l,{className:c,...s},n)},exports.BrandLogo=({icon:a,variant:n="default"})=>e.createElement("i",{className:t("maxio-brand-logo",`maxio-brand-logo-${a}`,{[`maxio-brand-logo--${n}`]:"default"!==n})}),exports.Button=h,exports.Code=({as:a="div",children:n,className:i,...r})=>{const o=a,s=t("maxio-code",i);return e.createElement(o,{className:s,...r},n)},exports.Display=({as:a="div",children:n,size:i="md",className:r,...o})=>{const s=a,l=t(`maxio-display-${i}`,r);return e.createElement(s,{className:l,...o},n)},exports.HeaderButton=b,exports.HeaderNav=({items:a})=>e.createElement("ul",{className:"maxio-header-nav"},a.map((({label:a,id:n,isActive:i,...r})=>e.createElement("li",{className:"maxio-header-nav__item",key:`header-nav-list-item-${n}`},e.createElement("a",{className:t("maxio-header-nav__link",{"maxio-header-nav__link--active":i}),...r},a))))),exports.HeaderSearchField=_,exports.HeaderSearchInput=({options:t,onSubmit:a})=>{const n=e.useRef(null),i=e.useRef(null);return e.createElement("form",{className:"maxio-header-search-input",onSubmit:function(e){var t,r;e.preventDefault(),a({searchField:(null===(t=n.current)||void 0===t?void 0:t.value)||"",selectField:(null===(r=i.current)||void 0===r?void 0:r.value)||""})}},e.createElement(N,{ref:i,options:t}),e.createElement(_,{ref:n}),e.createElement(b,{type:"submit","aria-label":"Submit search",iconName:"arrow-right"}))},exports.HeaderSearchMenu=N,exports.Heading=({children:a,size:n="sm",className:i,...r})=>{const o=$[n],s=t(`maxio-heading-${n}`,i);return e.createElement(o,{className:s,...r},a)},exports.Icon=r,exports.IconButton=({icon:t,...a})=>e.createElement(h,{icon:t,className:"maxio-button--icon",...a},null),exports.Label=({as:a="div",children:n,size:i="sm",className:r,...o})=>{const s=a,l=t(`maxio-label-${i}`,r);return e.createElement(s,{className:l,...o},n)},exports.Link=({className:a,children:n,disabled:i=!1,external:o=!1,icon:s="arrow-right",noArrow:l=!1,size:c="md",...m})=>{const d=t("maxio-link",{[`maxio-link--${c}`]:!0,"maxio-link--disabled":i},a),u=o?"_blank":"_self";return s=o?"arrow-up-right":s,e.createElement("a",{className:d,target:u,...m},e.createElement("span",{className:"maxio-link__text"},n),!l&&e.createElement(r,{variant:s}))},exports.Menu=({children:t})=>e.createElement(l,null,e.createElement(c,null,t)),exports.MenuButton=({children:a,iconName:n="chevron-down"})=>{const i=t({"maxio-action-menu__chevron":"chevron-down"===n});return e.createElement("summary",{className:"maxio-header-button","aria-haspopup":"true"},e.createElement("div",{className:"maxio-header-button__content"},a&&e.createElement("span",null,a),n&&e.createElement(r,{variant:n,className:i})))},exports.MenuList=({items:a,alignItemsEnd:n=!1})=>{const i=t("maxio-action-menu__content",{"maxio-action-menu__content--align-end":n});return e.createElement("div",{className:i},e.createElement(o,{items:a}))},exports.OverlayTrigger=v,exports.ProgressBar=({label:a,helperText:n,size:r="md",variant:o="default",status:s,value:l,maxValue:c=100})=>{const m=i.useId(),d=i.useId(),u=s&&!!a&&!!l&&!("inline"===o),p=n&&!("inline"===o),x=n&&"inline"===o,v=t("maxio-progress-bar",{"maxio-progress-bar--lg":"lg"===r,"maxio-progress-bar--success":l&&!("inline"===o)&&"success"===s,"maxio-progress-bar--error":l&&!("inline"===o)&&"error"===s,"maxio-progress-bar--indent":"indent"===o,"maxio-progress-bar--inline":"inline"===o,"maxio-progress-bar--indeterminate":void 0===l});return e.createElement("div",{className:v},a&&e.createElement("div",{id:m,className:"maxio-progress-bar__label"},a),x&&e.createElement("div",{id:d,className:"maxio-progress-bar__helper-text"},n),e.createElement("div",{className:"maxio-progress-bar__track",role:"progressbar","aria-labelledby":m,"aria-describedby":d,"aria-valuenow":l,"aria-valuemin":0,"aria-valuemax":c,"aria-busy":!s,"aria-invalid":"error"===s},e.createElement("div",{className:"maxio-progress-bar__progress",style:{"--tw-scale-x":`${l}%`}})),u&&e.createElement("div",{className:`maxio-progress-bar__${s}-icon`}),p&&e.createElement("div",{id:d,className:"maxio-progress-bar__helper-text"},n))},exports.SideNav=({withIcons:t,shouldToggleSidebar:a,topDropdownItems:n,sections:i,collapseBreakpoint:r=800})=>e.createElement(C,{collapseBreakpoint:r,withIcons:t,shouldToggleSidebar:a,topDropdownItems:n,sections:i},e.createElement(P,null)),exports.Tab=W,exports.TabList=({children:a})=>{const{variant:n,withDivider:i}=F(),r=t("maxio-tabs",{"maxio-tabs--contained":"contained"===n,"maxio-tabs--divider":i});return e.createElement("div",{className:r},e.Children.map(a,((t,a)=>{if(e.isValidElement(t)&&t.type===W)return e.cloneElement(t,{value:a});throw new Error("You can only pass <Tab /> component as children")})))},exports.TabPanel=R,exports.TabPanels=({children:t})=>{const{currentIndex:a}=F();return e.createElement(e.Fragment,null,e.Children.map(t,((t,n)=>{if(e.isValidElement(t)&&t.type===R)return n===a?e.cloneElement(t,{}):null;throw new Error("You can only pass <TabPanel /> component as children")})))},exports.Tabs=({children:t,variant:a="line",withDivider:n=!1,defaultIndex:i=0,index:r,onChange:o})=>e.createElement(H,{defaultIndex:i,variant:a,withDivider:n,index:r,onChange:o},t),exports.Toggle=({defaultChecked:a,checked:n,onChange:i,disabled:r,valueDescription:o,valueDescriptionPosition:s,className:l,name:c,id:m})=>{const d=e.useId(),u="boolean"==typeof a,p=m||d,x="left"===s?"row":"row-reverse",v=o&&s,h=e.useCallback((e=>{if("Enter"===e.code||"Space"===e.code){e.preventDefault();const t=e.currentTarget.checked;u&&(e.currentTarget.checked=!t),i&&i(!t,e)}}),[u,i]);return e.createElement("div",{className:t("maxio-toggle",l,{"maxio-toggle--disabled":r}),style:{display:"inline-flex",flexDirection:x},"data-testid":"toggle-container"},v?e.createElement("label",{className:"maxio-toggle__label",htmlFor:p},o):null,e.createElement("div",{className:"maxio-toggle__container"},e.createElement("input",{type:"checkbox",defaultChecked:a,checked:n,onChange:e=>{i&&i(e.target.checked,e)},onKeyDown:h,disabled:r,"aria-label":v?void 0:o,className:"maxio-toggle__checkbox",id:p,name:c}),e.createElement("div",{className:"maxio-toggle__track",role:"switch","aria-checked":n},e.createElement("div",{className:"maxio-toggle__handle"}),e.createElement("span",{className:"maxio-toggle__icon"},e.createElement("i",{className:"maxio-toggle__icon-on"})),e.createElement("span",{className:"maxio-toggle__icon"},e.createElement("i",{className:"maxio-toggle__icon-off"})))))},exports.Tooltip=g,exports.TooltipTrigger=f,exports.useHover=p,exports.useOverlayTrigger=u,exports.useWindowSize=x;
1
+ "use strict";var e=require("react"),t=require("classnames"),a=require("framer-motion"),n=require("@floating-ui/react-dom-interactions"),i=require("react-aria");const r=({variant:a,white:n,className:i})=>e.createElement("i",{className:t("maxio-icon",`maxio-icon-${a}`,n&&"maxio-icon--white",i)}),o=({items:a,isShadowed:n=!0})=>{const i=t("maxio-action-list",{"maxio-action-list--shadow":n});return 0===a.length?null:e.createElement("ul",{className:i},a.map((t=>{if("divider"===t.type)return e.createElement("li",{key:`list-item-divider-${t.id}`,className:"maxio-action-list__divider",role:"separator","aria-hidden":"true"});const{id:a,leadingIconName:n,trailingIconName:i,label:o,description:s,link:l}=t;return e.createElement("li",{className:"maxio-action-list__item",key:`list-item-${a||o}`},e.createElement("a",{...l,className:"maxio-action-list__content"},n&&e.createElement(r,{variant:n,className:"maxio-action-list__leading-icon"}),e.createElement("span",{className:"maxio-action-list__label"},o),s&&e.createElement("span",{className:"maxio-action-list__description"},s),i&&e.createElement(r,{variant:i,className:"maxio-action-list__trailing-icon"})))})))},s=e.createContext({}),l=({children:t})=>{const[a,n]=e.useState(!1);return e.createElement(s.Provider,{value:{isOpen:a,onClose:()=>n(!1),onOpen:()=>n(!0),onToggle:()=>n((e=>!e))}},t)};const c=({children:t})=>{const{isOpen:a,onToggle:n,onClose:i}=function(){const t=e.useContext(s);if(!t||"object"==typeof t&&0===Object.keys(t).length)throw new Error("useMenu hook must be used within a MenuProvider");return t}();return e.createElement("details",{open:a,onToggle:n,className:"maxio-action-menu"},"function"==typeof t?t({isOpen:a,onClose:i}):t)},m={click:n.useClick,hover:n.useHover,focus:n.useFocus,dismiss:n.useDismiss},d=(e,t)=>t.map((t=>m[t](e))),u=({placement:t="top",isActive:a=!1,interactions:i=["hover"],floatingElementOffset:r=0,onOverlayUpdate:o,autoHideMs:s})=>{const l=e.useRef(null),{strategy:c,x:m,y:u,context:p,floating:x,reference:v}=n.useFloating({placement:t,open:a,onOpenChange:e=>o(e),middleware:[n.offset(r)]}),{getReferenceProps:h,getFloatingProps:g}=n.useInteractions([...d(p,i),n.useRole(p,{role:"tooltip"})]);e.useEffect((()=>{l.current&&clearTimeout(l.current),a&&s&&(l.current=setTimeout((()=>o(!1)),s))}),[a,s]);return{isActive:a,refs:{floating:x,reference:v},floatingElementCSSPosition:{position:c,top:null!=u?u:0,left:null!=m?m:0},getReferenceProps:h,getFloatingProps:g}};function p(t,a=0){const n=e.useRef((new Date).getTime()),i=e.useRef((new Date).getTime()),[r,o]=e.useState(!1);return e.useEffect((()=>{const e=()=>{n.current=(new Date).getTime(),o(!0)},r=()=>{i.current=(new Date).getTime(),setTimeout((()=>{n.current-i.current<=0&&o(!1)}),a)},s=t&&t.current;return s&&(s.addEventListener("mouseenter",e),s.addEventListener("mouseleave",r)),()=>{s&&(s.removeEventListener("mouseenter",e),s.removeEventListener("mouseleave",r))}}),[t]),r}function x(t=500){const[a,n]=e.useState((()=>{const{innerWidth:e,innerHeight:t}=window;return{windowWitdh:e,windowHeight:t}})),i=e.useRef(null);return e.useEffect((()=>{const e=()=>{const{innerWidth:e,innerHeight:a}=window;clearTimeout(i.current),i.current=setTimeout((()=>{n({windowWitdh:e,windowHeight:a})}),t)};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[t]),a}const v=({children:i,usePortal:r=!1,isActive:o=!1,placement:s="top",interactions:l=["hover"],role:c="tooltip",renderOverlay:m,floatingElementOffset:d,motionSettings:p={},autoHideMs:x,onOverlayUpdate:v,className:h})=>{const{getReferenceProps:g,getFloatingProps:E,refs:{floating:b,reference:f},floatingElementCSSPosition:_}=u({role:c,isActive:o,onOverlayUpdate:v,autoHideMs:x,floatingElementOffset:d,interactions:l,placement:s}),N=e.createElement(a.AnimatePresence,null,o&&e.createElement(a.motion.div,{ref:b,style:_,...p,...E()},m()));return e.createElement(e.Fragment,null,e.createElement("div",{ref:f,className:t("maxio-inline-flex",h),...g(),"data-testid":"overlay-trigger"},i),r?e.createElement(n.FloatingPortal,{id:"maxio-ui-portal"},N):N)},h=({children:a,loading:n=!1,fullWidth:i=!1,className:r,variant:o="primary",size:s="lg",disabled:l,icon:c,...m})=>{const d=t("maxio-button",r,{[`maxio-button--${s}`]:s,[`maxio-button--${o}`]:o,"maxio-button--loading":n,"maxio-button--full-width":i}),u=t("maxio-button__loader",{"maxio-button__loader--white":["primary","secondary","danger"].includes(o)});return e.createElement("button",{disabled:l,...m,className:d},a,!n&&c,n&&e.createElement("div",{className:u}))},g=({children:a,arrowPosition:n,size:i="regular",maxWidth:r=160})=>e.createElement("div",{"data-testid":"tooltip",className:t("maxio-tooltip",`maxio-tooltip--${i}`,{[`maxio-tooltip--arrow-${n}`]:n})},e.createElement("div",{className:"maxio-tooltip__content",style:{maxWidth:r}},a)),E={top:"bottom",right:"left",bottom:"top",left:"right","top-start":"bottom-left","top-end":"bottom-right","right-start":"left-top","right-end":"left-bottom","bottom-start":"top-left","bottom-end":"top-right","left-start":"right-top","left-end":"right-bottom"},b=({children:t,interactions:a=["hover"],placement:n="right",maxWidth:i=160,size:r="regular",renderContent:o,autoHideMs:s,isVisible:l,usePortal:c,className:m,onVisibilityUpdate:d,floatingElementOffset:u=5})=>{const[p,x]=e.useState(!1),h=void 0!==l,b=e.useCallback((e=>{h||x(e),d&&d(e)}),[l]),f=e.useMemo((()=>(e=>{const t=e.startsWith("top")||e.startsWith("bottom")?"Y":"X",a=`translate${t}(${e.startsWith("bottom")||e.startsWith("right")?"-":""}10px)`;return{initial:{opacity:0,visibility:"hidden",transform:a},animate:{opacity:1,visibility:"visible",transform:`translate${t}(0px)`},exit:{opacity:0,visibility:"hidden",transform:a},transition:{ease:[.4,0,.5,1],duration:.2}}})(n)),[n]);return e.createElement(v,{role:"tooltip",className:m,floatingElementOffset:u,motionSettings:f,isActive:h?l:p,onOverlayUpdate:b,autoHideMs:s,usePortal:c,placement:n,interactions:a,renderOverlay:()=>e.createElement(g,{size:r,arrowPosition:E[n],maxWidth:i},o())},t)},f=({children:a,as:n,iconName:i,noPadding:o,className:s,...l})=>{const c=n||"button",m=t("maxio-header-button",s,{"maxio-header-button--no-padding":o});return e.createElement(c,{className:m,...l},e.createElement("div",{className:"maxio-header-button__content"},a||null,i&&e.createElement(r,{variant:i})))},_=e.forwardRef((({className:a,...n},i)=>e.createElement("div",{className:t("maxio-header-search-field",a)},e.createElement("div",{className:"maxio-header-search-field__button"},e.createElement(r,{variant:"search"})),e.createElement("input",{ref:i,className:"maxio-header-search-field__input",type:"search",placeholder:"Search",name:"search",...n}))));_.displayName="SearchField";const N=e.forwardRef((({options:t,...a},n)=>e.createElement("div",{className:"maxio-header-search-menu",role:"button"},e.createElement("select",{name:"entity",className:"maxio-header-search-menu__select","aria-label":"Select entity",ref:n,...a},t.map((({label:t,value:a})=>e.createElement("option",{key:`${t}-${a}`,value:a},t)))),e.createElement("div",{className:"maxio-header-search-menu__icon"},e.createElement(r,{variant:"chevron-down"})))));N.displayName="SearchMenu";const w=({leadingIcon:t,trailingIcon:a,type:n="menu",children:i,leadingIconClassName:o,isTooltipVisible:s=!1})=>e.createElement(e.Fragment,null,e.createElement(b,{usePortal:!1,isVisible:s,renderContent:()=>i,floatingElementOffset:12},t&&e.createElement("span",{className:"maxio-side-nav__icon"},e.createElement(r,{variant:t,className:o}))),e.createElement("span",{className:`maxio-side-nav__${n}-title`,"data-testid":"maxio-sidebar-section-name"},i),a&&e.createElement("span",{className:"maxio-side-nav__menu-chevron"},e.createElement(r,{variant:a}))),y=e.createContext({}),C=()=>e.useContext(y),k=({children:t,withIcons:a=!0,sections:n,shouldToggleSidebar:i=!0,topDropdownItems:r,collapseBreakpoint:o=800})=>{const[s,l]=e.useState((()=>!i||("undefined"==typeof window||window.innerWidth>o))),[c,m]=e.useState(n),d=()=>l(!0),u=()=>l(!1),{windowWitdh:p}=x();e.useEffect((()=>{!function(e){if(!i)return;e<o&&s&&v();e>o&&!s&&h()}(p)}),[p]),e.useEffect((()=>{s?h():v()}),[]);return e.createElement(y.Provider,{value:{sections:c,topDropdownItems:r,onSectionOpen:e=>{const t=g();m((a=>a.map((a=>{var n;const i=a.name===e&&!a.isOpen;return t&&(null===(n=a.items)||void 0===n?void 0:n.includes(t))?{...a,isOpen:i,isCurrent:!i}:{...a,isOpen:i}}))))},isOpen:s,onOpen:d,onClose:u,onToggle:()=>l((e=>!e)),withIcons:a}},t);function v(){const e=g();e&&(m((t=>t.map((t=>{var a;return{...t,isOpen:!1,isCurrent:(null===(a=t.items)||void 0===a?void 0:a.includes(e))||!1}})))),u())}function h(){const e=g();e&&(m((t=>t.map((t=>{var a;return{...t,isOpen:(null===(a=t.items)||void 0===a?void 0:a.includes(e))||!1,isCurrent:!1}})))),d())}function g(){return c.map((e=>e.items)).flat().filter((e=>null!=e)).find((e=>e.isCurrent))}},I=()=>{const{onOpen:t,topDropdownItems:a,isOpen:n}=C(),{mainItem:i,otherItems:r,actions:s}=a,l=e.useRef(null),c=p(l),m=e=>({label:e.title,leadingIconName:e.icon,link:{href:e.url}}),d=e.useMemo((()=>[...r.map(m),r.length>0&&{type:"divider",id:"item-divider"},...s.map(m)].filter((e=>null!=e))),[s,r]),u=r.length+s.length;return e.createElement(e.Fragment,null,0===u?e.createElement("a",{className:"maxio-side-nav__menu-button maxio-side-nav__menu-button--large",href:i.url,onClick:t},e.createElement("span",{className:"maxio-side-nav__menu-title"},i.title)):e.createElement("details",{className:"maxio-action-menu maxio-side-nav--action-menu"},e.createElement("summary",{onClick:t,className:"maxio-side-nav__menu-button maxio-side-nav__menu-button--large","aria-haspopup":"true",ref:l},i.url?e.createElement(e.Fragment,null,e.createElement(w,{type:"menu",isTooltipVisible:!n&&c,leadingIcon:i.icon,trailingIcon:"chevron-down",leadingIconClassName:"maxio-icon-circle-fill maxio-icon--success"},i.title)):e.createElement(w,{type:"menu",trailingIcon:"chevron-down"},i.title)),e.createElement(o,{items:d})))},O=({section:t})=>{const{isOpen:a}=C(),n=e.useRef(null),i=p(n);return e.createElement("li",{className:"maxio-side-nav__item","data-key":t.key,"data-testid":"maxio-sidebar-section"},e.createElement("a",{className:"maxio-side-nav__link","aria-current":t.isCurrent?"page":void 0,role:"button",href:t.href,ref:n},e.createElement(w,{isTooltipVisible:i&&!a,type:"menu",leadingIcon:t.icon},t.name)))},S=({section:a})=>{var n;const{onOpen:i,onSectionOpen:r,isOpen:o,withIcons:s}=C();const l=e.useRef(null),c=p(l);return a.Component?e.createElement(a.Component,{section:a}):a.href?e.createElement(O,{section:a}):e.createElement("li",{className:t("maxio-side-nav__item",{"maxio-side-nav__item--active":a.isCurrent,"maxio-side-nav__item--icon":s}),"data-testid":"maxio-sidebar-section"},e.createElement("button",{className:"maxio-side-nav__menu-button",ref:l,"aria-expanded":a.isOpen,"aria-current":a.isCurrent?"page":void 0,type:"button",onClick:function(){r(a.name),i()}},e.createElement(w,{type:"menu",isTooltipVisible:!o&&c,leadingIcon:a.icon,trailingIcon:(null===(n=a.items)||void 0===n?void 0:n.length)?"chevron-down":void 0},a.name)),a.isOpen&&e.createElement("ul",{className:"maxio-side-nav__menu"},a.items.map((t=>e.createElement("li",{key:`section-sub-item-${t.name}`,className:"maxio-side-nav__item","data-testid":"maxio-section-item"},e.createElement("a",{className:"maxio-side-nav__link",href:t.href,"aria-current":t.isCurrent?"page":void 0},e.createElement("span",{className:"maxio-side-nav__link-title"},t.name)))))))},T=()=>{const{sections:t}=C();return e.createElement("ul",{className:"maxio-side-nav__items"},t.map((t=>e.createElement(S,{key:`section-${t.name}`,section:t}))))},P=()=>{const{isOpen:a}=C();return e.createElement("nav",{className:t("maxio-side-nav",{"maxio-side-nav--collapsed":!a})},e.createElement(I,null),e.createElement("hr",{className:"maxio-side-nav__divider"}),e.createElement(T,null))},F={sm:"h3",md:"h2",lg:"h1"},$=e.createContext({}),V=()=>e.useContext($),D=({children:t,variant:a,withDivider:n,defaultIndex:i=0,onChange:r,index:o})=>{const[s,l]=e.useState((()=>void 0!==o?o:i));e.useEffect((()=>{void 0===o&&l(i),"number"==typeof o&&l(o)}),[i,o]);return e.createElement($.Provider,{value:{currentIndex:s,variant:a,withDivider:n,onChange:e=>{void 0===o&&l(e),"function"==typeof r&&r(e)}}},t)},R=({disabled:a=!1,value:n=0,...i})=>{const{onChange:r,currentIndex:o}=V(),s=t("maxio-tabs__tab",{"maxio-tabs__tab--active":o===n,"maxio-tabs__tab--disabled":a,"maxio-tabs__tab--icon":"icon"===i.type}),l=()=>{r(n)};if("icon"===i.type){const{icon:t}=i;return e.createElement("div",{className:s,onClick:l},e.createElement("div",{className:"maxio-tabs__tab__content"},t))}const{children:c,rightIcon:m}=i;return e.createElement("div",{className:s,onClick:l},e.createElement("div",{className:"maxio-tabs__tab__content"},c,m||null))},H=({children:t})=>e.createElement(e.Fragment,null,t),L=e.createContext({}),M=()=>e.useContext(L),W=({children:t,onChange:a,value:n,defaultValue:i="",name:r,indent:o,disabled:s})=>{const[l,c]=e.useState(i),[m,d]=e.useState(null);e.useEffect((()=>{c(n)}),[n]);return e.createElement(L.Provider,{value:{onChange:e=>{c(e),a&&a(e)},name:r,value:l,indent:o,disabled:s,lastFocusedValue:m,setLastFocusedValue:d}},t)},z=({children:a,className:n,...i})=>e.createElement("div",{className:t("maxio-form-error",n),...i},e.createElement("i",{className:"maxio-form-error__icon"}),e.createElement("div",{className:"maxio-form-error__text"},a)),A=({children:a,className:n,...i})=>e.createElement("div",{className:t("maxio-form-helper-text",n),...i},a),B=({children:t,label:a,errorMessage:n,helperText:r,disabled:o=!1,invalid:s=!1})=>{const{name:l,onChange:c,value:m,lastFocusedValue:d,setLastFocusedValue:u}=M(),{radioGroupProps:p,labelProps:x,descriptionProps:v,errorMessageProps:h}=i.useRadioGroup({name:l,label:a},{name:l,validationState:s?"invalid":"valid",isDisabled:o,isInvalid:s,isReadOnly:o,isRequired:!1,selectedValue:m,lastFocusedValue:d,setLastFocusedValue:u,setSelectedValue:c});return e.createElement(e.Fragment,null,e.createElement("div",{className:"maxio-radio-group",...p},a&&e.createElement("label",{className:"maxio-radio-group__label",...x},a),t,n&&s&&e.createElement(z,{...h},n),r&&!n&&e.createElement(A,{...v},r)))};exports.ActionList=o,exports.Avatar=({className:a,src:n,alt:i="avatar"})=>e.createElement("img",{className:t("maxio-avatar",a),alt:i,src:n}),exports.Body=({as:a="div",children:n,compact:i=!1,size:r="md",className:o,...s})=>{const l=a,c=t({[`maxio-body-${r}`]:!i,[`maxio-body-${r}-compact`]:i},o);return e.createElement(l,{className:c,...s},n)},exports.BrandLogo=({icon:a,variant:n="default"})=>e.createElement("i",{className:t("maxio-brand-logo",`maxio-brand-logo-${a}`,{[`maxio-brand-logo--${n}`]:"default"!==n})}),exports.Button=h,exports.Code=({as:a="div",children:n,className:i,...r})=>{const o=a,s=t("maxio-code",i);return e.createElement(o,{className:s,...r},n)},exports.Display=({as:a="div",children:n,size:i="md",className:r,...o})=>{const s=a,l=t(`maxio-display-${i}`,r);return e.createElement(s,{className:l,...o},n)},exports.FormErrorMessage=z,exports.FormHelperText=A,exports.HeaderButton=f,exports.HeaderNav=({items:a})=>e.createElement("ul",{className:"maxio-header-nav"},a.map((({label:a,id:n,isActive:i,...r})=>e.createElement("li",{className:"maxio-header-nav__item",key:`header-nav-list-item-${n}`},e.createElement("a",{className:t("maxio-header-nav__link",{"maxio-header-nav__link--active":i}),...r},a))))),exports.HeaderSearchField=_,exports.HeaderSearchInput=({options:t,onSubmit:a})=>{const n=e.useRef(null),i=e.useRef(null);return e.createElement("form",{className:"maxio-header-search-input",onSubmit:function(e){var t,r;e.preventDefault(),a({searchField:(null===(t=n.current)||void 0===t?void 0:t.value)||"",selectField:(null===(r=i.current)||void 0===r?void 0:r.value)||""})}},e.createElement(N,{ref:i,options:t}),e.createElement(_,{ref:n}),e.createElement(f,{type:"submit","aria-label":"Submit search",iconName:"arrow-right"}))},exports.HeaderSearchMenu=N,exports.Heading=({children:a,size:n="sm",className:i,...r})=>{const o=F[n],s=t(`maxio-heading-${n}`,i);return e.createElement(o,{className:s,...r},a)},exports.Icon=r,exports.IconButton=({icon:t,...a})=>e.createElement(h,{icon:t,className:"maxio-button--icon",...a},null),exports.Label=({as:a="div",children:n,size:i="sm",className:r,...o})=>{const s=a,l=t(`maxio-label-${i}`,r);return e.createElement(s,{className:l,...o},n)},exports.Link=({className:a,children:n,disabled:i=!1,external:o=!1,icon:s="arrow-right",noArrow:l=!1,size:c="md",...m})=>{const d=t("maxio-link",{[`maxio-link--${c}`]:!0,"maxio-link--disabled":i},a),u=o?"_blank":"_self";return s=o?"arrow-up-right":s,e.createElement("a",{className:d,target:u,...m},e.createElement("span",{className:"maxio-link__text"},n),!l&&e.createElement(r,{variant:s}))},exports.Menu=({children:t})=>e.createElement(l,null,e.createElement(c,null,t)),exports.MenuButton=({children:a,iconName:n="chevron-down"})=>{const i=t({"maxio-action-menu__chevron":"chevron-down"===n});return e.createElement("summary",{className:"maxio-header-button","aria-haspopup":"true"},e.createElement("div",{className:"maxio-header-button__content"},a&&e.createElement("span",null,a),n&&e.createElement(r,{variant:n,className:i})))},exports.MenuList=({items:a,alignItemsEnd:n=!1})=>{const i=t("maxio-action-menu__content",{"maxio-action-menu__content--align-end":n});return e.createElement("div",{className:i},e.createElement(o,{items:a}))},exports.OverlayTrigger=v,exports.ProgressBar=({label:a,helperText:n,size:r="md",variant:o="default",status:s,value:l,maxValue:c=100})=>{const m=i.useId(),d=i.useId(),u=s&&!!a&&!!l&&!("inline"===o),p=n&&!("inline"===o),x=n&&"inline"===o,v=t("maxio-progress-bar",{"maxio-progress-bar--lg":"lg"===r,"maxio-progress-bar--success":l&&!("inline"===o)&&"success"===s,"maxio-progress-bar--error":l&&!("inline"===o)&&"error"===s,"maxio-progress-bar--indent":"indent"===o,"maxio-progress-bar--inline":"inline"===o,"maxio-progress-bar--indeterminate":void 0===l});return e.createElement("div",{className:v},a&&e.createElement("div",{id:m,className:"maxio-progress-bar__label"},a),x&&e.createElement("div",{id:d,className:"maxio-progress-bar__helper-text"},n),e.createElement("div",{className:"maxio-progress-bar__track",role:"progressbar","aria-labelledby":m,"aria-describedby":d,"aria-valuenow":l,"aria-valuemin":0,"aria-valuemax":c,"aria-busy":!s,"aria-invalid":"error"===s},e.createElement("div",{className:"maxio-progress-bar__progress",style:{"--tw-scale-x":`${l}%`}})),u&&e.createElement("div",{className:`maxio-progress-bar__${s}-icon`}),p&&e.createElement("div",{id:d,className:"maxio-progress-bar__helper-text"},n))},exports.Radio=({indent:a=!1,disabled:n=!1,invalid:r=!1,label:o,...s})=>{const l=e.useRef(null),{disabled:c,indent:m,invalid:d,name:u,onChange:p,value:x,setLastFocusedValue:v=(()=>{}),lastFocusedValue:h=null}=M(),g=!!u,E=d||r,b=c||n,f=t("maxio-radio",{"maxio-radio--indent":m||a,"maxio-radio--disabled":b,"maxio-radio--error":E}),{inputProps:_}=i.useRadio({...s,children:o,value:(s.value||"").toString()},{isDisabled:b,isReadOnly:b,isRequired:!1,name:u,validationState:E?"invalid":"valid",isInvalid:E,selectedValue:x,setSelectedValue:p,setLastFocusedValue:v,lastFocusedValue:h},l);return e.createElement("label",{className:f},e.createElement("input",{ref:l,type:"radio",className:"maxio-radio__input",...g?_:s}),e.createElement("span",{className:"maxio-radio__control",tabIndex:0}),e.createElement("span",{className:"maxio-radio__label"},o))},exports.RadioGroup=t=>e.createElement(W,{...t},e.createElement(B,{...t},t.children)),exports.SideNav=({withIcons:t,shouldToggleSidebar:a,topDropdownItems:n,sections:i,collapseBreakpoint:r=800})=>e.createElement(k,{collapseBreakpoint:r,withIcons:t,shouldToggleSidebar:a,topDropdownItems:n,sections:i},e.createElement(P,null)),exports.Tab=R,exports.TabList=({children:a})=>{const{variant:n,withDivider:i}=V(),r=t("maxio-tabs",{"maxio-tabs--contained":"contained"===n,"maxio-tabs--divider":i});return e.createElement("div",{className:r},e.Children.map(a,((t,a)=>{if(e.isValidElement(t)&&t.type===R)return e.cloneElement(t,{value:a});throw new Error("You can only pass <Tab /> component as children")})))},exports.TabPanel=H,exports.TabPanels=({children:t})=>{const{currentIndex:a}=V();return e.createElement(e.Fragment,null,e.Children.map(t,((t,n)=>{if(e.isValidElement(t)&&t.type===H)return n===a?e.cloneElement(t,{}):null;throw new Error("You can only pass <TabPanel /> component as children")})))},exports.Tabs=({children:t,variant:a="line",withDivider:n=!1,defaultIndex:i=0,index:r,onChange:o})=>e.createElement(D,{defaultIndex:i,variant:a,withDivider:n,index:r,onChange:o},t),exports.Toggle=({defaultChecked:a,checked:n,onChange:i,disabled:r,valueDescription:o,valueDescriptionPosition:s,className:l,name:c,id:m})=>{const d=e.useId(),u="boolean"==typeof a,p=m||d,x="left"===s?"row":"row-reverse",v=o&&s,h=e.useCallback((e=>{if("Enter"===e.code||"Space"===e.code){e.preventDefault();const t=e.currentTarget.checked;u&&(e.currentTarget.checked=!t),i&&i(!t,e)}}),[u,i]);return e.createElement("div",{className:t("maxio-toggle",l,{"maxio-toggle--disabled":r}),style:{display:"inline-flex",flexDirection:x},"data-testid":"toggle-container"},v?e.createElement("label",{className:"maxio-toggle__label",htmlFor:p},o):null,e.createElement("div",{className:"maxio-toggle__container"},e.createElement("input",{type:"checkbox",defaultChecked:a,checked:n,onChange:e=>{i&&i(e.target.checked,e)},onKeyDown:h,disabled:r,"aria-label":v?void 0:o,className:"maxio-toggle__checkbox",id:p,name:c}),e.createElement("div",{className:"maxio-toggle__track",role:"switch","aria-checked":n},e.createElement("div",{className:"maxio-toggle__handle"}),e.createElement("span",{className:"maxio-toggle__icon"},e.createElement("i",{className:"maxio-toggle__icon-on"})),e.createElement("span",{className:"maxio-toggle__icon"},e.createElement("i",{className:"maxio-toggle__icon-off"})))))},exports.Tooltip=g,exports.TooltipTrigger=b,exports.useHover=p,exports.useOverlayTrigger=u,exports.useWindowSize=x;
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.11.3",
3
+ "version": "1.13.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": "44b973ec485ccc813fcc51e0b345f13ad980e7a2"
52
+ "gitHead": "cce6e38d270a5b1b69454e79cf4c886e60eded3d"
53
53
  }
package/typings/index.d.ts CHANGED
@@ -381,4 +381,43 @@ interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
381
381
  declare const Link: React__default.FC<LinkProps>;
382
382
  //# sourceMappingURL=Link.d.ts.map
383
383
 
384
- export { ActionList, Avatar, Body, BrandLogo, Button, Code, Display, HeaderButton, HeaderNav, SearchField as HeaderSearchField, SearchInput as HeaderSearchInput, SearchMenu as HeaderSearchMenu, Heading, Icon, IconButton, Interactions, Label, Link, Menu, MenuButton, MenuList, OverlayAriaRole, OverlayTrigger, Placement, ProgressBar, SideNavWrapper as SideNav, Tab, TabList, TabPanel, TabPanels, Tabs, Toggle, Tooltip, TooltipTrigger, useHover, useOverlayTrigger, useWindowSize };
384
+ interface RadioProps extends React__default.InputHTMLAttributes<HTMLInputElement> {
385
+ label: string;
386
+ indent?: boolean;
387
+ disabled?: boolean;
388
+ invalid?: boolean;
389
+ }
390
+ declare const Radio: ({ indent, disabled, invalid, label, ...props }: RadioProps) => JSX.Element;
391
+ //# sourceMappingURL=Radio.d.ts.map
392
+
393
+ interface RadioGroupProviderProps {
394
+ children: React__default.ReactNode;
395
+ onChange?: (val: string) => void;
396
+ value?: string;
397
+ defaultValue?: string;
398
+ name: string;
399
+ indent?: boolean;
400
+ disabled?: boolean;
401
+ invalid?: boolean;
402
+ }
403
+
404
+ declare type RadioGroupProps = RadioGroupProviderProps & {
405
+ label?: string;
406
+ name: string;
407
+ errorMessage?: string;
408
+ helperText?: string;
409
+ };
410
+ declare const RadioGroup: (props: RadioGroupProps) => JSX.Element;
411
+ //# sourceMappingURL=RadioGroup.d.ts.map
412
+
413
+ interface FormErrorMessageProps extends React__default.HtmlHTMLAttributes<HTMLDivElement> {
414
+ }
415
+ declare const FormErrorMessage: ({ children, className, ...props }: FormErrorMessageProps) => JSX.Element;
416
+ //# sourceMappingURL=FormErrorMessage.d.ts.map
417
+
418
+ interface FormHelperTextProps extends React__default.HtmlHTMLAttributes<HTMLDivElement> {
419
+ }
420
+ declare const FormHelperText: ({ children, className, ...props }: FormHelperTextProps) => JSX.Element;
421
+ //# sourceMappingURL=FormHelperText.d.ts.map
422
+
423
+ export { ActionList, Avatar, Body, BrandLogo, Button, Code, Display, FormErrorMessage, FormHelperText, HeaderButton, HeaderNav, SearchField as HeaderSearchField, SearchInput as HeaderSearchInput, SearchMenu as HeaderSearchMenu, Heading, Icon, IconButton, Interactions, Label, Link, Menu, MenuButton, MenuList, OverlayAriaRole, OverlayTrigger, Placement, ProgressBar, Radio, RadioGroup, SideNavWrapper as SideNav, Tab, TabList, TabPanel, TabPanels, Tabs, Toggle, Tooltip, TooltipTrigger, useHover, useOverlayTrigger, useWindowSize };