@worldresources/wri-design-systems 2.174.0 → 2.176.0

package/dist/index.cjs.js

@@ -213,7 +213,7 @@
       }
     }
   }
-`),"aria-label":o,disabled:l,onClick:c,mr:d&&!u?"16px":"0",mb:d&&u?"16px":"0",children:t.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:n?"150px":"32px",padding:"8px",margin:n?"8px":"0",children:[i&&t.jsx(e.Box,{as:"span",mr:i&&n?"8px":"0px",children:t.jsx(pe,{content:s,disabled:!s,children:i})}),a&&t.jsx(e.Box,{"aria-hidden":!n,overflow:"hidden",maxWidth:n?"150px":"0px",whiteSpace:"nowrap",transition:"max-width 0.3s ease, opacity 0.2s ease, margin-left 0.3s ease",children:t.jsx(pe,{content:s,disabled:!s,children:a})})]})});var p};const fe=({items:r,vertical:o=!1,expanded:i=!1,showExpandedToggle:a,ariaLabel:s,defaultGaps:l})=>{const[c,d]=n.useState(i),{containerRef:u,visibleNumberOfItems:p,shouldForceCollapse:h}=function({itemsCount:e,isExpanded:t,isVertical:r,collapsedWidth:o,expandedLabelWidth:i,gap:a=0}){const s=n.useRef(null),[l,c]=n.useState(0),[d,u]=n.useState(e),[p,h]=n.useState(!1);return n.useEffect((()=>{if(!s.current)return;const e=new ResizeObserver((e=>{const t=e[0];c(Math.floor(t.contentRect.width))}));return e.observe(s.current),()=>e.disconnect()}),[]),n.useEffect((()=>{if(0===l)return;const n=o+a;h(e*(t?i+a:n)-a>l),e>1&&!r&&u(Math.floor(l/n))}),[l,e,r,o,i,a]),{containerRef:s,visibleNumberOfItems:d,shouldForceCollapse:p}}({itemsCount:r.length,isExpanded:c,isVertical:o,collapsedWidth:48,expandedLabelWidth:100,gap:16}),f=r.slice(0,p),x=r.slice(p,r.length),g=x.map((e=>({label:e.label,startIcon:e.icon,disabled:e.disabled,onClick:e.onClick,itemAriaLabel:e.ariaLabel}))),v=t.jsx("div",{style:{position:"relative",display:"flex",width:"48px"},children:t.jsx(he,{isExpanded:c,ariaLabel:c?"Collapse":"Expand",icon:t.jsx(R,{}),showGap:!1,vertical:o})}),[m,b]=n.useState(!1);return t.jsx("div",{ref:u,role:"toolbar","aria-label":s,css:le,children:t.jsxs(e.Group,{orientation:o?"vertical":"horizontal",attached:!0,display:"grid",borderCollapse:"collapse",gridAutoFlow:o||1===r.length?"row":"column",children:[f.map((e=>{const n=l&&!1!==e.gap||!l&&!0===e.gap;return t.jsx(he,{isExpanded:c&&!h,ariaLabel:e.ariaLabel,icon:e.icon,label:e.label,tooltip:e.tooltip,disabled:e.disabled,onClick:e.onClick,showGap:n,vertical:o},e.ariaLabel)})),h&&g.length>1&&t.jsxs(e.Menu.Root,{onSelect:({value:e})=>(e=>{const t=x.find((t=>t.label===e));t&&t.onClick&&t.onClick()})(e),onOpenChange:({open:e})=>b(e),open:m,children:[t.jsx(e.Menu.Trigger,{asChild:!0,children:v}),t.jsx(e.Portal,{children:t.jsx(e.Menu.Positioner,{children:t.jsx(e.Menu.Content,{style:{minWidth:0,padding:0},children:g.map((({label:n,startIcon:r,onClick:i,itemAriaLabel:a},l)=>t.jsx(e.Menu.Item,{css:ce,value:n||s||l.toString(),role:"menuitem",children:t.jsx(he,{isExpanded:!1,icon:r,ariaLabel:a,label:"",onClick:i,showGap:!1,vertical:o})})))})})})]}),a&&!h&&t.jsx(he,{isExpanded:c,ariaLabel:c?"Collapse":"Expand",icon:c?t.jsx(ee,{}):t.jsx(te,{}),label:"Collapse",onClick:()=>d(!c),showGap:!1,vertical:o})]})})},xe=r.css`
+`),"aria-label":o,disabled:l,onClick:c,mr:d&&!u?"16px":"0",mb:d&&u?"16px":"0",children:t.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:n?"150px":"32px",padding:"8px",margin:n?"8px":"0",children:[i&&t.jsx(e.Box,{as:"span",mr:i&&n?"8px":"0px",children:t.jsx(pe,{content:s,disabled:!s,children:i})}),a&&t.jsx(e.Box,{"aria-hidden":!n,overflow:"hidden",maxWidth:n?"150px":"0px",whiteSpace:"nowrap",transition:"max-width 0.3s ease, opacity 0.2s ease, margin-left 0.3s ease",children:t.jsx(pe,{content:s,disabled:!s,children:a})})]})});var p};const fe=({items:r,vertical:o=!1,expanded:i=!1,showExpandedToggle:a,autoCollapse:s=!1,ariaLabel:l,defaultGaps:c})=>{const[d,u]=n.useState(i),{containerRef:p,visibleNumberOfItems:h,shouldForceCollapse:f}=function({itemsCount:e,isExpanded:t,isVertical:r,collapsedWidth:o,expandedLabelWidth:i,gap:a=0,showExpandedToggle:s,autoCollapse:l}){const c=n.useRef(null),[d,u]=n.useState(0),[p,h]=n.useState(e),[f,x]=n.useState(!1);return n.useEffect((()=>{if(!c.current)return;const e=new ResizeObserver((e=>{const t=e[0];u(Math.floor(t.contentRect.width))}));return e.observe(c.current),()=>e.disconnect()}),[]),n.useEffect((()=>{if(0===d)return;if(!l)return x(!1),void h(e);const n=d-(s?o+a:0),c=o+a;x(e*(t?i+a:c)-a>n),e>1&&!r&&h(Math.floor(n/c))}),[d,e,t,r,o,i,a,s,l]),{containerRef:c,visibleNumberOfItems:p,shouldForceCollapse:f}}({itemsCount:r.length,isExpanded:d,isVertical:o,collapsedWidth:48,expandedLabelWidth:100,gap:16,showExpandedToggle:a,autoCollapse:s});n.useEffect((()=>{u(i)}),[i]);const x=r.slice(0,h),g=r.slice(h,r.length),v=g.map((e=>({label:e.label,startIcon:e.icon,disabled:e.disabled,onClick:e.onClick,itemAriaLabel:e.ariaLabel}))),m=t.jsx("div",{style:{position:"relative",display:"flex",width:"48px"},children:t.jsx(he,{isExpanded:d,ariaLabel:d?"Collapse":"Expand",icon:t.jsx(R,{}),showGap:!1,vertical:o})}),[b,y]=n.useState(!1);return t.jsx("div",{role:"toolbar","aria-label":l,css:le,children:t.jsxs(e.Group,{ref:p,orientation:o?"vertical":"horizontal",attached:!0,display:"grid",borderCollapse:"collapse",gridAutoFlow:o||1===r.length?"row":"column",children:[x.map((e=>{const n=c&&!1!==e.gap||!c&&!0===e.gap;return t.jsx(he,{isExpanded:d&&!f,ariaLabel:e.ariaLabel,icon:e.icon,label:e.label,tooltip:e.tooltip,disabled:e.disabled,onClick:e.onClick,showGap:n,vertical:o},e.ariaLabel)})),f&&v.length>1&&t.jsxs(e.Menu.Root,{onSelect:({value:e})=>(e=>{const t=g.find((t=>t.label===e));t&&t.onClick&&t.onClick()})(e),onOpenChange:({open:e})=>y(e),open:b,children:[t.jsx(e.Menu.Trigger,{asChild:!0,children:m}),t.jsx(e.Portal,{children:t.jsx(e.Menu.Positioner,{children:t.jsx(e.Menu.Content,{style:{minWidth:0,padding:0},children:v.map((({label:n,startIcon:r,onClick:i,itemAriaLabel:a},s)=>t.jsx(e.Menu.Item,{css:ce,value:n||l||s.toString(),role:"menuitem",children:t.jsx(he,{isExpanded:!1,icon:r,ariaLabel:a,label:"",onClick:i,showGap:!1,vertical:o})})))})})})]}),a&&!s&&!f&&t.jsx(he,{isExpanded:d,ariaLabel:d?"Collapse":"Expand",icon:d?t.jsx(ee,{}):t.jsx(te,{}),label:"Collapse",onClick:()=>u(!d),showGap:!1,vertical:o})]})})},xe=r.css`
   display: flex;
   align-items: center;
   justify-content: center;

