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

Salesforce Lightning Design System

var SLDS;!function(){"use strict";var e,t,r,n={1594:function(e){e.exports=React},1869:function(e,t,r){r.r(t),r.d(t,{getContents:function(){return Ee},getElement:function(){return ve}});var n=r(1594),o=r.n(n),a=r(5671),s=r(6547),i=r(5619),l=r(806),c=r(7412),u=r.n(c),d=r(6333),m=r.n(d),p=r(8347),f=r(6955),b=r(5206),h=r.n(b),y=r(3062),v=r(9249),E=r(6515);function g(e){return g="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},g(e)}function w(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}function _(e,t,r){return(t=function(e){var t=function(e){if("object"!=g(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,"string");if("object"!=g(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==g(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function S(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,a,s,i=[],l=!0,c=!1;try{if(a=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;l=!1}else for(;!(l=(n=a.call(r)).done)&&(i.push(n.value),i.length!==t);l=!0);}catch(e){c=!0,o=e}finally{try{if(!l&&null!=r.return&&(s=r.return(),Object(s)!==s))return}finally{if(c)throw o}}return i}}(e,t)||function(e,t){if(e){if("string"==typeof e)return T(e,t);var r={}.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?T(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 T(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=Array(t);r<t;r++)n[r]=e[r];return n}var N=function(){return o().createElement("p",null,"The flow has 1 error that must be fixed before you can save."," ",o().createElement(E.A,{title:"Learn More"},"Learn more."))},x=function(e){var t=e.activeError,r=e.assistiveText,a=e.children,s=e.isWarning,i=e.isError,l=e.parentCallback,c=e.parentCallbackData,u=e.size,d=e.title,p=e.type,f=(0,n.useRef)(),b=(0,n.useRef)(),E=S((0,n.useState)(),2),g=E[0],T=E[1],x=S((0,n.useState)(!1),2),O=x[0],D=x[1],A=S((0,n.useState)(!1),2),j=A[0],k=A[1],P=function(){f.current.focus(),D(!0)},C=function(){f.current.focus(),D(!1),k(!1),l(c)};(0,n.useEffect)(function(){function e(e){var t=W.get(e.keyCode);return t&&t(e)}return document.addEventListener("keydown",e),function(){return document.removeEventListener("keydown",e)}});var W=new Map([[27,function(){O&&C()}],[9,function(e){if(O){k(!0);var t=b.current.querySelectorAll('a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select'),r=t[0],n=t[t.length-1];if(!e.shiftKey&&document.activeElement!==r)return r.focus(),e.preventDefault();e.shiftKey&&document.activeElement!==n&&(n.focus(),e.preventDefault())}}]]);(0,n.useEffect)(function(){var e=f.current,t=function(){T({right:"".concat(document.body.clientWidth-e.getBoundingClientRect().x-1.5*e.offsetWidth+6,"px"),top:"".concat(e.getBoundingClientRect().y+e.offsetHeight+window.scrollY+15,"px")})};return t(),window.addEventListener("resize",t),function(){return document.removeEventListener("resize",t)}},[]),(0,n.useEffect)(function(){t&&P()},[t]);var B=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?w(Object(r),!0).forEach(function(t){_(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):w(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}({position:"absolute"},g),M=m()("example-unique-id-");return o().createElement(o().Fragment,null,n.Children.only(a)&&o().cloneElement(a,{size:u,feedback:p,symbol:p,assistiveText:r,title:d,onClick:function(){O?C():P()},onBlur:function(){j||(D(!1),l(c))},innerRef:f}),O&&h().createPortal(o().createElement(y.AM,{isWarning:s,isError:i,headingId:M,style:B,onClose:C,header:o().createElement(v.R5,{headingId:M,title:"Review ".concat(p),symbol:p}),closeButton:!0,iconDefault:"warning"===p,inverse:"error"===p,innerRef:b,nubbinPosition:"top right"},o().createElement(N,null)),document.body))},O=(0,l.D)(!1,function(e,t,r){if(!e.isError&&e[t])return new Error("activeError must be used with an error popover")}),D=(0,l.D)(!0,function(e,t,r){var n=["Button","ButtonIcon"];o().Children.forEach(e[t],function(e){if(!n.includes(e.type.name))throw new Error("".concat(r," child should be one of the type: ").concat(n.join(", ")))})});x.propTypes={activeError:O,assistiveText:u().string,children:D,isWarning:u().bool,isError:u().bool,parentCallback:u().func,parentCallbackData:u().node,size:u().string,type:u().string};var A=x,j=r(538),k=r(4216),P=r(4760);function C(e){return C="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},C(e)}function W(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function B(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,I(n.key),n)}}function M(e,t,r){return t&&B(e.prototype,t),r&&B(e,r),Object.defineProperty(e,"prototype",{writable:!1}),e}function I(e){var t=function(e){if("object"!=C(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,"string");if("object"!=C(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==C(t)?t:t+""}function L(e,t,r){return t=V(t),function(e,t){if(t&&("object"==C(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,R()?Reflect.construct(t,r||[],V(e).constructor):t.apply(e,r))}function R(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(R=function(){return!!e})()}function V(e){return V=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},V(e)}function X(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&&H(e,t)}function H(e,t){return H=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},H(e,t)}function z(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,a,s,i=[],l=!0,c=!1;try{if(a=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;l=!1}else for(;!(l=(n=a.call(r)).done)&&(i.push(n.value),i.length!==t);l=!0);}catch(e){c=!0,o=e}finally{try{if(!l&&null!=r.return&&(s=r.return(),Object(s)!==s))return}finally{if(c)throw o}}return i}}(e,t)||function(e,t){if(e){if("string"==typeof e)return U(e,t);var r={}.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?U(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 U(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=Array(t);r<t;r++)n[r]=e[r];return n}var F=function(){return o().createElement("div",{className:"slds-builder-header__item"},o().createElement("div",{className:"slds-builder-header__item-label slds-media slds-media_center"},o().createElement("div",{className:"slds-media__figure"},o().createElement(j.eX,{containerClassName:"slds-current-color",className:"slds-icon_x-small",symbol:"builder",assistiveText:!1,title:!1})),o().createElement("div",{className:"slds-media__body"},"App Name")))},J=function(){return o().createElement(P.W1,{className:"slds-dropdown_right slds-dropdown_actions"},o().createElement(P.cO,{ariaLabel:"Show More"},o().createElement("li",{className:"slds-dropdown__header slds-truncate",role:"presentation",tabIndex:"0"},"Menu Header"),o().createElement(P.Dr,null,"Menu Item One"),o().createElement(P.Dr,null,"Menu Item Two"),o().createElement(P.Dr,null,"Menu Item Three")))},q=function(e){return o().createElement("nav",{className:"slds-builder-header__item slds-builder-header__nav"},o().createElement("ul",{className:"slds-builder-header__nav-list"},e.showDropDown&&o().createElement(K,{symbol:"page",showDropDown:e.showDropDown,openDropDown:e.openDropDown})))},K=function(e){var t=e.openDropDown,r=e.symbol;return o().createElement("li",{className:"slds-builder-header__nav-item slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open"},o().createElement("button",{className:"slds-button slds-builder-header__item-action slds-media slds-media_center","aria-haspopup":"true","aria-expanded":t,title:"Click to open menu"},o().createElement("span",{className:"slds-media__figure"},o().createElement(j.eX,{containerClassName:"slds-current-color",className:"slds-icon_x-small",symbol:r,assistiveText:!1,title:!1})),o().createElement("span",{className:"slds-media__body"},o().createElement("span",{className:"slds-truncate",title:"Dropdown"},"Dropdown"),o().createElement(j.eX,{containerClassName:"slds-current-color slds-m-left_small",className:"slds-icon_x-small",symbol:"chevrondown",assistiveText:!1,title:!1}))),t&&o().createElement(J,null))};K.propTypes={openDropDown:u().bool,symbol:u().string},K.defaultProps={openDropDown:!1};var $=function(e){var t=e.label;return o().createElement("div",{className:"slds-builder-header__item slds-has-flexi-truncate"},o().createElement("h1",{className:"slds-builder-header__item-label"},o().createElement("span",{className:"slds-truncate",title:t},t)))};$.propTypes={label:u().string},$.defaultProps={label:"Page Type"};var Q=function(e){var t=e.hasBackTooltip,r=z((0,n.useState)(t),2),a=r[0],s=r[1],i=z((0,n.useState)(!1),2),l=i[0],c=i[1],u=z((0,n.useState)(!1),2),d=u[0],p=u[1],f=m()("example-unique-id-");return o().createElement("div",{className:"slds-builder-header__item"},o().createElement("a",{href:"#",className:"slds-builder-header__item-action",onClick:function(e){return e.preventDefault()},onFocus:function(){c(!0),s(!0)},onBlur:function(){c(!1),d||s(null)},onMouseEnter:function(){p(!0),s(!0)},onMouseLeave:function(){p(!1),l||s(null)},"aria-describedby":a&&f,title:"Back"},o().createElement(j.eX,{containerClassName:"slds-current-color",className:"slds-icon_x-small",symbol:"back",assistiveText:"Back",title:!1})),a&&o().createElement(k.m_,{nubbinPosition:"top left",id:f,style:{position:"absolute",top:"100%",marginTop:"15px"}},"Back"))};Q.propTypes={hasBackTooltip:u().bool};var Y=function(e){return o().createElement("div",{className:"slds-builder-header__utilities-item"},o().createElement("a",{href:"#",className:"slds-builder-header__item-action slds-media slds-media_center",onClick:function(e){return e.preventDefault()}},o().createElement("div",{className:"slds-media__figure"},o().createElement(j.eX,{containerClassName:"slds-current-color",className:"slds-icon_x-small",symbol:"help",assistiveText:!1,title:!1})),o().createElement("div",{className:"slds-media__body"},"Help")))},G=function(e){var t=e.symbol;return o().createElement("div",{className:"slds-builder-header__utilities-item"},o().createElement("a",{href:"#",className:"slds-builder-header__item-action slds-media slds-media_center",onClick:function(e){return e.preventDefault()}},o().createElement("span",{className:"slds-media__figure"},o().createElement(j.eX,{containerClassName:"slds-current-color",className:"slds-icon_x-small",symbol:t,assistiveText:!1,title:!1})),o().createElement("span",{className:"slds-media__body"},o().createElement("span",{className:"slds-truncate",title:"Link"},"Settings"))))};G.propTypes={symbol:u().string};var Z=function(e){return o().createElement("div",{className:"slds-builder-toolbar__item-group","aria-label":"Canvas Actions"},o().createElement(f.A,{className:"slds-button_icon-border",symbol:"settings",assistiveText:"Canvas Settings",title:"Canvas Settings"}),o().createElement("div",{className:"slds-button-group"},o().createElement(f.A,{className:"slds-button_icon-border",symbol:"undo",assistiveText:"Undo",title:"Undo",tabIndex:"0"}),o().createElement(f.A,{className:"slds-button_icon-border",symbol:"redo",assistiveText:"Redo",title:"Redo",tabIndex:"-1"})))},ee=function(e){return o().createElement("div",{className:"slds-builder-toolbar__item-group","aria-label":"Edit actions"},o().createElement("div",{className:"slds-button-group"},o().createElement(f.A,{className:"slds-button_icon-border",symbol:"cut",assistiveText:"Cut",title:"Cut",tabIndex:"-1"}),o().createElement(f.A,{className:"slds-button_icon-border",symbol:"copy",assistiveText:"Copy",title:"Copy",tabIndex:"-1"}),o().createElement(f.A,{className:"slds-button_icon-border",symbol:"paste",assistiveText:"Paste",title:"Paste",tabIndex:"-1"})),o().createElement(f.A,{className:"slds-button_icon-border",symbol:"toggle_panel_left",assistiveText:"Toggle Panel",title:"Toggle Panel"}))},te=function(e){var t=e.hasStatusTooltip,r=z((0,n.useState)(t),2),a=r[0],s=r[1],i=z((0,n.useState)(!1),2),l=i[0],c=i[1],u=z((0,n.useState)(!1),2),d=u[0],p=u[1],f=m()("example-unique-id-");return o().createElement(o().Fragment,null,a&&o().createElement(k.m_,{nubbinPosition:"top left",id:f,style:{position:"absolute",top:"100%",marginTop:"15px"}},"Version saved by Johnny Appleseed Today 9:00 AM"),o().createElement("button",{className:"slds-button slds-p-horizontal_small","aria-describedby":a&&f,"aria-live":"polite",onFocus:function(){c(!0),s(!0)},onBlur:function(){c(!1),d||s(null)},onMouseEnter:function(){p(!0),s(!0)},onMouseLeave:function(){p(!1),l||s(null)}},"Inactive - Modified 1 day ago"))};te.propTypes={hasStatusTooltip:u().bool};var re=function(e){var t=e.hasStatus,r=e.hasStatusTooltip,a=e.hasWarning,s=e.hasError,i=[];a&&i.push("warning"),s&&i.push("error");var l=z((0,n.useState)(!1),2),c=l[0],u=l[1],d=function(){s&&u(!0)},m=function(e){u(e)};return o().createElement("div",{className:"slds-builder-toolbar__actions","aria-label":"Document actions"},t&&o().createElement(te,{hasStatusTooltip:r}),Array.isArray(i)&&i.length>0&&i.map(function(e,t){var r="warning"===e,n="error"===e;return o().createElement(A,{size:"medium",type:e,assistiveText:e,title:e,key:e+t,isWarning:r,isError:n,activeError:c&&n,parentCallback:m,parentCallbackData:!1},o().createElement(f.A,null))}),o().createElement("button",{className:"slds-button slds-button_neutral",disabled:c,onClick:d},o().createElement(p.A,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"right"})," ","Run"),o().createElement("button",{className:"slds-button slds-button_neutral",disabled:c,onClick:d},"Save As"),o().createElement("button",{className:"slds-button slds-button_brand",disabled:c,onClick:d},"Save"))};re.propTypes={hasStatus:u().bool,hasStatusTooltip:u().bool,hasWarning:u().bool,hasError:u().bool};var ne=function(e){function t(){return W(this,t),L(this,t,arguments)}return X(t,e),M(t,[{key:"render",value:function(){var e=this.props,t=e.hasStatus,r=e.hasStatusTooltip,n=e.hasWarning,a=e.hasError;return o().createElement("div",{className:"slds-builder-toolbar",role:"toolbar"},o().createElement(Z,null),o().createElement(ee,null),o().createElement(re,{hasStatus:t,hasStatusTooltip:r,hasWarning:n,hasError:a}))}}])}(n.Component);ne.propTypes={hasStatus:u().bool,hasStatusTooltip:u().bool,hasWarning:u().bool,hasError:u().bool};var oe=function(e){function t(){return W(this,t),L(this,t,arguments)}return X(t,e),M(t,[{key:"render",value:function(){var e=this.props,t=e.showToolbar,r=e.docName,n=e.showDropDown,a=e.openDropDown,s=e.hasBackTooltip,i=e.hasStatus,l=e.hasStatusTooltip,c=e.hasWarning,u=e.hasError;return o().createElement("div",{className:"slds-builder-header_container"},o().createElement("header",{className:"slds-builder-header"},o().createElement(Q,{hasBackTooltip:s}),o().createElement(F,null),o().createElement(q,{showDropDown:n,openDropDown:a}),o().createElement($,{label:r}),o().createElement("div",{className:"slds-builder-header__item slds-builder-header__utilities"},o().createElement(G,{symbol:"settings"}),o().createElement(Y,null))),t&&o().createElement(ne,{hasStatus:i,hasStatusTooltip:l,hasWarning:c,hasError:u}))}}])}(n.Component);oe.propTypes={showToolbar:u().bool,docName:u().string,showDropDown:u().bool,openDropDown:u().bool,hasBackTooltip:u().bool,hasStatus:u().bool,hasStatusTooltip:u().bool,hasWarning:u().bool,hasError:u().bool},oe.defaultProps={showDropDown:!0};var ae=oe,se="height: 220px; position: relative;",ie=o().createElement(ae,{showDropDown:!0}),le=[{id:"menu-open",label:"Menu open",isOpen:!0,element:o().createElement(ae,{showDropDown:!0,openDropDown:!0})},{id:"with-truncation",label:"With Truncation",element:o().createElement(ae,{docName:"Page Type with a very very long name that will truncate when the container is not wide enough to contain this content completely"})},{id:"has-tooltip",label:'Has "Back" Tooltip',element:o().createElement(ae,{hasBackTooltip:!0})}],ce=o().createElement(ae,{showToolbar:!0}),ue=[{id:"menu-open-with-toolbar",label:"Menu open with toolbar",isOpen:!0,element:o().createElement(ae,{openDropDown:!0,showToolbar:!0})},{id:"has-status-text",label:"Has Status Text",element:o().createElement(ae,{hasStatus:!0,showToolbar:!0})},{id:"has-status-text-with-tooltip",label:"Has Status Text with Tooltip",element:o().createElement(ae,{hasStatus:!0,hasStatusTooltip:!0,showToolbar:!0})},{id:"has-status-text-with-warning",label:"Has Status Text with Warning",element:o().createElement(ae,{hasStatus:!0,hasWarning:!0,showToolbar:!0})},{id:"has-status-text-with-error",label:"Has Status Text with error",element:o().createElement(ae,{hasStatus:!0,hasError:!0,showToolbar:!0})},{id:"has-status-text-with-warning-and-error",label:"Has Status Text with warning and error",element:o().createElement(ae,{hasStatus:!0,hasWarning:!0,hasError:!0,showToolbar:!0})}],de=a.XB.a,me=a.XB.h2,pe=a.XB.h3,fe=a.XB.h4,be=a.XB.li,he=a.XB.p,ye=a.XB.ul,ve=function(){return(0,n.createElement)(a.Ay,{},(0,n.createElement)("div",{className:"doc lead"},"Every builder needs a builder header, which contains basic navigation elements. It also shows the builder type and content name."),(0,n.createElement)(s.A,{exampleOnly:!0,isViewport:!0,demoStyles:se},(0,l.NO)(ce)),me({id:"About-Builder-Header"},"About Builder Header"),he({},"To learn more about the Builder pattern in general, check out our ",de({href:"/guidelines/builder/overview/"},"guidelines"),", which includes a section about how to use the ",de({href:"/guidelines/builder/header/"},"Builder Header"),"."),me({id:"Base"},"Base"),(0,n.createElement)(s.A,{isViewport:!0,demoStyles:se},(0,l.NO)(ie)),me({id:"With-open-dropdown-menu"},"With open dropdown menu"),(0,n.createElement)(s.A,{isViewport:!0,demoStyles:se},(0,l.NO)(le,"menu-open")),me({id:"With-tooltip"},"With tooltip"),he({},'Use hover text to show where the builder has launched from. If the builder launches from only one location, hover text should read "Back."'),(0,n.createElement)(i.A,{type:"a11y",header:"Accessibility Note"},(0,n.createElement)("p",null,"The back action's ",(0,n.createElement)("code",null,"aria-describedby")," attribute must share the same value as the tooltip's ",(0,n.createElement)("code",null,"ID"),".")),(0,n.createElement)(s.A,{isViewport:!0,demoStyles:se},(0,l.NO)(le,"has-tooltip")),me({id:"Variations"},"Variations"),pe({id:"With-a-Truncated-Name"},"With a Truncated Name"),(0,n.createElement)(s.A,{isViewport:!0,demoStyles:se},(0,l.NO)(le,"with-truncation")),pe({id:"With-a-Toolbar"},"With a Toolbar"),(0,n.createElement)(s.A,{isViewport:!0,demoStyles:se},(0,l.NO)(ce)),pe({id:"With-Status-text"},"With Status text"),he({},"Use status text and alerts with action buttons to reinforce status notifications, warnings, and errors."),he({},"A status text can include:"),ye({},be({},'A file (version) state, such as active, inactive, draft (e.g. "Inactive - Modified a few seconds ago")'),be({},"Action, plus Last Modified Time, represented with ",de({href:"https://developer.salesforce.com/docs/component-library/bundle/lightning:relativeDateTime/example"},"relativeDateTime"),'. (e.g. "Saved 1 day ago")')),he({},"When the user hovers or focuses status text, use a tooltip to communicate additional details (e.g., Version 2 saved by Johnny Appleseed Today 9:00 AM)."),(0,n.createElement)(i.A,{type:"a11y",header:"Accessibility Note"},(0,n.createElement)("p",null,"The status text's ",(0,n.createElement)("code",null,"aria-describedby")," attribute must share the same value as the tooltip's ",(0,n.createElement)("code",null,"ID"),".")),(0,n.createElement)(s.A,{isViewport:!0,demoStyles:se},(0,l.NO)(ue,"has-status-text")),pe({id:"With-Alert"},"With Alert"),he({},"If the canvas or a canvas element generates a warning or error, an alert icon appears in the toolbar. Clicking or accessing by keyboard a popover's trigger element opens the popover."),(0,n.createElement)(i.A,{type:"a11y",header:"Accessibility Note"},(0,n.createElement)("p",null,"When a popover is invoked, keyboard focus is moved into the popover and remains trapped until it is closed by the ",(0,n.createElement)("strong",null,"close button")," or"," ",(0,n.createElement)("strong",null,"escape")," key. After the popover is closed, focus is returned to the original triggering element.")),fe({id:"Warning"},"Warning"),(0,n.createElement)(s.A,{isViewport:!0,demoStyles:se},(0,l.NO)(ue,"has-status-text-with-warning")),fe({id:"Error"},"Error"),he({},"When a user attempts to perform an action (e.g. save) and errors are present, an error popover is invoked and actions are disabled."),(0,n.createElement)(s.A,{isViewport:!0,demoStyles:se},(0,l.NO)(ue,"has-status-text-with-error")),fe({id:"Warning-and-Error"},"Warning and Error"),(0,n.createElement)(s.A,{isViewport:!0,demoStyles:se},(0,l.NO)(ue,"has-status-text-with-warning-and-error")))},Ee=function(){return(0,a.Qr)(ve())}},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM}},o={};function a(e){var t=o[e];if(void 0!==t)return t.exports;var r=o[e]={id:e,exports:{}};return n[e](r,r.exports,a),r.exports}a.m=n,a.amdO={},e=[],a.O=function(t,r,n,o){if(!r){var s=1/0;for(u=0;u<e.length;u++){r=e[u][0],n=e[u][1],o=e[u][2];for(var i=!0,l=0;l<r.length;l++)(!1&o||s>=o)&&Object.keys(a.O).every(function(e){return a.O[e](r[l])})?r.splice(l--,1):(i=!1,o<s&&(s=o));if(i){e.splice(u--,1);var c=n();void 0!==c&&(t=c)}}return t}o=o||0;for(var u=e.length;u>0&&e[u-1][2]>o;u--)e[u]=e[u-1];e[u]=[r,n,o]},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,{a:t}),t},r=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},a.t=function(e,n){if(1&n&&(e=this(e)),8&n)return e;if("object"==typeof e&&e){if(4&n&&e.__esModule)return e;if(16&n&&"function"==typeof e.then)return e}var o=Object.create(null);a.r(o);var s={};t=t||[null,r({}),r([]),r(r)];for(var i=2&n&&e;("object"==typeof i||"function"==typeof i)&&!~t.indexOf(i);i=r(i))Object.getOwnPropertyNames(i).forEach(function(t){s[t]=function(){return e[t]}});return s.default=function(){return e},a.d(o,s),o},a.d=function(e,t){for(var r in t)a.o(t,r)&&!a.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},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=7878,function(){var e={7878:0};a.O.j=function(t){return 0===e[t]};var t=function(t,r){var n,o,s=r[0],i=r[1],l=r[2],c=0;if(s.some(function(t){return 0!==e[t]})){for(n in i)a.o(i,n)&&(a.m[n]=i[n]);if(l)var u=l(a)}for(t&&t(r);c<s.length;c++)o=s[c],a.o(e,o)&&e[o]&&e[o][0](),e[o]=0;return a.O(u)},r=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))}(),a.nc=void 0;var s=a.O(void 0,[3540],function(){return a(1869)});s=a.O(s),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/builder-header/docs.mdx.js"]=s}();