@worldresources/wri-design-systems 2.197.1 → 2.198.0

package/dist/index.cjs.js

@@ -180,11 +180,11 @@
     font-weight: 400;
     color: ${w("neutral",700)};
   }
-`,xm=({item:t,isLast:n,isChecked:o=!1})=>{return r.jsx(e.Menu.Item,{css:bm,value:t.value||t.label||"",disabled:t.disabled,role:"menuitem","aria-label":t.label,children:t.children?t.children:r.jsxs(r.Fragment,{children:[t.startIcon,r.jsxs("div",{css:(s=!!t.startIcon,a=!!t.endIcon,i.css`
+`,xm=({item:t,isChecked:n=!1})=>{return r.jsx(e.Menu.Item,{css:bm,value:t.value||t.label||"",disabled:t.disabled,role:"menuitem","aria-label":t.label,children:t.children?t.children:r.jsxs(r.Fragment,{children:[t.startIcon,r.jsxs("div",{css:(o=!!t.startIcon,s=!!t.endIcon,i.css`
   width: 100%;
-  margin-left: ${s?k(200):"0"};
-  margin-right: ${a?k(200):"0"};
-`),children:[r.jsxs("div",{css:ym(o),children:[r.jsx("p",{className:"ds-menu-item-label",children:t.label}),t.command?r.jsx(e.Menu.ItemCommand,{"aria-label":`Shortcut ${t.command}`,children:t.command}):null]}),t.caption?r.jsx("p",{className:"ds-menu-item-caption",children:t.caption}):null]}),o?r.jsx(Rf,{}):t.endIcon]})});var s,a},wm=(e,t)=>i.css`
+  margin-left: ${o?k(200):"0"};
+  margin-right: ${s?k(200):"0"};
+`),children:[r.jsxs("div",{css:ym(n),children:[r.jsx("p",{className:"ds-menu-item-label",children:t.label}),t.command?r.jsx(e.Menu.ItemCommand,{"aria-label":`Shortcut ${t.command}`,children:t.command}):null]}),t.caption?r.jsx("p",{className:"ds-menu-item-caption",children:t.caption}):null]}),n?r.jsx(Rf,{}):t.endIcon]})});var o,s},wm=(e,t)=>i.css`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -236,8 +236,8 @@
     border-bottom: ${j(100)} solid
       ${w("neutral",600)};
   }
-`,km=i.css`
-  width: 14rem;
+`,km=(e="14rem")=>i.css`
+  width: ${"content"===e?"max-content":e};
   border: ${j(100)} solid ${w("neutral",600)};
   box-shadow: 0 0.25rem 0.375rem -0.25rem #0000001a;
   box-shadow: 0 0.625rem 0.9375rem -0.1875rem #0000001a;
@@ -300,7 +300,7 @@
   line-height: ${S(500)};
   font-weight: 700;
   color: ${w("neutral",900)};
