npm - @salesforce-ux/design-system - Versions diffs - 2.29.0 → 2.29.1 - Mend

@salesforce-ux/design-system 2.29.0 → 2.29.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (754) hide show

package/__internal/chunked/docs/ui/components/panels/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS;!function(){"use strict";var e,t,n,l={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},3910:function(e,t,n){n.r(t),n.d(t,{getContents:function(){return Y},getElement:function(){return $}});var l=n(1594),i=n.n(l),a=n(5671),o=n(6547),r=n(3212),s=n(806),d=n(1374),c=n(5619),m=n(7412),h=n.n(m),u=n(942),p=n.n(u),f=n(6333),y=n.n(f),b=n(6955);function g(e,t){(null==t\|\|t>e.length)&&(t=e.length);for(var n=0,l=Array(t);n<t;n++)l[n]=e[n];return l}var v=function(e){return i().createElement("div",{className:p()("slds-panel",e.size&&"slds-size_".concat(e.size),e.docked&&"slds-panel_docked slds-panel_docked-".concat(e.docked),e.isAnimated&&"slds-panel_animated",e.drawer&&"slds-panel_drawer",e.isVisible?"slds-is-open":"slds-hidden"),hidden:!e.isVisible,id:e.id},e.children)},E=function(e){var t=e.children;return i().createElement("div",{className:"slds-panel__header-actions"},t)},_=function(e){var t=e.symbol,n=e.handleVisibility,l=e.title,a=p()({"slds-panel__back":"back"===t\|\|"chevronleft"===t,"slds-panel__close":"close"===t});return i().createElement(b.A,{key:"panel-header-close-button",className:a,symbol:t,size:"small",assistiveText:"Collapse ".concat(l),title:"Collapse ".concat(l),onClick:n})};_.propTypes={symbol:h().oneOf(["back","chevronleft","close"]),handleVisibility:h().func,title:h().string};var k=function(e){return i().createElement("h2",{className:"slds-panel__header-title slds-text-heading_small slds-truncate",key:"panel-header-title",title:e.title},e.title)},w=function(e){var t="close",n=i().createElement(i().Fragment,null,i().createElement(k,{title:e.title}),i().createElement(E,null,e.headerActions,i().createElement(_,{title:e.title,handleVisibility:e.handleVisibility,symbol:t})));return"drill-in"===e.invoke&&(n=e.isInvokedByTab?i().createElement(i().Fragment,null,i().createElement(_,{title:e.title,handleVisibility:e.handleVisibility,symbol:e.iconBack}),i().createElement(k,{title:e.title})):i().createElement(i().Fragment,null,i().createElement(_,{title:e.title,handleVisibility:e.handleVisibility,symbol:e.iconBack}),i().createElement(k,{title:e.title}),i().createElement(E,null,e.headerActions,i().createElement(_,{title:e.title,handleVisibility:e.handleVisibility,symbol:t})))),i().createElement("div",{className:p()("slds-panel__header",e.hasCenterTitle&&"slds-panel__header_align-center",e.customHeader&&"slds-panel__header_custom")},e.customHeader?e.customHeader:n)},A=function(e){var t=e.title,n=e.closeSymbol,l=e.hasCenterTitle,a=e.customHeader;return i().createElement("div",{className:p()("slds-panel__header",l&&"slds-panel__header_align-center",a&&"slds-panel__header_custom")},a\|\|i().createElement(i().Fragment,null,i().createElement(k,{title:t}),i().createElement(_,{title:t,symbol:n})))};A.propTypes={title:h().string,closeSymbol:h().string,hasCenterTitle:h().bool,customHeader:h().node},A.defaultProps={title:"Deprecated Panel Header",closeSymbol:"close"};var S=function(e){return i().createElement("div",{className:"slds-panel__body"},e.children)},x=function(e){var t=e.size,n=e.title,l=e.docked,a=e.invoke,o=e.drawer,r=e.isVisible,s=void 0===r\|\|r,d=e.handleVisibility,c=e.customHeader,m=e.children,h=e.isAnimated,u=e.hasCenterTitle,p=e.isInvokedByTab,f=e.iconBack,y=e.headerActions,b=e.headerSlot,g=e.id;return i().createElement(v,{docked:l,drawer:o,size:t,invoke:a,isVisible:s,isAnimated:h,id:g},b\|\|i().createElement(w,{title:n,docked:l,invoke:a,customHeader:c,handleVisibility:d,hasCenterTitle:u,isInvokedByTab:p,iconBack:f,headerActions:y}),i().createElement(S,null,m))};x.propTypes={size:h().oneOf(["small","medium","large","x-large","full"]),docked:h().oneOf(["left","right","bottom"]),invoke:h().oneOf(["drill-in","toggle"]),hasCenterTitle:h().bool,isInvokedByTab:h().bool,iconBack:h().string,headerActions:h().node,headerSlot:h().node,id:h().string},x.defaultProps={iconBack:"chevronleft"};var T=x,P=function(e){var t,n,a=e.size,o=e.title,r=e.docked,s=e.invoke,d=e.drawer,c=e.hasCenterTitle,m=e.icon,h=e.iconTitle,u=e.children,f=(t=(0,l.useState)(!0),n=2,function(e){if(Array.isArray(e))return e}(t)\|\|function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]\|\|e["@@iterator"];if(null!=n){var l,i,a,o,r=[],s=!0,d=!1;try{if(a=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;s=!1}else for(;!(s=(l=a.call(n)).done)&&(r.push(l.value),r.length!==t);s=!0);}catch(e){d=!0,i=e}finally{try{if(!s&&null!=n.return&&(o=n.return(),Object(o)!==o))return}finally{if(d)throw i}}return r}}(t,n)\|\|function(e,t){if(e){if("string"==typeof e)return g(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n\|\|"Set"===n?Array.from(e):"Arguments"===n\|\|/^(?:Ui\|I)nt(?:8\|16\|32)(?:Clamped)?Array$/.test(n)?g(e,t):void 0}}(t,n)\|\|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.")}()),v=f[0],E=f[1],_=y()("example-unique-id-"),k=p()("demo-only-element","slds-theme_default","slds-border_bottom","slds-p-around_small",{"slds-text-align_right":"right"===r}),w=function(){return E(!v)},A={backgroundColor:"#fafaf9",position:"relative",height:"600px",overflow:"hidden",display:"flex",flexDirection:"right"===r&&"row-reverse"};return i().createElement(i().Fragment,null,i().createElement("header",{className:k,style:{zIndex:"1"}},i().createElement(b.A,{theme:"neutral",selected:v,symbol:m,title:h,className:"slds-button_icon-border",onClick:w,"aria-expanded":v,"aria-controls":_,"aria-pressed":v})),i().createElement("div",{className:"demo-only-element",style:A},i().createElement(x,{isVisible:v,size:a,title:o,docked:r,invoke:s,drawer:d,handleVisibility:w,hasCenterTitle:c,id:_},u),i().createElement("div",{className:"demo-only-content slds-col slds-p-around_medium"},"This section is demo-only content representing a custom layout in conjunction with the panel. It is not a part of the blueprint.")))};P.propTypes={size:h().string,title:h().string,docked:h().string,invoke:h().string,drawer:h().bool,hasCenterTitle:h().bool,icon:h().string,iconTitle:h().string,children:h().node},P.defaultProps={size:"medium",title:"Panel Header",docked:"left",invoke:"toggle",icon:"toggle_panel_left",iconTitle:"Toggle panel",children:"A panel body accepts any layout or component"},n(8347),n(3375);var N=function(e){return i().createElement("div",{className:p()("slds-filters",e.className)},e.children)},O=function(e){return i().createElement("div",{className:"slds-filters__footer slds-grid slds-shrink-none"},i().createElement("button",{className:"slds-button_reset slds-text-link"},"Add Filter"),i().createElement("button",{className:"slds-button_reset slds-text-link slds-col_bump-left"},"Remove All"))},z=function(e){var t;return e.errorMessage&&(t="error-filter-01"),i().createElement("li",{className:"slds-item slds-hint-parent"},i().createElement("div",{className:p()("slds-filters__item slds-grid slds-grid_vertical-align-center",e.className)},i().createElement("button",{className:"slds-button_reset slds-grow slds-has-blur-focus","aria-describedby":t,disabled:e.disabled},i().createElement("span",{className:"slds-assistive-text"},"Edit filter:"),e.type&&e.operator&&i().createElement("span",{className:"slds-show"},i().createElement("span",null,i().createElement("strong",null,e.operator+" ")),i().createElement("span",{className:"slds-text-body_small"},e.type)),e.type&&!e.operator?i().createElement("span",{className:"slds-show slds-text-body_small"},e.type):null,i().createElement("span",{className:"slds-show"},e.children)),e.removable?i().createElement(b.A,{className:"slds-button_icon slds-button_icon-small",iconClassName:"slds-button__icon_hint",symbol:"delete",assistiveText:e.type?"Remove filter: "+e.type+" "+e.children:"Remove filter: "+e.children,title:"Remove "+e.children}):null),e.errorMessage?i().createElement("p",{id:t,className:"slds-text-color_error slds-m-top_xx-small"},e.errorMessage):null)},B=n(4760),C="\n background-color: #fafaf9;\n overflow: hidden;\n",H=[{id:"with-centered-title",label:"With Centered Title",element:i().createElement(P,{hasCenterTitle:!0})},{id:"with-truncated-title",label:"With Truncated Title",element:i().createElement(P,{title:"Panel Header with a really, really long name"})},{id:"with-secondary-actions",label:"With Secondary Actions",demoStyles:"".concat(C," height: 240px;"),storybookStyles:!0,element:i().createElement(T,{size:"medium",title:"Panel Header",docked:"left",invoke:"toggle",headerActions:i().createElement(B.hu,{position:"right",size:"small",isOpen:!0})},"A panel body accepts any layout or component")},{id:"with-drilled-in-left",label:"With Drilled-In State - Position Left",demoStyles:"".concat(C," height: 200px;"),storybookStyles:!0,element:i().createElement(T,{size:"medium",title:"Panel Header",docked:"left",invoke:"drill-in"},"A panel body accepts any layout or component")},{id:"with-drilled-in-left-secondary-actions",label:"With Drilled-In State & Secondary Actions - Position left",demoStyles:"".concat(C," height: 200px;"),storybookStyles:!0,element:i().createElement(T,{size:"medium",title:"Panel Header",docked:"left",invoke:"drill-in",headerActions:i().createElement(B.hu,{size:"small",position:"right",isOpen:!0})},"A panel body accepts any layout or component")},{id:"with-drilled-in-right",label:"With Drilled-In State - Position Right",demoStyles:"".concat(C," height: 200px;"),storybookStyles:!0,element:i().createElement(T,{size:"medium",title:"Panel Header",docked:"right",invoke:"drill-in"},"A panel body accepts any layout or component")},{id:"drawer",label:"Open as a drawer",element:i().createElement(P,{drawer:!0})},{id:"deprecated-panel-header",label:"DEPRECATED - Panel Header",element:i().createElement(T,{size:"medium",docked:"left",headerSlot:i().createElement(A,null)},"A panel body accepts any layout or component")}],I=a.XB.a,j=a.XB.code,V=a.XB.h2,D=a.XB.h3,R=a.XB.h4,X=a.XB.li,F=a.XB.ol,L=a.XB.p,W=a.XB.strong,M=a.XB.table,q=a.XB.tbody,G=a.XB.td,J=a.XB.th,U=a.XB.thead,K=a.XB.tr,Q=a.XB.ul,$=function(){return(0,l.createElement)(a.Ay,{},(0,l.createElement)("div",{className:"doc lead"},"A panel is typically used to provide supplemental information or form inputs that relate to your primary canvas."),(0,l.createElement)(o.A,{exampleOnly:!0,demoStyles:" background-color: #fafaf9; position: relative; height: 200px; overflow: hidden; "},(0,l.createElement)(T,{size:"medium",title:"Panel Header",docked:"left",invoke:"toggle"},"A panel body accepts any layout or component")),V({id:"About-Panel"},"About Panel"),L({},"A panel is docked to the left/right side of a viewport and is in the document flow of the canvas or main content."),L({},W({},"Use this component when:")),F({},X({},"The canvas content extends beyond the boundaries of the viewport, while panning and zooming is supported"),X({},"It is not important to see canvas content while completing the task in a Panel"),X({},"The task performed in a Panel is momentary")),L({},"Toggling visibility of a Panel will re-flow the main content."),L({},"The panel should take up 100% of the height of its parent container. In most cases, that would be the viewport or main stage of your application."),(0,l.createElement)(c.A,{type:"note",header:"Implementation Note"},(0,l.createElement)("p",null,"The panel blueprint does not have an opinion about your app's layout. It is up to you to add the panel to your project's structure while adhering to our guidelines. For example, the"," ",(0,l.createElement)("a",{href:"#Panel-Visibility"},"visibility section")," showcases a panel implemented within a demo container using a ",(0,l.createElement)("code",null,"flex")," layout.")),D({id:"Accessibility"},"Accessibility"),L({},"When managing the visibility of the panel, there are a few essential accessibility elements to make sure are in place:"),Q({},X({},"When the panel is not visible, set its ",j({},"aria-hidden")," attribute to ",j({},"true"),", and when visible, set ",j({},"aria-hidden")," to ",j({},"false"),"."),X({},"If the panel's visibility is triggered by an element, the triggering element must be focusable with ",j({},"aria-controls")," set to the unique ID of the panel and ",j({},"aria-expanded")," set to either ",j({},"true")," or ",j({},"false")," depending on the visibility of the panel."),X({},"When toggling a panel open, place the user's focus inside the first focusable element within the panel that isn't the close button. If the close button is the only focusable element, place focus there. Return focus to the triggering element when the panel closes.")),V({id:"Base"},"Base"),(0,l.createElement)(d.A,{title:"Panel base"},(0,l.createElement)(o.A,{demoStyles:" background-color: #fafaf9; position: relative; height: 600px; overflow: hidden; "},(0,l.createElement)(T,{size:"medium",title:"Panel Header",docked:"left",invoke:"toggle"},"A panel body accepts any layout or component"))),V({id:"Header"},"Header"),L({},"The header is docked to the top of its panel. When the content of the panel body becomes overflowed, the body will provide scrolling while the header remains visible in place."),L({},"The header of a left/right docked panel has left-aligned text by default and one icon that dismisses the panel. The header title should truncate when it becomes too long for the panel width by using the ",j({},"slds-truncate")," class on the title."),(0,l.createElement)(d.A,{title:"Panel base - header"},(0,l.createElement)(o.A,{demoStyles:" background-color: #fafaf9; position: relative; height: 50px; overflow: hidden; "},(0,l.createElement)(T,{size:"medium",title:"Panel Header",docked:"left",invoke:"toggle"}))),D({id:"Centered-Text"},"Centered Text"),L({},"To center the header title, add the class ",j({},"slds-panel__header_align-center")," to the ",j({},"<div>")," with class ",j({},"slds-panel__header"),"."),(0,l.createElement)(d.A,{title:"Panel base - header"},(0,l.createElement)(o.A,{demoStyles:" background-color: #fafaf9; position: relative; height: 50px; overflow: hidden; "},(0,l.createElement)(T,{size:"medium",title:"Panel Header",docked:"left",invoke:"toggle",hasCenterTitle:!0}))),D({id:"Secondary-Actions"},"Secondary Actions"),L({},"Secondary actions provide a compact way to offer additional actions without the need for a dedicated action toolbar. Actions in the menu apply to the entire component."),(0,l.createElement)(c.A,{type:"a11y",header:"Accessibility Requirement"},(0,l.createElement)("p",null,"Secondary actions use the ",(0,l.createElement)("a",{href:"/components/menus/#Accessibility"},"menu component"),". All of the ",(0,l.createElement)("a",{href:"/components/menus/#Accessibility"},"accessibility guidelines")," for the menu component are pertinent within the context of secondary actions.")),(0,l.createElement)(o.A,{demoStyles:(0,s.GP)(H,"with-secondary-actions")},(0,s.NO)(H,"with-secondary-actions")),D({id:"Custom-Header"},"Custom Header"),L({},"If a panel header requires additional elements outside of a title and close button, The panel header needs to have the class ",j({},"slds-panel__header_custom")," added to ",j({},"slds-panel__header"),". This notifies the component that it has a custom layout in the header."),(0,l.createElement)(r.A,{toggleCode:!1},(0,l.createElement)("div",{className:"slds-panel__header slds-panel__header_custom"},"...")),L({},"The ",j({},"h2")," which contains the title of the panel requires the class ",j({},"slds-panel__header-title"),"."),V({id:"Invoked-via-Toggle"},"Invoked via Toggle"),(0,l.createElement)(c.A,{type:"a11y",header:"Accessibility Requirement"},(0,l.createElement)("p",null,"When toggling the visibility, author must manage user focus by placing the user inside the panel when it opens and returning them to the trigger when it closes.")),D({id:"Positioning"},"Positioning"),L({},"The ",j({},"slds-panel_docked")," element can be positioned on the left or right side of a viewport by adding the class ",j({},"slds-panel_docked-left")," or ",j({},"slds-panel_docked-right"),"."),R({id:"Left-side"},"Left side"),(0,l.createElement)(d.A,{title:"Panel base - left dock toggle"},(0,l.createElement)(o.A,{demoStyles:" background-color: #fafaf9; position: relative; height: 200px; overflow: hidden; "},(0,l.createElement)(T,{size:"medium",title:"Panel Header",docked:"left",invoke:"toggle"},"A panel body accepts any layout or component"))),R({id:"Right-side"},"Right side"),(0,l.createElement)(d.A,{title:"Panel base - right dock toggle"},(0,l.createElement)(o.A,{demoStyles:" background-color: #fafaf9; position: relative; height: 200px; overflow: hidden; "},(0,l.createElement)(T,{size:"medium",title:"Panel Header",docked:"right",invoke:"toggle"},"A panel body accepts any layout or component"))),V({id:"Drilled-In-State"},"Drilled-In State"),(0,l.createElement)(c.A,{type:"note",header:"Design Note"},(0,l.createElement)("p",null,"If the panel has been drilled into, then the panel displays an arrow facing to the left to indicate the direction the user drilled in from.")),(0,l.createElement)(c.A,{type:"a11y",header:"Accessibility Requirement"},(0,l.createElement)("p",null,"When the user drills in, the author must manage user focus by keeping the user inside the panel when it drills in and returning them to the drill-in trigger when it the user presses the back arrow.")),D({id:"Positioning-2"},"Positioning"),R({id:"Left-side-2"},"Left side"),(0,l.createElement)(o.A,{demoStyles:(0,s.GP)(H,"with-drilled-in-left")},(0,s.NO)(H,"with-drilled-in-left")),R({id:"Right-side-2"},"Right side"),(0,l.createElement)(o.A,{demoStyles:(0,s.GP)(H,"with-drilled-in-right")},(0,s.NO)(H,"with-drilled-in-right")),V({id:"Sizing"},"Sizing"),L({},"The panel width can be modified by applying a sizing class to the ",j({},"slds-panel")," element."),L({},"The panels come in 5 different sizes:"),M({},U({},K({},J({},"Width"),J({},"SLDS Class"))),q({},K({},G({},"240px"),G({},j({},"slds-size_small"))),K({},G({},"320px"),G({},j({},"slds-size_medium"))),K({},G({},"400px"),G({},j({},"slds-size_large"))),K({},G({},"640px"),G({},j({},"slds-size_x-large"))),K({},G({},"100%"),G({},j({},"slds-size_full"))))),V({id:"Panel-Visibility"},"Panel Visibility"),D({id:"Open-as-a-drawer"},"Open as a drawer"),L({},"A panel causes reflow by being in the flow of the layout rather than overlaid on top of the content. To achieve this, simply toggle the class ",j({},"slds-is-open")," to the ",j({},"slds-panel_docked")," element."),(0,l.createElement)(o.A,null,(0,l.createElement)(P,{drawer:!0})),V({id:"Panels-for-Filtering"},"Panels for Filtering"),L({},"Filtering lists or reports can be done by using a Filtering expressions inside of a Panel. Check out the ",I({href:"/components/expression/#filtering"},"Filtering expression")," component for different states and accessibility requirements."),(0,l.createElement)(c.A,{type:"a11y",header:"Accessibility Requirement"},(0,l.createElement)("p",null,"Make sure to use assistive text to improve the clarity of what you might be editing, for example, add"," ",(0,l.createElement)("code",null,'<span className="slds-assistive-text">Edit filter:</span>')," ","to the button element inside each filterable object.")),(0,l.createElement)(o.A,null,(0,l.createElement)(P,{size:"medium",title:"Filter",docked:"right",invoke:"toggle",icon:"filterList",iconTitle:"Toggle filter panel",drawer:!0},(0,l.createElement)(N,null,(0,l.createElement)("ol",{className:"slds-list_vertical slds-list_vertical-space"},(0,l.createElement)(z,{type:"Show Me"},"All Products")),(0,l.createElement)("h3",{className:"slds-text-body_small slds-m-vertical_x-small"},"Matching all these filters"),(0,l.createElement)("ol",{className:"slds-list_vertical slds-list_vertical-space"},(0,l.createElement)(z,{type:"Created Date",removable:!0},"equals THIS WEEK"),(0,l.createElement)(z,{type:"List Price",removable:!0},'greater than "500"')),(0,l.createElement)(O,null)))))},Y=function(){return(0,a.Qr)($())}},5206:function(e){e.exports=ReactDOM}},i={};function a(e){var t=i[e];if(void 0!==t)return t.exports;var n=i[e]={id:e,exports:{}};return l[e](n,n.exports,a),n.exports}a.m=l,a.amdO={},e=[],a.O=function(t,n,l,i){if(!n){var o=1/0;for(c=0;c<e.length;c++){n=e[c][0],l=e[c][1],i=e[c][2];for(var r=!0,s=0;s<n.length;s++)(!1&i\|\|o>=i)&&Object.keys(a.O).every(function(e){return a.O[e](n[s])})?n.splice(s--,1):(r=!1,i<o&&(o=i));if(r){e.splice(c--,1);var d=l();void 0!==d&&(t=d)}}return t}i=i\|\|0;for(var c=e.length;c>0&&e[c-1][2]>i;c--)e[c]=e[c-1];e[c]=[n,l,i]},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,{a:t}),t},n=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 i=Object.create(null);a.r(i);var o={};t=t\|\|[null,n({}),n([]),n(n)];for(var r=2&l&&e;("object"==typeof r\|\|"function"==typeof r)&&!~t.indexOf(r);r=n(r))Object.getOwnPropertyNames(r).forEach(function(t){o[t]=function(){return e[t]}});return o.default=function(){return e},a.d(i,o),i},a.d=function(e,t){for(var n in t)a.o(t,n)&&!a.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},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=4194,function(){var e={4194:0};a.O.j=function(t){return 0===e[t]};var t=function(t,n){var l,i,o=n[0],r=n[1],s=n[2],d=0;if(o.some(function(t){return 0!==e[t]})){for(l in r)a.o(r,l)&&(a.m[l]=r[l]);if(s)var c=s(a)}for(t&&t(n);d<o.length;d++)i=o[d],a.o(e,i)&&e[i]&&e[i][0](),e[i]=0;return a.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))}(),a.nc=void 0;var o=a.O(void 0,[3540],function(){return a(3910)});o=a.O(o),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/panels/docs.mdx.js"]=o}();
1	+ var SLDS;!function(){"use strict";var e,t,n,l={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},3910:function(e,t,n){n.r(t),n.d(t,{getContents:function(){return Y},getElement:function(){return $}});var l=n(1594),i=n.n(l),a=n(5671),o=n(6547),r=n(3212),s=n(806),d=n(1374),c=n(5619),m=n(4187),h=n.n(m),u=n(942),p=n.n(u),f=n(6333),y=n.n(f),b=n(6955);function g(e,t){(null==t\|\|t>e.length)&&(t=e.length);for(var n=0,l=Array(t);n<t;n++)l[n]=e[n];return l}var v=function(e){return i().createElement("div",{className:p()("slds-panel",e.size&&"slds-size_".concat(e.size),e.docked&&"slds-panel_docked slds-panel_docked-".concat(e.docked),e.isAnimated&&"slds-panel_animated",e.drawer&&"slds-panel_drawer",e.isVisible?"slds-is-open":"slds-hidden"),hidden:!e.isVisible,id:e.id},e.children)},E=function(e){var t=e.children;return i().createElement("div",{className:"slds-panel__header-actions"},t)},_=function(e){var t=e.symbol,n=e.handleVisibility,l=e.title,a=p()({"slds-panel__back":"back"===t\|\|"chevronleft"===t,"slds-panel__close":"close"===t});return i().createElement(b.A,{key:"panel-header-close-button",className:a,symbol:t,size:"small",assistiveText:"Collapse ".concat(l),title:"Collapse ".concat(l),onClick:n})};_.propTypes={symbol:h().oneOf(["back","chevronleft","close"]),handleVisibility:h().func,title:h().string};var k=function(e){return i().createElement("h2",{className:"slds-panel__header-title slds-text-heading_small slds-truncate",key:"panel-header-title",title:e.title},e.title)},w=function(e){var t="close",n=i().createElement(i().Fragment,null,i().createElement(k,{title:e.title}),i().createElement(E,null,e.headerActions,i().createElement(_,{title:e.title,handleVisibility:e.handleVisibility,symbol:t})));return"drill-in"===e.invoke&&(n=e.isInvokedByTab?i().createElement(i().Fragment,null,i().createElement(_,{title:e.title,handleVisibility:e.handleVisibility,symbol:e.iconBack}),i().createElement(k,{title:e.title})):i().createElement(i().Fragment,null,i().createElement(_,{title:e.title,handleVisibility:e.handleVisibility,symbol:e.iconBack}),i().createElement(k,{title:e.title}),i().createElement(E,null,e.headerActions,i().createElement(_,{title:e.title,handleVisibility:e.handleVisibility,symbol:t})))),i().createElement("div",{className:p()("slds-panel__header",e.hasCenterTitle&&"slds-panel__header_align-center",e.customHeader&&"slds-panel__header_custom")},e.customHeader?e.customHeader:n)},A=function(e){var t=e.title,n=e.closeSymbol,l=e.hasCenterTitle,a=e.customHeader;return i().createElement("div",{className:p()("slds-panel__header",l&&"slds-panel__header_align-center",a&&"slds-panel__header_custom")},a\|\|i().createElement(i().Fragment,null,i().createElement(k,{title:t}),i().createElement(_,{title:t,symbol:n})))};A.propTypes={title:h().string,closeSymbol:h().string,hasCenterTitle:h().bool,customHeader:h().node},A.defaultProps={title:"Deprecated Panel Header",closeSymbol:"close"};var S=function(e){return i().createElement("div",{className:"slds-panel__body"},e.children)},x=function(e){var t=e.size,n=e.title,l=e.docked,a=e.invoke,o=e.drawer,r=e.isVisible,s=void 0===r\|\|r,d=e.handleVisibility,c=e.customHeader,m=e.children,h=e.isAnimated,u=e.hasCenterTitle,p=e.isInvokedByTab,f=e.iconBack,y=e.headerActions,b=e.headerSlot,g=e.id;return i().createElement(v,{docked:l,drawer:o,size:t,invoke:a,isVisible:s,isAnimated:h,id:g},b\|\|i().createElement(w,{title:n,docked:l,invoke:a,customHeader:c,handleVisibility:d,hasCenterTitle:u,isInvokedByTab:p,iconBack:f,headerActions:y}),i().createElement(S,null,m))};x.propTypes={size:h().oneOf(["small","medium","large","x-large","full"]),docked:h().oneOf(["left","right","bottom"]),invoke:h().oneOf(["drill-in","toggle"]),hasCenterTitle:h().bool,isInvokedByTab:h().bool,iconBack:h().string,headerActions:h().node,headerSlot:h().node,id:h().string},x.defaultProps={iconBack:"chevronleft"};var T=x,P=function(e){var t,n,a=e.size,o=e.title,r=e.docked,s=e.invoke,d=e.drawer,c=e.hasCenterTitle,m=e.icon,h=e.iconTitle,u=e.children,f=(t=(0,l.useState)(!0),n=2,function(e){if(Array.isArray(e))return e}(t)\|\|function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]\|\|e["@@iterator"];if(null!=n){var l,i,a,o,r=[],s=!0,d=!1;try{if(a=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;s=!1}else for(;!(s=(l=a.call(n)).done)&&(r.push(l.value),r.length!==t);s=!0);}catch(e){d=!0,i=e}finally{try{if(!s&&null!=n.return&&(o=n.return(),Object(o)!==o))return}finally{if(d)throw i}}return r}}(t,n)\|\|function(e,t){if(e){if("string"==typeof e)return g(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n\|\|"Set"===n?Array.from(e):"Arguments"===n\|\|/^(?:Ui\|I)nt(?:8\|16\|32)(?:Clamped)?Array$/.test(n)?g(e,t):void 0}}(t,n)\|\|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.")}()),v=f[0],E=f[1],_=y()("example-unique-id-"),k=p()("demo-only-element","slds-theme_default","slds-border_bottom","slds-p-around_small",{"slds-text-align_right":"right"===r}),w=function(){return E(!v)},A={backgroundColor:"#fafaf9",position:"relative",height:"600px",overflow:"hidden",display:"flex",flexDirection:"right"===r&&"row-reverse"};return i().createElement(i().Fragment,null,i().createElement("header",{className:k,style:{zIndex:"1"}},i().createElement(b.A,{theme:"neutral",selected:v,symbol:m,title:h,className:"slds-button_icon-border",onClick:w,"aria-expanded":v,"aria-controls":_,"aria-pressed":v})),i().createElement("div",{className:"demo-only-element",style:A},i().createElement(x,{isVisible:v,size:a,title:o,docked:r,invoke:s,drawer:d,handleVisibility:w,hasCenterTitle:c,id:_},u),i().createElement("div",{className:"demo-only-content slds-col slds-p-around_medium"},"This section is demo-only content representing a custom layout in conjunction with the panel. It is not a part of the blueprint.")))};P.propTypes={size:h().string,title:h().string,docked:h().string,invoke:h().string,drawer:h().bool,hasCenterTitle:h().bool,icon:h().string,iconTitle:h().string,children:h().node},P.defaultProps={size:"medium",title:"Panel Header",docked:"left",invoke:"toggle",icon:"toggle_panel_left",iconTitle:"Toggle panel",children:"A panel body accepts any layout or component"},n(8347),n(3375);var N=function(e){return i().createElement("div",{className:p()("slds-filters",e.className)},e.children)},O=function(e){return i().createElement("div",{className:"slds-filters__footer slds-grid slds-shrink-none"},i().createElement("button",{className:"slds-button_reset slds-text-link"},"Add Filter"),i().createElement("button",{className:"slds-button_reset slds-text-link slds-col_bump-left"},"Remove All"))},z=function(e){var t;return e.errorMessage&&(t="error-filter-01"),i().createElement("li",{className:"slds-item slds-hint-parent"},i().createElement("div",{className:p()("slds-filters__item slds-grid slds-grid_vertical-align-center",e.className)},i().createElement("button",{className:"slds-button_reset slds-grow slds-has-blur-focus","aria-describedby":t,disabled:e.disabled},i().createElement("span",{className:"slds-assistive-text"},"Edit filter:"),e.type&&e.operator&&i().createElement("span",{className:"slds-show"},i().createElement("span",null,i().createElement("strong",null,e.operator+" ")),i().createElement("span",{className:"slds-text-body_small"},e.type)),e.type&&!e.operator?i().createElement("span",{className:"slds-show slds-text-body_small"},e.type):null,i().createElement("span",{className:"slds-show"},e.children)),e.removable?i().createElement(b.A,{className:"slds-button_icon slds-button_icon-small",iconClassName:"slds-button__icon_hint",symbol:"delete",assistiveText:e.type?"Remove filter: "+e.type+" "+e.children:"Remove filter: "+e.children,title:"Remove "+e.children}):null),e.errorMessage?i().createElement("p",{id:t,className:"slds-text-color_error slds-m-top_xx-small"},e.errorMessage):null)},B=n(4760),C="\n background-color: #fafaf9;\n overflow: hidden;\n",H=[{id:"with-centered-title",label:"With Centered Title",element:i().createElement(P,{hasCenterTitle:!0})},{id:"with-truncated-title",label:"With Truncated Title",element:i().createElement(P,{title:"Panel Header with a really, really long name"})},{id:"with-secondary-actions",label:"With Secondary Actions",demoStyles:"".concat(C," height: 240px;"),storybookStyles:!0,element:i().createElement(T,{size:"medium",title:"Panel Header",docked:"left",invoke:"toggle",headerActions:i().createElement(B.hu,{position:"right",size:"small",isOpen:!0})},"A panel body accepts any layout or component")},{id:"with-drilled-in-left",label:"With Drilled-In State - Position Left",demoStyles:"".concat(C," height: 200px;"),storybookStyles:!0,element:i().createElement(T,{size:"medium",title:"Panel Header",docked:"left",invoke:"drill-in"},"A panel body accepts any layout or component")},{id:"with-drilled-in-left-secondary-actions",label:"With Drilled-In State & Secondary Actions - Position left",demoStyles:"".concat(C," height: 200px;"),storybookStyles:!0,element:i().createElement(T,{size:"medium",title:"Panel Header",docked:"left",invoke:"drill-in",headerActions:i().createElement(B.hu,{size:"small",position:"right",isOpen:!0})},"A panel body accepts any layout or component")},{id:"with-drilled-in-right",label:"With Drilled-In State - Position Right",demoStyles:"".concat(C," height: 200px;"),storybookStyles:!0,element:i().createElement(T,{size:"medium",title:"Panel Header",docked:"right",invoke:"drill-in"},"A panel body accepts any layout or component")},{id:"drawer",label:"Open as a drawer",element:i().createElement(P,{drawer:!0})},{id:"deprecated-panel-header",label:"DEPRECATED - Panel Header",element:i().createElement(T,{size:"medium",docked:"left",headerSlot:i().createElement(A,null)},"A panel body accepts any layout or component")}],I=a.XB.a,j=a.XB.code,V=a.XB.h2,D=a.XB.h3,R=a.XB.h4,X=a.XB.li,F=a.XB.ol,L=a.XB.p,W=a.XB.strong,M=a.XB.table,q=a.XB.tbody,G=a.XB.td,J=a.XB.th,U=a.XB.thead,K=a.XB.tr,Q=a.XB.ul,$=function(){return(0,l.createElement)(a.Ay,{},(0,l.createElement)("div",{className:"doc lead"},"A panel is typically used to provide supplemental information or form inputs that relate to your primary canvas."),(0,l.createElement)(o.A,{exampleOnly:!0,demoStyles:" background-color: #fafaf9; position: relative; height: 200px; overflow: hidden; "},(0,l.createElement)(T,{size:"medium",title:"Panel Header",docked:"left",invoke:"toggle"},"A panel body accepts any layout or component")),V({id:"About-Panel"},"About Panel"),L({},"A panel is docked to the left/right side of a viewport and is in the document flow of the canvas or main content."),L({},W({},"Use this component when:")),F({},X({},"The canvas content extends beyond the boundaries of the viewport, while panning and zooming is supported"),X({},"It is not important to see canvas content while completing the task in a Panel"),X({},"The task performed in a Panel is momentary")),L({},"Toggling visibility of a Panel will re-flow the main content."),L({},"The panel should take up 100% of the height of its parent container. In most cases, that would be the viewport or main stage of your application."),(0,l.createElement)(c.A,{type:"note",header:"Implementation Note"},(0,l.createElement)("p",null,"The panel blueprint does not have an opinion about your app's layout. It is up to you to add the panel to your project's structure while adhering to our guidelines. For example, the"," ",(0,l.createElement)("a",{href:"#Panel-Visibility"},"visibility section")," showcases a panel implemented within a demo container using a ",(0,l.createElement)("code",null,"flex")," layout.")),D({id:"Accessibility"},"Accessibility"),L({},"When managing the visibility of the panel, there are a few essential accessibility elements to make sure are in place:"),Q({},X({},"When the panel is not visible, set its ",j({},"aria-hidden")," attribute to ",j({},"true"),", and when visible, set ",j({},"aria-hidden")," to ",j({},"false"),"."),X({},"If the panel's visibility is triggered by an element, the triggering element must be focusable with ",j({},"aria-controls")," set to the unique ID of the panel and ",j({},"aria-expanded")," set to either ",j({},"true")," or ",j({},"false")," depending on the visibility of the panel."),X({},"When toggling a panel open, place the user's focus inside the first focusable element within the panel that isn't the close button. If the close button is the only focusable element, place focus there. Return focus to the triggering element when the panel closes.")),V({id:"Base"},"Base"),(0,l.createElement)(d.A,{title:"Panel base"},(0,l.createElement)(o.A,{demoStyles:" background-color: #fafaf9; position: relative; height: 600px; overflow: hidden; "},(0,l.createElement)(T,{size:"medium",title:"Panel Header",docked:"left",invoke:"toggle"},"A panel body accepts any layout or component"))),V({id:"Header"},"Header"),L({},"The header is docked to the top of its panel. When the content of the panel body becomes overflowed, the body will provide scrolling while the header remains visible in place."),L({},"The header of a left/right docked panel has left-aligned text by default and one icon that dismisses the panel. The header title should truncate when it becomes too long for the panel width by using the ",j({},"slds-truncate")," class on the title."),(0,l.createElement)(d.A,{title:"Panel base - header"},(0,l.createElement)(o.A,{demoStyles:" background-color: #fafaf9; position: relative; height: 50px; overflow: hidden; "},(0,l.createElement)(T,{size:"medium",title:"Panel Header",docked:"left",invoke:"toggle"}))),D({id:"Centered-Text"},"Centered Text"),L({},"To center the header title, add the class ",j({},"slds-panel__header_align-center")," to the ",j({},"<div>")," with class ",j({},"slds-panel__header"),"."),(0,l.createElement)(d.A,{title:"Panel base - header"},(0,l.createElement)(o.A,{demoStyles:" background-color: #fafaf9; position: relative; height: 50px; overflow: hidden; "},(0,l.createElement)(T,{size:"medium",title:"Panel Header",docked:"left",invoke:"toggle",hasCenterTitle:!0}))),D({id:"Secondary-Actions"},"Secondary Actions"),L({},"Secondary actions provide a compact way to offer additional actions without the need for a dedicated action toolbar. Actions in the menu apply to the entire component."),(0,l.createElement)(c.A,{type:"a11y",header:"Accessibility Requirement"},(0,l.createElement)("p",null,"Secondary actions use the ",(0,l.createElement)("a",{href:"/components/menus/#Accessibility"},"menu component"),". All of the ",(0,l.createElement)("a",{href:"/components/menus/#Accessibility"},"accessibility guidelines")," for the menu component are pertinent within the context of secondary actions.")),(0,l.createElement)(o.A,{demoStyles:(0,s.GP)(H,"with-secondary-actions")},(0,s.NO)(H,"with-secondary-actions")),D({id:"Custom-Header"},"Custom Header"),L({},"If a panel header requires additional elements outside of a title and close button, The panel header needs to have the class ",j({},"slds-panel__header_custom")," added to ",j({},"slds-panel__header"),". This notifies the component that it has a custom layout in the header."),(0,l.createElement)(r.A,{toggleCode:!1},(0,l.createElement)("div",{className:"slds-panel__header slds-panel__header_custom"},"...")),L({},"The ",j({},"h2")," which contains the title of the panel requires the class ",j({},"slds-panel__header-title"),"."),V({id:"Invoked-via-Toggle"},"Invoked via Toggle"),(0,l.createElement)(c.A,{type:"a11y",header:"Accessibility Requirement"},(0,l.createElement)("p",null,"When toggling the visibility, author must manage user focus by placing the user inside the panel when it opens and returning them to the trigger when it closes.")),D({id:"Positioning"},"Positioning"),L({},"The ",j({},"slds-panel_docked")," element can be positioned on the left or right side of a viewport by adding the class ",j({},"slds-panel_docked-left")," or ",j({},"slds-panel_docked-right"),"."),R({id:"Left-side"},"Left side"),(0,l.createElement)(d.A,{title:"Panel base - left dock toggle"},(0,l.createElement)(o.A,{demoStyles:" background-color: #fafaf9; position: relative; height: 200px; overflow: hidden; "},(0,l.createElement)(T,{size:"medium",title:"Panel Header",docked:"left",invoke:"toggle"},"A panel body accepts any layout or component"))),R({id:"Right-side"},"Right side"),(0,l.createElement)(d.A,{title:"Panel base - right dock toggle"},(0,l.createElement)(o.A,{demoStyles:" background-color: #fafaf9; position: relative; height: 200px; overflow: hidden; "},(0,l.createElement)(T,{size:"medium",title:"Panel Header",docked:"right",invoke:"toggle"},"A panel body accepts any layout or component"))),V({id:"Drilled-In-State"},"Drilled-In State"),(0,l.createElement)(c.A,{type:"note",header:"Design Note"},(0,l.createElement)("p",null,"If the panel has been drilled into, then the panel displays an arrow facing to the left to indicate the direction the user drilled in from.")),(0,l.createElement)(c.A,{type:"a11y",header:"Accessibility Requirement"},(0,l.createElement)("p",null,"When the user drills in, the author must manage user focus by keeping the user inside the panel when it drills in and returning them to the drill-in trigger when it the user presses the back arrow.")),D({id:"Positioning-2"},"Positioning"),R({id:"Left-side-2"},"Left side"),(0,l.createElement)(o.A,{demoStyles:(0,s.GP)(H,"with-drilled-in-left")},(0,s.NO)(H,"with-drilled-in-left")),R({id:"Right-side-2"},"Right side"),(0,l.createElement)(o.A,{demoStyles:(0,s.GP)(H,"with-drilled-in-right")},(0,s.NO)(H,"with-drilled-in-right")),V({id:"Sizing"},"Sizing"),L({},"The panel width can be modified by applying a sizing class to the ",j({},"slds-panel")," element."),L({},"The panels come in 5 different sizes:"),M({},U({},K({},J({},"Width"),J({},"SLDS Class"))),q({},K({},G({},"240px"),G({},j({},"slds-size_small"))),K({},G({},"320px"),G({},j({},"slds-size_medium"))),K({},G({},"400px"),G({},j({},"slds-size_large"))),K({},G({},"640px"),G({},j({},"slds-size_x-large"))),K({},G({},"100%"),G({},j({},"slds-size_full"))))),V({id:"Panel-Visibility"},"Panel Visibility"),D({id:"Open-as-a-drawer"},"Open as a drawer"),L({},"A panel causes reflow by being in the flow of the layout rather than overlaid on top of the content. To achieve this, simply toggle the class ",j({},"slds-is-open")," to the ",j({},"slds-panel_docked")," element."),(0,l.createElement)(o.A,null,(0,l.createElement)(P,{drawer:!0})),V({id:"Panels-for-Filtering"},"Panels for Filtering"),L({},"Filtering lists or reports can be done by using a Filtering expressions inside of a Panel. Check out the ",I({href:"/components/expression/#filtering"},"Filtering expression")," component for different states and accessibility requirements."),(0,l.createElement)(c.A,{type:"a11y",header:"Accessibility Requirement"},(0,l.createElement)("p",null,"Make sure to use assistive text to improve the clarity of what you might be editing, for example, add"," ",(0,l.createElement)("code",null,'<span className="slds-assistive-text">Edit filter:</span>')," ","to the button element inside each filterable object.")),(0,l.createElement)(o.A,null,(0,l.createElement)(P,{size:"medium",title:"Filter",docked:"right",invoke:"toggle",icon:"filterList",iconTitle:"Toggle filter panel",drawer:!0},(0,l.createElement)(N,null,(0,l.createElement)("ol",{className:"slds-list_vertical slds-list_vertical-space"},(0,l.createElement)(z,{type:"Show Me"},"All Products")),(0,l.createElement)("h3",{className:"slds-text-body_small slds-m-vertical_x-small"},"Matching all these filters"),(0,l.createElement)("ol",{className:"slds-list_vertical slds-list_vertical-space"},(0,l.createElement)(z,{type:"Created Date",removable:!0},"equals THIS WEEK"),(0,l.createElement)(z,{type:"List Price",removable:!0},'greater than "500"')),(0,l.createElement)(O,null)))))},Y=function(){return(0,a.Qr)($())}},5206:function(e){e.exports=ReactDOM}},i={};function a(e){var t=i[e];if(void 0!==t)return t.exports;var n=i[e]={id:e,exports:{}};return l[e](n,n.exports,a),n.exports}a.m=l,a.amdO={},e=[],a.O=function(t,n,l,i){if(!n){var o=1/0;for(c=0;c<e.length;c++){n=e[c][0],l=e[c][1],i=e[c][2];for(var r=!0,s=0;s<n.length;s++)(!1&i\|\|o>=i)&&Object.keys(a.O).every(function(e){return a.O[e](n[s])})?n.splice(s--,1):(r=!1,i<o&&(o=i));if(r){e.splice(c--,1);var d=l();void 0!==d&&(t=d)}}return t}i=i\|\|0;for(var c=e.length;c>0&&e[c-1][2]>i;c--)e[c]=e[c-1];e[c]=[n,l,i]},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,{a:t}),t},n=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 i=Object.create(null);a.r(i);var o={};t=t\|\|[null,n({}),n([]),n(n)];for(var r=2&l&&e;("object"==typeof r\|\|"function"==typeof r)&&!~t.indexOf(r);r=n(r))Object.getOwnPropertyNames(r).forEach(function(t){o[t]=function(){return e[t]}});return o.default=function(){return e},a.d(i,o),i},a.d=function(e,t){for(var n in t)a.o(t,n)&&!a.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},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=4194,function(){var e={4194:0};a.O.j=function(t){return 0===e[t]};var t=function(t,n){var l,i,o=n[0],r=n[1],s=n[2],d=0;if(o.some(function(t){return 0!==e[t]})){for(l in r)a.o(r,l)&&(a.m[l]=r[l]);if(s)var c=s(a)}for(t&&t(n);d<o.length;d++)i=o[d],a.o(e,i)&&e[i]&&e[i][0](),e[i]=0;return a.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))}(),a.nc=void 0;var o=a.O(void 0,[3540],function(){return a(3910)});o=a.O(o),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/panels/docs.mdx.js"]=o}();

package/__internal/chunked/docs/ui/components/path/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS;!function(){"use strict";var e,t,n,a={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},4399:function(e,t,n){n.r(t),n.d(t,{getContents:function(){return _e},getElement:function(){return Se}});var a=n(1594),l=n.n(a),i=n(5671),o=n(6547),r=(n(3212),n(5619),n(806)),c=n(6895),s=n(4216),u=n(7412),d=n.n(u),p=n(942),m=n.n(p),f=n(9825),h=n(6955),b=n(8347),g=n(2711),y=n(2937);function E(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable\|\|!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,v(a.key),a)}}function v(e){var t=function(e){if("object"!=w(e)\|\|!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=w(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==w(t)?t:t+""}function S(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(S=function(){return!!e})()}function _(e){return _=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__\|\|Object.getPrototypeOf(e)},_(e)}function x(e,t){return x=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},x(e,t)}function w(e){return w="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},w(e)}var O=function(e){return l().createElement("div",{className:"slds-form__row"},e.children)};O.propTypes={children:d().node};var N=function(e){return l().createElement("div",{className:"slds-form__item",role:"listitem"},e.children)};N.propTypes={children:d().node};var P=function(e){var t=e.isRequired,n=e.hasTooltip,a=e.type,i=e.label,o=e.value,r=e.avatar,c=e.link,s=e.timestamp,u=e.hasInlineEdit,d=e.isHorizontal,p=e.isStacked,m=e.column;return l().createElement(g.ZS,{isViewMode:!0,labelContent:i,isEditable:u,hasHint:!0,isRequired:t,hasTooltip:n,isHorizontal:d,isStacked:p,column:m},l().createElement(g.vS,{isLongform:"textarea"===a},r&&l().createElement(y.eu,{className:"slds-avatar_x-small slds-avatar_circle slds-m-right_xx-small"},l().createElement("img",{alt:o,src:r,title:o})),c?l().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"object"===w(o)?o.map(function(e){return l().createElement(l().Fragment,{key:e},e,l().createElement("br",null))}):o):"object"===w(o)&&"richtext"!==a&&"checkbox"!==a?o.map(function(e){return l().createElement(l().Fragment,{key:e},e,l().createElement("br",null))}):o,s&&l().createElement(l().Fragment,null,", ",s)),u&&l().createElement(h.A,{iconClassName:"slds-button__icon_hint",symbol:"edit",assistiveText:"Edit: ".concat(i),title:"Edit: ".concat(i)}))};P.propTypes={isRequired:d().bool,hasTooltip:d().bool,type:d().string,label:d().string,avatar:d().string,link:d().bool,timestamp:d().string,hasInlineEdit:d().bool,isHorizontal:d().bool,isStacked:d().bool,column:d().number};var C=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=_(t),function(e,t){if(t&&("object"==w(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,S()?Reflect.construct(t,n\|\|[],_(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&&x(e,t)}(t,e),n=t,(a=[{key:"render",value:function(){var e=this.props,t=e.snapshot,n=e.isViewMode,a=e.direction,i=e.hasInlineEdit,o=e.isDeprecated;return l().createElement("div",{className:m()("slds-form",o&&"slds-form_".concat(a)),role:"list"},n?t.rows.map(function(e){return l().createElement(O,{key:r.Ay.uniqueId(e.fields.length)},Object.keys(e.fields).map(function(t){return l().createElement(N,{key:e.fields[t].label},e.fields[t].type&&l().createElement(P,{type:e.fields[t].type,label:e.fields[t].label,value:e.fields[t].value,isRequired:e.fields[t].isRequired,hasTooltip:e.fields[t].hasTooltip,avatar:e.fields[t].avatar,link:e.fields[t].link,timestamp:e.fields[t].timestamp,hasInlineEdit:i,isHorizontal:!o&&"horizontal"===a,isStacked:!o&&"stacked"===a,column:e.fields[t].column}))}))}):t.rows.map(function(e,t){return l().createElement(O,{key:r.Ay.uniqueId("detail-row-".concat(t,"-"))},Object.keys(e.fields).map(function(t){return l().createElement(N,{key:e.fields[t].label},e.fields[t].component&&e.fields[t].component)}))}))}}])&&E(n.prototype,a),Object.defineProperty(n,"prototype",{writable:!1}),n;var n,a}(a.Component);C.propTypes={snapshot:d().object,isViewMode:d().bool,direction:d().string,hasInlineEdit:d().bool,isDeprecated:d().bool};var k=C;function T(e){return T="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},T(e)}function j(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable\|\|!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,A(a.key),a)}}function A(e){var t=function(e){if("object"!=T(e)\|\|!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=T(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==T(t)?t:t+""}function R(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(R=function(){return!!e})()}function B(e){return B=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__\|\|Object.getPrototypeOf(e)},B(e)}function I(e,t){return I=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},I(e,t)}var D=function(e){return l().createElement("div",{className:m()("slds-path",{"slds-path_has-coaching":e.hasCoaching,"slds-is-expanded":e.coachingOpen})},e.children)};D.propTypes={hasCoaching:d().bool,coachingOpen:d().bool},D.defaultProps={hasCoaching:!1,coachingOpen:!1};var L=function(e){var t=e.hasCoaching,n=e.coachingOpen,a=e.hasOverflow,i=e.coachingId,o=e.stageName,r=e.actionButtonLabel;return l().createElement("div",{className:m()("slds-grid slds-path__track",{"slds-has-overflow":a})},l().createElement("div",{className:"slds-grid slds-path__scroller-container"},t?l().createElement(h.A,{symbol:"chevronright",theme:"neutral",className:m()("slds-path__trigger",{"slds-path__trigger_open":n}),assistiveText:"Show Details",title:"Toggle Sales Coaching","aria-expanded":n,"aria-controls":i}):null,l().createElement("div",{className:"slds-path__scroller"},l().createElement("div",{className:"slds-path__scroller_inner"},l().createElement("ul",{className:"slds-path__nav",role:"listbox","aria-orientation":"horizontal","aria-labelledby":"slds-path__stage-name"},e.children),a?l().createElement("div",{className:"slds-path__scroll-controls"},l().createElement(h.A,{symbol:"left",theme:"neutral",assistiveText:"Scroll left",title:"Scroll left",tabIndex:"-1"}),l().createElement(h.A,{symbol:"right",theme:"neutral",assistiveText:"Scroll right",title:"Scroll right",tabIndex:"-1"})):null))),l().createElement("div",{className:"slds-grid slds-path__action"},l().createElement("span",{id:"slds-path__stage-name",className:"slds-path__stage-name"},"Stage: ",o),l().createElement(f.$n,{isBrand:!0,className:"slds-path__mark-complete"},r),t?l().createElement(f.$n,{isNeutral:!0,className:"slds-path__trigger-coaching-content","aria-expanded":n,"aria-controls":i},n?"Show Less":"Show More"):null))};L.propTypes={hasCoaching:d().bool,coachingOpen:d().bool,hasOverflow:d().bool,coachingId:d().string,stageName:d().string,actionButtonLabel:d().node},L.defaultProps={hasCoaching:!1,coachingOpen:!1,hasOverflow:!1,coachingId:"",stageName:"Unqualified",actionButtonLabel:l().createElement(a.Fragment,null,l().createElement(b.A,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"check","aria-hidden":"true"}),"Mark Status as Complete")};var W=function(e){function t(){var e;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),(e=function(e,t,n){return t=B(t),function(e,t){if(t&&("object"==T(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,n\|\|[],B(e).constructor):t.apply(e,n))}(this,t)).state={itemRef:null},e}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&&I(e,t)}(t,e),n=t,a=[{key:"componentDidUpdate",value:function(e,t){var n=this.props.setTooltipRef,a=this.state.itemRef;n&&a!==t.itemRef&&n(a)}},{key:"render",value:function(){var e=this,t=this.props,n=t.label,a=t.stepState,i=t.index,o=a.indexOf("active")>-1,r=a.indexOf("complete")>-1,c=a.indexOf("current")>-1,s=null;return r?s="Stage Complete":c&&(s="Current Stage:"),l().createElement("li",{className:m()("slds-path__item",a.map(function(e){return"slds-is-".concat(e)})),role:"presentation",ref:function(t){e.state.itemRef\|\|e.setState({itemRef:t})}},l().createElement("a",{"aria-selected":o,className:"slds-path__link",href:"#",onClick:function(e){return e.preventDefault()},id:"path-".concat(i),role:"option",tabIndex:o?0:-1},l().createElement("span",{className:"slds-path__stage"},l().createElement(b.A,{className:"slds-icon slds-icon_x-small",sprite:"utility",symbol:"check"}),s?l().createElement("span",{className:"slds-assistive-text"},s):null),l().createElement("span",{className:"slds-path__title"},n)))}}],a&&j(n.prototype,a),Object.defineProperty(n,"prototype",{writable:!1}),n;var n,a}(a.Component);W.propTypes={label:d().string,stepState:d().arrayOf(d().string),index:d().number},W.defaultProps={label:"Undefined",stepState:["incomplete"],index:0};var M=function(e){var t=e.coachingId,n=e.isHidden,a=e.coachingData,i=e.pathGuidance;return l().createElement("div",{className:m()("slds-path__content",{"slds-is-collapsed":n}),id:t},l().createElement("div",{className:"slds-path__coach slds-grid"},l().createElement("div",{className:"slds-path__keys"},l().createElement("div",{className:"slds-grid slds-grid_align-spread slds-path__coach-title"},l().createElement("h2",null,"Key Fields This Stage"),l().createElement(f.$n,{className:"slds-path__coach-edit slds-text-body_small"},"Edit")),l().createElement(k,{direction:"stacked",snapshot:a,isViewMode:!0})),l().createElement("div",{className:"slds-path__guidance"},l().createElement("h2",{className:"slds-path__coach-title"},"Guidance for Success"),l().createElement("div",{className:"slds-text-longform slds-path__guidance-content"},i))))};function q(e){return q="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},q(e)}function U(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable\|\|!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,X(a.key),a)}}function X(e){var t=function(e){if("object"!=q(e)\|\|!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=q(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==q(t)?t:t+""}function z(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(z=function(){return!!e})()}function H(e){return H=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__\|\|Object.getPrototypeOf(e)},H(e)}function F(e,t){return F=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},F(e,t)}M.propTypes={coachingId:d().string,isHidden:d().bool,coachingData:d().object,pathGuidance:d().arrayOf(d().node)},M.defaultProps={coachingId:null,isHidden:!1,coachingData:{rows:[{fields:[{type:"text",label:"Expected Budget",value:"$10,000"}]},{fields:[{type:"text",label:"Lead Source",value:"Marketing and Web Referral"}]},{fields:[{type:"text",label:"Support Engineer",value:"Jane Authur"}]}]},pathGuidance:[l().createElement("p",{key:"guidance-1"},"Regularly cross-sell related products using"," ",l().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"cross-sell tactics and principles"),"."),l().createElement("p",{key:"guidance-2"},"Prepare demo deck using the"," ",l().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"latest template")," ","and review with Marketing and Sales teams. Review demo copy with Legal and Doc team."),l().createElement("p",{key:"guidance-3"},"Look up"," ",l().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"needs analysis principles")," ","and review selling plan with Sales Engineer.")]};var V=function(){return l().createElement(D,null,l().createElement(L,null,l().createElement(W,{label:"Contacted",stepState:["current","active"],index:1}),l().createElement(W,{label:"Open",stepState:["incomplete"],index:2}),l().createElement(W,{label:"Unqualified",stepState:["incomplete"],index:3}),l().createElement(W,{label:"Nurturing",stepState:["incomplete"],index:4}),l().createElement(W,{label:"Closed",stepState:["incomplete"],index:5})))},G=function(){return l().createElement(D,null,l().createElement(L,null,l().createElement(W,{label:"Contacted",stepState:["complete"],index:6}),l().createElement(W,{label:"Open",stepState:["complete"],index:7}),l().createElement(W,{label:"Unqualified",stepState:["complete"],index:8}),l().createElement(W,{label:"Nurturing",stepState:["current","active"],index:9}),l().createElement(W,{label:"Closed",stepState:["incomplete"],index:10})))},J=function(){return l().createElement(D,null,l().createElement(L,{actionButtonLabel:"Mark as Current Stage"},l().createElement(W,{label:"Contacted",stepState:["current"],index:11}),l().createElement(W,{label:"Open",stepState:["incomplete"],index:12}),l().createElement(W,{label:"Unqualified",stepState:["active"],index:13}),l().createElement(W,{label:"Nurturing",stepState:["incomplete"],index:14}),l().createElement(W,{label:"Closed",stepState:["incomplete"],index:15})))},Q=function(e){function t(){var e;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),(e=function(e,t,n){return t=H(t),function(e,t){if(t&&("object"==q(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,z()?Reflect.construct(t,n\|\|[],H(e).constructor):t.apply(e,n))}(this,t)).updateTooltipOffset=e.updateTooltipOffset.bind(e),e.setTooltipRef=e.setTooltipRef.bind(e),e.state={tooltipRef:null,tooltipLeft:0,tooltipTop:0},e}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&&F(e,t)}(t,e),n=t,(i=[{key:"componentDidMount",value:function(){window.addEventListener("resize",this.updateTooltipOffset),this.updateTooltipOffset()}},{key:"componentWillUnmount",value:function(){window.removeEventListener("resize",this.updateTooltipOffset)}},{key:"componentDidUpdate",value:function(e,t){this.state.tooltipRef&&!t.tooltipRef&&this.updateTooltipOffset()}},{key:"updateTooltipOffset",value:function(){var e=this.state.tooltipRef,t=0,n=0;e&&(t=e.offsetLeft+e.offsetWidth/2,n=e.offsetTop+e.offsetHeight+14),this.setState({tooltipLeft:t,tooltipTop:n})}},{key:"setTooltipRef",value:function(e){this.setState({tooltipRef:e})}},{key:"render",value:function(){var e=this,t=this.state,n=t.tooltipLeft,i=t.tooltipTop;return l().createElement(a.Fragment,null,l().createElement(D,null,l().createElement(L,{actionButtonLabel:"Mark as Current Stage"},l().createElement(W,{label:"Contacted",stepState:["complete"],index:16}),l().createElement(W,{label:"Open",stepState:["complete"],index:17}),l().createElement(W,{label:"Unqualified",stepState:["current"],index:18,setTooltipRef:function(t){return e.setTooltipRef(t)}}),l().createElement(W,{label:"Nurturing",stepState:["active"],index:19}),l().createElement(W,{label:"Closed",stepState:["incomplete"],index:20})),l().createElement(s.m_,{className:"slds-nubbin_top",style:{left:"".concat(n,"px"),transform:"translateX(-50%)",top:"".concat(i,"px"),position:"absolute"}},"3 Days in Unqualified")))}}])&&U(n.prototype,i),Object.defineProperty(n,"prototype",{writable:!1}),n;var n,i}(a.Component),$=function(){var e="path-coaching-1";return l().createElement(D,{hasCoaching:!0},l().createElement(L,{coachingId:e,hasCoaching:!0},l().createElement(W,{label:"Contacted",stepState:["complete"],index:21}),l().createElement(W,{label:"Open",stepState:["complete"],index:22}),l().createElement(W,{label:"Unqualified",stepState:["active","current"],index:23}),l().createElement(W,{label:"Nurturing",stepState:["incomplete"],index:24}),l().createElement(W,{label:"Closed",stepState:["incomplete"],index:25})),l().createElement(M,{coachingId:e,labelledBy:"path-23",isHidden:!0}))},K=function(){var e="path-coaching-2";return l().createElement(D,{hasCoaching:!0,coachingOpen:!0},l().createElement(L,{coachingId:e,hasCoaching:!0,coachingOpen:!0},l().createElement(W,{label:"Contacted",stepState:["complete"],index:26}),l().createElement(W,{label:"Open",stepState:["complete"],index:27}),l().createElement(W,{label:"Unqualified",stepState:["current"],index:28}),l().createElement(W,{label:"Nurturing",stepState:["incomplete","active"],index:29}),l().createElement(W,{label:"Closed",stepState:["incomplete"],index:30})),l().createElement(M,{coachingId:e,labelledBy:"path-28"}))},Z=function(){return l().createElement(D,null,l().createElement(L,{actionButtonLabel:"Change Closed State"},l().createElement(W,{label:"Contacted",stepState:["complete"],index:31}),l().createElement(W,{label:"Open",stepState:["complete"],index:32}),l().createElement(W,{label:"Unqualified",stepState:["complete"],index:33}),l().createElement(W,{label:"Nurturing",stepState:["complete"],index:34}),l().createElement(W,{label:"Closed Won",stepState:["won","active","current"],index:35})))},Y=function(){return l().createElement(D,null,l().createElement(L,{actionButtonLabel:"Change Closed State"},l().createElement(W,{label:"Contacted",stepState:["incomplete"],index:36}),l().createElement(W,{label:"Open",stepState:["incomplete"],index:37}),l().createElement(W,{label:"Unqualified",stepState:["incomplete"],index:38}),l().createElement(W,{label:"Nurturing",stepState:["incomplete"],index:39}),l().createElement(W,{label:"Closed Lost",stepState:["lost","active","current"],index:40})))},ee=function(){return l().createElement(D,null,l().createElement(L,{hasOverflow:!0},l().createElement(W,{label:"Prospecting",stepState:["complete"],index:41}),l().createElement(W,{label:"Qualification",stepState:["complete"],index:42}),l().createElement(W,{label:"Needs Analysis",stepState:["active","current"],index:43}),l().createElement(W,{label:"Value Proposition",stepState:["incomplete"],index:44}),l().createElement(W,{label:"Id. Decision Maker",stepState:["incomplete"],index:45}),l().createElement(W,{label:"Perception Analysis",stepState:["incomplete"],index:46}),l().createElement(W,{label:"Proposal / Pricing",stepState:["incomplete"],index:47}),l().createElement(W,{label:"Negotiation / Review",stepState:["incomplete"],index:48}),l().createElement(W,{label:"Closed",stepState:["incomplete"],index:49})))},te=function(){return l().createElement("div",{className:"slds-region_medium",style:{width:"700px"}},l().createElement(D,null,l().createElement(L,null,l().createElement(W,{label:"Contacted",stepState:["complete"],index:50}),l().createElement(W,{label:"Open",stepState:["complete"],index:51}),l().createElement(W,{label:"Unqualified",stepState:["active","current"],index:52}),l().createElement(W,{label:"Nurturing",stepState:["incomplete"],index:53}),l().createElement(W,{label:"Closed",stepState:["incomplete"],index:54}))))},ne=function(){var e="path-coaching-2";return l().createElement("div",{className:"slds-region_medium",style:{width:"700px"}},l().createElement(D,{hasCoaching:!0,coachingOpen:!0},l().createElement(L,{stageName:"Needs Analysis",coachingId:e,hasCoaching:!0,coachingOpen:!0,hasOverflow:!0},l().createElement(W,{label:"Prospecting",stepState:["complete"],index:55}),l().createElement(W,{label:"Qualification",stepState:["complete"],index:56}),l().createElement(W,{label:"Needs Analysis",stepState:["active","current"],index:57}),l().createElement(W,{label:"Value Proposition",stepState:["incomplete"],index:58}),l().createElement(W,{label:"Id. Decision Maker",stepState:["incomplete"],index:59}),l().createElement(W,{label:"Perception Analysis",stepState:["incomplete"],index:60}),l().createElement(W,{label:"Proposal / Pricing",stepState:["incomplete"],index:61}),l().createElement(W,{label:"Negotiation / Review",stepState:["incomplete"],index:62}),l().createElement(W,{label:"Closed",stepState:["incomplete"],index:63})),l().createElement(M,{coachingId:e,labelledBy:"path-57"})))},ae=function(){var e="path-coaching-3";return l().createElement("div",{className:"slds-region_small",style:{width:"360px"}},l().createElement(D,{hasCoaching:!0,coachingOpen:!0},l().createElement(L,{stageName:"Needs Analysis",coachingId:e,hasOverflow:!0,hasCoaching:!0,coachingOpen:!0},l().createElement(W,{label:"Prospecting",stepState:["complete"],index:64}),l().createElement(W,{label:"Qualification",stepState:["complete"],index:65}),l().createElement(W,{label:"Needs Analysis",stepState:["active","current"],index:66}),l().createElement(W,{label:"Value Proposition",stepState:["incomplete"],index:67}),l().createElement(W,{label:"Id. Decision Maker",stepState:["incomplete"],index:68}),l().createElement(W,{label:"Perception Analysis",stepState:["incomplete"],index:69}),l().createElement(W,{label:"Proposal / Pricing",stepState:["incomplete"],index:70}),l().createElement(W,{label:"Negotiation / Review",stepState:["incomplete"],index:71}),l().createElement(W,{label:"Closed",stepState:["incomplete"],index:72})),l().createElement(M,{coachingId:e,labelledBy:"path-66"})))},le=l().createElement(V,null),ie=[{id:"later-stage",label:"In a later stage",element:l().createElement(G,null)},{id:"different-stage-selected",label:"With different stage selected",element:l().createElement(J,null)},{id:"with-visible-tooltip",label:"With visible tooltip",element:l().createElement(Q,null)},{id:"with-coaching",label:"With coaching available",element:l().createElement($,null)},{id:"different-coaching",label:"With different stage selected - with coaching",element:l().createElement(K,null)},{id:"lost",label:"Lost",element:l().createElement(Y,null)},{id:"won",label:"Won",element:l().createElement(Z,null)},{id:"with-overflow",label:"Path with overflow",element:l().createElement(ee,null)},{id:"medium",label:"Medium viewport",element:l().createElement(te,null)},{id:"medium-coaching",label:"Medium viewport with coaching",element:l().createElement(ne,null)},{id:"small-coaching",label:"Small viewport",element:l().createElement(ae,null)},{id:"mobile-default",label:"Mobile: default",element:l().createElement(c.A,{hideDeviceSelector:!0,frameTitle:"Example mobile styles for path"},l().createElement(V,null))}],oe=n(9285),re=i.XB.code,ce=i.XB.em,se=i.XB.h2,ue=i.XB.h3,de=i.XB.h4,pe=i.XB.li,me=i.XB.p,fe=i.XB.table,he=i.XB.tbody,be=i.XB.td,ge=i.XB.th,ye=i.XB.thead,Ee=i.XB.tr,ve=i.XB.ul,Se=function(){return(0,a.createElement)(i.Ay,{},(0,a.createElement)("div",{className:"lead doc"},"The Path communicates to the user the progress of a particular process."),(0,a.createElement)(o.A,{exampleOnly:!0},(0,r.NO)(ie,"later-stage")),se({id:"About-Path"},"About Path"),ue({id:"Accessibility"},"Accessibility"),me({},"This component importantly changes role depending on what state it is in. If a Path comes with Stage Coaching information, this pattern lends itself perfectly to being a traditional Tab Set. As you navigate the Path Stages, it's associated content changes with it."),me({},"On the other hand, if a Path doesn't have Path Stage Coaching information, we can no longer use the Tab Set role, as we would effectively be misleading our users because each Tab has no associated content. This may lead to users trying to find absent content. In this situation, this component is much more suited to being a Listbox component."),me({},"The markup structure is identical, just some attributes change their values."),fe({},ye({},Ee({},ge({},"DOM Node"),ge({},"Without Coaching"),ge({},"With Coaching"))),he({},Ee({},be({},".slds-path__nav"),be({},'role="listbox"'),be({},'role="tabset"')),Ee({},be({},".slds-path__link"),be({},'role="option"'),be({},'role="tab"')))),de({id:"Without-Coaching"},"Without Coaching"),ve({},pe({},re({},'aria-orientation="horizontal"')," should be applied to the ",re({},"slds-path__nav")," element to indicate to the screen reader to use horizontal navigation"),pe({},re({},'aria-selected="true"')," should be applied to the selected Stage of the Path as you navigate through the Stages")),de({id:"With-Coaching"},"With Coaching"),ve({},pe({},"When the Path Stage Coaching is not visible, ",re({},'aria-expanded="false"')," should be set on each ",re({},"slds-path__link")," Tab"),pe({},"When the Path Stage Coaching is visible, ",re({},"aria-expanded")," should be set to ",re({},"true")),pe({},re({},'aria-selected="true"')," is used to describe the currently active ",re({},"slds-path__link")," Tab, not the Stage the Path is currently set to")),ue({id:"Keyboard-Navigation"},"Keyboard Navigation"),ve({},pe({},"For both with and without Path Stage Coaching variants, the following keyboard navigation applies"),pe({},re({},"left")," and ",re({},"right")," arrow keys move focus ",ce({},"and")," selection, with ",re({},'aria-selected="true"'))),ue({id:"Mobile"},"Mobile"),(0,a.createElement)(oe.s9,{patternSpecificText:"elements of path will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor"}),(0,a.createElement)(o.A,{frameOnly:!0,frameTitle:"Example mobile styles for path"},(0,r.NO)(ie,"later-stage")),se({id:"Examples"},"Examples"),ue({id:"Base"},"Base"),(0,a.createElement)(o.A,null,(0,r.NO)(le)),ue({id:"In-a-later-stage"},"In a later stage"),(0,a.createElement)(o.A,null,(0,r.NO)(ie,"later-stage")),ue({id:"With-different-stage-selected"},"With different stage selected"),(0,a.createElement)(o.A,null,(0,r.NO)(ie,"different-stage-selected")),ue({id:"With-visible-tooltip"},"With visible tooltip"),(0,a.createElement)(o.A,{demoStyles:"min-height: 5rem;"},(0,r.NO)(ie,"with-visible-tooltip")),ue({id:"With-coaching-available"},"With coaching available"),(0,a.createElement)(o.A,null,(0,r.NO)(ie,"with-coaching")),ue({id:"With-different-stage-selected-with-coaching"},"With different stage selected - with coaching"),(0,a.createElement)(o.A,null,(0,r.NO)(ie,"different-coaching")),ue({id:"Lost"},"Lost"),(0,a.createElement)(o.A,null,(0,r.NO)(ie,"lost")),ue({id:"Won"},"Won"),(0,a.createElement)(o.A,null,(0,r.NO)(ie,"won")),ue({id:"Path-with-overflow"},"Path with overflow"),(0,a.createElement)(o.A,null,(0,r.NO)(ie,"with-overflow")),ue({id:"Layout-overrides"},"Layout overrides"),me({},"When the Path needs to be placed in a more narrow column on desktop (between 360px and 564px) the class ",re({},".slds-region_small")," should be placed on the container so it can adapt. If the container is between 565px and 1280px, the class ",re({},".slds-region_medium")," should be applied."),de({id:"Medium-layout"},"Medium layout"),me({},"With the class ",re({},".slds-region_medium")," applied to the container."),(0,a.createElement)(o.A,null,(0,r.NO)(ie,"medium")),de({id:"Medium-layout-with-coaching"},"Medium layout with coaching"),me({},"With the class ",re({},".slds-region_medium")," applied to the container."),(0,a.createElement)(o.A,null,(0,r.NO)(ie,"medium-coaching")),de({id:"Small-layout"},"Small layout"),me({},"With the class ",re({},".slds-region_small")," applied to the container."),(0,a.createElement)(o.A,null,(0,r.NO)(ie,"small-coaching")))},_e=function(){return(0,i.Qr)(Se())}},5206:function(e){e.exports=ReactDOM}},l={};function i(e){var t=l[e];if(void 0!==t)return t.exports;var n=l[e]={id:e,exports:{}};return a[e](n,n.exports,i),n.exports}i.m=a,i.amdO={},e=[],i.O=function(t,n,a,l){if(!n){var o=1/0;for(u=0;u<e.length;u++){n=e[u][0],a=e[u][1],l=e[u][2];for(var r=!0,c=0;c<n.length;c++)(!1&l\|\|o>=l)&&Object.keys(i.O).every(function(e){return i.O[e](n[c])})?n.splice(c--,1):(r=!1,l<o&&(o=l));if(r){e.splice(u--,1);var s=a();void 0!==s&&(t=s)}}return t}l=l\|\|0;for(var u=e.length;u>0&&e[u-1][2]>l;u--)e[u]=e[u-1];e[u]=[n,a,l]},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,{a:t}),t},n=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},i.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 l=Object.create(null);i.r(l);var o={};t=t\|\|[null,n({}),n([]),n(n)];for(var r=2&a&&e;("object"==typeof r\|\|"function"==typeof r)&&!~t.indexOf(r);r=n(r))Object.getOwnPropertyNames(r).forEach(function(t){o[t]=function(){return e[t]}});return o.default=function(){return e},i.d(l,o),l},i.d=function(e,t){for(var n in t)i.o(t,n)&&!i.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},i.e=function(){return Promise.resolve()},i.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.j=8390,function(){var e={8390:0};i.O.j=function(t){return 0===e[t]};var t=function(t,n){var a,l,o=n[0],r=n[1],c=n[2],s=0;if(o.some(function(t){return 0!==e[t]})){for(a in r)i.o(r,a)&&(i.m[a]=r[a]);if(c)var u=c(i)}for(t&&t(n);s<o.length;s++)l=o[s],i.o(e,l)&&e[l]&&e[l][0](),e[l]=0;return i.O(u)},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))}(),i.nc=void 0;var o=i.O(void 0,[3540],function(){return i(4399)});o=i.O(o),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/path/docs.mdx.js"]=o}();
1	+ var SLDS;!function(){"use strict";var e,t,n,a={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},4399:function(e,t,n){n.r(t),n.d(t,{getContents:function(){return _e},getElement:function(){return Se}});var a=n(1594),l=n.n(a),i=n(5671),o=n(6547),r=(n(3212),n(5619),n(806)),c=n(6895),s=n(4216),u=n(4187),d=n.n(u),p=n(942),m=n.n(p),f=n(9825),h=n(6955),b=n(8347),g=n(2711),y=n(2937);function E(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable\|\|!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,v(a.key),a)}}function v(e){var t=function(e){if("object"!=w(e)\|\|!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=w(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==w(t)?t:t+""}function S(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(S=function(){return!!e})()}function _(e){return _=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__\|\|Object.getPrototypeOf(e)},_(e)}function x(e,t){return x=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},x(e,t)}function w(e){return w="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},w(e)}var O=function(e){return l().createElement("div",{className:"slds-form__row"},e.children)};O.propTypes={children:d().node};var N=function(e){return l().createElement("div",{className:"slds-form__item",role:"listitem"},e.children)};N.propTypes={children:d().node};var P=function(e){var t=e.isRequired,n=e.hasTooltip,a=e.type,i=e.label,o=e.value,r=e.avatar,c=e.link,s=e.timestamp,u=e.hasInlineEdit,d=e.isHorizontal,p=e.isStacked,m=e.column;return l().createElement(g.ZS,{isViewMode:!0,labelContent:i,isEditable:u,hasHint:!0,isRequired:t,hasTooltip:n,isHorizontal:d,isStacked:p,column:m},l().createElement(g.vS,{isLongform:"textarea"===a},r&&l().createElement(y.eu,{className:"slds-avatar_x-small slds-avatar_circle slds-m-right_xx-small"},l().createElement("img",{alt:o,src:r,title:o})),c?l().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"object"===w(o)?o.map(function(e){return l().createElement(l().Fragment,{key:e},e,l().createElement("br",null))}):o):"object"===w(o)&&"richtext"!==a&&"checkbox"!==a?o.map(function(e){return l().createElement(l().Fragment,{key:e},e,l().createElement("br",null))}):o,s&&l().createElement(l().Fragment,null,", ",s)),u&&l().createElement(h.A,{iconClassName:"slds-button__icon_hint",symbol:"edit",assistiveText:"Edit: ".concat(i),title:"Edit: ".concat(i)}))};P.propTypes={isRequired:d().bool,hasTooltip:d().bool,type:d().string,label:d().string,avatar:d().string,link:d().bool,timestamp:d().string,hasInlineEdit:d().bool,isHorizontal:d().bool,isStacked:d().bool,column:d().number};var C=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=_(t),function(e,t){if(t&&("object"==w(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,S()?Reflect.construct(t,n\|\|[],_(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&&x(e,t)}(t,e),n=t,(a=[{key:"render",value:function(){var e=this.props,t=e.snapshot,n=e.isViewMode,a=e.direction,i=e.hasInlineEdit,o=e.isDeprecated;return l().createElement("div",{className:m()("slds-form",o&&"slds-form_".concat(a)),role:"list"},n?t.rows.map(function(e){return l().createElement(O,{key:r.Ay.uniqueId(e.fields.length)},Object.keys(e.fields).map(function(t){return l().createElement(N,{key:e.fields[t].label},e.fields[t].type&&l().createElement(P,{type:e.fields[t].type,label:e.fields[t].label,value:e.fields[t].value,isRequired:e.fields[t].isRequired,hasTooltip:e.fields[t].hasTooltip,avatar:e.fields[t].avatar,link:e.fields[t].link,timestamp:e.fields[t].timestamp,hasInlineEdit:i,isHorizontal:!o&&"horizontal"===a,isStacked:!o&&"stacked"===a,column:e.fields[t].column}))}))}):t.rows.map(function(e,t){return l().createElement(O,{key:r.Ay.uniqueId("detail-row-".concat(t,"-"))},Object.keys(e.fields).map(function(t){return l().createElement(N,{key:e.fields[t].label},e.fields[t].component&&e.fields[t].component)}))}))}}])&&E(n.prototype,a),Object.defineProperty(n,"prototype",{writable:!1}),n;var n,a}(a.Component);C.propTypes={snapshot:d().object,isViewMode:d().bool,direction:d().string,hasInlineEdit:d().bool,isDeprecated:d().bool};var k=C;function T(e){return T="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},T(e)}function j(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable\|\|!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,A(a.key),a)}}function A(e){var t=function(e){if("object"!=T(e)\|\|!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=T(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==T(t)?t:t+""}function R(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(R=function(){return!!e})()}function B(e){return B=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__\|\|Object.getPrototypeOf(e)},B(e)}function I(e,t){return I=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},I(e,t)}var D=function(e){return l().createElement("div",{className:m()("slds-path",{"slds-path_has-coaching":e.hasCoaching,"slds-is-expanded":e.coachingOpen})},e.children)};D.propTypes={hasCoaching:d().bool,coachingOpen:d().bool},D.defaultProps={hasCoaching:!1,coachingOpen:!1};var L=function(e){var t=e.hasCoaching,n=e.coachingOpen,a=e.hasOverflow,i=e.coachingId,o=e.stageName,r=e.actionButtonLabel;return l().createElement("div",{className:m()("slds-grid slds-path__track",{"slds-has-overflow":a})},l().createElement("div",{className:"slds-grid slds-path__scroller-container"},t?l().createElement(h.A,{symbol:"chevronright",theme:"neutral",className:m()("slds-path__trigger",{"slds-path__trigger_open":n}),assistiveText:"Show Details",title:"Toggle Sales Coaching","aria-expanded":n,"aria-controls":i}):null,l().createElement("div",{className:"slds-path__scroller"},l().createElement("div",{className:"slds-path__scroller_inner"},l().createElement("ul",{className:"slds-path__nav",role:"listbox","aria-orientation":"horizontal","aria-labelledby":"slds-path__stage-name"},e.children),a?l().createElement("div",{className:"slds-path__scroll-controls"},l().createElement(h.A,{symbol:"left",theme:"neutral",assistiveText:"Scroll left",title:"Scroll left",tabIndex:"-1"}),l().createElement(h.A,{symbol:"right",theme:"neutral",assistiveText:"Scroll right",title:"Scroll right",tabIndex:"-1"})):null))),l().createElement("div",{className:"slds-grid slds-path__action"},l().createElement("span",{id:"slds-path__stage-name",className:"slds-path__stage-name"},"Stage: ",o),l().createElement(f.$n,{isBrand:!0,className:"slds-path__mark-complete"},r),t?l().createElement(f.$n,{isNeutral:!0,className:"slds-path__trigger-coaching-content","aria-expanded":n,"aria-controls":i},n?"Show Less":"Show More"):null))};L.propTypes={hasCoaching:d().bool,coachingOpen:d().bool,hasOverflow:d().bool,coachingId:d().string,stageName:d().string,actionButtonLabel:d().node},L.defaultProps={hasCoaching:!1,coachingOpen:!1,hasOverflow:!1,coachingId:"",stageName:"Unqualified",actionButtonLabel:l().createElement(a.Fragment,null,l().createElement(b.A,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"check","aria-hidden":"true"}),"Mark Status as Complete")};var W=function(e){function t(){var e;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),(e=function(e,t,n){return t=B(t),function(e,t){if(t&&("object"==T(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,n\|\|[],B(e).constructor):t.apply(e,n))}(this,t)).state={itemRef:null},e}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&&I(e,t)}(t,e),n=t,a=[{key:"componentDidUpdate",value:function(e,t){var n=this.props.setTooltipRef,a=this.state.itemRef;n&&a!==t.itemRef&&n(a)}},{key:"render",value:function(){var e=this,t=this.props,n=t.label,a=t.stepState,i=t.index,o=a.indexOf("active")>-1,r=a.indexOf("complete")>-1,c=a.indexOf("current")>-1,s=null;return r?s="Stage Complete":c&&(s="Current Stage:"),l().createElement("li",{className:m()("slds-path__item",a.map(function(e){return"slds-is-".concat(e)})),role:"presentation",ref:function(t){e.state.itemRef\|\|e.setState({itemRef:t})}},l().createElement("a",{"aria-selected":o,className:"slds-path__link",href:"#",onClick:function(e){return e.preventDefault()},id:"path-".concat(i),role:"option",tabIndex:o?0:-1},l().createElement("span",{className:"slds-path__stage"},l().createElement(b.A,{className:"slds-icon slds-icon_x-small",sprite:"utility",symbol:"check"}),s?l().createElement("span",{className:"slds-assistive-text"},s):null),l().createElement("span",{className:"slds-path__title"},n)))}}],a&&j(n.prototype,a),Object.defineProperty(n,"prototype",{writable:!1}),n;var n,a}(a.Component);W.propTypes={label:d().string,stepState:d().arrayOf(d().string),index:d().number},W.defaultProps={label:"Undefined",stepState:["incomplete"],index:0};var M=function(e){var t=e.coachingId,n=e.isHidden,a=e.coachingData,i=e.pathGuidance;return l().createElement("div",{className:m()("slds-path__content",{"slds-is-collapsed":n}),id:t},l().createElement("div",{className:"slds-path__coach slds-grid"},l().createElement("div",{className:"slds-path__keys"},l().createElement("div",{className:"slds-grid slds-grid_align-spread slds-path__coach-title"},l().createElement("h2",null,"Key Fields This Stage"),l().createElement(f.$n,{className:"slds-path__coach-edit slds-text-body_small"},"Edit")),l().createElement(k,{direction:"stacked",snapshot:a,isViewMode:!0})),l().createElement("div",{className:"slds-path__guidance"},l().createElement("h2",{className:"slds-path__coach-title"},"Guidance for Success"),l().createElement("div",{className:"slds-text-longform slds-path__guidance-content"},i))))};function q(e){return q="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},q(e)}function U(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable\|\|!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,X(a.key),a)}}function X(e){var t=function(e){if("object"!=q(e)\|\|!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=q(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==q(t)?t:t+""}function z(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(z=function(){return!!e})()}function H(e){return H=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__\|\|Object.getPrototypeOf(e)},H(e)}function F(e,t){return F=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},F(e,t)}M.propTypes={coachingId:d().string,isHidden:d().bool,coachingData:d().object,pathGuidance:d().arrayOf(d().node)},M.defaultProps={coachingId:null,isHidden:!1,coachingData:{rows:[{fields:[{type:"text",label:"Expected Budget",value:"$10,000"}]},{fields:[{type:"text",label:"Lead Source",value:"Marketing and Web Referral"}]},{fields:[{type:"text",label:"Support Engineer",value:"Jane Authur"}]}]},pathGuidance:[l().createElement("p",{key:"guidance-1"},"Regularly cross-sell related products using"," ",l().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"cross-sell tactics and principles"),"."),l().createElement("p",{key:"guidance-2"},"Prepare demo deck using the"," ",l().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"latest template")," ","and review with Marketing and Sales teams. Review demo copy with Legal and Doc team."),l().createElement("p",{key:"guidance-3"},"Look up"," ",l().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"needs analysis principles")," ","and review selling plan with Sales Engineer.")]};var V=function(){return l().createElement(D,null,l().createElement(L,null,l().createElement(W,{label:"Contacted",stepState:["current","active"],index:1}),l().createElement(W,{label:"Open",stepState:["incomplete"],index:2}),l().createElement(W,{label:"Unqualified",stepState:["incomplete"],index:3}),l().createElement(W,{label:"Nurturing",stepState:["incomplete"],index:4}),l().createElement(W,{label:"Closed",stepState:["incomplete"],index:5})))},G=function(){return l().createElement(D,null,l().createElement(L,null,l().createElement(W,{label:"Contacted",stepState:["complete"],index:6}),l().createElement(W,{label:"Open",stepState:["complete"],index:7}),l().createElement(W,{label:"Unqualified",stepState:["complete"],index:8}),l().createElement(W,{label:"Nurturing",stepState:["current","active"],index:9}),l().createElement(W,{label:"Closed",stepState:["incomplete"],index:10})))},J=function(){return l().createElement(D,null,l().createElement(L,{actionButtonLabel:"Mark as Current Stage"},l().createElement(W,{label:"Contacted",stepState:["current"],index:11}),l().createElement(W,{label:"Open",stepState:["incomplete"],index:12}),l().createElement(W,{label:"Unqualified",stepState:["active"],index:13}),l().createElement(W,{label:"Nurturing",stepState:["incomplete"],index:14}),l().createElement(W,{label:"Closed",stepState:["incomplete"],index:15})))},Q=function(e){function t(){var e;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),(e=function(e,t,n){return t=H(t),function(e,t){if(t&&("object"==q(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,z()?Reflect.construct(t,n\|\|[],H(e).constructor):t.apply(e,n))}(this,t)).updateTooltipOffset=e.updateTooltipOffset.bind(e),e.setTooltipRef=e.setTooltipRef.bind(e),e.state={tooltipRef:null,tooltipLeft:0,tooltipTop:0},e}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&&F(e,t)}(t,e),n=t,(i=[{key:"componentDidMount",value:function(){window.addEventListener("resize",this.updateTooltipOffset),this.updateTooltipOffset()}},{key:"componentWillUnmount",value:function(){window.removeEventListener("resize",this.updateTooltipOffset)}},{key:"componentDidUpdate",value:function(e,t){this.state.tooltipRef&&!t.tooltipRef&&this.updateTooltipOffset()}},{key:"updateTooltipOffset",value:function(){var e=this.state.tooltipRef,t=0,n=0;e&&(t=e.offsetLeft+e.offsetWidth/2,n=e.offsetTop+e.offsetHeight+14),this.setState({tooltipLeft:t,tooltipTop:n})}},{key:"setTooltipRef",value:function(e){this.setState({tooltipRef:e})}},{key:"render",value:function(){var e=this,t=this.state,n=t.tooltipLeft,i=t.tooltipTop;return l().createElement(a.Fragment,null,l().createElement(D,null,l().createElement(L,{actionButtonLabel:"Mark as Current Stage"},l().createElement(W,{label:"Contacted",stepState:["complete"],index:16}),l().createElement(W,{label:"Open",stepState:["complete"],index:17}),l().createElement(W,{label:"Unqualified",stepState:["current"],index:18,setTooltipRef:function(t){return e.setTooltipRef(t)}}),l().createElement(W,{label:"Nurturing",stepState:["active"],index:19}),l().createElement(W,{label:"Closed",stepState:["incomplete"],index:20})),l().createElement(s.m_,{className:"slds-nubbin_top",style:{left:"".concat(n,"px"),transform:"translateX(-50%)",top:"".concat(i,"px"),position:"absolute"}},"3 Days in Unqualified")))}}])&&U(n.prototype,i),Object.defineProperty(n,"prototype",{writable:!1}),n;var n,i}(a.Component),$=function(){var e="path-coaching-1";return l().createElement(D,{hasCoaching:!0},l().createElement(L,{coachingId:e,hasCoaching:!0},l().createElement(W,{label:"Contacted",stepState:["complete"],index:21}),l().createElement(W,{label:"Open",stepState:["complete"],index:22}),l().createElement(W,{label:"Unqualified",stepState:["active","current"],index:23}),l().createElement(W,{label:"Nurturing",stepState:["incomplete"],index:24}),l().createElement(W,{label:"Closed",stepState:["incomplete"],index:25})),l().createElement(M,{coachingId:e,labelledBy:"path-23",isHidden:!0}))},K=function(){var e="path-coaching-2";return l().createElement(D,{hasCoaching:!0,coachingOpen:!0},l().createElement(L,{coachingId:e,hasCoaching:!0,coachingOpen:!0},l().createElement(W,{label:"Contacted",stepState:["complete"],index:26}),l().createElement(W,{label:"Open",stepState:["complete"],index:27}),l().createElement(W,{label:"Unqualified",stepState:["current"],index:28}),l().createElement(W,{label:"Nurturing",stepState:["incomplete","active"],index:29}),l().createElement(W,{label:"Closed",stepState:["incomplete"],index:30})),l().createElement(M,{coachingId:e,labelledBy:"path-28"}))},Z=function(){return l().createElement(D,null,l().createElement(L,{actionButtonLabel:"Change Closed State"},l().createElement(W,{label:"Contacted",stepState:["complete"],index:31}),l().createElement(W,{label:"Open",stepState:["complete"],index:32}),l().createElement(W,{label:"Unqualified",stepState:["complete"],index:33}),l().createElement(W,{label:"Nurturing",stepState:["complete"],index:34}),l().createElement(W,{label:"Closed Won",stepState:["won","active","current"],index:35})))},Y=function(){return l().createElement(D,null,l().createElement(L,{actionButtonLabel:"Change Closed State"},l().createElement(W,{label:"Contacted",stepState:["incomplete"],index:36}),l().createElement(W,{label:"Open",stepState:["incomplete"],index:37}),l().createElement(W,{label:"Unqualified",stepState:["incomplete"],index:38}),l().createElement(W,{label:"Nurturing",stepState:["incomplete"],index:39}),l().createElement(W,{label:"Closed Lost",stepState:["lost","active","current"],index:40})))},ee=function(){return l().createElement(D,null,l().createElement(L,{hasOverflow:!0},l().createElement(W,{label:"Prospecting",stepState:["complete"],index:41}),l().createElement(W,{label:"Qualification",stepState:["complete"],index:42}),l().createElement(W,{label:"Needs Analysis",stepState:["active","current"],index:43}),l().createElement(W,{label:"Value Proposition",stepState:["incomplete"],index:44}),l().createElement(W,{label:"Id. Decision Maker",stepState:["incomplete"],index:45}),l().createElement(W,{label:"Perception Analysis",stepState:["incomplete"],index:46}),l().createElement(W,{label:"Proposal / Pricing",stepState:["incomplete"],index:47}),l().createElement(W,{label:"Negotiation / Review",stepState:["incomplete"],index:48}),l().createElement(W,{label:"Closed",stepState:["incomplete"],index:49})))},te=function(){return l().createElement("div",{className:"slds-region_medium",style:{width:"700px"}},l().createElement(D,null,l().createElement(L,null,l().createElement(W,{label:"Contacted",stepState:["complete"],index:50}),l().createElement(W,{label:"Open",stepState:["complete"],index:51}),l().createElement(W,{label:"Unqualified",stepState:["active","current"],index:52}),l().createElement(W,{label:"Nurturing",stepState:["incomplete"],index:53}),l().createElement(W,{label:"Closed",stepState:["incomplete"],index:54}))))},ne=function(){var e="path-coaching-2";return l().createElement("div",{className:"slds-region_medium",style:{width:"700px"}},l().createElement(D,{hasCoaching:!0,coachingOpen:!0},l().createElement(L,{stageName:"Needs Analysis",coachingId:e,hasCoaching:!0,coachingOpen:!0,hasOverflow:!0},l().createElement(W,{label:"Prospecting",stepState:["complete"],index:55}),l().createElement(W,{label:"Qualification",stepState:["complete"],index:56}),l().createElement(W,{label:"Needs Analysis",stepState:["active","current"],index:57}),l().createElement(W,{label:"Value Proposition",stepState:["incomplete"],index:58}),l().createElement(W,{label:"Id. Decision Maker",stepState:["incomplete"],index:59}),l().createElement(W,{label:"Perception Analysis",stepState:["incomplete"],index:60}),l().createElement(W,{label:"Proposal / Pricing",stepState:["incomplete"],index:61}),l().createElement(W,{label:"Negotiation / Review",stepState:["incomplete"],index:62}),l().createElement(W,{label:"Closed",stepState:["incomplete"],index:63})),l().createElement(M,{coachingId:e,labelledBy:"path-57"})))},ae=function(){var e="path-coaching-3";return l().createElement("div",{className:"slds-region_small",style:{width:"360px"}},l().createElement(D,{hasCoaching:!0,coachingOpen:!0},l().createElement(L,{stageName:"Needs Analysis",coachingId:e,hasOverflow:!0,hasCoaching:!0,coachingOpen:!0},l().createElement(W,{label:"Prospecting",stepState:["complete"],index:64}),l().createElement(W,{label:"Qualification",stepState:["complete"],index:65}),l().createElement(W,{label:"Needs Analysis",stepState:["active","current"],index:66}),l().createElement(W,{label:"Value Proposition",stepState:["incomplete"],index:67}),l().createElement(W,{label:"Id. Decision Maker",stepState:["incomplete"],index:68}),l().createElement(W,{label:"Perception Analysis",stepState:["incomplete"],index:69}),l().createElement(W,{label:"Proposal / Pricing",stepState:["incomplete"],index:70}),l().createElement(W,{label:"Negotiation / Review",stepState:["incomplete"],index:71}),l().createElement(W,{label:"Closed",stepState:["incomplete"],index:72})),l().createElement(M,{coachingId:e,labelledBy:"path-66"})))},le=l().createElement(V,null),ie=[{id:"later-stage",label:"In a later stage",element:l().createElement(G,null)},{id:"different-stage-selected",label:"With different stage selected",element:l().createElement(J,null)},{id:"with-visible-tooltip",label:"With visible tooltip",element:l().createElement(Q,null)},{id:"with-coaching",label:"With coaching available",element:l().createElement($,null)},{id:"different-coaching",label:"With different stage selected - with coaching",element:l().createElement(K,null)},{id:"lost",label:"Lost",element:l().createElement(Y,null)},{id:"won",label:"Won",element:l().createElement(Z,null)},{id:"with-overflow",label:"Path with overflow",element:l().createElement(ee,null)},{id:"medium",label:"Medium viewport",element:l().createElement(te,null)},{id:"medium-coaching",label:"Medium viewport with coaching",element:l().createElement(ne,null)},{id:"small-coaching",label:"Small viewport",element:l().createElement(ae,null)},{id:"mobile-default",label:"Mobile: default",element:l().createElement(c.A,{hideDeviceSelector:!0,frameTitle:"Example mobile styles for path"},l().createElement(V,null))}],oe=n(9285),re=i.XB.code,ce=i.XB.em,se=i.XB.h2,ue=i.XB.h3,de=i.XB.h4,pe=i.XB.li,me=i.XB.p,fe=i.XB.table,he=i.XB.tbody,be=i.XB.td,ge=i.XB.th,ye=i.XB.thead,Ee=i.XB.tr,ve=i.XB.ul,Se=function(){return(0,a.createElement)(i.Ay,{},(0,a.createElement)("div",{className:"lead doc"},"The Path communicates to the user the progress of a particular process."),(0,a.createElement)(o.A,{exampleOnly:!0},(0,r.NO)(ie,"later-stage")),se({id:"About-Path"},"About Path"),ue({id:"Accessibility"},"Accessibility"),me({},"This component importantly changes role depending on what state it is in. If a Path comes with Stage Coaching information, this pattern lends itself perfectly to being a traditional Tab Set. As you navigate the Path Stages, it's associated content changes with it."),me({},"On the other hand, if a Path doesn't have Path Stage Coaching information, we can no longer use the Tab Set role, as we would effectively be misleading our users because each Tab has no associated content. This may lead to users trying to find absent content. In this situation, this component is much more suited to being a Listbox component."),me({},"The markup structure is identical, just some attributes change their values."),fe({},ye({},Ee({},ge({},"DOM Node"),ge({},"Without Coaching"),ge({},"With Coaching"))),he({},Ee({},be({},".slds-path__nav"),be({},'role="listbox"'),be({},'role="tabset"')),Ee({},be({},".slds-path__link"),be({},'role="option"'),be({},'role="tab"')))),de({id:"Without-Coaching"},"Without Coaching"),ve({},pe({},re({},'aria-orientation="horizontal"')," should be applied to the ",re({},"slds-path__nav")," element to indicate to the screen reader to use horizontal navigation"),pe({},re({},'aria-selected="true"')," should be applied to the selected Stage of the Path as you navigate through the Stages")),de({id:"With-Coaching"},"With Coaching"),ve({},pe({},"When the Path Stage Coaching is not visible, ",re({},'aria-expanded="false"')," should be set on each ",re({},"slds-path__link")," Tab"),pe({},"When the Path Stage Coaching is visible, ",re({},"aria-expanded")," should be set to ",re({},"true")),pe({},re({},'aria-selected="true"')," is used to describe the currently active ",re({},"slds-path__link")," Tab, not the Stage the Path is currently set to")),ue({id:"Keyboard-Navigation"},"Keyboard Navigation"),ve({},pe({},"For both with and without Path Stage Coaching variants, the following keyboard navigation applies"),pe({},re({},"left")," and ",re({},"right")," arrow keys move focus ",ce({},"and")," selection, with ",re({},'aria-selected="true"'))),ue({id:"Mobile"},"Mobile"),(0,a.createElement)(oe.s9,{patternSpecificText:"elements of path will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor"}),(0,a.createElement)(o.A,{frameOnly:!0,frameTitle:"Example mobile styles for path"},(0,r.NO)(ie,"later-stage")),se({id:"Examples"},"Examples"),ue({id:"Base"},"Base"),(0,a.createElement)(o.A,null,(0,r.NO)(le)),ue({id:"In-a-later-stage"},"In a later stage"),(0,a.createElement)(o.A,null,(0,r.NO)(ie,"later-stage")),ue({id:"With-different-stage-selected"},"With different stage selected"),(0,a.createElement)(o.A,null,(0,r.NO)(ie,"different-stage-selected")),ue({id:"With-visible-tooltip"},"With visible tooltip"),(0,a.createElement)(o.A,{demoStyles:"min-height: 5rem;"},(0,r.NO)(ie,"with-visible-tooltip")),ue({id:"With-coaching-available"},"With coaching available"),(0,a.createElement)(o.A,null,(0,r.NO)(ie,"with-coaching")),ue({id:"With-different-stage-selected-with-coaching"},"With different stage selected - with coaching"),(0,a.createElement)(o.A,null,(0,r.NO)(ie,"different-coaching")),ue({id:"Lost"},"Lost"),(0,a.createElement)(o.A,null,(0,r.NO)(ie,"lost")),ue({id:"Won"},"Won"),(0,a.createElement)(o.A,null,(0,r.NO)(ie,"won")),ue({id:"Path-with-overflow"},"Path with overflow"),(0,a.createElement)(o.A,null,(0,r.NO)(ie,"with-overflow")),ue({id:"Layout-overrides"},"Layout overrides"),me({},"When the Path needs to be placed in a more narrow column on desktop (between 360px and 564px) the class ",re({},".slds-region_small")," should be placed on the container so it can adapt. If the container is between 565px and 1280px, the class ",re({},".slds-region_medium")," should be applied."),de({id:"Medium-layout"},"Medium layout"),me({},"With the class ",re({},".slds-region_medium")," applied to the container."),(0,a.createElement)(o.A,null,(0,r.NO)(ie,"medium")),de({id:"Medium-layout-with-coaching"},"Medium layout with coaching"),me({},"With the class ",re({},".slds-region_medium")," applied to the container."),(0,a.createElement)(o.A,null,(0,r.NO)(ie,"medium-coaching")),de({id:"Small-layout"},"Small layout"),me({},"With the class ",re({},".slds-region_small")," applied to the container."),(0,a.createElement)(o.A,null,(0,r.NO)(ie,"small-coaching")))},_e=function(){return(0,i.Qr)(Se())}},5206:function(e){e.exports=ReactDOM}},l={};function i(e){var t=l[e];if(void 0!==t)return t.exports;var n=l[e]={id:e,exports:{}};return a[e](n,n.exports,i),n.exports}i.m=a,i.amdO={},e=[],i.O=function(t,n,a,l){if(!n){var o=1/0;for(u=0;u<e.length;u++){n=e[u][0],a=e[u][1],l=e[u][2];for(var r=!0,c=0;c<n.length;c++)(!1&l\|\|o>=l)&&Object.keys(i.O).every(function(e){return i.O[e](n[c])})?n.splice(c--,1):(r=!1,l<o&&(o=l));if(r){e.splice(u--,1);var s=a();void 0!==s&&(t=s)}}return t}l=l\|\|0;for(var u=e.length;u>0&&e[u-1][2]>l;u--)e[u]=e[u-1];e[u]=[n,a,l]},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,{a:t}),t},n=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},i.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 l=Object.create(null);i.r(l);var o={};t=t\|\|[null,n({}),n([]),n(n)];for(var r=2&a&&e;("object"==typeof r\|\|"function"==typeof r)&&!~t.indexOf(r);r=n(r))Object.getOwnPropertyNames(r).forEach(function(t){o[t]=function(){return e[t]}});return o.default=function(){return e},i.d(l,o),l},i.d=function(e,t){for(var n in t)i.o(t,n)&&!i.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},i.e=function(){return Promise.resolve()},i.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.j=8390,function(){var e={8390:0};i.O.j=function(t){return 0===e[t]};var t=function(t,n){var a,l,o=n[0],r=n[1],c=n[2],s=0;if(o.some(function(t){return 0!==e[t]})){for(a in r)i.o(r,a)&&(i.m[a]=r[a]);if(c)var u=c(i)}for(t&&t(n);s<o.length;s++)l=o[s],i.o(e,l)&&e[l]&&e[l][0](),e[l]=0;return i.O(u)},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))}(),i.nc=void 0;var o=i.O(void 0,[3540],function(){return i(4399)});o=i.O(o),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/path/docs.mdx.js"]=o}();

