@worldresources/wri-design-systems 2.197.0 → 2.197.1

package/dist/index.cjs.js

@@ -513,7 +513,8 @@
     }
   }
 `),"aria-label":n,disabled:l,onClick:c,mr:d&&!u?"1rem":"0",mb:d&&u?"1rem":"0",children:r.jsxs(e.Box,{display:"flex",overflow:"hidden",style:{justifyContent:"flex-end",alignItems:"center"},whiteSpace:"nowrap",transition:"max-width 0.3s ease, opacity 0.2s ease, margin-left 0.3s ease",maxWidth:t?"9.375rem":"2rem",padding:"0.5rem",margin:t?"0.5rem":"0",children:[o&&r.jsx(e.Box,{as:"span",mr:o&&t?"0.5rem":"0px",children:r.jsx(Tm,{content:a,disabled:!a,children:o})}),s&&r.jsx(e.Box,{"aria-hidden":!t,overflow:"hidden",maxWidth:t?"9.375rem":"0px",whiteSpace:"nowrap",transition:"max-width 0.3s ease, opacity 0.2s ease, margin-left 0.3s ease",children:r.jsx(Tm,{content:a,disabled:!a,children:s})})]})});var h},dg=e=>{const t=u(e),n=parseFloat(getComputedStyle(document.documentElement).fontSize)||16;return t.endsWith("px")?parseFloat(t)/n:(t.endsWith("rem"),parseFloat(t))};const ug=({items:t,vertical:o=!1,expanded:i=!1,showExpandedToggle:s,autoCollapse:a=!1,ariaLabel:l,defaultGaps:c,labels:d})=>{const u=Ef("Toolbar",d),[h,p]=n.useState(i),{containerRef:f,visibleNumberOfItems:m,shouldForceCollapse:g}=function({itemsCount:e,isExpanded:t,isVertical:r,collapsedWidth:o,expandedLabelWidth:i,gap:s=0,showExpandedToggle:a,autoCollapse:l}){const c=n.useRef(null),[d,u]=n.useState(0),[h,p]=n.useState(e),[f,m]=n.useState(!1);return n.useEffect((()=>{if(!c.current)return;const e=new ResizeObserver((e=>{const t=e[0],n=parseFloat(getComputedStyle(document.documentElement).fontSize)||16;u(t.contentRect.width/n)}));return e.observe(c.current),()=>e.disconnect()}),[]),n.useEffect((()=>{if(0===d)return;if(!l)return m(!1),void p(e);const n=dg(o),c=dg(i),u=dg(s),h=d-(a?n+u:0),f=n+u;m(e*(t?c+u:f)-u>h),e>1&&!r&&p(Math.floor(h/f))}),[d,e,t,r,o,i,s,a,l]),{containerRef:c,visibleNumberOfItems:h,shouldForceCollapse:f}}({itemsCount:t.length,isExpanded:h,isVertical:o,collapsedWidth:"3rem",expandedLabelWidth:"6.25rem",gap:"1rem",showExpandedToggle:s,autoCollapse:a});n.useEffect((()=>{p(i)}),[i]);const v=t.slice(0,m),b=t.slice(m,t.length),y=b.map((e=>({label:e.label,startIcon:e.icon,disabled:e.disabled,onClick:e.onClick,itemAriaLabel:e.ariaLabel}))),x=r.jsx("div",{style:{position:"relative",display:"flex",width:"3rem"},children:r.jsx(cg,{isExpanded:h,ariaLabel:h?"Collapse":"Expand",icon:r.jsx(Vf,{}),showGap:!1,vertical:o})}),[w,C]=n.useState(!1);return r.jsx("div",{role:"toolbar","aria-label":l,css:ag,children:r.jsxs(e.Group,{ref:f,orientation:o?"vertical":"horizontal",attached:!0,display:"grid",borderCollapse:"collapse",gridAutoFlow:o||1===t.length?"row":"column",children:[v.map((e=>{const t=c&&!1!==e.gap||!c&&!0===e.gap;return r.jsx(cg,{isExpanded:h&&!g,ariaLabel:e.ariaLabel,icon:e.icon,label:e.label,tooltip:e.tooltip,disabled:e.disabled,onClick:e.onClick,showGap:t,vertical:o},e.ariaLabel)})),g&&y.length>1&&r.jsxs(e.Menu.Root,{onSelect:({value:e})=>(e=>{const t=b.find((t=>t.label===e));t&&t.onClick&&t.onClick()})(e),onOpenChange:({open:e})=>C(e),open:w,children:[r.jsx(e.Menu.Trigger,{asChild:!0,children:x}),r.jsx(e.Portal,{children:r.jsx(e.Menu.Positioner,{children:r.jsx(e.Menu.Content,{style:{minWidth:0,padding:0},children:y.map((({label:t,startIcon:n,onClick:i,itemAriaLabel:s},a)=>r.jsx(e.Menu.Item,{css:lg,value:t||l||a.toString(),role:"menuitem",children:r.jsx(cg,{isExpanded:!1,icon:n,ariaLabel:s,label:"",onClick:i,showGap:!1,vertical:o})})))})})})]}),s&&!a&&!g&&r.jsx(cg,{isExpanded:h,ariaLabel:h?u.collapseAriaLabel:u.expandAriaLabel,icon:h?r.jsx(dm,{}):r.jsx(um,{}),label:u.collapseLabel,onClick:()=>p(!h),showGap:!1,vertical:o})]})})},hg=i.css`