-`,jm=({theme:t="light",label:o,hideArrow:i=!1,fontSize:s,items:a,groups:l,onSelect:c,customTrigger:d,selectionMode:u,defaultSelectedValues:h=[]})=>{const[p,f]=n.useState(!1),[m,g]=n.useState(new Set(h)),v=n.useRef(null);return n.useEffect((()=>{if(!p||!v.current)return;const e=new window.IntersectionObserver((([e])=>{e.isIntersecting||f(!1)}),{threshold:.01});return e.observe(v.current),()=>{e.disconnect()}}),[p]),r.jsxs(e.Menu.Root,{closeOnSelect:"multiple"!==u,onSelect:({value:e})=>{g((t=>{const n=new Set(t);return"radio"===u?(n.clear(),n.add(e)):n.has(e)?n.delete(e):n.add(e),n})),c&&c(e)},onOpenChange:({open:e})=>f(e),open:p,children:[r.jsx(e.Menu.Trigger,{css:wm(t,s),asChild:!0,children:d||r.jsxs("button",{type:"button",ref:v,children:[o,r.jsx(If,{marginLeft:"0.375rem",rotate:p?"180":"0",height:"0.875rem",width:"0.875rem"})]})}),r.jsx(e.Portal,{children:r.jsx(e.Menu.Positioner,{children:r.jsxs(e.Menu.Content,{css:km,role:"menu","aria-label":o||"Menu",children:[i?null:r.jsx("div",{css:Cm}),a?.map(((t,o)=>{if(t.submenu){const[i,s]=n.useState(!1);return r.jsxs(e.Menu.Root,{positioning:{placement:"right-start",gutter:2},onSelect:({value:e})=>c&&c(e),onOpenChange:({open:e})=>s(e),open:i,children:[r.jsxs(e.Menu.TriggerItem,{css:Sm,role:"menuitem","aria-haspopup":"true","aria-expanded":i?"true":"false",children:[t.label,r.jsx(If,{rotate:"270",color:"var(--chakra-colors-neutral-700)"})]}),r.jsx(e.Portal,{children:r.jsx(e.Menu.Positioner,{children:r.jsx(e.Menu.Content,{css:km,role:"menu","aria-label":`${t.label} submenu`,children:t.submenu.map(((e,n)=>r.jsx(xm,{item:e,isLast:n===(t.submenu?.length||0)-1},e.value)))})})})]},`${t.value}-${o}`)}return r.jsx(xm,{item:t,isLast:o===a.length-1,isChecked:!!u&&m.has(t.value||t.label||"")},`${t.value}-${o}`)})),l?.map(((t,o)=>r.jsxs(n.Fragment,{children:[r.jsxs(e.Menu.ItemGroup,{role:"group","aria-labelledby":`group-${o}`,children:[r.jsx(e.Menu.ItemGroupLabel,{id:`group-${o}`,css:$m,children:t.title}),t.items?.map((e=>r.jsx(xm,{item:e,isLast:!0,isChecked:!!u&&m.has(e.value||e.label||"")},e.value)))]}),o!==l.length-1?r.jsx(e.Menu.Separator,{borderColor:"var(--chakra-colors-neutral-300)"}):null]},t.title)))]})})})]})},Em=i.css`
+`,jm=({theme:t="light",label:o,hideArrow:i=!1,fontSize:s,items:a,groups:l,onSelect:c,customTrigger:d,selectionMode:u,defaultSelectedValues:h=[],menuWidth:p="14rem"})=>{const[f,m]=n.useState(!1),[g,v]=n.useState(new Set(h)),b=n.useRef(null);return n.useEffect((()=>{if(!f||!b.current)return;const e=new window.IntersectionObserver((([e])=>{e.isIntersecting||m(!1)}),{threshold:.01});return e.observe(b.current),()=>{e.disconnect()}}),[f]),r.jsxs(e.Menu.Root,{closeOnSelect:"multiple"!==u,onSelect:({value:e})=>{v((t=>{const n=new Set(t);return"radio"===u?(n.clear(),n.add(e)):n.has(e)?n.delete(e):n.add(e),n})),c&&c(e)},onOpenChange:({open:e})=>m(e),open:f,children:[r.jsx(e.Menu.Trigger,{css:wm(t,s),asChild:!0,children:d||r.jsxs("button",{type:"button",ref:b,children:[o,r.jsx(If,{marginLeft:"0.375rem",rotate:f?"180":"0",height:"0.875rem",width:"0.875rem"})]})}),r.jsx(e.Portal,{children:r.jsx(e.Menu.Positioner,{children:r.jsxs(e.Menu.Content,{css:km(p),role:"menu","aria-label":o||"Menu",children:[i?null:r.jsx("div",{css:Cm}),a?.map(((t,o)=>{if(t.submenu){const[i,s]=n.useState(!1);return r.jsxs(e.Menu.Root,{positioning:{placement:"right-start",gutter:2},onSelect:({value:e})=>c&&c(e),onOpenChange:({open:e})=>s(e),open:i,children:[r.jsxs(e.Menu.TriggerItem,{css:Sm,role:"menuitem","aria-haspopup":"true","aria-expanded":i?"true":"false",children:[t.label,r.jsx(If,{rotate:"270",color:"var(--chakra-colors-neutral-700)"})]}),r.jsx(e.Portal,{children:r.jsx(e.Menu.Positioner,{children:r.jsx(e.Menu.Content,{css:km(t.menuWidth),role:"menu","aria-label":`${t.label} submenu`,children:t.submenu.map(((e,t)=>r.jsx(xm,{item:e},e.value)))})})})]},`${t.value}-${o}`)}return r.jsx(xm,{item:t,isChecked:!!u&&g.has(t.value||t.label||"")},`${t.value}-${o}`)})),l?.map(((t,o)=>r.jsxs(n.Fragment,{children:[r.jsxs(e.Menu.ItemGroup,{role:"group","aria-labelledby":`group-${o}`,children:[r.jsx(e.Menu.ItemGroupLabel,{id:`group-${o}`,css:$m,children:t.title}),t.items?.map((e=>r.jsx(xm,{item:e,isChecked:!!u&&g.has(e.value||e.label||"")},e.value)))]}),o!==l.length-1?r.jsx(e.Menu.Separator,{borderColor:"var(--chakra-colors-neutral-300)"}):null]},t.title)))]})})})]})},Em=i.css`
   &:focus-visible {
     outline: none;
   }

package/dist/index.d.ts

