@maxio-com/react-ui-components 1.5.0 → 1.5.2

package/dist/index.esm.js

@@ -1 +1 @@
-import a from"react";import r from"classnames";const t=({className:t,src:m,alt:s="avatar"})=>a.createElement("img",{className:r("maxio-avatar",t),alt:s,src:m});export{t as Avatar};
+import e,{createContext as t,useState as a,useContext as n,useRef as i,useEffect as o,useId as r,useCallback as l,useMemo as s,forwardRef as c}from"react";import m from"classnames";import{AnimatePresence as d,motion as u}from"framer-motion";import{useClick as p,useHover as v,useFocus as h,useDismiss as g,useFloating as E,offset as f,useInteractions as x,useRole as _,FloatingPortal as N}from"@floating-ui/react-dom-interactions";const b=({variant:t,white:a,className:n})=>e.createElement("i",{className:m("maxio-icon",`maxio-icon-${t}`,a&&"maxio-icon--white",n)}),w=({items:t,isShadowed:a=!0})=>{const n=m("maxio-action-list",{"maxio-action-list--shadow":a});return 0===t.length?null:e.createElement("ul",{className:n},t.map((t=>{if("divider"===t.type)return e.createElement("li",{key:`list-item-divider-${t.id}`,className:"maxio-action-list__divider",role:"separator","aria-hidden":"true"});const{id:a,leadingIconName:n,trailingIconName:i,label:o,description:r,link:l}=t;return e.createElement("li",{className:"maxio-action-list__item",key:`list-item-${a||o}`},e.createElement("a",{...l,className:"maxio-action-list__content"},n&&e.createElement(b,{variant:n,className:"maxio-action-list__leading-icon"}),e.createElement("span",{className:"maxio-action-list__label"},o),r&&e.createElement("span",{className:"maxio-action-list__description"},r),i&&e.createElement(b,{variant:i,className:"maxio-action-list__trailing-icon"})))})))},y=({className:t,src:a,alt:n="avatar"})=>e.createElement("img",{className:m("maxio-avatar",t),alt:n,src:a}),k=t({}),O=({children:t})=>{const[n,i]=a(!1);return e.createElement(k.Provider,{value:{isOpen:n,onClose:()=>i(!1),onOpen:()=>i(!0),onToggle:()=>i((e=>!e))}},t)};const C=({children:t})=>{const{isOpen:a,onToggle:i,onClose:o}=function(){const e=n(k);if(!e||"object"==typeof e&&0===Object.keys(e).length)throw new Error("useMenu hook must be used within a MenuProvider");return e}();return e.createElement("details",{open:a,onToggle:i,className:"maxio-action-menu"},"function"==typeof t?t({isOpen:a,onClose:o}):t)},I=({children:t})=>e.createElement(O,null,e.createElement(C,null,t)),S=({items:t,alignItemsEnd:a=!1})=>{const n=m("maxio-action-menu__content",{"maxio-action-menu__content--align-end":a});return e.createElement("div",{className:n},e.createElement(w,{items:t}))},T=({children:t,iconName:a="chevron-down"})=>{const n=m({"maxio-action-menu__chevron":"chevron-down"===a});return e.createElement("summary",{className:"maxio-header-button","aria-haspopup":"true"},e.createElement("div",{className:"maxio-header-button__content"},t&&e.createElement("span",null,t),a&&e.createElement(b,{variant:a,className:n})))},P=({icon:t,variant:a="default"})=>e.createElement("i",{className:m("maxio-brand-logo",`maxio-brand-logo-${t}`,{[`maxio-brand-logo--${a}`]:"default"!==a})}),$={click:p,hover:v,focus:h,dismiss:g},D=(e,t)=>t.map((t=>$[t](e))),W=({placement:e="top",isActive:t=!1,interactions:a=["hover"],floatingElementOffset:n=0,onOverlayUpdate:r,autoHideMs:l})=>{const s=i(null),{strategy:c,x:m,y:d,context:u,floating:p,reference:v}=E({placement:e,open:t,onOpenChange:e=>r(e),middleware:[f(n)]}),{getReferenceProps:h,getFloatingProps:g}=x([...D(u,a),_(u,{role:"tooltip"})]);o((()=>{s.current&&clearTimeout(s.current),t&&l&&(s.current=setTimeout((()=>r(!1)),l))}),[t,l]);return{isActive:t,refs:{floating:p,reference:v},floatingElementCSSPosition:{position:c,top:null!=d?d:0,left:null!=m?m:0},getReferenceProps:h,getFloatingProps:g}};function H(e,t=0){const n=i((new Date).getTime()),r=i((new Date).getTime()),[l,s]=a(!1);return o((()=>{const a=()=>{n.current=(new Date).getTime(),s(!0)},i=()=>{r.current=(new Date).getTime(),setTimeout((()=>{n.current-r.current<=0&&s(!1)}),t)},o=e&&e.current;return o&&(o.addEventListener("mouseenter",a),o.addEventListener("mouseleave",i)),()=>{o&&(o.removeEventListener("mouseenter",a),o.removeEventListener("mouseleave",i))}}),[e]),l}function F(e=500){const[t,n]=a((()=>{const{innerWidth:e,innerHeight:t}=window;return{windowWitdh:e,windowHeight:t}})),r=i(null);return o((()=>{const t=()=>{const{innerWidth:t,innerHeight:a}=window;clearTimeout(r.current),r.current=setTimeout((()=>{n({windowWitdh:t,windowHeight:a})}),e)};return window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t)}}),[e]),t}const M=({children:t,usePortal:a=!1,isActive:n=!1,placement:i="top",interactions:o=["hover"],role:r="tooltip",renderOverlay:l,floatingElementOffset:s,motionSettings:c={},autoHideMs:p,onOverlayUpdate:v,className:h})=>{const{getReferenceProps:g,getFloatingProps:E,refs:{floating:f,reference:x},floatingElementCSSPosition:_}=W({role:r,isActive:n,onOverlayUpdate:v,autoHideMs:p,floatingElementOffset:s,interactions:o,placement:i}),b=e.createElement(d,null,n&&e.createElement(u.div,{ref:f,style:_,...c,...E()},l()));return e.createElement(e.Fragment,null,e.createElement("div",{ref:x,className:m("maxio-inline-flex",h),...g(),"data-testid":"overlay-trigger"},t),a?e.createElement(N,{id:"maxio-ui-portal"},b):b)},V=({defaultChecked:t,checked:a,onChange:n,disabled:i,valueDescription:o,valueDescriptionPosition:s,className:c,name:d,id:u})=>{const p=r(),v="boolean"==typeof t,h=u||p,g="left"===s?"row":"row-reverse",E=o&&s,f=l((e=>{if("Enter"===e.code||"Space"===e.code){e.preventDefault();const t=e.currentTarget.checked;v&&(e.currentTarget.checked=!t),n&&n(!t,e)}}),[v,n]);return e.createElement("div",{className:m("maxio-toggle",c,{"maxio-toggle--disabled":i}),style:{display:"inline-flex",flexDirection:g},"data-testid":"toggle-container"},E?e.createElement("label",{className:"maxio-toggle__label",htmlFor:h},o):null,e.createElement("div",{className:"maxio-toggle__container"},e.createElement("input",{type:"checkbox",defaultChecked:t,checked:a,onChange:e=>{n&&n(e.target.checked,e)},onKeyDown:f,disabled:i,"aria-label":E?void 0:o,className:"maxio-toggle__checkbox",id:h,name:d}),e.createElement("div",{className:"maxio-toggle__track",role:"switch","aria-checked":a},e.createElement("div",{className:"maxio-toggle__handle"}),e.createElement("span",{className:"maxio-toggle__icon"},e.createElement("i",{className:"maxio-toggle__icon-on"})),e.createElement("span",{className:"maxio-toggle__icon"},e.createElement("i",{className:"maxio-toggle__icon-off"})))))},A=({children:t,arrowPosition:a,size:n="regular",maxWidth:i=160})=>e.createElement("div",{"data-testid":"tooltip",className:m("maxio-tooltip",`maxio-tooltip--${n}`,{[`maxio-tooltip--arrow-${a}`]:a})},e.createElement("div",{className:"maxio-tooltip__content",style:{maxWidth:i}},t)),L={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"},z=({children:t,interactions:n=["hover"],placement:i="right",maxWidth:o=160,size:r="regular",renderContent:c,autoHideMs:m,isVisible:d,usePortal:u,className:p,onVisibilityUpdate:v,floatingElementOffset:h=5})=>{const[g,E]=a(!1),f=void 0!==d,x=l((e=>{f||E(e),v&&v(e)}),[d]),_=s((()=>(e=>{const t=e.startsWith("top")||e.startsWith("bottom")?"Y":"X",a=`translate${t}(${e.startsWith("bottom")||e.startsWith("right")?"-":""}10px)`;return{initial:{opacity:0,visibility:"hidden",transform:a},animate:{opacity:1,visibility:"visible",transform:`translate${t}(0px)`},exit:{opacity:0,visibility:"hidden",transform:a},transition:{ease:[.4,0,.5,1],duration:.2}}})(i)),[i]);return e.createElement(M,{role:"tooltip",className:p,floatingElementOffset:h,motionSettings:_,isActive:f?d:g,onOverlayUpdate:x,autoHideMs:m,usePortal:u,placement:i,interactions:n,renderOverlay:()=>e.createElement(A,{size:r,arrowPosition:L[i],maxWidth:o},c())},t)},U=({children:t,as:a,iconName:n,noPadding:i,className:o,...r})=>{const l=a||"button",s=m("maxio-header-button",o,{"maxio-header-button--no-padding":i});return e.createElement(l,{className:s,...r},e.createElement("div",{className:"maxio-header-button__content"},t||null,n&&e.createElement(b,{variant:n})))},B=({items:t})=>e.createElement("ul",{className:"maxio-header-nav"},t.map((({label:t,id:a,isActive:n,...i})=>e.createElement("li",{className:"maxio-header-nav__item",key:`header-nav-list-item-${a}`},e.createElement("a",{className:m("maxio-header-nav__link",{"maxio-header-nav__link--active":n}),...i},t))))),R=c((({className:t,...a},n)=>e.createElement("div",{className:m("maxio-header-search-field",t)},e.createElement("div",{className:"maxio-header-search-field__button"},e.createElement(b,{variant:"search"})),e.createElement("input",{ref:n,className:"maxio-header-search-field__input",type:"search",placeholder:"Search",name:"search",...a}))));R.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(b,{variant:"chevron-down"})))));j.displayName="SearchMenu";const K=({options:t,onSubmit:a})=>{const n=i(null),o=i(null);return e.createElement("form",{className:"maxio-header-search-input",onSubmit:function(e){var t,i;e.preventDefault(),a({searchField:(null===(t=n.current)||void 0===t?void 0:t.value)||"",selectField:(null===(i=o.current)||void 0===i?void 0:i.value)||""})}},e.createElement(j,{ref:o,options:t}),e.createElement(R,{ref:n}),e.createElement(U,{type:"submit","aria-label":"Submit search",iconName:"arrow-right"}))},X=({leadingIcon:t,trailingIcon:a,type:n="menu",children:i,leadingIconClassName:o,isTooltipVisible:r=!1})=>e.createElement(e.Fragment,null,e.createElement(z,{usePortal:!1,isVisible:r,renderContent:()=>i,floatingElementOffset:12},t&&e.createElement("span",{className:"maxio-side-nav__icon"},e.createElement(b,{variant:t,className:o}))),e.createElement("span",{className:`maxio-side-nav__${n}-title`,"data-testid":"maxio-sidebar-section-name"},i),a&&e.createElement("span",{className:"maxio-side-nav__menu-chevron"},e.createElement(b,{variant:a}))),Y=t({}),q=()=>n(Y),G=({children:t,withIcons:n=!0,sections:i,shouldToggleSidebar:r=!0,topDropdownItems:l,collapseBreakpoint:s=800})=>{const[c,m]=a((()=>!r||("undefined"==typeof window||window.innerWidth>s))),[d,u]=a(i),p=()=>m(!0),v=()=>m(!1),{windowWitdh:h}=F();o((()=>{!function(e){if(!r)return;e<s&&c&&g();e>s&&!c&&E()}(h)}),[h]),o((()=>{c?E():g()}),[]);return e.createElement(Y.Provider,{value:{sections:d,topDropdownItems:l,onSectionOpen:e=>{const t=f();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=f();e&&(u((t=>t.map((t=>{var a;return{...t,isOpen:!1,isCurrent:(null===(a=t.items)||void 0===a?void 0:a.includes(e))||!1}})))),v())}function E(){const e=f();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 f(){return d.map((e=>e.items)).flat().filter((e=>null!=e)).find((e=>e.isCurrent))}},J=()=>{const{onOpen:t,topDropdownItems:a,isOpen:n}=q(),{mainItem:o,otherItems:r,actions:l}=a,c=i(null),m=H(c),d=e=>({label:e.title,leadingIconName:e.icon,link:{href:e.url}}),u=s((()=>[...r.map(d),r.length>0&&{type:"divider",id:"item-divider"},...l.map(d)].filter((e=>null!=e))),[l,r]),p=r.length+l.length;return e.createElement(e.Fragment,null,0===p?e.createElement("a",{className:"maxio-side-nav__menu-button maxio-side-nav__menu-button--large",href:o.url,onClick:t},e.createElement("span",{className:"maxio-side-nav__menu-title"},o.title)):e.createElement("details",{className:"maxio-action-menu maxio-side-nav--action-menu"},e.createElement("summary",{onClick:t,className:"maxio-side-nav__menu-button maxio-side-nav__menu-button--large","aria-haspopup":"true",ref:c},o.url?e.createElement(e.Fragment,null,e.createElement(X,{type:"menu",isTooltipVisible:!n&&m,leadingIcon:o.icon,trailingIcon:"chevron-down",leadingIconClassName:"maxio-icon-circle-fill maxio-icon--success"},o.title)):e.createElement(X,{type:"menu",trailingIcon:"chevron-down"},o.title)),e.createElement(w,{items:u})))},Q=({section:t})=>{const{isOpen:a}=q(),n=i(null),o=H(n);return e.createElement("li",{className:"maxio-side-nav__item","data-key":t.key,"data-testid":"maxio-sidebar-section"},e.createElement("a",{className:"maxio-side-nav__link","aria-current":t.isCurrent?"page":void 0,role:"button",href:t.href,ref:n},e.createElement(X,{isTooltipVisible:o&&!a,type:"menu",leadingIcon:t.icon},t.name)))},Z=({section:t})=>{var a;const{onOpen:n,onSectionOpen:o,isOpen:r,withIcons:l}=q();const s=i(null),c=H(s);return t.Component?e.createElement(t.Component,{section:t}):t.href?e.createElement(Q,{section:t}):e.createElement("li",{className:m("maxio-side-nav__item",{"maxio-side-nav__item--active":t.isCurrent,"maxio-side-nav__item--icon":l}),"data-testid":"maxio-sidebar-section"},e.createElement("button",{className:"maxio-side-nav__menu-button",ref:s,"aria-expanded":t.isOpen,"aria-current":t.isCurrent?"page":void 0,type:"button",onClick:function(){o(t.name),n()}},e.createElement(X,{type:"menu",isTooltipVisible:!r&&c,leadingIcon:t.icon,trailingIcon:(null===(a=t.items)||void 0===a?void 0:a.length)?"chevron-down":void 0},t.name)),t.isOpen&&e.createElement("ul",{className:"maxio-side-nav__menu"},t.items.map((t=>e.createElement("li",{key:`section-sub-item-${t.name}`,className:"maxio-side-nav__item","data-testid":"maxio-section-item"},e.createElement("a",{className:"maxio-side-nav__link",href:t.href,"aria-current":t.isCurrent?"page":void 0},e.createElement("span",{className:"maxio-side-nav__link-title"},t.name)))))))},ee=()=>{const{sections:t}=q();return e.createElement("ul",{className:"maxio-side-nav__items"},t.map((t=>e.createElement(Z,{key:`section-${t.name}`,section:t}))))},te=()=>{const{isOpen:t}=q();return e.createElement("nav",{className:m("maxio-side-nav",{"maxio-side-nav--collapsed":!t})},e.createElement(J,null),e.createElement("hr",{className:"maxio-side-nav__divider"}),e.createElement(ee,null))},ae=({withIcons:t,shouldToggleSidebar:a,topDropdownItems:n,sections:i,collapseBreakpoint:o=800})=>e.createElement(G,{collapseBreakpoint:o,withIcons:t,shouldToggleSidebar:a,topDropdownItems:n,sections:i},e.createElement(te,null));export{w as ActionList,y as Avatar,P as BrandLogo,U as HeaderButton,B as HeaderNav,R as HeaderSearchField,K as HeaderSearchInput,j as HeaderSearchMenu,b as Icon,I as Menu,T as MenuButton,S as MenuList,M as OverlayTrigger,ae as SideNav,V as Toggle,A as Tooltip,z as TooltipTrigger,H as useHover,W as useOverlayTrigger,F as useWindowSize};

package/dist/index.js

@@ -1,2 +1,2 @@
-"use strict";var a=require("react"),e=require("classnames");exports.Avatar=({className:r,src:s,alt:t="avatar"})=>a.createElement("img",{className:e("maxio-avatar",r),alt:t,src:s});
+"use strict";var e=require("react"),t=require("classnames"),a=require("framer-motion"),n=require("@floating-ui/react-dom-interactions");const i=({variant:a,white:n,className:i})=>e.createElement("i",{className:t("maxio-icon",`maxio-icon-${a}`,n&&"maxio-icon--white",i)}),o=({items:a,isShadowed:n=!0})=>{const o=t("maxio-action-list",{"maxio-action-list--shadow":n});return 0===a.length?null:e.createElement("ul",{className:o},a.map((t=>{if("divider"===t.type)return e.createElement("li",{key:`list-item-divider-${t.id}`,className:"maxio-action-list__divider",role:"separator","aria-hidden":"true"});const{id:a,leadingIconName:n,trailingIconName:o,label:r,description:s,link:l}=t;return e.createElement("li",{className:"maxio-action-list__item",key:`list-item-${a||r}`},e.createElement("a",{...l,className:"maxio-action-list__content"},n&&e.createElement(i,{variant:n,className:"maxio-action-list__leading-icon"}),e.createElement("span",{className:"maxio-action-list__label"},r),s&&e.createElement("span",{className:"maxio-action-list__description"},s),o&&e.createElement(i,{variant:o,className:"maxio-action-list__trailing-icon"})))})))},r=e.createContext({}),s=({children:t})=>{const[a,n]=e.useState(!1);return e.createElement(r.Provider,{value:{isOpen:a,onClose:()=>n(!1),onOpen:()=>n(!0),onToggle:()=>n((e=>!e))}},t)};const l=({children:t})=>{const{isOpen:a,onToggle:n,onClose:i}=function(){const t=e.useContext(r);if(!t||"object"==typeof t&&0===Object.keys(t).length)throw new Error("useMenu hook must be used within a MenuProvider");return t}();return e.createElement("details",{open:a,onToggle:n,className:"maxio-action-menu"},"function"==typeof t?t({isOpen:a,onClose:i}):t)},c={click:n.useClick,hover:n.useHover,focus:n.useFocus,dismiss:n.useDismiss},m=(e,t)=>t.map((t=>c[t](e))),d=({placement:t="top",isActive:a=!1,interactions:i=["hover"],floatingElementOffset:o=0,onOverlayUpdate:r,autoHideMs:s})=>{const l=e.useRef(null),{strategy:c,x:d,y:u,context:p,floating:v,reference:g}=n.useFloating({placement:t,open:a,onOpenChange:e=>r(e),middleware:[n.offset(o)]}),{getReferenceProps:h,getFloatingProps:f}=n.useInteractions([...m(p,i),n.useRole(p,{role:"tooltip"})]);e.useEffect((()=>{l.current&&clearTimeout(l.current),a&&s&&(l.current=setTimeout((()=>r(!1)),s))}),[a,s]);return{isActive:a,refs:{floating:v,reference:g},floatingElementCSSPosition:{position:c,top:null!=u?u:0,left:null!=d?d:0},getReferenceProps:h,getFloatingProps:f}};function u(t,a=0){const n=e.useRef((new Date).getTime()),i=e.useRef((new Date).getTime()),[o,r]=e.useState(!1);return e.useEffect((()=>{const e=()=>{n.current=(new Date).getTime(),r(!0)},o=()=>{i.current=(new Date).getTime(),setTimeout((()=>{n.current-i.current<=0&&r(!1)}),a)},s=t&&t.current;return s&&(s.addEventListener("mouseenter",e),s.addEventListener("mouseleave",o)),()=>{s&&(s.removeEventListener("mouseenter",e),s.removeEventListener("mouseleave",o))}}),[t]),o}function p(t=500){const[a,n]=e.useState((()=>{const{innerWidth:e,innerHeight:t}=window;return{windowWitdh:e,windowHeight:t}})),i=e.useRef(null);return e.useEffect((()=>{const e=()=>{const{innerWidth:e,innerHeight:a}=window;clearTimeout(i.current),i.current=setTimeout((()=>{n({windowWitdh:e,windowHeight:a})}),t)};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[t]),a}const v=({children:i,usePortal:o=!1,isActive:r=!1,placement:s="top",interactions:l=["hover"],role:c="tooltip",renderOverlay:m,floatingElementOffset:u,motionSettings:p={},autoHideMs:v,onOverlayUpdate:g,className:h})=>{const{getReferenceProps:f,getFloatingProps:x,refs:{floating:E,reference:_},floatingElementCSSPosition:N}=d({role:c,isActive:r,onOverlayUpdate:g,autoHideMs:v,floatingElementOffset:u,interactions:l,placement:s}),b=e.createElement(a.AnimatePresence,null,r&&e.createElement(a.motion.div,{ref:E,style:N,...p,...x()},m()));return e.createElement(e.Fragment,null,e.createElement("div",{ref:_,className:t("maxio-inline-flex",h),...f(),"data-testid":"overlay-trigger"},i),o?e.createElement(n.FloatingPortal,{id:"maxio-ui-portal"},b):b)},g=({children:a,arrowPosition:n,size:i="regular",maxWidth:o=160})=>e.createElement("div",{"data-testid":"tooltip",className:t("maxio-tooltip",`maxio-tooltip--${i}`,{[`maxio-tooltip--arrow-${n}`]:n})},e.createElement("div",{className:"maxio-tooltip__content",style:{maxWidth:o}},a)),h={top:"bottom",right:"left",bottom:"top",left:"right","top-start":"bottom-left","top-end":"bottom-right","right-start":"left-top","right-end":"left-bottom","bottom-start":"top-left","bottom-end":"top-right","left-start":"right-top","left-end":"right-bottom"},f=({children:t,interactions:a=["hover"],placement:n="right",maxWidth:i=160,size:o="regular",renderContent:r,autoHideMs:s,isVisible:l,usePortal:c,className:m,onVisibilityUpdate:d,floatingElementOffset:u=5})=>{const[p,f]=e.useState(!1),x=void 0!==l,E=e.useCallback((e=>{x||f(e),d&&d(e)}),[l]),_=e.useMemo((()=>(e=>{const t=e.startsWith("top")||e.startsWith("bottom")?"Y":"X",a=`translate${t}(${e.startsWith("bottom")||e.startsWith("right")?"-":""}10px)`;return{initial:{opacity:0,visibility:"hidden",transform:a},animate:{opacity:1,visibility:"visible",transform:`translate${t}(0px)`},exit:{opacity:0,visibility:"hidden",transform:a},transition:{ease:[.4,0,.5,1],duration:.2}}})(n)),[n]);return e.createElement(v,{role:"tooltip",className:m,floatingElementOffset:u,motionSettings:_,isActive:x?l:p,onOverlayUpdate:E,autoHideMs:s,usePortal:c,placement:n,interactions:a,renderOverlay:()=>e.createElement(g,{size:o,arrowPosition:h[n],maxWidth:i},r())},t)},x=({children:a,as:n,iconName:o,noPadding:r,className:s,...l})=>{const c=n||"button",m=t("maxio-header-button",s,{"maxio-header-button--no-padding":r});return e.createElement(c,{className:m,...l},e.createElement("div",{className:"maxio-header-button__content"},a||null,o&&e.createElement(i,{variant:o})))},E=e.forwardRef((({className:a,...n},o)=>e.createElement("div",{className:t("maxio-header-search-field",a)},e.createElement("div",{className:"maxio-header-search-field__button"},e.createElement(i,{variant:"search"})),e.createElement("input",{ref:o,className:"maxio-header-search-field__input",type:"search",placeholder:"Search",name:"search",...n}))));E.displayName="SearchField";const _=e.forwardRef((({options:t,...a},n)=>e.createElement("div",{className:"maxio-header-search-menu",role:"button"},e.createElement("select",{name:"entity",className:"maxio-header-search-menu__select","aria-label":"Select entity",ref:n,...a},t.map((({label:t,value:a})=>e.createElement("option",{key:`${t}-${a}`,value:a},t)))),e.createElement("div",{className:"maxio-header-search-menu__icon"},e.createElement(i,{variant:"chevron-down"})))));_.displayName="SearchMenu";const N=({leadingIcon:t,trailingIcon:a,type:n="menu",children:o,leadingIconClassName:r,isTooltipVisible:s=!1})=>e.createElement(e.Fragment,null,e.createElement(f,{usePortal:!1,isVisible:s,renderContent:()=>o,floatingElementOffset:12},t&&e.createElement("span",{className:"maxio-side-nav__icon"},e.createElement(i,{variant:t,className:r}))),e.createElement("span",{className:`maxio-side-nav__${n}-title`,"data-testid":"maxio-sidebar-section-name"},o),a&&e.createElement("span",{className:"maxio-side-nav__menu-chevron"},e.createElement(i,{variant:a}))),b=e.createContext({}),w=()=>e.useContext(b),y=({children:t,withIcons:a=!0,sections:n,shouldToggleSidebar:i=!0,topDropdownItems:o,collapseBreakpoint:r=800})=>{const[s,l]=e.useState((()=>!i||("undefined"==typeof window||window.innerWidth>r))),[c,m]=e.useState(n),d=()=>l(!0),u=()=>l(!1),{windowWitdh:v}=p();e.useEffect((()=>{!function(e){if(!i)return;e<r&&s&&g();e>r&&!s&&h()}(v)}),[v]),e.useEffect((()=>{s?h():g()}),[]);return e.createElement(b.Provider,{value:{sections:c,topDropdownItems:o,onSectionOpen:e=>{const t=f();m((a=>a.map((a=>{var n;const i=a.name===e&&!a.isOpen;return t&&(null===(n=a.items)||void 0===n?void 0:n.includes(t))?{...a,isOpen:i,isCurrent:!i}:{...a,isOpen:i}}))))},isOpen:s,onOpen:d,onClose:u,onToggle:()=>l((e=>!e)),withIcons:a}},t);function g(){const e=f();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=f();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 f(){return c.map((e=>e.items)).flat().filter((e=>null!=e)).find((e=>e.isCurrent))}},k=()=>{const{onOpen:t,topDropdownItems:a,isOpen:n}=w(),{mainItem:i,otherItems:r,actions:s}=a,l=e.useRef(null),c=u(l),m=e=>({label:e.title,leadingIconName:e.icon,link:{href:e.url}}),d=e.useMemo((()=>[...r.map(m),r.length>0&&{type:"divider",id:"item-divider"},...s.map(m)].filter((e=>null!=e))),[s,r]),p=r.length+s.length;return e.createElement(e.Fragment,null,0===p?e.createElement("a",{className:"maxio-side-nav__menu-button maxio-side-nav__menu-button--large",href:i.url,onClick:t},e.createElement("span",{className:"maxio-side-nav__menu-title"},i.title)):e.createElement("details",{className:"maxio-action-menu maxio-side-nav--action-menu"},e.createElement("summary",{onClick:t,className:"maxio-side-nav__menu-button maxio-side-nav__menu-button--large","aria-haspopup":"true",ref:l},i.url?e.createElement(e.Fragment,null,e.createElement(N,{type:"menu",isTooltipVisible:!n&&c,leadingIcon:i.icon,trailingIcon:"chevron-down",leadingIconClassName:"maxio-icon-circle-fill maxio-icon--success"},i.title)):e.createElement(N,{type:"menu",trailingIcon:"chevron-down"},i.title)),e.createElement(o,{items:d})))},O=({section:t})=>{const{isOpen:a}=w(),n=e.useRef(null),i=u(n);return e.createElement("li",{className:"maxio-side-nav__item","data-key":t.key,"data-testid":"maxio-sidebar-section"},e.createElement("a",{className:"maxio-side-nav__link","aria-current":t.isCurrent?"page":void 0,role:"button",href:t.href,ref:n},e.createElement(N,{isTooltipVisible:i&&!a,type:"menu",leadingIcon:t.icon},t.name)))},C=({section:a})=>{var n;const{onOpen:i,onSectionOpen:o,isOpen:r,withIcons:s}=w();const l=e.useRef(null),c=u(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(){o(a.name),i()}},e.createElement(N,{type:"menu",isTooltipVisible:!r&&c,leadingIcon:a.icon,trailingIcon:(null===(n=a.items)||void 0===n?void 0:n.length)?"chevron-down":void 0},a.name)),a.isOpen&&e.createElement("ul",{className:"maxio-side-nav__menu"},a.items.map((t=>e.createElement("li",{key:`section-sub-item-${t.name}`,className:"maxio-side-nav__item","data-testid":"maxio-section-item"},e.createElement("a",{className:"maxio-side-nav__link",href:t.href,"aria-current":t.isCurrent?"page":void 0},e.createElement("span",{className:"maxio-side-nav__link-title"},t.name)))))))},S=()=>{const{sections:t}=w();return e.createElement("ul",{className:"maxio-side-nav__items"},t.map((t=>e.createElement(C,{key:`section-${t.name}`,section:t}))))},I=()=>{const{isOpen:a}=w();return e.createElement("nav",{className:t("maxio-side-nav",{"maxio-side-nav--collapsed":!a})},e.createElement(k,null),e.createElement("hr",{className:"maxio-side-nav__divider"}),e.createElement(S,null))};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.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.HeaderButton=x,exports.HeaderNav=({items:a})=>e.createElement("ul",{className:"maxio-header-nav"},a.map((({label:a,id:n,isActive:i,...o})=>e.createElement("li",{className:"maxio-header-nav__item",key:`header-nav-list-item-${n}`},e.createElement("a",{className:t("maxio-header-nav__link",{"maxio-header-nav__link--active":i}),...o},a))))),exports.HeaderSearchField=E,exports.HeaderSearchInput=({options:t,onSubmit:a})=>{const n=e.useRef(null),i=e.useRef(null);return e.createElement("form",{className:"maxio-header-search-input",onSubmit:function(e){var t,o;e.preventDefault(),a({searchField:(null===(t=n.current)||void 0===t?void 0:t.value)||"",selectField:(null===(o=i.current)||void 0===o?void 0:o.value)||""})}},e.createElement(_,{ref:i,options:t}),e.createElement(E,{ref:n}),e.createElement(x,{type:"submit","aria-label":"Submit search",iconName:"arrow-right"}))},exports.HeaderSearchMenu=_,exports.Icon=i,exports.Menu=({children:t})=>e.createElement(s,null,e.createElement(l,null,t)),exports.MenuButton=({children:a,iconName:n="chevron-down"})=>{const o=t({"maxio-action-menu__chevron":"chevron-down"===n});return e.createElement("summary",{className:"maxio-header-button","aria-haspopup":"true"},e.createElement("div",{className:"maxio-header-button__content"},a&&e.createElement("span",null,a),n&&e.createElement(i,{variant:n,className:o})))},exports.MenuList=({items:a,alignItemsEnd:n=!1})=>{const i=t("maxio-action-menu__content",{"maxio-action-menu__content--align-end":n});return e.createElement("div",{className:i},e.createElement(o,{items:a}))},exports.OverlayTrigger=v,exports.SideNav=({withIcons:t,shouldToggleSidebar:a,topDropdownItems:n,sections:i,collapseBreakpoint:o=800})=>e.createElement(y,{collapseBreakpoint:o,withIcons:t,shouldToggleSidebar:a,topDropdownItems:n,sections:i},e.createElement(I,null)),exports.Toggle=({defaultChecked:a,checked:n,onChange:i,disabled:o,valueDescription:r,valueDescriptionPosition:s,className:l,name:c,id:m})=>{const d=e.useId(),u="boolean"==typeof a,p=m||d,v="left"===s?"row":"row-reverse",g=r&&s,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":o}),style:{display:"inline-flex",flexDirection:v},"data-testid":"toggle-container"},g?e.createElement("label",{className:"maxio-toggle__label",htmlFor:p},r):null,e.createElement("div",{className:"maxio-toggle__container"},e.createElement("input",{type:"checkbox",defaultChecked:a,checked:n,onChange:e=>{i&&i(e.target.checked,e)},onKeyDown:h,disabled:o,"aria-label":g?void 0:r,className:"maxio-toggle__checkbox",id:p,name:c}),e.createElement("div",{className:"maxio-toggle__track",role:"switch","aria-checked":n},e.createElement("div",{className:"maxio-toggle__handle"}),e.createElement("span",{className:"maxio-toggle__icon"},e.createElement("i",{className:"maxio-toggle__icon-on"})),e.createElement("span",{className:"maxio-toggle__icon"},e.createElement("i",{className:"maxio-toggle__icon-off"})))))},exports.Tooltip=g,exports.TooltipTrigger=f,exports.useHover=u,exports.useOverlayTrigger=d,exports.useWindowSize=p;
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maxio-com/react-ui-components",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "description": "React UI components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -48,5 +48,5 @@
     "classnames": "^2.3.2",
     "framer-motion": "^7.6.4"
   },
-  "gitHead": "3a3c2f74b5a2799f9906f2ccc8a65f48b5faeda7"
+  "gitHead": "8299661844b780e7dd81130302740672f67e056f"
 }

package/typings/index.d.ts

@@ -1,4 +1,43 @@
 /// <reference types="react" />
+import * as React$1 from 'react';
+import React__default, { ReactNode, RefObject, FC } from 'react';
+import * as _floating_ui_react_dom_interactions from '@floating-ui/react-dom-interactions';
+import { AnimationProps } from 'framer-motion';
+
+declare const ICONS: readonly ["address-card", "arrow-down", "arrow-down-left", "arrow-down-right", "arrow-left", "arrow-left-right", "arrow-right", "arrow-up", "arrow-up-left", "arrow-up-right", "bank", "bar-chart", "briefcase", "building", "business-intelligence", "chat", "check", "check-circle", "chevron-down", "circle-dash", "circle-fill", "circle-stroke", "clipboard", "cloud", "cog", "copy-file", "credit-card", "cross", "cross-circle", "dashboard", "document", "document-blank", "dollar", "edit", "error", "globe", "graph", "home", "info-circle", "life-buoy", "list", "login", "logout", "megaphone", "menu", "menu-chevron-left", "menu-chevron-right", "notification", "notification-unread", "plus", "plus-circle", "profile", "question-circle", "recently-viewed", "search", "trash", "warning-circle"];
+
+declare type IconVariant = (typeof ICONS)[number];
+declare type IconProps = {
+    className?: string;
+    variant: IconVariant;
+    white?: boolean;
+};
+
+declare const Icon: ({ variant, white, className }: IconProps) => JSX.Element;
+//# sourceMappingURL=Icon.d.ts.map
+
+interface DividerListItem {
+    id: string | number;
+    type: 'divider';
+}
+interface ListItem {
+    type?: 'default';
+    id?: string | number;
+    label: string;
+    description?: string;
+    leadingIconName?: IconVariant;
+    trailingIconName?: IconVariant;
+    link: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'className'>;
+}
+declare type ActionListItem = ListItem | DividerListItem;
+interface ActionListProps {
+    items: ActionListItem[];
+    isShadowed?: boolean;
+}
+
+declare const ActionList: ({ items, isShadowed }: ActionListProps) => JSX.Element;
+//# sourceMappingURL=ActionList.d.ts.map
+
 declare type AvatarProps = {
     className?: string;
     src: string;
@@ -8,4 +47,210 @@ declare type AvatarProps = {
 declare const Avatar: ({ className, src, alt }: AvatarProps) => JSX.Element;
 //# sourceMappingURL=Avatar.d.ts.map
 
-export { Avatar };
+interface MenuProps {
+    children: ReactNode | (({ isOpen, onClose, }: {
+        isOpen: boolean;
+        onClose: () => void;
+    }) => ReactNode);
+}
+declare const Menu: ({ children }: MenuProps) => JSX.Element;
+
+interface MenuListProps {
+    items: ActionListItem[];
+    alignItemsEnd?: boolean;
+}
+declare const MenuList: ({ items, alignItemsEnd }: MenuListProps) => JSX.Element;
+//# sourceMappingURL=MenuList.d.ts.map
+
+interface MenuButtonProps {
+    children?: ReactNode;
+    iconName?: IconVariant;
+}
+declare const MenuButton: ({ children, iconName, }: MenuButtonProps) => JSX.Element;
+//# sourceMappingURL=MenuButton.d.ts.map
+
+declare const LOGOS: readonly ["avalara", "chargify", "hubspot", "netsuite", "pipedrive", "quickbooks", "sage", "saasoptics", "salesforce", "xero"];
+declare type BrandLogoVariant = 'default' | 'white' | 'grayscale';
+declare type BrandLogoIcon = (typeof LOGOS)[number];
+declare type BrandLogoProps = {
+    icon: BrandLogoIcon;
+    variant?: BrandLogoVariant;
+};
+
+declare const BrandLogo: ({ icon, variant }: BrandLogoProps) => JSX.Element;
+//# sourceMappingURL=BrandLogo.d.ts.map
+
+declare type Alignment = 'start' | 'end';
+declare type Side = 'top' | 'right' | 'bottom' | 'left';
+declare type AlignedPlacement = `${Side}-${Alignment}`;
+declare type Placement = Side | AlignedPlacement;
+declare type Interactions = 'click' | 'hover' | 'focus' | 'dismiss';
+declare type OverlayAriaRole = 'tooltip' | 'dialog' | 'alertdialog' | 'menu' | 'listbox' | 'grid' | 'tree';
+
+declare type OverlayTriggerSettings = {
+    placement?: Placement;
+    isInitiallyActive?: boolean;
+    interactions?: Interactions[];
+    floatingElementOffset?: number;
+    role: OverlayAriaRole;
+    isActive?: boolean;
+    onOverlayUpdate: (isActive: boolean) => void;
+    autoHideMs?: number;
+};
+declare const useOverlayTrigger: ({ placement, isActive, interactions, floatingElementOffset, onOverlayUpdate, autoHideMs, }: OverlayTriggerSettings) => {
+    isActive: boolean;
+    refs: {
+        floating: (node: HTMLElement) => void;
+        reference: (node: _floating_ui_react_dom_interactions.ReferenceType) => void;
+    };
+    floatingElementCSSPosition: {
+        position: _floating_ui_react_dom_interactions.Strategy;
+        top: number;
+        left: number;
+    };
+    getReferenceProps: (userProps?: React$1.HTMLProps<Element>) => Record<string, unknown>;
+    getFloatingProps: (userProps?: React$1.HTMLProps<HTMLElement>) => Record<string, unknown>;
+};
+
+declare function useHover<T extends HTMLElement = HTMLElement>(ref: RefObject<T>, mouseLeaveDelay?: number): boolean;
+
+declare function useWindowSize(debounce?: number): {
+    windowWitdh: number;
+    windowHeight: number;
+};
+
+declare type OverlayTriggerProps = {
+    children: React__default.ReactNode;
+    placement?: Placement;
+    usePortal?: boolean;
+    interactions?: Interactions[];
+    renderOverlay: () => React__default.ReactNode;
+    role?: OverlayAriaRole;
+    floatingElementOffset?: number;
+    isActive?: boolean;
+    onOverlayUpdate: (isActive: boolean) => void;
+    motionSettings?: AnimationProps;
+    autoHideMs?: number;
+    className?: string;
+};
+declare const OverlayTrigger: FC<OverlayTriggerProps>;
+
+declare type ToggleProps = {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (value: boolean, event?: React__default.ChangeEvent<HTMLInputElement> | React__default.KeyboardEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+    name?: string;
+    valueDescription?: string;
+    valueDescriptionPosition?: 'left' | 'right';
+    className?: string;
+    id?: string;
+};
+declare const Toggle: ({ defaultChecked, checked, onChange, disabled, valueDescription, valueDescriptionPosition, className, name, id, }: ToggleProps) => JSX.Element;
+
+declare type ArrowPosition = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-top' | 'left-bottom' | 'right' | 'right-top' | 'right-bottom';
+
+declare type TooltipProps = {
+    children: React__default.ReactNode;
+    size?: 'regular' | 'small';
+    arrowPosition?: ArrowPosition;
+    maxWidth?: number | 'none';
+};
+declare const Tooltip: FC<TooltipProps>;
+
+declare type TooltipTriggerProps = {
+    children: React__default.ReactNode;
+    isVisible?: boolean;
+    onVisibilityUpdate?: (isVisible: boolean) => void;
+    renderContent: () => React__default.ReactNode;
+    floatingElementOffset?: number;
+} & Pick<OverlayTriggerProps, 'placement' | 'interactions' | 'usePortal' | 'autoHideMs' | 'className'> & Pick<TooltipProps, 'size' | 'maxWidth'>;
+declare const TooltipTrigger: FC<TooltipTriggerProps>;
+
+interface HeaderButtonProps<T extends React__default.ElementType> {
+    className?: string;
+    children?: React__default.ReactNode;
+    iconName?: IconVariant;
+    as?: T;
+    noPadding?: boolean;
+}
+declare const HeaderButton: <T extends React__default.ElementType<any> = "button">({ children, as, iconName, noPadding, className, ...props }: HeaderButtonProps<T> & Omit<React__default.PropsWithoutRef<React__default.ComponentProps<T>>, keyof HeaderButtonProps<T>>) => JSX.Element;
+
+interface HeaderNavItem extends Omit<React__default.AnchorHTMLAttributes<HTMLAnchorElement>, 'id'> {
+    id: string | number;
+    label: string;
+    isActive?: boolean;
+}
+interface HeaderNavProps {
+    items: HeaderNavItem[];
+}
+declare const HeaderNav: ({ items }: HeaderNavProps) => JSX.Element;
+//# sourceMappingURL=HeaderNav.d.ts.map
+
+declare const SearchField: React__default.ForwardRefExoticComponent<Pick<React__default.HTMLProps<HTMLInputElement>, "className" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & React__default.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=SearchField.d.ts.map
+
+interface SearchMenuOption {
+    label: string;
+    value: string;
+}
+interface SearchMenuProps extends React__default.HTMLProps<HTMLSelectElement> {
+    options: SearchMenuOption[];
+}
+declare const SearchMenu: React__default.ForwardRefExoticComponent<Pick<SearchMenuProps, "options" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & React__default.RefAttributes<HTMLSelectElement>>;
+
+interface SearchInputProps {
+    onSubmit: ({ searchField, selectField, }: {
+        selectField: string;
+        searchField: string;
+    }) => void;
+    options: SearchMenuOption[];
+}
+declare const SearchInput: ({ options, onSubmit }: SearchInputProps) => JSX.Element;
+//# sourceMappingURL=SearchInput.d.ts.map
+
+interface SingleSection {
+    href?: string;
+    icon: IconVariant | null;
+    name: string;
+    key: string;
+    isCurrent?: boolean;
+    options?: {
+        upgradePlan: boolean;
+        text: string;
+    } | null;
+}
+interface SingleSectionWithItems extends SingleSection {
+    isOpen?: boolean;
+    items?: SingleSection[];
+}
+declare type SectionComponent = React.FC<{
+    section: SingleSectionWithItems;
+}>;
+interface Section extends SingleSectionWithItems {
+    Component?: SectionComponent;
+}
+interface SideNavProviderProps {
+    children: ReactNode;
+    withIcons?: boolean;
+    shouldToggleSidebar?: boolean;
+    sections: Section[];
+    collapseBreakpoint?: number;
+    topDropdownItems: SideNavTopDropdown;
+}
+interface SideNavTopDropdown {
+    mainItem: SideNavTopDropdownItem;
+    otherItems: SideNavTopDropdownItem[];
+    actions: SideNavTopDropdownItem[];
+}
+interface SideNavTopDropdownItem {
+    title: string;
+    icon: IconVariant;
+    url: string;
+    rel?: string;
+}
+
+declare const SideNavWrapper: ({ withIcons, shouldToggleSidebar, topDropdownItems, sections, collapseBreakpoint, }: Pick<SideNavProviderProps, 'withIcons' | 'shouldToggleSidebar' | 'topDropdownItems' | 'sections' | 'collapseBreakpoint'>) => JSX.Element;
+//# sourceMappingURL=SideNav.d.ts.map
+
+export { ActionList, Avatar, BrandLogo, HeaderButton, HeaderNav, SearchField as HeaderSearchField, SearchInput as HeaderSearchInput, SearchMenu as HeaderSearchMenu, Icon, Interactions, Menu, MenuButton, MenuList, OverlayAriaRole, OverlayTrigger, Placement, SideNavWrapper as SideNav, Toggle, Tooltip, TooltipTrigger, useHover, useOverlayTrigger, useWindowSize };