package/dist/index.d.ts

@@ -63,9 +63,10 @@ interface ToolbarProps {
     showExpandedToggle?: boolean;
     ariaLabel?: string;
     defaultGaps?: boolean;
+    autoCollapse?: boolean;
 }
 
-declare const Toolbar: ({ items, vertical, expanded, showExpandedToggle, ariaLabel, defaultGaps, }: ToolbarProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const Toolbar: ({ items, vertical, expanded, showExpandedToggle, autoCollapse, ariaLabel, defaultGaps, }: ToolbarProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type MapControlsToolbarProps = {
     onZoomInClick?: () => void;
@@ -544,7 +545,7 @@ declare const LegendItem: ({ layerName, dataUnit, onDrag, onUpClick, onDownClick
 
 type QualitativeAttributeProps = {
     type: 'raster' | 'line' | 'point';
-    label: string;
+    label: string | React.ReactNode;
     caption?: string;
     color: string;
     showActionButton?: boolean;

package/dist/index.esm.js

@@ -213,7 +213,7 @@ import{createSystem as e,defaultConfig as t,Button as n,Box as r,Spinner as o,Ic
       }
     }
   }
-`),"aria-label":t,disabled:l,onClick:s,mr:c&&!d?"16px":"0",mb:c&&d?"16px":"0",children:G(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?"150px":"32px",padding:"8px",margin:e?"8px":"0",children:[o&&U(r,{as:"span",mr:o&&e?"8px":"0px",children:U(wt,{content:a,disabled:!a,children:o})}),i&&U(r,{"aria-hidden":!e,overflow:"hidden",maxWidth:e?"150px":"0px",whiteSpace:"nowrap",transition:"max-width 0.3s ease, opacity 0.2s ease, margin-left 0.3s ease",children:U(wt,{content:a,disabled:!a,children:i})})]})});var u};const $t=({items:e,vertical:t=!1,expanded:n=!1,showExpandedToggle:r,ariaLabel:o,defaultGaps:i})=>{const[a,d]=Q(n),{containerRef:u,visibleNumberOfItems:p,shouldForceCollapse:h}=function({itemsCount:e,isExpanded:t,isVertical:n,collapsedWidth:r,expandedLabelWidth:o,gap:i=0}){const a=ee(null),[l,s]=Q(0),[c,d]=Q(e),[u,p]=Q(!1);return te((()=>{if(!a.current)return;const e=new ResizeObserver((e=>{const t=e[0];s(Math.floor(t.contentRect.width))}));return e.observe(a.current),()=>e.disconnect()}),[]),te((()=>{if(0===l)return;const a=r+i;p(e*(t?o+i:a)-i>l),e>1&&!n&&d(Math.floor(l/a))}),[l,e,n,r,o,i]),{containerRef:a,visibleNumberOfItems:c,shouldForceCollapse:u}}({itemsCount:e.length,isExpanded:a,isVertical:t,collapsedWidth:48,expandedLabelWidth:100,gap:16}),f=e.slice(0,p),g=e.slice(p,e.length),v=g.map((e=>({label:e.label,startIcon:e.icon,disabled:e.disabled,onClick:e.onClick,itemAriaLabel:e.ariaLabel}))),m=U("div",{style:{position:"relative",display:"flex",width:"48px"},children:U(Ct,{isExpanded:a,ariaLabel:a?"Collapse":"Expand",icon:U(je,{}),showGap:!1,vertical:t})}),[x,b]=Q(!1);return U("div",{ref:u,role:"toolbar","aria-label":o,css:mt,children:G(s,{orientation:t?"vertical":"horizontal",attached:!0,display:"grid",borderCollapse:"collapse",gridAutoFlow:t||1===e.length?"row":"column",children:[f.map((e=>{const n=i&&!1!==e.gap||!i&&!0===e.gap;return U(Ct,{isExpanded:a&&!h,ariaLabel:e.ariaLabel,icon:e.icon,label:e.label,tooltip:e.tooltip,disabled:e.disabled,onClick:e.onClick,showGap:n,vertical:t},e.ariaLabel)})),h&&v.length>1&&G(c.Root,{onSelect:({value:e})=>(e=>{const t=g.find((t=>t.label===e));t&&t.onClick&&t.onClick()})(e),onOpenChange:({open:e})=>b(e),open:x,children:[U(c.Trigger,{asChild:!0,children:m}),U(l,{children:U(c.Positioner,{children:U(c.Content,{style:{minWidth:0,padding:0},children:v.map((({label:e,startIcon:n,onClick:r,itemAriaLabel:i},a)=>U(c.Item,{css:xt,value:e||o||a.toString(),role:"menuitem",children:U(Ct,{isExpanded:!1,icon:n,ariaLabel:i,label:"",onClick:r,showGap:!1,vertical:t})})))})})})]}),r&&!h&&U(Ct,{isExpanded:a,ariaLabel:a?"Collapse":"Expand",icon:U(a?ct:dt,{}),label:"Collapse",onClick:()=>d(!a),showGap:!1,vertical:t})]})})},kt=({onZoomInClick:e,onZoomOutClick:t,onExpandClick:n,onShareClick:r,onPrintClick:o,onSettingsClick:i,onQuestionClick:a,vertical:l,expanded:s,showExpandedToggle:c,ariaLabel:d})=>{const u=[{icon:pe(qe,{}),label:"Zoom in",ariaLabel:"zoom in",onClick:e},{icon:pe(Ge,{}),label:"Zoom out",ariaLabel:"zoom out",onClick:t,gap:!0},{icon:pe(Ue,{}),label:"Expand",ariaLabel:"expand",onClick:n,gap:!0},{icon:pe(Xe,{}),label:"Share",ariaLabel:"share",onClick:r,gap:!0},{icon:pe(Ye,{}),label:"Print",ariaLabel:"print",onClick:o,gap:!0},{icon:pe(Ke,{}),label:"Settings",ariaLabel:"settings",onClick:i,gap:!0},{icon:pe(Je,{}),label:"Help",ariaLabel:"question",onClick:a}];return pe($t,{items:u,vertical:l,expanded:s,showExpandedToggle:c,ariaLabel:d||"Map controls toolbar"})},St=ue`
+`),"aria-label":t,disabled:l,onClick:s,mr:c&&!d?"16px":"0",mb:c&&d?"16px":"0",children:G(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?"150px":"32px",padding:"8px",margin:e?"8px":"0",children:[o&&U(r,{as:"span",mr:o&&e?"8px":"0px",children:U(wt,{content:a,disabled:!a,children:o})}),i&&U(r,{"aria-hidden":!e,overflow:"hidden",maxWidth:e?"150px":"0px",whiteSpace:"nowrap",transition:"max-width 0.3s ease, opacity 0.2s ease, margin-left 0.3s ease",children:U(wt,{content:a,disabled:!a,children:i})})]})});var u};const $t=({items:e,vertical:t=!1,expanded:n=!1,showExpandedToggle:r,autoCollapse:o=!1,ariaLabel:i,defaultGaps:a})=>{const[d,u]=Q(n),{containerRef:p,visibleNumberOfItems:h,shouldForceCollapse:f}=function({itemsCount:e,isExpanded:t,isVertical:n,collapsedWidth:r,expandedLabelWidth:o,gap:i=0,showExpandedToggle:a,autoCollapse:l}){const s=ee(null),[c,d]=Q(0),[u,p]=Q(e),[h,f]=Q(!1);return te((()=>{if(!s.current)return;const e=new ResizeObserver((e=>{const t=e[0];d(Math.floor(t.contentRect.width))}));return e.observe(s.current),()=>e.disconnect()}),[]),te((()=>{if(0===c)return;if(!l)return f(!1),void p(e);const s=c-(a?r+i:0),d=r+i;f(e*(t?o+i:d)-i>s),e>1&&!n&&p(Math.floor(s/d))}),[c,e,t,n,r,o,i,a,l]),{containerRef:s,visibleNumberOfItems:u,shouldForceCollapse:h}}({itemsCount:e.length,isExpanded:d,isVertical:t,collapsedWidth:48,expandedLabelWidth:100,gap:16,showExpandedToggle:r,autoCollapse:o});te((()=>{u(n)}),[n]);const g=e.slice(0,h),v=e.slice(h,e.length),m=v.map((e=>({label:e.label,startIcon:e.icon,disabled:e.disabled,onClick:e.onClick,itemAriaLabel:e.ariaLabel}))),x=U("div",{style:{position:"relative",display:"flex",width:"48px"},children:U(Ct,{isExpanded:d,ariaLabel:d?"Collapse":"Expand",icon:U(je,{}),showGap:!1,vertical:t})}),[b,y]=Q(!1);return U("div",{role:"toolbar","aria-label":i,css:mt,children:G(s,{ref:p,orientation:t?"vertical":"horizontal",attached:!0,display:"grid",borderCollapse:"collapse",gridAutoFlow:t||1===e.length?"row":"column",children:[g.map((e=>{const n=a&&!1!==e.gap||!a&&!0===e.gap;return U(Ct,{isExpanded:d&&!f,ariaLabel:e.ariaLabel,icon:e.icon,label:e.label,tooltip:e.tooltip,disabled:e.disabled,onClick:e.onClick,showGap:n,vertical:t},e.ariaLabel)})),f&&m.length>1&&G(c.Root,{onSelect:({value:e})=>(e=>{const t=v.find((t=>t.label===e));t&&t.onClick&&t.onClick()})(e),onOpenChange:({open:e})=>y(e),open:b,children:[U(c.Trigger,{asChild:!0,children:x}),U(l,{children:U(c.Positioner,{children:U(c.Content,{style:{minWidth:0,padding:0},children:m.map((({label:e,startIcon:n,onClick:r,itemAriaLabel:o},a)=>U(c.Item,{css:xt,value:e||i||a.toString(),role:"menuitem",children:U(Ct,{isExpanded:!1,icon:n,ariaLabel:o,label:"",onClick:r,showGap:!1,vertical:t})})))})})})]}),r&&!o&&!f&&U(Ct,{isExpanded:d,ariaLabel:d?"Collapse":"Expand",icon:U(d?ct:dt,{}),label:"Collapse",onClick:()=>u(!d),showGap:!1,vertical:t})]})})},kt=({onZoomInClick:e,onZoomOutClick:t,onExpandClick:n,onShareClick:r,onPrintClick:o,onSettingsClick:i,onQuestionClick:a,vertical:l,expanded:s,showExpandedToggle:c,ariaLabel:d})=>{const u=[{icon:pe(qe,{}),label:"Zoom in",ariaLabel:"zoom in",onClick:e},{icon:pe(Ge,{}),label:"Zoom out",ariaLabel:"zoom out",onClick:t,gap:!0},{icon:pe(Ue,{}),label:"Expand",ariaLabel:"expand",onClick:n,gap:!0},{icon:pe(Xe,{}),label:"Share",ariaLabel:"share",onClick:r,gap:!0},{icon:pe(Ye,{}),label:"Print",ariaLabel:"print",onClick:o,gap:!0},{icon:pe(Ke,{}),label:"Settings",ariaLabel:"settings",onClick:i,gap:!0},{icon:pe(Je,{}),label:"Help",ariaLabel:"question",onClick:a}];return pe($t,{items:u,vertical:l,expanded:s,showExpandedToggle:c,ariaLabel:d||"Map controls toolbar"})},St=ue`
   display: flex;
   align-items: center;
   justify-content: center;

package/package.json

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