@canonical/maas-react-components 1.10.1 → 1.11.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.
|
@@ -323,13 +323,18 @@ const O = m.createContext(null), P = m.createContext([!1, () => {
|
|
|
323
323
|
children: /* @__PURE__ */ t(O.Provider, { value: o, children: /* @__PURE__ */ t(P.Provider, { value: [a, r], children: e }) })
|
|
324
324
|
}
|
|
325
325
|
);
|
|
326
|
-
}, Te = ({
|
|
327
|
-
|
|
326
|
+
}, Te = ({
|
|
327
|
+
as: e,
|
|
328
|
+
children: n,
|
|
329
|
+
className: o,
|
|
330
|
+
...a
|
|
331
|
+
}) => /* @__PURE__ */ t(
|
|
332
|
+
e || "h1",
|
|
328
333
|
{
|
|
329
|
-
className: "main-toolbar__title p-heading--4",
|
|
334
|
+
className: l("main-toolbar__title p-heading--4", o),
|
|
330
335
|
"data-testid": "main-toolbar-heading",
|
|
331
|
-
...
|
|
332
|
-
children:
|
|
336
|
+
...a,
|
|
337
|
+
children: n
|
|
333
338
|
}
|
|
334
339
|
), Be = ({ children: e }) => {
|
|
335
340
|
const n = m.useContext(O), [o, a] = m.useContext(P), r = m.useRef(null);
|
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
Copyright (c) 2018 Jed Watson.
|
|
3
3
|
Licensed under the MIT License (MIT), see
|
|
4
4
|
http://jedwatson.github.io/classnames
|
|
5
|
-
*/(function(e){(function(){var t={}.hasOwnProperty;function o(){for(var a=[],r=0;r<arguments.length;r++){var s=arguments[r];if(s){var g=typeof s;if(g==="string"||g==="number")a.push(s);else if(Array.isArray(s)){if(s.length){var l=o.apply(null,s);l&&a.push(l)}}else if(g==="object"){if(s.toString!==Object.prototype.toString&&!s.toString.toString().includes("[native code]")){a.push(s.toString());continue}for(var p in s)t.call(s,p)&&s[p]&&a.push(p)}}}return a.join(" ")}e.exports?(o.default=o,e.exports=o):window.classNames=o})()})($);var q=$.exports;const
|
|
5
|
+
*/(function(e){(function(){var t={}.hasOwnProperty;function o(){for(var a=[],r=0;r<arguments.length;r++){var s=arguments[r];if(s){var g=typeof s;if(g==="string"||g==="number")a.push(s);else if(Array.isArray(s)){if(s.length){var l=o.apply(null,s);l&&a.push(l)}}else if(g==="object"){if(s.toString!==Object.prototype.toString&&!s.toString.toString().includes("[native code]")){a.push(s.toString());continue}for(var p in s)t.call(s,p)&&s[p]&&a.push(p)}}}return a.join(" ")}e.exports?(o.default=o,e.exports=o):window.classNames=o})()})($);var q=$.exports;const c=z(q),Le="",N={caution:"#F99B11",light:"#F7F7F7",linkFaded:"#D3E4ED",link:"#0066CC",negative:"#C7162B",positiveFaded:"#B7CCB9",positiveMid:"#4DAB4D",positive:"#0E8420"},H=[N.link,N.positive,N.negative,N.caution],W=N.linkFaded,B=N.caution,y=N.light,x=2,M=1,D=(e,t)=>{var r,s;const o=((s=(r=e==null?void 0:e.current)==null?void 0:r.getBoundingClientRect())==null?void 0:s.width)||0;return o>t*x?o/t:x},h={bar:"meter-bar",container:"meter-container",filled:"meter-filled",label:"meter-label",meteroverflow:"meter-overflow",segments:"meter-segments"},O=({className:e,children:t,data:o,max:a,variant:r="regular",size:s="regular",...g})=>{const l=m.useRef(null),p=o==null?void 0:o.reduce((f,Ie)=>f+Ie.value,0),_=a||p,C=o.map(f=>f.value/_*100),[k,b]=m.useState(0);m.useEffect(()=>{b(r==="segmented"?D(l,_):0)},[_,r]);const T=m.useCallback(()=>{b(D(l,_))},[l,_,b]);return u.useListener(window,T,"resize",!0,r==="segmented"),n.jsxs("div",{className:c("p-meter",e,{"p-meter--small":s==="small"}),"aria-label":g==null?void 0:g["aria-label"],"data-testid":h.container,ref:l,children:[n.jsx(J,{children:n.jsx(K,{data:o,datumWidths:C,maximum:_,overColor:B,segmentWidth:k,separatorColor:y})}),t]})},J=({children:e})=>n.jsx("div",{className:"p-meter__bar","data-testid":h.bar,style:{backgroundColor:W},children:e}),K=({data:e,datumWidths:t,maximum:o,segmentWidth:a})=>{const r=()=>(e==null?void 0:e.reduce((l,p)=>l+p.value,0))>o,s=(l,p)=>({backgroundColor:l.color,left:`${t==null?void 0:t.reduce((_,C,k)=>p>k?_+C:_,0)}%`,width:`${t[p]}%`}),g=()=>({background:`repeating-linear-gradient(
|
|
6
6
|
to right,
|
|
7
7
|
transparent 0,
|
|
8
8
|
transparent ${a-M}px,
|
|
9
9
|
${y} ${a-M}px,
|
|
10
10
|
${y} ${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((l,p)=>n.jsx("div",{className:"p-meter__filled","data-testid":h.filled,style:s(l,p)},`meter-${p}`)),a>0&&n.jsx("div",{className:"p-meter__separators","data-testid":h.segments,style:g()})]})},Q=({className:e,children:t})=>n.jsx("div",{className:
|
|
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((l,p)=>n.jsx("div",{className:"p-meter__filled","data-testid":h.filled,style:s(l,p)},`meter-${p}`)),a>0&&n.jsx("div",{className:"p-meter__separators","data-testid":h.segments,style:g()})]})},Q=({className:e,children:t})=>n.jsx("div",{className:c("p-meter__label",e),"data-testid":h.label,children:t});O.Label=Q;const U=({children:e,to:t,...o})=>n.jsx(u.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(u.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(u.Button,{appearance:"base","aria-label":`${e?"expand":"collapse"} main navigation`,className:c("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(u.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(u.Icon,{className:"p-side-navigation__icon",light:e,name:t}),oe=({children:e,className:t,hasActiveChild:o})=>n.jsx("li",{className:c("p-side-navigation__item",t,{"has-active-child":o}),children:e}),ae=({children:e,id:t,variant:o="base"})=>n.jsx("span",{className:c("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:c("p-side-navigation__link",t.className),...t})},se=({children:e,className:t})=>n.jsx("ul",{className:c("p-side-navigation__list",t),children:e}),ie=({as:e,children:t,className:o,...a})=>{const r=e||"a";return n.jsx(r,{className:c("p-panel__logo",o),...a,children:n.jsx("div",{className:"p-navigation__tagged-logo",children:t})})},le=({children:e})=>m.cloneElement(e,{className:"p-panel__logo-icon p-navigation__logo-icon"}),ce=({children:e,variant:t="base"})=>n.jsx("div",{className:c("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(u.Button,{appearance:"base",className:c("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}),Te="",d=({children:e,className:t,isCollapsed:o})=>n.jsx("header",{"aria-label":"main navigation",className:c("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:c("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=ie,d.LogoTag=de,d.LogoIcon=le,d.LogoName=ce,d.LogoText=pe,E.MenuButton=ue;const $e="",w=m.createContext(null),I=({children:e})=>{const t=m.useId();return n.jsx(w.Provider,{value:t,children:n.jsx("div",{role:"group","aria-labelledby":`${t}_label`,"aria-describedby":`${t}_description`,className:"p-input-group",children:e})})},me=({children:e})=>{const t=m.useContext(w);return n.jsx("label",{id:`${t}_label`,children:e})},ve=({children:e})=>{const t=m.useContext(w);return n.jsx("p",{className:"p-form-help-text",id:`${t}_description`,children:e})};I.Label=me,I.Description=ve;const Be="",S=({children:e})=>n.jsx("div",{className:"p-form-section",children:e}),_e=({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});S.Title=_e,S.Description=be,S.Content=fe;const xe="";function Ne(e){const[t,o]=v.useState(null),a=v.useRef(null),r=v.useCallback(()=>{if(e.current){const s=e.current.getBoundingClientRect();o(s)}},[e]);return v.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=v.createContext(null),j=v.createContext([!1,()=>{}]),L=({children:e})=>{const t=v.useRef(null),o=Ne(t),[a,r]=v.useState(!1);return n.jsx("header",{className:c("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:c("main-toolbar__title p-heading--4",o),"data-testid":"main-toolbar-heading",...a,children:t})},Ce=({children:e})=>{const t=v.useContext(P),[o,a]=v.useContext(j),r=v.useRef(null);return v.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:c("main-toolbar__controls",{"main-toolbar__controls--stacked":o}),children:e})]})};L.Title=he,L.Controls=Ce;const Me="",F=({children:e,className:t,as:o,...a})=>{const r=o||"section";return n.jsx(r,{...a,className:c("content-section",t),children:n.jsx(u.Col,{size:12,children:e})})},ke=({children:e,className:t,as:o,...a})=>{const r=o||"h1";return n.jsx(r,{...a,className:c("content-section__title p-heading--4",t),children:e})},Se=({children:e,className:t})=>n.jsx("div",{className:c("content-section__body",t),children:e}),Fe=({children:e,className:t})=>n.jsx("div",{className:c("content-section__footer",t),children:e});F.Title=ke,F.Content=Se,F.Footer=Fe;const De="",ye=({children:e,...t})=>n.jsx("div",{className:"p-form__nested-group",...t,children:e}),Oe="",G=({currentPage:e,error:t,disabled:o,onInputBlur:a,onInputChange:r,onNextClick:s,onPreviousClick:g,totalPages:l})=>n.jsx("nav",{"aria-label":"pagination",className:"p-pagination",children:n.jsxs("span",{className:"p-pagination--items",children:[n.jsx(u.Button,{"aria-label":"Previous page",className:"p-pagination__link--previous",disabled:e===1||o,onClick:g,type:"button",children:n.jsx(u.Icon,{name:"chevron-down"})}),n.jsx("strong",{children:"Page "})," ",n.jsx(u.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 ",l]}),n.jsx(u.Button,{"aria-label":"Next page",className:"p-pagination__link--next",disabled:e===l||o,onClick:s,type:"button",children:n.jsx(u.Icon,{name:"chevron-up"})})]})}),we=({currentPage:e,disabled:t,paginate:o,totalPages:a})=>{const[r,s]=m.useState(e),[g,l]=m.useState(""),p=()=>{s(e),l("")},_=b=>{const{value:T,valueAsNumber:f}=b.target;T?(s(f),f>a||f<1?l(`${f} is not a valid page number.`):(l(""),o(f))):l("Enter a page number.")},C=()=>{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:g,disabled:t,onInputBlur:p,onInputChange:_,onNextClick:k,onPreviousClick:C,totalPages:a})};i.ContentSection=F,i.ExternalLink=U,i.FormSection=S,i.InputGroup=I,i.MainToolbar=L,i.Meter=O,i.Navigation=d,i.NavigationBar=E,i.NestedFormGroup=ye,i.Pagination=G,i.PaginationContainer=we,i.defaultFilledColors=H,i.meterColor=N,i.testIds=h,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
+
import { AsProp } from '../../../types';
|
|
2
3
|
type MainToolbarProps = {
|
|
3
4
|
children: React.ReactNode;
|
|
4
5
|
};
|
|
@@ -14,7 +15,10 @@ type MainToolbarProps = {
|
|
|
14
15
|
*/
|
|
15
16
|
export declare const MainToolbar: {
|
|
16
17
|
({ children }: MainToolbarProps): import("react/jsx-runtime").JSX.Element;
|
|
17
|
-
Title: ({ children, ...props }:
|
|
18
|
+
Title: ({ as, children, className, ...props }: MainToolbarTitleProps) => import("react/jsx-runtime").JSX.Element;
|
|
18
19
|
Controls: ({ children }: React.PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
|
|
19
20
|
};
|
|
21
|
+
interface MainToolbarTitleProps extends React.PropsWithChildren, AsProp<React.ElementType>, React.HTMLAttributes<HTMLElement> {
|
|
22
|
+
className?: string;
|
|
23
|
+
}
|
|
20
24
|
export {};
|
package/package.json
CHANGED