@salesforce-ux/design-system 2.29.0 → 2.29.2

package/__internal/chunked/docs/ui/components/list-builder/docs.mdx.js

@@ -1 +1 @@
-var SLDS;!function(){"use strict";var e,t,l,a={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},3804:function(e,t,l){l.r(t),l.d(t,{getContents:function(){return Ee},getElement:function(){return ye}});var a=l(1594),n=l.n(a),s=l(5671),r=l(6547),o=l(806),i=(l(5619),l(7412)),c=l.n(i),d=l(1766),u=l(942),m=l.n(u),b=l(538);function p(e){return p="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},p(e)}function h(e,t){for(var l=0;l<t.length;l++){var a=t[l];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,f(a.key),a)}}function f(e){var t=function(e){if("object"!=p(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var l=t.call(e,"string");if("object"!=p(l))return l;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==p(t)?t:t+""}function y(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(y=function(){return!!e})()}function E(e){return E=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},E(e)}function v(e,t){return v=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},v(e,t)}var x=function(e){var t=e.isFocused,l=e.isDisabled,a=e.isChecked,s=e.tabIndex,r=e.iconAssistiveText,i=e.iconSize,c=e.iconSymbol,d=e.iconCurrentColor,u=e.onChange,p=e.onFocus,h=e.onBlur,f=o.Ay.uniqueId("example-unique-id-"),y={"slds-checkbox-button_is-focused":t,"slds-checkbox-button_is-checked":a,"slds-checkbox-button_is-disabled":l};return n().createElement("label",{className:m()("slds-checkbox-button",y),htmlFor:f},n().createElement("input",{className:"slds-assistive-text",type:"checkbox",id:f,value:f,disabled:l,defaultChecked:a,tabIndex:s,onChange:u,onFocus:p,onBlur:h}),n().createElement(b.eX,{symbol:c,size:i,useCurrentColor:d,assistiveText:r}))};x.defaultProps={iconAssistiveText:"Add product",iconSize:"x-small",iconSymbol:"add",iconCurrentColor:!0},x.propTypes={isDisabled:c().bool,isChecked:c().bool,tabIndex:c().number,iconAssistiveText:c().string,iconSize:c().string,iconSymbol:c().string,iconCurrentColor:c().bool};var g=function(e){function t(e){var l;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),(l=function(e,t,l){return t=E(t),function(e,t){if(t&&("object"==p(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}(e,y()?Reflect.construct(t,l||[],E(e).constructor):t.apply(e,l))}(this,t,[e])).state={checked:!!l.props.isChecked,focused:!1},l.handleCheckboxChange=l.handleCheckboxChange.bind(l),l.handleFocus=l.handleFocus.bind(l),l.handleBlur=l.handleBlur.bind(l),l}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&v(e,t)}(t,e),l=t,(a=[{key:"handleCheckboxChange",value:function(){this.setState({checked:!this.state.checked})}},{key:"handleFocus",value:function(){this.state.focused||this.setState({focused:!0})}},{key:"handleBlur",value:function(){this.state.focused&&this.setState({focused:!1})}},{key:"render",value:function(){var e=this.props,t=e.iconChecked,l=e.iconUnchecked,a=e.isDisabled,s=e.tabIndex;return n().createElement(x,{onChange:this.handleCheckboxChange,iconSymbol:this.state.checked?t:l,isChecked:this.state.checked,isDisabled:a,isFocused:this.state.focused,onFocus:this.handleFocus,onBlur:this.handleBlur,tabIndex:s})}}])&&h(l.prototype,a),Object.defineProperty(l,"prototype",{writable:!1}),l;var l,a}(a.Component);g.defaultProps={iconChecked:"check",iconUnchecked:"add"},g.propTypes={iconChecked:c().string,iconUnchecked:c().string};var _=l(5159),N=l(6185),S=l(3964),C=l(6955),w=l(5006),T=l(3589),k=l(885);function A(e){return A="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},A(e)}function I(){return I=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var l=arguments[t];for(var a in l)({}).hasOwnProperty.call(l,a)&&(e[a]=l[a])}return e},I.apply(null,arguments)}function P(e,t,l){return(t=function(e){var t=function(e){if("object"!=A(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var l=t.call(e,"string");if("object"!=A(l))return l;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==A(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[t]=l,e}var R=n().createContext({isActionableMode:!1});c().string,c().node;var O=function(e){var t=m()("slds-table",{"slds-table_cell-buffer":e.hasCellBuffer,"slds-table_header-hidden":e.hasHiddenHeader,"slds-no-row-hover":e.hasNoRowHover,"slds-no-cell-focus":e.hasNoCellFocus,"slds-table_bordered":e.isBordered,"slds-table_col-bordered":e.isColBordered,"slds-table_edit":e.isEditable,"slds-table_fixed-layout":e.isFixedLayout,"slds-max-medium-table_stacked-horizontal":e.isResponsive,"slds-max-medium-table_stacked":e.isResponsiveStacked,"slds-table_resizable-cols":e.isResizable,"slds-table_striped":e.isStriped,"slds-tree slds-table_tree":"treegrid"===e.type,"slds-table_header-fixed":e.hasFixedHeader});return n().createElement("table",I({"aria-multiselectable":"multiple"===e.selectionType?"true":null,className:t,role:function(){var t=null;switch(e.type){case"advanced":t="grid";break;case"treegrid":t="treegrid"}return t}(),style:e.style},e.ariaLabelledBy&&P({},"aria-labelledby",e.ariaLabelledBy),e.ariaLabel&&P({},"aria-label",e.ariaLabel)),e.children)};O.displayName="Table",O.propTypes={ariaLabel:c().string,ariaLabelledBy:c().string,children:c().node,hasCellBuffer:c().bool,hasHiddenHeader:c().bool,hasNoCellFocus:c().bool,hasNoRowHover:c().bool,isBordered:c().bool,isColBordered:c().bool,isEditable:c().bool,isFixedLayout:c().bool,isResizable:c().bool,isResponsive:c().bool,isResponsiveStacked:c().bool,isStriped:c().bool,selectionType:c().oneOf(["multiple","single"]),style:c().object,type:c().oneOf(["advanced","base","treegrid"]).isRequired,hasFixedHeader:c().bool};var F=function(e){return n().createElement("thead",{className:e.isHidden?"slds-assistive-text":null},e.children)};F.displayName="THead",F.propTypes={children:c().node,isHidden:c().bool};var L=function(e){return n().createElement("tr",{className:"slds-line-height_reset"},e.children)};L.displayName="THeadTr",L.propTypes={children:c().node};var H=function(e){var t,l=(0,a.useContext)(R).isActionableMode,s=m()({"slds-has-button-menu":e.hasMenu,"slds-has-focus":e.hasFocus,"slds-is-resizable":e.isResizable,"slds-text-align_right":e.isRightAligned,"slds-is-sortable":e.isSortable,"slds-is-sorted":"ascending"===e.sortDirection||"descending"===e.sortDirection,"slds-is-sorted_asc":"ascending"===e.sortDirection,"slds-is-sorted_desc":"descending"===e.sortDirection,"slds-cell-wrap":e.hasWrap,"slds-cell_action-mode":l});return n().createElement("th",{"aria-sort":(t=null,e.isSortable&&(t=e.sortDirection||"none"),t),className:s,scope:!e.isDataTable&&"col",role:e.isDataTable&&"cell",style:e.style},e.isDataTable,e.children)};H.displayName="ColumnTh",H.propTypes={"aria-label":c().string,children:c().node,hasFocus:c().bool,hasMenu:c().bool,isResizable:c().bool,isRightAligned:c().bool,isSortable:c().bool,sortDirection:c().oneOf(["ascending","descending","none"]),style:c().object,hasWrap:c().bool,isDataTable:c().bool};var j=function(e){return n().createElement("div",{className:m()("slds-truncate",{"slds-assistive-text":e.isAssistiveText,"slds-cell-fixed":e.isFixedCell}),id:e.id,title:e.columnName},e.columnName)};j.displayName="ColumnHeader",j.propTypes={columnName:c().string.isRequired,id:c().string,isAssistiveText:c().bool,isFixedCell:c().bool},j.defaultProps={columnName:"Column Name",isDataTable:c().bool};var D=function(e){var t=o.Ay.uniqueId("cell-resize-handle-");return n().createElement("div",{className:"slds-resizable"},n().createElement("input",{"aria-label":e.label,className:"slds-resizable__input slds-assistive-text",id:t,max:"1000",min:"20",tabIndex:e.tabIndex,type:"range"}),n().createElement("span",{className:"slds-resizable__handle"},n().createElement("span",{className:"slds-resizable__divider"})))};D.displayName="ResizeControl",D.propTypes={label:c().string.isRequired,tabIndex:c().oneOf(["0","-1"])};var z=function(e){var t=(0,a.useContext)(R).isActionableMode,l=t?"0":"-1",s=function(){return n().createElement("div",{className:"slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate"},e.columnHeaderIcons?function(){var t=e.columnHeaderIcons.filter(function(t){return t.column===e.columnName.toLowerCase()});if(t.length)return t[0].icon}():null,n().createElement("span",{className:"slds-truncate",title:e.columnName},e.columnName),e.isSortable&&n().createElement(b.eX,{assistiveText:!1,className:"slds-icon-text-default slds-is-sortable__icon ",symbol:"arrowdown",title:!1}))};return n().createElement(n().Fragment,null,e.isSortable?n().createElement("a",{className:"slds-th__action slds-text-link_reset",href:"#",role:"button",tabIndex:l,onClick:function(e){return e.preventDefault()}},n().createElement("span",{className:"slds-assistive-text"},"Sort by: "),s()):n().createElement("div",{className:"slds-th__action"},s()),e.sortDirection&&n().createElement("span",{className:"slds-assistive-text","aria-live":"polite","aria-atomic":"true"},"Sorted ",e.sortDirection),e.hasMenu&&n().createElement(C.A,{"aria-haspopup":"true",assistiveText:"Show ".concat(e.columnName," column actions"),className:"slds-th__action-button slds-button_icon-x-small",iconClassName:"slds-button__icon_hint slds-button__icon_small",symbol:"chevrondown",tabIndex:t?"0":"-1",title:"Show ".concat(e.columnName," column actions")}),e.isResizable&&n().createElement(D,{label:e.columnName+" column width"||0,tabIndex:l}))};z.displayName="InteractiveColumnHeader",z.propTypes={columnName:c().string.isRequired,columnHeaderIcons:c().array,hasMenu:c().bool,isResizable:c().bool,isSortable:c().bool,sortDirection:c().oneOf(["ascending","descending"])},z.defaultProps={isResizable:!0,isSortable:!0};var B=function(e){var t=(0,a.useContext)(R).isActionableMode;return n().createElement(n().Fragment,null,n().createElement("div",{className:"slds-th__action slds-th__action_form"},n().createElement(T.Sc,{tabIndex:t?"0":"-1",labelId:"check-select-all-label",label:"Select All",hideLabel:!0,checked:!!e.checked||null,groupId:"column-group-header",isDataTable:!0})))};B.displayName="SelectAllColumnHeader",B.propTypes={checked:c().bool};var q=function(e){var t=e.hasErrorColumn?"2rem":"3.25rem",l=e.mainColumnWidth||null;return n().createElement(F,{isHidden:e.isHidden},n().createElement(L,null,e.hasErrorColumn?n().createElement(H,{style:{width:"3.75rem"}},n().createElement(j,{columnName:"Errors",isAssistiveText:!0})):null,!e.hasNoRowSelection&&n().createElement(H,{isDataTable:!e.hasSingleRowSelect||!e.isHidden,isRightAligned:!e.hasErrorColumn||null,style:{width:t}},e.hasSingleRowSelect||e.isHidden?n().createElement(j,{columnName:"Choose a row to select",id:"column-group-header",isAssistiveText:!0}):n().createElement(B,{checked:e.selectAll})),e.columns.map(function(t,a){return n().createElement(H,{key:a,"aria-label":t,hasFocus:0===a?e.hasFocus:null,hasMenu:e.hasMenus,isResizable:e.isResizable&&!e.isHidden,isSortable:e.isSortable&&!e.isHidden,sortDirection:0===a?e.sortDirection:null,style:{width:0===a&&e.singleColumnWidth?e.singleColumnWidth:l}},n().createElement(z,{columnName:t,columnHeaderIcons:e.columnHeaderIcons,hasMenu:e.hasMenus,isResizable:e.isResizable&&!e.isHidden,isSortable:e.isSortable&&!e.isHidden,sortDirection:0===a?e.sortDirection:null}))}),e.hasRowLevelActions&&n().createElement(H,{style:{width:"3.25rem"}},n().createElement(j,{columnName:"Actions",isAssistiveText:!0}))))};q.displayName="AdvancedDataTableHead",q.propTypes={columnHeaderIcons:c().array,columns:c().array.isRequired,hasErrorColumn:c().bool,hasFocus:c().bool,hasMenus:c().bool,hasNoRowSelection:c().bool,hasRowLevelActions:c().bool,hasSingleRowSelect:c().bool,isHidden:c().bool,isResizable:c().bool,isSortable:c().bool,mainColumnWidth:c().string,selectAll:c().bool,singleColumnWidth:c().string,sortDirection:c().oneOf(["ascending","descending","none"])},q.defaultProps={hasRowLevelActions:!0,isResizable:!0,isSortable:!0};var M=function(e){return n().createElement("tbody",null,e.children)};M.displayName="TBody",M.propTypes={children:c().node};var W=function(e){return n().createElement("tr",{"aria-expanded":e.isExpanded,"aria-level":e.level,"aria-posinset":e.positionWithinLevel,"aria-selected":e.isSelected,"aria-setsize":e.numberOfItemsAtLevel,className:m()("slds-hint-parent",{"slds-align-top":e.isTopAligned,"slds-is-selected":e.isSelected}),tabIndex:e.tabIndex},e.children)};W.displayName="TBodyTr",W.propTypes={children:c().node,isExpanded:c().bool,isSelected:c().bool,isTopAligned:c().bool,level:c().string,positionWithinLevel:c().string,numberOfItemsAtLevel:c().string,tabIndex:c().oneOf(["0","-1"])};var Y=function(e){var t=(0,a.useContext)(R).isActionableMode,l=m()({"slds-has-focus":e.hasFocus,"slds-cell-edit":e.isEditable,"slds-is-edited":e.isEdited,"slds-cell-error":e.isErrorCell,"slds-text-align_right":e.isRightAligned,"slds-cell-shrink":e.isShrunken,"slds-has-error":e.hasError,"slds-cell-wrap":e.hasWrap,"slds-cell_action-mode":t});return n().createElement("td",{"aria-readonly":e.isLocked,"aria-selected":e.isEditing,"aria-describedby":function(){if(e.isEdited)return"unsaved-cell-notification"}()||null,className:l||null,"data-label":e["data-label"],role:function(){var t=null;switch(e.type){case"advanced":case"treegrid":t="gridcell"}return t}(),style:e.style,tabIndex:e.tabIndex},e.children)};Y.displayName="Td",Y.propTypes={children:c().node,"data-label":c().string,hasError:c().bool,hasFocus:c().bool,isEditable:c().bool,isEdited:c().bool,isEditing:c().bool,isErrorCell:c().bool,isLocked:c().bool,isRightAligned:c().bool,isShrunken:c().bool,style:c().object,tabIndex:c().oneOf(["0","-1"]),type:c().oneOf(["advanced","base","treegrid"]).isRequired,hasWrap:c().bool};var $=function(e){var t=(0,a.useContext)(R).isActionableMode,l=m()({"slds-cell-edit":e.isEditable,"slds-has-focus":e.hasFocus,"slds-tree__item":"treegrid"===e.type,"slds-is-hovered":e.isItemHovered,"slds-cell-wrap":e.hasWrap,"slds-cell_action-mode":t});return n().createElement("th",{className:l||null,"data-label":e["data-label"],scope:"row",tabIndex:e.tabIndex},e.children)};$.displayName="RowTh",$.propTypes={children:c().node,"data-label":c().string,hasFocus:c().bool,isEditable:c().bool,tabIndex:c().oneOf(["0","-1"]),type:c().oneOf(["base","advanced","treegrid"]),isItemHovered:c().bool,hasWrap:c().bool};var Q=function(e){return n().createElement(n().Fragment,null,e.hasSingleRowSelect?n().createElement(k.sx,{checked:e.checked,groupId:"column-group-header",hideLabel:!0,id:"radio-0".concat(e.index),label:"Select item ".concat(e.index),labelId:"radio-button-label-0".concat(e.index),tabIndex:e.inputTabIndex,isDataTable:!0}):n().createElement(T.Sc,{checked:e.checked,groupId:"column-group-header",hideLabel:!0,id:"checkbox-0".concat(e.index),label:"Select item ".concat(e.index),labelId:"check-button-label-0".concat(e.index),tabIndex:e.inputTabIndex,isDataTable:!0}))};Q.displayName="SelectRowCell",Q.propTypes={checked:c().bool,hasSingleRowSelect:c().bool,index:c().number.isRequired,inputTabIndex:c().oneOf(["0","-1"])};var X=function(e){var t=e.rowName,l=(0,a.useContext)(R).isActionableMode;return n().createElement(C.A,{assistiveText:"More actions for ".concat(t),"aria-haspopup":"true",className:"slds-button_icon-border-filled slds-button_icon-x-small",iconClassName:"slds-button__icon_hint slds-button__icon_small",symbol:"down",tabIndex:l?"0":"-1",title:"More actions for ".concat(t)})};X.displayName="RowActionsCell",X.propTypes={rowName:c().string.isRequired};var U=function(e){var t=(0,a.useContext)(R).isActionableMode;return n().createElement(n().Fragment,null,n().createElement(C.A,{"aria-hidden":e.hasError?null:"true",assistiveText:"Item ".concat(e.index," has errors"),className:m()("slds-button_icon-error slds-m-horizontal_xxx-small",{"slds-hidden":!e.hasError}),id:"error-0"+e.index,symbol:"error",tabIndex:t?"0":"-1",title:"Item ".concat(e.index," has errors")}),n().createElement("span",{className:"slds-row-number slds-text-body_small slds-text-color_weak"}))};U.displayName="ErrorCell",U.propTypes={hasError:c().bool,index:c().number.isRequired};var J=function(e){var t=e.hasWrap,l=e.cellText,s=e.cellLink,r=(0,a.useContext)(R).isActionableMode;return n().createElement("div",{className:m()(t?"slds-line-clamp":"slds-truncate"),title:l},s?n().createElement("a",{href:"#",tabIndex:r?"0":"-1",onClick:function(e){e.preventDefault()}},l):l)};J.displayName="ReadOnlyCell",J.propTypes={cellLink:c().bool,cellText:c().string.isRequired,hasWrap:c().bool};var V=function(e){var t=(0,a.useContext)(R).isActionableMode;return n().createElement(n().Fragment,null,n().createElement("span",{className:"slds-grid slds-grid_align-spread"},e.cellLink?n().createElement("a",{className:"slds-truncate",href:"#",id:"link-0".concat(e.index),tabIndex:t?"0":"-1",title:e.cellText,onClick:function(e){return e.preventDefault()}},e.cellText):n().createElement("span",{className:"slds-truncate",title:e.cellText},e.cellText),n().createElement(C.A,{assistiveText:e.buttonText,className:"slds-cell-edit__button slds-m-left_x-small",disabled:e.isLocked,iconClassName:m()("slds-button__icon_hint",{"slds-button__icon_edit":!e.isLocked,"slds-button__icon_lock slds-button__icon_small":e.isLocked}),symbol:e.isLocked?"lock":"edit",tabIndex:t?"0":"-1",title:e.buttonText})),e.showEdit&&n().createElement(K,{isRequired:e.isRequired,hasError:e.hasError}),e.isEdited&&n().createElement("span",{id:"unsaved-cell-notification",class:"slds-hide"},"Unsaved"))};V.displayName="EditableCell",V.propTypes={buttonText:c().string.isRequired,cellLink:c().bool,cellText:c().string.isRequired,hasError:(0,o.VY)("showEdit",c().bool),index:c().number,isLocked:c().bool,isRequired:(0,o.VY)("showEdit",c().bool),showEdit:c().bool};var K=function(e){return n().createElement(w.AM,{className:"slds-popover slds-popover_edit",style:{position:"absolute",top:"0",left:"0.0625rem"}},n().createElement("div",{className:m()("slds-form-element slds-grid slds-wrap",{"slds-has-error":e.hasError})},n().createElement("label",{className:"slds-form-element__label slds-form-element__label_edit slds-no-flex",htmlFor:"company-01"},e.isRequired?n().createElement("abbr",{className:"slds-required",title:"required","aria-hidden":"true"},"*"):null,n().createElement("span",{className:"slds-assistive-text"},"Company")),n().createElement("div",{className:"slds-form-element__control slds-grow"},n().createElement("input",{"aria-describedby":e.hasError?"error-message-01":null,className:"slds-input",defaultValue:"Acme Enterprises",id:"company-01",required:e.isRequired,type:"text"})),e.hasError?n().createElement("div",{id:"error-message-01",className:"slds-form-element__help"},"This field is required"):null))};K.displayName="EditPopover",K.propTypes={hasError:c().bool,isRequired:c().bool};var G=l(3106);function Z(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var l=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=l){var a,n,s,r,o=[],i=!0,c=!1;try{if(s=(l=l.call(e)).next,0===t){if(Object(l)!==l)return;i=!1}else for(;!(i=(a=s.call(l)).done)&&(o.push(a.value),o.length!==t);i=!0);}catch(e){c=!0,n=e}finally{try{if(!i&&null!=l.return&&(r=l.return(),Object(r)!==r))return}finally{if(c)throw n}}return o}}(e,t)||function(e,t){if(e){if("string"==typeof e)return ee(e,t);var l={}.toString.call(e).slice(8,-1);return"Object"===l&&e.constructor&&(l=e.constructor.name),"Map"===l||"Set"===l?Array.from(e):"Arguments"===l||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(l)?ee(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function ee(e,t){(null==t||t>e.length)&&(t=e.length);for(var l=0,a=Array(t);l<t;l++)a[l]=e[l];return a}var te=["Name","Product Code","List Price","Product Family"],le=["Product Name"],ae=[{name:"Analytics",productCode:"ANTLY",listPrice:"5000.00",productFamily:"Analytics Product"},{name:"Analytics",productCode:"ANTLY",listPrice:"5000.00",productFamily:"Analytics Product"},{name:"Analytics",productCode:"ANTLY",listPrice:"5000.00",productFamily:"Analytics Product"},{name:"Analytics",productCode:"ANTLY",listPrice:"5000.00",productFamily:"Analytics Product"},{name:"Analytics",productCode:"ANTLY",listPrice:"5000.00",productFamily:"Analytics Product"},{name:"Analytics",productCode:"ANTLY",listPrice:"5000.00",productFamily:"Analytics Product"},{name:"Analytics",productCode:"ANTLY",listPrice:"5000.00",productFamily:"Analytics Product"},{name:"Analytics",productCode:"ANTLY",listPrice:"5000.00",productFamily:"Analytics Product"}],ne=function(e){var t=e.selectedFilters,l=e.itemsSelected,s=Z((0,a.useState)(o.Ay.uniqueId("example-unique-id-")),1)[0],r=Z((0,a.useState)(o.Ay.uniqueId("example-unique-id-")),1)[0];return n().createElement("div",{className:"slds-p-vertical_x-small slds-p-horizontal_large slds-shrink-none slds-theme_shade"},n().createElement(_.Ay,{id:s,"aria-controls":r,autocomplete:!0,label:"Search",hideLabel:!0,placeholder:"Search Salesforce",inputIconPosition:"right",rightInputIcon:n().createElement(b.eX,{symbol:"search",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:n().createElement(N.Ay,{id:r,snapshot:S.u1,type:"plain",count:8,hideIcons:!0}),resultsType:"listbox",hasInteractions:!0}),t||null,n().createElement("div",{className:"slds-text-title slds-m-top_x-small","aria-live":"polite"},l||"0"," Item(s) Selected"))};ne.propTypes={selectedFilters:c().node,itemsSelected:c().string};var se=function(e){return n().createElement("div",{className:"slds-scrollable slds-grow"},n().createElement("div",{className:"slds-scrollable_none"},n().createElement(O,{hasNoRowHover:!0,isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",type:"advanced",ariaLabel:"Example product list"},n().createElement(F,null,n().createElement(L,null,n().createElement(H,{style:{width:"3.75rem"}}),te.map(function(e,t){return n().createElement(H,{"aria-label":e,isSortable:!0,isResizable:!0,key:t},n().createElement(z,{columnName:e}))}))),n().createElement(M,null,e.children))))},re=function(e){return n().createElement("div",{className:"slds-scrollable slds-grow"},n().createElement("div",{className:"slds-scrollable_none"},n().createElement(O,{hasHiddenHeader:!0,hasNoRowHover:!0,isBordered:!0,selectionType:"multiple",type:"advanced",ariaLabel:"Example single column product list"},n().createElement(F,{isHidden:e.hasHiddenHeader},n().createElement(L,null,n().createElement(H,{style:{width:"3.75rem"}}),e.hasHiddenHeader?n().createElement(H,{"aria-label":le[0]},n().createElement(j,{columnName:le[0]})):n().createElement(H,{"aria-label":le[0]},n().createElement(z,{columnName:le[0]})))),n().createElement(M,null,e.children))))};re.propTypes={hasHiddenHeader:c().bool,children:c().node};var oe=function(e){var t="Select item "+e.index;return n().createElement(W,{isSelected:e.checked},n().createElement(Y,{isRightAligned:!0,tabIndex:1===e.index?"0":null,type:"advanced"},n().createElement(g,{label:t,isChecked:e.checked,isDisabled:e.disabled,tabIndex:-1})),n().createElement($,null,n().createElement(J,{cellText:e.name})),n().createElement(Y,{type:"advanced"},n().createElement(J,{cellText:e.productCode})),n().createElement(Y,{type:"advanced"},n().createElement(J,{cellText:e.listPrice})),n().createElement(Y,{type:"advanced"},n().createElement(J,{cellText:e.productFamily})))},ie=function(e){var t="Select item "+e.index;return n().createElement(W,{isSelected:e.checked},n().createElement(Y,{isRightAligned:!0,tabIndex:1===e.index?"0":"-1",type:"advanced",style:{width:"3.75rem"}},n().createElement(g,{label:t,isChecked:e.checked,isDisabled:e.disabled,tabIndex:-1})),n().createElement(Y,{type:"advanced"},n().createElement(J,{cellText:e.name})))};ie.propTypes={className:c().string,index:c().number,checked:c().bool,disabled:c().bool,name:c().string};var ce=function(e){return n().createElement(G.Bm,{variant:"container-bare"},n().createElement(G.IK,null,n().createElement(G.j9,null,n().createElement(G.$P,{label:"Analytics",tabIndex:"0"}))))},de=function(e){return n().createElement(G.Bm,{variant:"container-bare"},n().createElement(G.IK,null,n().createElement(G.j9,null,n().createElement(G.$P,{label:"Option A",tabIndex:"0"})),n().createElement(G.j9,null,n().createElement(G.$P,{label:"Option B"}))))},ue=[{id:"default",label:"Default",element:n().createElement("div",{className:"demo-only demo-only_viewport",style:{height:"640px"}},n().createElement(d.zs,null,n().createElement(d.aF,{className:"slds-modal_large slds-list-builder","aria-labelledby":"id-of-modalheader-h1"},n().createElement(d.rQ,null,n().createElement("h1",{id:"id-of-modalheader-h1",className:"slds-text-heading_medium"},"Add products"),n().createElement("p",{className:"slds-m-top_x-small"},"Pricebook: Salesforce Products")),n().createElement(d.$m,{className:"slds-grid slds-grow"},n().createElement("div",{className:"slds-grid slds-grid_vertical"},n().createElement(ne,null),n().createElement(se,null,ae.map(function(e,t){return n().createElement(oe,{checked:!1,key:t,index:t+1,name:e.name,productCode:e.productCode,listPrice:e.listPrice,productFamily:e.productFamily})})))),n().createElement(d.jl,null,n().createElement("button",{className:"slds-button slds-button_neutral","aria-label":"Cancel and close"},"Cancel"),n().createElement("button",{className:"slds-button slds-button_brand"},"Next")))))}],me=[{id:"items-selected",label:"Items Selected",element:n().createElement("div",{className:"demo-only demo-only_viewport",style:{height:"640px"}},n().createElement(d.zs,null,n().createElement(d.aF,{className:"slds-modal_large","aria-labelledby":"id-of-modalheader-h1"},n().createElement(d.rQ,null,n().createElement("h1",{id:"id-of-modalheader-h1",className:"slds-text-heading_medium"},"Add products"),n().createElement("p",{className:"slds-m-top_x-small"},"Pricebook: Salesforce Products")),n().createElement(d.$m,{className:"slds-grid slds-nowrap"},n().createElement("div",{className:"slds-col slds-grid slds-grid_vertical slds-nowrap"},n().createElement(ne,{selectedFilters:n().createElement(ce,null),itemsSelected:"1"}),n().createElement(se,null,ae.map(function(e,t){return n().createElement(oe,{key:t,index:t+1,checked:0===t,name:e.name,productCode:e.productCode,listPrice:e.listPrice,productFamily:e.productFamily})})))),n().createElement(d.jl,null,n().createElement("button",{className:"slds-button slds-button_neutral","aria-label":"Cancel and close"},"Cancel"),n().createElement("button",{className:"slds-button slds-button_brand"},"Next")))))},{id:"items-disabled",label:"Items Disabled",element:n().createElement("div",{className:"demo-only demo-only_viewport",style:{height:"640px"}},n().createElement(d.zs,null,n().createElement(d.aF,{className:"slds-modal_large","aria-labelledby":"id-of-modalheader-h1"},n().createElement(d.rQ,null,n().createElement("h1",{id:"id-of-modalheader-h1",className:"slds-text-heading_medium"},"Add products"),n().createElement("p",{className:"slds-m-top_x-small"},"Pricebook: Salesforce Products")),n().createElement(d.$m,{className:"slds-grid slds-nowrap"},n().createElement("div",{className:"slds-col slds-grid slds-grid_vertical slds-nowrap"},n().createElement(ne,{itemsSelected:"0"}),n().createElement(se,null,ae.map(function(e,t){return n().createElement(oe,{checked:!1,key:t,index:t+1,disabled:t%2==0||null,name:e.name,productCode:e.productCode,listPrice:e.listPrice,productFamily:e.productFamily})})))),n().createElement(d.jl,null,n().createElement("button",{className:"slds-button slds-button_neutral","aria-label":"Cancel and close"},"Cancel"),n().createElement("button",{className:"slds-button slds-button_brand"},"Next")))))},{id:"items-default-selected",label:"Items Default Selected",element:n().createElement("div",{className:"demo-only demo-only_viewport",style:{height:"640px"}},n().createElement(d.zs,null,n().createElement(d.aF,{className:"slds-modal_large","aria-labelledby":"id-of-modalheader-h1"},n().createElement(d.rQ,null,n().createElement("h1",{id:"id-of-modalheader-h1",className:"slds-text-heading_medium"},"Add products"),n().createElement("p",{className:"slds-m-top_x-small"},"Pricebook: Salesforce Products")),n().createElement(d.$m,{className:"slds-grid slds-nowrap"},n().createElement("div",{className:"slds-col slds-grid slds-grid_vertical slds-nowrap"},n().createElement(ne,{itemsSelected:"0"}),n().createElement(se,null,ae.map(function(e,t){return n().createElement(oe,{key:t,index:t+1,checked:t%2==1,disabled:t%2==1||null,name:e.name,productCode:e.productCode,listPrice:e.listPrice,productFamily:e.productFamily})})))),n().createElement(d.jl,null,n().createElement("button",{className:"slds-button slds-button_neutral","aria-label":"Cancel and close"},"Cancel"),n().createElement("button",{className:"slds-button slds-button_brand"},"Next")))))}],be=[{id:"two-column-with-hidden-header",label:"Two Column with Hidden Header",element:n().createElement("div",{className:"demo-only demo-only_viewport",style:{height:"640px"}},n().createElement(d.zs,null,n().createElement(d.aF,{className:"slds-modal_large","aria-labelledby":"id-of-modalheader-h1"},n().createElement(d.rQ,null,n().createElement("h1",{id:"id-of-modalheader-h1",className:"slds-text-heading_medium"},"Add products"),n().createElement("p",{className:"slds-m-top_x-small"},"Pricebook: Salesforce Products")),n().createElement(d.$m,{className:"slds-grid slds-nowrap"},n().createElement("div",{className:"slds-col slds-grid slds-grid_vertical slds-nowrap"},n().createElement(ne,{itemsSelected:"0"}),n().createElement(re,{hasHiddenHeader:!0},ae.map(function(e,t){return n().createElement(ie,{checked:!1,key:t,index:t+1,name:e.name})})))),n().createElement(d.jl,null,n().createElement("button",{className:"slds-button slds-button_neutral","aria-label":"Cancel and close"},"Cancel"),n().createElement("button",{className:"slds-button slds-button_brand"},"Next")))))},{id:"filtered",label:"Filtered Results",element:n().createElement("div",{className:"demo-only demo-only_viewport",style:{height:"640px"}},n().createElement(d.zs,null,n().createElement(d.aF,{className:"slds-modal_large","aria-labelledby":"id-of-modalheader-h1"},n().createElement(d.rQ,null,n().createElement("h1",{id:"id-of-modalheader-h1",className:"slds-text-heading_medium"},"Add products"),n().createElement("p",{className:"slds-m-top_x-small"},"Pricebook: Salesforce Products")),n().createElement(d.$m,{className:"slds-grid slds-grow"},n().createElement("div",{className:"slds-grid slds-grid_vertical"},n().createElement(ne,{selectedFilters:n().createElement(de,null),itemsSelected:"2"}),n().createElement(se,null,n().createElement(oe,{checked:!1,index:1,name:ae[0].name,productCode:ae[0].productCode,listPrice:ae[0].listPrice,productFamily:ae[0].productFamily})))),n().createElement(d.jl,null,n().createElement("button",{className:"slds-button slds-button_neutral","aria-label":"Cancel and close"},"Cancel"),n().createElement("button",{className:"slds-button slds-button_brand"},"Next")))))}],pe=s.XB.h2,he=s.XB.h3,fe=s.XB.p,ye=function(){return(0,a.createElement)(s.Ay,{},(0,a.createElement)("div",{className:"doc lead"},"The List Builder is a quick, visual and efficient ‘shopping cart’ approach to adding multiple items to a parent object."),(0,a.createElement)(r.A,{exampleOnly:!0},(0,o.NO)(ue)),pe({id:"About-List-Builder"},"About List Builder"),fe({},"The List builder relies heavily on utility classes to piece together the layout so please pay close attention to the markup and classes."),pe({id:"Base"},"Base"),(0,a.createElement)(r.A,null,(0,o.NO)(ue)),pe({id:"States"},"States"),he({id:"Items-Selected"},"Items Selected"),(0,a.createElement)(r.A,null,(0,o.NO)(me,"items-selected")),he({id:"Items-Disabled"},"Items Disabled"),(0,a.createElement)(r.A,null,(0,o.NO)(me,"items-disabled")),he({id:"Items-Default-Selected"},"Items Default Selected"),(0,a.createElement)(r.A,null,(0,o.NO)(me,"items-default-selected")),pe({id:"Examples"},"Examples"),he({id:"Two-Column-with-Hidden-Header"},"Two Column with Hidden Header"),(0,a.createElement)(r.A,null,(0,o.NO)(be,"filtered")),he({id:"Filtered-Results"},"Filtered Results"),(0,a.createElement)(r.A,null,(0,o.NO)(be,"two-column-with-hidden-header")))},Ee=function(){return(0,s.Qr)(ye())}},5206:function(e){e.exports=ReactDOM}},n={};function s(e){var t=n[e];if(void 0!==t)return t.exports;var l=n[e]={id:e,exports:{}};return a[e](l,l.exports,s),l.exports}s.m=a,s.amdO={},e=[],s.O=function(t,l,a,n){if(!l){var r=1/0;for(d=0;d<e.length;d++){l=e[d][0],a=e[d][1],n=e[d][2];for(var o=!0,i=0;i<l.length;i++)(!1&n||r>=n)&&Object.keys(s.O).every(function(e){return s.O[e](l[i])})?l.splice(i--,1):(o=!1,n<r&&(r=n));if(o){e.splice(d--,1);var c=a();void 0!==c&&(t=c)}}return t}n=n||0;for(var d=e.length;d>0&&e[d-1][2]>n;d--)e[d]=e[d-1];e[d]=[l,a,n]},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,{a:t}),t},l=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},s.t=function(e,a){if(1&a&&(e=this(e)),8&a)return e;if("object"==typeof e&&e){if(4&a&&e.__esModule)return e;if(16&a&&"function"==typeof e.then)return e}var n=Object.create(null);s.r(n);var r={};t=t||[null,l({}),l([]),l(l)];for(var o=2&a&&e;("object"==typeof o||"function"==typeof o)&&!~t.indexOf(o);o=l(o))Object.getOwnPropertyNames(o).forEach(function(t){r[t]=function(){return e[t]}});return r.default=function(){return e},s.d(n,r),n},s.d=function(e,t){for(var l in t)s.o(t,l)&&!s.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,get:t[l]})},s.e=function(){return Promise.resolve()},s.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.j=7077,function(){var e={7077:0};s.O.j=function(t){return 0===e[t]};var t=function(t,l){var a,n,r=l[0],o=l[1],i=l[2],c=0;if(r.some(function(t){return 0!==e[t]})){for(a in o)s.o(o,a)&&(s.m[a]=o[a]);if(i)var d=i(s)}for(t&&t(l);c<r.length;c++)n=r[c],s.o(e,n)&&e[n]&&e[n][0](),e[n]=0;return s.O(d)},l=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs||[];l.forEach(t.bind(null,0)),l.push=t.bind(null,l.push.bind(l))}(),s.nc=void 0;var r=s.O(void 0,[3540],function(){return s(3804)});r=s.O(r),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/list-builder/docs.mdx.js"]=r}();
+var SLDS;!function(){"use strict";var e,t,l,a={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},3804:function(e,t,l){l.r(t),l.d(t,{getContents:function(){return Ee},getElement:function(){return ye}});var a=l(1594),n=l.n(a),s=l(5671),r=l(6547),o=l(806),i=(l(5619),l(4187)),c=l.n(i),d=l(1766),u=l(942),m=l.n(u),b=l(538);function p(e){return p="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},p(e)}function h(e,t){for(var l=0;l<t.length;l++){var a=t[l];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,f(a.key),a)}}function f(e){var t=function(e){if("object"!=p(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var l=t.call(e,"string");if("object"!=p(l))return l;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==p(t)?t:t+""}function y(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(y=function(){return!!e})()}function E(e){return E=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},E(e)}function v(e,t){return v=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},v(e,t)}var x=function(e){var t=e.isFocused,l=e.isDisabled,a=e.isChecked,s=e.tabIndex,r=e.iconAssistiveText,i=e.iconSize,c=e.iconSymbol,d=e.iconCurrentColor,u=e.onChange,p=e.onFocus,h=e.onBlur,f=o.Ay.uniqueId("example-unique-id-"),y={"slds-checkbox-button_is-focused":t,"slds-checkbox-button_is-checked":a,"slds-checkbox-button_is-disabled":l};return n().createElement("label",{className:m()("slds-checkbox-button",y),htmlFor:f},n().createElement("input",{className:"slds-assistive-text",type:"checkbox",id:f,value:f,disabled:l,defaultChecked:a,tabIndex:s,onChange:u,onFocus:p,onBlur:h}),n().createElement(b.eX,{symbol:c,size:i,useCurrentColor:d,assistiveText:r}))};x.defaultProps={iconAssistiveText:"Add product",iconSize:"x-small",iconSymbol:"add",iconCurrentColor:!0},x.propTypes={isDisabled:c().bool,isChecked:c().bool,tabIndex:c().number,iconAssistiveText:c().string,iconSize:c().string,iconSymbol:c().string,iconCurrentColor:c().bool};var g=function(e){function t(e){var l;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),(l=function(e,t,l){return t=E(t),function(e,t){if(t&&("object"==p(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}(e,y()?Reflect.construct(t,l||[],E(e).constructor):t.apply(e,l))}(this,t,[e])).state={checked:!!l.props.isChecked,focused:!1},l.handleCheckboxChange=l.handleCheckboxChange.bind(l),l.handleFocus=l.handleFocus.bind(l),l.handleBlur=l.handleBlur.bind(l),l}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&v(e,t)}(t,e),l=t,(a=[{key:"handleCheckboxChange",value:function(){this.setState({checked:!this.state.checked})}},{key:"handleFocus",value:function(){this.state.focused||this.setState({focused:!0})}},{key:"handleBlur",value:function(){this.state.focused&&this.setState({focused:!1})}},{key:"render",value:function(){var e=this.props,t=e.iconChecked,l=e.iconUnchecked,a=e.isDisabled,s=e.tabIndex;return n().createElement(x,{onChange:this.handleCheckboxChange,iconSymbol:this.state.checked?t:l,isChecked:this.state.checked,isDisabled:a,isFocused:this.state.focused,onFocus:this.handleFocus,onBlur:this.handleBlur,tabIndex:s})}}])&&h(l.prototype,a),Object.defineProperty(l,"prototype",{writable:!1}),l;var l,a}(a.Component);g.defaultProps={iconChecked:"check",iconUnchecked:"add"},g.propTypes={iconChecked:c().string,iconUnchecked:c().string};var _=l(5159),N=l(6185),S=l(3964),C=l(6955),w=l(5006),T=l(3589),k=l(885);function A(e){return A="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},A(e)}function I(){return I=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var l=arguments[t];for(var a in l)({}).hasOwnProperty.call(l,a)&&(e[a]=l[a])}return e},I.apply(null,arguments)}function P(e,t,l){return(t=function(e){var t=function(e){if("object"!=A(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var l=t.call(e,"string");if("object"!=A(l))return l;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==A(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[t]=l,e}var R=n().createContext({isActionableMode:!1});c().string,c().node;var O=function(e){var t=m()("slds-table",{"slds-table_cell-buffer":e.hasCellBuffer,"slds-table_header-hidden":e.hasHiddenHeader,"slds-no-row-hover":e.hasNoRowHover,"slds-no-cell-focus":e.hasNoCellFocus,"slds-table_bordered":e.isBordered,"slds-table_col-bordered":e.isColBordered,"slds-table_edit":e.isEditable,"slds-table_fixed-layout":e.isFixedLayout,"slds-max-medium-table_stacked-horizontal":e.isResponsive,"slds-max-medium-table_stacked":e.isResponsiveStacked,"slds-table_resizable-cols":e.isResizable,"slds-table_striped":e.isStriped,"slds-tree slds-table_tree":"treegrid"===e.type,"slds-table_header-fixed":e.hasFixedHeader});return n().createElement("table",I({"aria-multiselectable":"multiple"===e.selectionType?"true":null,className:t,role:function(){var t=null;switch(e.type){case"advanced":t="grid";break;case"treegrid":t="treegrid"}return t}(),style:e.style},e.ariaLabelledBy&&P({},"aria-labelledby",e.ariaLabelledBy),e.ariaLabel&&P({},"aria-label",e.ariaLabel)),e.children)};O.displayName="Table",O.propTypes={ariaLabel:c().string,ariaLabelledBy:c().string,children:c().node,hasCellBuffer:c().bool,hasHiddenHeader:c().bool,hasNoCellFocus:c().bool,hasNoRowHover:c().bool,isBordered:c().bool,isColBordered:c().bool,isEditable:c().bool,isFixedLayout:c().bool,isResizable:c().bool,isResponsive:c().bool,isResponsiveStacked:c().bool,isStriped:c().bool,selectionType:c().oneOf(["multiple","single"]),style:c().object,type:c().oneOf(["advanced","base","treegrid"]).isRequired,hasFixedHeader:c().bool};var F=function(e){return n().createElement("thead",{className:e.isHidden?"slds-assistive-text":null},e.children)};F.displayName="THead",F.propTypes={children:c().node,isHidden:c().bool};var L=function(e){return n().createElement("tr",{className:"slds-line-height_reset"},e.children)};L.displayName="THeadTr",L.propTypes={children:c().node};var H=function(e){var t,l=(0,a.useContext)(R).isActionableMode,s=m()({"slds-has-button-menu":e.hasMenu,"slds-has-focus":e.hasFocus,"slds-is-resizable":e.isResizable,"slds-text-align_right":e.isRightAligned,"slds-is-sortable":e.isSortable,"slds-is-sorted":"ascending"===e.sortDirection||"descending"===e.sortDirection,"slds-is-sorted_asc":"ascending"===e.sortDirection,"slds-is-sorted_desc":"descending"===e.sortDirection,"slds-cell-wrap":e.hasWrap,"slds-cell_action-mode":l});return n().createElement("th",{"aria-sort":(t=null,e.isSortable&&(t=e.sortDirection||"none"),t),className:s,scope:!e.isDataTable&&"col",role:e.isDataTable&&"cell",style:e.style},e.isDataTable,e.children)};H.displayName="ColumnTh",H.propTypes={"aria-label":c().string,children:c().node,hasFocus:c().bool,hasMenu:c().bool,isResizable:c().bool,isRightAligned:c().bool,isSortable:c().bool,sortDirection:c().oneOf(["ascending","descending","none"]),style:c().object,hasWrap:c().bool,isDataTable:c().bool};var j=function(e){return n().createElement("div",{className:m()("slds-truncate",{"slds-assistive-text":e.isAssistiveText,"slds-cell-fixed":e.isFixedCell}),id:e.id,title:e.columnName},e.columnName)};j.displayName="ColumnHeader",j.propTypes={columnName:c().string.isRequired,id:c().string,isAssistiveText:c().bool,isFixedCell:c().bool},j.defaultProps={columnName:"Column Name",isDataTable:c().bool};var D=function(e){var t=o.Ay.uniqueId("cell-resize-handle-");return n().createElement("div",{className:"slds-resizable"},n().createElement("input",{"aria-label":e.label,className:"slds-resizable__input slds-assistive-text",id:t,max:"1000",min:"20",tabIndex:e.tabIndex,type:"range"}),n().createElement("span",{className:"slds-resizable__handle"},n().createElement("span",{className:"slds-resizable__divider"})))};D.displayName="ResizeControl",D.propTypes={label:c().string.isRequired,tabIndex:c().oneOf(["0","-1"])};var z=function(e){var t=(0,a.useContext)(R).isActionableMode,l=t?"0":"-1",s=function(){return n().createElement("div",{className:"slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate"},e.columnHeaderIcons?function(){var t=e.columnHeaderIcons.filter(function(t){return t.column===e.columnName.toLowerCase()});if(t.length)return t[0].icon}():null,n().createElement("span",{className:"slds-truncate",title:e.columnName},e.columnName),e.isSortable&&n().createElement(b.eX,{assistiveText:!1,className:"slds-icon-text-default slds-is-sortable__icon ",symbol:"arrowdown",title:!1}))};return n().createElement(n().Fragment,null,e.isSortable?n().createElement("a",{className:"slds-th__action slds-text-link_reset",href:"#",role:"button",tabIndex:l,onClick:function(e){return e.preventDefault()}},n().createElement("span",{className:"slds-assistive-text"},"Sort by: "),s()):n().createElement("div",{className:"slds-th__action"},s()),e.sortDirection&&n().createElement("span",{className:"slds-assistive-text","aria-live":"polite","aria-atomic":"true"},"Sorted ",e.sortDirection),e.hasMenu&&n().createElement(C.A,{"aria-haspopup":"true",assistiveText:"Show ".concat(e.columnName," column actions"),className:"slds-th__action-button slds-button_icon-x-small",iconClassName:"slds-button__icon_hint slds-button__icon_small",symbol:"chevrondown",tabIndex:t?"0":"-1",title:"Show ".concat(e.columnName," column actions")}),e.isResizable&&n().createElement(D,{label:e.columnName+" column width"||0,tabIndex:l}))};z.displayName="InteractiveColumnHeader",z.propTypes={columnName:c().string.isRequired,columnHeaderIcons:c().array,hasMenu:c().bool,isResizable:c().bool,isSortable:c().bool,sortDirection:c().oneOf(["ascending","descending"])},z.defaultProps={isResizable:!0,isSortable:!0};var B=function(e){var t=(0,a.useContext)(R).isActionableMode;return n().createElement(n().Fragment,null,n().createElement("div",{className:"slds-th__action slds-th__action_form"},n().createElement(T.Sc,{tabIndex:t?"0":"-1",labelId:"check-select-all-label",label:"Select All",hideLabel:!0,checked:!!e.checked||null,groupId:"column-group-header",isDataTable:!0})))};B.displayName="SelectAllColumnHeader",B.propTypes={checked:c().bool};var q=function(e){var t=e.hasErrorColumn?"2rem":"3.25rem",l=e.mainColumnWidth||null;return n().createElement(F,{isHidden:e.isHidden},n().createElement(L,null,e.hasErrorColumn?n().createElement(H,{style:{width:"3.75rem"}},n().createElement(j,{columnName:"Errors",isAssistiveText:!0})):null,!e.hasNoRowSelection&&n().createElement(H,{isDataTable:!e.hasSingleRowSelect||!e.isHidden,isRightAligned:!e.hasErrorColumn||null,style:{width:t}},e.hasSingleRowSelect||e.isHidden?n().createElement(j,{columnName:"Choose a row to select",id:"column-group-header",isAssistiveText:!0}):n().createElement(B,{checked:e.selectAll})),e.columns.map(function(t,a){return n().createElement(H,{key:a,"aria-label":t,hasFocus:0===a?e.hasFocus:null,hasMenu:e.hasMenus,isResizable:e.isResizable&&!e.isHidden,isSortable:e.isSortable&&!e.isHidden,sortDirection:0===a?e.sortDirection:null,style:{width:0===a&&e.singleColumnWidth?e.singleColumnWidth:l}},n().createElement(z,{columnName:t,columnHeaderIcons:e.columnHeaderIcons,hasMenu:e.hasMenus,isResizable:e.isResizable&&!e.isHidden,isSortable:e.isSortable&&!e.isHidden,sortDirection:0===a?e.sortDirection:null}))}),e.hasRowLevelActions&&n().createElement(H,{style:{width:"3.25rem"}},n().createElement(j,{columnName:"Actions",isAssistiveText:!0}))))};q.displayName="AdvancedDataTableHead",q.propTypes={columnHeaderIcons:c().array,columns:c().array.isRequired,hasErrorColumn:c().bool,hasFocus:c().bool,hasMenus:c().bool,hasNoRowSelection:c().bool,hasRowLevelActions:c().bool,hasSingleRowSelect:c().bool,isHidden:c().bool,isResizable:c().bool,isSortable:c().bool,mainColumnWidth:c().string,selectAll:c().bool,singleColumnWidth:c().string,sortDirection:c().oneOf(["ascending","descending","none"])},q.defaultProps={hasRowLevelActions:!0,isResizable:!0,isSortable:!0};var M=function(e){return n().createElement("tbody",null,e.children)};M.displayName="TBody",M.propTypes={children:c().node};var W=function(e){return n().createElement("tr",{"aria-expanded":e.isExpanded,"aria-level":e.level,"aria-posinset":e.positionWithinLevel,"aria-selected":e.isSelected,"aria-setsize":e.numberOfItemsAtLevel,className:m()("slds-hint-parent",{"slds-align-top":e.isTopAligned,"slds-is-selected":e.isSelected}),tabIndex:e.tabIndex},e.children)};W.displayName="TBodyTr",W.propTypes={children:c().node,isExpanded:c().bool,isSelected:c().bool,isTopAligned:c().bool,level:c().string,positionWithinLevel:c().string,numberOfItemsAtLevel:c().string,tabIndex:c().oneOf(["0","-1"])};var Y=function(e){var t=(0,a.useContext)(R).isActionableMode,l=m()({"slds-has-focus":e.hasFocus,"slds-cell-edit":e.isEditable,"slds-is-edited":e.isEdited,"slds-cell-error":e.isErrorCell,"slds-text-align_right":e.isRightAligned,"slds-cell-shrink":e.isShrunken,"slds-has-error":e.hasError,"slds-cell-wrap":e.hasWrap,"slds-cell_action-mode":t});return n().createElement("td",{"aria-readonly":e.isLocked,"aria-selected":e.isEditing,"aria-describedby":function(){if(e.isEdited)return"unsaved-cell-notification"}()||null,className:l||null,"data-label":e["data-label"],role:function(){var t=null;switch(e.type){case"advanced":case"treegrid":t="gridcell"}return t}(),style:e.style,tabIndex:e.tabIndex},e.children)};Y.displayName="Td",Y.propTypes={children:c().node,"data-label":c().string,hasError:c().bool,hasFocus:c().bool,isEditable:c().bool,isEdited:c().bool,isEditing:c().bool,isErrorCell:c().bool,isLocked:c().bool,isRightAligned:c().bool,isShrunken:c().bool,style:c().object,tabIndex:c().oneOf(["0","-1"]),type:c().oneOf(["advanced","base","treegrid"]).isRequired,hasWrap:c().bool};var $=function(e){var t=(0,a.useContext)(R).isActionableMode,l=m()({"slds-cell-edit":e.isEditable,"slds-has-focus":e.hasFocus,"slds-tree__item":"treegrid"===e.type,"slds-is-hovered":e.isItemHovered,"slds-cell-wrap":e.hasWrap,"slds-cell_action-mode":t});return n().createElement("th",{className:l||null,"data-label":e["data-label"],scope:"row",tabIndex:e.tabIndex},e.children)};$.displayName="RowTh",$.propTypes={children:c().node,"data-label":c().string,hasFocus:c().bool,isEditable:c().bool,tabIndex:c().oneOf(["0","-1"]),type:c().oneOf(["base","advanced","treegrid"]),isItemHovered:c().bool,hasWrap:c().bool};var Q=function(e){return n().createElement(n().Fragment,null,e.hasSingleRowSelect?n().createElement(k.sx,{checked:e.checked,groupId:"column-group-header",hideLabel:!0,id:"radio-0".concat(e.index),label:"Select item ".concat(e.index),labelId:"radio-button-label-0".concat(e.index),tabIndex:e.inputTabIndex,isDataTable:!0}):n().createElement(T.Sc,{checked:e.checked,groupId:"column-group-header",hideLabel:!0,id:"checkbox-0".concat(e.index),label:"Select item ".concat(e.index),labelId:"check-button-label-0".concat(e.index),tabIndex:e.inputTabIndex,isDataTable:!0}))};Q.displayName="SelectRowCell",Q.propTypes={checked:c().bool,hasSingleRowSelect:c().bool,index:c().number.isRequired,inputTabIndex:c().oneOf(["0","-1"])};var X=function(e){var t=e.rowName,l=(0,a.useContext)(R).isActionableMode;return n().createElement(C.A,{assistiveText:"More actions for ".concat(t),"aria-haspopup":"true",className:"slds-button_icon-border-filled slds-button_icon-x-small",iconClassName:"slds-button__icon_hint slds-button__icon_small",symbol:"down",tabIndex:l?"0":"-1",title:"More actions for ".concat(t)})};X.displayName="RowActionsCell",X.propTypes={rowName:c().string.isRequired};var U=function(e){var t=(0,a.useContext)(R).isActionableMode;return n().createElement(n().Fragment,null,n().createElement(C.A,{"aria-hidden":e.hasError?null:"true",assistiveText:"Item ".concat(e.index," has errors"),className:m()("slds-button_icon-error slds-m-horizontal_xxx-small",{"slds-hidden":!e.hasError}),id:"error-0"+e.index,symbol:"error",tabIndex:t?"0":"-1",title:"Item ".concat(e.index," has errors")}),n().createElement("span",{className:"slds-row-number slds-text-body_small slds-text-color_weak"}))};U.displayName="ErrorCell",U.propTypes={hasError:c().bool,index:c().number.isRequired};var J=function(e){var t=e.hasWrap,l=e.cellText,s=e.cellLink,r=(0,a.useContext)(R).isActionableMode;return n().createElement("div",{className:m()(t?"slds-line-clamp":"slds-truncate"),title:l},s?n().createElement("a",{href:"#",tabIndex:r?"0":"-1",onClick:function(e){e.preventDefault()}},l):l)};J.displayName="ReadOnlyCell",J.propTypes={cellLink:c().bool,cellText:c().string.isRequired,hasWrap:c().bool};var V=function(e){var t=(0,a.useContext)(R).isActionableMode;return n().createElement(n().Fragment,null,n().createElement("span",{className:"slds-grid slds-grid_align-spread"},e.cellLink?n().createElement("a",{className:"slds-truncate",href:"#",id:"link-0".concat(e.index),tabIndex:t?"0":"-1",title:e.cellText,onClick:function(e){return e.preventDefault()}},e.cellText):n().createElement("span",{className:"slds-truncate",title:e.cellText},e.cellText),n().createElement(C.A,{assistiveText:e.buttonText,className:"slds-cell-edit__button slds-m-left_x-small",disabled:e.isLocked,iconClassName:m()("slds-button__icon_hint",{"slds-button__icon_edit":!e.isLocked,"slds-button__icon_lock slds-button__icon_small":e.isLocked}),symbol:e.isLocked?"lock":"edit",tabIndex:t?"0":"-1",title:e.buttonText})),e.showEdit&&n().createElement(K,{isRequired:e.isRequired,hasError:e.hasError}),e.isEdited&&n().createElement("span",{id:"unsaved-cell-notification",class:"slds-hide"},"Unsaved"))};V.displayName="EditableCell",V.propTypes={buttonText:c().string.isRequired,cellLink:c().bool,cellText:c().string.isRequired,hasError:(0,o.VY)("showEdit",c().bool),index:c().number,isLocked:c().bool,isRequired:(0,o.VY)("showEdit",c().bool),showEdit:c().bool};var K=function(e){return n().createElement(w.AM,{className:"slds-popover slds-popover_edit",style:{position:"absolute",top:"0",left:"0.0625rem"}},n().createElement("div",{className:m()("slds-form-element slds-grid slds-wrap",{"slds-has-error":e.hasError})},n().createElement("label",{className:"slds-form-element__label slds-form-element__label_edit slds-no-flex",htmlFor:"company-01"},e.isRequired?n().createElement("abbr",{className:"slds-required",title:"required","aria-hidden":"true"},"*"):null,n().createElement("span",{className:"slds-assistive-text"},"Company")),n().createElement("div",{className:"slds-form-element__control slds-grow"},n().createElement("input",{"aria-describedby":e.hasError?"error-message-01":null,className:"slds-input",defaultValue:"Acme Enterprises",id:"company-01",required:e.isRequired,type:"text"})),e.hasError?n().createElement("div",{id:"error-message-01",className:"slds-form-element__help"},"This field is required"):null))};K.displayName="EditPopover",K.propTypes={hasError:c().bool,isRequired:c().bool};var G=l(3106);function Z(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var l=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=l){var a,n,s,r,o=[],i=!0,c=!1;try{if(s=(l=l.call(e)).next,0===t){if(Object(l)!==l)return;i=!1}else for(;!(i=(a=s.call(l)).done)&&(o.push(a.value),o.length!==t);i=!0);}catch(e){c=!0,n=e}finally{try{if(!i&&null!=l.return&&(r=l.return(),Object(r)!==r))return}finally{if(c)throw n}}return o}}(e,t)||function(e,t){if(e){if("string"==typeof e)return ee(e,t);var l={}.toString.call(e).slice(8,-1);return"Object"===l&&e.constructor&&(l=e.constructor.name),"Map"===l||"Set"===l?Array.from(e):"Arguments"===l||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(l)?ee(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function ee(e,t){(null==t||t>e.length)&&(t=e.length);for(var l=0,a=Array(t);l<t;l++)a[l]=e[l];return a}var te=["Name","Product Code","List Price","Product Family"],le=["Product Name"],ae=[{name:"Analytics",productCode:"ANTLY",listPrice:"5000.00",productFamily:"Analytics Product"},{name:"Analytics",productCode:"ANTLY",listPrice:"5000.00",productFamily:"Analytics Product"},{name:"Analytics",productCode:"ANTLY",listPrice:"5000.00",productFamily:"Analytics Product"},{name:"Analytics",productCode:"ANTLY",listPrice:"5000.00",productFamily:"Analytics Product"},{name:"Analytics",productCode:"ANTLY",listPrice:"5000.00",productFamily:"Analytics Product"},{name:"Analytics",productCode:"ANTLY",listPrice:"5000.00",productFamily:"Analytics Product"},{name:"Analytics",productCode:"ANTLY",listPrice:"5000.00",productFamily:"Analytics Product"},{name:"Analytics",productCode:"ANTLY",listPrice:"5000.00",productFamily:"Analytics Product"}],ne=function(e){var t=e.selectedFilters,l=e.itemsSelected,s=Z((0,a.useState)(o.Ay.uniqueId("example-unique-id-")),1)[0],r=Z((0,a.useState)(o.Ay.uniqueId("example-unique-id-")),1)[0];return n().createElement("div",{className:"slds-p-vertical_x-small slds-p-horizontal_large slds-shrink-none slds-theme_shade"},n().createElement(_.Ay,{id:s,"aria-controls":r,autocomplete:!0,label:"Search",hideLabel:!0,placeholder:"Search Salesforce",inputIconPosition:"right",rightInputIcon:n().createElement(b.eX,{symbol:"search",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:n().createElement(N.Ay,{id:r,snapshot:S.u1,type:"plain",count:8,hideIcons:!0}),resultsType:"listbox",hasInteractions:!0}),t||null,n().createElement("div",{className:"slds-text-title slds-m-top_x-small","aria-live":"polite"},l||"0"," Item(s) Selected"))};ne.propTypes={selectedFilters:c().node,itemsSelected:c().string};var se=function(e){return n().createElement("div",{className:"slds-scrollable slds-grow"},n().createElement("div",{className:"slds-scrollable_none"},n().createElement(O,{hasNoRowHover:!0,isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",type:"advanced",ariaLabel:"Example product list"},n().createElement(F,null,n().createElement(L,null,n().createElement(H,{style:{width:"3.75rem"}}),te.map(function(e,t){return n().createElement(H,{"aria-label":e,isSortable:!0,isResizable:!0,key:t},n().createElement(z,{columnName:e}))}))),n().createElement(M,null,e.children))))},re=function(e){return n().createElement("div",{className:"slds-scrollable slds-grow"},n().createElement("div",{className:"slds-scrollable_none"},n().createElement(O,{hasHiddenHeader:!0,hasNoRowHover:!0,isBordered:!0,selectionType:"multiple",type:"advanced",ariaLabel:"Example single column product list"},n().createElement(F,{isHidden:e.hasHiddenHeader},n().createElement(L,null,n().createElement(H,{style:{width:"3.75rem"}}),e.hasHiddenHeader?n().createElement(H,{"aria-label":le[0]},n().createElement(j,{columnName:le[0]})):n().createElement(H,{"aria-label":le[0]},n().createElement(z,{columnName:le[0]})))),n().createElement(M,null,e.children))))};re.propTypes={hasHiddenHeader:c().bool,children:c().node};var oe=function(e){var t="Select item "+e.index;return n().createElement(W,{isSelected:e.checked},n().createElement(Y,{isRightAligned:!0,tabIndex:1===e.index?"0":null,type:"advanced"},n().createElement(g,{label:t,isChecked:e.checked,isDisabled:e.disabled,tabIndex:-1})),n().createElement($,null,n().createElement(J,{cellText:e.name})),n().createElement(Y,{type:"advanced"},n().createElement(J,{cellText:e.productCode})),n().createElement(Y,{type:"advanced"},n().createElement(J,{cellText:e.listPrice})),n().createElement(Y,{type:"advanced"},n().createElement(J,{cellText:e.productFamily})))},ie=function(e){var t="Select item "+e.index;return n().createElement(W,{isSelected:e.checked},n().createElement(Y,{isRightAligned:!0,tabIndex:1===e.index?"0":"-1",type:"advanced",style:{width:"3.75rem"}},n().createElement(g,{label:t,isChecked:e.checked,isDisabled:e.disabled,tabIndex:-1})),n().createElement(Y,{type:"advanced"},n().createElement(J,{cellText:e.name})))};ie.propTypes={className:c().string,index:c().number,checked:c().bool,disabled:c().bool,name:c().string};var ce=function(e){return n().createElement(G.Bm,{variant:"container-bare"},n().createElement(G.IK,null,n().createElement(G.j9,null,n().createElement(G.$P,{label:"Analytics",tabIndex:"0"}))))},de=function(e){return n().createElement(G.Bm,{variant:"container-bare"},n().createElement(G.IK,null,n().createElement(G.j9,null,n().createElement(G.$P,{label:"Option A",tabIndex:"0"})),n().createElement(G.j9,null,n().createElement(G.$P,{label:"Option B"}))))},ue=[{id:"default",label:"Default",element:n().createElement("div",{className:"demo-only demo-only_viewport",style:{height:"640px"}},n().createElement(d.zs,null,n().createElement(d.aF,{className:"slds-modal_large slds-list-builder","aria-labelledby":"id-of-modalheader-h1"},n().createElement(d.rQ,null,n().createElement("h1",{id:"id-of-modalheader-h1",className:"slds-text-heading_medium"},"Add products"),n().createElement("p",{className:"slds-m-top_x-small"},"Pricebook: Salesforce Products")),n().createElement(d.$m,{className:"slds-grid slds-grow"},n().createElement("div",{className:"slds-grid slds-grid_vertical"},n().createElement(ne,null),n().createElement(se,null,ae.map(function(e,t){return n().createElement(oe,{checked:!1,key:t,index:t+1,name:e.name,productCode:e.productCode,listPrice:e.listPrice,productFamily:e.productFamily})})))),n().createElement(d.jl,null,n().createElement("button",{className:"slds-button slds-button_neutral","aria-label":"Cancel and close"},"Cancel"),n().createElement("button",{className:"slds-button slds-button_brand"},"Next")))))}],me=[{id:"items-selected",label:"Items Selected",element:n().createElement("div",{className:"demo-only demo-only_viewport",style:{height:"640px"}},n().createElement(d.zs,null,n().createElement(d.aF,{className:"slds-modal_large","aria-labelledby":"id-of-modalheader-h1"},n().createElement(d.rQ,null,n().createElement("h1",{id:"id-of-modalheader-h1",className:"slds-text-heading_medium"},"Add products"),n().createElement("p",{className:"slds-m-top_x-small"},"Pricebook: Salesforce Products")),n().createElement(d.$m,{className:"slds-grid slds-nowrap"},n().createElement("div",{className:"slds-col slds-grid slds-grid_vertical slds-nowrap"},n().createElement(ne,{selectedFilters:n().createElement(ce,null),itemsSelected:"1"}),n().createElement(se,null,ae.map(function(e,t){return n().createElement(oe,{key:t,index:t+1,checked:0===t,name:e.name,productCode:e.productCode,listPrice:e.listPrice,productFamily:e.productFamily})})))),n().createElement(d.jl,null,n().createElement("button",{className:"slds-button slds-button_neutral","aria-label":"Cancel and close"},"Cancel"),n().createElement("button",{className:"slds-button slds-button_brand"},"Next")))))},{id:"items-disabled",label:"Items Disabled",element:n().createElement("div",{className:"demo-only demo-only_viewport",style:{height:"640px"}},n().createElement(d.zs,null,n().createElement(d.aF,{className:"slds-modal_large","aria-labelledby":"id-of-modalheader-h1"},n().createElement(d.rQ,null,n().createElement("h1",{id:"id-of-modalheader-h1",className:"slds-text-heading_medium"},"Add products"),n().createElement("p",{className:"slds-m-top_x-small"},"Pricebook: Salesforce Products")),n().createElement(d.$m,{className:"slds-grid slds-nowrap"},n().createElement("div",{className:"slds-col slds-grid slds-grid_vertical slds-nowrap"},n().createElement(ne,{itemsSelected:"0"}),n().createElement(se,null,ae.map(function(e,t){return n().createElement(oe,{checked:!1,key:t,index:t+1,disabled:t%2==0||null,name:e.name,productCode:e.productCode,listPrice:e.listPrice,productFamily:e.productFamily})})))),n().createElement(d.jl,null,n().createElement("button",{className:"slds-button slds-button_neutral","aria-label":"Cancel and close"},"Cancel"),n().createElement("button",{className:"slds-button slds-button_brand"},"Next")))))},{id:"items-default-selected",label:"Items Default Selected",element:n().createElement("div",{className:"demo-only demo-only_viewport",style:{height:"640px"}},n().createElement(d.zs,null,n().createElement(d.aF,{className:"slds-modal_large","aria-labelledby":"id-of-modalheader-h1"},n().createElement(d.rQ,null,n().createElement("h1",{id:"id-of-modalheader-h1",className:"slds-text-heading_medium"},"Add products"),n().createElement("p",{className:"slds-m-top_x-small"},"Pricebook: Salesforce Products")),n().createElement(d.$m,{className:"slds-grid slds-nowrap"},n().createElement("div",{className:"slds-col slds-grid slds-grid_vertical slds-nowrap"},n().createElement(ne,{itemsSelected:"0"}),n().createElement(se,null,ae.map(function(e,t){return n().createElement(oe,{key:t,index:t+1,checked:t%2==1,disabled:t%2==1||null,name:e.name,productCode:e.productCode,listPrice:e.listPrice,productFamily:e.productFamily})})))),n().createElement(d.jl,null,n().createElement("button",{className:"slds-button slds-button_neutral","aria-label":"Cancel and close"},"Cancel"),n().createElement("button",{className:"slds-button slds-button_brand"},"Next")))))}],be=[{id:"two-column-with-hidden-header",label:"Two Column with Hidden Header",element:n().createElement("div",{className:"demo-only demo-only_viewport",style:{height:"640px"}},n().createElement(d.zs,null,n().createElement(d.aF,{className:"slds-modal_large","aria-labelledby":"id-of-modalheader-h1"},n().createElement(d.rQ,null,n().createElement("h1",{id:"id-of-modalheader-h1",className:"slds-text-heading_medium"},"Add products"),n().createElement("p",{className:"slds-m-top_x-small"},"Pricebook: Salesforce Products")),n().createElement(d.$m,{className:"slds-grid slds-nowrap"},n().createElement("div",{className:"slds-col slds-grid slds-grid_vertical slds-nowrap"},n().createElement(ne,{itemsSelected:"0"}),n().createElement(re,{hasHiddenHeader:!0},ae.map(function(e,t){return n().createElement(ie,{checked:!1,key:t,index:t+1,name:e.name})})))),n().createElement(d.jl,null,n().createElement("button",{className:"slds-button slds-button_neutral","aria-label":"Cancel and close"},"Cancel"),n().createElement("button",{className:"slds-button slds-button_brand"},"Next")))))},{id:"filtered",label:"Filtered Results",element:n().createElement("div",{className:"demo-only demo-only_viewport",style:{height:"640px"}},n().createElement(d.zs,null,n().createElement(d.aF,{className:"slds-modal_large","aria-labelledby":"id-of-modalheader-h1"},n().createElement(d.rQ,null,n().createElement("h1",{id:"id-of-modalheader-h1",className:"slds-text-heading_medium"},"Add products"),n().createElement("p",{className:"slds-m-top_x-small"},"Pricebook: Salesforce Products")),n().createElement(d.$m,{className:"slds-grid slds-grow"},n().createElement("div",{className:"slds-grid slds-grid_vertical"},n().createElement(ne,{selectedFilters:n().createElement(de,null),itemsSelected:"2"}),n().createElement(se,null,n().createElement(oe,{checked:!1,index:1,name:ae[0].name,productCode:ae[0].productCode,listPrice:ae[0].listPrice,productFamily:ae[0].productFamily})))),n().createElement(d.jl,null,n().createElement("button",{className:"slds-button slds-button_neutral","aria-label":"Cancel and close"},"Cancel"),n().createElement("button",{className:"slds-button slds-button_brand"},"Next")))))}],pe=s.XB.h2,he=s.XB.h3,fe=s.XB.p,ye=function(){return(0,a.createElement)(s.Ay,{},(0,a.createElement)("div",{className:"doc lead"},"The List Builder is a quick, visual and efficient ‘shopping cart’ approach to adding multiple items to a parent object."),(0,a.createElement)(r.A,{exampleOnly:!0},(0,o.NO)(ue)),pe({id:"About-List-Builder"},"About List Builder"),fe({},"The List builder relies heavily on utility classes to piece together the layout so please pay close attention to the markup and classes."),pe({id:"Base"},"Base"),(0,a.createElement)(r.A,null,(0,o.NO)(ue)),pe({id:"States"},"States"),he({id:"Items-Selected"},"Items Selected"),(0,a.createElement)(r.A,null,(0,o.NO)(me,"items-selected")),he({id:"Items-Disabled"},"Items Disabled"),(0,a.createElement)(r.A,null,(0,o.NO)(me,"items-disabled")),he({id:"Items-Default-Selected"},"Items Default Selected"),(0,a.createElement)(r.A,null,(0,o.NO)(me,"items-default-selected")),pe({id:"Examples"},"Examples"),he({id:"Two-Column-with-Hidden-Header"},"Two Column with Hidden Header"),(0,a.createElement)(r.A,null,(0,o.NO)(be,"filtered")),he({id:"Filtered-Results"},"Filtered Results"),(0,a.createElement)(r.A,null,(0,o.NO)(be,"two-column-with-hidden-header")))},Ee=function(){return(0,s.Qr)(ye())}},5206:function(e){e.exports=ReactDOM}},n={};function s(e){var t=n[e];if(void 0!==t)return t.exports;var l=n[e]={id:e,exports:{}};return a[e](l,l.exports,s),l.exports}s.m=a,s.amdO={},e=[],s.O=function(t,l,a,n){if(!l){var r=1/0;for(d=0;d<e.length;d++){l=e[d][0],a=e[d][1],n=e[d][2];for(var o=!0,i=0;i<l.length;i++)(!1&n||r>=n)&&Object.keys(s.O).every(function(e){return s.O[e](l[i])})?l.splice(i--,1):(o=!1,n<r&&(r=n));if(o){e.splice(d--,1);var c=a();void 0!==c&&(t=c)}}return t}n=n||0;for(var d=e.length;d>0&&e[d-1][2]>n;d--)e[d]=e[d-1];e[d]=[l,a,n]},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,{a:t}),t},l=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},s.t=function(e,a){if(1&a&&(e=this(e)),8&a)return e;if("object"==typeof e&&e){if(4&a&&e.__esModule)return e;if(16&a&&"function"==typeof e.then)return e}var n=Object.create(null);s.r(n);var r={};t=t||[null,l({}),l([]),l(l)];for(var o=2&a&&e;("object"==typeof o||"function"==typeof o)&&!~t.indexOf(o);o=l(o))Object.getOwnPropertyNames(o).forEach(function(t){r[t]=function(){return e[t]}});return r.default=function(){return e},s.d(n,r),n},s.d=function(e,t){for(var l in t)s.o(t,l)&&!s.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,get:t[l]})},s.e=function(){return Promise.resolve()},s.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.j=7077,function(){var e={7077:0};s.O.j=function(t){return 0===e[t]};var t=function(t,l){var a,n,r=l[0],o=l[1],i=l[2],c=0;if(r.some(function(t){return 0!==e[t]})){for(a in o)s.o(o,a)&&(s.m[a]=o[a]);if(i)var d=i(s)}for(t&&t(l);c<r.length;c++)n=r[c],s.o(e,n)&&e[n]&&e[n][0](),e[n]=0;return s.O(d)},l=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs||[];l.forEach(t.bind(null,0)),l.push=t.bind(null,l.push.bind(l))}(),s.nc=void 0;var r=s.O(void 0,[3540],function(){return s(3804)});r=s.O(r),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/list-builder/docs.mdx.js"]=r}();

package/__internal/chunked/docs/ui/components/menus/docs.mdx.js

@@ -1 +1 @@
-var SLDS;!function(){"use strict";var e,t,n,l={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},3504:function(e,t,n){n.r(t),n.d(t,{getContents:function(){return G},getElement:function(){return z}});var l=n(1594),s=n.n(l),r=n(5671),a=n(6547),o=n(3212),i=n(1374),d=n(5619),c=n(7412),m=n.n(c);function u(e){return u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},u(e)}function h(e,t){for(var n=0;n<t.length;n++){var l=t[n];l.enumerable=l.enumerable||!1,l.configurable=!0,"value"in l&&(l.writable=!0),Object.defineProperty(e,p(l.key),l)}}function p(e){var t=function(e){if("object"!=u(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=u(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==u(t)?t:t+""}function E(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(E=function(){return!!e})()}function f(e){return f=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},f(e)}function g(e,t){return g=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},g(e,t)}var b=function(e){function t(){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),function(e,t,n){return t=f(t),function(e,t){if(t&&("object"==u(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}(e,E()?Reflect.construct(t,n||[],f(e).constructor):t.apply(e,n))}(this,t,arguments)}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&g(e,t)}(t,e),n=t,(r=[{key:"render",value:function(){return s().createElement(l.Fragment,null,this.props.fragmentChildren)}}])&&h(n.prototype,r),Object.defineProperty(n,"prototype",{writable:!1}),n;var n,r}(s().Component);b.propTypes={fragmentChildren:m().node.isRequired};var w=n(4760),y=n(8347),_=function(e){return s().createElement("div",{className:"demo-only",style:{height:"260px"}},s().createElement(w.l9,{isOpen:!0},s().createElement(w.W1,{className:"slds-dropdown_left slds-dropdown_small"},s().createElement(w.cO,{className:"slds-dropdown_length-5"},s().createElement(w.Dr,{tabIndex:"0"},"Menu Item One"),s().createElement(w.Dr,null,"Menu Item Two"),s().createElement(w.Dr,null,"Menu Item Three"),s().createElement(w.Dr,null,"Menu Item Four"),s().createElement(w.Dr,null,"Menu Item Five"),s().createElement(w.Dr,null,"Menu Item Six"),s().createElement(w.Dr,null,"Menu Item Seven"),s().createElement(w.Dr,null,"Menu Item Eight"),s().createElement(w.Dr,null,"Menu Item Nine"),s().createElement(w.Dr,null,"Menu Item Ten")))))},v=function(e){return s().createElement("div",{className:"demo-only",style:{height:"300px"}},s().createElement(w.l9,{isOpen:!0},s().createElement(w.W1,{className:"slds-dropdown_left slds-dropdown_small"},s().createElement(w.cO,{className:"slds-dropdown_length-7"},s().createElement(w.Dr,{tabIndex:"0"},"Menu Item One"),s().createElement(w.Dr,null,"Menu Item Two"),s().createElement(w.Dr,null,"Menu Item Three"),s().createElement(w.Dr,null,"Menu Item Four"),s().createElement(w.Dr,null,"Menu Item Five"),s().createElement(w.Dr,null,"Menu Item Six"),s().createElement(w.Dr,null,"Menu Item Seven"),s().createElement(w.Dr,null,"Menu Item Eight"),s().createElement(w.Dr,null,"Menu Item Nine"),s().createElement(w.Dr,null,"Menu Item Ten")))))},I=function(e){return s().createElement("div",{className:"demo-only",style:{height:"430px"}},s().createElement(w.l9,{isOpen:!0},s().createElement(w.W1,{className:"slds-dropdown_left slds-dropdown_small"},s().createElement(w.cO,{className:"slds-dropdown_length-10"},s().createElement(w.Dr,{tabIndex:"0"},"Menu Item One"),s().createElement(w.Dr,null,"Menu Item Two"),s().createElement(w.Dr,null,"Menu Item Three"),s().createElement(w.Dr,null,"Menu Item Four"),s().createElement(w.Dr,null,"Menu Item Five"),s().createElement(w.Dr,null,"Menu Item Six"),s().createElement(w.Dr,null,"Menu Item Seven"),s().createElement(w.Dr,null,"Menu Item Eight"),s().createElement(w.Dr,null,"Menu Item Nine"),s().createElement(w.Dr,null,"Menu Item Ten")))))},x=function(e){return s().createElement("div",{className:"demo-only",style:{height:"260px"}},s().createElement(w.l9,{isOpen:!0},s().createElement(w.W1,{className:"slds-dropdown_left slds-dropdown_small"},s().createElement(w.cO,{className:"slds-dropdown_length-with-icon-5"},s().createElement(w.Dr,{tabIndex:"0"},s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-account slds-m-right_small",sprite:"standard",symbol:"account"}),"Menu Item One"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-approval slds-m-right_small",sprite:"standard",symbol:"approval"}),"Menu Item Two"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-lead slds-m-right_small",sprite:"standard",symbol:"lead"}),"Menu Item Three"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-opportunity slds-m-right_small",sprite:"standard",symbol:"opportunity"}),"Menu Item Four"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-product slds-m-right_small",sprite:"standard",symbol:"product"}),"Menu Item Five"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-account slds-m-right_small",sprite:"standard",symbol:"account"}),"Menu Item Six"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-approval slds-m-right_small",sprite:"standard",symbol:"approval"}),"Menu Item Seven"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-lead slds-m-right_small",sprite:"standard",symbol:"lead"}),"Menu Item Eight"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-opportunity slds-m-right_small",sprite:"standard",symbol:"opportunity"}),"Menu Item Nine"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-product slds-m-right_small",sprite:"standard",symbol:"product"}),"Menu Item Ten")))))},N=function(e){return s().createElement("div",{className:"demo-only",style:{height:"320px"}},s().createElement(w.l9,{isOpen:!0},s().createElement(w.W1,{className:"slds-dropdown_left slds-dropdown_small"},s().createElement(w.cO,{className:"slds-dropdown_length-with-icon-7"},s().createElement(w.Dr,{tabIndex:"0"},s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-account slds-m-right_small",sprite:"standard",symbol:"account"}),"Menu Item One"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-approval slds-m-right_small",sprite:"standard",symbol:"approval"}),"Menu Item Two"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-lead slds-m-right_small",sprite:"standard",symbol:"lead"}),"Menu Item Three"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-opportunity slds-m-right_small",sprite:"standard",symbol:"opportunity"}),"Menu Item Four"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-product slds-m-right_small",sprite:"standard",symbol:"product"}),"Menu Item Five"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-account slds-m-right_small",sprite:"standard",symbol:"account"}),"Menu Item Six"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-approval slds-m-right_small",sprite:"standard",symbol:"approval"}),"Menu Item Seven"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-lead slds-m-right_small",sprite:"standard",symbol:"lead"}),"Menu Item Eight"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-opportunity slds-m-right_small",sprite:"standard",symbol:"opportunity"}),"Menu Item Nine"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-product slds-m-right_small",sprite:"standard",symbol:"product"}),"Menu Item Ten")))))},M=function(e){return s().createElement("div",{className:"demo-only",style:{height:"450px"}},s().createElement(w.l9,{isOpen:!0},s().createElement(w.W1,{className:"slds-dropdown_left slds-dropdown_small"},s().createElement(w.cO,{className:"slds-dropdown_length-with-icon-10"},s().createElement(w.Dr,{tabIndex:"0"},s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-account slds-m-right_small",sprite:"standard",symbol:"account"}),"Menu Item One"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-approval slds-m-right_small",sprite:"standard",symbol:"approval"}),"Menu Item Two"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-lead slds-m-right_small",sprite:"standard",symbol:"lead"}),"Menu Item Three"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-opportunity slds-m-right_small",sprite:"standard",symbol:"opportunity"}),"Menu Item Four"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-product slds-m-right_small",sprite:"standard",symbol:"product"}),"Menu Item Five"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-account slds-m-right_small",sprite:"standard",symbol:"account"}),"Menu Item Six"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-approval slds-m-right_small",sprite:"standard",symbol:"approval"}),"Menu Item Seven"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-lead slds-m-right_small",sprite:"standard",symbol:"lead"}),"Menu Item Eight"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-opportunity slds-m-right_small",sprite:"standard",symbol:"opportunity"}),"Menu Item Nine"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-product slds-m-right_small",sprite:"standard",symbol:"product"}),"Menu Item Ten")))))},A=[{id:"dropdown-menu-length-5",label:"5 items",element:s().createElement(_,null)},{id:"dropdown-menu-length-7",label:"7 items",element:s().createElement(v,null)},{id:"dropdown-menu-length-10",label:"10 items",element:s().createElement(I,null)},{id:"dropdown-menu-length-5-icon",label:"5 items with icon",element:s().createElement(x,null)},{id:"dropdown-menu-length-7-icon",label:"7 items with icon",element:s().createElement(N,null)},{id:"dropdown-menu-length-10-icon",label:"10 items with icon",element:s().createElement(M,null)}],S=n(942),O=n.n(S),D=["ariaExpanded","className","children","iconRight","itemName","tabIndex","title","submenuClassnames"];function T(){return T=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var l in n)({}).hasOwnProperty.call(n,l)&&(e[l]=n[l])}return e},T.apply(null,arguments)}var k=s().createElement(y.A,{className:"slds-icon slds-icon_x-small slds-icon-text-default slds-m-left_small slds-shrink-none",sprite:"utility",symbol:"right"}),j=function(e){var t=e.ariaExpanded,n=e.className,l=(e.children,e.iconRight),r=e.itemName,a=e.tabIndex,o=e.title,i=e.submenuClassnames,d=function(e,t){if(null==e)return{};var n,l,s=function(e,t){if(null==e)return{};var n={};for(var l in e)if({}.hasOwnProperty.call(e,l)){if(-1!==t.indexOf(l))continue;n[l]=e[l]}return n}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(l=0;l<r.length;l++)n=r[l],-1===t.indexOf(n)&&{}.propertyIsEnumerable.call(e,n)&&(s[n]=e[n])}return s}(e,D);return s().createElement("li",T({},d,{className:O()("slds-dropdown__item slds-has-submenu",n),role:"presentation"}),s().createElement("a",{role:"menuitem",href:"#","aria-haspopup":"true","aria-expanded":t,tabIndex:a||"-1",onClick:function(e){return e.preventDefault()}},s().createElement("span",{className:"slds-truncate",title:o||r},e.itemName),l||null),s().createElement(w.W1,{className:O()("slds-dropdown_submenu",i)},s().createElement(w.cO,{ariaLabel:r},s().createElement(w.Dr,{tabIndex:"0"},"Submenu Item One"),s().createElement(w.Dr,null,"Submenu Item Two"),s().createElement(w.Dr,null,"Submenu Item Three"),s().createElement("li",{className:"slds-has-divider_top-space",role:"separator"}),s().createElement(w.Dr,null,"Submenu Item Four"))))},P=function(e){var t=e.ariaExpanded,n=e.parentIsOpen,l=e.submenuClassnames;return s().createElement(w.l9,{isOpen:n},s().createElement(w.W1,{className:"slds-dropdown_left"},s().createElement(w.cO,{ariaLabel:"Show More"},s().createElement(w.Dr,{tabIndex:"0"},"Menu Item One"),s().createElement(w.Dr,null,"Menu Item Two"),s().createElement(j,{ariaExpanded:t,iconRight:k,itemName:"Menu Item Three",submenuClassnames:l||"slds-dropdown_submenu-right"}))))},C=(n(769),n(806)),W=r.XB.code,B=r.XB.h2,R=r.XB.h3,F=r.XB.h4,L=r.XB.li,X=r.XB.p,V=r.XB.table,H=r.XB.tbody,J=r.XB.td,K=r.XB.th,q=r.XB.thead,$=r.XB.tr,Q=r.XB.ul,z=function(){return(0,l.createElement)(r.Ay,{},(0,l.createElement)("div",{className:"doc lead"},"A Menu offers a list of actions or functions that a user can access."),(0,l.createElement)(a.A,{exampleOnly:!0,demoStyles:"height: 150px;"},(0,l.createElement)(w.Bu,{hasLeftIcon:!0})),B({id:"About-Menu"},"About Menu"),X({},"The unordered menu list ",W({},"<ul>")," with ",W({},'role="menu"')," should be contained in a ",W({},"<div>")," with the class ",W({},".slds-dropdown"),"."),X({},"The target HTML element and dropdown need to be wrapped in the class ",W({},".slds-dropdown-trigger dropdown-trigger_click"),"."),R({id:"Accessibility"},"Accessibility"),F({id:"Markup"},"Markup"),Q({},L({},"The menu trigger is a focusable element (",W({},"<a>")," or ",W({},"<button>"),") with ",W({},'aria-haspopup="true"')),L({},"The menu trigger has the ",W({},"aria-expanded")," attribute applied and the value is set to ",W({},'"true"')," or ",W({},'"false"')," depending on if the menu is open or not."),L({},"The menu has ",W({},'role="menu"')," and an ",W({},"aria-label")," attribute whose value is the name of the menu trigger"),L({},"The menu items have ",W({},'role="menuitem"'),", ",W({},'role="menuitemcheckbox"'),", or ",W({},'role="menuitemradio"'),", depending on the selection options")),F({id:"Keyboard-Interactions"},"Keyboard Interactions"),X({},"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."),Q({},L({},"Arrow keys cycle focus through menu items (including disabled menu items)"),L({},"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"),L({},"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"),L({},"Tab key closes the menu and moves focus to the next focusable element on the page"),L({},"Esc key closes the menu and moves focus back to the menu trigger"),L({},"Any character key moves focus to the next menu item that starts with that character, if applicable")),B({id:"Base"},"Base"),(0,l.createElement)(i.A,{title:"Menu Base"},(0,l.createElement)(a.A,{demoStyles:"height: 200px;"},(0,l.createElement)(w.Vf,{className:"slds-dropdown_left"}))),B({id:"With-Subheaders"},"With Subheaders"),(0,l.createElement)(d.A,{type:"a11y",header:"Accessibility Note"},(0,l.createElement)("p",null,"The ",(0,l.createElement)("code",null,'role="group"')," on nested ",(0,l.createElement)("code",null,"<ul>")," elements groups subheadings with their submenu items and the ",(0,l.createElement)("code",null,"aria-labelledby")," attribute on these nested ",(0,l.createElement)("code",null,"<ul>")," elements references the ",(0,l.createElement)("code",null,"id")," of the corresponding subheading. A subheading must have ",(0,l.createElement)("code",null,'role="presentation"')," on the"," ",(0,l.createElement)("code",null,"<li>")," and the content inside the ",(0,l.createElement)("code",null,"<li>")," ","should be in a ",(0,l.createElement)("code",null,"<span>"),".")),(0,l.createElement)(o.A,{toggleCode:!1},(0,l.createElement)("li",{className:"slds-dropdown__header slds-truncate",title:"Menu Sub Heading",role:"presentation"},(0,l.createElement)("span",null,"Menu Sub Heading"))),(0,l.createElement)(i.A,{title:"Menu with Subheaders"},(0,l.createElement)(a.A,{demoStyles:"height: 300px;"},(0,l.createElement)(w.iK,null))),B({id:"With-Icons"},"With Icons"),X({},"Icons can be included on either the left, right, or both sides of an option."),(0,l.createElement)(d.A,{type:"a11y",header:"Accessibility Note"},(0,l.createElement)("p",null,"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.")),R({id:"Icon-on-the-Left"},"Icon on the Left"),(0,l.createElement)(i.A,{title:"Menu with Icon Left"},(0,l.createElement)(a.A,{demoStyles:"height: 150px;"},(0,l.createElement)(w.Bu,{hasLeftIcon:!0}))),R({id:"Icon-on-the-Right"},"Icon on the Right"),(0,l.createElement)(i.A,{title:"Menu with Icon Right"},(0,l.createElement)(a.A,{demoStyles:"height: 150px;"},(0,l.createElement)(w._l,null))),R({id:"Double-Icon"},"Double Icon"),(0,l.createElement)(d.A,{type:"a11y",header:"Accessibility Note"},(0,l.createElement)("p",null,"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.A,{title:"Menu with Double Icon"},(0,l.createElement)(a.A,{demoStyles:"height: 150px;"},(0,l.createElement)(w.pA,null))),B({id:"With-Selectable-Items"},"With Selectable Items"),X({},"When creating a menu with selectable items:"),Q({},L({},"All selectable items need the proper role, either ",W({},'role="menuitemcheckbox"')," or ",W({},'role="menuitemradio"')),L({},"All selectable items should contain an icon"),L({},"Each icon must have the class ",W({},"slds-icon_selected")," on the ",W({},"<svg>"),Q({},L({},"This hides icons of non-selected items"))),L({},"Items that have been selected need ",W({},'aria-checked="true"')," on the ",W({},"<a>")," element")),(0,l.createElement)(d.A,{type:"a11y",header:"Revealing Icons for Selected Items"},(0,l.createElement)("p",null,"A selected item reveals its icon when the class"," ",(0,l.createElement)("code",null,"slds-is-selected")," is applied to the ",(0,l.createElement)("code",null,"<li>")," and"," ",(0,l.createElement)("code",null,'aria-checked="true"')," is applied to its"," ",(0,l.createElement)("code",null,"menuitemcheckbox")," or ",(0,l.createElement)("code",null,"menuitemradio")," child.")),(0,l.createElement)(o.A,{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.A,{title:"Menu with Selectable Icon Left"},(0,l.createElement)(a.A,{demoStyles:"height: 150px;"},(0,l.createElement)(w.Bu,{isSelectable:!0}))),B({id:"With-Status-Notifications"},"With Status Notifications"),(0,l.createElement)(a.A,{demoStyles:"height: 250px;"},(0,l.createElement)(w.Co,null)),X({},"To enable menu items to reflect status level notifications like Error, Success and Warning, place a modifier class onto the ",W({},"menuitem")," that has the offending notification."),X({},"The class is based on the ",W({},"slds-has-${level}")," pattern, where ",W({},"${level}")," corresponds to the level you wish to set."),Q({},L({},W({},"slds-has-error")),L({},W({},"slds-has-success")),L({},W({},"slds-has-warning"))),(0,l.createElement)(o.A,{toggleCode:!1},(0,l.createElement)("a",{className:"slds-has-warning",href:"#",onClick:function(e){return e.preventDefault()},role:"menuitem",tabIndex:"-1"},"...")),(0,l.createElement)(d.A,{type:"note",header:"Warning Icon"},(0,l.createElement)("p",null,"For warning level menu items it is required that you switch the icon to use the ",(0,l.createElement)("code",null,"currentColor")," variant for icons.")),B({id:"With-Overflow-Scrolling"},"With Overflow Scrolling"),(0,l.createElement)(i.A,{title:"Menu with Overflow Scrolling"},(0,l.createElement)(a.A,{demoStyles:"height: 220px;"},(0,l.createElement)(w.XP,{className:"slds-dropdown_left slds-dropdown_length-5"}))),X({},"To force overflow scrolling after either 5, 7, or 10 items, add the modifier ",W({},"slds-dropdown_length-*")," to the ",W({},"<div>")," with class ",W({},"slds-dropdown")," where the ",W({},"*")," is either 5, 7, or 10."),(0,l.createElement)(o.A,{toggleCode:!1},(0,l.createElement)("div",{className:"slds-dropdown slds-dropdown_length-5"},"...")),R({id:"Scrolling-for-Menu-Items-with-Icons"},"Scrolling for Menu Items with Icons"),X({},"To force overflow scrolling after either 5, 7, or 10 items with icons, add the modifier ",W({},"slds-dropdown_length-with-icon-*")," to the ",W({},"<div>")," with class ",W({},"slds-dropdown")," where the ",W({},"*")," is either 5, 7, or 10."),(0,l.createElement)(a.A,{demoStyles:"height: 250px;"},(0,l.createElement)(w.XP,{isSelectable:!0,isSelected:"true",className:"slds-dropdown_left slds-dropdown_length-with-icon-5"})),B({id:"With-a-Submenu"},"With a Submenu"),X({},"To create a menu with a submenu, add the ",W({},"slds-has-submenu")," class to the list item, ",W({},"<li>"),", that will open the submenu."),(0,l.createElement)(d.A,{type:"a11y",header:"Accessibility Note"},(0,l.createElement)("p",null,"Any menu item that opens a submenu must have ",(0,l.createElement)("code",null,'aria-haspop="true"')," ","on the ",(0,l.createElement)("code",null,"<a>")," within the ",(0,l.createElement)("code",null,"<li>"),". In order to open the submenu, set ",(0,l.createElement)("code",null,"aria-expanded")," to ",(0,l.createElement)("code",null,"true")," on that ",(0,l.createElement)("code",null,"<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 ",(0,l.createElement)("code",null,'role="menu"')," and an ",(0,l.createElement)("code",null,"aria-label")," ","attribute whose value matches the name of the ",(0,l.createElement)("code",null,"<li>")," that opened the submenu.")),(0,l.createElement)(o.A,{toggleCode:!1},(0,l.createElement)("li",{className:"slds-dropdown__item slds-has-submenu",role:"presentation"},(0,l.createElement)("a",{role:"menuitem",href:"#",onClick:function(e){return e.preventDefault()},"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"},"...")))),R({id:"Submenu-to-Right"},"Submenu to Right"),X({},"To open the submenu to the right of the main menu, add ",W({},"slds-dropdown_submenu-right")," to the ",W({},"<div>")," with the ",W({},"slds-dropdown_submenu")," class."),(0,l.createElement)(i.A,{title:"Menu with Submenu Right"},(0,l.createElement)(a.A,{demoStyles:"height: 300px;"},(0,l.createElement)(P,{ariaExpanded:!0,parentIsOpen:!0}))),R({id:"Submenu-to-Left"},"Submenu to Left"),X({},"To open the submenu to the left, add ",W({},"slds-dropdown_submenu-left")," to the ",W({},"<div>")," with the ",W({},"slds-dropdown_submenu")," class."),(0,l.createElement)(i.A,{title:"Menu with Submenu Left"},(0,l.createElement)(a.A,{demoStyles:"height: 300px; margin-left: 150px;"},(0,l.createElement)(P,{ariaExpanded:!0,parentIsOpen:!0,submenuClassnames:"slds-dropdown_submenu-left"}))),B({id:"Overflow-Menu-with-Actions"},"Overflow Menu with Actions"),X({},"For an overflow of action items, use the overflow menu with actions styling by adding the modifier ",W({},"slds-dropdown_actions")," to the ",W({},"div")," with class ",W({},"slds-dropdown"),". This pattern is typically used in conjunction with a button group."),(0,l.createElement)(i.A,{title:"Menu with Action Overflow"},(0,l.createElement)(a.A,{demoStyles:"height: 150px;"},(0,l.createElement)(w.hu,{isOpen:!0}))),B({id:"Positioning"},"Positioning"),X({},"There are 3 options for the positioning of the menu dropdown -- left, right, and bottom. To access these options, add a modifier to the ",W({},"<div>")," with class name ",W({},"slds-dropdown"),". For the standard positioning where the dropdown aligns with the left side of the dropdown trigger, use ",W({},"slds-dropdown_left"),", as seen above."),(0,l.createElement)(o.A,{toggleCode:!1},(0,l.createElement)("div",{className:"slds-dropdown slds-dropdown_left"},"...")),R({id:"Positioned-Right"},"Positioned Right"),X({},"To position the dropdown to align with the right of the dropdown trigger, use ",W({},"slds-dropdown_right"),"."),(0,l.createElement)(i.A,{title:"Menu Positioned Right"},(0,l.createElement)(a.A,{demoStyles:"height: 200px; margin-left: 90px;"},(0,l.createElement)(w.Vf,{className:"slds-dropdown_right"}))),R({id:"Positioned-Bottom"},"Positioned Bottom"),X({},"To position the dropdown to sit on top of the dropdown trigger, use ",W({},"slds-dropdown_bottom"),"."),(0,l.createElement)(i.A,{title:"Menu Positioned Bottom"},(0,l.createElement)(a.A,{demoStyles:"margin-left: 45px; margin-top: 163px;"},(0,l.createElement)(w.Vf,{className:"slds-dropdown_bottom"}))),B({id:"Width"},"Width"),X({},"To adjust the width of the menu dropdown add modifier ",W({},"slds-dropdown_*")," to the ",W({},"<div>")," with class ",W({},"slds-dropdown")," where the ",W({},"*")," is ",W({},"xx-small"),", ",W({},"x-small"),", ",W({},"small"),", ",W({},"medium"),", or ",W({},"large"),"."),(0,l.createElement)(o.A,{toggleCode:!1},(0,l.createElement)("div",{className:"slds-dropdown slds-dropdown_left slds-dropdown_medium"},"...")),V({},q({},$({},K({},"Modifier"),K({},"Example"))),H({},$({},J({},W({},".slds-dropdown_xx-small")," ",(0,l.createElement)("br",null)," 6rem / 96px"),J({},(0,l.createElement)("div",{style:{height:"200px",width:"320px"}},(0,l.createElement)(w.Vf,{className:"slds-dropdown_left slds-dropdown_xx-small"})))),$({},J({},W({},".slds-dropdown_x-small")," ",(0,l.createElement)("br",null)," 12rem / 192px"),J({},(0,l.createElement)("div",{style:{height:"200px",width:"320px"}},(0,l.createElement)(w.Vf,{className:"slds-dropdown_left slds-dropdown_x-small"})))),$({},J({},W({},".slds-dropdown_small")," ",(0,l.createElement)("br",null)," 15rem / 240px"),J({},(0,l.createElement)("div",{style:{height:"200px",width:"320px"}},(0,l.createElement)(w.Vf,{className:"slds-dropdown_left slds-dropdown_small"})))),$({},J({},W({},".slds-dropdown_medium")," ",(0,l.createElement)("br",null)," 20rem / 320px"),J({},(0,l.createElement)("div",{style:{height:"200px",width:"320px"}},(0,l.createElement)(w.Vf,{className:"slds-dropdown_left slds-dropdown_medium"})))),$({},J({},W({},".slds-dropdown_large")," ",(0,l.createElement)("br",null)," 25rem / 400px"),J({},(0,l.createElement)("div",{style:{height:"200px",width:"320px"}},(0,l.createElement)(w.Vf,{className:"slds-dropdown_left slds-dropdown_large"})))))),B({id:"Height"},"Height"),X({},"To adjust the length of visible menu dropdown items before overflow scrolling activates, add modifier ",W({},"slds-dropdown_length-*"),", or when using icons, ",W({},"slds-dropdown_length-with-icon-*"),", where the ",W({},"*")," is ",W({},"5"),", ",W({},"7"),", ",W({},"10"),". Apply the height classes to both the ",W({},"<div>"),"s with class ",W({},"slds-dropdown")," and ",W({},"slds-dropdown__list")),(0,l.createElement)(o.A,{toggleCode:!1},(0,l.createElement)("div",{className:"slds-dropdown slds-dropdown_left slds-dropdown_length-7"},(0,l.createElement)("ul",{class:"slds-dropdown__list slds-dropdown_length-7"},"..."))),V({},q({},$({},K({},"Modifier"),K({},"Example"))),H({},$({},J({},W({},".slds-dropdown_length-5")," ",(0,l.createElement)("br",null)," 5 items"),J({},(0,l.createElement)("div",{style:{height:"16rem",width:"320px"}},(0,l.createElement)(b,{fragmentChildren:(0,C.NO)(A,"dropdown-menu-length-5")})))),$({},J({},W({},".slds-dropdown_length-7")," ",(0,l.createElement)("br",null)," 7 items"),J({},(0,l.createElement)("div",{style:{height:"21rem",width:"320px"}},(0,l.createElement)(b,{fragmentChildren:(0,C.NO)(A,"dropdown-menu-length-7")})))),$({},J({},W({},".slds-dropdown_length-10")," ",(0,l.createElement)("br",null)," 10 items"),J({},(0,l.createElement)("div",{style:{height:"26rem",width:"320px"}},(0,l.createElement)(b,{fragmentChildren:(0,C.NO)(A,"dropdown-menu-length-10")})))),$({},J({},W({},".slds-dropdown_length-with-icon-5")," ",(0,l.createElement)("br",null)," 5 items"),J({},(0,l.createElement)("div",{style:{height:"16rem",width:"320px"}},(0,l.createElement)(b,{fragmentChildren:(0,C.NO)(A,"dropdown-menu-length-5-icon")})))),$({},J({},W({},".slds-dropdown_length-with-icon-7")," ",(0,l.createElement)("br",null)," 7 items"),J({},(0,l.createElement)("div",{style:{height:"21rem",width:"320px"}},(0,l.createElement)(b,{fragmentChildren:(0,C.NO)(A,"dropdown-menu-length-7-icon")})))),$({},J({},W({},".slds-dropdown_length-with-icon-10")," ",(0,l.createElement)("br",null)," 10 items"),J({},(0,l.createElement)("div",{style:{height:"28rem",width:"320px"}},(0,l.createElement)(b,{fragmentChildren:(0,C.NO)(A,"dropdown-menu-length-10-icon")})))))))},G=function(){return(0,r.Qr)(z())}},5206:function(e){e.exports=ReactDOM}},s={};function r(e){var t=s[e];if(void 0!==t)return t.exports;var n=s[e]={id:e,exports:{}};return l[e](n,n.exports,r),n.exports}r.m=l,r.amdO={},e=[],r.O=function(t,n,l,s){if(!n){var a=1/0;for(c=0;c<e.length;c++){n=e[c][0],l=e[c][1],s=e[c][2];for(var o=!0,i=0;i<n.length;i++)(!1&s||a>=s)&&Object.keys(r.O).every(function(e){return r.O[e](n[i])})?n.splice(i--,1):(o=!1,s<a&&(a=s));if(o){e.splice(c--,1);var d=l();void 0!==d&&(t=d)}}return t}s=s||0;for(var c=e.length;c>0&&e[c-1][2]>s;c--)e[c]=e[c-1];e[c]=[n,l,s]},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,{a:t}),t},n=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},r.t=function(e,l){if(1&l&&(e=this(e)),8&l)return e;if("object"==typeof e&&e){if(4&l&&e.__esModule)return e;if(16&l&&"function"==typeof e.then)return e}var s=Object.create(null);r.r(s);var a={};t=t||[null,n({}),n([]),n(n)];for(var o=2&l&&e;("object"==typeof o||"function"==typeof o)&&!~t.indexOf(o);o=n(o))Object.getOwnPropertyNames(o).forEach(function(t){a[t]=function(){return e[t]}});return a.default=function(){return e},r.d(s,a),s},r.d=function(e,t){for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.e=function(){return Promise.resolve()},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.j=9421,function(){var e={9421:0};r.O.j=function(t){return 0===e[t]};var t=function(t,n){var l,s,a=n[0],o=n[1],i=n[2],d=0;if(a.some(function(t){return 0!==e[t]})){for(l in o)r.o(o,l)&&(r.m[l]=o[l]);if(i)var c=i(r)}for(t&&t(n);d<a.length;d++)s=a[d],r.o(e,s)&&e[s]&&e[s][0](),e[s]=0;return r.O(c)},n=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs||[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))}(),r.nc=void 0;var a=r.O(void 0,[3540],function(){return r(3504)});a=r.O(a),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/menus/docs.mdx.js"]=a}();
+var SLDS;!function(){"use strict";var e,t,n,l={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},3504:function(e,t,n){n.r(t),n.d(t,{getContents:function(){return G},getElement:function(){return z}});var l=n(1594),s=n.n(l),r=n(5671),a=n(6547),o=n(3212),i=n(1374),d=n(5619),c=n(4187),m=n.n(c);function u(e){return u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},u(e)}function h(e,t){for(var n=0;n<t.length;n++){var l=t[n];l.enumerable=l.enumerable||!1,l.configurable=!0,"value"in l&&(l.writable=!0),Object.defineProperty(e,p(l.key),l)}}function p(e){var t=function(e){if("object"!=u(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=u(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==u(t)?t:t+""}function E(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(E=function(){return!!e})()}function f(e){return f=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},f(e)}function g(e,t){return g=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},g(e,t)}var b=function(e){function t(){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),function(e,t,n){return t=f(t),function(e,t){if(t&&("object"==u(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}(e,E()?Reflect.construct(t,n||[],f(e).constructor):t.apply(e,n))}(this,t,arguments)}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&g(e,t)}(t,e),n=t,(r=[{key:"render",value:function(){return s().createElement(l.Fragment,null,this.props.fragmentChildren)}}])&&h(n.prototype,r),Object.defineProperty(n,"prototype",{writable:!1}),n;var n,r}(s().Component);b.propTypes={fragmentChildren:m().node.isRequired};var w=n(4760),y=n(8347),_=function(e){return s().createElement("div",{className:"demo-only",style:{height:"260px"}},s().createElement(w.l9,{isOpen:!0},s().createElement(w.W1,{className:"slds-dropdown_left slds-dropdown_small"},s().createElement(w.cO,{className:"slds-dropdown_length-5"},s().createElement(w.Dr,{tabIndex:"0"},"Menu Item One"),s().createElement(w.Dr,null,"Menu Item Two"),s().createElement(w.Dr,null,"Menu Item Three"),s().createElement(w.Dr,null,"Menu Item Four"),s().createElement(w.Dr,null,"Menu Item Five"),s().createElement(w.Dr,null,"Menu Item Six"),s().createElement(w.Dr,null,"Menu Item Seven"),s().createElement(w.Dr,null,"Menu Item Eight"),s().createElement(w.Dr,null,"Menu Item Nine"),s().createElement(w.Dr,null,"Menu Item Ten")))))},v=function(e){return s().createElement("div",{className:"demo-only",style:{height:"300px"}},s().createElement(w.l9,{isOpen:!0},s().createElement(w.W1,{className:"slds-dropdown_left slds-dropdown_small"},s().createElement(w.cO,{className:"slds-dropdown_length-7"},s().createElement(w.Dr,{tabIndex:"0"},"Menu Item One"),s().createElement(w.Dr,null,"Menu Item Two"),s().createElement(w.Dr,null,"Menu Item Three"),s().createElement(w.Dr,null,"Menu Item Four"),s().createElement(w.Dr,null,"Menu Item Five"),s().createElement(w.Dr,null,"Menu Item Six"),s().createElement(w.Dr,null,"Menu Item Seven"),s().createElement(w.Dr,null,"Menu Item Eight"),s().createElement(w.Dr,null,"Menu Item Nine"),s().createElement(w.Dr,null,"Menu Item Ten")))))},I=function(e){return s().createElement("div",{className:"demo-only",style:{height:"430px"}},s().createElement(w.l9,{isOpen:!0},s().createElement(w.W1,{className:"slds-dropdown_left slds-dropdown_small"},s().createElement(w.cO,{className:"slds-dropdown_length-10"},s().createElement(w.Dr,{tabIndex:"0"},"Menu Item One"),s().createElement(w.Dr,null,"Menu Item Two"),s().createElement(w.Dr,null,"Menu Item Three"),s().createElement(w.Dr,null,"Menu Item Four"),s().createElement(w.Dr,null,"Menu Item Five"),s().createElement(w.Dr,null,"Menu Item Six"),s().createElement(w.Dr,null,"Menu Item Seven"),s().createElement(w.Dr,null,"Menu Item Eight"),s().createElement(w.Dr,null,"Menu Item Nine"),s().createElement(w.Dr,null,"Menu Item Ten")))))},x=function(e){return s().createElement("div",{className:"demo-only",style:{height:"260px"}},s().createElement(w.l9,{isOpen:!0},s().createElement(w.W1,{className:"slds-dropdown_left slds-dropdown_small"},s().createElement(w.cO,{className:"slds-dropdown_length-with-icon-5"},s().createElement(w.Dr,{tabIndex:"0"},s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-account slds-m-right_small",sprite:"standard",symbol:"account"}),"Menu Item One"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-approval slds-m-right_small",sprite:"standard",symbol:"approval"}),"Menu Item Two"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-lead slds-m-right_small",sprite:"standard",symbol:"lead"}),"Menu Item Three"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-opportunity slds-m-right_small",sprite:"standard",symbol:"opportunity"}),"Menu Item Four"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-product slds-m-right_small",sprite:"standard",symbol:"product"}),"Menu Item Five"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-account slds-m-right_small",sprite:"standard",symbol:"account"}),"Menu Item Six"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-approval slds-m-right_small",sprite:"standard",symbol:"approval"}),"Menu Item Seven"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-lead slds-m-right_small",sprite:"standard",symbol:"lead"}),"Menu Item Eight"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-opportunity slds-m-right_small",sprite:"standard",symbol:"opportunity"}),"Menu Item Nine"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-product slds-m-right_small",sprite:"standard",symbol:"product"}),"Menu Item Ten")))))},N=function(e){return s().createElement("div",{className:"demo-only",style:{height:"320px"}},s().createElement(w.l9,{isOpen:!0},s().createElement(w.W1,{className:"slds-dropdown_left slds-dropdown_small"},s().createElement(w.cO,{className:"slds-dropdown_length-with-icon-7"},s().createElement(w.Dr,{tabIndex:"0"},s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-account slds-m-right_small",sprite:"standard",symbol:"account"}),"Menu Item One"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-approval slds-m-right_small",sprite:"standard",symbol:"approval"}),"Menu Item Two"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-lead slds-m-right_small",sprite:"standard",symbol:"lead"}),"Menu Item Three"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-opportunity slds-m-right_small",sprite:"standard",symbol:"opportunity"}),"Menu Item Four"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-product slds-m-right_small",sprite:"standard",symbol:"product"}),"Menu Item Five"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-account slds-m-right_small",sprite:"standard",symbol:"account"}),"Menu Item Six"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-approval slds-m-right_small",sprite:"standard",symbol:"approval"}),"Menu Item Seven"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-lead slds-m-right_small",sprite:"standard",symbol:"lead"}),"Menu Item Eight"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-opportunity slds-m-right_small",sprite:"standard",symbol:"opportunity"}),"Menu Item Nine"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-product slds-m-right_small",sprite:"standard",symbol:"product"}),"Menu Item Ten")))))},M=function(e){return s().createElement("div",{className:"demo-only",style:{height:"450px"}},s().createElement(w.l9,{isOpen:!0},s().createElement(w.W1,{className:"slds-dropdown_left slds-dropdown_small"},s().createElement(w.cO,{className:"slds-dropdown_length-with-icon-10"},s().createElement(w.Dr,{tabIndex:"0"},s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-account slds-m-right_small",sprite:"standard",symbol:"account"}),"Menu Item One"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-approval slds-m-right_small",sprite:"standard",symbol:"approval"}),"Menu Item Two"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-lead slds-m-right_small",sprite:"standard",symbol:"lead"}),"Menu Item Three"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-opportunity slds-m-right_small",sprite:"standard",symbol:"opportunity"}),"Menu Item Four"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-product slds-m-right_small",sprite:"standard",symbol:"product"}),"Menu Item Five"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-account slds-m-right_small",sprite:"standard",symbol:"account"}),"Menu Item Six"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-approval slds-m-right_small",sprite:"standard",symbol:"approval"}),"Menu Item Seven"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-lead slds-m-right_small",sprite:"standard",symbol:"lead"}),"Menu Item Eight"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-opportunity slds-m-right_small",sprite:"standard",symbol:"opportunity"}),"Menu Item Nine"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-product slds-m-right_small",sprite:"standard",symbol:"product"}),"Menu Item Ten")))))},A=[{id:"dropdown-menu-length-5",label:"5 items",element:s().createElement(_,null)},{id:"dropdown-menu-length-7",label:"7 items",element:s().createElement(v,null)},{id:"dropdown-menu-length-10",label:"10 items",element:s().createElement(I,null)},{id:"dropdown-menu-length-5-icon",label:"5 items with icon",element:s().createElement(x,null)},{id:"dropdown-menu-length-7-icon",label:"7 items with icon",element:s().createElement(N,null)},{id:"dropdown-menu-length-10-icon",label:"10 items with icon",element:s().createElement(M,null)}],S=n(942),O=n.n(S),D=["ariaExpanded","className","children","iconRight","itemName","tabIndex","title","submenuClassnames"];function T(){return T=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var l in n)({}).hasOwnProperty.call(n,l)&&(e[l]=n[l])}return e},T.apply(null,arguments)}var k=s().createElement(y.A,{className:"slds-icon slds-icon_x-small slds-icon-text-default slds-m-left_small slds-shrink-none",sprite:"utility",symbol:"right"}),j=function(e){var t=e.ariaExpanded,n=e.className,l=(e.children,e.iconRight),r=e.itemName,a=e.tabIndex,o=e.title,i=e.submenuClassnames,d=function(e,t){if(null==e)return{};var n,l,s=function(e,t){if(null==e)return{};var n={};for(var l in e)if({}.hasOwnProperty.call(e,l)){if(-1!==t.indexOf(l))continue;n[l]=e[l]}return n}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(l=0;l<r.length;l++)n=r[l],-1===t.indexOf(n)&&{}.propertyIsEnumerable.call(e,n)&&(s[n]=e[n])}return s}(e,D);return s().createElement("li",T({},d,{className:O()("slds-dropdown__item slds-has-submenu",n),role:"presentation"}),s().createElement("a",{role:"menuitem",href:"#","aria-haspopup":"true","aria-expanded":t,tabIndex:a||"-1",onClick:function(e){return e.preventDefault()}},s().createElement("span",{className:"slds-truncate",title:o||r},e.itemName),l||null),s().createElement(w.W1,{className:O()("slds-dropdown_submenu",i)},s().createElement(w.cO,{ariaLabel:r},s().createElement(w.Dr,{tabIndex:"0"},"Submenu Item One"),s().createElement(w.Dr,null,"Submenu Item Two"),s().createElement(w.Dr,null,"Submenu Item Three"),s().createElement("li",{className:"slds-has-divider_top-space",role:"separator"}),s().createElement(w.Dr,null,"Submenu Item Four"))))},P=function(e){var t=e.ariaExpanded,n=e.parentIsOpen,l=e.submenuClassnames;return s().createElement(w.l9,{isOpen:n},s().createElement(w.W1,{className:"slds-dropdown_left"},s().createElement(w.cO,{ariaLabel:"Show More"},s().createElement(w.Dr,{tabIndex:"0"},"Menu Item One"),s().createElement(w.Dr,null,"Menu Item Two"),s().createElement(j,{ariaExpanded:t,iconRight:k,itemName:"Menu Item Three",submenuClassnames:l||"slds-dropdown_submenu-right"}))))},C=(n(769),n(806)),W=r.XB.code,B=r.XB.h2,R=r.XB.h3,F=r.XB.h4,L=r.XB.li,X=r.XB.p,V=r.XB.table,H=r.XB.tbody,J=r.XB.td,K=r.XB.th,q=r.XB.thead,$=r.XB.tr,Q=r.XB.ul,z=function(){return(0,l.createElement)(r.Ay,{},(0,l.createElement)("div",{className:"doc lead"},"A Menu offers a list of actions or functions that a user can access."),(0,l.createElement)(a.A,{exampleOnly:!0,demoStyles:"height: 150px;"},(0,l.createElement)(w.Bu,{hasLeftIcon:!0})),B({id:"About-Menu"},"About Menu"),X({},"The unordered menu list ",W({},"<ul>")," with ",W({},'role="menu"')," should be contained in a ",W({},"<div>")," with the class ",W({},".slds-dropdown"),"."),X({},"The target HTML element and dropdown need to be wrapped in the class ",W({},".slds-dropdown-trigger dropdown-trigger_click"),"."),R({id:"Accessibility"},"Accessibility"),F({id:"Markup"},"Markup"),Q({},L({},"The menu trigger is a focusable element (",W({},"<a>")," or ",W({},"<button>"),") with ",W({},'aria-haspopup="true"')),L({},"The menu trigger has the ",W({},"aria-expanded")," attribute applied and the value is set to ",W({},'"true"')," or ",W({},'"false"')," depending on if the menu is open or not."),L({},"The menu has ",W({},'role="menu"')," and an ",W({},"aria-label")," attribute whose value is the name of the menu trigger"),L({},"The menu items have ",W({},'role="menuitem"'),", ",W({},'role="menuitemcheckbox"'),", or ",W({},'role="menuitemradio"'),", depending on the selection options")),F({id:"Keyboard-Interactions"},"Keyboard Interactions"),X({},"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."),Q({},L({},"Arrow keys cycle focus through menu items (including disabled menu items)"),L({},"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"),L({},"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"),L({},"Tab key closes the menu and moves focus to the next focusable element on the page"),L({},"Esc key closes the menu and moves focus back to the menu trigger"),L({},"Any character key moves focus to the next menu item that starts with that character, if applicable")),B({id:"Base"},"Base"),(0,l.createElement)(i.A,{title:"Menu Base"},(0,l.createElement)(a.A,{demoStyles:"height: 200px;"},(0,l.createElement)(w.Vf,{className:"slds-dropdown_left"}))),B({id:"With-Subheaders"},"With Subheaders"),(0,l.createElement)(d.A,{type:"a11y",header:"Accessibility Note"},(0,l.createElement)("p",null,"The ",(0,l.createElement)("code",null,'role="group"')," on nested ",(0,l.createElement)("code",null,"<ul>")," elements groups subheadings with their submenu items and the ",(0,l.createElement)("code",null,"aria-labelledby")," attribute on these nested ",(0,l.createElement)("code",null,"<ul>")," elements references the ",(0,l.createElement)("code",null,"id")," of the corresponding subheading. A subheading must have ",(0,l.createElement)("code",null,'role="presentation"')," on the"," ",(0,l.createElement)("code",null,"<li>")," and the content inside the ",(0,l.createElement)("code",null,"<li>")," ","should be in a ",(0,l.createElement)("code",null,"<span>"),".")),(0,l.createElement)(o.A,{toggleCode:!1},(0,l.createElement)("li",{className:"slds-dropdown__header slds-truncate",title:"Menu Sub Heading",role:"presentation"},(0,l.createElement)("span",null,"Menu Sub Heading"))),(0,l.createElement)(i.A,{title:"Menu with Subheaders"},(0,l.createElement)(a.A,{demoStyles:"height: 300px;"},(0,l.createElement)(w.iK,null))),B({id:"With-Icons"},"With Icons"),X({},"Icons can be included on either the left, right, or both sides of an option."),(0,l.createElement)(d.A,{type:"a11y",header:"Accessibility Note"},(0,l.createElement)("p",null,"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.")),R({id:"Icon-on-the-Left"},"Icon on the Left"),(0,l.createElement)(i.A,{title:"Menu with Icon Left"},(0,l.createElement)(a.A,{demoStyles:"height: 150px;"},(0,l.createElement)(w.Bu,{hasLeftIcon:!0}))),R({id:"Icon-on-the-Right"},"Icon on the Right"),(0,l.createElement)(i.A,{title:"Menu with Icon Right"},(0,l.createElement)(a.A,{demoStyles:"height: 150px;"},(0,l.createElement)(w._l,null))),R({id:"Double-Icon"},"Double Icon"),(0,l.createElement)(d.A,{type:"a11y",header:"Accessibility Note"},(0,l.createElement)("p",null,"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.A,{title:"Menu with Double Icon"},(0,l.createElement)(a.A,{demoStyles:"height: 150px;"},(0,l.createElement)(w.pA,null))),B({id:"With-Selectable-Items"},"With Selectable Items"),X({},"When creating a menu with selectable items:"),Q({},L({},"All selectable items need the proper role, either ",W({},'role="menuitemcheckbox"')," or ",W({},'role="menuitemradio"')),L({},"All selectable items should contain an icon"),L({},"Each icon must have the class ",W({},"slds-icon_selected")," on the ",W({},"<svg>"),Q({},L({},"This hides icons of non-selected items"))),L({},"Items that have been selected need ",W({},'aria-checked="true"')," on the ",W({},"<a>")," element")),(0,l.createElement)(d.A,{type:"a11y",header:"Revealing Icons for Selected Items"},(0,l.createElement)("p",null,"A selected item reveals its icon when the class"," ",(0,l.createElement)("code",null,"slds-is-selected")," is applied to the ",(0,l.createElement)("code",null,"<li>")," and"," ",(0,l.createElement)("code",null,'aria-checked="true"')," is applied to its"," ",(0,l.createElement)("code",null,"menuitemcheckbox")," or ",(0,l.createElement)("code",null,"menuitemradio")," child.")),(0,l.createElement)(o.A,{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.A,{title:"Menu with Selectable Icon Left"},(0,l.createElement)(a.A,{demoStyles:"height: 150px;"},(0,l.createElement)(w.Bu,{isSelectable:!0}))),B({id:"With-Status-Notifications"},"With Status Notifications"),(0,l.createElement)(a.A,{demoStyles:"height: 250px;"},(0,l.createElement)(w.Co,null)),X({},"To enable menu items to reflect status level notifications like Error, Success and Warning, place a modifier class onto the ",W({},"menuitem")," that has the offending notification."),X({},"The class is based on the ",W({},"slds-has-${level}")," pattern, where ",W({},"${level}")," corresponds to the level you wish to set."),Q({},L({},W({},"slds-has-error")),L({},W({},"slds-has-success")),L({},W({},"slds-has-warning"))),(0,l.createElement)(o.A,{toggleCode:!1},(0,l.createElement)("a",{className:"slds-has-warning",href:"#",onClick:function(e){return e.preventDefault()},role:"menuitem",tabIndex:"-1"},"...")),(0,l.createElement)(d.A,{type:"note",header:"Warning Icon"},(0,l.createElement)("p",null,"For warning level menu items it is required that you switch the icon to use the ",(0,l.createElement)("code",null,"currentColor")," variant for icons.")),B({id:"With-Overflow-Scrolling"},"With Overflow Scrolling"),(0,l.createElement)(i.A,{title:"Menu with Overflow Scrolling"},(0,l.createElement)(a.A,{demoStyles:"height: 220px;"},(0,l.createElement)(w.XP,{className:"slds-dropdown_left slds-dropdown_length-5"}))),X({},"To force overflow scrolling after either 5, 7, or 10 items, add the modifier ",W({},"slds-dropdown_length-*")," to the ",W({},"<div>")," with class ",W({},"slds-dropdown")," where the ",W({},"*")," is either 5, 7, or 10."),(0,l.createElement)(o.A,{toggleCode:!1},(0,l.createElement)("div",{className:"slds-dropdown slds-dropdown_length-5"},"...")),R({id:"Scrolling-for-Menu-Items-with-Icons"},"Scrolling for Menu Items with Icons"),X({},"To force overflow scrolling after either 5, 7, or 10 items with icons, add the modifier ",W({},"slds-dropdown_length-with-icon-*")," to the ",W({},"<div>")," with class ",W({},"slds-dropdown")," where the ",W({},"*")," is either 5, 7, or 10."),(0,l.createElement)(a.A,{demoStyles:"height: 250px;"},(0,l.createElement)(w.XP,{isSelectable:!0,isSelected:"true",className:"slds-dropdown_left slds-dropdown_length-with-icon-5"})),B({id:"With-a-Submenu"},"With a Submenu"),X({},"To create a menu with a submenu, add the ",W({},"slds-has-submenu")," class to the list item, ",W({},"<li>"),", that will open the submenu."),(0,l.createElement)(d.A,{type:"a11y",header:"Accessibility Note"},(0,l.createElement)("p",null,"Any menu item that opens a submenu must have ",(0,l.createElement)("code",null,'aria-haspop="true"')," ","on the ",(0,l.createElement)("code",null,"<a>")," within the ",(0,l.createElement)("code",null,"<li>"),". In order to open the submenu, set ",(0,l.createElement)("code",null,"aria-expanded")," to ",(0,l.createElement)("code",null,"true")," on that ",(0,l.createElement)("code",null,"<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 ",(0,l.createElement)("code",null,'role="menu"')," and an ",(0,l.createElement)("code",null,"aria-label")," ","attribute whose value matches the name of the ",(0,l.createElement)("code",null,"<li>")," that opened the submenu.")),(0,l.createElement)(o.A,{toggleCode:!1},(0,l.createElement)("li",{className:"slds-dropdown__item slds-has-submenu",role:"presentation"},(0,l.createElement)("a",{role:"menuitem",href:"#",onClick:function(e){return e.preventDefault()},"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"},"...")))),R({id:"Submenu-to-Right"},"Submenu to Right"),X({},"To open the submenu to the right of the main menu, add ",W({},"slds-dropdown_submenu-right")," to the ",W({},"<div>")," with the ",W({},"slds-dropdown_submenu")," class."),(0,l.createElement)(i.A,{title:"Menu with Submenu Right"},(0,l.createElement)(a.A,{demoStyles:"height: 300px;"},(0,l.createElement)(P,{ariaExpanded:!0,parentIsOpen:!0}))),R({id:"Submenu-to-Left"},"Submenu to Left"),X({},"To open the submenu to the left, add ",W({},"slds-dropdown_submenu-left")," to the ",W({},"<div>")," with the ",W({},"slds-dropdown_submenu")," class."),(0,l.createElement)(i.A,{title:"Menu with Submenu Left"},(0,l.createElement)(a.A,{demoStyles:"height: 300px; margin-left: 150px;"},(0,l.createElement)(P,{ariaExpanded:!0,parentIsOpen:!0,submenuClassnames:"slds-dropdown_submenu-left"}))),B({id:"Overflow-Menu-with-Actions"},"Overflow Menu with Actions"),X({},"For an overflow of action items, use the overflow menu with actions styling by adding the modifier ",W({},"slds-dropdown_actions")," to the ",W({},"div")," with class ",W({},"slds-dropdown"),". This pattern is typically used in conjunction with a button group."),(0,l.createElement)(i.A,{title:"Menu with Action Overflow"},(0,l.createElement)(a.A,{demoStyles:"height: 150px;"},(0,l.createElement)(w.hu,{isOpen:!0}))),B({id:"Positioning"},"Positioning"),X({},"There are 3 options for the positioning of the menu dropdown -- left, right, and bottom. To access these options, add a modifier to the ",W({},"<div>")," with class name ",W({},"slds-dropdown"),". For the standard positioning where the dropdown aligns with the left side of the dropdown trigger, use ",W({},"slds-dropdown_left"),", as seen above."),(0,l.createElement)(o.A,{toggleCode:!1},(0,l.createElement)("div",{className:"slds-dropdown slds-dropdown_left"},"...")),R({id:"Positioned-Right"},"Positioned Right"),X({},"To position the dropdown to align with the right of the dropdown trigger, use ",W({},"slds-dropdown_right"),"."),(0,l.createElement)(i.A,{title:"Menu Positioned Right"},(0,l.createElement)(a.A,{demoStyles:"height: 200px; margin-left: 90px;"},(0,l.createElement)(w.Vf,{className:"slds-dropdown_right"}))),R({id:"Positioned-Bottom"},"Positioned Bottom"),X({},"To position the dropdown to sit on top of the dropdown trigger, use ",W({},"slds-dropdown_bottom"),"."),(0,l.createElement)(i.A,{title:"Menu Positioned Bottom"},(0,l.createElement)(a.A,{demoStyles:"margin-left: 45px; margin-top: 163px;"},(0,l.createElement)(w.Vf,{className:"slds-dropdown_bottom"}))),B({id:"Width"},"Width"),X({},"To adjust the width of the menu dropdown add modifier ",W({},"slds-dropdown_*")," to the ",W({},"<div>")," with class ",W({},"slds-dropdown")," where the ",W({},"*")," is ",W({},"xx-small"),", ",W({},"x-small"),", ",W({},"small"),", ",W({},"medium"),", or ",W({},"large"),"."),(0,l.createElement)(o.A,{toggleCode:!1},(0,l.createElement)("div",{className:"slds-dropdown slds-dropdown_left slds-dropdown_medium"},"...")),V({},q({},$({},K({},"Modifier"),K({},"Example"))),H({},$({},J({},W({},".slds-dropdown_xx-small")," ",(0,l.createElement)("br",null)," 6rem / 96px"),J({},(0,l.createElement)("div",{style:{height:"200px",width:"320px"}},(0,l.createElement)(w.Vf,{className:"slds-dropdown_left slds-dropdown_xx-small"})))),$({},J({},W({},".slds-dropdown_x-small")," ",(0,l.createElement)("br",null)," 12rem / 192px"),J({},(0,l.createElement)("div",{style:{height:"200px",width:"320px"}},(0,l.createElement)(w.Vf,{className:"slds-dropdown_left slds-dropdown_x-small"})))),$({},J({},W({},".slds-dropdown_small")," ",(0,l.createElement)("br",null)," 15rem / 240px"),J({},(0,l.createElement)("div",{style:{height:"200px",width:"320px"}},(0,l.createElement)(w.Vf,{className:"slds-dropdown_left slds-dropdown_small"})))),$({},J({},W({},".slds-dropdown_medium")," ",(0,l.createElement)("br",null)," 20rem / 320px"),J({},(0,l.createElement)("div",{style:{height:"200px",width:"320px"}},(0,l.createElement)(w.Vf,{className:"slds-dropdown_left slds-dropdown_medium"})))),$({},J({},W({},".slds-dropdown_large")," ",(0,l.createElement)("br",null)," 25rem / 400px"),J({},(0,l.createElement)("div",{style:{height:"200px",width:"320px"}},(0,l.createElement)(w.Vf,{className:"slds-dropdown_left slds-dropdown_large"})))))),B({id:"Height"},"Height"),X({},"To adjust the length of visible menu dropdown items before overflow scrolling activates, add modifier ",W({},"slds-dropdown_length-*"),", or when using icons, ",W({},"slds-dropdown_length-with-icon-*"),", where the ",W({},"*")," is ",W({},"5"),", ",W({},"7"),", ",W({},"10"),". Apply the height classes to both the ",W({},"<div>"),"s with class ",W({},"slds-dropdown")," and ",W({},"slds-dropdown__list")),(0,l.createElement)(o.A,{toggleCode:!1},(0,l.createElement)("div",{className:"slds-dropdown slds-dropdown_left slds-dropdown_length-7"},(0,l.createElement)("ul",{class:"slds-dropdown__list slds-dropdown_length-7"},"..."))),V({},q({},$({},K({},"Modifier"),K({},"Example"))),H({},$({},J({},W({},".slds-dropdown_length-5")," ",(0,l.createElement)("br",null)," 5 items"),J({},(0,l.createElement)("div",{style:{height:"16rem",width:"320px"}},(0,l.createElement)(b,{fragmentChildren:(0,C.NO)(A,"dropdown-menu-length-5")})))),$({},J({},W({},".slds-dropdown_length-7")," ",(0,l.createElement)("br",null)," 7 items"),J({},(0,l.createElement)("div",{style:{height:"21rem",width:"320px"}},(0,l.createElement)(b,{fragmentChildren:(0,C.NO)(A,"dropdown-menu-length-7")})))),$({},J({},W({},".slds-dropdown_length-10")," ",(0,l.createElement)("br",null)," 10 items"),J({},(0,l.createElement)("div",{style:{height:"26rem",width:"320px"}},(0,l.createElement)(b,{fragmentChildren:(0,C.NO)(A,"dropdown-menu-length-10")})))),$({},J({},W({},".slds-dropdown_length-with-icon-5")," ",(0,l.createElement)("br",null)," 5 items"),J({},(0,l.createElement)("div",{style:{height:"16rem",width:"320px"}},(0,l.createElement)(b,{fragmentChildren:(0,C.NO)(A,"dropdown-menu-length-5-icon")})))),$({},J({},W({},".slds-dropdown_length-with-icon-7")," ",(0,l.createElement)("br",null)," 7 items"),J({},(0,l.createElement)("div",{style:{height:"21rem",width:"320px"}},(0,l.createElement)(b,{fragmentChildren:(0,C.NO)(A,"dropdown-menu-length-7-icon")})))),$({},J({},W({},".slds-dropdown_length-with-icon-10")," ",(0,l.createElement)("br",null)," 10 items"),J({},(0,l.createElement)("div",{style:{height:"28rem",width:"320px"}},(0,l.createElement)(b,{fragmentChildren:(0,C.NO)(A,"dropdown-menu-length-10-icon")})))))))},G=function(){return(0,r.Qr)(z())}},5206:function(e){e.exports=ReactDOM}},s={};function r(e){var t=s[e];if(void 0!==t)return t.exports;var n=s[e]={id:e,exports:{}};return l[e](n,n.exports,r),n.exports}r.m=l,r.amdO={},e=[],r.O=function(t,n,l,s){if(!n){var a=1/0;for(c=0;c<e.length;c++){n=e[c][0],l=e[c][1],s=e[c][2];for(var o=!0,i=0;i<n.length;i++)(!1&s||a>=s)&&Object.keys(r.O).every(function(e){return r.O[e](n[i])})?n.splice(i--,1):(o=!1,s<a&&(a=s));if(o){e.splice(c--,1);var d=l();void 0!==d&&(t=d)}}return t}s=s||0;for(var c=e.length;c>0&&e[c-1][2]>s;c--)e[c]=e[c-1];e[c]=[n,l,s]},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,{a:t}),t},n=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},r.t=function(e,l){if(1&l&&(e=this(e)),8&l)return e;if("object"==typeof e&&e){if(4&l&&e.__esModule)return e;if(16&l&&"function"==typeof e.then)return e}var s=Object.create(null);r.r(s);var a={};t=t||[null,n({}),n([]),n(n)];for(var o=2&l&&e;("object"==typeof o||"function"==typeof o)&&!~t.indexOf(o);o=n(o))Object.getOwnPropertyNames(o).forEach(function(t){a[t]=function(){return e[t]}});return a.default=function(){return e},r.d(s,a),s},r.d=function(e,t){for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.e=function(){return Promise.resolve()},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.j=9421,function(){var e={9421:0};r.O.j=function(t){return 0===e[t]};var t=function(t,n){var l,s,a=n[0],o=n[1],i=n[2],d=0;if(a.some(function(t){return 0!==e[t]})){for(l in o)r.o(o,l)&&(r.m[l]=o[l]);if(i)var c=i(r)}for(t&&t(n);d<a.length;d++)s=a[d],r.o(e,s)&&e[s]&&e[s][0](),e[s]=0;return r.O(c)},n=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs||[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))}(),r.nc=void 0;var a=r.O(void 0,[3540],function(){return r(3504)});a=r.O(a),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/menus/docs.mdx.js"]=a}();

package/__internal/chunked/docs/ui/components/page-headers/docs.mdx.js

@@ -1 +1 @@
-var SLDS;!function(){"use strict";var e,t,s,l={952:function(e,t,s){s.r(t),s.d(t,{getContents:function(){return oe},getElement:function(){return ie}});var l=s(1594),n=s.n(l),a=s(5671),r=s(6547),i=(s(3212),s(5619)),o=s(806),c=s(7412),d=s.n(c),m=s(942),u=s.n(m),p=s(6955),h=s(4760),E=s(7852),f=s(8522),b=s(4216),y=function(e){return n().createElement(f.b$,{symbol:e.type,className:"slds-page-header__icon",assistiveText:e.assistiveText,title:e.title})};y.propTypes={assistiveText:d().oneOfType([d().string,d().bool]),title:d().oneOfType([d().string,d().bool]),type:d().string.isRequired};var g=function(e){return n().createElement("div",{className:u()("slds-page-header",{"slds-page-header_vertical":e.isVertical,"slds-page-header_related-list":e.isRelatedList,"slds-page-header_record-home":e.isRecordHome})},e.children)};g.propTypes={children:d().node,isRelatedList:d().bool,isVertical:d().bool,isRecordHome:d().bool,showTooltip:d().bool};var v=function(e){return n().createElement("div",{className:u()("slds-page-header__row",{"slds-page-header__row_gutters":e.hasGutters})},e.children)};v.propTypes={children:d().node,hasGutters:d().bool};var _=function(e){return n().createElement("div",{className:u()({"slds-page-header__col-actions":"actions"===e.type,"slds-page-header__col-controls":"controls"===e.type,"slds-page-header__col-details":"details"===e.type,"slds-page-header__col-meta":"meta"===e.type,"slds-page-header__col-title":"title"===e.type})},e.children)};_.propTypes={children:d().node,type:d().string};var N=function(e){return n().createElement(E.A,{figureLeft:e.symbol&&n().createElement(y,{assistiveText:!e.objectName&&e.symbol,title:!e.objectName&&e.symbol,type:e.symbol})},n().createElement("div",{className:"slds-page-header__name"},n().createElement("div",{className:"slds-page-header__name-title"},n().createElement("h1",null,e.objectName&&!e.metaText?n().createElement("span",null,e.objectName):null,n().createElement("span",{className:u()("slds-page-header__title",!e.isVertical&&"slds-truncate",e.isVertical&&"slds-hyphenate"),title:e.titleText},e.titleText))),e.hasSwitcher&&n().createElement("div",{className:"slds-page-header__name-switcher slds-is-relative"},n().createElement(h.l9,{triggerIcon:n().createElement(p.A,{"aria-haspopup":"true",assistiveText:"Switch list view",className:"slds-button_icon-small",iconClassName:"slds-icon_x-small",symbol:"down",title:"Switch list view"})}),n().createElement(b.m_,{className:u()("slds-nubbin_bottom-left",!e.showTooltip&&"slds-fall-into-ground"),id:"dropdown-label",style:{position:"absolute",left:"-12px",top:"-48px",width:"190px"}},e.fieldLevelMessage||"Some helpful information."))),e.metaText&&n().createElement("p",{className:"slds-page-header__name-meta"},e.metaText))};N.propTypes={symbol:d().string,objectName:d().string,hasSwitcher:d().bool,metaText:d().string,titleText:d().string.isRequired,isVertical:d().bool};var T=function(e){return n().createElement("p",{className:"slds-page-header__meta-text"},e.children)};T.propTypes={children:d().node};var w=function(e){return n().createElement("div",{className:"slds-page-header__controls"},e.children)};w.propTypes={children:d().node};var x=function(e){return n().createElement("div",{className:"slds-page-header__control"},e.children)};x.propTypes={children:d().node};var A=function(e){return n().createElement("ul",{className:"slds-page-header__detail-row"},e.children)};A.propTypes={children:d().node};var O=function(e){return n().createElement("ul",{className:"slds-page-header__detail-list"},e.children)};O.propTypes={children:d().node};var S=function(e){return n().createElement("li",{className:"slds-page-header__detail-block"},e.children)};S.propTypes={children:d().node};var C=function(e){return n().createElement("li",{className:"slds-page-header__detail-item"},e.children)};C.propTypes={children:d().node};var L=function(e){return n().createElement("div",{className:u()("slds-text-title",!e.isVertical&&"slds-truncate"),title:e.title},e.children)};L.propTypes={children:d().node,title:d().string,isVertical:d().bool};var j=function(e){return n().createElement("div",{className:e.isVertical?null:"slds-truncate",title:e.title},e.children)};j.propTypes={children:d().node,title:d().string,isVertical:d().bool};var D=function(e){return n().createElement(g,null,n().createElement(v,null,n().createElement(_,{type:"title"},n().createElement(N,{titleText:"Rohde Corp - 80,000 Widgets",metaText:"Mark Jaeckal • Unlimited Customer • 11/13/15",symbol:"opportunity"}))))},M=n().createElement(D,null),V=s(9825),X=s(1412),k=s(3011),R=function(e){return n().createElement(g,null,n().createElement(v,null,n().createElement(_,{type:"title"},n().createElement(N,{symbol:"opportunity",objectName:"Opportunities",titleText:"Recently Viewed",hasSwitcher:!0,showTooltip:e.showTooltip,fieldLevelMessage:e.fieldLevelMessage})),n().createElement(_,{type:"actions"},n().createElement(w,null,n().createElement(x,null,n().createElement(X.GW,null,n().createElement(X.NX,null,n().createElement(V.$n,{isNeutral:!0},"New")),n().createElement(X.NX,null,n().createElement(h.l9,{triggerIcon:n().createElement(p.A,{className:"slds-button_icon-border-filled",symbol:"down","aria-haspopup":"true",assistiveText:"More Actions",title:"More Actions"})}))))))),n().createElement(v,null,n().createElement(_,{type:"meta"},n().createElement(T,null,"10 items • Updated 13 minutes ago")),n().createElement(_,{type:"controls"},n().createElement(w,null,n().createElement(x,null,n().createElement(h.l9,{triggerIcon:n().createElement(p.A,{className:"slds-button_icon-more",symbol:"settings",hasDropdown:!0,assistiveText:"List View Controls",title:"List View Controls"})})),n().createElement(x,null,n().createElement(h.l9,{triggerIcon:n().createElement(p.A,{className:"slds-button_icon-more",symbol:"table",hasDropdown:!0,assistiveText:"Change view",title:"Change view"})})),n().createElement(x,null,n().createElement(p.A,{className:"slds-button_icon-border-filled",symbol:"edit",assistiveText:"Edit List",title:"Edit List"})),n().createElement(x,null,n().createElement(p.A,{className:"slds-button_icon-border-filled",symbol:"refresh",assistiveText:"Refresh List",title:"Refresh List"})),n().createElement(x,null,n().createElement(X.GW,null,n().createElement(X.NX,null,n().createElement(p.A,{className:"slds-button_icon-border-filled",symbol:"chart",assistiveText:"Charts",title:"Charts"})),n().createElement(X.NX,null,n().createElement(p.A,{className:"slds-button_icon-border-filled",symbol:"filterList",assistiveText:"Filters",title:"Filters"}))))))))},F=n().createElement(R,null),I=[{id:"base-extra-long",label:"Base with extra long name",element:n().createElement(g,null,n().createElement(v,null,n().createElement(_,{type:"title"},n().createElement(N,{symbol:"opportunity",objectName:"Opportunities",titleText:"Recently Viewed listssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss",hasSwitcher:!0})),n().createElement(_,{type:"actions"},n().createElement(w,null,n().createElement(x,null,n().createElement(X.GW,null,n().createElement(X.NX,null,n().createElement(V.$n,{isNeutral:!0},"New")),n().createElement(X.NX,null,n().createElement(p.A,{className:"slds-button_icon-border-filled",symbol:"down","aria-haspopup":"true",assistiveText:"More Actions",title:"More Actions"}))))))),n().createElement(v,null,n().createElement(_,{type:"meta"},n().createElement(T,null,"10 items • Updated 13 minutes ago")),n().createElement(_,{type:"controls"},n().createElement(w,null,n().createElement(x,null,n().createElement(h.l9,{triggerIcon:n().createElement(p.A,{className:"slds-button_icon-more",symbol:"settings",hasDropdown:!0,assistiveText:"List View Controls",title:"List View Controls"})})),n().createElement(x,null,n().createElement(h.l9,{triggerIcon:n().createElement(p.A,{className:"slds-button_icon-more",symbol:"table",hasDropdown:!0,assistiveText:"Change view",title:"Change view"})})),n().createElement(x,null,n().createElement(p.A,{className:"slds-button_icon-border-filled",symbol:"edit",assistiveText:"Edit List",title:"Edit List"})),n().createElement(x,null,n().createElement(p.A,{className:"slds-button_icon-border-filled",symbol:"refresh",assistiveText:"Refresh List",title:"Refresh List"})),n().createElement(x,null,n().createElement(X.GW,null,n().createElement(X.NX,null,n().createElement(p.A,{className:"slds-button_icon-border-filled",symbol:"chart",assistiveText:"Charts",title:"Charts"})),n().createElement(X.NX,null,n().createElement(p.A,{className:"slds-button_icon-border-filled",symbol:"filterList",assistiveText:"Filters",title:"Filters"}))))))))},{id:"base-with-tooltip-open",label:"Base with tooltip open",element:n().createElement(R,{showTooltip:!0,fieldLevelMessage:"Change View for the account"})},{id:"card",label:"Inside a card",element:n().createElement(k.Ay,null,n().createElement(R,null))},{id:"tab-card",label:"Inside a tabs card",element:n().createElement("div",{className:"slds-tabs_card"},n().createElement(R,null))}],W=s(8347);function B(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var s=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=s){var l,n,a,r,i=[],o=!0,c=!1;try{if(a=(s=s.call(e)).next,0===t){if(Object(s)!==s)return;o=!1}else for(;!(o=(l=a.call(s)).done)&&(i.push(l.value),i.length!==t);o=!0);}catch(e){c=!0,n=e}finally{try{if(!o&&null!=s.return&&(r=s.return(),Object(r)!==r))return}finally{if(c)throw n}}return i}}(e,t)||function(e,t){if(e){if("string"==typeof e)return P(e,t);var s={}.toString.call(e).slice(8,-1);return"Object"===s&&e.constructor&&(s=e.constructor.name),"Map"===s||"Set"===s?Array.from(e):"Arguments"===s||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(s)?P(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function P(e,t){(null==t||t>e.length)&&(t=e.length);for(var s=0,l=Array(t);s<t;s++)l[s]=e[s];return l}var G=function(e){var t=e.className,s=e.disabled,a=e.isNotSelected,r=e.isSelected,i=e.isSelectedClicked,o=B((0,l.useState)(void 0!==a&&!1===Boolean(a)||r||i),2),c=o[0],d=o[1],m=B((0,l.useState)(i),2),p=m[0],h=m[1];return n().createElement(V.$n,{className:u()("slds-button_stateful",t,{"slds-not-selected":!c,"slds-is-selected":c&&!p,"slds-is-selected-clicked":c&&p}),disabled:s,"aria-live":"assertive","aria-pressed":Boolean(c).toString(),isNeutral:!0,onBlur:function(){return h(!1)},onFocus:function(){return h(!0)},onClick:function(){return d(!c)}},n().createElement("span",{className:"slds-text-not-selected"},n().createElement(W.A,{className:"slds-button__icon slds-button__icon_small slds-button__icon_left",sprite:"utility",symbol:"add"}),"Follow"),n().createElement("span",{className:"slds-text-selected"},n().createElement(W.A,{className:"slds-button__icon slds-button__icon_small slds-button__icon_left",sprite:"utility",symbol:"check"}),"Following"),n().createElement("span",{className:"slds-text-selected-focus"},n().createElement(W.A,{className:"slds-button__icon slds-button__icon_small slds-button__icon_left",sprite:"utility",symbol:"close"}),"Unfollow"))};G.propTypes={className:d().string,disabled:d().bool,isNotSelected:d().bool,isSelected:d().bool,isSelectedClicked:d().bool};var H=function(e){return n().createElement(g,{isRecordHome:!0},n().createElement(v,null,n().createElement(_,{type:"title"},n().createElement(N,{symbol:"opportunity",objectName:"Opportunity",titleText:"Acme - 1,200 Widgets"})),n().createElement(_,{type:"actions"},n().createElement(w,null,n().createElement(x,null,n().createElement(G,{isNotSelected:!0,isNeutral:!0})),n().createElement(x,null,n().createElement(X.GW,null,n().createElement(X.NX,null,n().createElement(V.$n,{isNeutral:!0},"Edit")),n().createElement(X.NX,null,n().createElement(V.$n,{isNeutral:!0},"Delete")),n().createElement(X.NX,null,n().createElement(V.$n,{isNeutral:!0},"Clone")),n().createElement(X.NX,null,n().createElement(h.l9,{triggerIcon:n().createElement(p.A,{className:"slds-button_icon-border-filled",symbol:"down","aria-haspopup":"true",assistiveText:"More Actions",title:"More Actions"})}))))))),n().createElement(v,{hasGutters:!0},n().createElement(_,{type:"details"},n().createElement(A,null,n().createElement(S,null,n().createElement(L,{title:"Field 1"},"Field 1"),n().createElement(j,{title:"Description that demonstrates truncation with a long text field."},"Description that demonstrates truncation with a long text field.")),n().createElement(S,null,n().createElement(L,{title:"Field 2 (3)"},"Field 2 (3)",n().createElement(h.l9,{triggerIcon:n().createElement(p.A,{className:"slds-button_icon",iconClassName:"slds-button__icon_small",symbol:"down","aria-haspopup":"true",assistiveText:"More Actions",title:"More Actions"})})),n().createElement(j,{title:"Multiple Values"},"Multiple Values")),n().createElement(S,null,n().createElement(L,{title:"Field 3"},"Field 3"),n().createElement(j,{title:"Hyperlink"},n().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Hyperlink"))),n().createElement(S,null,n().createElement(L,{title:"Field 4"},"Field 4"),n().createElement(j,{title:"Description (2-line truncation—must use JS to truncate)."},"Description (2-line truncati..."))))))},$=n().createElement(H,null),J=s(2937),U=function(e){return n().createElement("div",{className:"demo-only",style:{width:"300px"}},n().createElement(g,{isVertical:!0},n().createElement(N,{symbol:"opportunity",titleText:"Burlington Textile Weaving Plant Generator",isVertical:!0}),n().createElement(w,null,n().createElement(G,{isNeutral:!0,isNotSelected:!0}),n().createElement(X.GW,null,n().createElement(X.NX,null,n().createElement(V.$n,{isNeutral:!0},"Edit")),n().createElement(X.NX,null,n().createElement(V.$n,{isNeutral:!0},"Delete")),n().createElement(X.NX,null,n().createElement(p.A,{className:"slds-button_icon-border-filled",symbol:"down","aria-haspopup":"true",assistiveText:"More Actions",title:"More Actions"})))),n().createElement(O,null,n().createElement(C,null,n().createElement(L,{title:"Field 1"},"Account Name"),n().createElement(j,{title:"Burlington Textile Weaving Plant Generator",isVertical:!0},n().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Burlington Textile Weaving Plant Generator"))),n().createElement(C,null,n().createElement(L,{title:"Address (2)"},"Address (2)",n().createElement(h.l9,{triggerIcon:n().createElement(p.A,{className:"slds-button_icon",iconClassName:"slds-button__icon_small",symbol:"down","aria-haspopup":"true",assistiveText:"More Actions",title:"More Actions"})})),n().createElement(j,{title:"Multiple Values",isVertical:!0},n().createElement("div",null,"1 Market St"),n().createElement("div",null,"San Francisco, CA 94105"))),n().createElement(C,null,n().createElement(L,{title:"Close Date"},"Close Date"),n().createElement(j,{title:"11/1/2018",isVertical:!0},"11/1/2018")),n().createElement(C,null,n().createElement(L,{title:"Opportunity Owner"},"Opportunity Owner"),n().createElement(j,{title:"Hyperlink",isVertical:!0},n().createElement("div",{className:"slds-media slds-media_small"},n().createElement("div",{className:"slds-media__figure"},n().createElement(J.eu,{className:"slds-avatar_circle slds-avatar_x-small"},n().createElement("img",{alt:"Person name",src:"/assets/images/avatar2.jpg",title:"User avatar"}))),n().createElement("div",{className:"slds-media__body"},n().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Jeanette Gomez"))))),n().createElement(C,null,n().createElement(L,{title:"Amount"},"Amount"),n().createElement(j,{title:"$375,000.00",isVertical:!0},"$375,000.00")))))},q=n().createElement(U,null),z=s(2747),Q=z.A.Crumb,K=function(e){return n().createElement(g,{isRelatedList:!0},n().createElement(v,null,n().createElement(_,{type:"title"},n().createElement(z.A,{className:"slds-m-bottom_xx-small"},n().createElement(Q,{href:"#",onClick:function(e){return e.preventDefault()}},"Accounts"),n().createElement(Q,{href:"#",onClick:function(e){return e.preventDefault()}},"Company One")),n().createElement(N,{titleText:"Contacts (will truncate)"})),n().createElement(_,{type:"actions"},n().createElement(w,null,n().createElement(x,null,n().createElement(X.GW,null,n().createElement(X.NX,null,n().createElement(V.$n,{isNeutral:!0},"Add Contact")),n().createElement(X.NX,null,n().createElement(h.l9,{triggerIcon:n().createElement(p.A,{className:"slds-button_icon-border-filled",symbol:"down","aria-haspopup":"true",assistiveText:"More Actions",title:"More Actions"})}))))))),n().createElement(v,null,n().createElement(_,{type:"meta"},n().createElement(T,null,"10 items • sorted by name")),n().createElement(_,{type:"controls"},n().createElement(w,null,n().createElement(x,null,n().createElement(h.l9,{triggerIcon:n().createElement(p.A,{className:"slds-button_icon-more",symbol:"table",hasDropdown:!0,assistiveText:"Change view",title:"Change view"})})),n().createElement(x,null,n().createElement(X.GW,null,n().createElement(X.NX,null,n().createElement(p.A,{className:"slds-button_icon-border",symbol:"chart",assistiveText:"Chart",title:"Chart"})),n().createElement(X.NX,null,n().createElement(p.A,{className:"slds-button_icon-border",symbol:"filterList",assistiveText:"Filter List",title:"Filter List"})),n().createElement(X.NX,null,n().createElement(h.l9,{triggerIcon:n().createElement(p.A,{className:"slds-button_icon-more",symbol:"sort",hasDropdown:!0,assistiveText:"Sort List",title:"Sort List"})}))))))))},Y=n().createElement(K,null),Z=a.XB.code,ee=a.XB.h2,te=a.XB.h3,se=a.XB.h4,le=a.XB.li,ne=a.XB.p,ae=a.XB.strong,re=a.XB.ul,ie=function(){return(0,l.createElement)(a.Ay,{},(0,l.createElement)("div",{className:"lead doc"},"Page headers are used at the top of several page types and contains the Title of the page."),(0,l.createElement)(r.A,{exampleOnly:!0},(0,o.NO)(F)),ee({id:"About-Page-header"},"About Page header"),ne({},"The Page Header uses the ",Z({},".slds-page-header")," class as a base and is comprised of multiple components including the Title of the page and supporting details. For large form factors, it may include actions."),ee({id:"Base"},"Base"),(0,l.createElement)(r.A,null,(0,o.NO)(M)),ee({id:"Object-Home"},"Object Home"),(0,l.createElement)(r.A,null,(0,o.NO)(F)),ne({},"The title for the Object Home page header is a filtering component. The ",Z({},".slds-text-focus")," class is placed on the media object that contains the title and down icon to simulate a hover and focus state of a link."),ne({},"This component is created entirely of existing components like buttons, button groups, and icons."),te({id:"Examples"},"Examples"),se({id:"With-extra-long-name"},"With extra long name"),(0,l.createElement)(r.A,null,(0,o.NO)(I,"base-extra-long")),se({id:"With-tooltip-open"},"With tooltip open"),(0,l.createElement)(r.A,{demoStyles:"margin-top:4px;"},(0,o.NO)(I,"base-with-tooltip-open")),(0,l.createElement)(i.A,{type:"note"},(0,l.createElement)("p",null,"For more information about how to handle the Tooltip behavior, please visit the ",(0,l.createElement)("a",{href:"/components/tooltips/#Examples"},"Tooltip Examples"),".")),se({id:"Inside-a-card"},"Inside a card"),(0,l.createElement)(r.A,null,(0,o.NO)(I,"card")),se({id:"Inside-a-tabs-card"},"Inside a tabs card"),(0,l.createElement)(r.A,null,(0,o.NO)(I,"tab-card")),ee({id:"Record-Home"},"Record Home"),(0,l.createElement)(r.A,null,(0,o.NO)($)),ne({},"Page header record home contains up to four compact layout fields. They're contained in the ",Z({},".slds-page-header__detail-row")," div. That div contains the top and bottom spacing needed for this version of the page header."),ne({},"When text is truncated, the full text should be placed in a tooltip on hover (currently shown in the title attribute). One line truncation is created by using the ",Z({},".slds-truncate")," class. Two line truncation must be achieved using JavaScript."),ne({},"The page header is located at the top of every record home. It includes the record title and compact layout for a record. Excluding the title, the page header displays 4 compact layout fields. Similar data types can be rolled up and be displayed as a single field."),ne({},ae({},"Record Title")),re({},le({},"Display Record Type icon to the left of the title"),le({},"Record Type is displayed above the title"),le({},"When required, follow action is displayed to the right of the record title"),le({},"Display one line of text, truncate when the length conflicts with the page level actions")),ne({},"As shown in Field 3, web addresses and email addresses should be parsed and displayed as hyperlinks linking to the appropriate ",Z({},"mailto:")," or web url. Do not modify the user's input, display as intended."),ne({},"When text is truncated, display full field text in browser tooltip on hover."),ne({},"Display addresses in two lines. Street address on first line, City, State and Postal Code on line 2. For lengthy addresses, truncate each line individually based on the available width of the area using the ",Z({},".slds-truncate")," class. Display the full address via browser tooltip."),ee({id:"Record-Home-Vertical"},"Record Home Vertical"),(0,l.createElement)(r.A,null,(0,o.NO)(q)),ne({},"Vertical page header record home contains up to seven compact layout fields. They're contained in the ",Z({},".slds-page-header__detail-row")," div.\nThe heading does not truncate. This is typically used in more compact layouts where more vertical space is desired."),ee({id:"Related-List"},"Related List"),(0,l.createElement)(r.A,null,(0,o.NO)(Y)),ne({},"The Related List page header is similar to the Object Home page header. It includes a breadcrumb component at the top and the title is truncated."))},oe=function(){return(0,a.Qr)(ie())}},1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM}},n={};function a(e){var t=n[e];if(void 0!==t)return t.exports;var s=n[e]={id:e,exports:{}};return l[e](s,s.exports,a),s.exports}a.m=l,a.amdO={},e=[],a.O=function(t,s,l,n){if(!s){var r=1/0;for(d=0;d<e.length;d++){s=e[d][0],l=e[d][1],n=e[d][2];for(var i=!0,o=0;o<s.length;o++)(!1&n||r>=n)&&Object.keys(a.O).every(function(e){return a.O[e](s[o])})?s.splice(o--,1):(i=!1,n<r&&(r=n));if(i){e.splice(d--,1);var c=l();void 0!==c&&(t=c)}}return t}n=n||0;for(var d=e.length;d>0&&e[d-1][2]>n;d--)e[d]=e[d-1];e[d]=[s,l,n]},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,{a:t}),t},s=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},a.t=function(e,l){if(1&l&&(e=this(e)),8&l)return e;if("object"==typeof e&&e){if(4&l&&e.__esModule)return e;if(16&l&&"function"==typeof e.then)return e}var n=Object.create(null);a.r(n);var r={};t=t||[null,s({}),s([]),s(s)];for(var i=2&l&&e;("object"==typeof i||"function"==typeof i)&&!~t.indexOf(i);i=s(i))Object.getOwnPropertyNames(i).forEach(function(t){r[t]=function(){return e[t]}});return r.default=function(){return e},a.d(n,r),n},a.d=function(e,t){for(var s in t)a.o(t,s)&&!a.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:t[s]})},a.e=function(){return Promise.resolve()},a.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.j=6299,function(){var e={6299:0};a.O.j=function(t){return 0===e[t]};var t=function(t,s){var l,n,r=s[0],i=s[1],o=s[2],c=0;if(r.some(function(t){return 0!==e[t]})){for(l in i)a.o(i,l)&&(a.m[l]=i[l]);if(o)var d=o(a)}for(t&&t(s);c<r.length;c++)n=r[c],a.o(e,n)&&e[n]&&e[n][0](),e[n]=0;return a.O(d)},s=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs||[];s.forEach(t.bind(null,0)),s.push=t.bind(null,s.push.bind(s))}(),a.nc=void 0;var r=a.O(void 0,[3540],function(){return a(952)});r=a.O(r),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/page-headers/docs.mdx.js"]=r}();
+var SLDS;!function(){"use strict";var e,t,s,l={952:function(e,t,s){s.r(t),s.d(t,{getContents:function(){return oe},getElement:function(){return ie}});var l=s(1594),n=s.n(l),a=s(5671),r=s(6547),i=(s(3212),s(5619)),o=s(806),c=s(4187),d=s.n(c),m=s(942),u=s.n(m),p=s(6955),h=s(4760),E=s(7852),f=s(8522),b=s(4216),y=function(e){return n().createElement(f.b$,{symbol:e.type,className:"slds-page-header__icon",assistiveText:e.assistiveText,title:e.title})};y.propTypes={assistiveText:d().oneOfType([d().string,d().bool]),title:d().oneOfType([d().string,d().bool]),type:d().string.isRequired};var g=function(e){return n().createElement("div",{className:u()("slds-page-header",{"slds-page-header_vertical":e.isVertical,"slds-page-header_related-list":e.isRelatedList,"slds-page-header_record-home":e.isRecordHome})},e.children)};g.propTypes={children:d().node,isRelatedList:d().bool,isVertical:d().bool,isRecordHome:d().bool,showTooltip:d().bool};var v=function(e){return n().createElement("div",{className:u()("slds-page-header__row",{"slds-page-header__row_gutters":e.hasGutters})},e.children)};v.propTypes={children:d().node,hasGutters:d().bool};var _=function(e){return n().createElement("div",{className:u()({"slds-page-header__col-actions":"actions"===e.type,"slds-page-header__col-controls":"controls"===e.type,"slds-page-header__col-details":"details"===e.type,"slds-page-header__col-meta":"meta"===e.type,"slds-page-header__col-title":"title"===e.type})},e.children)};_.propTypes={children:d().node,type:d().string};var N=function(e){return n().createElement(E.A,{figureLeft:e.symbol&&n().createElement(y,{assistiveText:!e.objectName&&e.symbol,title:!e.objectName&&e.symbol,type:e.symbol})},n().createElement("div",{className:"slds-page-header__name"},n().createElement("div",{className:"slds-page-header__name-title"},n().createElement("h1",null,e.objectName&&!e.metaText?n().createElement("span",null,e.objectName):null,n().createElement("span",{className:u()("slds-page-header__title",!e.isVertical&&"slds-truncate",e.isVertical&&"slds-hyphenate"),title:e.titleText},e.titleText))),e.hasSwitcher&&n().createElement("div",{className:"slds-page-header__name-switcher slds-is-relative"},n().createElement(h.l9,{triggerIcon:n().createElement(p.A,{"aria-haspopup":"true",assistiveText:"Switch list view",className:"slds-button_icon-small",iconClassName:"slds-icon_x-small",symbol:"down",title:"Switch list view"})}),n().createElement(b.m_,{className:u()("slds-nubbin_bottom-left",!e.showTooltip&&"slds-fall-into-ground"),id:"dropdown-label",style:{position:"absolute",left:"-12px",top:"-48px",width:"190px"}},e.fieldLevelMessage||"Some helpful information."))),e.metaText&&n().createElement("p",{className:"slds-page-header__name-meta"},e.metaText))};N.propTypes={symbol:d().string,objectName:d().string,hasSwitcher:d().bool,metaText:d().string,titleText:d().string.isRequired,isVertical:d().bool};var T=function(e){return n().createElement("p",{className:"slds-page-header__meta-text"},e.children)};T.propTypes={children:d().node};var w=function(e){return n().createElement("div",{className:"slds-page-header__controls"},e.children)};w.propTypes={children:d().node};var x=function(e){return n().createElement("div",{className:"slds-page-header__control"},e.children)};x.propTypes={children:d().node};var A=function(e){return n().createElement("ul",{className:"slds-page-header__detail-row"},e.children)};A.propTypes={children:d().node};var O=function(e){return n().createElement("ul",{className:"slds-page-header__detail-list"},e.children)};O.propTypes={children:d().node};var S=function(e){return n().createElement("li",{className:"slds-page-header__detail-block"},e.children)};S.propTypes={children:d().node};var C=function(e){return n().createElement("li",{className:"slds-page-header__detail-item"},e.children)};C.propTypes={children:d().node};var L=function(e){return n().createElement("div",{className:u()("slds-text-title",!e.isVertical&&"slds-truncate"),title:e.title},e.children)};L.propTypes={children:d().node,title:d().string,isVertical:d().bool};var j=function(e){return n().createElement("div",{className:e.isVertical?null:"slds-truncate",title:e.title},e.children)};j.propTypes={children:d().node,title:d().string,isVertical:d().bool};var D=function(e){return n().createElement(g,null,n().createElement(v,null,n().createElement(_,{type:"title"},n().createElement(N,{titleText:"Rohde Corp - 80,000 Widgets",metaText:"Mark Jaeckal • Unlimited Customer • 11/13/15",symbol:"opportunity"}))))},M=n().createElement(D,null),V=s(9825),X=s(1412),k=s(3011),R=function(e){return n().createElement(g,null,n().createElement(v,null,n().createElement(_,{type:"title"},n().createElement(N,{symbol:"opportunity",objectName:"Opportunities",titleText:"Recently Viewed",hasSwitcher:!0,showTooltip:e.showTooltip,fieldLevelMessage:e.fieldLevelMessage})),n().createElement(_,{type:"actions"},n().createElement(w,null,n().createElement(x,null,n().createElement(X.GW,null,n().createElement(X.NX,null,n().createElement(V.$n,{isNeutral:!0},"New")),n().createElement(X.NX,null,n().createElement(h.l9,{triggerIcon:n().createElement(p.A,{className:"slds-button_icon-border-filled",symbol:"down","aria-haspopup":"true",assistiveText:"More Actions",title:"More Actions"})}))))))),n().createElement(v,null,n().createElement(_,{type:"meta"},n().createElement(T,null,"10 items • Updated 13 minutes ago")),n().createElement(_,{type:"controls"},n().createElement(w,null,n().createElement(x,null,n().createElement(h.l9,{triggerIcon:n().createElement(p.A,{className:"slds-button_icon-more",symbol:"settings",hasDropdown:!0,assistiveText:"List View Controls",title:"List View Controls"})})),n().createElement(x,null,n().createElement(h.l9,{triggerIcon:n().createElement(p.A,{className:"slds-button_icon-more",symbol:"table",hasDropdown:!0,assistiveText:"Change view",title:"Change view"})})),n().createElement(x,null,n().createElement(p.A,{className:"slds-button_icon-border-filled",symbol:"edit",assistiveText:"Edit List",title:"Edit List"})),n().createElement(x,null,n().createElement(p.A,{className:"slds-button_icon-border-filled",symbol:"refresh",assistiveText:"Refresh List",title:"Refresh List"})),n().createElement(x,null,n().createElement(X.GW,null,n().createElement(X.NX,null,n().createElement(p.A,{className:"slds-button_icon-border-filled",symbol:"chart",assistiveText:"Charts",title:"Charts"})),n().createElement(X.NX,null,n().createElement(p.A,{className:"slds-button_icon-border-filled",symbol:"filterList",assistiveText:"Filters",title:"Filters"}))))))))},F=n().createElement(R,null),I=[{id:"base-extra-long",label:"Base with extra long name",element:n().createElement(g,null,n().createElement(v,null,n().createElement(_,{type:"title"},n().createElement(N,{symbol:"opportunity",objectName:"Opportunities",titleText:"Recently Viewed listssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss",hasSwitcher:!0})),n().createElement(_,{type:"actions"},n().createElement(w,null,n().createElement(x,null,n().createElement(X.GW,null,n().createElement(X.NX,null,n().createElement(V.$n,{isNeutral:!0},"New")),n().createElement(X.NX,null,n().createElement(p.A,{className:"slds-button_icon-border-filled",symbol:"down","aria-haspopup":"true",assistiveText:"More Actions",title:"More Actions"}))))))),n().createElement(v,null,n().createElement(_,{type:"meta"},n().createElement(T,null,"10 items • Updated 13 minutes ago")),n().createElement(_,{type:"controls"},n().createElement(w,null,n().createElement(x,null,n().createElement(h.l9,{triggerIcon:n().createElement(p.A,{className:"slds-button_icon-more",symbol:"settings",hasDropdown:!0,assistiveText:"List View Controls",title:"List View Controls"})})),n().createElement(x,null,n().createElement(h.l9,{triggerIcon:n().createElement(p.A,{className:"slds-button_icon-more",symbol:"table",hasDropdown:!0,assistiveText:"Change view",title:"Change view"})})),n().createElement(x,null,n().createElement(p.A,{className:"slds-button_icon-border-filled",symbol:"edit",assistiveText:"Edit List",title:"Edit List"})),n().createElement(x,null,n().createElement(p.A,{className:"slds-button_icon-border-filled",symbol:"refresh",assistiveText:"Refresh List",title:"Refresh List"})),n().createElement(x,null,n().createElement(X.GW,null,n().createElement(X.NX,null,n().createElement(p.A,{className:"slds-button_icon-border-filled",symbol:"chart",assistiveText:"Charts",title:"Charts"})),n().createElement(X.NX,null,n().createElement(p.A,{className:"slds-button_icon-border-filled",symbol:"filterList",assistiveText:"Filters",title:"Filters"}))))))))},{id:"base-with-tooltip-open",label:"Base with tooltip open",element:n().createElement(R,{showTooltip:!0,fieldLevelMessage:"Change View for the account"})},{id:"card",label:"Inside a card",element:n().createElement(k.Ay,null,n().createElement(R,null))},{id:"tab-card",label:"Inside a tabs card",element:n().createElement("div",{className:"slds-tabs_card"},n().createElement(R,null))}],W=s(8347);function B(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var s=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=s){var l,n,a,r,i=[],o=!0,c=!1;try{if(a=(s=s.call(e)).next,0===t){if(Object(s)!==s)return;o=!1}else for(;!(o=(l=a.call(s)).done)&&(i.push(l.value),i.length!==t);o=!0);}catch(e){c=!0,n=e}finally{try{if(!o&&null!=s.return&&(r=s.return(),Object(r)!==r))return}finally{if(c)throw n}}return i}}(e,t)||function(e,t){if(e){if("string"==typeof e)return P(e,t);var s={}.toString.call(e).slice(8,-1);return"Object"===s&&e.constructor&&(s=e.constructor.name),"Map"===s||"Set"===s?Array.from(e):"Arguments"===s||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(s)?P(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function P(e,t){(null==t||t>e.length)&&(t=e.length);for(var s=0,l=Array(t);s<t;s++)l[s]=e[s];return l}var G=function(e){var t=e.className,s=e.disabled,a=e.isNotSelected,r=e.isSelected,i=e.isSelectedClicked,o=B((0,l.useState)(void 0!==a&&!1===Boolean(a)||r||i),2),c=o[0],d=o[1],m=B((0,l.useState)(i),2),p=m[0],h=m[1];return n().createElement(V.$n,{className:u()("slds-button_stateful",t,{"slds-not-selected":!c,"slds-is-selected":c&&!p,"slds-is-selected-clicked":c&&p}),disabled:s,"aria-live":"assertive","aria-pressed":Boolean(c).toString(),isNeutral:!0,onBlur:function(){return h(!1)},onFocus:function(){return h(!0)},onClick:function(){return d(!c)}},n().createElement("span",{className:"slds-text-not-selected"},n().createElement(W.A,{className:"slds-button__icon slds-button__icon_small slds-button__icon_left",sprite:"utility",symbol:"add"}),"Follow"),n().createElement("span",{className:"slds-text-selected"},n().createElement(W.A,{className:"slds-button__icon slds-button__icon_small slds-button__icon_left",sprite:"utility",symbol:"check"}),"Following"),n().createElement("span",{className:"slds-text-selected-focus"},n().createElement(W.A,{className:"slds-button__icon slds-button__icon_small slds-button__icon_left",sprite:"utility",symbol:"close"}),"Unfollow"))};G.propTypes={className:d().string,disabled:d().bool,isNotSelected:d().bool,isSelected:d().bool,isSelectedClicked:d().bool};var H=function(e){return n().createElement(g,{isRecordHome:!0},n().createElement(v,null,n().createElement(_,{type:"title"},n().createElement(N,{symbol:"opportunity",objectName:"Opportunity",titleText:"Acme - 1,200 Widgets"})),n().createElement(_,{type:"actions"},n().createElement(w,null,n().createElement(x,null,n().createElement(G,{isNotSelected:!0,isNeutral:!0})),n().createElement(x,null,n().createElement(X.GW,null,n().createElement(X.NX,null,n().createElement(V.$n,{isNeutral:!0},"Edit")),n().createElement(X.NX,null,n().createElement(V.$n,{isNeutral:!0},"Delete")),n().createElement(X.NX,null,n().createElement(V.$n,{isNeutral:!0},"Clone")),n().createElement(X.NX,null,n().createElement(h.l9,{triggerIcon:n().createElement(p.A,{className:"slds-button_icon-border-filled",symbol:"down","aria-haspopup":"true",assistiveText:"More Actions",title:"More Actions"})}))))))),n().createElement(v,{hasGutters:!0},n().createElement(_,{type:"details"},n().createElement(A,null,n().createElement(S,null,n().createElement(L,{title:"Field 1"},"Field 1"),n().createElement(j,{title:"Description that demonstrates truncation with a long text field."},"Description that demonstrates truncation with a long text field.")),n().createElement(S,null,n().createElement(L,{title:"Field 2 (3)"},"Field 2 (3)",n().createElement(h.l9,{triggerIcon:n().createElement(p.A,{className:"slds-button_icon",iconClassName:"slds-button__icon_small",symbol:"down","aria-haspopup":"true",assistiveText:"More Actions",title:"More Actions"})})),n().createElement(j,{title:"Multiple Values"},"Multiple Values")),n().createElement(S,null,n().createElement(L,{title:"Field 3"},"Field 3"),n().createElement(j,{title:"Hyperlink"},n().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Hyperlink"))),n().createElement(S,null,n().createElement(L,{title:"Field 4"},"Field 4"),n().createElement(j,{title:"Description (2-line truncation—must use JS to truncate)."},"Description (2-line truncati..."))))))},$=n().createElement(H,null),J=s(2937),U=function(e){return n().createElement("div",{className:"demo-only",style:{width:"300px"}},n().createElement(g,{isVertical:!0},n().createElement(N,{symbol:"opportunity",titleText:"Burlington Textile Weaving Plant Generator",isVertical:!0}),n().createElement(w,null,n().createElement(G,{isNeutral:!0,isNotSelected:!0}),n().createElement(X.GW,null,n().createElement(X.NX,null,n().createElement(V.$n,{isNeutral:!0},"Edit")),n().createElement(X.NX,null,n().createElement(V.$n,{isNeutral:!0},"Delete")),n().createElement(X.NX,null,n().createElement(p.A,{className:"slds-button_icon-border-filled",symbol:"down","aria-haspopup":"true",assistiveText:"More Actions",title:"More Actions"})))),n().createElement(O,null,n().createElement(C,null,n().createElement(L,{title:"Field 1"},"Account Name"),n().createElement(j,{title:"Burlington Textile Weaving Plant Generator",isVertical:!0},n().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Burlington Textile Weaving Plant Generator"))),n().createElement(C,null,n().createElement(L,{title:"Address (2)"},"Address (2)",n().createElement(h.l9,{triggerIcon:n().createElement(p.A,{className:"slds-button_icon",iconClassName:"slds-button__icon_small",symbol:"down","aria-haspopup":"true",assistiveText:"More Actions",title:"More Actions"})})),n().createElement(j,{title:"Multiple Values",isVertical:!0},n().createElement("div",null,"1 Market St"),n().createElement("div",null,"San Francisco, CA 94105"))),n().createElement(C,null,n().createElement(L,{title:"Close Date"},"Close Date"),n().createElement(j,{title:"11/1/2018",isVertical:!0},"11/1/2018")),n().createElement(C,null,n().createElement(L,{title:"Opportunity Owner"},"Opportunity Owner"),n().createElement(j,{title:"Hyperlink",isVertical:!0},n().createElement("div",{className:"slds-media slds-media_small"},n().createElement("div",{className:"slds-media__figure"},n().createElement(J.eu,{className:"slds-avatar_circle slds-avatar_x-small"},n().createElement("img",{alt:"Person name",src:"/assets/images/avatar2.jpg",title:"User avatar"}))),n().createElement("div",{className:"slds-media__body"},n().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Jeanette Gomez"))))),n().createElement(C,null,n().createElement(L,{title:"Amount"},"Amount"),n().createElement(j,{title:"$375,000.00",isVertical:!0},"$375,000.00")))))},q=n().createElement(U,null),z=s(2747),Q=z.A.Crumb,K=function(e){return n().createElement(g,{isRelatedList:!0},n().createElement(v,null,n().createElement(_,{type:"title"},n().createElement(z.A,{className:"slds-m-bottom_xx-small"},n().createElement(Q,{href:"#",onClick:function(e){return e.preventDefault()}},"Accounts"),n().createElement(Q,{href:"#",onClick:function(e){return e.preventDefault()}},"Company One")),n().createElement(N,{titleText:"Contacts (will truncate)"})),n().createElement(_,{type:"actions"},n().createElement(w,null,n().createElement(x,null,n().createElement(X.GW,null,n().createElement(X.NX,null,n().createElement(V.$n,{isNeutral:!0},"Add Contact")),n().createElement(X.NX,null,n().createElement(h.l9,{triggerIcon:n().createElement(p.A,{className:"slds-button_icon-border-filled",symbol:"down","aria-haspopup":"true",assistiveText:"More Actions",title:"More Actions"})}))))))),n().createElement(v,null,n().createElement(_,{type:"meta"},n().createElement(T,null,"10 items • sorted by name")),n().createElement(_,{type:"controls"},n().createElement(w,null,n().createElement(x,null,n().createElement(h.l9,{triggerIcon:n().createElement(p.A,{className:"slds-button_icon-more",symbol:"table",hasDropdown:!0,assistiveText:"Change view",title:"Change view"})})),n().createElement(x,null,n().createElement(X.GW,null,n().createElement(X.NX,null,n().createElement(p.A,{className:"slds-button_icon-border",symbol:"chart",assistiveText:"Chart",title:"Chart"})),n().createElement(X.NX,null,n().createElement(p.A,{className:"slds-button_icon-border",symbol:"filterList",assistiveText:"Filter List",title:"Filter List"})),n().createElement(X.NX,null,n().createElement(h.l9,{triggerIcon:n().createElement(p.A,{className:"slds-button_icon-more",symbol:"sort",hasDropdown:!0,assistiveText:"Sort List",title:"Sort List"})}))))))))},Y=n().createElement(K,null),Z=a.XB.code,ee=a.XB.h2,te=a.XB.h3,se=a.XB.h4,le=a.XB.li,ne=a.XB.p,ae=a.XB.strong,re=a.XB.ul,ie=function(){return(0,l.createElement)(a.Ay,{},(0,l.createElement)("div",{className:"lead doc"},"Page headers are used at the top of several page types and contains the Title of the page."),(0,l.createElement)(r.A,{exampleOnly:!0},(0,o.NO)(F)),ee({id:"About-Page-header"},"About Page header"),ne({},"The Page Header uses the ",Z({},".slds-page-header")," class as a base and is comprised of multiple components including the Title of the page and supporting details. For large form factors, it may include actions."),ee({id:"Base"},"Base"),(0,l.createElement)(r.A,null,(0,o.NO)(M)),ee({id:"Object-Home"},"Object Home"),(0,l.createElement)(r.A,null,(0,o.NO)(F)),ne({},"The title for the Object Home page header is a filtering component. The ",Z({},".slds-text-focus")," class is placed on the media object that contains the title and down icon to simulate a hover and focus state of a link."),ne({},"This component is created entirely of existing components like buttons, button groups, and icons."),te({id:"Examples"},"Examples"),se({id:"With-extra-long-name"},"With extra long name"),(0,l.createElement)(r.A,null,(0,o.NO)(I,"base-extra-long")),se({id:"With-tooltip-open"},"With tooltip open"),(0,l.createElement)(r.A,{demoStyles:"margin-top:4px;"},(0,o.NO)(I,"base-with-tooltip-open")),(0,l.createElement)(i.A,{type:"note"},(0,l.createElement)("p",null,"For more information about how to handle the Tooltip behavior, please visit the ",(0,l.createElement)("a",{href:"/components/tooltips/#Examples"},"Tooltip Examples"),".")),se({id:"Inside-a-card"},"Inside a card"),(0,l.createElement)(r.A,null,(0,o.NO)(I,"card")),se({id:"Inside-a-tabs-card"},"Inside a tabs card"),(0,l.createElement)(r.A,null,(0,o.NO)(I,"tab-card")),ee({id:"Record-Home"},"Record Home"),(0,l.createElement)(r.A,null,(0,o.NO)($)),ne({},"Page header record home contains up to four compact layout fields. They're contained in the ",Z({},".slds-page-header__detail-row")," div. That div contains the top and bottom spacing needed for this version of the page header."),ne({},"When text is truncated, the full text should be placed in a tooltip on hover (currently shown in the title attribute). One line truncation is created by using the ",Z({},".slds-truncate")," class. Two line truncation must be achieved using JavaScript."),ne({},"The page header is located at the top of every record home. It includes the record title and compact layout for a record. Excluding the title, the page header displays 4 compact layout fields. Similar data types can be rolled up and be displayed as a single field."),ne({},ae({},"Record Title")),re({},le({},"Display Record Type icon to the left of the title"),le({},"Record Type is displayed above the title"),le({},"When required, follow action is displayed to the right of the record title"),le({},"Display one line of text, truncate when the length conflicts with the page level actions")),ne({},"As shown in Field 3, web addresses and email addresses should be parsed and displayed as hyperlinks linking to the appropriate ",Z({},"mailto:")," or web url. Do not modify the user's input, display as intended."),ne({},"When text is truncated, display full field text in browser tooltip on hover."),ne({},"Display addresses in two lines. Street address on first line, City, State and Postal Code on line 2. For lengthy addresses, truncate each line individually based on the available width of the area using the ",Z({},".slds-truncate")," class. Display the full address via browser tooltip."),ee({id:"Record-Home-Vertical"},"Record Home Vertical"),(0,l.createElement)(r.A,null,(0,o.NO)(q)),ne({},"Vertical page header record home contains up to seven compact layout fields. They're contained in the ",Z({},".slds-page-header__detail-row")," div.\nThe heading does not truncate. This is typically used in more compact layouts where more vertical space is desired."),ee({id:"Related-List"},"Related List"),(0,l.createElement)(r.A,null,(0,o.NO)(Y)),ne({},"The Related List page header is similar to the Object Home page header. It includes a breadcrumb component at the top and the title is truncated."))},oe=function(){return(0,a.Qr)(ie())}},1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM}},n={};function a(e){var t=n[e];if(void 0!==t)return t.exports;var s=n[e]={id:e,exports:{}};return l[e](s,s.exports,a),s.exports}a.m=l,a.amdO={},e=[],a.O=function(t,s,l,n){if(!s){var r=1/0;for(d=0;d<e.length;d++){s=e[d][0],l=e[d][1],n=e[d][2];for(var i=!0,o=0;o<s.length;o++)(!1&n||r>=n)&&Object.keys(a.O).every(function(e){return a.O[e](s[o])})?s.splice(o--,1):(i=!1,n<r&&(r=n));if(i){e.splice(d--,1);var c=l();void 0!==c&&(t=c)}}return t}n=n||0;for(var d=e.length;d>0&&e[d-1][2]>n;d--)e[d]=e[d-1];e[d]=[s,l,n]},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,{a:t}),t},s=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},a.t=function(e,l){if(1&l&&(e=this(e)),8&l)return e;if("object"==typeof e&&e){if(4&l&&e.__esModule)return e;if(16&l&&"function"==typeof e.then)return e}var n=Object.create(null);a.r(n);var r={};t=t||[null,s({}),s([]),s(s)];for(var i=2&l&&e;("object"==typeof i||"function"==typeof i)&&!~t.indexOf(i);i=s(i))Object.getOwnPropertyNames(i).forEach(function(t){r[t]=function(){return e[t]}});return r.default=function(){return e},a.d(n,r),n},a.d=function(e,t){for(var s in t)a.o(t,s)&&!a.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:t[s]})},a.e=function(){return Promise.resolve()},a.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.j=6299,function(){var e={6299:0};a.O.j=function(t){return 0===e[t]};var t=function(t,s){var l,n,r=s[0],i=s[1],o=s[2],c=0;if(r.some(function(t){return 0!==e[t]})){for(l in i)a.o(i,l)&&(a.m[l]=i[l]);if(o)var d=o(a)}for(t&&t(s);c<r.length;c++)n=r[c],a.o(e,n)&&e[n]&&e[n][0](),e[n]=0;return a.O(d)},s=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs||[];s.forEach(t.bind(null,0)),s.push=t.bind(null,s.push.bind(s))}(),a.nc=void 0;var r=a.O(void 0,[3540],function(){return a(952)});r=a.O(r),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/page-headers/docs.mdx.js"]=r}();