@salesforce-ux/design-system/__internal/chunked/docs/ui/components/menus/docs.mdx.js

Salesforce Lightning Design System

var SLDS=SLDS||{};SLDS["__internal/chunked/docs/ui/components/menus/docs.mdx.js"]=function(e){function t(t){for(var l,o,r=t[0],i=t[1],d=t[2],c=0,m=[];c<r.length;c++)o=r[c],s[o]&&m.push(s[o][0]),s[o]=0;for(l in i)Object.prototype.hasOwnProperty.call(i,l)&&(e[l]=i[l]);for(u&&u(t);m.length;)m.shift()();return a.push.apply(a,d||[]),n()}function n(){for(var e,t=0;t<a.length;t++){for(var n=a[t],l=!0,r=1;r<n.length;r++){var i=n[r];0!==s[i]&&(l=!1)}l&&(a.splice(t--,1),e=o(o.s=n[0]))}return e}var l={},s={13:0},a=[];function o(t){if(l[t])return l[t].exports;var n=l[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,o),n.l=!0,n.exports}o.m=e,o.c=l,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:n})},o.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/assets/scripts/bundle/";var r=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],i=r.push.bind(r);r.push=t,r=r.slice();for(var d=0;d<r.length;d++)t(r[d]);var u=i;return a.push([223,0]),n()}({0:function(e,t){e.exports=React},222:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.Submenu=t.Context=t.MenuItemHasSubmenu=void 0;var l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var l in n)Object.prototype.hasOwnProperty.call(n,l)&&(e[l]=n[l])}return e},s=i(n(0)),a=n(19),o=i(n(4)),r=i(n(1));function i(e){return e&&e.__esModule?e:{default:e}}var d=s.default.createElement(o.default,{className:"slds-icon slds-icon_x-small slds-icon-text-default slds-m-left_small slds-shrink-none",sprite:"utility",symbol:"right"}),u=function(e){var t=e.ariaExpanded,n=e.className,o=(e.children,e.iconRight),i=e.itemName,d=e.tabIndex,u=e.title,c=e.submenuClassnames,m=function(e,t){var n={};for(var l in e)t.indexOf(l)>=0||Object.prototype.hasOwnProperty.call(e,l)&&(n[l]=e[l]);return n}(e,["ariaExpanded","className","children","iconRight","itemName","tabIndex","title","submenuClassnames"]);return s.default.createElement("li",l({},m,{className:(0,r.default)("slds-dropdown__item slds-has-submenu",n),role:"presentation"}),s.default.createElement("a",{role:"menuitem",href:"javascript:void(0);","aria-haspopup":"true","aria-expanded":t,tabIndex:d||"-1"},s.default.createElement("span",{className:"slds-truncate",title:u||i},e.itemName),o||null),s.default.createElement(a.Menu,{className:(0,r.default)("slds-dropdown_submenu",c)},s.default.createElement(a.MenuList,{ariaLabel:i},s.default.createElement(a.MenuItem,{tabIndex:"0"},"Submenu Item One"),s.default.createElement(a.MenuItem,null,"Submenu Item Two"),s.default.createElement(a.MenuItem,null,"Submenu Item Three"),s.default.createElement("li",{className:"slds-has-divider_top-space",role:"separator"}),s.default.createElement(a.MenuItem,null,"Submenu Item Four"))))};t.MenuItemHasSubmenu=u;t.Context=function(e){return s.default.createElement("div",{className:"demo-only",style:{height:"300px"}},e.children)};var c=t.Submenu=function(e){return s.default.createElement(a.Trigger,{className:"slds-is-open"},s.default.createElement(a.Menu,{className:"slds-dropdown_left"},s.default.createElement(a.MenuList,{ariaLabel:"Show More"},s.default.createElement(a.MenuItem,{tabIndex:"0"},"Menu Item One"),s.default.createElement(a.MenuItem,null,"Menu Item Two"),s.default.createElement(u,{ariaExpanded:e.ariaExpanded,iconRight:d,itemName:"Menu Item Three",submenuClassnames:e.submenuClassnames||"slds-dropdown_submenu-right"}))))};t.default=s.default.createElement(c,{ariaExpanded:!0})},223:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getContents=t.getElement=void 0;var l=n(0),s=(m(l),n(7)),a=m(s),o=m(n(9)),r=m(n(11)),i=m(n(10)),d=m(n(12)),u=n(19),c=n(222);n(31);function m(e){return e&&e.__esModule?e:{default:e}}var h=s.factories.code,p=s.factories.h2,f=s.factories.h3,w=s.factories.li,b=s.factories.p,g=s.factories.table,E=s.factories.tbody,v=s.factories.td,_=s.factories.th,x=s.factories.thead,y=s.factories.tr,I=s.factories.ul,M=t.getElement=function(){return(0,l.createElement)(a.default,{},(0,l.createElement)("div",{className:"doc lead"},"A Menu offers a list of actions or functions that a user can access."),(0,l.createElement)(i.default,{title:"Menu Base"},(0,l.createElement)(o.default,{style:{height:"200px"}},(0,l.createElement)(u.BaseMenu,{className:"slds-dropdown_left"}))),b({},"The unordered menu list ",h({},"<ul>")," with ",h({},'role="menu"')," should be contained in a ",h({},"<div>")," with the class ",h({},".slds-dropdown"),"."),b({},"The target HTML element and dropdown need to be wrapped in the class ",h({},".slds-dropdown-trigger dropdown-trigger_click"),"."),b({},(0,l.createElement)(d.default,{type:"a11y",header:"Key Accessibility Markup"},(0,l.createElement)("ul",null,(0,l.createElement)("li",null,"- The menu trigger is a focusable element (",h({},"<a>")," or ",h({},"<button>"),") with ",h({},'aria-haspopup="true"')),(0,l.createElement)("li",null,"- The menu has ",h({},'role="menu"')," and an ",h({},"aria-label")," attribute whose value is the name of the menu trigger"),(0,l.createElement)("li",null,"- The menu items have ",h({},'role="menuitem"'),", ",h({},'role="menuitemcheckbox"'),", or ",h({},'role="menuitemradio"'),", depending on the selection options")))),p({id:"Expected-Keyboard-Interactions"},"Expected Keyboard Interactions"),b({},"The main thing that distinguishes menus from other popover blocks is keyboard navigation: elsewhere, users press the Tab key to navigate through actionable items, but in a menu, users press the arrow keys to navigate."),I({},w({},"Arrow keys cycle focus through menu items (you should use JavaScript to disable focus for any disabled items)"),w({},"If a menu item opens a submenu, pressing Enter or the right arrow key opens the submenu and focus goes to the first item in the submenu"),w({},"If a submenu is open, pressing the left arrow key closes the submenu and puts focus back on the menu item that opened the submenu"),w({},"Tab key closes the menu and moves focus to the next focusable element on the page"),w({},"Esc key closes the menu and moves focus back to the menu trigger"),w({},"Any character key moves focus to the next menu item that starts with that character, if applicable")),p({id:"With-Subheaders"},"With Subheaders"),b({},(0,l.createElement)(d.default,{type:"a11y",header:"Accessible Role"},"A subheading must have ",h({},'role="separator"')," on the ",h({},"<li>")," and the content inside the ",h({},"<li>")," should be in a ",h({},"<span>"),".")),(0,l.createElement)(r.default,{toggleCode:!1},(0,l.createElement)("li",{className:"slds-dropdown__header slds-truncate",title:"Menu Sub Heading",role:"separator"},(0,l.createElement)("span",null,"Menu Sub Heading"))),(0,l.createElement)(i.default,{title:"Menu with Subheaders"},(0,l.createElement)(o.default,{style:{height:"300px"}},(0,l.createElement)(u.SubHeader,null))),p({id:"With-Icons"},"With Icons"),b({},"Icons can be included on either the left, right, or both sides of an option."),(0,l.createElement)(d.default,{type:"a11y",header:"Accessibility Note"},"If using one of the icons to indicate selection (e.g. checkmarks), be sure to check out the ",(0,l.createElement)("a",{href:"#With-Selectable-Items"},"Menus with Selectable Items")," docs for the Accessibility implications"),f({id:"Icon-on-the-Left"},"Icon on the Left"),(0,l.createElement)(i.default,{title:"Menu with Icon Left"},(0,l.createElement)(o.default,{style:{height:"150px"}},(0,l.createElement)(u.IconLeft,{hasLeftIcon:!0}))),f({id:"Icon-on-the-Right"},"Icon on the Right"),(0,l.createElement)(i.default,{title:"Menu with Icon Right"},(0,l.createElement)(o.default,{style:{height:"150px"}},(0,l.createElement)(u.IconRight,null))),f({id:"Double-Icon"},"Double Icon"),(0,l.createElement)(d.default,{type:"a11y",header:"Accessibility Note"},"If using one of the icons to indicate selection (e.g. checkmarks), be sure to check out the ",(0,l.createElement)("a",{href:"#With-Selectable-Items"},"Menus with Selectable Items")," docs"),(0,l.createElement)(i.default,{title:"Menu with Double Icon"},(0,l.createElement)(o.default,{style:{height:"150px"}},(0,l.createElement)(u.DoubleIcon,null))),p({id:"With-Selectable-Items"},"With Selectable Items"),b({},"When creating a menu with selectable items:"),I({},w({},"All selectable items need the proper role, either ",h({},'role="menuitemcheckbox"')," or ",h({},'role="menuitemradio"')),w({},"All selectable items should contain an icon"),w({},"Each icon must have the class ",h({},"slds-icon_selected")," on the ",h({},"<svg>"),I({},w({},"This hides icons of non-selected items"))),w({},"Items that have been selected need ",h({},'aria-checked="true"')," on the ",h({},"<a>")," element")),b({},(0,l.createElement)(d.default,{type:"a11y",header:"Revealing Icons for Selected Items"},"A selected item reveals its icon when the class ",h({},"slds-is-selected")," is applied to the ",h({},"<li>")," and ",h({},'aria-checked="true"')," is applied to its ",h({},"menuitemcheckbox")," or ",h({},"menuitemradio")," child.")),(0,l.createElement)(r.default,{toggleCode:!1},(0,l.createElement)("li",{className:"slds-dropdown__item slds-is-selected",role:"presentation"},(0,l.createElement)("a",{role:"menuitemcheckbox","aria-checked":"true"},"..."))),(0,l.createElement)(i.default,{title:"Menu with Selectable Icon Left"},(0,l.createElement)(o.default,{style:{height:"150px"}},(0,l.createElement)(u.IconLeft,{isSelectable:!0}))),p({id:"With-Status-Notifications"},"With Status Notifications"),(0,l.createElement)(o.default,{style:{height:"250px"}},(0,l.createElement)(u.NotificationsMenu,null)),b({},"To enable menu items to reflect status level notifications like Error, Success and Warning, place a modifier class onto the ",h({},"menuitem")," that has the offending notification."),b({},"The class is based on the ",h({},"slds-has-${level}")," pattern, where ",h({},"${level}")," corresponds to the level you wish to set."),I({},w({},h({},"slds-has-error")),w({},h({},"slds-has-success")),w({},h({},"slds-has-warning"))),(0,l.createElement)(r.default,{toggleCode:!1},(0,l.createElement)("a",{class:"slds-has-warning",href:"javascript:void(0);",role:"menuitem",tabindex:"-1"},"...")),(0,l.createElement)(d.default,{type:"note",header:"Warning Icon"},"For warning level menu items it is required that you switch the icon to use the `currentColor` variant for icons."),p({id:"With-Overflow-Scrolling"},"With Overflow Scrolling"),(0,l.createElement)(i.default,{title:"Menu with Overflow Scrolling"},(0,l.createElement)(o.default,{style:{height:"220px"}},(0,l.createElement)(u.OverflowMenu,{className:"slds-dropdown_left slds-dropdown_length-5"}))),b({},"To force overflow scrolling after either 5, 7, or 10 items, add the modifier ",h({},"slds-dropdown_length-*")," to the ",h({},"<div>")," with class ",h({},"slds-dropdown")," where the ",h({},"*")," is either 5, 7, or 10."),(0,l.createElement)(r.default,{toggleCode:!1},(0,l.createElement)("div",{className:"slds-dropdown slds-dropdown_length-5"},"...")),f({id:"Scrolling-for-Menu-Items-with-Icons"},"Scrolling for Menu Items with Icons"),b({},"To force overflow scrolling after either 5, 7, or 10 items with icons, add the modifier ",h({},"slds-dropdown_length-with-icon-*")," to the ",h({},"<div>")," with class ",h({},"slds-dropdown")," where the ",h({},"*")," is either 5, 7, or 10."),(0,l.createElement)(o.default,{style:{height:"250px"}},(0,l.createElement)(u.OverflowMenu,{isSelectable:!0,isSelected:"true",className:"slds-dropdown_left slds-dropdown_length-with-icon-5"})),p({id:"With-a-Submenu"},"With a Submenu"),b({},"To create a menu with a submenu, add the ",h({},"slds-has-submenu")," class to the list item, ",h({},"<li>"),", that will open the submenu."),b({},(0,l.createElement)(d.default,{type:"a11y",header:"Accessibility Note"},"Any menu item that opens a submenu must have ",h({},'aria-haspop="true"')," on the ",h({},"<a>")," within the ",h({},"<li>"),". In order to open the submenu, set ",h({},"aria-expanded")," to ",h({},"true")," on that ",h({},"<a>")," when the user clicks or hovers over the list item, or presses enter while focused on the list item. Additionally, the submenu should have ",h({},'role="menu"')," and an ",h({},"aria-label")," attribute whose value matches the name of the ",h({},"<li>")," that opened the submenu.")),(0,l.createElement)(r.default,{toggleCode:!1},(0,l.createElement)("li",{className:"slds-dropdown__item slds-has-submenu",role:"presentation"},(0,l.createElement)("a",{role:"menuitem",href:"javascript:void(0);","aria-haspopup":"true","aria-expanded":"true",tabIndex:"-1"},"..."),(0,l.createElement)("div",{className:"slds-dropdown slds-dropdown_submenu slds-dropdown_submenu-left"},(0,l.createElement)("ul",{className:"slds-dropdown__list",role:"menu","aria-label":"Name of Item that Opened this Menu"},"...")))),f({id:"Submenu-to-Right"},"Submenu to Right"),b({},"To open the submenu to the right of the main menu, add ",h({},"slds-dropdown_submenu-right")," to the ",h({},"<div>")," with the ",h({},"slds-dropdown_submenu")," class."),(0,l.createElement)(i.default,{title:"Menu with Submenu Right"},(0,l.createElement)(o.default,{style:{height:"300px"}},(0,l.createElement)(c.Submenu,{ariaExpanded:"true"}))),f({id:"Submenu-to-Left"},"Submenu to Left"),b({},"To open the submenu to the left, add ",h({},"slds-dropdown_submenu-left")," to the ",h({},"<div>")," with the ",h({},"slds-dropdown_submenu")," class."),(0,l.createElement)(i.default,{title:"Menu with Submenu Left"},(0,l.createElement)(o.default,{style:{height:"300px",marginLeft:"150px"}},(0,l.createElement)(c.Submenu,{ariaExpanded:!0,submenuClassnames:"slds-dropdown_submenu-left"}))),p({id:"Overflow-Menu-with-Actions"},"Overflow Menu with Actions"),b({},"For an overflow of action items, use the overflow menu with actions styling by adding the modifier ",h({},"slds-dropdown_actions")," to the ",h({},"div")," with class ",h({},"slds-dropdown"),". This pattern is typically used in conjunction with a button group."),(0,l.createElement)(i.default,{title:"Menu with Action Overflow"},(0,l.createElement)(o.default,{style:{height:"150px"}},(0,l.createElement)(u.ActionOverflow,null))),p({id:"Positioning"},"Positioning"),b({},"There are 3 options for the positioning of the menu dropdown -- left, right, and bottom. To access these options, add a modifier to the ",h({},"<div>")," with class name ",h({},"slds-dropdown"),". For the standard positioning where the dropdown aligns with the left side of the dropdown trigger, use ",h({},"slds-dropdown_left"),", as seen above."),(0,l.createElement)(r.default,{toggleCode:!1},(0,l.createElement)("div",{className:"slds-dropdown slds-dropdown_left"},"...")),f({id:"Positioned-Right"},"Positioned Right"),b({},"To position the dropdown to align with the right of the dropdown trigger, use ",h({},"slds-dropdown_right"),"."),(0,l.createElement)(i.default,{title:"Menu Poistioned Right"},(0,l.createElement)(o.default,{style:{height:"200px",marginLeft:"90px"}},(0,l.createElement)(u.BaseMenu,{className:"slds-dropdown_right"}))),f({id:"Positioned-Bottom"},"Positioned Bottom"),b({},"To position the dropdown to sit on top of the dropdown trigger, use ",h({},"slds-dropdown_bottom"),"."),(0,l.createElement)(i.default,{title:"Menu Positioned Bottom"},(0,l.createElement)(o.default,{style:{marginLeft:"45px",marginTop:"163px"}},(0,l.createElement)(u.BaseMenu,{className:"slds-dropdown_bottom"}))),p({id:"Width"},"Width"),b({},"To adjust the width of the menu dropdown add modifier ",h({},"slds-dropdown_*")," to the ",h({},"<div>")," with class ",h({},"slds-dropdown")," where the ",h({},"*")," is ",h({},"xx-small"),", ",h({},"x-small"),", ",h({},"small"),", ",h({},"medium"),", or ",h({},"large"),"."),(0,l.createElement)(r.default,{toggleCode:!1},(0,l.createElement)("div",{className:"slds-dropdown slds-dropdown_left slds-dropdown_medium"},"...")),g({},x({},y({},_({},"Modifier"),_({},"Example"))),E({},y({},v({},h({},".slds-dropdown_xx-small")," ",(0,l.createElement)("br",null)," 6rem / 96px"),v({},(0,l.createElement)("div",{style:{height:"200px",width:"320px"}},(0,l.createElement)(u.BaseMenu,{className:"slds-dropdown_left slds-dropdown_xx-small"})))),y({},v({},h({},".slds-dropdown_x-small")," ",(0,l.createElement)("br",null)," 12rem / 192px"),v({},(0,l.createElement)("div",{style:{height:"200px",width:"320px"}},(0,l.createElement)(u.BaseMenu,{className:"slds-dropdown_left slds-dropdown_x-small"})))),y({},v({},h({},".slds-dropdown_small")," ",(0,l.createElement)("br",null)," 15rem / 240px"),v({},(0,l.createElement)("div",{style:{height:"200px",width:"320px"}},(0,l.createElement)(u.BaseMenu,{className:"slds-dropdown_left slds-dropdown_small"})))),y({},v({},h({},".slds-dropdown_medium")," ",(0,l.createElement)("br",null)," 20rem / 320px"),v({},(0,l.createElement)("div",{style:{height:"200px",width:"320px"}},(0,l.createElement)(u.BaseMenu,{className:"slds-dropdown_left slds-dropdown_medium"})))),y({},v({},h({},".slds-dropdown_large")," ",(0,l.createElement)("br",null)," 25rem / 400px"),v({},(0,l.createElement)("div",{style:{height:"200px",width:"320px"}},(0,l.createElement)(u.BaseMenu,{className:"slds-dropdown_left slds-dropdown_large"})))))))};t.getContents=function(){return(0,s.createTableOfContents)(M())}},6:function(e,t){e.exports=JSBeautify}});