package/__internal/chunked/docs/ui/components/picklist/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS;!function(){"use strict";var e,t,n,o={428:function(e,t,n){n.r(t),n.d(t,{getContents:function(){return B},getElement:function(){return D}});var o=n(1594),s=n.n(o),i=n(5671),l=n(6547),a=(n(2436),n(9582),n(5619),n(806)),c=n(5159),r=n(6185),d=n(7412),p=n.n(d),u=n(942),m=n.n(u),h=n(8347),b=n(6955),f=n(2711),y=function(e){return s().createElement("div",{className:m()("slds-dropdown",e.className),role:"listbox","aria-label":"{{Placeholder for Dropdown Menu Options}}",tabIndex:"0"},e.children)},x=function(e){return s().createElement("ul",{id:e.id\|\|"option-list-01",className:m()("slds-dropdown__list",e.className),role:"group"===e.role?"group":"presentation","aria-label":"group"===e.role?e["aria-label"]:null},e.children)},O=function(e){var t=a.Ay.uniqueId("listbox-option-");return s().createElement("li",{className:e.className,role:"presentation"},s().createElement("span",{className:m()("presentation"===e.role?"slds-lookup__item_label":e.text?"slds-lookup__item-action slds-lookup__item-action_label":"slds-lookup__item-action slds-media"),role:e.role?e.role:"option",tabIndex:e.tabIndex\|\|"-1",id:t},e.isSelectable?s().createElement(h.A,{className:"slds-icon slds-icon_selected slds-icon_x-small slds-icon-text-default slds-m-right_x-small slds-shrink-none",sprite:"utility",symbol:"check"}):null,e.headerText?s().createElement("h3",{className:"slds-text-title_caps",role:"presentation"},e.headerText):e.text?s().createElement("span",{className:"slds-truncate",title:e.title},e.children):e.children))},_=function(e){var t=e.autocomplete,n=e.dropdown,o=e.placeholder;return s().createElement(f.ZS,null,s().createElement(f.NA,{labelContent:"Categories",inputId:"text-input-01"}),s().createElement(f.qz,{className:"slds-input-has-icon slds-input-has-icon_right slds-picklist__input"},s().createElement("input",{id:"text-input-01",className:"slds-lookup__search-input slds-input",type:"text",placeholder:o,"aria-owns":"option-list-01",role:"textbox",readOnly:!t,"aria-autocomplete":t?"list":null}),t?null:s().createElement(b.A,{className:"slds-input__icon slds-text-color_default",symbol:"down",assistiveText:"Expand category options","aria-expanded":"open"===n?"true":"false",iconClassName:"slds-button__icon",tabIndex:"-1"})))};_.propTypes={autocomplete:p().bool,dropdown:p().string,placeholder:p().string},_.defaultProps={placeholder:"Select an Option…"};var g=n(8158),E=n(538),A={option1:{name:"Option A"},option2:{name:"Option B"},option3:{name:"Option ABCDE FGHIJ KLMNO PQRST UVWXYZ"}},v={option1:{name:"Option A",selected:!0},option2:{name:"Option B"},option3:{name:"Option ABCDE FGHIJ KLMNO PQRST UVWXYZ"}},N={option1:{name:"Option A",selected:!0},option2:{name:"Option B",selected:!0},option3:{name:"Option ABCDE FGHIJ KLMNO PQRST UVWXYZ"}},w=[{id:"default",label:"Default",element:s().createElement(c.Ay,{id:a.Ay.uniqueId("combobox-id-"),containerClassName:"slds-size_small","aria-controls":"listbox-id-1",inputIconPosition:"right",rightInputIcon:s().createElement(E.eX,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:s().createElement(r.Ay,{id:"listbox-id-1",snapshot:A,type:"plain",count:8}),resultsType:"listbox",selectOnly:!0,hasInteractions:!0})}],S=[{id:"focused",label:"Focused",element:s().createElement(c.Ay,{id:a.Ay.uniqueId("combobox-id-"),containerClassName:"slds-size_small","aria-controls":"listbox-id-2",inputIconPosition:"right",rightInputIcon:s().createElement(E.eX,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:s().createElement(r.Ay,{id:"listbox-id-2",snapshot:A,type:"plain",count:8}),resultsType:"listbox",selectOnly:!0,hasFocus:!0,isOpen:!0})},{id:"open-item-focused",label:"Open - Item Focused",element:s().createElement(c.Ay,{id:a.Ay.uniqueId("combobox-id-"),containerClassName:"slds-size_small","aria-controls":"listbox-id-3",inputIconPosition:"right",rightInputIcon:s().createElement(E.eX,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:s().createElement(r.Ay,{id:"listbox-id-3",snapshot:{option1:{name:"Option A",focused:!0},option2:{name:"Option B"},option3:{name:"Option ABCDE FGHIJ KLMNO PQRST UVWXYZ"}},type:"plain",count:8}),resultsType:"listbox","aria-activedescendant":"option1",selectOnly:!0,hasFocus:!0,isOpen:!0})},{id:"open-option-selected",label:"Open - Option Selected",element:s().createElement(c.Ay,{id:a.Ay.uniqueId("combobox-id-"),containerClassName:"slds-size_small","aria-controls":"listbox-id-4",inputIconPosition:"right",value:"Option A",rightInputIcon:s().createElement(E.eX,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:s().createElement(r.Ay,{id:"listbox-id-4",snapshot:v,type:"plain",count:8}),resultsType:"listbox","aria-activedescendant":"option1",selectOnly:!0,hasFocus:!0,isOpen:!0})},{id:"open-options-selected",label:"Open - Options Selected",element:s().createElement(c.Ay,{id:a.Ay.uniqueId("combobox-id-"),containerClassName:"slds-size_small","aria-controls":"listbox-id-5",selectOnly:!0,value:"2 Options Selected",inputIconPosition:"right",rightInputIcon:s().createElement(E.eX,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:s().createElement(r.Ay,{id:"listbox-id-5",snapshot:N,type:"plain",count:8}),resultsType:"listbox",isOpen:!0,hasFocus:!0})},{id:"closed-option-selected",label:"Closed - Option Selected",element:s().createElement(c.Ay,{id:a.Ay.uniqueId("combobox-id-"),containerClassName:"slds-size_small","aria-controls":"listbox-id-6",inputIconPosition:"right",value:"Option A",rightInputIcon:s().createElement(E.eX,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:s().createElement(r.Ay,{id:"listbox-id-6",snapshot:v,type:"plain",count:8}),resultsType:"listbox","aria-activedescendant":"option1",selectOnly:!0})},{id:"closed-options-selected",label:"Closed - Options Selected",element:s().createElement(c.Ay,{id:a.Ay.uniqueId("combobox-id-"),containerClassName:"slds-size_small","aria-controls":"listbox-id-7",selectOnly:!0,value:"2 Options Selected",inputIconPosition:"right",rightInputIcon:s().createElement(E.eX,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:s().createElement(r.Ay,{id:"listbox-id-7",snapshot:N,type:"plain",count:8}),resultsType:"listbox",listboxOfSelections:s().createElement(g.A,{snapshot:{option1:{name:"Option A",tabIndex:0},option2:{name:"Option B"}},count:2})})},{id:"group-heading",label:"Group heading label",element:s().createElement(c.Ay,{id:a.Ay.uniqueId("combobox-id-"),containerClassName:"slds-size_small","aria-controls":"listbox-id-8",selectOnly:!0,inputIconPosition:"right",rightInputIcon:s().createElement(E.eX,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:s().createElement(r.Jm,{id:"listbox-id-8",className:"slds-dropdown slds-dropdown_fluid","aria-label":"{{Placeholder for Dropdown Items}}"},s().createElement(r.NA,{"aria-label":"Group One",snapshot:{option0:{name:"Recently Viewed",label:!0},option1:{name:"Option A"},option2:{name:"Option B"}},count:3})),resultsType:"listbox",isOpen:!0,hasFocus:!0})},{id:"deprecated-picklist-open",label:"Deprecated Picklist Open",element:s().createElement("div",{className:"demo-only",style:{height:"240px"}},s().createElement("div",{className:"slds-picklist slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open"},s().createElement(_,{dropdown:"open"}),s().createElement(y,{className:"slds-dropdown_left slds-dropdown_length-5"},s().createElement(x,null,s().createElement(O,{isSelectable:!0,text:!0,title:"Option A",tabIndex:"0"},"Option A"),s().createElement(O,{isSelectable:!0,text:!0,title:"Option B"},"Option B"),s().createElement(O,{isSelectable:!0,text:!0,title:"Option C"},"Option C"),s().createElement(O,{isSelectable:!0,text:!0,title:"Option D"},"Option D"),s().createElement(O,{isSelectable:!0,text:!0,title:"Option E"},"Option E"),s().createElement(O,{isSelectable:!0,text:!0,title:"Option F"},"Option FGHIJKLMNOPQRSTUVWXYZ")))))}],I=i.XB.a,C=i.XB.code,T=i.XB.h2,k=i.XB.h3,P=i.XB.p,D=function(){return(0,o.createElement)(i.Ay,{},(0,o.createElement)("div",{className:"doc lead"},"A Picklist provides a user with an select-only component that is functionally similar to an HTML `select` element. It is accompanied with a listbox of pre-defined options. A picklist has both single and multi-selection patterns."),(0,o.createElement)(l.A,{demoStyles:"height: 11rem;",exampleOnly:!0},(0,a.NO)(S,"open-option-selected")),T({id:"About-Picklist"},"About Picklist"),P({},"A picklist is a widget that displays a list of selectable options. When an option is selected, it is shown as selected and the value of the read-only input is updated to match it."),P({},'A multi-select picklist is a widget that displays a list of selectable options, where more than one option can be chosen. When more than one option has been selected, the value of the read-only input should update with the total number of selected items, such as "3 options selected". When a picklist with multiple selected options is closed, a listbox of pills is also used to represent those selected options. The listbox of pills is positioned below the read-only input, each pill represents a selected option. This allows a user to easily see and remove selected items.'),P({},"The target HTML element, ",C({},"slds-combobox")," and dropdown need to be wrapped in the class ",C({},".slds-dropdown-trigger dropdown-trigger_click"),"."),T({id:"Accessibility"},"Accessibility"),P({},'A Picklist allows a user to select and set a value from a pre-defined list of options. As such we follow the ARIA Combobox widget pattern to implement it as it\'s the most appropriate concept to achieve this. The variant of Combobox we chose is the "Read-only" version, as a users keyboard input cannot directly affect the value set in the Combobox, but can only select a value from a pre-defined list. It also does not perform a search, or autocomplete function. It most closely resembles the HTML ',C({},"select")," element."),P({},"Implementing a multi-select pattern with a Combobox is not standard, nor is it technically supported by the specification. Therefore great care should be paid to the extra steps we take to try and communicate multi-selection."),P({},"Please refer to the ",I({href:"/components/combobox"},"Combobox")," documentation relating to read-only implementation guidelines."),T({id:"Default"},"Default"),P({},"A Picklist provides a user with an read-only input field that is accompanied with a listbox of pre-defined options. A picklist has a single and multi-selection pattern."),(0,o.createElement)(l.A,{demoStyles:"height: 11rem;"},(0,a.NO)(w)),T({id:"States"},"States"),k({id:"Focused"},"Focused"),(0,o.createElement)(l.A,{demoStyles:"height: 11rem;"},(0,a.NO)(S,"focused")),k({id:"Open-Item-Focused"},"Open - Item Focused"),(0,o.createElement)(l.A,{demoStyles:"height: 11rem;"},(0,a.NO)(S,"open-item-focused")),k({id:"Open-Option-Selected"},"Open - Option Selected"),(0,o.createElement)(l.A,{demoStyles:"height: 11rem;"},(0,a.NO)(S,"open-option-selected")),k({id:"Open-Options-Selected"},"Open - Options Selected"),(0,o.createElement)(l.A,{demoStyles:"height: 11rem;"},(0,a.NO)(S,"open-options-selected")),k({id:"Closed-Option-Selected"},"Closed - Option Selected"),(0,o.createElement)(l.A,null,(0,a.NO)(S,"closed-option-selected")),k({id:"Closed-Options-Selected"},"Closed - Options Selected"),(0,o.createElement)(l.A,null,(0,a.NO)(S,"closed-options-selected")),T({id:"Examples"},"Examples"),k({id:"Group-heading-label"},"Group heading label"),(0,o.createElement)(l.A,{demoStyles:"height: 13rem;"},(0,a.NO)(S,"group-heading")))},B=function(){return(0,i.Qr)(D())}},1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM}},s={};function i(e){var t=s[e];if(void 0!==t)return t.exports;var n=s[e]={id:e,exports:{}};return o[e](n,n.exports,i),n.exports}i.m=o,i.amdO={},e=[],i.O=function(t,n,o,s){if(!n){var l=1/0;for(d=0;d<e.length;d++){n=e[d][0],o=e[d][1],s=e[d][2];for(var a=!0,c=0;c<n.length;c++)(!1&s\|\|l>=s)&&Object.keys(i.O).every(function(e){return i.O[e](n[c])})?n.splice(c--,1):(a=!1,s<l&&(l=s));if(a){e.splice(d--,1);var r=o();void 0!==r&&(t=r)}}return t}s=s\|\|0;for(var d=e.length;d>0&&e[d-1][2]>s;d--)e[d]=e[d-1];e[d]=[n,o,s]},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,{a:t}),t},n=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},i.t=function(e,o){if(1&o&&(e=this(e)),8&o)return e;if("object"==typeof e&&e){if(4&o&&e.__esModule)return e;if(16&o&&"function"==typeof e.then)return e}var s=Object.create(null);i.r(s);var l={};t=t\|\|[null,n({}),n([]),n(n)];for(var a=2&o&&e;("object"==typeof a\|\|"function"==typeof a)&&!~t.indexOf(a);a=n(a))Object.getOwnPropertyNames(a).forEach(function(t){l[t]=function(){return e[t]}});return l.default=function(){return e},i.d(s,l),s},i.d=function(e,t){for(var n in t)i.o(t,n)&&!i.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},i.e=function(){return Promise.resolve()},i.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.j=2996,function(){var e={2996:0};i.O.j=function(t){return 0===e[t]};var t=function(t,n){var o,s,l=n[0],a=n[1],c=n[2],r=0;if(l.some(function(t){return 0!==e[t]})){for(o in a)i.o(a,o)&&(i.m[o]=a[o]);if(c)var d=c(i)}for(t&&t(n);r<l.length;r++)s=l[r],i.o(e,s)&&e[s]&&e[s][0](),e[s]=0;return i.O(d)},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))}(),i.nc=void 0;var l=i.O(void 0,[3540],function(){return i(428)});l=i.O(l),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/picklist/docs.mdx.js"]=l}();
1	+ var SLDS;!function(){"use strict";var e,t,n,o={428:function(e,t,n){n.r(t),n.d(t,{getContents:function(){return B},getElement:function(){return D}});var o=n(1594),s=n.n(o),i=n(5671),l=n(6547),a=(n(2436),n(9582),n(5619),n(806)),c=n(5159),r=n(6185),d=n(4187),p=n.n(d),u=n(942),m=n.n(u),h=n(8347),b=n(6955),f=n(2711),y=function(e){return s().createElement("div",{className:m()("slds-dropdown",e.className),role:"listbox","aria-label":"{{Placeholder for Dropdown Menu Options}}",tabIndex:"0"},e.children)},x=function(e){return s().createElement("ul",{id:e.id\|\|"option-list-01",className:m()("slds-dropdown__list",e.className),role:"group"===e.role?"group":"presentation","aria-label":"group"===e.role?e["aria-label"]:null},e.children)},O=function(e){var t=a.Ay.uniqueId("listbox-option-");return s().createElement("li",{className:e.className,role:"presentation"},s().createElement("span",{className:m()("presentation"===e.role?"slds-lookup__item_label":e.text?"slds-lookup__item-action slds-lookup__item-action_label":"slds-lookup__item-action slds-media"),role:e.role?e.role:"option",tabIndex:e.tabIndex\|\|"-1",id:t},e.isSelectable?s().createElement(h.A,{className:"slds-icon slds-icon_selected slds-icon_x-small slds-icon-text-default slds-m-right_x-small slds-shrink-none",sprite:"utility",symbol:"check"}):null,e.headerText?s().createElement("h3",{className:"slds-text-title_caps",role:"presentation"},e.headerText):e.text?s().createElement("span",{className:"slds-truncate",title:e.title},e.children):e.children))},_=function(e){var t=e.autocomplete,n=e.dropdown,o=e.placeholder;return s().createElement(f.ZS,null,s().createElement(f.NA,{labelContent:"Categories",inputId:"text-input-01"}),s().createElement(f.qz,{className:"slds-input-has-icon slds-input-has-icon_right slds-picklist__input"},s().createElement("input",{id:"text-input-01",className:"slds-lookup__search-input slds-input",type:"text",placeholder:o,"aria-owns":"option-list-01",role:"textbox",readOnly:!t,"aria-autocomplete":t?"list":null}),t?null:s().createElement(b.A,{className:"slds-input__icon slds-text-color_default",symbol:"down",assistiveText:"Expand category options","aria-expanded":"open"===n?"true":"false",iconClassName:"slds-button__icon",tabIndex:"-1"})))};_.propTypes={autocomplete:p().bool,dropdown:p().string,placeholder:p().string},_.defaultProps={placeholder:"Select an Option…"};var g=n(8158),E=n(538),A={option1:{name:"Option A"},option2:{name:"Option B"},option3:{name:"Option ABCDE FGHIJ KLMNO PQRST UVWXYZ"}},v={option1:{name:"Option A",selected:!0},option2:{name:"Option B"},option3:{name:"Option ABCDE FGHIJ KLMNO PQRST UVWXYZ"}},N={option1:{name:"Option A",selected:!0},option2:{name:"Option B",selected:!0},option3:{name:"Option ABCDE FGHIJ KLMNO PQRST UVWXYZ"}},w=[{id:"default",label:"Default",element:s().createElement(c.Ay,{id:a.Ay.uniqueId("combobox-id-"),containerClassName:"slds-size_small","aria-controls":"listbox-id-1",inputIconPosition:"right",rightInputIcon:s().createElement(E.eX,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:s().createElement(r.Ay,{id:"listbox-id-1",snapshot:A,type:"plain",count:8}),resultsType:"listbox",selectOnly:!0,hasInteractions:!0})}],S=[{id:"focused",label:"Focused",element:s().createElement(c.Ay,{id:a.Ay.uniqueId("combobox-id-"),containerClassName:"slds-size_small","aria-controls":"listbox-id-2",inputIconPosition:"right",rightInputIcon:s().createElement(E.eX,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:s().createElement(r.Ay,{id:"listbox-id-2",snapshot:A,type:"plain",count:8}),resultsType:"listbox",selectOnly:!0,hasFocus:!0,isOpen:!0})},{id:"open-item-focused",label:"Open - Item Focused",element:s().createElement(c.Ay,{id:a.Ay.uniqueId("combobox-id-"),containerClassName:"slds-size_small","aria-controls":"listbox-id-3",inputIconPosition:"right",rightInputIcon:s().createElement(E.eX,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:s().createElement(r.Ay,{id:"listbox-id-3",snapshot:{option1:{name:"Option A",focused:!0},option2:{name:"Option B"},option3:{name:"Option ABCDE FGHIJ KLMNO PQRST UVWXYZ"}},type:"plain",count:8}),resultsType:"listbox","aria-activedescendant":"option1",selectOnly:!0,hasFocus:!0,isOpen:!0})},{id:"open-option-selected",label:"Open - Option Selected",element:s().createElement(c.Ay,{id:a.Ay.uniqueId("combobox-id-"),containerClassName:"slds-size_small","aria-controls":"listbox-id-4",inputIconPosition:"right",value:"Option A",rightInputIcon:s().createElement(E.eX,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:s().createElement(r.Ay,{id:"listbox-id-4",snapshot:v,type:"plain",count:8}),resultsType:"listbox","aria-activedescendant":"option1",selectOnly:!0,hasFocus:!0,isOpen:!0})},{id:"open-options-selected",label:"Open - Options Selected",element:s().createElement(c.Ay,{id:a.Ay.uniqueId("combobox-id-"),containerClassName:"slds-size_small","aria-controls":"listbox-id-5",selectOnly:!0,value:"2 Options Selected",inputIconPosition:"right",rightInputIcon:s().createElement(E.eX,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:s().createElement(r.Ay,{id:"listbox-id-5",snapshot:N,type:"plain",count:8}),resultsType:"listbox",isOpen:!0,hasFocus:!0})},{id:"closed-option-selected",label:"Closed - Option Selected",element:s().createElement(c.Ay,{id:a.Ay.uniqueId("combobox-id-"),containerClassName:"slds-size_small","aria-controls":"listbox-id-6",inputIconPosition:"right",value:"Option A",rightInputIcon:s().createElement(E.eX,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:s().createElement(r.Ay,{id:"listbox-id-6",snapshot:v,type:"plain",count:8}),resultsType:"listbox","aria-activedescendant":"option1",selectOnly:!0})},{id:"closed-options-selected",label:"Closed - Options Selected",element:s().createElement(c.Ay,{id:a.Ay.uniqueId("combobox-id-"),containerClassName:"slds-size_small","aria-controls":"listbox-id-7",selectOnly:!0,value:"2 Options Selected",inputIconPosition:"right",rightInputIcon:s().createElement(E.eX,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:s().createElement(r.Ay,{id:"listbox-id-7",snapshot:N,type:"plain",count:8}),resultsType:"listbox",listboxOfSelections:s().createElement(g.A,{snapshot:{option1:{name:"Option A",tabIndex:0},option2:{name:"Option B"}},count:2})})},{id:"group-heading",label:"Group heading label",element:s().createElement(c.Ay,{id:a.Ay.uniqueId("combobox-id-"),containerClassName:"slds-size_small","aria-controls":"listbox-id-8",selectOnly:!0,inputIconPosition:"right",rightInputIcon:s().createElement(E.eX,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:s().createElement(r.Jm,{id:"listbox-id-8",className:"slds-dropdown slds-dropdown_fluid","aria-label":"{{Placeholder for Dropdown Items}}"},s().createElement(r.NA,{"aria-label":"Group One",snapshot:{option0:{name:"Recently Viewed",label:!0},option1:{name:"Option A"},option2:{name:"Option B"}},count:3})),resultsType:"listbox",isOpen:!0,hasFocus:!0})},{id:"deprecated-picklist-open",label:"Deprecated Picklist Open",element:s().createElement("div",{className:"demo-only",style:{height:"240px"}},s().createElement("div",{className:"slds-picklist slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open"},s().createElement(_,{dropdown:"open"}),s().createElement(y,{className:"slds-dropdown_left slds-dropdown_length-5"},s().createElement(x,null,s().createElement(O,{isSelectable:!0,text:!0,title:"Option A",tabIndex:"0"},"Option A"),s().createElement(O,{isSelectable:!0,text:!0,title:"Option B"},"Option B"),s().createElement(O,{isSelectable:!0,text:!0,title:"Option C"},"Option C"),s().createElement(O,{isSelectable:!0,text:!0,title:"Option D"},"Option D"),s().createElement(O,{isSelectable:!0,text:!0,title:"Option E"},"Option E"),s().createElement(O,{isSelectable:!0,text:!0,title:"Option F"},"Option FGHIJKLMNOPQRSTUVWXYZ")))))}],I=i.XB.a,C=i.XB.code,T=i.XB.h2,k=i.XB.h3,P=i.XB.p,D=function(){return(0,o.createElement)(i.Ay,{},(0,o.createElement)("div",{className:"doc lead"},"A Picklist provides a user with an select-only component that is functionally similar to an HTML `select` element. It is accompanied with a listbox of pre-defined options. A picklist has both single and multi-selection patterns."),(0,o.createElement)(l.A,{demoStyles:"height: 11rem;",exampleOnly:!0},(0,a.NO)(S,"open-option-selected")),T({id:"About-Picklist"},"About Picklist"),P({},"A picklist is a widget that displays a list of selectable options. When an option is selected, it is shown as selected and the value of the read-only input is updated to match it."),P({},'A multi-select picklist is a widget that displays a list of selectable options, where more than one option can be chosen. When more than one option has been selected, the value of the read-only input should update with the total number of selected items, such as "3 options selected". When a picklist with multiple selected options is closed, a listbox of pills is also used to represent those selected options. The listbox of pills is positioned below the read-only input, each pill represents a selected option. This allows a user to easily see and remove selected items.'),P({},"The target HTML element, ",C({},"slds-combobox")," and dropdown need to be wrapped in the class ",C({},".slds-dropdown-trigger dropdown-trigger_click"),"."),T({id:"Accessibility"},"Accessibility"),P({},'A Picklist allows a user to select and set a value from a pre-defined list of options. As such we follow the ARIA Combobox widget pattern to implement it as it\'s the most appropriate concept to achieve this. The variant of Combobox we chose is the "Read-only" version, as a users keyboard input cannot directly affect the value set in the Combobox, but can only select a value from a pre-defined list. It also does not perform a search, or autocomplete function. It most closely resembles the HTML ',C({},"select")," element."),P({},"Implementing a multi-select pattern with a Combobox is not standard, nor is it technically supported by the specification. Therefore great care should be paid to the extra steps we take to try and communicate multi-selection."),P({},"Please refer to the ",I({href:"/components/combobox"},"Combobox")," documentation relating to read-only implementation guidelines."),T({id:"Default"},"Default"),P({},"A Picklist provides a user with an read-only input field that is accompanied with a listbox of pre-defined options. A picklist has a single and multi-selection pattern."),(0,o.createElement)(l.A,{demoStyles:"height: 11rem;"},(0,a.NO)(w)),T({id:"States"},"States"),k({id:"Focused"},"Focused"),(0,o.createElement)(l.A,{demoStyles:"height: 11rem;"},(0,a.NO)(S,"focused")),k({id:"Open-Item-Focused"},"Open - Item Focused"),(0,o.createElement)(l.A,{demoStyles:"height: 11rem;"},(0,a.NO)(S,"open-item-focused")),k({id:"Open-Option-Selected"},"Open - Option Selected"),(0,o.createElement)(l.A,{demoStyles:"height: 11rem;"},(0,a.NO)(S,"open-option-selected")),k({id:"Open-Options-Selected"},"Open - Options Selected"),(0,o.createElement)(l.A,{demoStyles:"height: 11rem;"},(0,a.NO)(S,"open-options-selected")),k({id:"Closed-Option-Selected"},"Closed - Option Selected"),(0,o.createElement)(l.A,null,(0,a.NO)(S,"closed-option-selected")),k({id:"Closed-Options-Selected"},"Closed - Options Selected"),(0,o.createElement)(l.A,null,(0,a.NO)(S,"closed-options-selected")),T({id:"Examples"},"Examples"),k({id:"Group-heading-label"},"Group heading label"),(0,o.createElement)(l.A,{demoStyles:"height: 13rem;"},(0,a.NO)(S,"group-heading")))},B=function(){return(0,i.Qr)(D())}},1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM}},s={};function i(e){var t=s[e];if(void 0!==t)return t.exports;var n=s[e]={id:e,exports:{}};return o[e](n,n.exports,i),n.exports}i.m=o,i.amdO={},e=[],i.O=function(t,n,o,s){if(!n){var l=1/0;for(d=0;d<e.length;d++){n=e[d][0],o=e[d][1],s=e[d][2];for(var a=!0,c=0;c<n.length;c++)(!1&s\|\|l>=s)&&Object.keys(i.O).every(function(e){return i.O[e](n[c])})?n.splice(c--,1):(a=!1,s<l&&(l=s));if(a){e.splice(d--,1);var r=o();void 0!==r&&(t=r)}}return t}s=s\|\|0;for(var d=e.length;d>0&&e[d-1][2]>s;d--)e[d]=e[d-1];e[d]=[n,o,s]},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,{a:t}),t},n=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},i.t=function(e,o){if(1&o&&(e=this(e)),8&o)return e;if("object"==typeof e&&e){if(4&o&&e.__esModule)return e;if(16&o&&"function"==typeof e.then)return e}var s=Object.create(null);i.r(s);var l={};t=t\|\|[null,n({}),n([]),n(n)];for(var a=2&o&&e;("object"==typeof a\|\|"function"==typeof a)&&!~t.indexOf(a);a=n(a))Object.getOwnPropertyNames(a).forEach(function(t){l[t]=function(){return e[t]}});return l.default=function(){return e},i.d(s,l),s},i.d=function(e,t){for(var n in t)i.o(t,n)&&!i.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},i.e=function(){return Promise.resolve()},i.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.j=2996,function(){var e={2996:0};i.O.j=function(t){return 0===e[t]};var t=function(t,n){var o,s,l=n[0],a=n[1],c=n[2],r=0;if(l.some(function(t){return 0!==e[t]})){for(o in a)i.o(a,o)&&(i.m[o]=a[o]);if(c)var d=c(i)}for(t&&t(n);r<l.length;r++)s=l[r],i.o(e,s)&&e[s]&&e[s][0](),e[s]=0;return i.O(d)},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))}(),i.nc=void 0;var l=i.O(void 0,[3540],function(){return i(428)});l=i.O(l),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/picklist/docs.mdx.js"]=l}();

package/__internal/chunked/docs/ui/components/rich-text-editor/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS;!function(){"use strict";var e,t,l,n={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM},9564:function(e,t,l){l.r(t),l.d(t,{getContents:function(){return V},getElement:function(){return Q}});var n=l(1594),r=l.n(n),a=l(5671),i=l(6547),o=(l(2436),l(9582),l(5619),l(8342)),s=l(806),d=l(7412),c=l.n(d),u=l(942),m=l.n(u),b=l(4216),E=l(1412),p=l(6955),f=l(8347),h=l(5159),x=l(3964),g=l(6185),v=(l(5786),l(538)),y=l(2711);function _(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 n,r,a,i,o=[],s=!0,d=!1;try{if(a=(l=l.call(e)).next,0===t){if(Object(l)!==l)return;s=!1}else for(;!(s=(n=a.call(l)).done)&&(o.push(n.value),o.length!==t);s=!0);}catch(e){d=!0,r=e}finally{try{if(!s&&null!=l.return&&(i=l.return(),Object(i)!==i))return}finally{if(d)throw r}}return o}}(e,t)\|\|function(e,t){if(e){if("string"==typeof e)return N(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)?N(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 N(e,t){(null==t\|\|t>e.length)&&(t=e.length);for(var l=0,n=Array(t);l<t;l++)n[l]=e[l];return n}l(5526);var w="rich-text-editor-unique-id-01",T=function(e){return r().createElement(y.ZS,{labelId:e.labelId,labelContent:e.label,inlineMessage:e.inlineMessage,hasError:e.hasError,errorId:e.errorId,hasFauxLabel:!0},r().createElement("div",{className:m()("slds-rich-text-editor slds-grid slds-grid_vertical slds-nowrap",e.isToolbarOnly&&"slds-rich-text-editor_toolbar-only",e.className),"aria-label":e.disabledLabel},e.children))};T.propTypes={children:c().node.isRequired,errorId:c().string,hasError:c().bool,inlineMessage:c().string,labelContent:c().string,labelId:c().string};var I=function(e){return r().createElement("div",{role:"toolbar","aria-label":e.disabledLabel,className:m()("slds-rich-text-editor__toolbar slds-shrink-none",e.isToolbarOnly&&"slds-rich-text-editor__toolbar_detached",e.className)},e.children)},O=function(e){var t=e.listboxData,l=e.id;return r().createElement(g.Ay,{id:l,snapshot:t,type:"plain",count:3,hideIcons:!0,className:"slds-dropdown_fluid slds-dropdown_left"})};O.propTypes={listboxData:c().object.isRequired,id:c().string};var A=function(e){var t=e.listboxData,l=e.id;return r().createElement(g.Ay,{id:l,snapshot:t,type:"plain",count:6,hideIcons:!0,className:"slds-dropdown_fluid slds-dropdown_left"})};A.propTypes={listboxData:c().object.isRequired,id:c().string};var S=function(e){var t=_((0,n.useState)(s.Ay.uniqueId("example-unique-id-")),1)[0],l=_((0,n.useState)(s.Ay.uniqueId("example-unique-id-")),1)[0],a=_((0,n.useState)(s.Ay.uniqueId("example-unique-id-")),1)[0],i=_((0,n.useState)(s.Ay.uniqueId("example-unique-id-")),1)[0];return r().createElement("div",{className:"slds-grid slds-rich-text-editor__spacing-wrapper",role:"group","aria-label":"Format font family & size"},r().createElement("div",{className:"slds-rich-text-editor__select"},r().createElement(h.Ay,{id:t,"aria-controls":l,label:"Choose a Font",hideLabel:!0,inputContainerClassName:"slds-rich-text-editor__select_x-small",inputIconPosition:"right",rightInputIcon:r().createElement(v.eX,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:r().createElement(O,{listboxData:x.kz,id:l}),resultsType:"listbox",hasInteractions:!0,selectOnly:!0,value:"Font"})),r().createElement("div",{className:"slds-rich-text-editor__select"},r().createElement(h.Ay,{id:a,"aria-controls":i,label:"Choose a Font Size",hideLabel:!0,inputContainerClassName:"slds-rich-text-editor__select_xx-small",inputIconPosition:"right",rightInputIcon:r().createElement(v.eX,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:r().createElement(A,{listboxData:x.TU,id:i}),resultsType:"listbox",hasInteractions:!0,selectOnly:!0,value:"Size",tabIndex:"-1"})))},j=function(e){return r().createElement(E.GW,{"aria-label":"Format text"},r().createElement("li",null,r().createElement(p.A,{className:"slds-button_icon-border-filled",symbol:"bold",tabIndex:e.tabIndexSetting,"aria-describedby":e.hasTooltip?"bold":null,disabled:e.disabledButtons,assistiveText:"Bold"})),r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"italic",disabled:e.disabledButtons,assistiveText:"Italic"})),r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"underline",disabled:e.disabledButtons,assistiveText:"Underline"})),r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"strikethrough",disabled:e.disabledButtons,assistiveText:"Strike Through"})))},q=function(e){return r().createElement(E.GW,{"aria-label":"Format background & text color"},r().createElement("li",null,r().createElement("button",{tabIndex:"-1",disabled:e.disabledButtons,className:"slds-button slds-button_icon slds-button_icon-more slds-button_icon-more-filled","aria-haspopup":"true"},r().createElement(f.A,{className:"slds-button__icon",sprite:"utility",symbol:"text_background_color"}),r().createElement(f.A,{className:"slds-button__icon slds-button__icon_x-small",sprite:"utility",symbol:"down"}),r().createElement("span",{className:"slds-assistive-text"},"Background Color"))),r().createElement("li",null,r().createElement("button",{tabIndex:"-1",disabled:e.disabledButtons,className:"slds-button slds-button_icon slds-button_icon-more slds-button_icon-more-filled","aria-haspopup":"true"},r().createElement(f.A,{className:"slds-button__icon",sprite:"utility",symbol:"text_color"}),r().createElement(f.A,{className:"slds-button__icon slds-button__icon_x-small",sprite:"utility",symbol:"down"}),r().createElement("span",{className:"slds-assistive-text"},"Text Color"))))},L=function(e){return r().createElement(E.GW,{"aria-label":"Format body"},r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"richtextbulletedlist",disabled:e.disabledButtons,assistiveText:"Bulleted List"})),r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"richtextnumberedlist",disabled:e.disabledButtons,assistiveText:"Numbered List"})),r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"richtextindent",disabled:e.disabledButtons,assistiveText:"Indent"})),r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"richtextoutdent",disabled:e.disabledButtons,assistiveText:"Outdent"})))},B=function(e){return r().createElement(E.GW,{"aria-label":"Align text"},r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"left_align_text",disabled:e.disabledButtons,assistiveText:"Left Align Text"})),r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"center_align_text",disabled:e.disabledButtons,assistiveText:"Center Align Text"})),r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"right_align_text",disabled:e.disabledButtons,assistiveText:"Right Align Text"})))},C=function(e){return r().createElement(E.GW,{role:e.overflow?"presentation":null,"aria-label":e.overflow?null:"Insert content"},r().createElement("li",{role:e.overflow?"presentation":null},r().createElement(p.A,{role:e.overflow?"menuitem":null,tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"emoji",disabled:e.disabledButtons,assistiveText:"Add Emoji"})),r().createElement("li",{role:e.overflow?"presentation":null},r().createElement(p.A,{role:e.overflow?"menuitem":null,tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"image",disabled:e.disabledButtons,assistiveText:"Add Image"})),r().createElement("li",{role:e.overflow?"presentation":null},r().createElement(p.A,{role:e.overflow?"menuitem":null,tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"link",disabled:e.disabledButtons,assistiveText:"Add Link"})))},R=function(e){return r().createElement(E.GW,{"aria-label":"Add user"},r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"adduser",disabled:e.disabledButtons,assistiveText:"Add User"})))},k=function(e){return r().createElement(E.GW,{role:e.overflow?"presentation":null,"aria-label":e.overflow?null:"Remove Formatting"},r().createElement("li",{role:e.overflow?"presentation":null},r().createElement(p.A,{role:e.overflow?"menuitem":null,tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"remove_formatting",disabled:e.disabledButtons,assistiveText:"Remove Formatting"})))},D=function(e){return r().createElement("div",{className:m()(e.text?"slds-rich-text-editor__output":"slds-rich-text-editor__textarea","slds-grid")},e.text?r().createElement("div",{"aria-describedby":e["aria-describedby"],"aria-label":e.labelId?null:"Compose text","aria-labelledby":e.labelId,contentEditable:e.disabled?null:"true",suppressContentEditableWarning:!0,className:"slds-rich-text-area__content slds-grow"},e.text):r().createElement("div",{"aria-describedby":e["aria-describedby"],"aria-label":e.labelId?null:e.label\|\|"Compose text","aria-labelledby":e.labelId,contentEditable:e.disabled?null:"true",suppressContentEditableWarning:!0,className:"slds-rich-text-area__content slds-text-color_weak slds-grow"},e.placeholder))};function M(){return M=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var l=arguments[t];for(var n in l)({}).hasOwnProperty.call(l,n)&&(e[n]=l[n])}return e},M.apply(null,arguments)}var G=function(e){return r().createElement("div",M({className:m()("demo-only",e.className),style:{minHeight:"180px"}},e),e.children)};G.propTypes={children:c().node,className:c().string};var F=function(e){return r().createElement("div",null,r().createElement("h1",null,"Heading - h1"),r().createElement("p",null,"Lorem ipsum dolor sit amet, ",r().createElement("strong",null,"strong")," adipisicing elit, sed do ",r().createElement("em",null,"emphasis")," tempor incididunt ut ",r().createElement("u",null,"underlined")," et dolore"," ",r().createElement("s",null,"strikethrough")," aliqua. Ut ",r().createElement("sub",null,"subscript")," ad"," ",r().createElement("sup",null,"superscript")," veniam, ",r().createElement("abbr",null,"quis")," nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in ",r().createElement("a",{href:"#"},"link")," in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),r().createElement("h2",null,"Heading - h2"),r().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod"," ",r().createElement("a",{href:"#"},"veryVeryLongWordWithHyperlinkExample")," tempor incididunt ut labore et dolore magna aliqua."),r().createElement("ul",null,r().createElement("li",null,"Unordered list item",r().createElement("ul",null,r().createElement("li",null,"Nested Unordered list item",r().createElement("ol",null,r().createElement("li",null,"Nested Ordered list item"),r().createElement("li",null,"Nested Ordered list item"))),r().createElement("li",null,"Nested Unordered list item",r().createElement("ul",null,r().createElement("li",null,"Nested Unordered list item"),r().createElement("li",null,"Nested Unordered list item"))))),r().createElement("li",null,"Unordered list item",r().createElement("ol",null,r().createElement("li",null,"Nested Ordered list item"),r().createElement("li",null,"Nested Ordered list item"))),r().createElement("li",null,"Unordered list item")),r().createElement("h3",null,"Heading - h3"),r().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),r().createElement("ol",null,r().createElement("li",null,"Ordered list item",r().createElement("ul",null,r().createElement("li",null,"Nested Unordered list item",r().createElement("ol",null,r().createElement("li",null,"Nested Ordered list item"),r().createElement("li",null,"Nested Ordered list item"))),r().createElement("li",null,"Nested Unordered list item",r().createElement("ul",null,r().createElement("li",null,"Nested Unordered list item"),r().createElement("li",null,"Nested Unordered list item"))))),r().createElement("li",null,"Ordered list item",r().createElement("ol",null,r().createElement("li",null,"Nested Ordered list item",r().createElement("ol",null,r().createElement("li",null,"Nested Ordered list item",r().createElement("ol",null,r().createElement("li",null,"Nested Ordered list item"),r().createElement("li",null,"Nested Ordered list item"))),r().createElement("li",null,"Nested Ordered list item"))),r().createElement("li",null,"Nested Ordered list item"))),r().createElement("li",null,"Ordered list item")),r().createElement("ul",null,r().createElement("li",null,r().createElement("div",null,"List Item with div")),r().createElement("li",null,r().createElement("div",null,"List Item with div"))),r().createElement("ol",null,r().createElement("li",null,r().createElement("div",null,"List Item with div")),r().createElement("li",null,r().createElement("div",null,"List Item with div"))),r().createElement("h4",null,"Heading - h4"),r().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),r().createElement("dl",null,r().createElement("dt",null,"Description List - Term"),r().createElement("dd",null,"Description List - Description"),r().createElement("dt",null,"Description List - Term"),r().createElement("dd",null,"Description List - Description")),r().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),r().createElement("table",null,r().createElement("thead",null,r().createElement("tr",null,r().createElement("th",null,"Column"),r().createElement("th",null,"Column"))),r().createElement("tbody",null,r().createElement("tr",null,r().createElement("td",null,"Row"),r().createElement("td",null,"Row")),r().createElement("tr",null,r().createElement("td",null,"Row"),r().createElement("td",null,"Row")))),r().createElement("h5",null,"Heading - h5"),r().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),r().createElement("blockquote",null,"Blockquote - incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation"),r().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),r().createElement("h6",null,"Heading - h6"),r().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,"," ",r().createElement("a",{href:"#"},"https://url.com/document/d/1dSOGKlCQtSG73NcSJB7qCJVyjE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/ed")," ","quis nostrud ",r().createElement("ins",null,"Content to be inserted.")," exercitation ullamco"," ",r().createElement("del",null,"Content to be deleted.")," laboris nisi ut aliquip ex ea commodo consequat."))},U=[{id:"default",label:"Default",element:r().createElement(G,null,r().createElement(T,null,r().createElement(I,null,r().createElement(j,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(k,null)),r().createElement(D,{placeholder:"Compose text..."})))}],H=[{id:"focused",label:"Focused",element:r().createElement(G,null,r().createElement(T,{className:"slds-has-focus"},r().createElement(I,null,r().createElement(j,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(k,null)),r().createElement(D,{placeholder:"Compose text..."})))},{id:"filled-out",label:"Filled Out",element:r().createElement(G,null,r().createElement(T,null,r().createElement(I,null,r().createElement(j,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(k,null)),r().createElement(D,{text:r().createElement(F,null)})))},{id:"error",label:"Error",element:r().createElement(G,null,r().createElement(T,{className:"slds-has-error",inlineMessage:"This field is required",hasError:!0,errorId:"rte-error-01"},r().createElement(I,null,r().createElement(j,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(k,null)),r().createElement(D,{placeholder:"Compose text...","aria-describedby":"rte-error-01"})))},{id:"disabled",label:"Disabled",element:r().createElement(G,null,r().createElement(T,{disabledLabel:"disabled"},r().createElement(I,{disabledButtons:!0,disabledLabel:"disabled"},r().createElement(j,{tabIndexSetting:"0",disabledButtons:!0}),r().createElement(L,{disabledButtons:!0}),r().createElement(k,{disabledButtons:!0})),r().createElement(D,{placeholder:"Compose text...",disabled:!0})))},{id:"tooltip",label:"Tooltip",element:r().createElement(G,null,r().createElement(T,null,r().createElement(I,null,r().createElement(j,{tabIndexSetting:"0",hasTooltip:!0}),r().createElement(L,null),r().createElement(k,null)),r().createElement(D,{placeholder:"Compose text..."}),r().createElement(b.m_,{className:"slds-nubbin_top-left",id:"bold",style:{position:"absolute",top:"48px",left:"2px"}},"Bold ",r().createElement("kbd",null,"cmd+b"))))},{id:"toolbar-only",label:"Toolbar Only",element:r().createElement(G,null,r().createElement(T,{isToolbarOnly:!0},r().createElement(I,{isToolbarOnly:!0},r().createElement(j,{tabIndexSetting:"0"}),r().createElement(L,null))))}],W=[{id:"bottom-toolbar",label:"Bottom toolbar",element:r().createElement(G,null,r().createElement(T,null,r().createElement(D,{placeholder:"Compose text..."}),r().createElement(I,{className:"slds-rich-text-editor__toolbar_bottom"},r().createElement(j,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(k,null))))},{id:"with-label",label:"With a Label",element:r().createElement(G,null,r().createElement(T,{label:"Details and Steps to Reproduce",labelId:w},r().createElement(I,null,r().createElement(j,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(k,null)),r().createElement(D,{placeholder:"Compose text...",labelId:w})))},{id:"email",label:"Email",element:r().createElement(G,null,r().createElement(T,null,r().createElement(I,null,r().createElement(S,null),r().createElement(j,{tabIndexSetting:"-1"}),r().createElement(q,null),r().createElement(L,null),r().createElement(B,null),r().createElement(C,null),r().createElement(k,null)),r().createElement(D,{label:"Compose email",placeholder:"Compose Email..."})))},{id:"toolbar-narrow",label:"Toolbar Narrow",element:r().createElement(G,{style:{width:"294px"},className:"slds-region_narrow"},r().createElement(T,null,r().createElement(I,null,r().createElement(S,null),r().createElement(j,{tabIndexSetting:"-1"}),r().createElement(q,null),r().createElement(L,null),r().createElement(B,null),r().createElement(C,null),r().createElement(k,null)),r().createElement(D,{label:"Compose email",placeholder:"Compose Email..."})))},{id:"feed",label:"Feed",element:r().createElement(G,null,r().createElement(T,null,r().createElement(I,null,r().createElement(j,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(B,null),r().createElement(C,null),r().createElement(R,null),r().createElement(k,null)),r().createElement(D,{label:"Post to feed",placeholder:"Post to feed..."})))},{id:"note",label:"Notes",element:r().createElement(G,null,r().createElement(T,null,r().createElement(I,null,r().createElement(j,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(C,null),r().createElement(k,null)),r().createElement(D,{label:"Compose note",placeholder:"Compose Note..."})))},{id:"styling-hooks-rte-min-height",label:"Styling Hooks - Base (Min Height)",demoStyles:"\n --sds-c-textarea-sizing-min-height: 3rem;\n ",storybookStyles:!0,element:r().createElement(G,null,r().createElement(T,null,r().createElement(I,null,r().createElement(j,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(k,null)),r().createElement(D,{placeholder:"Compose text..."})))},{id:"styling-hooks-rte-max-height",label:"Styling Hooks - Base (Max Height)",demoStyles:"\n --sds-c-textarea-sizing-max-height: 10rem;\n ",storybookStyles:!0,element:r().createElement(G,null,r().createElement(T,null,r().createElement(I,null,r().createElement(j,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(k,null)),r().createElement(D,{text:r().createElement(F,null)})))}],P=a.XB.code,z=a.XB.h2,X=a.XB.h3,J=a.XB.p,Q=function(){return(0,n.createElement)(a.Ay,{},(0,n.createElement)("div",{className:"doc lead"},"The Rich Text Editor is a textarea with added capabilities for use in various publishers."),(0,n.createElement)(i.A,{exampleOnly:!0},(0,s.NO)(H,"filled-out")),z({id:"About-Rich-Text-Editor"},"About Rich Text Editor"),J({},"At a high-level, the buttons in Rich Text Editor (RTE) are organized into four groupings: “format text”, “format body”, “insert content”, and “clear formatting”."),J({},'The "clear formatting” button always stays at the end of the buttons set, regardless of which rich text editor variant is used. It should always stand by itself.'),J({},"On smaller screen sizes, the select dropdowns for Font and Size in the toolbar can overlap outside of the container. To adjust the widths of the dropdowns, apply the class ",P({},"slds-region_narrow")," to the outermost ",P({},"div")," of the rich text editor."),J({},"A label may be used to further describe the purpose of a Rich Text Editor. To add a label, place a ",P({},"<span>")," element with the class ",P({},"slds-form-element__label"),", right before the ",P({},"slds-form-element__control")," element."),X({id:"Accessibility"},"Accessibility"),J({},"Ensure that there is a single tab key stop for the button groups in the toolbar, and that left and right arrows are used to navigate through each button."),z({id:"Base"},"Base"),(0,n.createElement)(i.A,null,(0,s.NO)(U)),z({id:"States"},"States"),X({id:"Focused"},"Focused"),(0,n.createElement)(i.A,null,(0,s.NO)(H,"focused")),X({id:"Filled-Out"},"Filled Out"),(0,n.createElement)(i.A,null,(0,s.NO)(H,"filled-out")),X({id:"Error"},"Error"),(0,n.createElement)(i.A,null,(0,s.NO)(H,"error")),X({id:"Disabled"},"Disabled"),(0,n.createElement)(i.A,null,(0,s.NO)(H,"disabled")),X({id:"Tooltip"},"Tooltip"),(0,n.createElement)(i.A,null,(0,s.NO)(H,"tooltip")),z({id:"Examples"},"Examples"),X({id:"Bottom-toolbar"},"Bottom toolbar"),(0,n.createElement)(i.A,null,(0,s.NO)(W,"bottom-toolbar")),X({id:"With-a-Label"},"With a Label"),(0,n.createElement)(i.A,null,(0,s.NO)(W,"with-label")),X({id:"Email"},"Email"),(0,n.createElement)(i.A,null,(0,s.NO)(W,"email")),X({id:"Toolbar-Narrow"},"Toolbar Narrow"),(0,n.createElement)(i.A,null,(0,s.NO)(W,"toolbar-narrow")),X({id:"Feed"},"Feed"),(0,n.createElement)(i.A,null,(0,s.NO)(W,"feed")),X({id:"Notes"},"Notes"),(0,n.createElement)(i.A,null,(0,s.NO)(W,"note")),z({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),(0,n.createElement)(o.A,{name:"rich-text-editor",type:"component"}))},V=function(){return(0,a.Qr)(Q())}}},r={};function a(e){var t=r[e];if(void 0!==t)return t.exports;var l=r[e]={id:e,exports:{}};return n[e](l,l.exports,a),l.exports}a.m=n,a.amdO={},e=[],a.O=function(t,l,n,r){if(!l){var i=1/0;for(c=0;c<e.length;c++){l=e[c][0],n=e[c][1],r=e[c][2];for(var o=!0,s=0;s<l.length;s++)(!1&r\|\|i>=r)&&Object.keys(a.O).every(function(e){return a.O[e](l[s])})?l.splice(s--,1):(o=!1,r<i&&(i=r));if(o){e.splice(c--,1);var d=n();void 0!==d&&(t=d)}}return t}r=r\|\|0;for(var c=e.length;c>0&&e[c-1][2]>r;c--)e[c]=e[c-1];e[c]=[l,n,r]},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,{a:t}),t},l=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 r=Object.create(null);a.r(r);var i={};t=t\|\|[null,l({}),l([]),l(l)];for(var o=2&n&&e;("object"==typeof o\|\|"function"==typeof o)&&!~t.indexOf(o);o=l(o))Object.getOwnPropertyNames(o).forEach(function(t){i[t]=function(){return e[t]}});return i.default=function(){return e},a.d(r,i),r},a.d=function(e,t){for(var l in t)a.o(t,l)&&!a.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,get:t[l]})},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=1399,function(){var e={1399:0};a.O.j=function(t){return 0===e[t]};var t=function(t,l){var n,r,i=l[0],o=l[1],s=l[2],d=0;if(i.some(function(t){return 0!==e[t]})){for(n in o)a.o(o,n)&&(a.m[n]=o[n]);if(s)var c=s(a)}for(t&&t(l);d<i.length;d++)r=i[d],a.o(e,r)&&e[r]&&e[r][0](),e[r]=0;return a.O(c)},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))}(),a.nc=void 0;var i=a.O(void 0,[3540],function(){return a(9564)});i=a.O(i),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/rich-text-editor/docs.mdx.js"]=i}();
1	+ var SLDS;!function(){"use strict";var e,t,l,n={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM},9564:function(e,t,l){l.r(t),l.d(t,{getContents:function(){return V},getElement:function(){return Q}});var n=l(1594),r=l.n(n),a=l(5671),i=l(6547),o=(l(2436),l(9582),l(5619),l(8342)),s=l(806),d=l(4187),c=l.n(d),u=l(942),m=l.n(u),b=l(4216),E=l(1412),p=l(6955),f=l(8347),h=l(5159),x=l(3964),g=l(6185),v=(l(5786),l(538)),y=l(2711);function _(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 n,r,a,i,o=[],s=!0,d=!1;try{if(a=(l=l.call(e)).next,0===t){if(Object(l)!==l)return;s=!1}else for(;!(s=(n=a.call(l)).done)&&(o.push(n.value),o.length!==t);s=!0);}catch(e){d=!0,r=e}finally{try{if(!s&&null!=l.return&&(i=l.return(),Object(i)!==i))return}finally{if(d)throw r}}return o}}(e,t)\|\|function(e,t){if(e){if("string"==typeof e)return N(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)?N(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 N(e,t){(null==t\|\|t>e.length)&&(t=e.length);for(var l=0,n=Array(t);l<t;l++)n[l]=e[l];return n}l(5526);var w="rich-text-editor-unique-id-01",T=function(e){return r().createElement(y.ZS,{labelId:e.labelId,labelContent:e.label,inlineMessage:e.inlineMessage,hasError:e.hasError,errorId:e.errorId,hasFauxLabel:!0},r().createElement("div",{className:m()("slds-rich-text-editor slds-grid slds-grid_vertical slds-nowrap",e.isToolbarOnly&&"slds-rich-text-editor_toolbar-only",e.className),"aria-label":e.disabledLabel},e.children))};T.propTypes={children:c().node.isRequired,errorId:c().string,hasError:c().bool,inlineMessage:c().string,labelContent:c().string,labelId:c().string};var I=function(e){return r().createElement("div",{role:"toolbar","aria-label":e.disabledLabel,className:m()("slds-rich-text-editor__toolbar slds-shrink-none",e.isToolbarOnly&&"slds-rich-text-editor__toolbar_detached",e.className)},e.children)},O=function(e){var t=e.listboxData,l=e.id;return r().createElement(g.Ay,{id:l,snapshot:t,type:"plain",count:3,hideIcons:!0,className:"slds-dropdown_fluid slds-dropdown_left"})};O.propTypes={listboxData:c().object.isRequired,id:c().string};var A=function(e){var t=e.listboxData,l=e.id;return r().createElement(g.Ay,{id:l,snapshot:t,type:"plain",count:6,hideIcons:!0,className:"slds-dropdown_fluid slds-dropdown_left"})};A.propTypes={listboxData:c().object.isRequired,id:c().string};var S=function(e){var t=_((0,n.useState)(s.Ay.uniqueId("example-unique-id-")),1)[0],l=_((0,n.useState)(s.Ay.uniqueId("example-unique-id-")),1)[0],a=_((0,n.useState)(s.Ay.uniqueId("example-unique-id-")),1)[0],i=_((0,n.useState)(s.Ay.uniqueId("example-unique-id-")),1)[0];return r().createElement("div",{className:"slds-grid slds-rich-text-editor__spacing-wrapper",role:"group","aria-label":"Format font family & size"},r().createElement("div",{className:"slds-rich-text-editor__select"},r().createElement(h.Ay,{id:t,"aria-controls":l,label:"Choose a Font",hideLabel:!0,inputContainerClassName:"slds-rich-text-editor__select_x-small",inputIconPosition:"right",rightInputIcon:r().createElement(v.eX,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:r().createElement(O,{listboxData:x.kz,id:l}),resultsType:"listbox",hasInteractions:!0,selectOnly:!0,value:"Font"})),r().createElement("div",{className:"slds-rich-text-editor__select"},r().createElement(h.Ay,{id:a,"aria-controls":i,label:"Choose a Font Size",hideLabel:!0,inputContainerClassName:"slds-rich-text-editor__select_xx-small",inputIconPosition:"right",rightInputIcon:r().createElement(v.eX,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:r().createElement(A,{listboxData:x.TU,id:i}),resultsType:"listbox",hasInteractions:!0,selectOnly:!0,value:"Size",tabIndex:"-1"})))},j=function(e){return r().createElement(E.GW,{"aria-label":"Format text"},r().createElement("li",null,r().createElement(p.A,{className:"slds-button_icon-border-filled",symbol:"bold",tabIndex:e.tabIndexSetting,"aria-describedby":e.hasTooltip?"bold":null,disabled:e.disabledButtons,assistiveText:"Bold"})),r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"italic",disabled:e.disabledButtons,assistiveText:"Italic"})),r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"underline",disabled:e.disabledButtons,assistiveText:"Underline"})),r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"strikethrough",disabled:e.disabledButtons,assistiveText:"Strike Through"})))},q=function(e){return r().createElement(E.GW,{"aria-label":"Format background & text color"},r().createElement("li",null,r().createElement("button",{tabIndex:"-1",disabled:e.disabledButtons,className:"slds-button slds-button_icon slds-button_icon-more slds-button_icon-more-filled","aria-haspopup":"true"},r().createElement(f.A,{className:"slds-button__icon",sprite:"utility",symbol:"text_background_color"}),r().createElement(f.A,{className:"slds-button__icon slds-button__icon_x-small",sprite:"utility",symbol:"down"}),r().createElement("span",{className:"slds-assistive-text"},"Background Color"))),r().createElement("li",null,r().createElement("button",{tabIndex:"-1",disabled:e.disabledButtons,className:"slds-button slds-button_icon slds-button_icon-more slds-button_icon-more-filled","aria-haspopup":"true"},r().createElement(f.A,{className:"slds-button__icon",sprite:"utility",symbol:"text_color"}),r().createElement(f.A,{className:"slds-button__icon slds-button__icon_x-small",sprite:"utility",symbol:"down"}),r().createElement("span",{className:"slds-assistive-text"},"Text Color"))))},L=function(e){return r().createElement(E.GW,{"aria-label":"Format body"},r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"richtextbulletedlist",disabled:e.disabledButtons,assistiveText:"Bulleted List"})),r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"richtextnumberedlist",disabled:e.disabledButtons,assistiveText:"Numbered List"})),r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"richtextindent",disabled:e.disabledButtons,assistiveText:"Indent"})),r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"richtextoutdent",disabled:e.disabledButtons,assistiveText:"Outdent"})))},B=function(e){return r().createElement(E.GW,{"aria-label":"Align text"},r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"left_align_text",disabled:e.disabledButtons,assistiveText:"Left Align Text"})),r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"center_align_text",disabled:e.disabledButtons,assistiveText:"Center Align Text"})),r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"right_align_text",disabled:e.disabledButtons,assistiveText:"Right Align Text"})))},C=function(e){return r().createElement(E.GW,{role:e.overflow?"presentation":null,"aria-label":e.overflow?null:"Insert content"},r().createElement("li",{role:e.overflow?"presentation":null},r().createElement(p.A,{role:e.overflow?"menuitem":null,tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"emoji",disabled:e.disabledButtons,assistiveText:"Add Emoji"})),r().createElement("li",{role:e.overflow?"presentation":null},r().createElement(p.A,{role:e.overflow?"menuitem":null,tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"image",disabled:e.disabledButtons,assistiveText:"Add Image"})),r().createElement("li",{role:e.overflow?"presentation":null},r().createElement(p.A,{role:e.overflow?"menuitem":null,tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"link",disabled:e.disabledButtons,assistiveText:"Add Link"})))},R=function(e){return r().createElement(E.GW,{"aria-label":"Add user"},r().createElement("li",null,r().createElement(p.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"adduser",disabled:e.disabledButtons,assistiveText:"Add User"})))},k=function(e){return r().createElement(E.GW,{role:e.overflow?"presentation":null,"aria-label":e.overflow?null:"Remove Formatting"},r().createElement("li",{role:e.overflow?"presentation":null},r().createElement(p.A,{role:e.overflow?"menuitem":null,tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"remove_formatting",disabled:e.disabledButtons,assistiveText:"Remove Formatting"})))},D=function(e){return r().createElement("div",{className:m()(e.text?"slds-rich-text-editor__output":"slds-rich-text-editor__textarea","slds-grid")},e.text?r().createElement("div",{"aria-describedby":e["aria-describedby"],"aria-label":e.labelId?null:"Compose text","aria-labelledby":e.labelId,contentEditable:e.disabled?null:"true",suppressContentEditableWarning:!0,className:"slds-rich-text-area__content slds-grow"},e.text):r().createElement("div",{"aria-describedby":e["aria-describedby"],"aria-label":e.labelId?null:e.label\|\|"Compose text","aria-labelledby":e.labelId,contentEditable:e.disabled?null:"true",suppressContentEditableWarning:!0,className:"slds-rich-text-area__content slds-text-color_weak slds-grow"},e.placeholder))};function M(){return M=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var l=arguments[t];for(var n in l)({}).hasOwnProperty.call(l,n)&&(e[n]=l[n])}return e},M.apply(null,arguments)}var G=function(e){return r().createElement("div",M({className:m()("demo-only",e.className),style:{minHeight:"180px"}},e),e.children)};G.propTypes={children:c().node,className:c().string};var F=function(e){return r().createElement("div",null,r().createElement("h1",null,"Heading - h1"),r().createElement("p",null,"Lorem ipsum dolor sit amet, ",r().createElement("strong",null,"strong")," adipisicing elit, sed do ",r().createElement("em",null,"emphasis")," tempor incididunt ut ",r().createElement("u",null,"underlined")," et dolore"," ",r().createElement("s",null,"strikethrough")," aliqua. Ut ",r().createElement("sub",null,"subscript")," ad"," ",r().createElement("sup",null,"superscript")," veniam, ",r().createElement("abbr",null,"quis")," nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in ",r().createElement("a",{href:"#"},"link")," in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),r().createElement("h2",null,"Heading - h2"),r().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod"," ",r().createElement("a",{href:"#"},"veryVeryLongWordWithHyperlinkExample")," tempor incididunt ut labore et dolore magna aliqua."),r().createElement("ul",null,r().createElement("li",null,"Unordered list item",r().createElement("ul",null,r().createElement("li",null,"Nested Unordered list item",r().createElement("ol",null,r().createElement("li",null,"Nested Ordered list item"),r().createElement("li",null,"Nested Ordered list item"))),r().createElement("li",null,"Nested Unordered list item",r().createElement("ul",null,r().createElement("li",null,"Nested Unordered list item"),r().createElement("li",null,"Nested Unordered list item"))))),r().createElement("li",null,"Unordered list item",r().createElement("ol",null,r().createElement("li",null,"Nested Ordered list item"),r().createElement("li",null,"Nested Ordered list item"))),r().createElement("li",null,"Unordered list item")),r().createElement("h3",null,"Heading - h3"),r().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),r().createElement("ol",null,r().createElement("li",null,"Ordered list item",r().createElement("ul",null,r().createElement("li",null,"Nested Unordered list item",r().createElement("ol",null,r().createElement("li",null,"Nested Ordered list item"),r().createElement("li",null,"Nested Ordered list item"))),r().createElement("li",null,"Nested Unordered list item",r().createElement("ul",null,r().createElement("li",null,"Nested Unordered list item"),r().createElement("li",null,"Nested Unordered list item"))))),r().createElement("li",null,"Ordered list item",r().createElement("ol",null,r().createElement("li",null,"Nested Ordered list item",r().createElement("ol",null,r().createElement("li",null,"Nested Ordered list item",r().createElement("ol",null,r().createElement("li",null,"Nested Ordered list item"),r().createElement("li",null,"Nested Ordered list item"))),r().createElement("li",null,"Nested Ordered list item"))),r().createElement("li",null,"Nested Ordered list item"))),r().createElement("li",null,"Ordered list item")),r().createElement("ul",null,r().createElement("li",null,r().createElement("div",null,"List Item with div")),r().createElement("li",null,r().createElement("div",null,"List Item with div"))),r().createElement("ol",null,r().createElement("li",null,r().createElement("div",null,"List Item with div")),r().createElement("li",null,r().createElement("div",null,"List Item with div"))),r().createElement("h4",null,"Heading - h4"),r().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),r().createElement("dl",null,r().createElement("dt",null,"Description List - Term"),r().createElement("dd",null,"Description List - Description"),r().createElement("dt",null,"Description List - Term"),r().createElement("dd",null,"Description List - Description")),r().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),r().createElement("table",null,r().createElement("thead",null,r().createElement("tr",null,r().createElement("th",null,"Column"),r().createElement("th",null,"Column"))),r().createElement("tbody",null,r().createElement("tr",null,r().createElement("td",null,"Row"),r().createElement("td",null,"Row")),r().createElement("tr",null,r().createElement("td",null,"Row"),r().createElement("td",null,"Row")))),r().createElement("h5",null,"Heading - h5"),r().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),r().createElement("blockquote",null,"Blockquote - incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation"),r().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),r().createElement("h6",null,"Heading - h6"),r().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,"," ",r().createElement("a",{href:"#"},"https://url.com/document/d/1dSOGKlCQtSG73NcSJB7qCJVyjE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/edE52MdTjvjGNqc3L2Rw/ed")," ","quis nostrud ",r().createElement("ins",null,"Content to be inserted.")," exercitation ullamco"," ",r().createElement("del",null,"Content to be deleted.")," laboris nisi ut aliquip ex ea commodo consequat."))},U=[{id:"default",label:"Default",element:r().createElement(G,null,r().createElement(T,null,r().createElement(I,null,r().createElement(j,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(k,null)),r().createElement(D,{placeholder:"Compose text..."})))}],H=[{id:"focused",label:"Focused",element:r().createElement(G,null,r().createElement(T,{className:"slds-has-focus"},r().createElement(I,null,r().createElement(j,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(k,null)),r().createElement(D,{placeholder:"Compose text..."})))},{id:"filled-out",label:"Filled Out",element:r().createElement(G,null,r().createElement(T,null,r().createElement(I,null,r().createElement(j,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(k,null)),r().createElement(D,{text:r().createElement(F,null)})))},{id:"error",label:"Error",element:r().createElement(G,null,r().createElement(T,{className:"slds-has-error",inlineMessage:"This field is required",hasError:!0,errorId:"rte-error-01"},r().createElement(I,null,r().createElement(j,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(k,null)),r().createElement(D,{placeholder:"Compose text...","aria-describedby":"rte-error-01"})))},{id:"disabled",label:"Disabled",element:r().createElement(G,null,r().createElement(T,{disabledLabel:"disabled"},r().createElement(I,{disabledButtons:!0,disabledLabel:"disabled"},r().createElement(j,{tabIndexSetting:"0",disabledButtons:!0}),r().createElement(L,{disabledButtons:!0}),r().createElement(k,{disabledButtons:!0})),r().createElement(D,{placeholder:"Compose text...",disabled:!0})))},{id:"tooltip",label:"Tooltip",element:r().createElement(G,null,r().createElement(T,null,r().createElement(I,null,r().createElement(j,{tabIndexSetting:"0",hasTooltip:!0}),r().createElement(L,null),r().createElement(k,null)),r().createElement(D,{placeholder:"Compose text..."}),r().createElement(b.m_,{className:"slds-nubbin_top-left",id:"bold",style:{position:"absolute",top:"48px",left:"2px"}},"Bold ",r().createElement("kbd",null,"cmd+b"))))},{id:"toolbar-only",label:"Toolbar Only",element:r().createElement(G,null,r().createElement(T,{isToolbarOnly:!0},r().createElement(I,{isToolbarOnly:!0},r().createElement(j,{tabIndexSetting:"0"}),r().createElement(L,null))))}],W=[{id:"bottom-toolbar",label:"Bottom toolbar",element:r().createElement(G,null,r().createElement(T,null,r().createElement(D,{placeholder:"Compose text..."}),r().createElement(I,{className:"slds-rich-text-editor__toolbar_bottom"},r().createElement(j,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(k,null))))},{id:"with-label",label:"With a Label",element:r().createElement(G,null,r().createElement(T,{label:"Details and Steps to Reproduce",labelId:w},r().createElement(I,null,r().createElement(j,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(k,null)),r().createElement(D,{placeholder:"Compose text...",labelId:w})))},{id:"email",label:"Email",element:r().createElement(G,null,r().createElement(T,null,r().createElement(I,null,r().createElement(S,null),r().createElement(j,{tabIndexSetting:"-1"}),r().createElement(q,null),r().createElement(L,null),r().createElement(B,null),r().createElement(C,null),r().createElement(k,null)),r().createElement(D,{label:"Compose email",placeholder:"Compose Email..."})))},{id:"toolbar-narrow",label:"Toolbar Narrow",element:r().createElement(G,{style:{width:"294px"},className:"slds-region_narrow"},r().createElement(T,null,r().createElement(I,null,r().createElement(S,null),r().createElement(j,{tabIndexSetting:"-1"}),r().createElement(q,null),r().createElement(L,null),r().createElement(B,null),r().createElement(C,null),r().createElement(k,null)),r().createElement(D,{label:"Compose email",placeholder:"Compose Email..."})))},{id:"feed",label:"Feed",element:r().createElement(G,null,r().createElement(T,null,r().createElement(I,null,r().createElement(j,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(B,null),r().createElement(C,null),r().createElement(R,null),r().createElement(k,null)),r().createElement(D,{label:"Post to feed",placeholder:"Post to feed..."})))},{id:"note",label:"Notes",element:r().createElement(G,null,r().createElement(T,null,r().createElement(I,null,r().createElement(j,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(C,null),r().createElement(k,null)),r().createElement(D,{label:"Compose note",placeholder:"Compose Note..."})))},{id:"styling-hooks-rte-min-height",label:"Styling Hooks - Base (Min Height)",demoStyles:"\n --sds-c-textarea-sizing-min-height: 3rem;\n ",storybookStyles:!0,element:r().createElement(G,null,r().createElement(T,null,r().createElement(I,null,r().createElement(j,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(k,null)),r().createElement(D,{placeholder:"Compose text..."})))},{id:"styling-hooks-rte-max-height",label:"Styling Hooks - Base (Max Height)",demoStyles:"\n --sds-c-textarea-sizing-max-height: 10rem;\n ",storybookStyles:!0,element:r().createElement(G,null,r().createElement(T,null,r().createElement(I,null,r().createElement(j,{tabIndexSetting:"0"}),r().createElement(L,null),r().createElement(k,null)),r().createElement(D,{text:r().createElement(F,null)})))}],P=a.XB.code,z=a.XB.h2,X=a.XB.h3,J=a.XB.p,Q=function(){return(0,n.createElement)(a.Ay,{},(0,n.createElement)("div",{className:"doc lead"},"The Rich Text Editor is a textarea with added capabilities for use in various publishers."),(0,n.createElement)(i.A,{exampleOnly:!0},(0,s.NO)(H,"filled-out")),z({id:"About-Rich-Text-Editor"},"About Rich Text Editor"),J({},"At a high-level, the buttons in Rich Text Editor (RTE) are organized into four groupings: “format text”, “format body”, “insert content”, and “clear formatting”."),J({},'The "clear formatting” button always stays at the end of the buttons set, regardless of which rich text editor variant is used. It should always stand by itself.'),J({},"On smaller screen sizes, the select dropdowns for Font and Size in the toolbar can overlap outside of the container. To adjust the widths of the dropdowns, apply the class ",P({},"slds-region_narrow")," to the outermost ",P({},"div")," of the rich text editor."),J({},"A label may be used to further describe the purpose of a Rich Text Editor. To add a label, place a ",P({},"<span>")," element with the class ",P({},"slds-form-element__label"),", right before the ",P({},"slds-form-element__control")," element."),X({id:"Accessibility"},"Accessibility"),J({},"Ensure that there is a single tab key stop for the button groups in the toolbar, and that left and right arrows are used to navigate through each button."),z({id:"Base"},"Base"),(0,n.createElement)(i.A,null,(0,s.NO)(U)),z({id:"States"},"States"),X({id:"Focused"},"Focused"),(0,n.createElement)(i.A,null,(0,s.NO)(H,"focused")),X({id:"Filled-Out"},"Filled Out"),(0,n.createElement)(i.A,null,(0,s.NO)(H,"filled-out")),X({id:"Error"},"Error"),(0,n.createElement)(i.A,null,(0,s.NO)(H,"error")),X({id:"Disabled"},"Disabled"),(0,n.createElement)(i.A,null,(0,s.NO)(H,"disabled")),X({id:"Tooltip"},"Tooltip"),(0,n.createElement)(i.A,null,(0,s.NO)(H,"tooltip")),z({id:"Examples"},"Examples"),X({id:"Bottom-toolbar"},"Bottom toolbar"),(0,n.createElement)(i.A,null,(0,s.NO)(W,"bottom-toolbar")),X({id:"With-a-Label"},"With a Label"),(0,n.createElement)(i.A,null,(0,s.NO)(W,"with-label")),X({id:"Email"},"Email"),(0,n.createElement)(i.A,null,(0,s.NO)(W,"email")),X({id:"Toolbar-Narrow"},"Toolbar Narrow"),(0,n.createElement)(i.A,null,(0,s.NO)(W,"toolbar-narrow")),X({id:"Feed"},"Feed"),(0,n.createElement)(i.A,null,(0,s.NO)(W,"feed")),X({id:"Notes"},"Notes"),(0,n.createElement)(i.A,null,(0,s.NO)(W,"note")),z({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),(0,n.createElement)(o.A,{name:"rich-text-editor",type:"component"}))},V=function(){return(0,a.Qr)(Q())}}},r={};function a(e){var t=r[e];if(void 0!==t)return t.exports;var l=r[e]={id:e,exports:{}};return n[e](l,l.exports,a),l.exports}a.m=n,a.amdO={},e=[],a.O=function(t,l,n,r){if(!l){var i=1/0;for(c=0;c<e.length;c++){l=e[c][0],n=e[c][1],r=e[c][2];for(var o=!0,s=0;s<l.length;s++)(!1&r\|\|i>=r)&&Object.keys(a.O).every(function(e){return a.O[e](l[s])})?l.splice(s--,1):(o=!1,r<i&&(i=r));if(o){e.splice(c--,1);var d=n();void 0!==d&&(t=d)}}return t}r=r\|\|0;for(var c=e.length;c>0&&e[c-1][2]>r;c--)e[c]=e[c-1];e[c]=[l,n,r]},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,{a:t}),t},l=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 r=Object.create(null);a.r(r);var i={};t=t\|\|[null,l({}),l([]),l(l)];for(var o=2&n&&e;("object"==typeof o\|\|"function"==typeof o)&&!~t.indexOf(o);o=l(o))Object.getOwnPropertyNames(o).forEach(function(t){i[t]=function(){return e[t]}});return i.default=function(){return e},a.d(r,i),r},a.d=function(e,t){for(var l in t)a.o(t,l)&&!a.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,get:t[l]})},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=1399,function(){var e={1399:0};a.O.j=function(t){return 0===e[t]};var t=function(t,l){var n,r,i=l[0],o=l[1],s=l[2],d=0;if(i.some(function(t){return 0!==e[t]})){for(n in o)a.o(o,n)&&(a.m[n]=o[n]);if(s)var c=s(a)}for(t&&t(l);d<i.length;d++)r=i[d],a.o(e,r)&&e[r]&&e[r][0](),e[r]=0;return a.O(c)},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))}(),a.nc=void 0;var i=a.O(void 0,[3540],function(){return a(9564)});i=a.O(i),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/rich-text-editor/docs.mdx.js"]=i}();

