@canonical/maas-react-components 1.14.0 → 1.14.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -380,7 +380,7 @@ const $ = ({
380
380
  className: l("content-section__title p-heading--4", n),
381
381
  children: e
382
382
  }
383
- ), Re = ({ children: e, className: n }) => /* @__PURE__ */ t("div", { className: l("content-section__header", n), children: e }), Ee = ({ children: e, className: n }) => /* @__PURE__ */ t("div", { className: l("content-section__body", n), children: e }), Ae = ({ children: e, className: n }) => /* @__PURE__ */ t("div", { className: l("content-section__footer", n), children: e });
383
+ ), Re = ({ children: e, className: n }) => /* @__PURE__ */ t("header", { className: l("content-section__header", n), children: e }), Ee = ({ children: e, className: n }) => /* @__PURE__ */ t("div", { className: l("content-section__body", n), children: e }), Ae = ({ children: e, className: n }) => /* @__PURE__ */ t("footer", { className: l("content-section__footer", n), children: e });
384
384
  $.Title = Me;
385
385
  $.Header = Re;
386
386
  $.Content = Ee;
@@ -8,4 +8,4 @@
8
8
  transparent ${a-M}px,
9
9
  ${w} ${a-M}px,
10
10
  ${w} ${a}px
11
- )`});return n.jsxs(n.Fragment,{children:[r()?n.jsx("div",{className:"p-meter__filled","data-testid":h.meteroverflow,style:{backgroundColor:B,width:"100%"}}):e==null?void 0:e.map((c,u)=>n.jsx("div",{className:"p-meter__filled","data-testid":h.filled,style:s(c,u)},`meter-${u}`)),a>0&&n.jsx("div",{className:"p-meter__separators","data-testid":h.segments,style:p()})]})},Q=({className:e,children:t})=>n.jsx("div",{className:i("p-meter__label",e),"data-testid":h.label,children:t});O.Label=Q;const U=({children:e,to:t,...o})=>n.jsx(g.Link,{...o,href:t,rel:"noreferrer noopener",target:"_blank",children:e}),V=({children:e})=>n.jsx(n.Fragment,{children:e}),X=({isCollapsed:e,setIsCollapsed:t,className:o})=>n.jsx(g.Tooltip,{className:"p-side-navigation__tooltip-wrapper",message:n.jsxs(n.Fragment,{children:[e?"expand":"collapse","( ",n.jsx("code",{children:"["})," )"]}),position:"right",tooltipClassName:"p-side-navigation__tooltip",children:n.jsx(g.Button,{appearance:"base","aria-label":`${e?"expand":"collapse"} main navigation`,className:i("is-dense has-icon is-dark u-no-margin l-navigation-collapse-toggle",o),onClick:a=>{t(!e),a.stopPropagation(),a.currentTarget.blur()},children:n.jsx(g.Icon,{light:!0,name:"sidebar-toggle"})})}),Y=({children:e})=>n.jsx("div",{className:"p-panel__content",children:n.jsx("nav",{className:"p-side-navigation--icons is-dark",children:e})}),Z=({children:e})=>n.jsx("div",{className:"p-panel__controls u-no-margin--top",children:e}),R=({children:e})=>n.jsx("div",{className:"l-navigation__drawer",children:n.jsx("div",{className:"p-panel is-dark",children:e})}),ee=({children:e})=>n.jsx("div",{className:"p-panel__footer",children:e}),ne=({children:e})=>n.jsx("div",{className:"p-panel__header",children:e}),te=({light:e=!0,name:t})=>n.jsx(g.Icon,{className:"p-side-navigation__icon",light:e,name:t}),oe=({children:e,className:t,hasActiveChild:o})=>n.jsx("li",{className:i("p-side-navigation__item",t,{"has-active-child":o}),children:e}),ae=({children:e,id:t,variant:o="base"})=>n.jsx("span",{className:i("p-side-navigation__label",{"p-side-navigation__label--group":o==="group"}),id:t,children:e}),re=({as:e,...t})=>{const o=e||"a";return n.jsx(o,{className:i("p-side-navigation__link",t.className),...t})},se=({children:e,className:t})=>n.jsx("ul",{className:i("p-side-navigation__list",t),children:e}),le=({as:e,children:t,className:o,...a})=>{const r=e||"a";return n.jsx(r,{className:i("p-panel__logo",o),...a,children:n.jsx("div",{className:"p-navigation__tagged-logo",children:t})})},ie=({children:e})=>_.cloneElement(e,{className:"p-panel__logo-icon p-navigation__logo-icon"}),ce=({children:e,variant:t="base"})=>n.jsx("div",{className:i("p-panel__logo-name is-fading-when-collapsed",{"p-panel__logo-name--small":t==="small"}),children:e}),de=({children:e})=>n.jsx("div",{className:"p-navigation__logo-tag",children:e}),pe=({children:e})=>n.jsx("span",{className:"p-panel__logo-text",children:e}),ue=({children:e,className:t,onClick:o})=>n.jsx(g.Button,{appearance:"base",className:i("p-side-navigation__button--menu has-icon is-dark",t),onClick:a=>{o&&o(a),a.stopPropagation(),a.currentTarget.blur()},children:e}),ge=({children:e})=>n.jsx("span",{className:"p-side-navigation__text",children:e}),Be="",d=({children:e,className:t,isCollapsed:o})=>n.jsx("header",{"aria-label":"main navigation",className:i("l-navigation is-maas",t,{"is-collapsed":o,"is-pinned":!o}),children:e}),E=({children:e,className:t})=>n.jsx("header",{"aria-label":"navigation",className:"l-navigation-bar",children:n.jsx("div",{className:i("p-panel is-dark",t),children:e})});d.Header=ne,d.Banner=V,d.Drawer=R,d.Controls=Z,d.CollapseToggle=X,d.Content=Y,d.Footer=ee,d.List=se,d.Item=oe,d.Link=re,d.Text=ge,d.Icon=te,d.Label=ae,d.Logo=le,d.LogoTag=de,d.LogoIcon=ie,d.LogoName=ce,d.LogoText=pe,E.MenuButton=ue;const xe="",$=_.createContext(null),y=({children:e})=>{const t=_.useId();return n.jsx($.Provider,{value:t,children:n.jsx("div",{role:"group","aria-labelledby":`${t}_label`,"aria-describedby":`${t}_description`,className:"p-input-group",children:e})})},_e=({children:e})=>{const t=_.useContext($);return n.jsx("label",{id:`${t}_label`,children:e})},me=({children:e})=>{const t=_.useContext($);return n.jsx("p",{className:"p-form-help-text",id:`${t}_description`,children:e})};y.Label=_e,y.Description=me;const Me="",F=({children:e})=>n.jsx("div",{className:"p-form-section",children:e}),ve=({children:e})=>n.jsx("h5",{className:"p-form-section__title u-no-padding--top",children:e}),be=({children:e})=>n.jsx("p",{className:"p-form-help-text",children:e}),fe=({children:e})=>n.jsx("div",{className:"p-form-section__content",children:e});F.Title=ve,F.Description=be,F.Content=fe;const De="";function Ne(e){const[t,o]=m.useState(null),a=m.useRef(null),r=m.useCallback(()=>{if(e.current){const s=e.current.getBoundingClientRect();o(s)}},[e]);return m.useEffect(()=>{const s=new ResizeObserver(()=>{a.current&&cancelAnimationFrame(a.current),a.current=requestAnimationFrame(r)});return e.current&&s.observe(e.current),()=>{a.current&&cancelAnimationFrame(a.current),s.disconnect()}},[e,r]),t}const P=m.createContext(null),j=m.createContext([!1,()=>{}]),I=({children:e})=>{const t=m.useRef(null),o=Ne(t),[a,r]=m.useState(!1);return n.jsx("header",{className:i("main-toolbar",{"main-toolbar--stacked":a}),ref:t,children:n.jsx(P.Provider,{value:o,children:n.jsx(j.Provider,{value:[a,r],children:e})})})},he=({as:e,children:t,className:o,...a})=>{const r=e||"h1";return n.jsx(r,{className:i("main-toolbar__title p-heading--4",o),"data-testid":"main-toolbar-heading",...a,children:t})},Ce=({children:e})=>{const t=m.useContext(P),[o,a]=m.useContext(j),r=m.useRef(null);return m.useEffect(()=>{!r.current||!t||a(r.current.getBoundingClientRect().width>t.width)},[a,t,r]),n.jsxs(n.Fragment,{children:[n.jsx("div",{"aria-hidden":"true",className:"main-toolbar__controls main-toolbar__controls--observer",ref:r,style:{visibility:"hidden",position:"absolute"},children:e}),n.jsx("div",{className:i("main-toolbar__controls",{"main-toolbar__controls--stacked":o}),children:e})]})};I.Title=he,I.Controls=Ce;const Oe="",C=({children:e,className:t,as:o,variant:a="wide",...r})=>{const s=o||"section",p=i("content-section",t);return n.jsx(s,{...r,className:p,children:n.jsx(g.Row,{children:n.jsx(g.Col,{size:a==="narrow"?6:12,children:e})})})},Se=({children:e,className:t,as:o,...a})=>{const r=o||"h1";return n.jsx(r,{...a,className:i("content-section__title p-heading--4",t),children:e})},ke=({children:e,className:t})=>n.jsx("div",{className:i("content-section__header",t),children:e}),Fe=({children:e,className:t})=>n.jsx("div",{className:i("content-section__body",t),children:e}),we=({children:e,className:t})=>n.jsx("div",{className:i("content-section__footer",t),children:e});C.Title=Se,C.Header=ke,C.Content=Fe,C.Footer=we;const Ee="",$e=({children:e,...t})=>n.jsx("div",{className:"p-form__nested-group",...t,children:e}),Pe="",G=({currentPage:e,error:t,disabled:o,onInputBlur:a,onInputChange:r,onNextClick:s,onPreviousClick:p,totalPages:c})=>n.jsx("nav",{"aria-label":"pagination",className:"p-pagination",children:n.jsxs("span",{className:"p-pagination--items",children:[n.jsx(g.Button,{"aria-label":"Previous page",className:"p-pagination__link--previous",disabled:e===1||o,onClick:p,type:"button",children:n.jsx(g.Icon,{name:"chevron-down"})}),n.jsx("strong",{children:"Page "})," ",n.jsx(g.Input,{"aria-label":"page number",className:"p-pagination__input",disabled:o,error:t,min:1,onBlur:a,onChange:r,required:!0,type:"number",value:e})," ",n.jsxs("strong",{className:"u-no-wrap",children:[" of ",c]}),n.jsx(g.Button,{"aria-label":"Next page",className:"p-pagination__link--next",disabled:e===c||o,onClick:s,type:"button",children:n.jsx(g.Icon,{name:"chevron-up"})})]})}),ye=({currentPage:e,disabled:t,paginate:o,totalPages:a})=>{const[r,s]=_.useState(e),[p,c]=_.useState(""),u=()=>{s(e),c("")},v=b=>{const{value:L,valueAsNumber:f}=b.target;L?(s(f),f>a||f<1?c(`${f} is not a valid page number.`):(c(""),o(f))):c("Enter a page number.")},S=()=>{s(b=>Number(b)-1),o(Number(e)-1)},k=()=>{s(b=>Number(b)+1),o(Number(e)+1)};return n.jsx(G,{currentPage:r,error:p,disabled:t,onInputBlur:u,onInputChange:v,onNextClick:k,onPreviousClick:S,totalPages:a})},je="",Ie=({activeStep:e,items:t})=>n.jsx("ol",{className:"stepper",children:t.map((o,a)=>{const r=a===e,s=a<e;return n.jsx("li",{"aria-label":o,className:"stepper__item",children:n.jsx("p",{"aria-label":s?`${o} (completed)`:o,className:i("stepper__title",{"stepper__title--is-active":r,"stepper__title--is-complete":s}),children:o})},a)})});l.ContentSection=C,l.ExternalLink=U,l.FormSection=F,l.InputGroup=y,l.MainToolbar=I,l.Meter=O,l.Navigation=d,l.NavigationBar=E,l.NestedFormGroup=$e,l.Pagination=G,l.PaginationContainer=ye,l.Stepper=Ie,l.defaultFilledColors=H,l.meterColor=N,l.testIds=h,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});
11
+ )`});return n.jsxs(n.Fragment,{children:[r()?n.jsx("div",{className:"p-meter__filled","data-testid":h.meteroverflow,style:{backgroundColor:B,width:"100%"}}):e==null?void 0:e.map((c,u)=>n.jsx("div",{className:"p-meter__filled","data-testid":h.filled,style:s(c,u)},`meter-${u}`)),a>0&&n.jsx("div",{className:"p-meter__separators","data-testid":h.segments,style:p()})]})},Q=({className:e,children:t})=>n.jsx("div",{className:i("p-meter__label",e),"data-testid":h.label,children:t});O.Label=Q;const U=({children:e,to:t,...o})=>n.jsx(g.Link,{...o,href:t,rel:"noreferrer noopener",target:"_blank",children:e}),V=({children:e})=>n.jsx(n.Fragment,{children:e}),X=({isCollapsed:e,setIsCollapsed:t,className:o})=>n.jsx(g.Tooltip,{className:"p-side-navigation__tooltip-wrapper",message:n.jsxs(n.Fragment,{children:[e?"expand":"collapse","( ",n.jsx("code",{children:"["})," )"]}),position:"right",tooltipClassName:"p-side-navigation__tooltip",children:n.jsx(g.Button,{appearance:"base","aria-label":`${e?"expand":"collapse"} main navigation`,className:i("is-dense has-icon is-dark u-no-margin l-navigation-collapse-toggle",o),onClick:a=>{t(!e),a.stopPropagation(),a.currentTarget.blur()},children:n.jsx(g.Icon,{light:!0,name:"sidebar-toggle"})})}),Y=({children:e})=>n.jsx("div",{className:"p-panel__content",children:n.jsx("nav",{className:"p-side-navigation--icons is-dark",children:e})}),Z=({children:e})=>n.jsx("div",{className:"p-panel__controls u-no-margin--top",children:e}),R=({children:e})=>n.jsx("div",{className:"l-navigation__drawer",children:n.jsx("div",{className:"p-panel is-dark",children:e})}),ee=({children:e})=>n.jsx("div",{className:"p-panel__footer",children:e}),ne=({children:e})=>n.jsx("div",{className:"p-panel__header",children:e}),te=({light:e=!0,name:t})=>n.jsx(g.Icon,{className:"p-side-navigation__icon",light:e,name:t}),oe=({children:e,className:t,hasActiveChild:o})=>n.jsx("li",{className:i("p-side-navigation__item",t,{"has-active-child":o}),children:e}),ae=({children:e,id:t,variant:o="base"})=>n.jsx("span",{className:i("p-side-navigation__label",{"p-side-navigation__label--group":o==="group"}),id:t,children:e}),re=({as:e,...t})=>{const o=e||"a";return n.jsx(o,{className:i("p-side-navigation__link",t.className),...t})},se=({children:e,className:t})=>n.jsx("ul",{className:i("p-side-navigation__list",t),children:e}),le=({as:e,children:t,className:o,...a})=>{const r=e||"a";return n.jsx(r,{className:i("p-panel__logo",o),...a,children:n.jsx("div",{className:"p-navigation__tagged-logo",children:t})})},ie=({children:e})=>_.cloneElement(e,{className:"p-panel__logo-icon p-navigation__logo-icon"}),ce=({children:e,variant:t="base"})=>n.jsx("div",{className:i("p-panel__logo-name is-fading-when-collapsed",{"p-panel__logo-name--small":t==="small"}),children:e}),de=({children:e})=>n.jsx("div",{className:"p-navigation__logo-tag",children:e}),pe=({children:e})=>n.jsx("span",{className:"p-panel__logo-text",children:e}),ue=({children:e,className:t,onClick:o})=>n.jsx(g.Button,{appearance:"base",className:i("p-side-navigation__button--menu has-icon is-dark",t),onClick:a=>{o&&o(a),a.stopPropagation(),a.currentTarget.blur()},children:e}),ge=({children:e})=>n.jsx("span",{className:"p-side-navigation__text",children:e}),Be="",d=({children:e,className:t,isCollapsed:o})=>n.jsx("header",{"aria-label":"main navigation",className:i("l-navigation is-maas",t,{"is-collapsed":o,"is-pinned":!o}),children:e}),E=({children:e,className:t})=>n.jsx("header",{"aria-label":"navigation",className:"l-navigation-bar",children:n.jsx("div",{className:i("p-panel is-dark",t),children:e})});d.Header=ne,d.Banner=V,d.Drawer=R,d.Controls=Z,d.CollapseToggle=X,d.Content=Y,d.Footer=ee,d.List=se,d.Item=oe,d.Link=re,d.Text=ge,d.Icon=te,d.Label=ae,d.Logo=le,d.LogoTag=de,d.LogoIcon=ie,d.LogoName=ce,d.LogoText=pe,E.MenuButton=ue;const xe="",$=_.createContext(null),y=({children:e})=>{const t=_.useId();return n.jsx($.Provider,{value:t,children:n.jsx("div",{role:"group","aria-labelledby":`${t}_label`,"aria-describedby":`${t}_description`,className:"p-input-group",children:e})})},_e=({children:e})=>{const t=_.useContext($);return n.jsx("label",{id:`${t}_label`,children:e})},me=({children:e})=>{const t=_.useContext($);return n.jsx("p",{className:"p-form-help-text",id:`${t}_description`,children:e})};y.Label=_e,y.Description=me;const Me="",F=({children:e})=>n.jsx("div",{className:"p-form-section",children:e}),ve=({children:e})=>n.jsx("h5",{className:"p-form-section__title u-no-padding--top",children:e}),be=({children:e})=>n.jsx("p",{className:"p-form-help-text",children:e}),fe=({children:e})=>n.jsx("div",{className:"p-form-section__content",children:e});F.Title=ve,F.Description=be,F.Content=fe;const De="";function Ne(e){const[t,o]=m.useState(null),a=m.useRef(null),r=m.useCallback(()=>{if(e.current){const s=e.current.getBoundingClientRect();o(s)}},[e]);return m.useEffect(()=>{const s=new ResizeObserver(()=>{a.current&&cancelAnimationFrame(a.current),a.current=requestAnimationFrame(r)});return e.current&&s.observe(e.current),()=>{a.current&&cancelAnimationFrame(a.current),s.disconnect()}},[e,r]),t}const P=m.createContext(null),j=m.createContext([!1,()=>{}]),I=({children:e})=>{const t=m.useRef(null),o=Ne(t),[a,r]=m.useState(!1);return n.jsx("header",{className:i("main-toolbar",{"main-toolbar--stacked":a}),ref:t,children:n.jsx(P.Provider,{value:o,children:n.jsx(j.Provider,{value:[a,r],children:e})})})},he=({as:e,children:t,className:o,...a})=>{const r=e||"h1";return n.jsx(r,{className:i("main-toolbar__title p-heading--4",o),"data-testid":"main-toolbar-heading",...a,children:t})},Ce=({children:e})=>{const t=m.useContext(P),[o,a]=m.useContext(j),r=m.useRef(null);return m.useEffect(()=>{!r.current||!t||a(r.current.getBoundingClientRect().width>t.width)},[a,t,r]),n.jsxs(n.Fragment,{children:[n.jsx("div",{"aria-hidden":"true",className:"main-toolbar__controls main-toolbar__controls--observer",ref:r,style:{visibility:"hidden",position:"absolute"},children:e}),n.jsx("div",{className:i("main-toolbar__controls",{"main-toolbar__controls--stacked":o}),children:e})]})};I.Title=he,I.Controls=Ce;const Oe="",C=({children:e,className:t,as:o,variant:a="wide",...r})=>{const s=o||"section",p=i("content-section",t);return n.jsx(s,{...r,className:p,children:n.jsx(g.Row,{children:n.jsx(g.Col,{size:a==="narrow"?6:12,children:e})})})},Se=({children:e,className:t,as:o,...a})=>{const r=o||"h1";return n.jsx(r,{...a,className:i("content-section__title p-heading--4",t),children:e})},ke=({children:e,className:t})=>n.jsx("header",{className:i("content-section__header",t),children:e}),Fe=({children:e,className:t})=>n.jsx("div",{className:i("content-section__body",t),children:e}),we=({children:e,className:t})=>n.jsx("footer",{className:i("content-section__footer",t),children:e});C.Title=Se,C.Header=ke,C.Content=Fe,C.Footer=we;const Ee="",$e=({children:e,...t})=>n.jsx("div",{className:"p-form__nested-group",...t,children:e}),Pe="",G=({currentPage:e,error:t,disabled:o,onInputBlur:a,onInputChange:r,onNextClick:s,onPreviousClick:p,totalPages:c})=>n.jsx("nav",{"aria-label":"pagination",className:"p-pagination",children:n.jsxs("span",{className:"p-pagination--items",children:[n.jsx(g.Button,{"aria-label":"Previous page",className:"p-pagination__link--previous",disabled:e===1||o,onClick:p,type:"button",children:n.jsx(g.Icon,{name:"chevron-down"})}),n.jsx("strong",{children:"Page "})," ",n.jsx(g.Input,{"aria-label":"page number",className:"p-pagination__input",disabled:o,error:t,min:1,onBlur:a,onChange:r,required:!0,type:"number",value:e})," ",n.jsxs("strong",{className:"u-no-wrap",children:[" of ",c]}),n.jsx(g.Button,{"aria-label":"Next page",className:"p-pagination__link--next",disabled:e===c||o,onClick:s,type:"button",children:n.jsx(g.Icon,{name:"chevron-up"})})]})}),ye=({currentPage:e,disabled:t,paginate:o,totalPages:a})=>{const[r,s]=_.useState(e),[p,c]=_.useState(""),u=()=>{s(e),c("")},v=b=>{const{value:L,valueAsNumber:f}=b.target;L?(s(f),f>a||f<1?c(`${f} is not a valid page number.`):(c(""),o(f))):c("Enter a page number.")},S=()=>{s(b=>Number(b)-1),o(Number(e)-1)},k=()=>{s(b=>Number(b)+1),o(Number(e)+1)};return n.jsx(G,{currentPage:r,error:p,disabled:t,onInputBlur:u,onInputChange:v,onNextClick:k,onPreviousClick:S,totalPages:a})},je="",Ie=({activeStep:e,items:t})=>n.jsx("ol",{className:"stepper",children:t.map((o,a)=>{const r=a===e,s=a<e;return n.jsx("li",{"aria-label":o,className:"stepper__item",children:n.jsx("p",{"aria-label":s?`${o} (completed)`:o,className:i("stepper__title",{"stepper__title--is-active":r,"stepper__title--is-complete":s}),children:o})},a)})});l.ContentSection=C,l.ExternalLink=U,l.FormSection=F,l.InputGroup=y,l.MainToolbar=I,l.Meter=O,l.Navigation=d,l.NavigationBar=E,l.NestedFormGroup=$e,l.Pagination=G,l.PaginationContainer=ye,l.Stepper=Ie,l.defaultFilledColors=H,l.meterColor=N,l.testIds=h,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@canonical/maas-react-components",
3
3
  "description": "React components for use in MAAS UI projects.",
4
- "version": "1.14.0",
4
+ "version": "1.14.1",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/canonical/maas-react-components.git"