-  width: 12.5rem;
+  width: 100%;
+  max-width: 12.5rem;
   border: ${j(100)} solid ${w("neutral",600)};
   border-radius: ${$(300)};
   padding: ${k(200)};

package/dist/index.esm.js

@@ -513,7 +513,8 @@ import{createSystem as e,defaultConfig as t,Button as n,Box as r,Spinner as o,Ic
     }
   }
 `),"aria-label":t,disabled:a,onClick:l,mr:c&&!d?"1rem":"0",mb:c&&d?"1rem":"0",children:be(r,{display:"flex",overflow:"hidden",style:{justifyContent:"flex-end",alignItems:"center"},whiteSpace:"nowrap",transition:"max-width 0.3s ease, opacity 0.2s ease, margin-left 0.3s ease",maxWidth:e?"9.375rem":"2rem",padding:"0.5rem",margin:e?"0.5rem":"0",children:[o&&ye(r,{as:"span",mr:o&&e?"0.5rem":"0px",children:ye(Ug,{content:s,disabled:!s,children:o})}),i&&ye(r,{"aria-hidden":!e,overflow:"hidden",maxWidth:e?"9.375rem":"0px",whiteSpace:"nowrap",transition:"max-width 0.3s ease, opacity 0.2s ease, margin-left 0.3s ease",children:ye(Ug,{content:s,disabled:!s,children:i})})]})});var u},Ov=e=>{const t=Me(e),n=parseFloat(getComputedStyle(document.documentElement).fontSize)||16;return t.endsWith("px")?parseFloat(t)/n:(t.endsWith("rem"),parseFloat(t))};const Lv=({items:e,vertical:t=!1,expanded:n=!1,showExpandedToggle:r,autoCollapse:o=!1,ariaLabel:i,defaultGaps:l,labels:c})=>{const d=qm("Toolbar",c),[u,h]=le(n),{containerRef:p,visibleNumberOfItems:f,shouldForceCollapse:g}=function({itemsCount:e,isExpanded:t,isVertical:n,collapsedWidth:r,expandedLabelWidth:o,gap:i=0,showExpandedToggle:s,autoCollapse:a}){const l=ae(null),[c,d]=le(0),[u,h]=le(e),[p,f]=le(!1);return de((()=>{if(!l.current)return;const e=new ResizeObserver((e=>{const t=e[0],n=parseFloat(getComputedStyle(document.documentElement).fontSize)||16;d(t.contentRect.width/n)}));return e.observe(l.current),()=>e.disconnect()}),[]),de((()=>{if(0===c)return;if(!a)return f(!1),void h(e);const l=Ov(r),d=Ov(o),u=Ov(i),p=c-(s?l+u:0),m=l+u;f(e*(t?d+u:m)-u>p),e>1&&!n&&h(Math.floor(p/m))}),[c,e,t,n,r,o,i,s,a]),{containerRef:l,visibleNumberOfItems:u,shouldForceCollapse:p}}({itemsCount:e.length,isExpanded:u,isVertical:t,collapsedWidth:"3rem",expandedLabelWidth:"6.25rem",gap:"1rem",showExpandedToggle:r,autoCollapse:o});de((()=>{h(n)}),[n]);const v=e.slice(0,f),b=e.slice(f,e.length),y=b.map((e=>({label:e.label,startIcon:e.icon,disabled:e.disabled,onClick:e.onClick,itemAriaLabel:e.ariaLabel}))),w=ye("div",{style:{position:"relative",display:"flex",width:"3rem"},children:ye(Tv,{isExpanded:u,ariaLabel:u?"Collapse":"Expand",icon:ye(ng,{}),showGap:!1,vertical:t})}),[C,x]=le(!1);return ye("div",{role:"toolbar","aria-label":i,css:Ev,children:be(m,{ref:p,orientation:t?"vertical":"horizontal",attached:!0,display:"grid",borderCollapse:"collapse",gridAutoFlow:t||1===e.length?"row":"column",children:[v.map((e=>{const n=l&&!1!==e.gap||!l&&!0===e.gap;return ye(Tv,{isExpanded:u&&!g,ariaLabel:e.ariaLabel,icon:e.icon,label:e.label,tooltip:e.tooltip,disabled:e.disabled,onClick:e.onClick,showGap:n,vertical:t},e.ariaLabel)})),g&&y.length>1&&be(s.Root,{onSelect:({value:e})=>(e=>{const t=b.find((t=>t.label===e));t&&t.onClick&&t.onClick()})(e),onOpenChange:({open:e})=>x(e),open:C,children:[ye(s.Trigger,{asChild:!0,children:w}),ye(a,{children:ye(s.Positioner,{children:ye(s.Content,{style:{minWidth:0,padding:0},children:y.map((({label:e,startIcon:n,onClick:r,itemAriaLabel:o},a)=>ye(s.Item,{css:Mv,value:e||i||a.toString(),role:"menuitem",children:ye(Tv,{isExpanded:!1,icon:n,ariaLabel:o,label:"",onClick:r,showGap:!1,vertical:t})})))})})})]}),r&&!o&&!g&&ye(Tv,{isExpanded:u,ariaLabel:u?d.collapseAriaLabel:d.expandAriaLabel,icon:ye(u?Mg:Tg,{}),label:d.collapseLabel,onClick:()=>h(!u),showGap:!1,vertical:t})]})})},Av=({onZoomInClick:e,onZoomOutClick:t,onExpandClick:n,onShareClick:r,onPrintClick:o,onSettingsClick:i,onQuestionClick:s,vertical:a,expanded:l,showExpandedToggle:c,ariaLabel:d,labels:u})=>{const h=qm("MapControlsToolbar",u),p=[{icon:Y(dg,{}),label:h.zoomInLabel,ariaLabel:h.zoomInAriaLabel,onClick:e},{icon:Y(ug,{}),label:h.zoomOutLabel,ariaLabel:h.zoomOutAriaLabel,onClick:t,gap:!0},{icon:Y(hg,{}),label:h.expandLabel,ariaLabel:h.expandAriaLabel,onClick:n,gap:!0},{icon:Y(pg,{}),label:h.shareLabel,ariaLabel:h.shareAriaLabel,onClick:r,gap:!0},{icon:Y(fg,{}),label:h.printLabel,ariaLabel:h.printAriaLabel,onClick:o,gap:!0},{icon:Y(mg,{}),label:h.settingsLabel,ariaLabel:h.settingsAriaLabel,onClick:i,gap:!0},{icon:Y(gg,{}),label:h.helpLabel,ariaLabel:h.helpAriaLabel,onClick:s}];return Y(Lv,{items:p,vertical:a,expanded:l,showExpandedToggle:c,ariaLabel:d||h.toolbarAriaLabel})},Nv=$e`
-  width: 12.5rem;
+  width: 100%;
+  max-width: 12.5rem;
   border: ${je(100)} solid ${ze("neutral",600)};
   border-radius: ${Be(300)};
   padding: ${He(200)};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worldresources/wri-design-systems",
-  "version": "2.197.0",
+  "version": "2.197.1",
   "description": "WRI UI Library",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",