package/__internal/chunked/docs/ui/components/scoped-notifications/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS;!function(){"use strict";var e,t,n,i={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM},5312:function(e,t,n){n.r(t),n.d(t,{getContents:function(){return S},getElement:function(){return k}});var i=n(1594),r=n.n(i),o=n(5671),a=n(6547),l=(n(3212),n(5619),n(806)),s=n(~~7412~~),c=n.n(s),u=n(538),f=n(942),d=n.n(f),m=function(e){var t=e.children;return r().createElement("div",{className:d()("slds-scoped-notification slds-media slds-media_center",e.type&&"slds-theme_"+e.type),role:"status"},r().createElement("div",{className:"slds-media__figure"},r().createElement(u.eX,{title:e.type,className:"slds-icon_small",assistiveText:e.type,symbol:e.type})),r().createElement("div",{className:"slds-media__body"},t))};m.propTypes={type:c().oneOf(["info","success","warning","error"]),children:c().node};var p=function(e){var t=e.children,n=e.theme;return r().createElement("div",{className:d()("slds-scoped-notification slds-media slds-media_center",e.theme&&"slds-scoped-notification_"+e.theme),role:"status"},r().createElement("div",{className:"slds-media__figure"},r().createElement(u.eX,{title:"information",className:d()("slds-icon_small",n&&"light"===n&&"slds-icon-text-default"),assistiveText:"information",symbol:"info"})),r().createElement("div",{className:"slds-media__body"},t))};p.propTypes={children:c().node,theme:c().oneOf(["light","dark"])};var h=[{id:"default",label:"Default",element:r().createElement(p,{theme:"light"},r().createElement("p",null,"It looks as if duplicates exist for this lead."," ",r().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"View Duplicates")))}],v=[{id:"light-theme",label:"Informational with Light Theme",element:r().createElement(p,{theme:"light"},r().createElement("p",null,"It looks as if duplicates exist for this lead."," ",r().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"View Duplicates")))},{id:"dark-theme",label:"Informational with Dark theme",element:r().createElement(p,{theme:"dark"},r().createElement("p",null,"It looks as if duplicates exist for this lead."," ",r().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"View Duplicates")))}],y=[{id:"info",label:"Informational",element:r().createElement(m,{type:"info"},r().createElement("p",null,"It looks as if duplicates exist for this lead."," ",r().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"View Duplicates")))},{id:"success",label:"Success",element:r().createElement(m,{type:"success"},r().createElement("p",null,"Success! Your entry has been duplicated."," ",r().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"View Duplicates")))},{id:"warning",label:"Warning",element:r().createElement(m,{type:"warning"},r().createElement("p",null,"It looks as if duplicates exist for this lead."," ",r().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"View Duplicates")))},{id:"error",label:"Error",element:r().createElement(m,{type:"error"},r().createElement("p",null,"It looks as if duplicates exist for this lead."," ",r().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"View Duplicates")))}],E=o.XB.code,b=o.XB.h2,g=o.XB.h3,_=o.XB.h4,O=o.XB.p,k=function(){return(0,i.createElement)(o.Ay,{},(0,i.createElement)("div",{className:"lead doc"},"Scoped notifications serve advisory information for the user that is not important enough to justify an alert. It is often presented as a status bar scoped to the container. They are not dismissible."),(0,i.createElement)(a.A,{exampleOnly:!0},(0,l.NO)(v,"dark-theme")),b({id:"About-Scoped-Notifications"},"About Scoped Notifications"),g({id:"Accessibility"},"Accessibility"),O({},"Scoped notifications contain ",E({},'role="status"')," on the container to signal to the browser to send an accessible status event to assistive technology. The assistive technology then notifies the user."),b({id:"Base"},"Base"),(0,i.createElement)(a.A,null,(0,l.NO)(h)),g({id:"States"},"States"),_({id:"Informational"},"Informational"),(0,i.createElement)(a.A,null,(0,l.NO)(y,"info")),_({id:"Success"},"Success"),(0,i.createElement)(a.A,null,(0,l.NO)(y,"success")),_({id:"Warning"},"Warning"),(0,i.createElement)(a.A,null,(0,l.NO)(y,"warning")),_({id:"Error"},"Error"),(0,i.createElement)(a.A,null,(0,l.NO)(y,"error")),g({id:"Examples"},"Examples"),O({},"Informational Notifications default to the dark theme. For light, use the class ",E({},"slds-scoped-notification_light")," instead of ",E({},"slds-theme_info"),". An additional class, ",E({},"slds-scoped-notification_dark")," is also available for the dark theme to more easily toggle between them."),_({id:"Light-Theme"},"Light Theme"),(0,i.createElement)(a.A,null,(0,l.NO)(v,"light-theme")),_({id:"Dark-Theme"},"Dark Theme"),(0,i.createElement)(a.A,null,(0,l.NO)(v,"dark-theme")))},S=function(){return(0,o.Qr)(k())}}},r={};function o(e){var t=r[e];if(void 0!==t)return t.exports;var n=r[e]={id:e,exports:{}};return i[e](n,n.exports,o),n.exports}o.m=i,o.amdO={},e=[],o.O=function(t,n,i,r){if(!n){var a=1/0;for(u=0;u<e.length;u++){n=e[u][0],i=e[u][1],r=e[u][2];for(var l=!0,s=0;s<n.length;s++)(!1&r\|\|a>=r)&&Object.keys(o.O).every(function(e){return o.O[e](n[s])})?n.splice(s--,1):(l=!1,r<a&&(a=r));if(l){e.splice(u--,1);var c=i();void 0!==c&&(t=c)}}return t}r=r\|\|0;for(var u=e.length;u>0&&e[u-1][2]>r;u--)e[u]=e[u-1];e[u]=[n,i,r]},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,{a:t}),t},n=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},o.t=function(e,i){if(1&i&&(e=this(e)),8&i)return e;if("object"==typeof e&&e){if(4&i&&e.__esModule)return e;if(16&i&&"function"==typeof e.then)return e}var r=Object.create(null);o.r(r);var a={};t=t\|\|[null,n({}),n([]),n(n)];for(var l=2&i&&e;("object"==typeof l\|\|"function"==typeof l)&&!~t.indexOf(l);l=n(l))Object.getOwnPropertyNames(l).forEach(function(t){a[t]=function(){return e[t]}});return a.default=function(){return e},o.d(r,a),r},o.d=function(e,t){for(var n in t)o.o(t,n)&&!o.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},o.e=function(){return Promise.resolve()},o.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.j=9824,function(){var e={9824:0};o.O.j=function(t){return 0===e[t]};var t=function(t,n){var i,r,a=n[0],l=n[1],s=n[2],c=0;if(a.some(function(t){return 0!==e[t]})){for(i in l)o.o(l,i)&&(o.m[i]=l[i]);if(s)var u=s(o)}for(t&&t(n);c<a.length;c++)r=a[c],o.o(e,r)&&e[r]&&e[r][0](),e[r]=0;return o.O(u)},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))}(),o.nc=void 0;var a=o.O(void 0,[3540],function(){return o(5312)});a=o.O(a),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/scoped-notifications/docs.mdx.js"]=a}();
1	+ var SLDS;!function(){"use strict";var e,t,n,i={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM},5312:function(e,t,n){n.r(t),n.d(t,{getContents:function(){return S},getElement:function(){return k}});var i=n(1594),r=n.n(i),o=n(5671),a=n(6547),l=(n(3212),n(5619),n(806)),s=n(4187),c=n.n(s),u=n(538),f=n(942),d=n.n(f),m=function(e){var t=e.children;return r().createElement("div",{className:d()("slds-scoped-notification slds-media slds-media_center",e.type&&"slds-theme_"+e.type),role:"status"},r().createElement("div",{className:"slds-media__figure"},r().createElement(u.eX,{title:e.type,className:"slds-icon_small",assistiveText:e.type,symbol:e.type})),r().createElement("div",{className:"slds-media__body"},t))};m.propTypes={type:c().oneOf(["info","success","warning","error"]),children:c().node};var p=function(e){var t=e.children,n=e.theme;return r().createElement("div",{className:d()("slds-scoped-notification slds-media slds-media_center",e.theme&&"slds-scoped-notification_"+e.theme),role:"status"},r().createElement("div",{className:"slds-media__figure"},r().createElement(u.eX,{title:"information",className:d()("slds-icon_small",n&&"light"===n&&"slds-icon-text-default"),assistiveText:"information",symbol:"info"})),r().createElement("div",{className:"slds-media__body"},t))};p.propTypes={children:c().node,theme:c().oneOf(["light","dark"])};var h=[{id:"default",label:"Default",element:r().createElement(p,{theme:"light"},r().createElement("p",null,"It looks as if duplicates exist for this lead."," ",r().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"View Duplicates")))}],v=[{id:"light-theme",label:"Informational with Light Theme",element:r().createElement(p,{theme:"light"},r().createElement("p",null,"It looks as if duplicates exist for this lead."," ",r().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"View Duplicates")))},{id:"dark-theme",label:"Informational with Dark theme",element:r().createElement(p,{theme:"dark"},r().createElement("p",null,"It looks as if duplicates exist for this lead."," ",r().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"View Duplicates")))}],y=[{id:"info",label:"Informational",element:r().createElement(m,{type:"info"},r().createElement("p",null,"It looks as if duplicates exist for this lead."," ",r().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"View Duplicates")))},{id:"success",label:"Success",element:r().createElement(m,{type:"success"},r().createElement("p",null,"Success! Your entry has been duplicated."," ",r().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"View Duplicates")))},{id:"warning",label:"Warning",element:r().createElement(m,{type:"warning"},r().createElement("p",null,"It looks as if duplicates exist for this lead."," ",r().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"View Duplicates")))},{id:"error",label:"Error",element:r().createElement(m,{type:"error"},r().createElement("p",null,"It looks as if duplicates exist for this lead."," ",r().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"View Duplicates")))}],E=o.XB.code,b=o.XB.h2,g=o.XB.h3,_=o.XB.h4,O=o.XB.p,k=function(){return(0,i.createElement)(o.Ay,{},(0,i.createElement)("div",{className:"lead doc"},"Scoped notifications serve advisory information for the user that is not important enough to justify an alert. It is often presented as a status bar scoped to the container. They are not dismissible."),(0,i.createElement)(a.A,{exampleOnly:!0},(0,l.NO)(v,"dark-theme")),b({id:"About-Scoped-Notifications"},"About Scoped Notifications"),g({id:"Accessibility"},"Accessibility"),O({},"Scoped notifications contain ",E({},'role="status"')," on the container to signal to the browser to send an accessible status event to assistive technology. The assistive technology then notifies the user."),b({id:"Base"},"Base"),(0,i.createElement)(a.A,null,(0,l.NO)(h)),g({id:"States"},"States"),_({id:"Informational"},"Informational"),(0,i.createElement)(a.A,null,(0,l.NO)(y,"info")),_({id:"Success"},"Success"),(0,i.createElement)(a.A,null,(0,l.NO)(y,"success")),_({id:"Warning"},"Warning"),(0,i.createElement)(a.A,null,(0,l.NO)(y,"warning")),_({id:"Error"},"Error"),(0,i.createElement)(a.A,null,(0,l.NO)(y,"error")),g({id:"Examples"},"Examples"),O({},"Informational Notifications default to the dark theme. For light, use the class ",E({},"slds-scoped-notification_light")," instead of ",E({},"slds-theme_info"),". An additional class, ",E({},"slds-scoped-notification_dark")," is also available for the dark theme to more easily toggle between them."),_({id:"Light-Theme"},"Light Theme"),(0,i.createElement)(a.A,null,(0,l.NO)(v,"light-theme")),_({id:"Dark-Theme"},"Dark Theme"),(0,i.createElement)(a.A,null,(0,l.NO)(v,"dark-theme")))},S=function(){return(0,o.Qr)(k())}}},r={};function o(e){var t=r[e];if(void 0!==t)return t.exports;var n=r[e]={id:e,exports:{}};return i[e](n,n.exports,o),n.exports}o.m=i,o.amdO={},e=[],o.O=function(t,n,i,r){if(!n){var a=1/0;for(u=0;u<e.length;u++){n=e[u][0],i=e[u][1],r=e[u][2];for(var l=!0,s=0;s<n.length;s++)(!1&r\|\|a>=r)&&Object.keys(o.O).every(function(e){return o.O[e](n[s])})?n.splice(s--,1):(l=!1,r<a&&(a=r));if(l){e.splice(u--,1);var c=i();void 0!==c&&(t=c)}}return t}r=r\|\|0;for(var u=e.length;u>0&&e[u-1][2]>r;u--)e[u]=e[u-1];e[u]=[n,i,r]},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,{a:t}),t},n=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},o.t=function(e,i){if(1&i&&(e=this(e)),8&i)return e;if("object"==typeof e&&e){if(4&i&&e.__esModule)return e;if(16&i&&"function"==typeof e.then)return e}var r=Object.create(null);o.r(r);var a={};t=t\|\|[null,n({}),n([]),n(n)];for(var l=2&i&&e;("object"==typeof l\|\|"function"==typeof l)&&!~t.indexOf(l);l=n(l))Object.getOwnPropertyNames(l).forEach(function(t){a[t]=function(){return e[t]}});return a.default=function(){return e},o.d(r,a),r},o.d=function(e,t){for(var n in t)o.o(t,n)&&!o.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},o.e=function(){return Promise.resolve()},o.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.j=9824,function(){var e={9824:0};o.O.j=function(t){return 0===e[t]};var t=function(t,n){var i,r,a=n[0],l=n[1],s=n[2],c=0;if(a.some(function(t){return 0!==e[t]})){for(i in l)o.o(l,i)&&(o.m[i]=l[i]);if(s)var u=s(o)}for(t&&t(n);c<a.length;c++)r=a[c],o.o(e,r)&&e[r]&&e[r][0](),e[r]=0;return o.O(u)},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))}(),o.nc=void 0;var a=o.O(void 0,[3540],function(){return o(5312)});a=o.O(a),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/scoped-notifications/docs.mdx.js"]=a}();