@@ -686,6 +686,7 @@ type MenuItemProps = {
     submenu?: MenuItemProps[];
     onClick?: () => void;
     link?: string;
+    menuWidth?: string | 'content';
 };
 type MenuProps = {
     theme?: 'light' | 'dark';
@@ -704,9 +705,10 @@ type MenuProps = {
     selectionMode?: 'multiple' | 'radio';
     /** Values that are checked by default on first render. */
     defaultSelectedValues?: string[];
+    menuWidth?: string | 'content';
 };
 
-declare const Menu: ({ theme, label, hideArrow, fontSize, items, groups, onSelect, customTrigger, selectionMode, defaultSelectedValues, }: MenuProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const Menu: ({ theme, label, hideArrow, fontSize, items, groups, onSelect, customTrigger, selectionMode, defaultSelectedValues, menuWidth, }: MenuProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type MultiActionButtonProps = Omit<ButtonProps$1, 'size' | 'variant' | 'colorPalette' | 'children'> & {
     variant?: 'primary' | 'secondary';

package/dist/index.esm.js

@@ -180,11 +180,11 @@ import{createSystem as e,defaultConfig as t,Button as n,Box as r,Spinner as o,Ic
     font-weight: 400;
     color: ${ze("neutral",700)};
   }
-`,zg=({item:e,isLast:t,isChecked:n=!1})=>{return ye(s.Item,{css:Pg,value:e.value||e.label||"",disabled:e.disabled,role:"menuitem","aria-label":e.label,children:e.children?e.children:be(we,{children:[e.startIcon,be("div",{css:(r=!!e.startIcon,o=!!e.endIcon,$e`
+`,zg=({item:e,isChecked:t=!1})=>{return ye(s.Item,{css:Pg,value:e.value||e.label||"",disabled:e.disabled,role:"menuitem","aria-label":e.label,children:e.children?e.children:be(we,{children:[e.startIcon,be("div",{css:(n=!!e.startIcon,r=!!e.endIcon,$e`
   width: 100%;
-  margin-left: ${r?He(200):"0"};
-  margin-right: ${o?He(200):"0"};
-`),children:[be("div",{css:Ig(n),children:[ye("p",{className:"ds-menu-item-label",children:e.label}),e.command?ye(s.ItemCommand,{"aria-label":`Shortcut ${e.command}`,children:e.command}):null]}),e.caption?ye("p",{className:"ds-menu-item-caption",children:e.caption}):null]}),n?ye(Jm,{}):e.endIcon]})});var r,o},Vg=(e,t)=>$e`
+  margin-left: ${n?He(200):"0"};
+  margin-right: ${r?He(200):"0"};
+`),children:[be("div",{css:Ig(t),children:[ye("p",{className:"ds-menu-item-label",children:e.label}),e.command?ye(s.ItemCommand,{"aria-label":`Shortcut ${e.command}`,children:e.command}):null]}),e.caption?ye("p",{className:"ds-menu-item-caption",children:e.caption}):null]}),t?ye(Jm,{}):e.endIcon]})});var n,r},Vg=(e,t)=>$e`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -236,8 +236,8 @@ import{createSystem as e,defaultConfig as t,Button as n,Box as r,Spinner as o,Ic
     border-bottom: ${je(100)} solid
       ${ze("neutral",600)};
   }
-`,_g=$e`
-  width: 14rem;
+`,_g=(e="14rem")=>$e`
+  width: ${"content"===e?"max-content":e};
   border: ${je(100)} solid ${ze("neutral",600)};
   box-shadow: 0 0.25rem 0.375rem -0.25rem #0000001a;
   box-shadow: 0 0.625rem 0.9375rem -0.1875rem #0000001a;
@@ -300,7 +300,7 @@ import{createSystem as e,defaultConfig as t,Button as n,Box as r,Spinner as o,Ic
   line-height: ${_e(500)};
   font-weight: 700;
   color: ${ze("neutral",900)};
-`,Fg=({theme:e="light",label:t,hideArrow:n=!1,fontSize:r,items:o,groups:i,onSelect:l,customTrigger:c,selectionMode:d,defaultSelectedValues:u=[]})=>{const[h,p]=le(!1),[f,m]=le(new Set(u)),g=ae(null);return de((()=>{if(!h||!g.current)return;const e=new window.IntersectionObserver((([e])=>{e.isIntersecting||p(!1)}),{threshold:.01});return e.observe(g.current),()=>{e.disconnect()}}),[h]),be(s.Root,{closeOnSelect:"multiple"!==d,onSelect:({value:e})=>{m((t=>{const n=new Set(t);return"radio"===d?(n.clear(),n.add(e)):n.has(e)?n.delete(e):n.add(e),n})),l&&l(e)},onOpenChange:({open:e})=>p(e),open:h,children:[ye(s.Trigger,{css:Vg(e,r),asChild:!0,children:c||be("button",{type:"button",ref:g,children:[t,ye(Qm,{marginLeft:"0.375rem",rotate:h?"180":"0",height:"0.875rem",width:"0.875rem"})]})}),ye(a,{children:ye(s.Positioner,{children:be(s.Content,{css:_g,role:"menu","aria-label":t||"Menu",children:[n?null:ye("div",{css:Hg}),o?.map(((e,t)=>{if(e.submenu){const[n,r]=le(!1);return be(s.Root,{positioning:{placement:"right-start",gutter:2},onSelect:({value:e})=>l&&l(e),onOpenChange:({open:e})=>r(e),open:n,children:[be(s.TriggerItem,{css:Bg,role:"menuitem","aria-haspopup":"true","aria-expanded":n?"true":"false",children:[e.label,ye(Qm,{rotate:"270",color:"var(--chakra-colors-neutral-700)"})]}),ye(a,{children:ye(s.Positioner,{children:ye(s.Content,{css:_g,role:"menu","aria-label":`${e.label} submenu`,children:e.submenu.map(((t,n)=>ye(zg,{item:t,isLast:n===(e.submenu?.length||0)-1},t.value)))})})})]},`${e.value}-${t}`)}return ye(zg,{item:e,isLast:t===o.length-1,isChecked:!!d&&f.has(e.value||e.label||"")},`${e.value}-${t}`)})),i?.map(((e,t)=>be(ne.Fragment,{children:[be(s.ItemGroup,{role:"group","aria-labelledby":`group-${t}`,children:[ye(s.ItemGroupLabel,{id:`group-${t}`,css:jg,children:e.title}),e.items?.map((e=>ye(zg,{item:e,isLast:!0,isChecked:!!d&&f.has(e.value||e.label||"")},e.value)))]}),t!==i.length-1?ye(s.Separator,{borderColor:"var(--chakra-colors-neutral-300)"}):null]},e.title)))]})})})]})},qg=$e`
+`,Fg=({theme:e="light",label:t,hideArrow:n=!1,fontSize:r,items:o,groups:i,onSelect:l,customTrigger:c,selectionMode:d,defaultSelectedValues:u=[],menuWidth:h="14rem"})=>{const[p,f]=le(!1),[m,g]=le(new Set(u)),v=ae(null);return de((()=>{if(!p||!v.current)return;const e=new window.IntersectionObserver((([e])=>{e.isIntersecting||f(!1)}),{threshold:.01});return e.observe(v.current),()=>{e.disconnect()}}),[p]),be(s.Root,{closeOnSelect:"multiple"!==d,onSelect:({value:e})=>{g((t=>{const n=new Set(t);return"radio"===d?(n.clear(),n.add(e)):n.has(e)?n.delete(e):n.add(e),n})),l&&l(e)},onOpenChange:({open:e})=>f(e),open:p,children:[ye(s.Trigger,{css:Vg(e,r),asChild:!0,children:c||be("button",{type:"button",ref:v,children:[t,ye(Qm,{marginLeft:"0.375rem",rotate:p?"180":"0",height:"0.875rem",width:"0.875rem"})]})}),ye(a,{children:ye(s.Positioner,{children:be(s.Content,{css:_g(h),role:"menu","aria-label":t||"Menu",children:[n?null:ye("div",{css:Hg}),o?.map(((e,t)=>{if(e.submenu){const[n,r]=le(!1);return be(s.Root,{positioning:{placement:"right-start",gutter:2},onSelect:({value:e})=>l&&l(e),onOpenChange:({open:e})=>r(e),open:n,children:[be(s.TriggerItem,{css:Bg,role:"menuitem","aria-haspopup":"true","aria-expanded":n?"true":"false",children:[e.label,ye(Qm,{rotate:"270",color:"var(--chakra-colors-neutral-700)"})]}),ye(a,{children:ye(s.Positioner,{children:ye(s.Content,{css:_g(e.menuWidth),role:"menu","aria-label":`${e.label} submenu`,children:e.submenu.map(((e,t)=>ye(zg,{item:e},e.value)))})})})]},`${e.value}-${t}`)}return ye(zg,{item:e,isChecked:!!d&&m.has(e.value||e.label||"")},`${e.value}-${t}`)})),i?.map(((e,t)=>be(ne.Fragment,{children:[be(s.ItemGroup,{role:"group","aria-labelledby":`group-${t}`,children:[ye(s.ItemGroupLabel,{id:`group-${t}`,css:jg,children:e.title}),e.items?.map((e=>ye(zg,{item:e,isChecked:!!d&&m.has(e.value||e.label||"")},e.value)))]}),t!==i.length-1?ye(s.Separator,{borderColor:"var(--chakra-colors-neutral-300)"}):null]},e.title)))]})})})]})},qg=$e`
   &:focus-visible {
     outline: none;
   }

package/package.json

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