@worldresources/wri-design-systems 2.145.1 → 2.146.0

package/README.md

@@ -167,7 +167,7 @@ border: 1px solid ${getThemedColor('neutral', 400)};
 - [Button](https://github.com/wri/wri-design-systems/tree/main/src/components/Forms/Actions/Button)
 - [Close Button](https://github.com/wri/wri-design-systems/tree/main/src/components/Forms/Actions/CloseButton)
 - [Icon Button](https://github.com/wri/wri-design-systems/tree/main/src/components/Forms/Actions/IconButton)
-- [Map Control](https://github.com/wri/wri-design-systems/tree/main/src/components/Forms/Actions/MapControl)
+- [Toolbar](https://github.com/wri/wri-design-systems/tree/main/src/components/Forms/Actions/Toolbar)
 - [Menu](https://github.com/wri/wri-design-systems/tree/main/src/components/Forms/Actions/Menu)
 - [Multi Action Button](https://github.com/wri/wri-design-systems/tree/main/src/components/Forms/Actions/MultiActionButton)
 - [Tooltip](https://github.com/wri/wri-design-systems/tree/main/src/components/Forms/Actions/Tooltip)

package/dist/index.cjs.js

@@ -2161,7 +2161,7 @@
   &:disabled {
     background-color: ${p("neutral",200)};
   }
-`,Ii=({id:n,label:r,caption:o,icon:i,value:a,variant:s="data",onItemClick:l,isExpanded:c=!1,ariaLabel:u,disabled:d=!1})=>{const p="navigation"===s&&!!l,h=p?e.chakra.button:e.chakra.div,f=u||("data"===s&&a?`${r}, ${a}`:r);return t.jsxs(h,{id:n,css:"data"===s?Mi:Di,onClick:p?l:void 0,tabIndex:p?0:void 0,onKeyDown:e=>{p&&("Enter"!==e.key&&" "!==e.key||l?.())},role:p?"button":void 0,"aria-expanded":p?c:void 0,"aria-label":f,disabled:d,children:[t.jsxs(e.Flex,{gap:3,flex:"1",overflow:"hidden",children:[i&&t.jsx(e.Icon,{css:_i(d),as:i.type,boxSize:4,"aria-hidden":"true"}),t.jsxs(e.Box,{flex:"1",minWidth:0,children:[t.jsx(e.Text,{fontWeight:"navigation"===s?"700":"400",css:Li(d),children:r}),o&&t.jsx(e.Text,{css:Ti,children:o})]})]}),"data"===s&&a&&t.jsx(e.Text,{css:Pi,children:a}),"navigation"===s&&t.jsx(e.Icon,{as:$,boxSize:4,"aria-hidden":"true",css:_i(d)})]})},Ni=r.css`
+`,Ii=({id:n,label:r,caption:o,icon:i,value:a,variant:s="data",onItemClick:l,isExpanded:c=!1,ariaLabel:u,disabled:d=!1})=>{const p="navigation"===s&&!!l,h=p?e.chakra.button:e.chakra.div,f=u||("data"===s&&a?`${r}, ${a}`:r);return t.jsxs(h,{id:n,css:"data"===s?Mi:Di,onClick:p?l:void 0,tabIndex:p?0:void 0,onKeyDown:e=>{p&&("Enter"!==e.key&&" "!==e.key||l?.())},role:p?"button":void 0,"aria-expanded":p?c:void 0,"aria-label":f,disabled:d,children:[t.jsxs(e.Flex,{gap:3,flex:"1",overflow:"hidden",children:[i,t.jsxs(e.Box,{flex:"1",minWidth:0,children:[t.jsx(e.Text,{fontWeight:"navigation"===s?"700":"400",css:Li(d),children:r}),o&&t.jsx(e.Text,{css:Ti,children:o})]})]}),"data"===s&&a&&t.jsx(e.Text,{css:Pi,children:a}),"navigation"===s&&t.jsx(e.Icon,{as:$,boxSize:4,"aria-hidden":"true",css:_i(d)})]})},Ni=r.css`
   svg {
     path {
       fill: ${p("primary",500)};
@@ -2261,7 +2261,6 @@
   }
 `,Qi=r.css`
   border: 1px solid ${p("neutral",300)};
-  border-radius: 8px;
 `,ea=r.css`
   padding: 16px;
   cursor: pointer;
@@ -3451,7 +3450,7 @@ function Fd(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Obj
   padding: 6px;
 `,Hf=r.css`
   padding: 6px;
-`,Ff={pauseOnPageIdle:!0,offsets:"24px"},Zf={"top-start":e.createToaster({placement:"top-start",...Ff}),"top-end":e.createToaster({placement:"top-end",...Ff}),"bottom-start":e.createToaster({placement:"bottom-start",...Ff}),"bottom-end":e.createToaster({placement:"bottom-end",...Ff})};exports.AnalysisWidget=({children:r,header:o,footer:i,expanded:a=!0,collapsible:s=!0,actions:l})=>{const c="analysis-widget-item",[u,d]=n.useState(a),p=`analysis-widget-header-${c}`;return t.jsx(e.Box,{as:"section","aria-labelledby":p,css:Qi,children:t.jsx(e.Accordion.Root,{multiple:!0,value:s?void 0:[c],defaultValue:a?[c]:[],children:t.jsxs(e.Accordion.Item,{css:ta,value:c,children:[t.jsx(e.Accordion.ItemTrigger,{id:p,role:"button","aria-expanded":u,tabIndex:0,css:ea,pointerEvents:s?"auto":"none",onClick:s?()=>{d(!u)}:void 0,children:t.jsxs(e.Flex,{gap:3,flex:"1",overflow:"hidden",alignItems:"top",children:[o,l&&l.map((e=>t.jsx(At,{variant:"info-grey",label:e.label,onClick:t=>{e.onClick(),t.preventDefault(),t.stopPropagation()},icon:e?.icon},e.label))),s&&t.jsx(e.Accordion.ItemIndicator,{height:"16px",display:"flex",children:t.jsx(k,{"aria-label":"Toggle section",color:"var(--chakra-colors-neutral-700)",height:"16px",width:"16px"})})]})}),t.jsxs("div",{className:u?"item-content-open":"item-content-closed","aria-hidden":!u,children:[r,i&&t.jsx(e.Box,{css:na,children:i})]})]})})})},exports.Badge=({hasNotification:e,notificationCount:r,label:o})=>{const[i,a]=n.useState(!1);n.useEffect((()=>{const e=()=>{window.innerWidth<1024?a(!0):a(!1)};return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]);const s=(()=>{let e="";return r&&r>0&&(e=`${r>99?"99+":r}`),e})();let l="16px";return r&&r>99?l="28px":r&&r>9&&(l="22px"),i?t.jsxs("div",{css:ff,role:"status","aria-live":"polite",children:[t.jsxs("div",{css:xf(),children:[t.jsx(I,{color:"currentColor",height:"16px",width:"16px"}),!e||r||o?null:t.jsx("div",{css:gf,"aria-hidden":!0})]}),o?t.jsx("p",{children:o}):null,s.length>0?t.jsx("div",{css:bf,children:t.jsx("p",{css:yf,"aria-label":`${r} unread message`,children:s})}):null]}):t.jsxs("div",{css:ff,role:"status","aria-live":"polite",children:[o?t.jsx("p",{children:o}):null,t.jsxs("div",{css:xf(l),children:[s.length>0?t.jsx("div",{css:vf,children:t.jsx("p",{css:mf,"aria-label":`${r} unread message`,children:s})}):null,e&&!r?t.jsx("div",{css:gf,"aria-hidden":!0}):null,t.jsx(I,{color:"currentColor",height:"16px",width:"16px"})]})]})},exports.BaseMap=({title:e,caption:n,additionalSettings:o,options:i,onOptionSelected:a,maxHeight:s="400px",maxWidth:l="260px"})=>t.jsx("div",{css:fn(s,l),children:t.jsxs("div",{className:"ds-base-map-scroll-content",children:[t.jsxs("div",{css:xn,children:[t.jsx("h2",{className:"ds-base-map-header-title",children:e}),t.jsx("p",{className:"ds-base-map-header-caption",children:n})]}),t.jsxs("div",{css:gn,children:[o?t.jsx("div",{css:vn,children:o.map((e=>t.jsxs("div",{children:[t.jsx(je,{css:{},checked:e.checked,onCheckedChange:({checked:t})=>e.onCheckedChange({checked:Boolean(t)}),children:e.label}),e.checked&&e.children?t.jsx("div",{css:mn,children:e.children}):null]},e.label)))}):null,i?t.jsx("div",{css:bn,children:i.map((e=>{return t.jsxs("div",{css:yn(e.active),role:"button",onClick:()=>a?.(e),tabIndex:0,onKeyDown:t=>{"Enter"===t.key&&a?.(e)},children:[t.jsx("div",{css:(n=e.imageUrl,r.css`
+`,Ff={pauseOnPageIdle:!0,offsets:"24px"},Zf={"top-start":e.createToaster({placement:"top-start",...Ff}),"top-end":e.createToaster({placement:"top-end",...Ff}),"bottom-start":e.createToaster({placement:"bottom-start",...Ff}),"bottom-end":e.createToaster({placement:"bottom-end",...Ff})};exports.AnalysisWidget=({children:r,header:o,footer:i,expanded:a=!0,collapsible:s=!0,actions:l})=>{const c="analysis-widget-item",[u,d]=n.useState(a),p=`analysis-widget-header-${c}`;return t.jsx(e.Box,{as:"section","aria-labelledby":p,css:Qi,children:t.jsx(e.Accordion.Root,{multiple:!0,value:s?void 0:[c],defaultValue:a?[c]:[],children:t.jsxs(e.Accordion.Item,{css:ta,value:c,children:[o&&t.jsx(e.Accordion.ItemTrigger,{id:p,role:"button","aria-expanded":u,tabIndex:0,css:ea,pointerEvents:s?"auto":"none",onClick:s?()=>{d(!u)}:void 0,children:t.jsxs(e.Flex,{gap:3,flex:"1",overflow:"hidden",alignItems:"top",justifyContent:"space-between",children:[o,l&&l.map((e=>t.jsx(At,{variant:"info-grey",label:e.label,onClick:t=>{e.onClick(),t.preventDefault(),t.stopPropagation()},icon:e?.icon},e.label))),s&&t.jsx(e.Accordion.ItemIndicator,{height:"16px",display:"flex",children:t.jsx(k,{"aria-label":"Toggle section",color:"var(--chakra-colors-neutral-700)",height:"16px",width:"16px"})})]})}),t.jsxs("div",{className:u?"item-content-open":"item-content-closed","aria-hidden":!u,children:[r,i&&t.jsx(e.Box,{css:na,children:i})]})]})})})},exports.Badge=({hasNotification:e,notificationCount:r,label:o})=>{const[i,a]=n.useState(!1);n.useEffect((()=>{const e=()=>{window.innerWidth<1024?a(!0):a(!1)};return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]);const s=(()=>{let e="";return r&&r>0&&(e=`${r>99?"99+":r}`),e})();let l="16px";return r&&r>99?l="28px":r&&r>9&&(l="22px"),i?t.jsxs("div",{css:ff,role:"status","aria-live":"polite",children:[t.jsxs("div",{css:xf(),children:[t.jsx(I,{color:"currentColor",height:"16px",width:"16px"}),!e||r||o?null:t.jsx("div",{css:gf,"aria-hidden":!0})]}),o?t.jsx("p",{children:o}):null,s.length>0?t.jsx("div",{css:bf,children:t.jsx("p",{css:yf,"aria-label":`${r} unread message`,children:s})}):null]}):t.jsxs("div",{css:ff,role:"status","aria-live":"polite",children:[o?t.jsx("p",{children:o}):null,t.jsxs("div",{css:xf(l),children:[s.length>0?t.jsx("div",{css:vf,children:t.jsx("p",{css:mf,"aria-label":`${r} unread message`,children:s})}):null,e&&!r?t.jsx("div",{css:gf,"aria-hidden":!0}):null,t.jsx(I,{color:"currentColor",height:"16px",width:"16px"})]})]})},exports.BaseMap=({title:e,caption:n,additionalSettings:o,options:i,onOptionSelected:a,maxHeight:s="400px",maxWidth:l="260px"})=>t.jsx("div",{css:fn(s,l),children:t.jsxs("div",{className:"ds-base-map-scroll-content",children:[t.jsxs("div",{css:xn,children:[t.jsx("h2",{className:"ds-base-map-header-title",children:e}),t.jsx("p",{className:"ds-base-map-header-caption",children:n})]}),t.jsxs("div",{css:gn,children:[o?t.jsx("div",{css:vn,children:o.map((e=>t.jsxs("div",{children:[t.jsx(je,{css:{},checked:e.checked,onCheckedChange:({checked:t})=>e.onCheckedChange({checked:Boolean(t)}),children:e.label}),e.checked&&e.children?t.jsx("div",{css:mn,children:e.children}):null]},e.label)))}):null,i?t.jsx("div",{css:bn,children:i.map((e=>{return t.jsxs("div",{css:yn(e.active),role:"button",onClick:()=>a?.(e),tabIndex:0,onKeyDown:t=>{"Enter"===t.key&&a?.(e)},children:[t.jsx("div",{css:(n=e.imageUrl,r.css`
   height: 32px;
   width: 32px;
   border: 1px solid ${p("neutral",300)};

package/dist/index.d.ts

@@ -614,7 +614,7 @@ declare const ExtendableCard: ({ children, header, footer }: ExtendableCardProps
 
 interface AnalysisWidgetProps {
     children: React__default.ReactNode;
-    header: React__default.ReactNode;
+    header?: React__default.ReactNode;
     footer?: React__default.ReactNode;
     expanded?: boolean;
     collapsible?: boolean;

package/dist/index.esm.js

@@ -2217,7 +2217,7 @@ import{createSystem as e,defaultConfig as t,Button as n,Box as r,Spinner as i,Ic
   &:disabled {
     background-color: ${ge("neutral",200)};
   }
-`,il=({id:e,label:t,caption:n,icon:i,value:a,variant:l="data",onItemClick:s,isExpanded:c=!1,ariaLabel:d,disabled:u=!1})=>{const p="navigation"===l&&!!s,h=p?O.button:O.div;return H(h,{id:e,css:"data"===l?nl:rl,onClick:p?s:void 0,tabIndex:p?0:void 0,onKeyDown:e=>{p&&("Enter"!==e.key&&" "!==e.key||s?.())},role:p?"button":void 0,"aria-expanded":p?c:void 0,"aria-label":d||("data"===l&&a?`${t}, ${a}`:t),disabled:u,children:[H(R,{gap:3,flex:"1",overflow:"hidden",children:[i&&B(o,{css:tl(u),as:i.type,boxSize:4,"aria-hidden":"true"}),H(r,{flex:"1",minWidth:0,children:[B(L,{fontWeight:"navigation"===l?"700":"400",css:Ja(u),children:t}),n&&B(L,{css:Qa,children:n})]})]}),"data"===l&&a&&B(L,{css:el,children:a}),"navigation"===l&&B(o,{as:Re,boxSize:4,"aria-hidden":"true",css:tl(u)})]})},ol=({items:e,noBorder:t})=>B(r,{css:Ka(t),children:e.map((e=>B(il,{id:e.id,icon:e.icon,label:e.label,caption:e.caption,value:e.value,variant:e.variant??"data",onItemClick:e.onItemClick},e.id??e.label)))}),al=oe`
+`,il=({id:e,label:t,caption:n,icon:i,value:a,variant:l="data",onItemClick:s,isExpanded:c=!1,ariaLabel:d,disabled:u=!1})=>{const p="navigation"===l&&!!s,h=p?O.button:O.div;return H(h,{id:e,css:"data"===l?nl:rl,onClick:p?s:void 0,tabIndex:p?0:void 0,onKeyDown:e=>{p&&("Enter"!==e.key&&" "!==e.key||s?.())},role:p?"button":void 0,"aria-expanded":p?c:void 0,"aria-label":d||("data"===l&&a?`${t}, ${a}`:t),disabled:u,children:[H(R,{gap:3,flex:"1",overflow:"hidden",children:[i,H(r,{flex:"1",minWidth:0,children:[B(L,{fontWeight:"navigation"===l?"700":"400",css:Ja(u),children:t}),n&&B(L,{css:Qa,children:n})]})]}),"data"===l&&a&&B(L,{css:el,children:a}),"navigation"===l&&B(o,{as:Re,boxSize:4,"aria-hidden":"true",css:tl(u)})]})},ol=({items:e,noBorder:t})=>B(r,{css:Ka(t),children:e.map((e=>B(il,{id:e.id,icon:e.icon,label:e.label,caption:e.caption,value:e.value,variant:e.variant??"data",onItemClick:e.onItemClick},e.id??e.label)))}),al=oe`
   svg {
     path {
       fill: ${ge("primary",500)};
@@ -2317,7 +2317,6 @@ import{createSystem as e,defaultConfig as t,Button as n,Box as r,Spinner as i,Ic
   }
 `,$l=({children:e,header:t,footer:n})=>B(r,{css:wl,children:B(S.Root,{multiple:!0,children:H(S.Item,{value:"extendable-card-item",children:[H(S.ItemTrigger,{css:Cl,alignItems:"center",children:[B(R,{gap:3,flex:"1",overflow:"hidden",alignItems:"center",children:t}),B(S.ItemIndicator,{children:B(Oe,{color:"var(--chakra-colors-neutral-700)",height:"16px",width:"16px"})})]}),H(S.ItemContent,{children:[e,n]})]})})}),kl=oe`
   border: 1px solid ${ge("neutral",300)};
-  border-radius: 8px;
 `,Sl=oe`
   padding: 16px;
   cursor: pointer;
@@ -2357,7 +2356,7 @@ import{createSystem as e,defaultConfig as t,Button as n,Box as r,Spinner as i,Ic
   }
 `,Ol=oe`
   border-top: 1px solid ${ge("neutral",300)};
-`,Rl=({children:e,header:t,footer:n,expanded:i=!0,collapsible:o=!0,actions:a})=>{const l="analysis-widget-item",[s,c]=G(i),d=`analysis-widget-header-${l}`;return B(r,{as:"section","aria-labelledby":d,css:kl,children:B(S.Root,{multiple:!0,value:o?void 0:[l],defaultValue:i?[l]:[],children:H(S.Item,{css:El,value:l,children:[B(S.ItemTrigger,{id:d,role:"button","aria-expanded":s,tabIndex:0,css:Sl,pointerEvents:o?"auto":"none",onClick:o?()=>{c(!s)}:void 0,children:H(R,{gap:3,flex:"1",overflow:"hidden",alignItems:"top",children:[t,a&&a.map((e=>B(Xn,{variant:"info-grey",label:e.label,onClick:t=>{e.onClick(),t.preventDefault(),t.stopPropagation()},icon:e?.icon},e.label))),o&&B(S.ItemIndicator,{height:"16px",display:"flex",children:B(Oe,{"aria-label":"Toggle section",color:"var(--chakra-colors-neutral-700)",height:"16px",width:"16px"})})]})}),H("div",{className:s?"item-content-open":"item-content-closed","aria-hidden":!s,children:[e,n&&B(r,{css:Ol,children:n})]})]})})})};function Ll(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function Pl(e){if(e.__esModule)return e;var t=e.default;if("function"==typeof t){var n=function e(){return this instanceof e?Reflect.construct(t,arguments,this.constructor):t.apply(this,arguments)};n.prototype=t.prototype}else n={};return Object.defineProperty(n,"__esModule",{value:!0}),Object.keys(e).forEach((function(t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})})),n}var Tl,_l={exports:{}},Ml={},Dl={exports:{}},Nl={exports:{}},Vl={};var jl,Il,Al,zl,Hl,Bl,Fl,Zl,Wl,ql,Gl,Ul,Xl,Yl={};
+`,Rl=({children:e,header:t,footer:n,expanded:i=!0,collapsible:o=!0,actions:a})=>{const l="analysis-widget-item",[s,c]=G(i),d=`analysis-widget-header-${l}`;return B(r,{as:"section","aria-labelledby":d,css:kl,children:B(S.Root,{multiple:!0,value:o?void 0:[l],defaultValue:i?[l]:[],children:H(S.Item,{css:El,value:l,children:[t&&B(S.ItemTrigger,{id:d,role:"button","aria-expanded":s,tabIndex:0,css:Sl,pointerEvents:o?"auto":"none",onClick:o?()=>{c(!s)}:void 0,children:H(R,{gap:3,flex:"1",overflow:"hidden",alignItems:"top",justifyContent:"space-between",children:[t,a&&a.map((e=>B(Xn,{variant:"info-grey",label:e.label,onClick:t=>{e.onClick(),t.preventDefault(),t.stopPropagation()},icon:e?.icon},e.label))),o&&B(S.ItemIndicator,{height:"16px",display:"flex",children:B(Oe,{"aria-label":"Toggle section",color:"var(--chakra-colors-neutral-700)",height:"16px",width:"16px"})})]})}),H("div",{className:s?"item-content-open":"item-content-closed","aria-hidden":!s,children:[e,n&&B(r,{css:Ol,children:n})]})]})})})};function Ll(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function Pl(e){if(e.__esModule)return e;var t=e.default;if("function"==typeof t){var n=function e(){return this instanceof e?Reflect.construct(t,arguments,this.constructor):t.apply(this,arguments)};n.prototype=t.prototype}else n={};return Object.defineProperty(n,"__esModule",{value:!0}),Object.keys(e).forEach((function(t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})})),n}var Tl,_l={exports:{}},Ml={},Dl={exports:{}},Nl={exports:{}},Vl={};var jl,Il,Al,zl,Hl,Bl,Fl,Zl,Wl,ql,Gl,Ul,Xl,Yl={};
 /** @license React v16.13.1
  * react-is.development.js
  *

package/package.json

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